{"id":7728,"date":"2015-08-13T14:21:23","date_gmt":"2015-08-13T13:21:23","guid":{"rendered":"http:\/\/www.wjst.de\/blog\/?p=7728"},"modified":"2015-08-19T14:50:08","modified_gmt":"2015-08-19T13:50:08","slug":"leaflet-js-layer-order-layer-address-and-links","status":"publish","type":"post","link":"https:\/\/www.wjst.de\/blog\/sciencesurf\/2015\/08\/leaflet-js-layer-order-layer-address-and-links\/","title":{"rendered":"Leaflet.js – layer order, layer address and links"},"content":{"rendered":"

Leaflet is great for mapping in epidemiology with quick results of just cut & pasting a few lines.\u00a0Problems do start, however, whenever running a more advanced project. It’s a pain, as\u00a0plugins overwrite functions and\u00a0basic css layouts. Or layers do not allow clickable links (as propation is being prohibited). Or geojson data that are\u00a0rejected\u00a0for whatever reason.
\nA\u00a0showcase project<\/a>, that had been planned for\u00a02 days, took more than 1 week\u00a0as the documentation is frequently unclear, incomplete and often hard to understand without any (jsfiddle) example. Numerous Google searches helped, as well as peaking into the sourcecode, while\u00a0also other\u00a0stack overflow posters have been very helpful.<\/p>\n

The following four problems took me several days (with everything referring to leaflet.js 0.7.3<\/a>) Take care to have NO\u00a0plugins enabled for testing. And \u00a0if makes always sense to declare variables before putting the main map setup into some document ready brackets.<\/p>\n

\r\n$(document).ready(function() {\r\n  initmap();\r\n})\r\nvar markers = new L.MarkerClusterGroup...\r\n<\/pre>\n
Links in popups<\/span>
\nDoesn’t work out of the box.\u00a0Stackoverflow helped<\/a>: Basically a hack, see the comments by Asad, as\u00a0this is not good practice.<\/p>\n
\r\nvar link = $('<a href="#" class="speciallink">TestLink<\/a>').click(function() {\r\n    alert("test");\r\n})[0];\r\nmarker.bindPopup(link);\r\n<\/pre>\n
Order of layers
\n<\/span>Cryptic documentation of z-indices. Stackoverflow helped<\/a>: Undocument feature.<\/p>\n
\r\n\/\/Put explicit zIndexes on your mbstyle and mblabels layers:\r\nvar mbstyle = L.mapbox.tileLayer('statecodemog.aa380654', {\r\n    'zIndex': 1\r\n});\r\nvar mblabels = L.mapbox.tileLayer('statecodemog.798453f5', {\r\n    'clickable': 'false',\r\n    'zIndex': 99\r\n});\r\n\/\/Then tell your L.control.layers not to mess around with the zIndexes:\r\nL.control.layers(baseLayers, groupedOverlays, {\r\n    'autoZIndex': false\r\n}).addTo(map);\r\n<\/pre>\n
Addressing of layers
\n<\/span>Unclear documentation. Bl.ocks.org helped<\/a>: Again a hack, the original code is missing a comma.<\/p>\n
\r\nvar MyMarkerGroup = L.FeatureGroup.extend({\r\n  \/\/ override the 'getLayerId' function to return your ids rather then leaflets internal ids\r\n  getLayerId: function(layer){\r\n    return layer.id;\r\n  },\r\n  getLayersById: function(arrayOfLayerIds){\r\n    var layers = [];\r\n    \/\/ some logic to loop over layers and select them by id\r\n    for (var i = arrayOfLayerIds.length - 1; i >= 0; i--) {\r\n      var id = arrayOfLayerIds[i];\r\n      layers.push(this._layers[id]);\r\n    }\r\n    return layers;\r\n  }\r\n});\r\nvar markers = new MyMarkerGroup();\r\nvar marker = new L.marker(latlng, options);\r\nmarker.id = "something"; \/\/ assign your id\r\nmarkers.addLayer(marker); \/\/ add your layer\r\nvar aMarker = markers.getLayer("something"); \/\/ gets  marker by id\r\nvar someMarkers = markers.getLayersById(["foo", "bar"]); \/\/ get markers by their ids\r\n<\/pre>\n
Error in geojson output
\n<\/span>Basically not a leaflet problem. But something that can be easily tested at http:\/\/geojsonlint.com<\/a>.<\/p>\n
Cool stuff: d3.js integration<\/a> and R data processing<\/a>…<\/p>\n\n
 <\/p>\n
\n  CC-BY-NC Science Surf , accessed 10.04.2026<\/span>\n <\/div>","protected":false},"excerpt":{"rendered":"
Leaflet is great for mapping in epidemiology with quick results of just cut & pasting a few lines.\u00a0Problems do start, however, whenever running a more advanced project. It’s a pain, as\u00a0plugins overwrite functions and\u00a0basic css layouts. Or layers do not allow clickable links (as propation is being prohibited). Or geojson data that are\u00a0rejected\u00a0for whatever reason. … Continue reading Leaflet.js – layer order, layer address and links<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,9],"tags":[1778,276,2944,565],"class_list":["post-7728","post","type-post","status-publish","format-standard","hentry","category-genetics-biology","category-computer-software","tag-disease","tag-epidemiology","tag-mapping","tag-software"],"_links":{"self":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts\/7728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/comments?post=7728"}],"version-history":[{"count":11,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts\/7728\/revisions"}],"predecessor-version":[{"id":7740,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts\/7728\/revisions\/7740"}],"wp:attachment":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/media?parent=7728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/categories?post=7728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/tags?post=7728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}