1

I just want to ask if there is some possibility of determining where the popup appears. In my case, when I mouseOver on some country on the map, some of the popup windows appear in a nonsensical position.

I have an onEachCountry function where I define a popupContent and also create a popup. And in my mouseOver function I openPopup. Popup is connected with geojson file with Country names. So for example when i mouseover on France the popup will appear on little Island of France in Indian ocean and I want it on France.

function mouseOver(e) {
  let layer = e.target;
  layer.openPopup();
  let ishiglightedlayer = layer.options.weight === 2;
  if (ishiglightedlayer) {
    layer.setStyle({ fillOpacity: 0.5 });
  } else {
    layer.setStyle({ fillColor: "#78dfff" });
  }
}

function onEachCountry(country, layer) {
  const countryName = country.properties.ADMIN;
  layer.bindPopup(countryName);
  // events
  layer.on({
    mouseover: mouseOver,
    mouseout: mouseOut,
    click: selectLayer,
  });
}
2
  • 2
    let popup = layer.getPopup() then popup.setLatLng(wherever). Do check leafletjs.com/reference May 4 at 21:32
  • 2
    This happens because some countries are described with multipolygons (array of several separate polygons) and default popup location for such multipolygon layer is center of the last polygon in the multipolygon array. Where do you want popup to appear? If at the mouse location, then you can open popup with layer.openPopup(e.latlng). Or you want to open popup in the center of the polygon?
    – TomazicM
    May 4 at 21:48

0

Your Answer

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

Browse other questions tagged or ask your own question.