0

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?

0

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/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/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>
  • I don't need to make a specific marker for each category because I'm going to make them toggeable however I changed my 'var secrétariatLayer' to yours but but the marker doesn't show up – Victor Lernout Aug 10 '18 at 13:02
  • You also had grouplayers but never put the data into the grouplayer. You declared the variables as group layer then re-declared them as layers. You would do something like myGroupLayer.addLayer(myLayer); myGroupLayer.addTo(map); – Bill Chappell Aug 10 '18 at 13:55
  • thank for your help, however how do I apply it for the other coordinates? Do I duplicate the filter for each category possible? – Victor Lernout Aug 10 '18 at 18:15
  • I edited the code to show my layer block, for three layers you should have three copies. You only need to change the layer name for all three layers and the filter condition. If it was 10 layers I might make a function but for three it's easier to duplicate the code. – Bill Chappell Aug 10 '18 at 18:29
  • Sorry to disturb you but your help is really helpful, in case I'll have more categories, and since you're talking about it, how should I make the function? – Victor Lernout Aug 10 '18 at 18:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.