heremaps · vedha98 · May 22, 2025 · May 22, 2025 · May 22, 2025 · May 22, 2025
diff --git a/meta.json b/meta.json
@@ -256,6 +256,12 @@
                             "title": "Draggable geoshapes",
                             "shortDescription": "Display geoshapes which can be moved around the map",
                             "published": true
+                        },
+                        {
+                            "uid": "polyons-hovering",
+                            "title": "Hovering Polygons",
+                            "shortDescription": "Hover over polygons to see them highlighted",
+                            "published": true
                         }
                     ]
                 },

diff --git a/polygon-hovering/data/germany-states.geojson b/polygon-hovering/data/germany-states.geojson
diff --git a/polygon-hovering/demo.css b/polygon-hovering/demo.css
@@ -0,0 +1,11 @@
+
+#map {
+    width: 95%;
+    height: 450px;
+    background: grey;
+}
+
+#panel {
+    width: 100%;
+    height: 400px;
+}
diff --git a/polygon-hovering/demo.details b/polygon-hovering/demo.details
@@ -0,0 +1,12 @@
+---
+ name: Hoverable Polygons
+ description: Display geo polygon with hover effects on a map
+ resources:
+   - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js
+ normalize_css: no
+ dtd: html 5
+ wrap: d
+ panel_html: 0
+ panel_js: 0
+ panel_css: 0
+...
diff --git a/polygon-hovering/demo.html b/polygon-hovering/demo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
+    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+    <meta name="description" content="Parse a GeoJSON file and display the data on a map with hover effects">
+    <title>Polygon Hovering</title>
+    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
+    <link rel="stylesheet" type="text/css" href="../template.css" />
+    <link rel="stylesheet" type="text/css" href="demo.css" />
+    <script type="text/javascript" src='../test-credentials.js'></script>     
+  </head>
+  <body>
+    <h1>Polygon Hovering</h1>
+    <p> This example shows how to display objects from a GeoJSON file on the map and apply hover effects to polygons.
+      Hover over the polygons to see them highlighted.</p>
+    <div id="map"></div>
+    <script type="text/javascript" src='demo.js'></script>
+  </body>
+</html>
diff --git a/polygon-hovering/demo.js b/polygon-hovering/demo.js
@@ -0,0 +1,77 @@
+/**
+ * Adds hoverable polygons to a HERE map using geoJSON data.
+ *
+ * @param {H.Map} map - A HERE Map instance.
+ */
+function addHoverablePolygons(map) {
+  const selectedStyle = new H.map.SpatialStyle({
+    lineWidth: 2,
+    strokeColor: 'red',
+    fillColor: 'green'
+  });
+
+  const defaultStyle = new H.map.SpatialStyle({
+    lineWidth: 1,
+    strokeColor: 'rgba(0,85,170,.6)',
+    fillColor: 'rgba(0,85,170,.4)'
+  });
+
+  // Load and parse the GeoJSON data
+  const reader = new H.data.geojson.Reader('data/germany-states.geojson', {
+    style: (feature) => {
+      // Setting Volatile to true, to enable style changes at runtime
+      feature.setVolatility(true);
+      feature.setStyle(defaultStyle);
+    },
+    disableLegacyMode: true
+  });
+
+  reader.parse();
+  const layer = reader.getLayer();
+  map.addLayer(layer);
+
+  let activeObject = null;
+
+  // Pointer move listener for hover styling
+  layer.getProvider().addEventListener('pointermove', (e) => {
+    const target = e.target;
+    if (target instanceof H.map.Object && target !== activeObject) {
+      if (activeObject) {
+        activeObject.setStyle(defaultStyle);
+      }
+      target.setStyle(selectedStyle);
+      activeObject = target;
+    }
+  });
+}
+
+
+/**
+ * Boilerplate map initialization code starts below:
+ */
+// Step 1: initialize communication with the platform
+var platform = new H.service.Platform({
+  apikey: window.apikey
+});
+var defaultLayers = platform.createDefaultLayers();
+
+// Step 2: initialize a map
+var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
+  zoom: 5,
+  center: {lat: 50.89317884049538, lng: 9.163701875411466},
+  pixelRatio: window.devicePixelRatio || 1
+});
+// add a resize listener to make sure that the map occupies the whole container
+window.addEventListener('resize', () => map.getViewPort().resize());
+
+
+// Step 3: make the map interactive
+// MapEvents enables the event system
+// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
+var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
+
+// Create the default UI components
+var ui = H.ui.UI.createDefault(map, defaultLayers);
+
+// Step 4: Add geo polygon with hovering styles
+addHoverablePolygons(map);
diff --git a/polygon-hovering/styles.css b/polygon-hovering/styles.css