Alternatives to AREA tag when creating Javascript map

Question

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?

score 1 · Accepted Answer · answered Feb 10 '11 at 20:40

1

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.

answered Feb 10 '11 at 20:40

Diodeus - James MacFarlane

112,730
33
157
176

Do you have an algorithm to scale coordinates. – Feb 11 '11 at 03:46
It's pretty simple math: x2 = x1 * scale – Diodeus - James MacFarlane Feb 11 '11 at 17:49

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Apply css to AREA MAP

I suggest SVG there, which would also solve your zoom problem. The only complication is that IE8 and below won't support it, and IE9 isn't being pushed through Windows Update to non-beta users yet.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 18 '11 at 00:43

Sapph

6,118
1
29
32

score 0 · Answer 3 · answered Feb 20 '12 at 12:38

Simple option: ImageMapster figures out most image area map things for you on the fly. IE6+, needs jQuery.

More complex, more powerful option: Raphael.js enables you to create fully controllable fully scalable SVG vector graphics in everything from IE6+ (doesn't need Flash). Bit of a steep learning curve, but it's very powerful.

Alternatives to AREA tag when creating Javascript map

3 Answers3