Ahoy maps All Features

Ahoy Maps library for your javascript project

This section shows all the features of the ahoy maps web sdk .

for setup instructions follow these

  1. Working with Javascript
  2. Working with Angular
  3. Working with React

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

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

Show and hide traffic incidents on the map

pass the map instance

//show

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

//hide

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

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 polygon = AhoyMapView

  .map()

  .createPolygon(latLngArr);

map.addObject(polygon);

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