Online maps in China: an introduction to Mapbar API
For the last month, I have been playing with several of the existing online maps providers in China and I hardly found any English documentation available, neither on the official websites nor from individuals. Given that Mapbar has English maps of several Chinese cities, I thought some of you may be interested in learning how to display their maps on your website. For the impatients, below is a link to the demo.
Now for those who want to know how it works:
Load the Mapbar API located at “http://api.mapbar.com/api/mapbarapi.js” with a script tag:
Create a div element with the “map_canvas” id, this div will hold the map:
Instantiate the map, this is done in several steps. First, put the following code in the head:
Then call the initialize() function when the body is loaded:
A bit more about the intialize() function:
- map = new Maplet(‘map_canvas’) creates a map object (for which we specify the id of the div we previously created),
- map.setStyle(‘en’) sets the language of the map, we here use english (‘en’), it is by default set to Chinese,
- map.addControl(new MStandardControl()) adds the zoom slider and the navigation arrows,
- map.centerAndZoom(new MPoint(‘IJUBIVWVJAAUIU’), 12) sets the center and the zoom level of the map,
This last point is a bit problematic: Mapbar coordinates system is completely obfuscated through encryption. You can’t use longitude and latitude coordinates as you would do with Google Maps, instead you refer to locations with an alpha numeric sequence such as “IJUBIVWVJAAUIU”. Some people have been looking for a way to break this system, and actually succeeded, but I guess that since 2006 (time when this solution was published) Mapbar updated (more than once) their system. I could not find any up-to-date method and did not find enough time, nor motivation, to do it by myself. If somebody feels like unpacking Mapbar API and solve this issue I’ll buy him a drink. As a starting point, below is the (broken) encryp/decrypt method:
Meanwhile there are ways to hack Mapbar search system to provide search functionalities to your users, but as I said before, I found Mapbar listings to be inconsistent to say the least. Though if some of you show some interest, I may publish another post to explain how to do it.
If you dig a little in the API file (http://api.mapbar.com/api/mapbarapi.js), you’ll see that you have many methods that allow you to do pretty much all what you can with Google Maps: adding info bubbles, stickers, set the look of the navigation slider, create animations, draw polygons… Again, if some of you are interested, just leave a comment, I’ll write another post. For the moment I’d just like to enjoy my Tsingtao while it’s cold.