2

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);
3

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

  • yeah ur right. but how can i bind "popupContent" to the marker? marker = new L.Marker(e.latlng).bindPopup(popupContent); not working... same with marker = new L.Marker(e.latlng).setContent(popupContent).open(onMap); my primary idea was not to add a popup to the marker but to open the popupContent of the feature by clicking its marker. – howard.D Dec 2 '16 at 17:46
  • you can refer to leaflet document link to bind popup. – yiyanggis Dec 4 '16 at 3:32
  • to do accomplish your primary idea, adding an event when you click the marker to trigger the popup binding with the feature to open. – yiyanggis Dec 4 '16 at 3:34
1

Your code is missing the parameters for the layer.bindPopup(popupContent). As such I would add:

layer.bindPopup(popupContent(feature, layer, name, desc, lat, lon));

to complete your code.

Also, you might want to store your markers in a collection as well.

  • the popup for my feature works perfectly by clicking the feature. what iam looking for is a click function for its marker to open the popup. i updated the whole code above – howard.D Nov 30 '16 at 18:15

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.