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. You can create a map with the createLivemap function, it takes 3 parameters:

• container: the DOM element, which will be the container of the map
• options: the different options of the livemap (emmid and token are mandatory). Most of the map options are configurable in Wemap Pro
• iframeEmbed: Optionnal if the map should be embedded in an iframe (default: true)

info

Not embedding the map in an iframe can allows you to override the CSS of the map elements with your own style

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');
  var iframeEmbed = true;
  wemap.v1.createLivemap(container, { emmid: 1234, token: 'MY_TOKEN' }, iframeEmbed);
</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:

<div id='map-container'></div>
<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 'pinpointOpen' action to display pinpoint name in console
  livemap.addEventListener('pinpointOpen', function(e) {
      console.log('pinpoint open', e.pinpoint.name);
  });

  // Use the waitForReady function in order to ensure that the map is ready to communicate and receive action
  livemap.waitForReady().then(function() {
    // 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 dom.html service and use the livemap unique ID and the token of the livemap’s user.

info

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/dom.html?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.

info

If you want to learn more on our SDK you can check this doc to explore all the methods available or you can go to our examples page.