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

SYMPTOMS / TRIGGERS
-------------------

You may need this article if:

You want to draw shapes (rectangle, circle, polygon) on a HERE map and detect whether a location falls inside them
You need to create draggable, interactive geofence boundaries that users can adjust on the map
You want to upload geofences to the HERE Fleet API (CLE Dashboard) and programmatically check if a GPS coordinate is within a geofence layer
You searched for "geofence HERE Maps JavaScript", "draw polygon on HERE map", or "point in polygon check HERE API"
You need to implement location-based alerts or virtual boundaries using HERE Maps

QUICK ANSWER
------------

There are three approaches depending on your use case:

| Approach | When to use | Attachment |
| --- | --- | --- |
| With Fleet API | You need server-side geofence storage & lookup via HERE CLE Dashboard | geofence-with-fleet-api.html |
| Without API (client-side only) | You want a lightweight, self-contained solution with no backend dependency | geofence-without-api.html |
| Draggable geofence | You need users to interactively draw and adjust geofence shapes on the map | draggable-geofence.html |

All three examples use HERE Maps API for JavaScript 3.1 with the HARP rendering engine.

APPROACH 1: Geofence with Fleet API (server-side)
-------------------------------------------------

This approach lets you define geofences on the map, upload them to the HERE CLE Dashboard via Fleet API, and then query whether a GPS coordinate falls within a geofence layer.

Key methods:

<br />// Convert a polygon's vertices to Well-Known Text (WKT) format for uploadpolygonToWKT(polygon)// Package the WKT data into a zip and POST it to the Fleet APIuploadGeofence(layerId, wktData, apiKey)// GET request to check if a position is inside a geofence layerfenceRequest(lat, lng, layerId, apiKey)<br />

APPROACH 2: Client-side geofence (no API required)
--------------------------------------------------

This approach draws predefined shapes (rectangle, circle, polygon) on the map and checks tap locations against those shapes entirely in the browser — no API calls needed.

Key methods:

<br />// Draw shapes on the maphereMap.drawRectangle(bbox)hereMap.drawCircle(center, radius)hereMap.drawPolygon(vertices)// Check if a tap coordinate falls within any drawn shapehereMap.checkGeofence(lat, lng)// Uses isPointInsideCircle() and isPointInsidePolygon() internally<br />

When the user taps the map, an alert indicates whether the tap occurred inside or outside the defined geofences.

APPROACH 3: Draggable interactive geofence
------------------------------------------

This approach lets users interactively create shapes by tapping on the map, with draggable markers to adjust boundaries after creation. Supported shape types:

Circle — 2 markers (center + radius point)
Rectangle — 4 markers (bounding box corners)
Polygon — multiple markers, auto-closed
Sequence shape — polyline connecting markers in order, last connects back to first

IMPORTANT NOTES
---------------

Replace the placeholder API key with your own key in all examples before running them
Fleet API (Approach 1) requires a HERE Platform subscription with Fleet/CLE access
The HARP engine is used for rendering; ensure your JS API version supports it (3.1+)

---

Applies to: Maps API for JavaScript 3.1+ (HARP engine) | Fleet API / CLE Dashboard (Approach 1 only) | All modern browsers

Tags: geofence, geofencing, draw shapes on map, polygon on map, circle on map, rectangle on map, point in polygon, check if location inside area, Fleet API, CLE Dashboard, draggable markers, interactive geofence, WKT format, Well-Known Text, virtual boundary, location-based alert, HERE JS 3.1, HARP engine, tap event, geofence upload, fence request, draw geofence HERE map, shape detection