Adding a handler to popup leaflet

Question

Suppose we have a project using leaflet.js. When clicking on the map i want a popup to appear that gives me a dropdown menu with a submit button. The dropdown function has 3 options a,b,c. I want to be able to create a submit button that creates a marker at the location (LatLong) of the popup. this marker must show the string of the choice made in the dropdown menu.

First of all i tried option 1 in the code, however a i get a reference error whenever i create a handler. I also tried the option 2 where one creates a div object. I tried creating the div object manually as well with ID "popupcontent" which worked, however the handler does not remember the lat-long cooridnates.

In summary:

I want to create a button that makes a marker at the place clicked with the content of either a,b,c depending on the choice in the dropdown menu.

option 1

var dropdown =
    `Type to submit:
    <select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value = "c">c</option>
    </select>: <button onclick="buttonFunction()">submit</button>`

  var popup = L.popup();
  function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent(dropdown)
    .openOn(mymap);
    //L.marker(e.latlng).addTo(mymap);
    //L.marker([e.latlng.lat, e.latlng.long]).addTo(mymap)
  }

option2

var popup = L.popup();
  var container = L.DomUtil.create('div');
  var btn = L.DomUtil.create('button', '', container);
  btn.setAttribute('type', 'button');
  btn.innerHTML = 'hello kees';
  L.DomEvent.on(btn, 'click', () => {
    alert("hello kees");
  });
  function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent(container)
    .openOn(mymap);
    //L.marker(e.latlng).addTo(mymap);
    //L.marker([e.latlng.lat, e.latlng.long]).addTo(mymap)
  }

GOAL:

function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent( "LatLong: "+ e.latlng.lat + "," + e.latlng.lng)
    .openOn(mymap);
    lat = e.latlng.lat
    long = e.latlng.lng
  }

function buttonFunction() {
  var selected = document.getElementById("popupContent");
  var value = dropDown.options[dropDown.selectedIndex].text;
  L.marker(lat,long).addTo(mymap);
}

What do you want to achieve when you call buttonFunction? Add another marker? I didn't understand. Can you rephrase your description to be more clear? — kboul
Ok. So you want to click on a map, create a popup at the position you clicked with the mouse and then call buttonFunction and create a marker in the position of the popup therefore under the popup. correct? — kboul
yes :D. I manually created a div object outside the onMapClick function but this only worked in specific situations. — K.Til
Is that what you want to achieve? If that is the case I will post it as an answer cause still it is quite strange to add a popup first and then a marker... — kboul

kboul kboul · Accepted Answer · 2019-01-14T13:36:24

First, create your const which will hold the html and assign an id to the select element to be able to get the value later.

Second, create the map onclick function get the latLng and create on the fly the popup.

Third step, get the value from the drop down list and create the marker dynamically by assigning as its popup select's value.

Open the example in full page to reproduce it.

#map {
  height: 100vh;
}

body {
  margin: 0px;
  padding: 0px;
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

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

<script>
  let latLng;
  const map = L.map('map').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  const dropdown =
    `Type to submit:
    <select id="ddlViewBy">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value = "c">c</option>
    </select>: <button onclick="buttonFunction()">submit</button>`;

  map.on('click', e => {
    const popup = L.popup()
      .setLatLng(e.latlng)
      .setContent(dropdown)
      .openOn(map);
    latLng = e.latlng;
  })

  buttonFunction = () => {
    const dropdonwValue = document.getElementById("ddlViewBy").value;
    map.closePopup()
    L.marker(latLng)
      .bindPopup(dropdonwValue)
      .addTo(map)
  }

</script>

Adding a handler to popup leaflet

1 Answers