From 1428bacbac8eea70e9c6520ce6508cc2b83ab33b Mon Sep 17 00:00:00 2001
From: Tim Deubler <tim.deubler@here.com>
Date: Fri, 17 Nov 2023 18:44:37 +0100
Subject: [PATCH] switch default mvt basemap to here vectortiles

Signed-off-by: Tim Deubler <tim.deubler@here.com>
---
 packages/playground/examples/display/add_remove_layer.ts        | 2 +-
 packages/playground/examples/display/animate_road.ts            | 2 +-
 packages/playground/examples/display/behavior_set.ts            | 2 +-
 .../examples/display/click_feature_show_properties.ts           | 2 +-
 .../playground/examples/display/click_feature_to_center_map.ts  | 2 +-
 packages/playground/examples/display/click_highlight_line.ts    | 2 +-
 packages/playground/examples/display/custom_layer.ts            | 2 +-
 packages/playground/examples/display/hello_world.ts             | 2 +-
 packages/playground/examples/display/hover_hightlight_line.ts   | 2 +-
 packages/playground/examples/display/mapview_listener.ts        | 2 +-
 packages/playground/examples/display/observer.ts                | 2 +-
 packages/playground/examples/display/pitch_rotate_map.ts        | 2 +-
 packages/playground/examples/display/pointer_listener.ts        | 2 +-
 .../playground/examples/display/switch_layers_display_order.ts  | 2 +-
 packages/playground/examples/display/take_a_screenshot.ts       | 2 +-
 packages/playground/examples/display/visualize_space_layer.ts   | 2 +-
 packages/playground/examples/editor/add_contextmenu.ts          | 2 +-
 packages/playground/examples/editor/add_remove_object_layer.ts  | 2 +-
 packages/playground/examples/editor/add_road.ts                 | 2 +-
 packages/playground/examples/editor/change_road_name.ts         | 2 +-
 packages/playground/examples/editor/create_address.ts           | 2 +-
 packages/playground/examples/editor/create_navlink.ts           | 2 +-
 packages/playground/examples/editor/create_place.ts             | 2 +-
 packages/playground/examples/editor/crossing_detect.ts          | 2 +-
 packages/playground/examples/editor/custom_provider.ts          | 2 +-
 packages/playground/examples/editor/drag_place_to_building.ts   | 2 +-
 packages/playground/examples/editor/edit_building.ts            | 2 +-
 packages/playground/examples/editor/edit_line_3d.ts             | 2 +-
 packages/playground/examples/editor/edit_point_3d.ts            | 2 +-
 packages/playground/examples/editor/hello_world.ts              | 2 +-
 .../examples/editor/hover_highlight_connected_navlink.ts        | 2 +-
 packages/playground/examples/editor/observe_change_history.ts   | 2 +-
 packages/playground/examples/editor/pointer_listener.ts         | 2 +-
 packages/playground/examples/editor/range_selector.ts           | 2 +-
 packages/playground/examples/editor/select_shapes.ts            | 2 +-
 packages/playground/examples/editor/select_specific_navlink.ts  | 2 +-
 packages/playground/examples/editor/transform_road.ts           | 2 +-
 packages/playground/examples/editor/turn_restriction_editor.ts  | 2 +-
 packages/playground/examples/layer/3d_buildings.ts              | 2 +-
 packages/playground/examples/layer/3d_lines.ts                  | 2 +-
 packages/playground/examples/layer/3d_points.ts                 | 2 +-
 packages/playground/examples/layer/Heatmap.ts                   | 2 +-
 packages/playground/examples/layer/MVTLayer.ts                  | 2 +-
 .../playground/examples/layer/add_remove_building_feature.ts    | 2 +-
 packages/playground/examples/layer/add_remove_line.ts           | 2 +-
 packages/playground/examples/layer/add_remove_point.ts          | 2 +-
 packages/playground/examples/layer/collision_detection.ts       | 2 +-
 packages/playground/examples/layer/custom_style.ts              | 2 +-
 packages/playground/examples/layer/label_collision_detection.ts | 2 +-
 packages/playground/examples/layer/offset_line.ts               | 2 +-
 packages/playground/examples/layer/preprocessor.ts              | 2 +-
 packages/playground/examples/layer/remote_search_boundingbox.ts | 2 +-
 packages/playground/examples/layer/search_boundingbox.ts        | 2 +-
 packages/playground/examples/layer/search_id.ts                 | 2 +-
 packages/playground/examples/layer/set_layer_color.ts           | 2 +-
 packages/playground/examples/layer/settag_space_provider.ts     | 2 +-
 packages/playground/examples/layer/style_drawingorder.ts        | 2 +-
 packages/playground/examples/layer/style_navlink.ts             | 2 +-
 packages/playground/examples/layer/style_zoomrange.ts           | 2 +-
 59 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/packages/playground/examples/display/add_remove_layer.ts b/packages/playground/examples/display/add_remove_layer.ts
index 679114f89..0e80c17a1 100644
--- a/packages/playground/examples/display/add_remove_layer.ts
+++ b/packages/playground/examples/display/add_remove_layer.ts
@@ -9,7 +9,7 @@ var layers = [
         min: 1,
         max: 20,
         remote: {
-            url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+            url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
         }
     })
 ];
diff --git a/packages/playground/examples/display/animate_road.ts b/packages/playground/examples/display/animate_road.ts
index 07e726731..ca235a350 100644
--- a/packages/playground/examples/display/animate_road.ts
+++ b/packages/playground/examples/display/animate_road.ts
@@ -5,7 +5,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let myLayer = new TileLayer({
diff --git a/packages/playground/examples/display/behavior_set.ts b/packages/playground/examples/display/behavior_set.ts
index 8b816d240..d4f412412 100644
--- a/packages/playground/examples/display/behavior_set.ts
+++ b/packages/playground/examples/display/behavior_set.ts
@@ -14,7 +14,7 @@ const display = new Map(document.getElementById('map'), {
             min: 1,
             max: 20,
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             }
         })
     ]
diff --git a/packages/playground/examples/display/click_feature_show_properties.ts b/packages/playground/examples/display/click_feature_show_properties.ts
index 74360c2f0..48c06a472 100644
--- a/packages/playground/examples/display/click_feature_show_properties.ts
+++ b/packages/playground/examples/display/click_feature_show_properties.ts
@@ -8,7 +8,7 @@ var layers = [
         min: 1,
         max: 20,
         remote: {
-            url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+            url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
         }
     }),
     new TileLayer({
diff --git a/packages/playground/examples/display/click_feature_to_center_map.ts b/packages/playground/examples/display/click_feature_to_center_map.ts
index 8bae2dc40..3f038b796 100644
--- a/packages/playground/examples/display/click_feature_to_center_map.ts
+++ b/packages/playground/examples/display/click_feature_to_center_map.ts
@@ -42,7 +42,7 @@ const display = new Map(document.getElementById('map'), {
             min: 1,
             max: 20,
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             }
         }),
         myLayer
diff --git a/packages/playground/examples/display/click_highlight_line.ts b/packages/playground/examples/display/click_highlight_line.ts
index 9be77254c..d4128958f 100644
--- a/packages/playground/examples/display/click_highlight_line.ts
+++ b/packages/playground/examples/display/click_highlight_line.ts
@@ -7,7 +7,7 @@ const backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 const spaceLayer = new TileLayer({
diff --git a/packages/playground/examples/display/custom_layer.ts b/packages/playground/examples/display/custom_layer.ts
index 2b68ad130..cbeea93dc 100644
--- a/packages/playground/examples/display/custom_layer.ts
+++ b/packages/playground/examples/display/custom_layer.ts
@@ -6,7 +6,7 @@ import {Map} from '@here/xyz-maps-display';
 const baseMapLayer = new MVTLayer({
     name: 'mvt-world-layer',
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     },
     style: {
         backgroundColor: '#ECE0CA',
diff --git a/packages/playground/examples/display/hello_world.ts b/packages/playground/examples/display/hello_world.ts
index ab966c4dd..d614f5fef 100644
--- a/packages/playground/examples/display/hello_world.ts
+++ b/packages/playground/examples/display/hello_world.ts
@@ -17,7 +17,7 @@ const display = new Map(document.getElementById('map'), {
             // the maximum zoom level the layer is displayed
             max: 20,
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             }
         })
     ]
diff --git a/packages/playground/examples/display/hover_hightlight_line.ts b/packages/playground/examples/display/hover_hightlight_line.ts
index 829997e13..b554d87a6 100644
--- a/packages/playground/examples/display/hover_hightlight_line.ts
+++ b/packages/playground/examples/display/hover_hightlight_line.ts
@@ -7,7 +7,7 @@ const backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 const lineLayer = new TileLayer({
diff --git a/packages/playground/examples/display/mapview_listener.ts b/packages/playground/examples/display/mapview_listener.ts
index 52e75f00a..9a4321bae 100644
--- a/packages/playground/examples/display/mapview_listener.ts
+++ b/packages/playground/examples/display/mapview_listener.ts
@@ -15,7 +15,7 @@ const display = new Map(document.getElementById('map'), {
             min: 1,
             max: 20,
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             }
         })
     ]
diff --git a/packages/playground/examples/display/observer.ts b/packages/playground/examples/display/observer.ts
index bf4cda20b..eee94d5fd 100644
--- a/packages/playground/examples/display/observer.ts
+++ b/packages/playground/examples/display/observer.ts
@@ -14,7 +14,7 @@ const display = new Map(document.getElementById('map'), {
             min: 1,
             max: 20,
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             }
         })
     ]
diff --git a/packages/playground/examples/display/pitch_rotate_map.ts b/packages/playground/examples/display/pitch_rotate_map.ts
index 1431ab6fa..464b3237a 100644
--- a/packages/playground/examples/display/pitch_rotate_map.ts
+++ b/packages/playground/examples/display/pitch_rotate_map.ts
@@ -5,7 +5,7 @@ import {Map} from '@here/xyz-maps-display';
 const baseMapLayer = new MVTLayer({
     name: 'mvt-world-layer',
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     },
     style: {
         backgroundColor: '#ECE0CA',
diff --git a/packages/playground/examples/display/pointer_listener.ts b/packages/playground/examples/display/pointer_listener.ts
index 7a4b9f17d..2d6172c93 100644
--- a/packages/playground/examples/display/pointer_listener.ts
+++ b/packages/playground/examples/display/pointer_listener.ts
@@ -7,7 +7,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 
diff --git a/packages/playground/examples/display/switch_layers_display_order.ts b/packages/playground/examples/display/switch_layers_display_order.ts
index ba2977af5..9bec2d0ee 100644
--- a/packages/playground/examples/display/switch_layers_display_order.ts
+++ b/packages/playground/examples/display/switch_layers_display_order.ts
@@ -9,7 +9,7 @@ var layers = [
         min: 1,
         max: 20,
         remote: {
-            url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+            url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
         }
     }),
     new TileLayer({
diff --git a/packages/playground/examples/display/take_a_screenshot.ts b/packages/playground/examples/display/take_a_screenshot.ts
index 735fad1ac..0ff75fa98 100644
--- a/packages/playground/examples/display/take_a_screenshot.ts
+++ b/packages/playground/examples/display/take_a_screenshot.ts
@@ -8,7 +8,7 @@ var layers = [
         min: 1,
         max: 20,
         remote: {
-            url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+            url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
         }
     })
 ];
diff --git a/packages/playground/examples/display/visualize_space_layer.ts b/packages/playground/examples/display/visualize_space_layer.ts
index 2a810dc4f..b6af8b703 100644
--- a/packages/playground/examples/display/visualize_space_layer.ts
+++ b/packages/playground/examples/display/visualize_space_layer.ts
@@ -12,7 +12,7 @@ const display = new Map(document.getElementById('map'), {
         // create a MVTLayer to act as the "basemap" (background layer)
         new MVTLayer({
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             }
         })
     ]
diff --git a/packages/playground/examples/editor/add_contextmenu.ts b/packages/playground/examples/editor/add_contextmenu.ts
index 2f7110d0f..5e79c7db9 100644
--- a/packages/playground/examples/editor/add_contextmenu.ts
+++ b/packages/playground/examples/editor/add_contextmenu.ts
@@ -93,7 +93,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let navlinkLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/add_remove_object_layer.ts b/packages/playground/examples/editor/add_remove_object_layer.ts
index 7346f0700..f82405281 100644
--- a/packages/playground/examples/editor/add_remove_object_layer.ts
+++ b/packages/playground/examples/editor/add_remove_object_layer.ts
@@ -120,7 +120,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 
diff --git a/packages/playground/examples/editor/add_road.ts b/packages/playground/examples/editor/add_road.ts
index e8f0d7fe5..63b9ffa3e 100644
--- a/packages/playground/examples/editor/add_road.ts
+++ b/packages/playground/examples/editor/add_road.ts
@@ -7,7 +7,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let lineLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/change_road_name.ts b/packages/playground/examples/editor/change_road_name.ts
index 306cf77e6..90f064397 100644
--- a/packages/playground/examples/editor/change_road_name.ts
+++ b/packages/playground/examples/editor/change_road_name.ts
@@ -95,7 +95,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let navlinkLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/create_address.ts b/packages/playground/examples/editor/create_address.ts
index 6ae477829..354dce496 100644
--- a/packages/playground/examples/editor/create_address.ts
+++ b/packages/playground/examples/editor/create_address.ts
@@ -130,7 +130,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 
diff --git a/packages/playground/examples/editor/create_navlink.ts b/packages/playground/examples/editor/create_navlink.ts
index bf924ca2b..0cee00ee5 100644
--- a/packages/playground/examples/editor/create_navlink.ts
+++ b/packages/playground/examples/editor/create_navlink.ts
@@ -88,7 +88,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let navlinkLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/create_place.ts b/packages/playground/examples/editor/create_place.ts
index 979e21825..82c5a0e0f 100644
--- a/packages/playground/examples/editor/create_place.ts
+++ b/packages/playground/examples/editor/create_place.ts
@@ -128,7 +128,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 
diff --git a/packages/playground/examples/editor/crossing_detect.ts b/packages/playground/examples/editor/crossing_detect.ts
index 3115d0eb4..6afd7af72 100644
--- a/packages/playground/examples/editor/crossing_detect.ts
+++ b/packages/playground/examples/editor/crossing_detect.ts
@@ -95,7 +95,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let navlinkLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/custom_provider.ts b/packages/playground/examples/editor/custom_provider.ts
index 640b5b820..f10c79065 100644
--- a/packages/playground/examples/editor/custom_provider.ts
+++ b/packages/playground/examples/editor/custom_provider.ts
@@ -127,7 +127,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 
diff --git a/packages/playground/examples/editor/drag_place_to_building.ts b/packages/playground/examples/editor/drag_place_to_building.ts
index a879d8bd8..96d533295 100644
--- a/packages/playground/examples/editor/drag_place_to_building.ts
+++ b/packages/playground/examples/editor/drag_place_to_building.ts
@@ -7,7 +7,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 
diff --git a/packages/playground/examples/editor/edit_building.ts b/packages/playground/examples/editor/edit_building.ts
index f660eabac..eb6b7ef07 100644
--- a/packages/playground/examples/editor/edit_building.ts
+++ b/packages/playground/examples/editor/edit_building.ts
@@ -7,7 +7,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 
diff --git a/packages/playground/examples/editor/edit_line_3d.ts b/packages/playground/examples/editor/edit_line_3d.ts
index 3bbab164d..da0589950 100644
--- a/packages/playground/examples/editor/edit_line_3d.ts
+++ b/packages/playground/examples/editor/edit_line_3d.ts
@@ -7,7 +7,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let lineLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/edit_point_3d.ts b/packages/playground/examples/editor/edit_point_3d.ts
index fb76c94d2..ce3bfe50f 100644
--- a/packages/playground/examples/editor/edit_point_3d.ts
+++ b/packages/playground/examples/editor/edit_point_3d.ts
@@ -7,7 +7,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 const pointLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/hello_world.ts b/packages/playground/examples/editor/hello_world.ts
index bb98b43f6..baa7de679 100644
--- a/packages/playground/examples/editor/hello_world.ts
+++ b/packages/playground/examples/editor/hello_world.ts
@@ -28,7 +28,7 @@ const display = new Map(document.getElementById('map'), {
             min: 1,
             max: 20,
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             }
         }),
         // add the TileLayer to the display
diff --git a/packages/playground/examples/editor/hover_highlight_connected_navlink.ts b/packages/playground/examples/editor/hover_highlight_connected_navlink.ts
index 31f81abed..9c6821913 100644
--- a/packages/playground/examples/editor/hover_highlight_connected_navlink.ts
+++ b/packages/playground/examples/editor/hover_highlight_connected_navlink.ts
@@ -8,7 +8,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let lineLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/observe_change_history.ts b/packages/playground/examples/editor/observe_change_history.ts
index d4bfec6e7..4b1510d8c 100644
--- a/packages/playground/examples/editor/observe_change_history.ts
+++ b/packages/playground/examples/editor/observe_change_history.ts
@@ -6,7 +6,7 @@ import {Editor} from '@here/xyz-maps-editor';
 let backgroundLayer = new MVTLayer({
     min: 1, max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let myLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/pointer_listener.ts b/packages/playground/examples/editor/pointer_listener.ts
index 67649844a..e33cbe578 100644
--- a/packages/playground/examples/editor/pointer_listener.ts
+++ b/packages/playground/examples/editor/pointer_listener.ts
@@ -129,7 +129,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 
diff --git a/packages/playground/examples/editor/range_selector.ts b/packages/playground/examples/editor/range_selector.ts
index 57843e1b0..1e0f7a648 100644
--- a/packages/playground/examples/editor/range_selector.ts
+++ b/packages/playground/examples/editor/range_selector.ts
@@ -92,7 +92,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let navlinkLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/select_shapes.ts b/packages/playground/examples/editor/select_shapes.ts
index 16c439e1d..2a44cf9d2 100644
--- a/packages/playground/examples/editor/select_shapes.ts
+++ b/packages/playground/examples/editor/select_shapes.ts
@@ -7,7 +7,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let lineLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/select_specific_navlink.ts b/packages/playground/examples/editor/select_specific_navlink.ts
index 946a640b1..b4740475a 100644
--- a/packages/playground/examples/editor/select_specific_navlink.ts
+++ b/packages/playground/examples/editor/select_specific_navlink.ts
@@ -92,7 +92,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let myLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/transform_road.ts b/packages/playground/examples/editor/transform_road.ts
index de9ff20f2..db4889ef9 100644
--- a/packages/playground/examples/editor/transform_road.ts
+++ b/packages/playground/examples/editor/transform_road.ts
@@ -7,7 +7,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let navlinkLayer = new TileLayer({
diff --git a/packages/playground/examples/editor/turn_restriction_editor.ts b/packages/playground/examples/editor/turn_restriction_editor.ts
index 30da1c389..5297e70f0 100644
--- a/packages/playground/examples/editor/turn_restriction_editor.ts
+++ b/packages/playground/examples/editor/turn_restriction_editor.ts
@@ -92,7 +92,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let navlinkLayer = new TileLayer({
diff --git a/packages/playground/examples/layer/3d_buildings.ts b/packages/playground/examples/layer/3d_buildings.ts
index 76b42c741..4c5122891 100644
--- a/packages/playground/examples/layer/3d_buildings.ts
+++ b/packages/playground/examples/layer/3d_buildings.ts
@@ -10,7 +10,7 @@ const display = new Map(document.getElementById('map'), {
         new MVTLayer({
             name: 'mvt-world-layer',
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             },
             style: {
                 backgroundColor: '#555555',
diff --git a/packages/playground/examples/layer/3d_lines.ts b/packages/playground/examples/layer/3d_lines.ts
index 091921d5a..a43780fc6 100644
--- a/packages/playground/examples/layer/3d_lines.ts
+++ b/packages/playground/examples/layer/3d_lines.ts
@@ -5,7 +5,7 @@ import {Map} from '@here/xyz-maps-display';
 var baseMapLayer = new MVTLayer({
     name: 'mvt-world-layer',
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     },
     style: {
         backgroundColor: '#ECE0CA',
diff --git a/packages/playground/examples/layer/3d_points.ts b/packages/playground/examples/layer/3d_points.ts
index 55e2ef780..2c13ef9f4 100644
--- a/packages/playground/examples/layer/3d_points.ts
+++ b/packages/playground/examples/layer/3d_points.ts
@@ -22,7 +22,7 @@ const display = new Map(document.getElementById('map'), {
         min: 1,
         max: 20,
         remote: {
-            url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+            url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
         }
     })]
 });
diff --git a/packages/playground/examples/layer/Heatmap.ts b/packages/playground/examples/layer/Heatmap.ts
index a95a04284..4bf995728 100644
--- a/packages/playground/examples/layer/Heatmap.ts
+++ b/packages/playground/examples/layer/Heatmap.ts
@@ -13,7 +13,7 @@ const display = new Map(document.getElementById('map'), {
         new MVTLayer({
             name: 'mvt-world-layer',
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             },
             min: 1,
             max: 20,
diff --git a/packages/playground/examples/layer/MVTLayer.ts b/packages/playground/examples/layer/MVTLayer.ts
index ad47e1274..dc8c320ea 100644
--- a/packages/playground/examples/layer/MVTLayer.ts
+++ b/packages/playground/examples/layer/MVTLayer.ts
@@ -12,7 +12,7 @@ const display = new Map(document.getElementById('map'), {
         new MVTLayer({
             name: 'mvt-world-layer',
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
                 // optional settings:
                 // max  : 16,     // max level for loading data
                 // min  : 1       // min level for loading data
diff --git a/packages/playground/examples/layer/add_remove_building_feature.ts b/packages/playground/examples/layer/add_remove_building_feature.ts
index 7a1fa8a1e..68141ba6c 100644
--- a/packages/playground/examples/layer/add_remove_building_feature.ts
+++ b/packages/playground/examples/layer/add_remove_building_feature.ts
@@ -6,7 +6,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 let buildingLayer = new TileLayer({
diff --git a/packages/playground/examples/layer/add_remove_line.ts b/packages/playground/examples/layer/add_remove_line.ts
index b4e3b2801..28c3ec916 100644
--- a/packages/playground/examples/layer/add_remove_line.ts
+++ b/packages/playground/examples/layer/add_remove_line.ts
@@ -6,7 +6,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 var myLayer = new TileLayer({
diff --git a/packages/playground/examples/layer/add_remove_point.ts b/packages/playground/examples/layer/add_remove_point.ts
index 798372b93..aa9d79133 100644
--- a/packages/playground/examples/layer/add_remove_point.ts
+++ b/packages/playground/examples/layer/add_remove_point.ts
@@ -6,7 +6,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 var pointLayer = new TileLayer({
diff --git a/packages/playground/examples/layer/collision_detection.ts b/packages/playground/examples/layer/collision_detection.ts
index 30cdbc914..ff75ba2a7 100644
--- a/packages/playground/examples/layer/collision_detection.ts
+++ b/packages/playground/examples/layer/collision_detection.ts
@@ -11,7 +11,7 @@ const display = new Map(document.getElementById('map'), {
     layers: [
         new MVTLayer({
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             },
             style: {
                 backgroundColor: '#555555',
diff --git a/packages/playground/examples/layer/custom_style.ts b/packages/playground/examples/layer/custom_style.ts
index 1ff0d6673..4ace36656 100644
--- a/packages/playground/examples/layer/custom_style.ts
+++ b/packages/playground/examples/layer/custom_style.ts
@@ -8,7 +8,7 @@ var layers = [
         min: 1,
         max: 20,
         remote: {
-            url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+            url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
         }
     })
 ];
diff --git a/packages/playground/examples/layer/label_collision_detection.ts b/packages/playground/examples/layer/label_collision_detection.ts
index 8fd34591e..46b840c5d 100644
--- a/packages/playground/examples/layer/label_collision_detection.ts
+++ b/packages/playground/examples/layer/label_collision_detection.ts
@@ -19,7 +19,7 @@ const display = new Map(document.getElementById('map'), {
         new MVTLayer({
             name: 'mvt-world-layer',
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             },
             style: {
                 backgroundColor: '#ECE0CA',
diff --git a/packages/playground/examples/layer/offset_line.ts b/packages/playground/examples/layer/offset_line.ts
index 42256f0c8..087348590 100644
--- a/packages/playground/examples/layer/offset_line.ts
+++ b/packages/playground/examples/layer/offset_line.ts
@@ -19,7 +19,7 @@ var display = new Map(document.getElementById('map'), {
             min: 1,
             max: 20,
             remote: {
-                url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+                url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
             }
         }),
         myLayer
diff --git a/packages/playground/examples/layer/preprocessor.ts b/packages/playground/examples/layer/preprocessor.ts
index c22cf8cf1..f2dfe63c8 100644
--- a/packages/playground/examples/layer/preprocessor.ts
+++ b/packages/playground/examples/layer/preprocessor.ts
@@ -14,7 +14,7 @@ const display = new Map(document.getElementById('map'), {
         min: 1,
         max: 20,
         remote: {
-            url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+            url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
         }
     })]
 });
diff --git a/packages/playground/examples/layer/remote_search_boundingbox.ts b/packages/playground/examples/layer/remote_search_boundingbox.ts
index 62dfc9bf5..c556e33d4 100644
--- a/packages/playground/examples/layer/remote_search_boundingbox.ts
+++ b/packages/playground/examples/layer/remote_search_boundingbox.ts
@@ -6,7 +6,7 @@ const backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 
diff --git a/packages/playground/examples/layer/search_boundingbox.ts b/packages/playground/examples/layer/search_boundingbox.ts
index 62a84f608..05c8918c6 100644
--- a/packages/playground/examples/layer/search_boundingbox.ts
+++ b/packages/playground/examples/layer/search_boundingbox.ts
@@ -6,7 +6,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 var placeLayer = new TileLayer({
diff --git a/packages/playground/examples/layer/search_id.ts b/packages/playground/examples/layer/search_id.ts
index a65868975..96b0f97f2 100644
--- a/packages/playground/examples/layer/search_id.ts
+++ b/packages/playground/examples/layer/search_id.ts
@@ -6,7 +6,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 var placeLayer = new TileLayer({
diff --git a/packages/playground/examples/layer/set_layer_color.ts b/packages/playground/examples/layer/set_layer_color.ts
index 9881bcb42..a8e7bce91 100644
--- a/packages/playground/examples/layer/set_layer_color.ts
+++ b/packages/playground/examples/layer/set_layer_color.ts
@@ -6,7 +6,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 
diff --git a/packages/playground/examples/layer/settag_space_provider.ts b/packages/playground/examples/layer/settag_space_provider.ts
index 69008dabf..198866b0a 100644
--- a/packages/playground/examples/layer/settag_space_provider.ts
+++ b/packages/playground/examples/layer/settag_space_provider.ts
@@ -7,7 +7,7 @@ var layers = [
         min: 1,
         max: 20,
         remote: {
-            url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+            url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
         }
     })
 ];
diff --git a/packages/playground/examples/layer/style_drawingorder.ts b/packages/playground/examples/layer/style_drawingorder.ts
index adbcb2853..e3340098d 100644
--- a/packages/playground/examples/layer/style_drawingorder.ts
+++ b/packages/playground/examples/layer/style_drawingorder.ts
@@ -6,7 +6,7 @@ const backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 const myLayer2 = new TileLayer({
diff --git a/packages/playground/examples/layer/style_navlink.ts b/packages/playground/examples/layer/style_navlink.ts
index e1f353357..b9725f4ae 100644
--- a/packages/playground/examples/layer/style_navlink.ts
+++ b/packages/playground/examples/layer/style_navlink.ts
@@ -6,7 +6,7 @@ let backgroundLayer = new MVTLayer({
     min: 1,
     max: 20,
     remote: {
-        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+        url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
     }
 });
 var myLayer = new TileLayer({
diff --git a/packages/playground/examples/layer/style_zoomrange.ts b/packages/playground/examples/layer/style_zoomrange.ts
index 0e7cbd620..2f0fd39af 100644
--- a/packages/playground/examples/layer/style_zoomrange.ts
+++ b/packages/playground/examples/layer/style_zoomrange.ts
@@ -13,7 +13,7 @@ const display = new Map(document.getElementById('map'), {
         min: 1,
         max: 20,
         remote: {
-            url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
+            url: 'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=' + YOUR_API_KEY
         }
     })]
 });