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

<script
  type="module"
  src="https://ahoymapsfrontend.blob.core.windows.net/ahoy-storage/ahoy-ahoy-maps-sdk.mjs"
  defer
></script>

.npmrc

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 https://pkgs.dev.azure.com/.

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

registry=https:https://registry.npmjs.org/
registry=https://pkgs.dev.azure.com/ahoyapp/Frontend/_packaging/ahoy-frontend-feed-emerald/npm/registry/
always-auth=true

; begin auth token
//pkgs.dev.azure.com/ahoyapp/Frontend/_packaging/ahoy-frontend-feed-emerald/npm/registry/:username=ahoyapp
//pkgs.dev.azure.com/ahoyapp/Frontend/_packaging/ahoy-frontend-feed-emerald/npm/registry/:_password=N21wb3hkeml3YnNtYWRxZGJlYXpmdGVmYXR6eHZvZ2lmNXluYXdjZjd5dXNrd2xweWt1cQ==
//pkgs.dev.azure.com/ahoyapp/Frontend/_packaging/ahoy-frontend-feed-emerald/npm/registry/:email=[YOUR_EMAIL]
//pkgs.dev.azure.com/ahoyapp/Frontend/_packaging/ahoy-frontend-feed-emerald/npm/:username=ahoyapp
//pkgs.dev.azure.com/ahoyapp/Frontend/_packaging/ahoy-frontend-feed-emerald/npm/:_password=N21wb3hkeml3YnNtYWRxZGJlYXpmdGVmYXR6eHZvZ2lmNXluYXdjZjd5dXNrd2xweWt1cQ==
//pkgs.dev.azure.com/ahoyapp/Frontend/_packaging/ahoy-frontend-feed-emerald/npm/:email=[YOUR_EMAIL]
; end auth token

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

//pkgs.dev.azure.com/ahoyapp/Frontend/_packaging/ahoy-frontend-feed-emerald/npm/registry/:email=feax..@..com
//pkgs.dev.azure.com/ahoyapp/Frontend/_packaging/ahoy-frontend-feed-emerald/npm/:email=feax..@..com

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

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

webpack

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

<link
  rel="stylesheet"
  type="text/css"
  href="https://ahoymapsfrontend.blob.core.windows.net/ahoy-storage/styles.css"
/>

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");

Usage

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, defaultLayers.vector.normal.map, {
  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..

AhoyMapView.map().moveCamera({ lat: 47.15984, lng: 6.240234 }, map);

Resize map to the size of viewport

pass the map instance to the resize method readmore..

map.getViewPort(map).resize();

Set Zoom level of the map

pass the zoom level between 1-22 to the method readmore..

AhoyMapView.map().setZoomLevel(3, map);

Get center coordinates on the map 

map.getCenter();

Show and hide traffic conditions on the map 

//show

AhoyMapView.map().showTrafficConditions(defaultLayers, map);

//hide

AhoyMapView.map().hideTrafficConditions(defaultLayers, map);

https://docs.ahoy.technology/images/ahoy-maps-sdk/traffic-conditions.png

Show and hide traffic incidents on the map 

//show

AhoyMapView.map().showTrafficIncidents(defaultLayers, map);

//hide

AhoyMapView.map().hideTrafficIncidents(defaultLayers, map);

https://docs.ahoy.technology/images/ahoy-maps-sdk/traffic-incidents.png

Add Marker on the Map

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

const marker = AhoyMapView.map().createMarker({
  lat: 34.161818,
  lng: 453.691406,
});

map.addObject(marker);

https://docs.ahoy.technology/images/ahoy-maps-sdk/marker.png

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 = AhoyMapView.map().createPolyline(2, "pink", latLngArr);

map.addObject(polyline1);

https://docs.ahoy.technology/images/ahoy-maps-sdk/polyline.png

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 = AhoyMapView.map().createPolygon(latLngArr);

map.addObject(marker);

https://docs.ahoy.technology/images/ahoy-maps-sdk/polygon.png

Remove marker/polygon/polyline from the map

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

map.removeObject(marker);
← Working with React (Web SDK)
Working with Angular (Web SDK) →