Building a Store Locator With Baidu Maps and Woosmap

Search engine company Baidu recently launched their mapping services, Baidu Maps, for overseas users and developers. The Chinese map provider, offering a wide range of mapping services, from local search to driving direction, is actually turning into a world map provider. And for Chinese territory, especially in the Mainland, Baidu Maps stay one step ahead of the competition thanks to its better accuracy in location data and more detailed satellite imagery.

Woosmap SDK 1.4 has been released and allows Woosmap developers to display Assets over Baidu Maps, using our new Chinese-based infrastructure, in a transparent way.

This article talks about building a Store Locator with Baidu Maps for Mainland China, and how to achieve this using Woosmap.

Baidu Coordinates System

Building a Store Locator from scratch using Baidu Maps Javascript API could be a tough task, particularly when using the standard earth coordinate system for your assets - WGS84 - and wanting to display them in Mainland China. Indeed, for various reasons, Baidu use its own coordinate system, called BD09. Before using Baidu Maps JavaScript API, it is necessary to convert your WGS84 based locations into Baidu coordinates through coordinate conversion interface.

The Woosmap SDK 1.4 is actually doing transparently this conversion so you can focus on what matters: helping your users finding the right store. All you’ll have to do is to create a Baidu Account and bind it an Application key -ak with desired security settings.

Note that for non-Chinese area stores location, the WGS84 coordinates system is the one used by default.

Create an Overseas Baidu account

You can create a Baidu account without a Chinese phone number using the overseas registration page.

Overseas Baidu registration page

baidu_registration_page

Signing in to Baidu with a QQ or Weibo account will ask you to bind a Mainland China mobile phone number anyway.

At this time, European phone number are not supported yet. But you could easily get a compatible mobile phone number using one of many available web services (Skype, TextNow, phone.com,…).

You will then have to register as a Baidu developer to use the Baidu Maps API. It’s about the same process as the previous step. You should receive a text message with a verification number to validate your registration.

Create a Baidu Application Key

Last stage before integrating Baidu Maps in your website! You’ll need to create an Application Key for Browser side capabilities. Navigate to http://lbsyun.baidu.com/apiconsole/key/create, set a custom name for your key, select “Browser side” as the application type, uncheck unwanted APIs (let at least Javascript API) and configure the allowed referer as shown below:

Sample Store Locator

To highlight the newly native support of Baidu Maps in Woosmap Javascript API 1.4, we’ve developed the following sample Store Locator mapping the Starbucks Coffee Shops across China. Alternatively, you may open it in full screen for more comfortable use.

You can fork or download the source code hosted on GitHub.

https://github.com/woosmap/woosmap-baidu-locator

In addition to the map and listing view of Coffee Shops, we have integrated an autocomplete quick-search box as well as a driving direction calculation between the search result location and a selected Starbucks.
These additional features, both available for China territory only, come from the Baidu Maps Javascript API. We have not yet pushed this capabilities inside the Woosmap Javascript API but the work is in progress. Stay tuned!

“Hello World” with Baidu and Woosmap

The easiest way to start learning how to develop with Baidu and Woosmap is to look at a simple example.

step-by-step

Add Woosmap Loader and Baidu Maps SDKs right inside your HTML file (both could be loaded asynchronously). For Baidu, specify your Application Key ak as a parameter of your SDK.


< script src="https://api.map.baidu.com/api?v=2.0&ak=xXxxXXX1x3x223xxXX"></script>
< script src="https://sdk.woosmap.com/locator/loader.js">< /script>

Load asynchronously the Woosmap Javascript SDK with the method load(options) of helper class WoosmapLoader.


<div id="my-map" style="position:absolute; top:0; left:0; right:0; bottom:0;">
</div>

Finally, within the WoosmapLoader callback, create a new BMap.Map. The HTML container element id or element object (my-map is the Id in our case) is given as argument. Pass this BMap Object to your woosmap.BaseView (here a TiledView) and you will see the Map with your Assets.


function getMap() {
  const map = new BMap.Map('my-map');
  map.centerAndZoom(new BMap.Point(116.3964, 39.9093), 14);
  map.enableScrollWheelZoom();
  return map;
}

function main() {
  const map = getMap();
  const mapView = new woosmap.TiledView(map, woosmapOptions);
  }

Map Result

After completing the above steps, You will be able to display the following map in your application.

Woosmap China

Seeking for a reliable and a top quality service, we mirrored a part of our server infrastructure and created specific domain names in mainland China. The Woosmap Console to manage your data and monitor the use of Woosmap services is hosted at https://console.woosmap.cn. In the same way, your Assets, for a Chinese based use, will be hosted on servers located in mainland China.

Please note that deploying your Woosmap project to this area is subject to dedicated billing.

If you plan to deliver a Store Locator solution in China, we’d be delighted to help you. So don’t hesitate to contact us.