Ahoy Maps class reference(Web SDK)
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.
| name | description |
|---|---|
| map | an 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.
| name | description |
|---|---|
| callback | A 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.