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 diff --git a/display-gpx-on-map/data/truck.gpx b/display-gpx-on-map/data/truck.gpx new file mode 100644 index 0000000..1d0577e --- /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..f6d1c30 --- /dev/null +++ b/display-gpx-on-map/demo.html @@ -0,0 +1,27 @@ + + + + + + + Display GPX Data + + + + + + + + + + + +

Display GPX Data

+

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.

+
+ + + diff --git a/display-gpx-on-map/demo.js b/display-gpx-on-map/demo.js new file mode 100644 index 0000000..2d6b14b --- /dev/null +++ b/display-gpx-on-map/demo.js @@ -0,0 +1,126 @@ +/** + * 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( + '' + + '' + + '', + { + 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'; + } + + + // 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. + 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 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 + 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 +const platform = new H.service.Platform({ + apikey: window.apikey +}); +const defaultLayers = platform.createDefaultLayers(); + +// Step 2: initialize a map +const map = new H.Map( + document.getElementById("map"), + defaultLayers.vector.normal.map, + { + zoom: 12, + center: { lat: 52.507, lng: 13.423 }, + 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) +const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); + +// Create the default UI components +const ui = H.ui.UI.createDefault(map, defaultLayers); + +showGPXData(map);