1

I have multiple layers created depending on a category, they show on the map but now I wish to bind a pop-up on them showing some properties like "Nom de la structure" etc

Here is a dummy code from my Json

{
    "type": "Feature",
    "properties": {
        "Nom de la structure": "Stade Olympique Maritime Boulonnais",
        "Nom": "Monteuuis Pierre",
        "Adresse": "4 rue du Colonel de l'Esperance",
        "category": "CVGd",
        "Exemple 1": "Organisation d'un match de Basket ball",
        "Exemple 2": "Gestion des partenaires commerciaux",
        "Exemple 3": "Gestion de la communication",
    },
    "geometry": {
        "type": "Point",
        "coordinates": [1.5986012, 50.7202296]
    }

and here is my JS file:

$.getScript("CoordinatesPdC.js");
$(document).ready(function() {

  // Create an object to keep track of active layers and each layer with its markers
  const layers = {
    active: [],
    APEnEvSa: new L.LayerGroup()
  };

  // create the map
  var map = L.map('map').setView([50.5703007,2.4328028], 9);

  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.APEnEvSa = L.geoJson(internships, {
    filter: function(feature, layer) {
      return (feature.properties.category === "APEnEvSa");
    }
  }) //repeat for each category

  // 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);
    }
  });
});
Victor Lernout
  • 57
  • 1
  • 9
  • Do you want the *same* popup for all the layers, or a *similar* popup but with contents depending on some property related to the layer's geojson feature? – IvanSanchez Aug 20 '18 at 14:23
  • I want a popup with contents depending on the properties realted to the layer's geojson feature. To be precise, each feature as the same properties like "telephone" or "adresse" but not the same content – Victor Lernout Aug 20 '18 at 15:04

1 Answers1

0

You can bind a popup to each marker (through each layer) by using the .bindPopup method. So every time you generate a new layer, create a marker variable and use the .bindPopup method to add things like "Nom" "Adresse" etc. To fit it with your example, it may look something like this:

layers.APEnEvSa = L.geoJson(internships, {
    filter: function(feature, layer, latlng) {
        var marker = L.marker(latlng);
        marker.bindPopup(feature.properties.Nom + feature.properties.Adresse);
        var category = feature.properties.category === "APEnEvSa";
        return [category, marker];
    }
});

I inserted "latlng" into where you're calling your filter, but if you are already getting the points (as it sounds like from your description), then you can leave it out. From there, you bind the popup to the marker and you can add whatever information you want to it by using feature.properties.whatever. You can even add plain html within the .bindPopup if you want to clarify the information, like so:

marker.bindPopup('<p align=center>' + '<strong>Nom: </strong>' + feature.properties.Nom + '<strong>Adresse: </strong>' + feature.properties.Adresse);

You are returning the categories for each layer as its own thing, so you would probably have to return an array of both the categories layer and markers (unless someone in the comments knows a better way).

J. Jonah Jameson
  • 67
  • 1
  • 7