Javascript - Getting started

How to use the JS SDK

The Wemap JS SDK is a set of JavaScript tools to easily integrate livemaps into web applications and web pages.Livemaps can be deployed on web pages and web applications either by:

  • using the javascript SDK and invoking the wemap.v1.createLivemap javascript function with the livemap parameters.
  • or by using a using an <iframe> tag specifying a URL.

In both cases the unique id of the livemap to be displayed and the user token from its author must be provided.

Integration via the Wemap javascript SDK

The recommended way to embed a livemap in your website is using the Wemap Javascript SDK.Once loaded with the DOM container element and the parameters (livemap unique ID and user token from owner of livemap), the Livemap javascript object grants access to methods to interact with the embedded livemap.

Simple example:

<div id='map-container'></div>
<script type='application/javascript' src='https://livemap.getwemap.com/js/sdk.min.js'></script>
<script>
var container = document.getElementById('map-container');
wemap.v1.createLivemap(container, { emmid: 1234, token: 'MY_TOKEN' });
</script>

This approach is also recommended for developers who want to handle the livemap‘s behaviour, navigation and its content (lists, pinpoints, events) from the host-application.

Full example:

<script type='application/javascript' src='https://livemap.getwemap.com/js/sdk.min.js'></script>
<script>
// prepare the livemap parameters
var container = document.getElementById('map-container');
var options = {
emmid: 1234,
token: 'MY_TOKEN'
};
// instantiate the livemap
var livemap = wemap.v1.createLivemap(container, options);
// add listener on 'pinpointClick' action to display pinpoint name in console
livemap.addEventListener('pinpointOpen', function(e) {
console.log('pinpoint open', e.pinpoint.name);
});
// open pinpoint
livemap.openPinpoint(18326397);
// wait 1 sec and zoom to coordinates
setTimeout(function() {
livemap.centerTo({latitude: 48.86061799999999, longitude: 2.3376379999999415}, 16);
}, 1000);
</script>

Integration via an <iframe> tag

Integrating a livemap via an <iframe> tag is the fastest way to display a livemap in any given web page or web application. Pointing the URL in the <iframe> to Wemap’s iframe.php service and use the livemap unique ID and the token of the livemap’s user.

Important: Because of iOS persmissions, the <iframe> embed way does not support the augmented reality and the fullscreen features on iOS.

Example:

<iframe src="https://livemap.getwemap.com/iframe.php?emmid=6032&token=MYTOKEN" width="100%" height="100%"></iframe>

The content that will be displayed on the livemap can be limited to a list, a pinpoint or an event simply by using Wemap deep-linking logic.

The Wemap embed provides a deep-linking logic that allows navigation within the livemap through URLs.

The deep-linking allows:

  • direct access to a list, a pinpoint or an event in an open state,
  • direct access to the results of a search query within the livemap‘s content (tags, full-text search, dates, geographic bounds or a combination of these search parameters).

Consult our Wemap Deep Linking documentation of this topic.