Working with Javascript (Web SDK)

Ahoy Maps library for your javascript project

This section shows how to bundle the ahoy-maps-sdk for your javascript project with the help of most common bundler “Webpack”.

Setup / Installation

There’s two ways to use Ahoy maps sdk for your project , either through

  1. Inline script
  2. .npmrc

Inline Script

The easiest way to use ahoy maps sdk is to use the script hosted on cdn .

Add this script tag in the <head></head> tag of index.html



To use the package through npm , create a project by following these steps

Assuming that the node.jsand npmare installed , create a directory that will contain the project and run from the console the following command:

npm init

It will produce the package.json file similar to the one below:

"name": "ahoy-maps-bundling-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
"author": "",
"license": "ISC"

The recommended way to use ahoy-maps-sdk within this environment is to install ahoy-maps-sdk NPM package which is hosted at

Add a registry entry to the NPM configuration by creating a .npmrc file in the root directory with the following content.


; begin auth token
; end auth token

add your email in the .npmrc , npm requires email to be set but doesn’t use the value


After that the package from the @ahoy namespace can be installed as usual:

npm install --save @ahoy/ahoy-maps-sdk


Add development dependencies to the Webpack

npm install webpack webpack-cli  --save-dev

Create webpack.config.js configuration file in the root directory of the project with the following configuration:

in entry property of in the config put the file path to index.js

const path = require("path");
module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "ouput-maps.js",
    library: "ahoy-maps-sdk",
    libraryTarget: "umd",
    globalObject: "this",
  module: {
    rules: [
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: "babel-loader",
  node: {
    global: false,

To support async/await along with other built-ins of ES6 we need to install babel

npm install --save-dev @babel/runtime @babel/preset-env @babel-plugin-transform-runtime babel-loader

create a  .babelrc file in the root directory of the project with the following configurations

    "presets": ["@babel/preset-env"],
    "plugins": [
      ["@babel/transform-runtime", {
        "regenerator": true

With the local installation of Webpack, update the script section of the package.json by adding the build target :

"scripts": {
    "build": "webpack"

Class Documentation

you can find the docs here

Get Started

Signup for Ahoy Movement Studio and obtain a Subscription Key, you can do so by signing up here

create a src folder and add index.html and index.js inside it

To load the map styles add the following to the head in index.html


Add a div with an id “mapContainer”

<div style="width: 640px; height: 480px" class="map" id="mapContainer"></div>

create index.js and select the div

const mapElement = document.querySelector("#mapContainer");


import AhoyMapView class in the index.js

const { AhoyMapView } = require("@ahoy/ahoy-maps-sdk");

Note : add the above line of code only if using the package through npm

declare a async function initializeMap as the platform method on AhoyMapView returns a promise

async function initializeMap() {}

Now inside this async function assign the platform variable with a call to Platform method with AMS_KEY you received on the Ahoy Movement Studio.

platform = await AhoyMapView.service().Platform(SUBSCRIPTION_KEY);

Map instance

Create a map instance by passing DefaultLayer and the mapElement

defaultLayers = platform.createDefaultLayers();

map = AhoyMapView.Map(mapElement,, {
  zoom: 4,
  center: {
    lat: 34,
    lng: 41,

Add default interactions for zooming and panning on the map

const mapEvents = AhoyMapView.mapevents().MapEvents(map);

const behavior = AhoyMapView.mapevents().Behavior(mapEvents);

Create Default buttons in ui to zoom and change map schemes

const ui = AhoyMapView.ui().UI.createDefault(map, defaultLayers);

Complete code

Available Features

Move map focus to a desired coordinate

pass the coordinate and map instance to moveCamera Method readmore..{ lat: 47.15984, lng: 6.240234 }, map);

Resize map to the size of viewport

pass the map instance to the resize method readmore..


Set Zoom level of the map

pass the zoom level between 1-22 to the method readmore.., map);

Get center coordinates on the map


Show and hide traffic conditions on the map

//show, map);

//hide, map);

Show and hide traffic incidents on the map

//show, map);

//hide, map);

Add Marker on the Map

call createMarker method and add the markerObject returned to the map readmore..

const marker ={
  lat: 34.161818,
  lng: 453.691406,


Add Polyline on the Map

call createPolyline method and add the markerObject returned to the map readmore..

const latLngArr = [
  53.3477, -6.2597, 100, 51.5008, -0.1224, 100, 48.8567, 2.3508, 100,

  52.5166, 13.3833, 100,

const polyline1 =, "pink", latLngArr);


Add Polygon on the Map

call createPolygon method and add the markerObject returned to the map readmore..

const latLngArr = [
  53.3477, -6.2597, 100, 51.5008, -0.1224, 100, 48.8567, 2.3508, 100,

  52.5166, 13.3833, 100, 52.5234, 13.39, 100,

const marker =;


Remove marker/polygon/polyline from the map

call removeObject method on the map and pass the object you want to remove