Ahoy maps All Features
On this page
- Available Features
- Move map focus to a desired coordinate
- Resize map to the size of viewport
- Set Zoom level of the map
- Get center coordinates on the map
- Show and hide traffic conditions on the map
- Show and hide traffic incidents on the map
- Add Marker on the Map
- Add Polyline on the Map
- Add Polygon on the Map
- Remove marker/polygon/polyline from the map
- Create Route on the map
- Create linestring from polyline
Ahoy Maps library for your javascript project
This section shows all the features of the ahoy maps web sdk .
for setup instructions follow these
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 }, mapInstance);
Resize map to the size of viewport
call the get viewport method and pass the map instance to the resizereadmore..
mapInstance.getViewPort(mapInstance).resize();
Set Zoom level of the map
pass the zoom level between 1-22 and map instance to the method readmore..
AhoyMapView.map().setZoomLevel(3, mapInstance);
Get center coordinates on the map
call get center method on the map instance
mapInstance.getCenter();
Show and hide traffic conditions on the map
pass the map instance
//show
AhoyMapView.map().showTrafficConditions(defaultLayers, mapInstance);
//hide
AhoyMapView.map().hideTrafficConditions(defaultLayers, mapInstance);
Show and hide traffic incidents on the map
pass the map instance
//show
AhoyMapView.map().showTrafficIncidents(defaultLayers, mapInstance);
//hide
AhoyMapView.map().hideTrafficIncidents(defaultLayers, mapInstance);
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);
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);
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 polygon = AhoyMapView
.map()
.createPolygon(latLngArr);
map.addObject(polygon);
Remove marker/polygon/polyline from the map
call removeObject method on the map and pass the object you want to remove on the map instance
mapInstance.removeObject(marker);
Create Route on the map
call createRoute method on the map and use the return route objects to show a route on the map
const createrRouteRes = await AhoyMapView.createRoute({
transportMode: 'car',
origin: { lat: 25.223766, lng: 55.266480 },
destination: { lat: 25.237120, lng:55.273007 },
via: [{ lat: 25.118942, lng:55.20047 }],
})
Create linestring from polyline
call fromFlexiPolyline method from getCoOrdinates to get a linestring
let linestring = AhoyMapView.getCoOrdinates().fromFlexiPolyline(polyline);