Geofencing using HERE JS and with/without REST API's

We have been reached by several of our customers with a question - " How to draw geofence, shapes on the map" using HERE JS 3.1?

Please find following examples:

1. "Geofence-with-fleet-api.html" - This code creates an interactive map where users can define geofences, upload them using Fleet API to the HERE CLE Dashboard, and then fetch and check using Fleet API, if certain locations fall within these geofences. Following is the structure of the code:

draw Method: Adds a given map object to the map.
polygonToWKT Method: Converts a polygon to a Well-Known Text (WKT) format.
uploadGeofence Method: Creates a zip file containing geofence data in WKT format and uploads it using a POST request to the HERE API.
fenceRequest Method: Sends a GET request to the HERE API to check if a given position is within specified geofence layers.

2. "draggable-geofence.html" - This example consumes HERE JS 3.1 core functionalities, it also uses harp engine to render the map, following is the structure of the code:

Shape Type Selection: The application allows users to select the type of shape they want to create (circle, rectangle, polygon, or sequence shape) using buttons in the control panel. The selected shape type is highlighted for better user experience.


Dynamic Shape Drawing: When a user taps on the map, markers are placed at the tap location. The shape is dynamically drawn and updated based on these markers. For the sequence shape, a polyline is drawn that connects the markers in the order they were placed, with the last marker always connecting back to the first.


Draggable Markers: The markers placed on the map are draggable, allowing users to adjust the shape after it has been drawn. The shape dynamically updates as the markers are moved.


Different Behaviors for Each Shape:

	•	Polygon: Created by connecting multiple markers with a line, closing the shape by connecting the last marker to the first.


	•	Circle: Requires two markers; the first marker defines the center, and the distance to the second marker defines the radius.


	•	Rectangle: Created using four markers, with a bounding box covering the points marked by these markers.


	•	Sequence Shape: A custom shape that connects markers in a sequence, with the last marker always connecting back to the first.

3. "geofence-without-api.html" - this example demonstrates how to use the HERE Maps API to create and interact with geofences on a web map. Users can visually see the geofences (rectangle, circle, and polygon) and interact with the map to check if a location falls within these defined areas. Following is the structure:

HereMap Class:

a) draw Method: Adds a given map object (shape) to the map and stores it in the shapes array.
b) drawRectangle Method: Draws a rectangle on the map.
c) drawCircle Method: Draws a circle on the map.
d) drawPolygon Method: Draws a polygon on the map.
e) checkGeofence Method: Checks if a given position is within any of the drawn shapes (geofences) and displays an alert indicating whether the 
 position is inside or outside the geofences.
f) isPointInsideCircle Method: Determines if a point is inside a given circle.
g) isPointInsidePolygon Method: Determines if a point is inside a given polygon.

Start Function:

Draws a rectangle, a circle, and a polygon on the map as geofences.
Adds a tap event listener to the map. When the map is tapped, the coordinates of the tap location are checked against the geofences, and an alert is displayed indicating whether the tap occurred inside or outside the geofences.

PS: Please use your apikey to run the examples.