Search code examples
javascripthtmldictionaryarea

Alternatives to AREA tag when creating Javascript map

I have an extremely large picture of a map. Now I want to create a Map UI where the user can click to highlight regions and also have the functionality to zoom into the map.

Is the AREA tag the only way to go at this problem? My only problem is when I zoom in the map, the will be enlarged and so will the image that it contains, but how would I expand the AREA coordinates according to my zoom level? Is there a good approach for going at this problem?

Solution

  • AREA is the only way to represent polygons, unfortunately. You can read your coordinates from the AREA tag, scale them, and write them back. Rounding overlaps are a pain to deal with though.

    One alternative is to use the BING maps API, which allows custom overlays. You need to create an overlay for each zoom level though.