javascript - clicking a marker opening a image next to map -
javascript - clicking a marker opening a image next to map -
i have leaflet map has lots of markers , open image next map linked marker on marker click. know need javascript/jquery , ajax create work.
here illustration like: http://www.washingtonpost.com/wp-srv/special/local/14th-street-businesses/
any hints/tips/tutorials appreciated. in advance!
here solution problem: http://franceimage.github.io/leaflet/10/
var selectedmarker = false; var geojsonmarkeroptions = { radius: 8, fillcolor: "#ff7800", color: "#000", weight: 1, opacity: 1, fillopacity: 0.8 }; l.geojson(fi_markers, { pointtolayer: function (feature, latlng) { var marker = l.circlemarker(latlng, geojsonmarkeroptions); marker.on('click', function (e) { var feature = e.target.feature; var content = '<h3>' + feature.properties.popupcontent + '</h3><a href="http://www.franceimage.com/en/places-to-visit/?p=' + feature.properties.id + '">' + feature.properties.thumbnail + '</a>'; document.getelementbyid("events").innerhtml = content; if(selectedmarker != false) { selectedmarker.setstyle({ fillcolor: "#ff7800"}); } marker.setstyle({ fillcolor: "#000000"}); selectedmarker = marker; }); homecoming marker; } }).addto(map);
this way can (there plenty others)
in example:
there no ajax calls (and no jquery either). info loaded geojson construction (look @ http://franceimage.github.io/leaflet/10/data.geojson)
the html content of popup created using properties of geojson feature
i have used circlemarker changing color piece of cake
i hope help
javascript jquery leaflet
Comments
Post a Comment