HTML5 Canvas or SVG world map

Question

I'm searching for open source implementation of world map for HTML5 Canvas or any JS library. I need simple vector world map with landscape and zoom. It would be good if it works on iOS/Android/BB OS.

http://cartagen.org/ too redundant for me.

Canvas is not as good as SVG to make zoom, because the former is a bitmap image, and the latter is a vector image. Vector images perform best in this kind of actions. — Jesufer Vn, May 24 '11 at 06:03
@Jesufer Not really true, unless the canvas is displaying a bitmap image. You use vector-based drawing commands to draw on the canvas, so scaling the canvas context prior to issuing those commands will properly 'zoom' an drawing without pixelation. See [this answer](http://stackoverflow.com/questions/5189968/zoom-to-cursor-calculations/5526721#5526721) for a demo of zooming in and out of a canvas drawing. (Zoom on the crosshairs between my eyes.) — Phrogz, May 24 '11 at 17:36
But I am considering that everytime the image is zoomed, the image has to be redrawed using canvas, so it is a requirement to load a lot of javascript, if the image is to complex to draw. — Jesufer Vn, May 24 '11 at 19:19

Simon Sarris · Answer 1 · 2011-05-24T01:15:30.153

24

SVG would probably be easier to implement. I would look in to Raphael JS

Here is a relevant example of what raphael JS can do and how little code it takes

SVG world map definitions can be found numerous places, including Wikipedia, they shouldn't be too hard to search for.

edited May 24 '11 at 01:15

answered May 24 '11 at 00:40

Simon Sarris

62,212
13
141
171

score 17 · Answer 2 · edited May 16 '17 at 10:43

17

jVectorMap (http://jvectormap.com/) is a jQuery plugin that has built-in zooming and a nice world map example with an extensible events API and customization options. It uses SVG in all modern browsers like Firefox 3 or 4, Safari, Chrome, Opera, IE9, while offering legacy support for older versions of IE from 6 to 8 with VML. Really easy to use.

edited May 16 '17 at 10:43

simhumileco

31,877
16
137
115

answered Jun 29 '11 at 15:29

Ryan Rose

179
2

score 9 · Answer 3 · edited May 16 '17 at 11:37

9

Simon is right that Raphael.js is a good bet. Check out their world example at: http://dmitrybaranovskiy.github.io/raphael/

If you are looking for something built on Raphael, but with zooming/locations, a commercial option is: http://simplemaps.com/world

edited May 16 '17 at 11:37

simhumileco

31,877
16
137
115

answered Nov 27 '12 at 20:36

Chris

91
1
3

score 7 · Answer 4 · answered Jun 12 '11 at 05:27

7

checkout https://github.com/thomaspeklak/raphaeljs-worldmap

answered Jun 12 '11 at 05:27

Jonathan Gross

71
1

score 1 · Answer 5 · edited May 16 '17 at 11:45

1

I've found solution. Google Maps supports customization of water and landscape colors:

http://code.google.com/apis/maps/documentation/javascript/maptypes.html#StyledMaps

Wizard:

https://google-developers.appspot.com/maps/documentation/embed/wizard/

edited May 16 '17 at 11:45

simhumileco

31,877
16
137
115

answered May 24 '11 at 23:58

Alexander Gryanko

672
1
10
19

HTML5 Canvas or SVG world map

5 Answers5