CODEWITHSUNDEEP
javascriptjqueryjquery-mobileleaflet
lornz
lornz

Reputation: 306

leaflet map: make polygon clickable

I managed to create map with leaflet.js & jQuery mobile. Now I need to get rid of jQuery mobile and just use jQuery instead.

Everything works just fine, but I can't click the polygons which I draw on the map anymore. It worked with jQuery mobile before.

Any hints?

here is my simplified code:

var map = L.map('map', {
        zoomControl: false
    });
    L.tileLayer('http://{s}.tile.cloudmade.com/**apikey***/997/256/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>',
        maxZoom: 18
    }).addTo(map);

For the polygons:

var geojsonFeature = { "type": "Polygon","coordinates": value.polygon};                             
var polycolor = getGebColor(value.geb_nr);                          
var geojsonStyle = {"color": polycolor};                            
polygons[i] = L.geoJson(geojsonFeature, {style: geojsonStyle}).addTo(map);

// make clickable
polygons[i].on('click', function(e) {
      if (lastMarker) {
         map.removeLayer(lastMarker);
  }
  var url = "http://*****/tugetherMap.php?callback=&id="+value.id+"&type=B";
  markers[i] = L.marker([value.point[1], value.point[0]]).addTo(map);
  gebName = value.nameLang;                                     

  markers[i].bindPopup("<a class='gebOnMap' href='gebaeude.html' >"+gebName+"</a>").openPopup();
  lastMarker = markers[i];                              
  });

the polygons[i].on('click',...) is the part which does not work anymore. It works for map.on('click',...)

Upvotes: 2

Views: 8169

Answers (3)

johanlahti
johanlahti

Reputation: 1

The solution for me was to downgrade Leaflet to 0.7.3 or upgrade to 1.0-beta2 (latest version at the time of writing).

Upvotes: 0

Usman Bashir
Usman Bashir

Reputation: 21

You need to bind each of your polygons to a click event handler, like so.

L.geoJson(geojsonFeature, {
    onEachFeature: function(feature, layer) {
        layer.on('click', function(e) {
            // Do whatever you want here, when the polygon is clicked.
        });
    }
}).addTo(map);

Upvotes: 1

Purple Hexagon
Purple Hexagon

Reputation: 3578

Had a issue with this and solved it with the following 

function onEachFeature(feature, layer) {
    // Do all your popups and other binding in here
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
    }
}

var geojsonFeature = {
"type": "Feature",
"properties": {
    "name": "Coors Field",
    "amenity": "Baseball Stadium",
    "popupContent": "This is where the Rockies play!"
},
"geometry": {
    "type": "Point",
    "coordinates": [-104.99404, 39.75621]
}
};

L.geoJson(geojsonFeature, {
   onEachFeature: onEachFeature
}).addTo(map);

In your code I guess it would be

polygons[i] = L.geoJson(geojsonFeature, {onEachFeature: onEachFeature,
                                         style: geojsonStyle}).addTo(map);



function onEachFeature(feature, layer) {
    // Some jazz and magic you need to do with your layer and feature objects
}

Upvotes: 0

Related Questions