From 47dcb1137dc0bae60e6f49d8b9c85bbd6bba7c29 Mon Sep 17 00:00:00 2001 From: Mandar Wagh Date: Tue, 26 May 2026 16:20:05 +0530 Subject: [PATCH] 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);