CODEWITHSUNDEEP
javascripthtmlleaflet
Wonka
Wonka

Reputation: 23

Leaflet.js - Create marker and show popup on a map

I'm using Leaflet JavaScript API to create a popup when I click on a certain HTML element. The problem is that the popup won't display on my map. I'm not sure what is wrong with my code.

Below is an example of a feature from the json file. Notice I assigned the whole json object as a var dataset for convenient.

var dataset = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "stemburo": "Sporthal Nieuwland",
        "aantal_stemmen": 3753,
        "lat": 52.2006665,
        "lng": 5.3758691,
        "Actief": 34,
        "Amersfoort 2014": 348,
        "Blanco lijst Chel": 5,
        "Burger Partij Amersfoort": 258,
        "Christen Democratisch App\u00e9l": 556,
        "ChristenUnie": 350,
        "DENK": 117,
        "Democraten 66": 525,
        "GroenLinks": 345,
        "Partij van de Arbeid": 239,
        "Socialistische Partij": 189,
        "Staatkundig Gereformeerde Partij": 42,
        "Volkspartij voor Vrijheid en Democratie": 717,
        "Vrede en Recht": 28
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          5.3758691,
          52.2006665
        ]
      }
    }

Below is a part of my JavaScript code to create the HTML elements. I used JQuery's $.each to read the dataset. I assigned the 'stemburo' property value (from the json object) as the element's id attribute .

When an element is clicked, it checks if the clicked id value is the same as one of the properties.stemburo value. Subsequently, a popup should be display based on the property's coordinates. 

$.each(dataset.features,function(key,val){
    var stemlocaties =val.properties.stemburo;
    var newElement= document.createElement('a');
    newElement.id= stemlocaties;
    newElement.className='list-group-item list-group-item-action';
    newElement.innerHTML=stemlocaties;
    document.getElementById('stemlocaties').appendChild(newElement);

    newElement.onclick=function(){
        if (val.properties.stemburo===this.id){
            var lng = val.geometry.coordinates[0];
            var lat = val.geometry.coordinates[1];
            L.popup()
              .setLatLng([lat,lng])
              .setContent('New popup text!')
              .openOn(map);

        }
    };

    });

I'm still new to JavaScript. Any feedback would be appreciated.

Upvotes: 2

Views: 9038

Answers (1)

Roy Scheffers
Roy Scheffers

Reputation: 3908

Here's another way to solve the issue you are facing. If you read the leaflet.js docs, can find out how to add a marker and attach a popup dialog to it.

Here's the line that adds a marker and attaches a popup to it. L.marker(location).addTo(myMap).bindPopup(popupContent).

It takes a little more effort to arrange the data to be able to easily map over it, create a location, and popupContent variables which can be used to fill the popup with information. Here's an example of how to use the dataset you provided and create markers with popups.

// Create the map and set the view and some properties
var myMap = L.map('mapid').setView([52.2, 5.37], 12);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  // maxZoom: 5,
  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>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(myMap);

var dataset = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "stemburo": "Sporthal Nieuwland",
        "aantal_stemmen": 3753,
        "lat": 52.2006665,
        "lng": 5.3758691,
        "Actief": 34,
        "Amersfoort 2014": 348,
        "Blanco lijst Chel": 5,
        "Burger Partij Amersfoort": 258,
        "Christen Democratisch App\u00e9l": 556,
        "ChristenUnie": 350,
        "DENK": 117,
        "Democraten 66": 525,
        "GroenLinks": 345,
        "Partij van de Arbeid": 239,
        "Socialistische Partij": 189,
        "Staatkundig Gereformeerde Partij": 42,
        "Volkspartij voor Vrijheid en Democratie": 717,
        "Vrede en Recht": 28
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          52.2006665,
          5.3758691
        ]
      }
    }
  ]
};

// map over the dataset features, create a marker for each and link a popup.
dataset.features.map(function(feature) {
	const location = feature.geometry.coordinates;
  let partijen = Object
  	.keys(feature.properties)
    .filter(item => !['stemburo', 'lat', 'lng'].includes(item));
  
  const popupContent = 
  	'<h2>' + 
    	feature.properties.stemburo + 
    '</h2>' + 
    partijen.map((naam) => '<p><strong>' + naam + '</strong>: ' + feature.properties[naam] + '</p>').join('');
  
  // add the marker and popup to the map.
  L.marker(location).addTo(myMap).bindPopup(popupContent);
});
#mapid {
  height: 400px;
}

.leaflet-popup-content p {
    margin: 3px 0 !important;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />

<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>

<div id="mapid"></div>

Here's also a jsFiddle with the same example.

Upvotes: 5

Related Questions