fix pixel ratio for all examples

Signed-off-by: Andrii Heonia <[email protected]>

Author: Andrii Heonia

capture-map-area/demo.js

@@ -38,7 +38,8 @@ var map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
   // initial center and zoom level of the map
   zoom: 16,
   // Champs-Elysees
-  center: {lat: 48.869145, lng: 2.314298}
+  center: {lat: 48.869145, lng: 2.314298},
+  pixelRatio: window.devicePixelRatio || 1
 });
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());

change-style-at-runtime/demo.js

@@ -1,4 +1,4 @@
-    
+
 /**
  * The function add the "change" event listener to the map's style
  * and modifies colors of the map features within that listener.
@@ -22,7 +22,7 @@ function changeFeatureStyle(map){
       // see the Developer's guide
       parkConfig.layers.landuse.park.draw.polygons.color = '#2ba815'
       parkConfig.layers.landuse.builtup.draw.polygons.color = '#676d67'
-    
+
       // merge the configuration back to the base layer configuration
       parkStyle.mergeConfig(parkConfig);
     }
@@ -41,18 +41,14 @@ function changeFeatureStyle(map){
 var platform = new H.service.Platform({
   apikey: window.apikey
 });
-var pixelRatio = window.devicePixelRatio || 1;
-var defaultLayers = platform.createDefaultLayers({
-  tileSize: pixelRatio === 1 ? 256 : 512,
-  ppi: pixelRatio === 1 ? undefined : 320
-});
+var defaultLayers = platform.createDefaultLayers();
 
 //Step 2: initialize a map
 var map = new H.Map(document.getElementById('map'),
   defaultLayers.vector.normal.map, {
   center: {lat: 52.51477270923461, lng: 13.39846691425174},
   zoom: 13,
-  pixelRatio: pixelRatio
+  pixelRatio: window.devicePixelRatio || 1
 });
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());

circle-on-the-map/demo.js

@@ -1,4 +1,4 @@
-    
+
 /**
  * Adds a circle over New Delhi with a radius of 1000 metres onto the map
  *
@@ -33,18 +33,14 @@ function addCircleToMap(map){
 var platform = new H.service.Platform({
   apikey: window.apikey
 });
-var pixelRatio = window.devicePixelRatio || 1;
-var defaultLayers = platform.createDefaultLayers({
-  tileSize: pixelRatio === 1 ? 256 : 512,
-  ppi: pixelRatio === 1 ? undefined : 320
-});
+var defaultLayers = platform.createDefaultLayers();
 
 //Step 2: initialize a map - this map is centered over New Delhi
 var map = new H.Map(document.getElementById('map'),
   defaultLayers.vector.normal.map, {
   center: {lat:28.6071, lng:77.2127},
   zoom: 13,
-  pixelRatio: pixelRatio
+  pixelRatio: window.devicePixelRatio || 1
 });
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());

context_menu/demo.js

@@ -95,7 +95,8 @@ var defaultLayers = platform.createDefaultLayers();
 // Step 2: initialize a map
 var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
   center: {lat: 52.55006203880433, lng: 13.27548854220585},
-  zoom: 9
+  zoom: 9,
+  pixelRatio: window.devicePixelRatio || 1
 });
 
 // Step 3: make the map interactive

custom-cluster-theme/demo.js

@@ -146,17 +146,13 @@ var platform = new H.service.Platform({
   apikey: window.apikey,
   useHTTPS: true
 });
-var pixelRatio = window.devicePixelRatio || 1;
-var defaultLayers = platform.createDefaultLayers({
-  tileSize: pixelRatio === 1 ? 256 : 512,
-  ppi: pixelRatio === 1 ? undefined : 320
-});
+var defaultLayers = platform.createDefaultLayers();
 
 // Step 2: initialize a map
 var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
   center: new H.geo.Point(50.426467222414374, 6.3054632497803595),
   zoom: 6,
-  pixelRatio: pixelRatio
+  pixelRatio: window.devicePixelRatio || 1
 });
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());

custom-tile-overlay/demo.js

@@ -63,7 +63,8 @@ var defaultLayers = platform.createDefaultLayers();
 // Step 2: initialize a map
 var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
   center: new H.geo.Point(52.515, 13.405),
-  zoom: 14
+  zoom: 14,
+  pixelRatio: window.devicePixelRatio || 1
 });
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());

custom-zooming-into-bounds/demo.js

@@ -62,18 +62,14 @@ function setUpCustomZooming(map) {
 var platform = new H.service.Platform({
   apikey: window.apikey
 });
-var pixelRatio = window.devicePixelRatio || 1;
-var defaultLayers = platform.createDefaultLayers({
-  tileSize: pixelRatio === 1 ? 256 : 512,
-  ppi: pixelRatio === 1 ? undefined : 320
-});
+var defaultLayers = platform.createDefaultLayers();
 
 // Step 2: initialize a map
 var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
   // initial center and zoom level of the map
   center: new H.geo.Point(41.4822, -81.6697),
   zoom: 4,
-  pixelRatio: pixelRatio
+  pixelRatio: window.devicePixelRatio || 1
 });
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());

display-kml-on-map/demo.js

@@ -40,7 +40,8 @@ var defaultLayers = platform.createDefaultLayers();
 // Step 2: initialize a map
 var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
   zoom: 2.5,
-  center: {lat: 48.30432303555956, lng: -104.94466241321628}
+  center: {lat: 48.30432303555956, lng: -104.94466241321628},
+  pixelRatio: window.devicePixelRatio || 1
 });
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());

draggable-marker/demo.js

@@ -1,4 +1,4 @@
-    
+
 /**
  * Adds a  draggable marker to the map..
  *
@@ -56,18 +56,14 @@ function addDraggableMarker(map, behavior){
 var platform = new H.service.Platform({
   apikey: window.apikey
 });
-var pixelRatio = window.devicePixelRatio || 1;
-var defaultLayers = platform.createDefaultLayers({
-  tileSize: pixelRatio === 1 ? 256 : 512,
-  ppi: pixelRatio === 1 ? undefined : 320
-});
+var defaultLayers = platform.createDefaultLayers();
 
 //Step 2: initialize a map - this map is centered over Boston
 var map = new H.Map(document.getElementById('map'),
   defaultLayers.vector.normal.map,{
   center: {lat:42.35805, lng:-71.0636},
   zoom: 12,
-  pixelRatio: pixelRatio
+  pixelRatio: window.devicePixelRatio || 1
 });
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());

example-template/demo.js

@@ -40,7 +40,8 @@ var map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
   // initial center and zoom level of the map
   zoom: 16,
   // Champs-Elysees
-  center: {lat: 48.869145, lng: 2.314298}
+  center: {lat: 48.869145, lng: 2.314298},
+  pixelRatio: window.devicePixelRatio || 1
 });
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());