{"id":1054,"date":"2023-07-24T13:12:18","date_gmt":"2023-07-24T12:12:18","guid":{"rendered":"https:\/\/ourlocality.org\/eastlothianpaths\/?page_id=1054"},"modified":"2025-03-01T10:10:13","modified_gmt":"2025-03-01T10:10:13","slug":"all-paths-leaflet","status":"publish","type":"page","link":"https:\/\/ourlocality.org\/eastlothianpaths\/leaflet-maps\/all-paths-leaflet\/","title":{"rendered":"All Paths (Leaflet)"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull tw-stretched-link is-content-justification-right is-layout-flex wp-container-core-group-is-layout-0c0c9e10 wp-block-group-is-layout-flex\"><p><div class=\"leaflet-map WPLeafletMap\" style=\"height:800px; width:100%;\"><\/div><script>\nwindow.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];\nwindow.WPLeafletMapPlugin.push(function WPLeafletMapShortcode() {\/*<script>*\/\nvar baseUrl = atob('aHR0cHM6Ly97c30udGlsZS5vcGVudG9wb21hcC5vcmcve3p9L3t4fS97eX0ucG5n');\nvar base = (!baseUrl && window.MQ) ?\n    window.MQ.mapLayer() : L.tileLayer(baseUrl,\n        L.Util.extend({}, {\n            detectRetina: 0,\n        },\n        {\"subdomains\":\"abc\",\"noWrap\":false,\"maxZoom\":19}        )\n    );\n    var options = L.Util.extend({}, {\n        layers: [base],\n        attributionControl: false\n    },\n    {\"zoomControl\":true,\"scrollWheelZoom\":true,\"doubleClickZoom\":true,\"fitBounds\":true,\"minZoom\":0,\"maxZoom\":19,\"maxBounds\":null,\"attribution\":\"<a href=\\\"http:\\\/\\\/leafletjs.com\\\" title=\\\"A JS library for interactive maps\\\">Leaflet<\\\/a>; \\u00a9 <a href=\\\"http:\\\/\\\/www.openstreetmap.org\\\/copyright\\\">OpenStreetMap<\\\/a> contributors\"},\n    {});\nwindow.WPLeafletMapPlugin.createMap(options).setView([56.007423807781,-2.7404022216797],10);});<\/script>\n<script>\nwindow.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];\nwindow.WPLeafletMapPlugin.push(function WPLeafletkmlShortcode() {\/*<script>*\/\nvar src = 'https:\/\/ourlocality.org\/eastlothianpaths\/files\/2024\/07\/JMW-cycling.kml';\nvar default_style = {\"color\":\"green\",\"weight\":10};\nvar rewrite_keys = {\n    stroke : 'color',\n    'stroke-width' : 'weight',\n    'stroke-opacity' : 'opacity',\n    fill : 'fillColor',\n    'fill-opacity' : 'fillOpacity',\n};\n\/\/ htmlspecialchars converts & to \"&amp;\"; maybe unnecessarily, and maybe 3x\nvar ampersandRegex = \/&(?:amp;){1,3}\/g\nvar layer = L.ajaxGeoJson(src.replace(ampersandRegex, '&'), {\n    type: 'kml',\n    style : layerStyle,\n    onEachFeature : onEachFeature,\n    pointToLayer: pointToLayer\n});\nvar fitbounds = 0;\nvar circleMarker = 0;\nvar popup_text = window.WPLeafletMapPlugin.unescape(\"John Muir Way Cycling: &lt;b&gt;{name}:&lt;\/b&gt; {description}\");\nvar popup_property = \"\";\nvar table_view = 0;\nvar group = window.WPLeafletMapPlugin.getCurrentGroup();\nvar markerOptions = window.WPLeafletMapPlugin.getIconOptions({});\nlayer.addTo( group );\nwindow.WPLeafletMapPlugin.geojsons.push( layer );\nif (fitbounds) {\n    layer.on('ready', function () {\n        this.map.fitBounds( this.getBounds() );\n    });\n}\nfunction layerStyle (feature) {\n    var props = feature.properties || {};\n    var style = {};\n    function camelFun (_, first_letter) {\n        return first_letter.toUpperCase();\n    };\n    for (var key in props) {\n        if (key.match('-')) {\n            var camelcase = key.replace(\/-(\\w)\/, camelFun);\n            style[ camelcase ] = props[ key ];\n        }\n        \/\/ rewrite style keys from geojson.io\n        if (rewrite_keys[ key ]) {\n            style[ rewrite_keys[ key ] ] = props[ key ];\n        }\n    }\n    return L.Util.extend(style, default_style);\n}\nfunction onEachFeature (feature, layer) {\n    var props = feature.properties || {};\n    var text;\n    if (table_view) {\n        text = window.WPLeafletMapPlugin.propsToTable(props);\n    } else {\n        text = popup_property\n            ? props[ popup_property ]\n            : window.WPLeafletMapPlugin.template(\n                popup_text, \n                feature.properties\n            );\n    }\n    if (text) {\n        layer.bindPopup( text );\n    }\n}\n    function pointToLayer (feature, latlng) {\n    if (circleMarker) {\n        return L.circleMarker(latlng);\n    }\n    return L.marker(latlng, markerOptions);\n}});<\/script><script>\nwindow.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];\nwindow.WPLeafletMapPlugin.push(function WPLeafletkmlShortcode() {\/*<script>*\/\nvar src = 'https:\/\/ourlocality.org\/eastlothianpaths\/files\/2024\/07\/JMW-walking.kml';\nvar default_style = {\"color\":\"purple\",\"weight\":10};\nvar rewrite_keys = {\n    stroke : 'color',\n    'stroke-width' : 'weight',\n    'stroke-opacity' : 'opacity',\n    fill : 'fillColor',\n    'fill-opacity' : 'fillOpacity',\n};\n\/\/ htmlspecialchars converts & to \"&amp;\"; maybe unnecessarily, and maybe 3x\nvar ampersandRegex = \/&(?:amp;){1,3}\/g\nvar layer = L.ajaxGeoJson(src.replace(ampersandRegex, '&'), {\n    type: 'kml',\n    style : layerStyle,\n    onEachFeature : onEachFeature,\n    pointToLayer: pointToLayer\n});\nvar fitbounds = 0;\nvar circleMarker = 0;\nvar popup_text = window.WPLeafletMapPlugin.unescape(\"John Muir Way Walking: &lt;b&gt;{name}:&lt;\/b&gt; {description}\");\nvar popup_property = \"\";\nvar table_view = 0;\nvar group = window.WPLeafletMapPlugin.getCurrentGroup();\nvar markerOptions = window.WPLeafletMapPlugin.getIconOptions({});\nlayer.addTo( group );\nwindow.WPLeafletMapPlugin.geojsons.push( layer );\nif (fitbounds) {\n    layer.on('ready', function () {\n        this.map.fitBounds( this.getBounds() );\n    });\n}\nfunction layerStyle (feature) {\n    var props = feature.properties || {};\n    var style = {};\n    function camelFun (_, first_letter) {\n        return first_letter.toUpperCase();\n    };\n    for (var key in props) {\n        if (key.match('-')) {\n            var camelcase = key.replace(\/-(\\w)\/, camelFun);\n            style[ camelcase ] = props[ key ];\n        }\n        \/\/ rewrite style keys from geojson.io\n        if (rewrite_keys[ key ]) {\n            style[ rewrite_keys[ key ] ] = props[ key ];\n        }\n    }\n    return L.Util.extend(style, default_style);\n}\nfunction onEachFeature (feature, layer) {\n    var props = feature.properties || {};\n    var text;\n    if (table_view) {\n        text = window.WPLeafletMapPlugin.propsToTable(props);\n    } else {\n        text = popup_property\n            ? props[ popup_property ]\n            : window.WPLeafletMapPlugin.template(\n                popup_text, \n                feature.properties\n            );\n    }\n    if (text) {\n        layer.bindPopup( text );\n    }\n}\n    function pointToLayer (feature, latlng) {\n    if (circleMarker) {\n        return L.circleMarker(latlng);\n    }\n    return L.marker(latlng, markerOptions);\n}});<\/script><script>\nwindow.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];\nwindow.WPLeafletMapPlugin.push(function WPLeafletkmlShortcode() {\/*<script>*\/\nvar src = 'https:\/\/ourlocality.org\/eastlothianpaths\/files\/2023\/07\/All-Paths.kml';\nvar default_style = {\"color\":\"red\",\"weight\":3,\"dashArray\":\"2,8\"};\nvar rewrite_keys = {\n    stroke : 'color',\n    'stroke-width' : 'weight',\n    'stroke-opacity' : 'opacity',\n    fill : 'fillColor',\n    'fill-opacity' : 'fillOpacity',\n};\n\/\/ htmlspecialchars converts & to \"&amp;\"; maybe unnecessarily, and maybe 3x\nvar ampersandRegex = \/&(?:amp;){1,3}\/g\nvar layer = L.ajaxGeoJson(src.replace(ampersandRegex, '&'), {\n    type: 'kml',\n    style : layerStyle,\n    onEachFeature : onEachFeature,\n    pointToLayer: pointToLayer\n});\nvar fitbounds = 0;\nvar circleMarker = 0;\nvar popup_text = window.WPLeafletMapPlugin.unescape(\"All Paths: &lt;b&gt;{name}:&lt;\/b&gt; {description}\");\nvar popup_property = \"\";\nvar table_view = 0;\nvar group = window.WPLeafletMapPlugin.getCurrentGroup();\nvar markerOptions = window.WPLeafletMapPlugin.getIconOptions({});\nlayer.addTo( group );\nwindow.WPLeafletMapPlugin.geojsons.push( layer );\nif (fitbounds) {\n    layer.on('ready', function () {\n        this.map.fitBounds( this.getBounds() );\n    });\n}\nfunction layerStyle (feature) {\n    var props = feature.properties || {};\n    var style = {};\n    function camelFun (_, first_letter) {\n        return first_letter.toUpperCase();\n    };\n    for (var key in props) {\n        if (key.match('-')) {\n            var camelcase = key.replace(\/-(\\w)\/, camelFun);\n            style[ camelcase ] = props[ key ];\n        }\n        \/\/ rewrite style keys from geojson.io\n        if (rewrite_keys[ key ]) {\n            style[ rewrite_keys[ key ] ] = props[ key ];\n        }\n    }\n    return L.Util.extend(style, default_style);\n}\nfunction onEachFeature (feature, layer) {\n    var props = feature.properties || {};\n    var text;\n    if (table_view) {\n        text = window.WPLeafletMapPlugin.propsToTable(props);\n    } else {\n        text = popup_property\n            ? props[ popup_property ]\n            : window.WPLeafletMapPlugin.template(\n                popup_text, \n                feature.properties\n            );\n    }\n    if (text) {\n        layer.bindPopup( text );\n    }\n}\n    function pointToLayer (feature, latlng) {\n    if (circleMarker) {\n        return L.circleMarker(latlng);\n    }\n    return L.marker(latlng, markerOptions);\n}});<\/script><script>\nwindow.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];\nwindow.WPLeafletMapPlugin.push(function WPLeafletkmlShortcode() {\/*<script>*\/\nvar src = 'https:\/\/ourlocality.org\/eastlothianpaths\/files\/2023\/07\/Core-Paths.kml';\nvar default_style = {\"color\":\"blue\",\"weight\":3};\nvar rewrite_keys = {\n    stroke : 'color',\n    'stroke-width' : 'weight',\n    'stroke-opacity' : 'opacity',\n    fill : 'fillColor',\n    'fill-opacity' : 'fillOpacity',\n};\n\/\/ htmlspecialchars converts & to \"&amp;\"; maybe unnecessarily, and maybe 3x\nvar ampersandRegex = \/&(?:amp;){1,3}\/g\nvar layer = L.ajaxGeoJson(src.replace(ampersandRegex, '&'), {\n    type: 'kml',\n    style : layerStyle,\n    onEachFeature : onEachFeature,\n    pointToLayer: pointToLayer\n});\nvar fitbounds = 0;\nvar circleMarker = 0;\nvar popup_text = window.WPLeafletMapPlugin.unescape(\"Core Paths: &lt;b&gt;{name}:&lt;\/b&gt; {description}\");\nvar popup_property = \"\";\nvar table_view = 0;\nvar group = window.WPLeafletMapPlugin.getCurrentGroup();\nvar markerOptions = window.WPLeafletMapPlugin.getIconOptions({});\nlayer.addTo( group );\nwindow.WPLeafletMapPlugin.geojsons.push( layer );\nif (fitbounds) {\n    layer.on('ready', function () {\n        this.map.fitBounds( this.getBounds() );\n    });\n}\nfunction layerStyle (feature) {\n    var props = feature.properties || {};\n    var style = {};\n    function camelFun (_, first_letter) {\n        return first_letter.toUpperCase();\n    };\n    for (var key in props) {\n        if (key.match('-')) {\n            var camelcase = key.replace(\/-(\\w)\/, camelFun);\n            style[ camelcase ] = props[ key ];\n        }\n        \/\/ rewrite style keys from geojson.io\n        if (rewrite_keys[ key ]) {\n            style[ rewrite_keys[ key ] ] = props[ key ];\n        }\n    }\n    return L.Util.extend(style, default_style);\n}\nfunction onEachFeature (feature, layer) {\n    var props = feature.properties || {};\n    var text;\n    if (table_view) {\n        text = window.WPLeafletMapPlugin.propsToTable(props);\n    } else {\n        text = popup_property\n            ? props[ popup_property ]\n            : window.WPLeafletMapPlugin.template(\n                popup_text, \n                feature.properties\n            );\n    }\n    if (text) {\n        layer.bindPopup( text );\n    }\n}\n    function pointToLayer (feature, latlng) {\n    if (circleMarker) {\n        return L.circleMarker(latlng);\n    }\n    return L.marker(latlng, markerOptions);\n}});<\/script><\/p>\n<\/div>\n\n\n\n<p>Here we can display 2 separate kml files. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;leaflet-kml listtracks src=\"https:\/\/ourlocality.org\/eastlothianpaths\/files\/2024\/07\/JMW-cycling.kml\" color=green weight=10]John Muir Way Cycling: &lt;b&gt;{name}:&lt;\/b&gt; {description}&#091;\/leaflet-kml]&#091;leaflet-kml src=\"https:\/\/ourlocality.org\/eastlothianpaths\/files\/2024\/07\/JMW-walking.kml\" color=purple weight=10]John Muir Way Walking: &lt;b&gt;{name}:&lt;\/b&gt; {description}&#091;\/leaflet-kml]&#091;leaflet-kml src=\"https:\/\/ourlocality.org\/eastlothianpaths\/files\/2023\/07\/All-Paths.kml\" color=red weight=3 dasharray=\"2,8\"]All Paths: &lt;b&gt;{name}:&lt;\/b&gt; {description}&#091;\/leaflet-kml]&#091;leaflet-kml src=\"https:\/\/ourlocality.org\/eastlothianpaths\/files\/2023\/07\/Core-Paths.kml\" color=blue weight=3]Core Paths: &lt;b&gt;{name}:&lt;\/b&gt; {description}&#091;\/leaflet-kml]<\/code><\/pre>\n\n\n\n<p>We can also add an option to turn each lay on or off. <\/p>\n\n\n\n<p>We can override the default colours, weight and line style.<\/p>\n\n\n\n<p>Finally we can pull out some of the description in the popup.<\/p>\n\n\n\n<div class=\"wp-block-group alignfull is-style-default has-green-background-color has-background tw-top-shape-organic tw-bottom-shape-halftone\" id=\"howallleaflet\" style=\"border-style:none;border-width:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-254f1302 wp-block-group-is-layout-constrained\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The map source here is Leaflet, with minimal adverts for local businesses.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><em>(Please note: Core Paths &#8230; can be anything from a tarmac path to a grassy field margin and this variety is important to provide different experiences for users.)<\/em><\/p>\n\n\n<nav class=\"has-background has-green-background-color items-justified-center wp-block-navigation is-content-justification-center is-layout-flex wp-container-core-navigation-is-layout-a89b3969 wp-block-navigation-is-layout-flex tw-gap-large\" aria-label=\"Default pages\"><ul class=\"wp-block-navigation__container has-background has-green-background-color items-justified-center wp-block-navigation\"><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/ourlocality.org\/eastlothianpaths\/leaflet-core-paths\/\"><span class=\"wp-block-navigation-item__label\">Leaflet Core Paths<\/span><\/a><\/li><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/ourlocality.org\/eastlothianpaths\/all-paths-leaflet\/\"><span class=\"wp-block-navigation-item__label\">Leaflet All Paths<\/span><\/a><\/li><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/ourlocality.org\/eastlothianpaths\/core-path-map\/\"><span class=\"wp-block-navigation-item__label\">Google Core Path<\/span><\/a><\/li><\/ul><\/nav>\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.eastlothian.gov.uk\/downloads\/download\/12660\/east_lothians_core_paths_plan\" target=\"_blank\"><em>Data from: East Lothian Council<\/em> &#8211; Improvement Service.<\/a><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here we can display 2 separate kml files. We can also add an option to turn each lay on or off. We can override the default colours, weight and line style. Finally we can pull out some of the description in the popup. The map source here is Leaflet, with minimal adverts for local businesses.&hellip; <a class=\"more-link\" href=\"https:\/\/ourlocality.org\/eastlothianpaths\/leaflet-maps\/all-paths-leaflet\/\">Continue reading <span class=\"screen-reader-text\">All Paths (Leaflet)<\/span><\/a><\/p>\n","protected":false},"author":573,"featured_media":0,"parent":1225,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"tw-no-title.php","meta":{"footnotes":""},"class_list":["post-1054","page","type-page","status-publish","hentry","entry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ourlocality.org\/eastlothianpaths\/wp-json\/wp\/v2\/pages\/1054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ourlocality.org\/eastlothianpaths\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ourlocality.org\/eastlothianpaths\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ourlocality.org\/eastlothianpaths\/wp-json\/wp\/v2\/users\/573"}],"replies":[{"embeddable":true,"href":"https:\/\/ourlocality.org\/eastlothianpaths\/wp-json\/wp\/v2\/comments?post=1054"}],"version-history":[{"count":21,"href":"https:\/\/ourlocality.org\/eastlothianpaths\/wp-json\/wp\/v2\/pages\/1054\/revisions"}],"predecessor-version":[{"id":1489,"href":"https:\/\/ourlocality.org\/eastlothianpaths\/wp-json\/wp\/v2\/pages\/1054\/revisions\/1489"}],"up":[{"embeddable":true,"href":"https:\/\/ourlocality.org\/eastlothianpaths\/wp-json\/wp\/v2\/pages\/1225"}],"wp:attachment":[{"href":"https:\/\/ourlocality.org\/eastlothianpaths\/wp-json\/wp\/v2\/media?parent=1054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}