Clash Royale CLAN TAG#URR8PPP

Leaflet.js - Create layers and add markers depending on geojson category data?

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?

1 Answer
1

Your markers are already assigned to each later. In your example, you create a layer (with all of its markers) and immediately add it to the map using .addTo(map); Here's the code responsible for it.

.addTo(map);

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

).addTo(map);


Now, you probably want to only display a certain layer based on user input. If so, I suggest adding the related layer to the map on a click event. Then when the event is triggered a layer is added. Here's the code for doing that. sécurité.addTo(map)

A layer is removed using map.removeLayer(sécurité);

sécurité.addTo(map)

map.removeLayer(sécurité);

Below is a working example based on your initial code. (I did write it in jQuery as my vanilla JavaScript could be better) You can also view it on jsFiddle here.

I left some comments in the code to explain what each part does. I hope that helps you with your understanding.

var internships = [
"features": [
"type": "Feature",
"properties":
"category": "entretient",
"Name": "green"
,
"geometry":
"type": "Point",
"coordinates": [3.162994, 50.807149]

,

"type": "Feature",
"properties":
"category": "securité",
"Name": "blue"
,
"geometry":
"type": "Point",
"coordinates": [3.290146, 50.334421]

,

"type": "Feature",
"properties":
"category": "secretaria",
"Name": "red"
,
"geometry":
"type": "Point",
"coordinates": [2.256216, 50.744787]


]
];

$(document).ready(function()

// Create an object to keep track of active layers and each layer with its markers
const layers =
active: ,
entretientLayer: new L.LayerGroup(),
sécuritéLayer: new L.LayerGroup(),
secrétariatLayer: new L.LayerGroup(),
;

// create the map
var map = L.map('map').setView([50.8010, 3.1675], 6,5);

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);

// based on the category assign a marker to the layer
layers.entretientLayer = L.geoJson(internships,
filter: function(feature, layer)
return (feature.properties.category === "entretient");

)

layers.sécuritéLayer = L.geoJson(internships,
filter: function(feature, layer)
return (feature.properties.category === "securité");

)

layers.secrétariatLayer = L.geoJson(internships,
filter: function(feature, layer)
return (feature.properties.category === "secretaria");

)

// register click event
$('button').on('click', function(e)
const layerName = e.target.name;

// if a layer is already active, remove it from the map and the active array
if (layers.active.includes(layerName))
layers.active = layers.active.filter(layer => layer !== layerName);
map.removeLayer(layers[layerName]);
else
// add the layer to the map and to the active array
layers.active.push(layerName);
layers[layerName].addTo(map);

);
);

#map
height: 140px;
width: 100%;


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet-src.js"></script>


<div class="button-group">
<button name="entretientLayer">entretient</button>
<button name="sécuritéLayer">sécurité</button>
<button name="secrétariatLayer">secrétariat</button>
</div>
<p></p>
<div id="map"></div>

UPDATE: updated leaflet.js to version 1.3.3.
The difference with the update is that each layer needs to be initialised using the new key word. Code is updated to reflect the change.

new

<div id="map"></div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.