Get Started
Get started with the Woosmap Map JavaScript API. View a simple example, learn the concepts, and create custom maps for your site.
- Overview
- Loading the Woosmap Map Javascript API
- Create the Map Object
- Define Map Options
- Vector Map
- 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.
// 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:
-
We create a div element with
id="map"with an explicit height to hold the map. -
We define a JavaScript function
initMap()that creates a map in the div. -
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:
centerto set the initial Map Center as Latitude and Longitude.zoomto set the initial resolution at which to display the map as an Integer between 1 (World) and 21 (Buildings).
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)
