How to insert overlay images in HighMaps (or HighC

问题:

I would like to overlay images on top of a map (map features) and found that HighMaps/HighCharts has two options - but neither of these are suitable. I was wondering if there are any other options?

Option 1: Embed an image using renderer.image - the problem is that the image is disconnected from the map so doesn't scale with it.

Option 2: Embed image as map symbols - the problem is that these auto-scale, i.e. as you zoom into the map (map becomes larger), the icons become smaller. They should stay the same scale and stay in the same place, as if they are part of the map itself - is that possible?

Another issue is that I want to insert many small images. The easiest would be to embed them as one large image on top of the map, with the area around the small images transparent so you can see the map underneath. However, the issue is that it blocks the mouse cursor from hovering over the map areas underneath. Maybe this can be corrected via CSS?

Thanks for any advice on this.

回答1:

You can use mappoint series to add point by latitude and longitude, then change its marker.symbol value to any url(), and on every selection chart event, change the size and position of the image by calculating appropriate current scale. I prepared an example and if you would have some questions about the code and how it works, please let me know.

Here is the example: https://jsfiddle.net/vbou6sga/