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.

Add a simple map
        // Initialize and add the map
let map: woosmap.map.Map;

function initMap(): void {
  // The location of London
  const position: woosmap.map.LatLngLiteral = {
    lat: 51.50940214,
    lng: -0.133012,
  };

  // The map, centered at London
  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
    zoom: 13,
    center: position,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

    
        // Initialize and add the map
let map;

function initMap() {
  // The location of London
  const position = {
    lat: 51.50940214,
    lng: -0.133012,
  };

  // The map, centered at London
  map = new woosmap.map.Map(document.getElementById("map"), {
    zoom: 13,
    center: position,
  });
}

window.initMap = initMap;

    
        /*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}


    
        <html>
  <head>
    <title>Add Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <!--The div element for the map -->
    <div id="map"></div>

    <script
      src="https://sdk.woosmap.com/map/map.js?key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&callback=initMap"
      defer
    ></script>
  </body>
</html>

    

The above code does three main things:

  1. We create a div element with id="map" with an explicit height 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

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

    

Dynamic Loading

JavaScript
        // 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.

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

    

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

JavaScript
        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:

JavaScript
        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