[GIS] Open popup of a feature with its marker

featuresleafletmarkersmobilepopup

Got a leaflet map with some features and a button with a search function. A marker is shown at the lat,long where the feature is found. A click on the feature shows a popup.

heres the code for the feature popup:

 function pop_Alle(feature, layer) {

   var popupContent = '<table><tr><th scope="row">BEZ</th><td>' + Autolinker.link(String(feature.properties['BEZ'])) + '</td></tr><tr><th scope="row">NAME</th><td>' + Autolinker.link(String(feature.properties['NAME'])) + '</td></tr><tr><th scope="row">TELEFON</th><td>' + Autolinker.link(String(feature.properties['TELEFON'])) + '</td></tr><tr><th scope="row">OEFFNUNG</th><td>' + Autolinker.link(String(feature.properties['OEFFNUNG'])) + '</td></tr><tr><th scope="row">WWW</th><td>' + Autolinker.link(String(feature.properties['WWW'])) + '</td></tr><tr><th scope="row">EMAIL</th><td>' + Autolinker.link(String(feature.properties['EMAIL'])) + '</td></tr><tr><th scope="row">STRASSE</th><td>' + Autolinker.link(String(feature.properties['STRASSE'])) + '</td></tr><tr><th scope="row">ORT</th><td>' + Autolinker.link(String(feature.properties['ORT'])) + '</td></tr><tr><th scope="row">BEMERKUNG</th><td>' + Autolinker.link(String(feature.properties['BEMERKUNG'])) + '</td></tr><tr><th scope="row">PLZ</th><td>' + Autolinker.link(String(feature.properties['PLZ'])) + '</td></tr><tr><th scope="row">Hkat</th><td>' + Autolinker.link(String(feature.properties['Hkat'])) + '</td></tr><tr><th scope="row">Nkat</th><td>' + Autolinker.link(String(feature.properties['Nkat'])) + '</td></tr></table>';
        layer.bindPopup(popupContent);
    }

    function doStyleAlle() {
        return {
            radius: 0.0,
            fillColor: '#e31a1c',
            color: '#000000',
            weight: 0.0,
            opacity: 1.0,
            dashArray: '',
            fillOpacity: 0.0
        }
    }


    function doPointToLayerAlle(feature, latlng) {
        return L.circleMarker(latlng, doStyleAlle())
    }
    var json_AlleJSON = new L.geoJson(json_Alle, {
        onEachFeature: pop_Alle, 
        pointToLayer: doPointToLayerAlle
        });



    var searchName = new L.Control.Search({layer: L.featureGroup([json_AlleJSON]) ,
textPlaceholder: 'Bitte einen Suchbegriff eingeben',
propertyName: 'NAME',
circleLocation: false,
markerLocation:false,
zoom: null});

var marker;
searchName.on('search_locationfound', function(e) {

e.layer.setStyle({radius: 5.0, fillColor: 'red', color: 'red', fillOpacity: 1});

   marker = new L.Marker(e.latlng);
   marker.on('click', markerOnClick);
   map.addLayer(marker);
});

map.addControl(searchName);

    function markerOnClick(e) {
    e.layer.openPopup().openOn(map);
    };

How can I open the popup of the feature by clicking its marker?

I thought it might work with e.layer.openPopup().openOn(map); but unfortunately it doesn't

Edit:
Tried both and its not working:

marker = new L.Marker(e.latlng).bindPopup(popupContent);

marker = new L.Marker(e.latlng).setContent(popupContent).open(onMap);

Best Answer

looks like you bind popup to the feature but not to the marker,

try:

marker = new L.Marker(e.latlng).bindPopup(content);
map.addLayer(marker);

to bind popup to marker

it will open popup when you click on marker

you can also try:

L.popup().setLatLng(e.latlng)
.setContent(content)
.openOn(map);

to open popup wherever you click on map

Related Question