Get Started

Get started with the Woosmap Map JavaScript API. View a simple example, learn the concepts, and create custom maps for your site.

  1. Overview
  2. Loading the Woosmap Map Javascript API
  3. Create the Map Object
  4. Define Map Options
  5. Vector Map
  6. To Go Further

The Woosmap Map JavaScript API allows you to embed interactive maps on web pages.

API Key
Woosmap Map JS API requires authorization via API Key for initialization and API calls. You can obtain it by following this steps.

Overview

You can use this JavaScript API to embed interactive maps directly into your webpages. You can also add stores overlay to the map to call out points of interest and get relative information.

Here is a basic Woosmap Map sample centered on London.

<div id="map"></div>

<script>
let map;
function initMap() {
  map = new woosmap.map.Map(document.getElementById('map'), {
    center: { lat: 51.50940214, lng: -0.133012 },
    zoom: 13
  });
}
</script>

<script defer
    src="https://sdk.woosmap.com/map/map.js?key=YOUR_API_KEY&callback=initMap">
</script>

The above code does three main things:

  1. We create a div element with id="map" to hold the map.

  2. We define a JavaScript function initMap() that creates a map in the div.

  3. We load the Map JavaScript API using a script tag.

Loading the Woosmap Map Javascript API

The Map JavaScript API is loaded using a script tag, which can be added inline in your HTML file or dynamically using a separate JavaScript file.

Inline Loading

<script defer 
src="https://sdk.woosmap.com/map/map.js?key=YOUR_API_KEY&callback=initMap">
</script>

Dynamic Loading

// Create the script tag, set the appropriate attributes
const script = document.createElement('script');
script.src = 'https://sdk.woosmap.com/map/map.js?key=YOUR_API_KEY&callback=initMap';
script.defer = true;

// The callback function
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);     

We recommend using HTTPS and add the defer attribute to the script tag for asking the browser to parse the HTML document first before loading the script. When the script is executed, it will call the function specified using the callback parameter (initMap in this snippet).

Create the Map Object

For the map to display on your web page, first, you’ll need to create an HTML element container for it. Give it an ID that you will pass to the Map Object instance creation.

<div id="map"></div>

The HTML Element must be present in the DOM before instantiating the Map Object as follows.

map = new woosmap.map.Map(document.getElementById('map'), {...});

When you create a new map instance, you specify a <div> HTML element in the page as a container for the map

Define Map Options

When creating a map object, you’ll need to specify some properties using the MapOptions object. There are two required options for every map:

map = new woosmap.map.Map(document.getElementById('map'), {
  center: { lat: 51.50940214, lng: -0.133012 },
  zoom: 13
});

Vector Map

The Map JavaScript API renders vector-based tiles, which are drawn at load time on the client-side using WebGL. It offers a smoother pan and zoom navigation and the high sharpness of vector-based images. In addition, this technology allow the display of 3D buildings at close zoom levels.

In the below sample, toggle the “Buildings” switch to enter the 3D Mode (you can also use the combination of ctrl+click and move your mouse to tilt and rotate the map)

To Go Further

Was this article helpful?
Have more questions? Submit a request