I have been searching for a solution for this. But could not find one. Maybe someone here can help me.

I want to be able to display a html image map layer returned from GeoServer on Leaflet. I don't have issues with generating the html image map layer itself, rather I am interested how to show it on the leaflet.

How can I achieve this?


Your image map is basically a text file that can be parsed.

<area shape="circle" id="ne_50m_populated_places.1"  coords="450,168,5"/>

Write some JavaScript to parse the line so you can split the Lat, Lng, Radius, and ID into separate variables in an array.

and plug them into this:

theCircle = L.circle([lat, Lng], {radius: Radius}).bindPopup(ID).addTo(map); 

https://harrywood.co.uk/maps/examples/leaflet/marker-array.view.html is an example using Markers with an array but it is the same idea.

Biggest issue I see is the coordinates, are they real coordinates or pixals and what units is the Radius defined as?

An option, instead of generating an image map, why not generate JSON or GeoJSON?

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.