Ahoy Maps class reference

AhoyMapView

Description

This class consists of all methods necessary to initialize and perform operations on the map

Methods

behavior



behavior:(map: any) => void


returns a class that encapsulates map behavior functionality. It uses map events and adds functionality such as panning and zooming to the map

hideLiveTrafficView



hideLiveTrafficView:(defaultLayers: DefaultLayers, map: any) => void


removes live traffic from the map

map



map:() => {

createMarker,

createPolyline,

createPolygon,

hideTrafficConditions,

showTrafficConditions,

hideTrafficIncidents,

showTrafficIncidents,

setZoomLevel,

moveCamera,

};


returns methods to perform different operations on the map

Map



Map:(element: HTMLElement, baseLayer: any,options? : MapOptions) => mapInterface


The Map method defines a map instance. By creating this object, you initialize a visible map attached to a DOM element. its is the entry point to all operations involving layers, map objects and its operations.

mapevents



mapevents:() => { Behavior: (map: any) => void; MapEvents: (map: any) => void; }


returns method to add behavior events and object events to the map

mapEvents







mapEvents:(map: any) => void






MapEvents enables the events functionality on the map and on map objects. The class makes it possible to listen to events on map objects such as markers, polylines, polygons and on the map object itself.

createMarker







createMarker:(location: location) => any






A Marker is a visual representation of a location on a map in the form of a static bitmap icon.

moveCamera







moveCamera:(location: location, map: any) => void






centers the map to give co-ordinate

platform



platform:(apiKey: string) => any


returns a central class from which all other service stubs are created.

createPolygon



createPolygon:(color: string, coordinates: number[]) => any


returns an object which is a is a visual representation of a surface on a map.

createPolyline



createPolyline:(width: number, color: string, coordinates: number[]) => any


returns an object which is a visual representation of connected line segments on a map.

moveCamera



moveCamera:(location: Location, map: any) => any


centers the map to given co-ordinate

setZoomLevel



setZoomLevel:(zoomLevel: number, map: any) => any


Performs zoom the map

showTrafficConditions



showTrafficConditions:(defaultLayers: DefaultLayers, map: any) => any


adds live traffic to the map

hideTrafficConditions



hideTrafficConditions:(defaultLayers: DefaultLayers, map: any) => any



hides live traffic to the map

showTrafficIncidents


default map layer


showTrafficIncidents:(defaultLayers: DefaultLayers, map: any) => any



adds traffic incidents to the map

hideTrafficIncidents



hideTrafficIncidents:(defaultLayers: DefaultLayers, map: any) => any


hides traffic incidents to the map

service



service:() => { Platform: (apiKey: string) => any; }

/**

* This method retrieves the current map viewport.It contains resize method

*/

getViewPort: (map: any) => ViewPortInfo;


returns methods related to intialize the map

setZoomLevel


setZoomLevel:(zoomLevel: zoomLevel, map: any) => void

Zooms the map

showLiveTrafficView


showLiveTrafficView:(defaultLayers: DefaultLayers, map: any) => void

zoom level

adds live traffic to the map

ui



ui:() => uiInterface


returns methods to add basic ui control to the map

types

default map layer

export type DefaultLayers = {
vector: { normal: { map: any; traffic: any; trafficincidents: any } };
};

MapOptions

a object which holds configuration propeties when initializing the map


*/

export  interface  MapOptions {

/**

* The initial zoom level of the map, default is 0 or the minimal zoom level of the base map.

*/

zoom?: number;

/**

* The initial center of the map, default is {lat:0, lng: 0}

*/

center?: Location;

/**

* The padding in pixels for each side of the map

*/

padding?: { top: number; left: number; bottom: number; right: number };

/**

* The size in pixel of the supplemental area to render for each side of the map

*/

margin?: number;

}



map interface


export type mapInterface = {

/**
* Adds an Object (i.e polylines, polygons, markers) to the map
*/
addObject: (object: any) => void;

/**
* removes an Object (i.e polylines, polygons, markers) from the map
*/
removeObject: (object: any) => void;

/**
* This method retrieves the current map viewport.It contains resize method
*/
getViewPort: (map: any) => ViewPortInfo;

/**
* This method returns the center coordinates of the map
*/
getCenter: () => Location;

};




ui interface

export type uiInterface = {
UI: {
/**
* This method creates the default UI including the zoom control and map schemes.
*/
createDefault: (map: any, defaultLayers: DefaultLayers) => void;
};

};


location

object containing latitude and longitude of the marker


export type Location = { lat: number; lng: number }

zoom level


export type zoomLevel =
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11
  | 12
  | 13
  | 14
  | 15
  | 16
  | 17
  | 18
  | 19
  | 20
  | 21
  | 22;

viewport info interface


/**

* A viewport object holds information about the HTML element in which the map is rendered and helper methods to change the map

*/

export interface ViewPortInfo {

/**
* This method updates the size of the viewport to match the container size. It must be called whenever the HTML element changes size in order to update the map's viewport values.
*/
resize: () => void;
}

Map Object Events

ahoyMapView.mapevents().MapEvents(map);


MapEvents enables the events functionality on the map and on map objects. This method makes it possible to listen to events on map objects such as markers, polylines, polygons and on the map object itself. Events are triggered by user interaction, for example clicking or tapping on the map. Please check the Events Summary section for the list of events fired by this method and by the map objects.

namedescription
mapan object representing the map instance

Example


// prerequisites: mapInstance and marker is initialized
mapInstance.addObject(marker);

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

// add listener to map

mapInstance.addEventListener('longpress', (e) => {...});

// add listener to the marker

marker.addEventListener('tap', (e) => {...});

marker.addEventListener('pointerleave', (e) => {...});

Methods

addOnDisposeCallback (callback)

This method adds a callback which to be triggered when an object is disposed.

namedescription
callbackA callback function to add

dispose()

This method destroys the MapEvents instance by removing all handlers from the map object. After calling this method, mapEventsand map objects do not trigger any events.


getAttachedMap () : Map

This method retrieves the map object to which events are attached.


Events

pointerdown

This event type signifies that the pointer (mouse, pen, touch) has reached the map surface. It is equivalent to platform-specific events mousedown, touchstart, pointerdown.


pointerup

This event type signifies that the pointer (mouse, pen, touch) has left the map surface. It is equivalent to platform-specific events mouseup, touchend, pointerup.


longpress

This event is dispatched on the pointer target after pointerdown has occurred and no pointerup was triggered and pointer stayed in place for a longer time.


pointermove

This event type signifies that the pointer (mouse, pen, touch) has been moved across the screen (and the map). It is equivalent to platform-specific events mousemove, touchmove, pointermove.


tap

This event type signifies that the pointer (touch, pen, mouse) has touched the map (or object) surface for a moment.