Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I did this by adding each feature type to a different <a href="http://leafletjs.com/examples/layers-control.html" rel="nofollow noreferrer">LayerGroup</a> based on a property of the feature. e.g.</p> <p>GeoJSON</p> <pre><code>var data =[ { type: "Feature", properties: { type: "type1" }, geometry: { type: "Point", coordinates: [-1.252,52.107] } }, { type: "Feature", properties: { type: "type2" }, geometry: { type: "Point", coordinates: [-2.252,54.107] } } ]; </code></pre> <p>Create the <a href="http://leafletjs.com/reference.html#geojson" rel="nofollow noreferrer">GeoJSON</a> Layer</p> <pre><code>//array to store layers for each feature type var mapLayerGroups = []; //draw GEOJSON - don't add the GEOJSON layer to the map here L.geoJson(data, {onEachFeature: onEachFeature})//.addTo(map); /* *for all features create a layerGroup for each feature type and add the feature to the layerGroup */ function onEachFeature(feature, featureLayer) { //does layerGroup already exist? if not create it and add to map var lg = mapLayerGroups[feature.properties.type]; if (lg === undefined) { lg = new L.layerGroup(); //add the layer to the map lg.addTo(map); //store layer mapLayerGroups[feature.properties.type] = lg; } //add the feature to the layer lg.addLayer(featureLayer); } </code></pre> <p>Then you can call the Leaflet <a href="http://leafletjs.com/reference.html#layergroup" rel="nofollow noreferrer">map.addLayer/removeLayer</a> functions e.g.</p> <pre><code>//Show layerGroup with feature of "type1" showLayer("type1"); /* * show/hide layerGroup */ function showLayer(id) { var lg = mapLayerGroups[id]; map.addLayer(lg); } function hideLayer(id) { var lg = mapLayerGroups[id]; map.removeLayer(lg); } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload