TransWikia.com

Creating layers depending on a property?

Geographic Information Systems Asked by Victor Lernout on January 15, 2021

I have a .js file with coordinates for internships:

var internships = [{
  "features": [
    {"type":"Feature","properties":{"category":"entretient","Name":"green"},"geometry":{"type":"Point","coordinates":[50.807149, 3.162994]}},
    {"type":"Feature","properties":{"category":"securité","Name":"blue"},"geometry":{"type":"Point","coordinates":[50.334421, 3.290146]}},
    {"type":"Feature","properties":{"category":"secretaria","Name":"red"},"geometry":{"type":"Point","coordinates":[50.744787, 2.256216]}}
  ]
}];

I’ve found this bit of code allowing me to create layers depending on a property and here what my JS looks like:

$.getScript("CoordinatesPdC.js");

function mapLoad() {
  var sécuritéLayer = new L.LayerGroup();
  var secrétariatLayer = new L.LayerGroup();
  var entretientLayer = new L.LayerGroup();

  var map = L.map('map').setView([50.2910, 2.7775], 8);

  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, '
  }).addTo(map);

  var marker = L.marker([50.2910, 2.7775]).addTo(map);

  var entretientLayer = L.geoJson(internships, {
    filter: function (feature, layer) {
      return (feature.properties.category === "entretient");
    }
  }).addTo(map);

  var sécuritéLayer = L.geoJson(internships, {
    filter: function (feature, layer) {
      return (feature.properties.category === "sécurité");
    }
  }).addTo(map);

  var secrétariatLayer = L.geoJson(internships, {
    filter: function (feature, layer) {
      return (feature.properties.category === "secrétariat");
    }
  }).addTo(map);

}

window.onload = mapLoad;

But now I have to create the markes assigned to these layers, how can I achieve that?

geojsonlayersleafletmarkers

One Answer

You're missing the pointToLayer function. Also I checked your GeoJSON and it didn't meet the GeoJSON specs. Look at geojsonlint.com and geojson.io part of it was a data issue 

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

</head>

<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</div>

<script>

var internships = {
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "properties": {
                "category": "entretient",
                "Name": "green"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    50.807149,
                    3.162994
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "category": "securité",
                "Name": "blue"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    50.334421, 3.290146
                ]
            }
        }, {
            "type": "Feature",
            "properties": {
                "category": "secretaria",
                "Name": "red"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [50.744787, 2.256216]
            }
        }
    ]
}

    var map = L.map('map').setView([-3.337953961416472, 38.320], 4);  

    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
    osm.addTo(map);

    //Layer
    var myLayer = L.geoJSON(internships, {  

        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, );
        },

        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Name);
        },

            filter: function(feature, layer) {   
         return (feature.properties.category === "secretaria");
        }

    }).addTo(map);
    //END Layer

</script>
</body>
</html>

Answered by Bill Chappell on January 15, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP