Search code examples
javascripthtmlcssleafletmapquest

Can I "stick" an html object to an icon or moving part of a map?

Question may seem a bit vague. I have a mapquest map and I'm marking it with a leaflet icon. These icons are added programatically ie:

var marker = L.marker([40.613953, -75.477791], {icon: cameraIcon}).addTo(Window.map);
marker.id = "MyMarker";
marker.addEventListener("click", loadSomething);

In the loadSomething function I was hoping to be able to attach an iframe to that icon. Right now what I do is just grab the x/y of the click event and create an object on the page at that location.

The issue is that by doing so when the map is moved (and subsequently my icon moves) the object I created is obviously fixed at the original x/y. I was hoping to be able to attach that object.

The developer forums for leaflet have simple options to add an image/video and simple items like that to the map, but for a non standard html item I was curious if there was a css oriented solution. I inspected the page and the icon itself doesn't have an 'id', I was considering using that to get the item and hypothetically inherit its style.

Any ideas?

Solution

  • The solution is quite simple, custom HTML content can be embedded into a marker popup. Here's a simple example:

    Window.map = L.map('map', {
    layers: mapLayer,
    center: [ 40.613953, -75.477791],
    zoom: 12
});


var cameraIcon = L.icon({
iconUrl: 'ipcam.png',
});



var marker = L.marker([40.613953, -75.477791], {icon: cameraIcon}).addTo(Window.map);
marker.bindPopup('<iframe src="test.html" width="300px" height="300px" style="border:none;"></iframe>').openPopup();
marker.importantInfo = "Testing Important Marker Info";
marker.id = "MyMarker";