From 47dcb1137dc0bae60e6f49d8b9c85bbd6bba7c29 Mon Sep 17 00:00:00 2001 From: Mandar Wagh Date: Tue, 26 May 2026 16:20:05 +0530 Subject: [PATCH 1/5] WEBSDK-1016 Create example for GPX reader Signed-off-by: Mandar Wagh --- display-gpx-on-map/data/truck.gpx | 1687 +++++++++++++++++++++++++++++ display-gpx-on-map/demo.css | 10 + display-gpx-on-map/demo.details | 12 + display-gpx-on-map/demo.html | 25 + display-gpx-on-map/demo.js | 123 +++ 5 files changed, 1857 insertions(+) create mode 100644 display-gpx-on-map/data/truck.gpx create mode 100644 display-gpx-on-map/demo.css create mode 100644 display-gpx-on-map/demo.details create mode 100644 display-gpx-on-map/demo.html create mode 100644 display-gpx-on-map/demo.js diff --git a/display-gpx-on-map/data/truck.gpx b/display-gpx-on-map/data/truck.gpx new file mode 100644 index 0000000..b1b61ec --- /dev/null +++ b/display-gpx-on-map/data/truck.gpx @@ -0,0 +1,1687 @@ + + + + Berlin Parks Truck Route + Sample truck route visiting parks and green spaces in Berlin. + + + Jungfernheide Park + Start + + + Großer Tiergarten + Delivery + + + Tempelhofer Feld + Delivery + + + Treptower Park + Delivery + + + Volkspark Friedrichshain + Delivery + + + Mauerpark + Delivery + + + Park am Gleisdreieck + Delivery + + + Viktoriapark + Delivery + + + Britzer Garten + Delivery + + + Gardens of the World + Stop + + + + Jungfernheide Park to Großer Tiergarten + 0 + 1 + 10 + 20 + 30 + 11.0 + 26 + 27 + 28 + 29 + 14.0 + 31 + 15.2 + 33 + 16.4 + 35 + 36 + 37 + 38 + 39 + 20 + 21 + 09.2 + 09.8 + 10.4 + 25 + 11.6 + 27 + 28 + 13.4 + 14.0 + 31 + 32 + 33 + 16.4 + 17.0 + 17.6 + 18.2 + 18.8 + 19.4 + 08.0 + 08.6 + 09.2 + 09.8 + 10.4 + 25 + 26 + 27 + 12.8 + 29 + 14.0 + 31 + 32 + 33 + 34 + 35 + 17.6 + 37 + 18.8 + 39 + 20 + 08.6 + 09.2 + 09.8 + 24 + 11.0 + 11.6 + 12.2 + 28 + 29 + 30 + 31 + 32 + 15.8 + 16.4 + 35 + 17.6 + 18.2 + 38 + 39 + 20 + 08.6 + 22 + 23 + 24 + 11.0 + 26 + 27 + 28 + 13.4 + 14.0 + 31 + 15.2 + 15.8 + 16.4 + 17.0 + 36 + 37 + 38 + 19.4 + 08.0 + 21 + 22 + 23 + 24 + 25 + 26 + 27 + 28 + 13.4 + 30 + 31 + 32 + 15.8 + 34 + 35 + 36 + 37 + 38 + 39 + 20 + 08.6 + 09.2 + 23 + 10.4 + 11.0 + 11.6 + 12.2 + 12.8 + 13.4 + 14.0 + 14.6 + 15.2 + 15.8 + 16.4 + 17.0 + 17.6 + 18.2 + 18.8 + 39 + 08.0 + 08.6 + 09.2 + 09.8 + 10.4 + 25 + 11.6 + 12.2 + 12.8 + 29 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 18.2 + 18.8 + 19.4 + 08.0 + 21 + 22 + 23 + 24 + 25 + 26 + 27 + 28 + 29 + 14.0 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 20 + 21 + 22 + 09.8 + 10.4 + 25 + 11.6 + 12.2 + 12.8 + 13.4 + 14.0 + 14.6 + 32 + 15.8 + 16.4 + 17.0 + 36 + 20 + 10 + 00 + 0 + + + Großer Tiergarten to Tempelhofer Feld + 0 + 10 + 20 + 30 + 40 + 35 + 21.6 + 37 + 38 + 23.4 + 24.0 + 24.6 + 25.2 + 25.8 + 44 + 27.0 + 27.6 + 28.2 + 28.8 + 29.4 + 18.0 + 18.6 + 19.2 + 19.8 + 20.4 + 21.0 + 21.6 + 22.2 + 22.8 + 23.4 + 24.0 + 41 + 25.2 + 25.8 + 44 + 45 + 27.6 + 47 + 48 + 29.4 + 18.0 + 31 + 19.2 + 33 + 34 + 35 + 36 + 37 + 22.8 + 23.4 + 40 + 24.6 + 25.2 + 25.8 + 26.4 + 27.0 + 27.6 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 22.2 + 38 + 39 + 40 + 41 + 42 + 43 + 26.4 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 21.0 + 21.6 + 37 + 38 + 23.4 + 40 + 24.6 + 25.2 + 43 + 26.4 + 27.0 + 46 + 28.2 + 28.8 + 49 + 18.0 + 31 + 32 + 19.8 + 20.4 + 35 + 21.6 + 37 + 38 + 39 + 40 + 41 + 25.2 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 18.0 + 18.6 + 19.2 + 19.8 + 34 + 35 + 36 + 37 + 22.8 + 23.4 + 24.0 + 24.6 + 25.2 + 15 + 10 + 0 + + + Tempelhofer Feld leg + 0 + 10 + 20 + 30 + 40 + 21.0 + 21.6 + 22.2 + 22.8 + 39 + 40 + 24.6 + 25.2 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 22.8 + 23.4 + 15 + 6 + 0 + + + Park am Gleisdreieck approach + 0 + 10 + 20 + 30 + 40 + 35 + 36 + 37 + 38 + 39 + 24.0 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 21.0 + 36 + 37 + 22.8 + 39 + 24.0 + 41 + 42 + 43 + 26.4 + 45 + 46 + 28.2 + 48 + 49 + 30 + 18.6 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 28.2 + 28.8 + 49 + 30 + 18.6 + 19.2 + 33 + 34 + 35 + 36 + 37 + 38 + 23.4 + 40 + 41 + 25.2 + 43 + 26.4 + 45 + 46 + 47 + 48 + 49 + 30 + 18.6 + 32 + 33 + 20.4 + 35 + 36 + 37 + 22.8 + 39 + 40 + 41 + 42 + 43 + 44 + 27.0 + 46 + 28.2 + 28.8 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 24 + 12 + 0 + + + Viktoriapark to Britzer Garten + 0 + 10 + 20 + 30 + 40 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 25.8 + 26.4 + 45 + 27.6 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 25.8 + 26.4 + 27.0 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 21.0 + 36 + 22.2 + 38 + 39 + 24.0 + 41 + 25.2 + 43 + 44 + 45 + 46 + 28.2 + 48 + 49 + 30 + 31 + 32 + 19.8 + 34 + 21.0 + 36 + 37 + 38 + 39 + 40 + 24.6 + 25.2 + 25.8 + 44 + 45 + 27.6 + 28.2 + 28.8 + 29.4 + 30 + 31 + 32 + 33 + 34 + 21.0 + 36 + 37 + 38 + 39 + 24.0 + 41 + 42 + 43 + 26.4 + 45 + 27.6 + 47 + 28.8 + 29.4 + 30 + 31 + 32 + 33 + 34 + 21.0 + 21.6 + 37 + 38 + 23.4 + 24.0 + 41 + 42 + 43 + 44 + 45 + 46 + 28.2 + 28.8 + 49 + 30 + 31 + 32 + 33 + 20.4 + 21.0 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 28.2 + 48 + 29.4 + 18.0 + 31 + 32 + 33 + 20.4 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 26.4 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 19.8 + 20.4 + 21.0 + 36 + 37 + 38 + 23.4 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 28.8 + 49 + 30 + 31 + 19.2 + 33 + 34 + 35 + 21.6 + 37 + 38 + 39 + 40 + 41 + 42 + 25.8 + 44 + 45 + 46 + 47 + 48 + 29.4 + 30 + 31 + 19.2 + 33 + 20.4 + 35 + 36 + 37 + 38 + 23.4 + 40 + 24.6 + 42 + 43 + 26.4 + 45 + 46 + 28.2 + 48 + 29.4 + 30 + 18.6 + 32 + 33 + 20.4 + 35 + 36 + 37 + 38 + 39 + 24.0 + 24.6 + 42 + 43 + 44 + 27.0 + 46 + 28.2 + 48 + 29.4 + 18.0 + 31 + 32 + 33 + 34 + 35 + 21.6 + 37 + 38 + 39 + 40 + 24.6 + 42 + 43 + 44 + 27.0 + 46 + 47 + 48 + 49 + 18.0 + 31 + 32 + 33 + 34 + 35 + 21.6 + 22.2 + 38 + 39 + 40 + 30 + 20 + 10 + 0 + + + Britzer Garten to Treptower Park + 0 + 10 + 20 + 30 + 40 + 35 + 36 + 37 + 22.8 + 23.4 + 40 + 24.6 + 42 + 43 + 26.4 + 27.0 + 46 + 28.2 + 48 + 29.4 + 30 + 18.6 + 32 + 33 + 34 + 35 + 21.6 + 37 + 22.8 + 39 + 40 + 41 + 25.2 + 25.8 + 44 + 45 + 27.6 + 47 + 28.8 + 29.4 + 30 + 31 + 32 + 19.8 + 20.4 + 35 + 36 + 37 + 38 + 39 + 24.0 + 41 + 25.2 + 25.8 + 44 + 45 + 46 + 47 + 28.8 + 49 + 18.0 + 18.6 + 19.2 + 33 + 34 + 21.0 + 21.6 + 37 + 38 + 39 + 40 + 41 + 25.2 + 43 + 26.4 + 45 + 46 + 28.2 + 48 + 49 + 30 + 31 + 32 + 33 + 20.4 + 21.0 + 36 + 22.2 + 38 + 23.4 + 24.0 + 41 + 42 + 25.8 + 26.4 + 27.0 + 46 + 47 + 48 + 49 + 30 + 31 + 19.2 + 19.8 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 25.8 + 44 + 45 + 46 + 47 + 28.8 + 49 + 18.0 + 18.6 + 32 + 33 + 34 + 35 + 36 + 37 + 22.8 + 39 + 24.0 + 41 + 42 + 25.8 + 44 + 45 + 27.6 + 47 + 28.8 + 49 + 18.0 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 23.4 + 40 + 41 + 25.2 + 43 + 26.4 + 45 + 46 + 47 + 48 + 49 + 30 + 18.6 + 32 + 33 + 34 + 35 + 36 + 22.2 + 22.8 + 39 + 24.0 + 41 + 42 + 43 + 44 + 27.0 + 27.6 + 28.2 + 28.8 + 49 + 18.0 + 18.6 + 19.2 + 19.8 + 20.4 + 35 + 36 + 22.2 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 27.0 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 21.6 + 37 + 22.8 + 39 + 40 + 41 + 42 + 25.8 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 24.6 + 42 + 43 + 26.4 + 45 + 46 + 47 + 28.8 + 29.4 + 18.0 + 31 + 19.2 + 19.8 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 28.2 + 28.8 + 49 + 18.0 + 31 + 32 + 33 + 20.4 + 35 + 36 + 22.2 + 22.8 + 39 + 40 + 41 + 42 + 43 + 26.4 + 45 + 46 + 47 + 48 + 29.4 + 30 + 18.6 + 19.2 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 27.6 + 28.2 + 48 + 49 + 0 + 31 + 19.2 + 19.8 + 20.4 + 21.0 + 21.6 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 27.6 + 28.2 + 28.8 + 29.4 + 30 + 31 + 32 + 33 + 34 + 35 + 21.6 + 22.2 + 22.8 + 23.4 + 40 + 41 + 30 + 20 + 10 + 0 + + + Treptower Park to Volkspark Friedrichshain + 0 + 10 + 20 + 30 + 40 + 21.0 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 27.0 + 27.6 + 28.2 + 28.8 + 29.4 + 30 + 18.6 + 19.2 + 33 + 20.4 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 26.4 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 24.0 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 22.8 + 39 + 40 + 24.6 + 25.2 + 43 + 44 + 27.0 + 46 + 47 + 48 + 29.4 + 30 + 31 + 32 + 19.8 + 34 + 21.0 + 21.6 + 22.2 + 22.8 + 39 + 40 + 41 + 25.2 + 43 + 44 + 27.0 + 46 + 47 + 48 + 29.4 + 30 + 31 + 32 + 33 + 20.4 + 35 + 21.6 + 22.2 + 22.8 + 39 + 40 + 41 + 25.2 + 25.8 + 26.4 + 27.0 + 27.6 + 28.2 + 28.8 + 29.4 + 18.0 + 18.6 + 19.2 + 19.8 + 20.4 + 21.0 + 36 + 22.2 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 19.8 + 20.4 + 35 + 36 + 37 + 38 + 23.4 + 40 + 41 + 25.2 + 43 + 44 + 45 + 46 + 28.2 + 28.8 + 29.4 + 30 + 31 + 19.2 + 19.8 + 34 + 35 + 36 + 22.2 + 22.8 + 39 + 40 + 41 + 42 + 25.8 + 26.4 + 45 + 46 + 47 + 48 + 29.4 + 30 + 31 + 32 + 33 + 34 + 35 + 21.6 + 22.2 + 22.8 + 23.4 + 24.0 + 24.6 + 42 + 43 + 44 + 27.0 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 20.4 + 35 + 36 + 37 + 38 + 39 + 24.0 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 19.2 + 19.8 + 34 + 35 + 36 + 22.2 + 38 + 23.4 + 40 + 41 + 25.2 + 25.8 + 15 + 5 + 0 + + + Volkspark Friedrichshain to Mauerpark + 0 + 10 + 20 + 30 + 40 + 21.0 + 36 + 37 + 22.8 + 39 + 24.0 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 24.6 + 42 + 25.8 + 26.4 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 21.0 + 21.6 + 22.2 + 22.8 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 29.4 + 30 + 18.6 + 19.2 + 33 + 34 + 35 + 36 + 37 + 22.8 + 23.4 + 40 + 41 + 42 + 25.8 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 19.8 + 20.4 + 21.0 + 36 + 20 + 10 + 0 + + + Mauerpark to Gardens of the World + 0 + 10 + 20 + 30 + 40 + 21.0 + 21.6 + 22.2 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 19.2 + 33 + 34 + 35 + 36 + 22.2 + 22.8 + 23.4 + 24.0 + 41 + 42 + 43 + 44 + 45 + 46 + 28.2 + 48 + 29.4 + 18.0 + 31 + 32 + 19.8 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 18.0 + 31 + 32 + 33 + 34 + 21.0 + 21.6 + 37 + 38 + 39 + 40 + 41 + 42 + 25.8 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 19.2 + 19.8 + 34 + 35 + 21.6 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 18.6 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 27.6 + 28.2 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 20.4 + 21.0 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 25 + 15 + 4 + 0 + + + \ No newline at end of file diff --git a/display-gpx-on-map/demo.css b/display-gpx-on-map/demo.css new file mode 100644 index 0000000..769fd1f --- /dev/null +++ b/display-gpx-on-map/demo.css @@ -0,0 +1,10 @@ +#map { + width: 95%; + height: 450px; + background: grey; +} + +#panel { + width: 100%; + height: 400px; +} \ No newline at end of file diff --git a/display-gpx-on-map/demo.details b/display-gpx-on-map/demo.details new file mode 100644 index 0000000..c1077d3 --- /dev/null +++ b/display-gpx-on-map/demo.details @@ -0,0 +1,12 @@ +--- + name: Display GPX Data + description: Parse a GPX file and display the data 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 +... \ No newline at end of file diff --git a/display-gpx-on-map/demo.html b/display-gpx-on-map/demo.html new file mode 100644 index 0000000..6ef3f8d --- /dev/null +++ b/display-gpx-on-map/demo.html @@ -0,0 +1,25 @@ + + + + + + + Display GPX Data + + + + + + + + + + + +

Display GPX Data

+

This example loads a GPX document and render its content on the map using built in parser. And shows how to configure styles for waypoints and tracks

+

In order to work with GPX files we have to additionally load data module of the API. Than we use H.data.gpx.Reader class, which downloads and parses the file. Than we add a layer on the map using addLayer method to see the results.

+
+ + + \ No newline at end of file diff --git a/display-gpx-on-map/demo.js b/display-gpx-on-map/demo.js new file mode 100644 index 0000000..37d7a79 --- /dev/null +++ b/display-gpx-on-map/demo.js @@ -0,0 +1,123 @@ +function showGPXData(map) { + + // Simple inline SVG icons keyed by waypoint values. + const symbolIcons = { + 'Start': new H.map.Icon( + '' + + '' + + '', + { + anchor: { 'x': 14, 'y': 14 } + } + ), + 'Delivery': new H.map.Icon( + '' + + '' + + '', + { + anchor: { 'x': 14, 'y': 14 } + } + ), + 'Stop': new H.map.Icon( + '' + + '' + + '', + { + anchor: { 'x': 14, 'y': 14 } + } + ) + }; + + const getColorForAverageSpeed = (avg) => { + if (avg === undefined) { + return '#999999'; + } + if (avg < 25) { + return '#1fb444b8'; + } + if (avg < 35) { + return '#007fefb8'; + } + return '#d7191cb8'; + } + + /** + * The demo highlights following customization techniques: + * - waypoints are rendered with SVG icons chosen from each ``'s `sym` value; + * - track segments are styled individually based on the average `` of their points (`enableIndividualTrackSegmentStyling: true`). + */ + + // Create GPX reader which will download the specified file. + // The file was created by using HERE WaypointSequence and Routing API. + // It is possible to customize look and feel of the objects. + + var reader = new H.data.gpx.Reader( + "https://heremaps.github.io/maps-api-for-javascript-examples/display-gpx-on-map/data/truck.gpx", + { + // Enable this flag so that we can style tracks with different color + enableIndividualTrackSegmentStyling: true, + + // This function is called each time parser detects a new map object + style: function (mapObject) { + const data = mapObject.getData(); + switch (data.featureType) { + // Set icon based on symbol type + case 'waypoint': + const icon = symbolIcons[data.sym]; + if (icon) { + mapObject.setIcon(icon); + } + break; + case 'track_segment': + // Color based on speeds + const speeds = data.pointsMetaInfo.map((p) => p.speed); + const avg = speeds.reduce((a, b) => a + b, 0) / speeds.length || undefined; + const color = getColorForAverageSpeed(avg); + mapObject.setStyle({ + lineWidth: 6, + strokeColor: color + }); + break; + } + }, + } + ); + + // Start parsing the file + reader.parse(); + + // Add layer which shows GPX data on the map + map.addLayer(reader.getLayer()); +} + +/** + * 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: 12, + center: { lat: 52.507400461217564, lng: 13.423222081779844 }, + 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); + +showGPXData(map); From 5567f23a5e71dfe8f7c45fb26b5b1cb4c21d11f6 Mon Sep 17 00:00:00 2001 From: Daniele Bacarella Date: Fri, 5 Jun 2026 19:02:08 +0200 Subject: [PATCH 2/5] Refactor demo.js for clarity and modern syntax Updated comments and variable declarations for clarity and consistency. Changed the initialization of variables to use 'const' instead of 'var'. --- display-gpx-on-map/demo.js | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/display-gpx-on-map/demo.js b/display-gpx-on-map/demo.js index 37d7a79..2d6b14b 100644 --- a/display-gpx-on-map/demo.js +++ b/display-gpx-on-map/demo.js @@ -1,5 +1,12 @@ +/** + * This example loads a GPX document and renders its content on the map applying a custom style based on the GPX data. + * - GPX waypoints are rendered with SVG icons chosen based on ``'s `sym` value. + * - GPX track segments are styled individually based on the average `` value of their points. + * + * For more details on GPX support in the HERE Maps API for JavaScript, see the documentation: + * https://docs.here.com/maps-api-for-js/docs/gpx-support + */ function showGPXData(map) { - // Simple inline SVG icons keyed by waypoint values. const symbolIcons = { 'Start': new H.map.Icon( @@ -41,20 +48,16 @@ function showGPXData(map) { return '#d7191cb8'; } - /** - * The demo highlights following customization techniques: - * - waypoints are rendered with SVG icons chosen from each ``'s `sym` value; - * - track segments are styled individually based on the average `` of their points (`enableIndividualTrackSegmentStyling: true`). - */ - // Create GPX reader which will download the specified file. - // The file was created by using HERE WaypointSequence and Routing API. + // Create a GPX reader which will download and parse the specified file. + // The file was created by using [HERE Waypoints Sequence API v8](https://docs.here.com/routing/docs/intro-waypoints-sequence) and + // [HERE Routing API v8](https://docs.here.com/routing/docs/routing-v8-intro). // It is possible to customize look and feel of the objects. - - var reader = new H.data.gpx.Reader( + const reader = new H.data.gpx.Reader( "https://heremaps.github.io/maps-api-for-javascript-examples/display-gpx-on-map/data/truck.gpx", { - // Enable this flag so that we can style tracks with different color + // Enable this flag so that we can style each individual track segment. + // For more details, see https://docs.here.com/maps-api-for-js/docs/gpx-support#track-trk-and-trkseg enableIndividualTrackSegmentStyling: true, // This function is called each time parser detects a new map object @@ -94,18 +97,18 @@ function showGPXData(map) { * Boilerplate map initialization code starts below: */ // Step 1: initialize communication with the platform -var platform = new H.service.Platform({ +const platform = new H.service.Platform({ apikey: window.apikey }); -var defaultLayers = platform.createDefaultLayers(); +const defaultLayers = platform.createDefaultLayers(); // Step 2: initialize a map -var map = new H.Map( +const map = new H.Map( document.getElementById("map"), defaultLayers.vector.normal.map, { zoom: 12, - center: { lat: 52.507400461217564, lng: 13.423222081779844 }, + center: { lat: 52.507, lng: 13.423 }, pixelRatio: window.devicePixelRatio || 1, } ); @@ -115,9 +118,9 @@ 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)); +const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); // Create the default UI components -var ui = H.ui.UI.createDefault(map, defaultLayers); +const ui = H.ui.UI.createDefault(map, defaultLayers); showGPXData(map); From 5f18d255e6a302ab383ceec31ea160a1e75bd2d5 Mon Sep 17 00:00:00 2001 From: Daniele Bacarella Date: Fri, 5 Jun 2026 19:03:02 +0200 Subject: [PATCH 3/5] used proper product name --- display-gpx-on-map/data/truck.gpx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/display-gpx-on-map/data/truck.gpx b/display-gpx-on-map/data/truck.gpx index b1b61ec..1d0577e 100644 --- a/display-gpx-on-map/data/truck.gpx +++ b/display-gpx-on-map/data/truck.gpx @@ -1,5 +1,5 @@ - + Berlin Parks Truck Route Sample truck route visiting parks and green spaces in Berlin. From 624d9ed5c2c36babb89d99a15c22d28acc9c13d5 Mon Sep 17 00:00:00 2001 From: Daniele Bacarella Date: Fri, 5 Jun 2026 19:03:50 +0200 Subject: [PATCH 4/5] Improve HTML content and links for GPX example --- display-gpx-on-map/demo.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/display-gpx-on-map/demo.html b/display-gpx-on-map/demo.html index 6ef3f8d..f6d1c30 100644 --- a/display-gpx-on-map/demo.html +++ b/display-gpx-on-map/demo.html @@ -17,9 +17,11 @@

Display GPX Data

-

This example loads a GPX document and render its content on the map using built in parser. And shows how to configure styles for waypoints and tracks

-

In order to work with GPX files we have to additionally load data module of the API. Than we use H.data.gpx.Reader class, which downloads and parses the file. Than we add a layer on the map using addLayer method to see the results.

+

This example loads a GPX document and renders its content on the map using the built-in parser. It also shows how to configure styles for waypoints and tracks.

+

To work with GPX files, we need to load the API's mapsjs-data.js module. Then we use the H.data.gpx.Reader class, which downloads and parses the file. After that, we add a layer to the map using the H.Map#addLayer method to see the results.

+
+

For more details on GPX support in the HERE Maps API for JavaScript, see the Display GPX data developer guide.

- \ No newline at end of file + From b8ef5d9426e30a56a9436fba5d934918cae58723 Mon Sep 17 00:00:00 2001 From: Daniele Bacarella Date: Fri, 5 Jun 2026 19:07:17 +0200 Subject: [PATCH 5/5] Add GPX data display example to README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e9c200c..0380593 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ All of the following examples use **version 3.2** of the API * [DOM Marker rotation](https://heremaps.github.io/maps-api-for-javascript-examples/dom-marker-rotation/demo.html) - Rotate DOM Marker's content using CSS * [Display KML Data](https://heremaps.github.io/maps-api-for-javascript-examples/display-kml-on-map/demo.html) - Parse a KML file and display the data on a map * [Display GeoJSON Data](https://heremaps.github.io/maps-api-for-javascript-examples/display-geojson-on-map/demo.html) - Parse a GeoJSON file and display the data on a map +* [Display GPX Data](https://heremaps.github.io/maps-api-for-javascript-examples/display-gpx-on-map/demo.html) - Parse a GPX file and display the data on a map * [Display an Indoor Map](https://heremaps.github.io/maps-api-for-javascript-examples/indoor-map/demo.html) - Use the HERE Indoor Maps API to load and visualize an indoor map * [UI interactions on Indoor Map](https://heremaps.github.io/maps-api-for-javascript-examples/indoor-map-ui-interaction/demo.html) - HERE Indoor Maps API with UI interactions on the map * [Restrict map movement with Indoor Map](https://heremaps.github.io/maps-api-for-javascript-examples/indoor-map-movement/demo.html) - Restrict the map movement within the indoor map bounds