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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -