Working with Angular

Ahoy Maps library for your angular projects

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

The recommended way to use ahoy-maps-sdk for Angular 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 @ahoynamespace can be installed as usual:

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

At this step the environment setup is complete, all packages needed to build a sample application are installed, and it is possible to start the development server by executing:

ng serve

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

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 a reference variable to select through viewchild in your component


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



@ViewChild('mapContainer') mapContainer!: ElementRef;

import AhoyMapView class

  • if installed through npm

    import { AhoyMapView } from "@ahoy/ahoy-maps-sdk";

  • if using through inline script

    declare var AhoyMapView: any;

declare map and ui properties

map: any;

ui: any;

Initialize a Platform object with the key you received on the Ahoy Movement Studio . The call to the Platform method returns a promise , so make the method asyncwhen using inside in the ngAfterViewInit method . Check the complete code below for reference.

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

Create a map instance by passing DefaultLayer and the mapContainer

const defaultLayers = platform.createDefaultLayers();

this.map = AhoyMapView.Map(
  this.mapContainer.nativeElement,
  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(this.map);

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

Create Default buttons in ui to zoom and change map schemes

this.ui = AhoyMapView.ui().UI.createDefault(this.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 }, this.map);

Resize map to the size of viewport

pass the map instance to the resize method readmore..

this.map.getViewPort(this.map).resize();

Set Zoom level of the map

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

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

Get center coordinates on the map 

this.map.getCenter();

Show and hide traffic conditions on the map 

//show

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

//hide

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

Show and hide traffic incidents on the map 

//show

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

//hide

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

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,
});

this.map.addObject(marker);

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

this.map.addObject(polyline1);

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

this.map.addObject(marker);

Remove marker/polygon/polyline from the map

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

this.map.removeObject(marker);

Full Starter Code 


import { AhoyMapView } from  'ahoy-maps';

@Component({
selector:  'app-root',
templateUrl:  './app.component.html',
styleUrls: ['./app.component.scss'],
})
export  class  AppComponent  implements  AfterViewInit {
@ViewChild('mapContainer') mapContainer!: ElementRef;
map: any;
ui: any;

constructor(private  ahoyMapView: AhoyMapView) {}

ngOnInit(): void {}

ngAfterViewInit(): void {
this.initializeMap();
}

private  async  initializeMap() {
let  platform = await  AhoyMapView.service().Platform(SUBSCRIPTION_KEY);
const  defaultLayers = platform.createDefaultLayers();

this.map = AhoyMapView.Map(
this.mapContainer.nativeElement,
defaultLayers.vector.normal.map
);

// default interactions for pan/zoom
const  mapEvents = AhoyMapView.mapevents().MapEvents(this.map);
const  behavior = AhoyMapView.mapevents().Behavior(mapEvents);

// Create the default UI components
this.ui = AhoyMapView.ui().UI.createDefault(this.map, defaultLayers);

this.addMarker();
this.addPolyline();
this.addPolygon();

AhoyMapView.map()
.moveCamera({ lat:  47.15984, lng:  6.240234 }, this.map);
AhoyMapView.map().setZoomLevel(3, this.map);
AhoyMapView.map().showLiveTrafficView(defaultLayers, this.map);
}

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

removeMarker(marker: any) {
this.map.removeObject(marker);
}

addPolyline() {
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);

this.map.addObject(polyline1);
}

addPolygon() {
const  latLngAltArr = [52, 13, 100, 48, 2, 100, 48, 16, 100, 52, 13, 100];
const  polygon1 = AhoyMapView
.map()
.createPolygon('#FFFFCC', latLngAltArr);

this.map.addObject(polygon1);
}

}
← Working with Javascript
Ahoy Maps class reference →