Improve map markers

2 files changed, 55 insertions, 46 deletions

diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 72f718e..f2ac1b7 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -58,8 +58,7 @@ const MainMap = () => {
         'type': 'geojson',
         'data': positions,
       });
-      mapManager.addLayer('device-background', 'positions', 'background', '{name}');
-      mapManager.addLayer('device-icon', 'positions', 'icon-marker');
+      mapManager.addLayer('device-icon', 'positions', 'icon-marker', '{name}');
 
       const bounds = mapManager.calculateBounds(positions.features);
       if (bounds) {
@@ -70,7 +69,6 @@ const MainMap = () => {
       }
 
       return () => {
-        mapManager.map.removeLayer('device-background');
         mapManager.map.removeLayer('device-icon');
         mapManager.map.removeSource('positions');
       };
diff --git a/modern/src/mapManager.js b/modern/src/mapManager.js
index a16fc5f..9c2915b 100644
--- a/modern/src/mapManager.js
+++ b/modern/src/mapManager.js
@@ -12,26 +12,34 @@ const registerListener = listener => {
   }
 };
 
-const loadImage = (key, url) => {
+const loadImage = (url) => {
   return new Promise(imageLoaded => {
     const image = new Image();
-    image.onload = () => {
-      const canvas = document.createElement('canvas');
-      canvas.width = image.width * window.devicePixelRatio;
-      canvas.height = image.height * window.devicePixelRatio;
-      canvas.style.width = `${image.width}px`;
-      canvas.style.height = `${image.height}px`;
-      const context = canvas.getContext('2d');
-      context.drawImage(image, 0, 0, canvas.width, canvas.height);
-      map.addImage(key, context.getImageData(0, 0, canvas.width, canvas.height), {
-        pixelRatio: window.devicePixelRatio
-      });
-      imageLoaded()
-    }
+    image.onload = () => imageLoaded(image);
     image.src = url;
   });
 };
 
+const loadIcon = (key, background, url) => {
+  return loadImage(url).then((image) => {
+    const canvas = document.createElement('canvas');
+    canvas.width = background.width * window.devicePixelRatio;
+    canvas.height = background.height * window.devicePixelRatio;
+    canvas.style.width = `${background.width}px`;
+    canvas.style.height = `${background.height}px`;
+    const context = canvas.getContext('2d');
+    context.drawImage(background, 0, 0, canvas.width, canvas.height);
+
+    const imageWidth = image.width * window.devicePixelRatio;
+    const imageHeight = image.height * window.devicePixelRatio;
+    context.drawImage(image, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
+
+    map.addImage(key, context.getImageData(0, 0, canvas.width, canvas.height), {
+      pixelRatio: window.devicePixelRatio
+    });
+  });
+};
+
 const addLayer = (id, source, icon, text) => {
   const layer = {
     'id': id,
@@ -46,6 +54,7 @@ const addLayer = (id, source, icon, text) => {
     layer.layout = {
       ...layer.layout,
       'text-field': text,
+      'text-allow-overlap': true,
       'text-anchor': 'bottom',
       'text-offset': [0, -2],
       'text-font': ['Roboto Regular'],
@@ -97,30 +106,30 @@ element.style.height = '100%';
 const map = new mapboxgl.Map({
   container: element,
   style: {
-  'version': 8,
-  'sources': {
+    'version': 8,
+    'sources': {
       'raster-tiles': {
-      'type': 'raster',
-      'tiles': [
-          'https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png',
-          'https://b.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png',
-          'https://c.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png',
-          'https://d.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png'
-      ],
-      'tileSize': 256,
-      'attribution': '© <a target="_top" rel="noopener" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a target="_top" rel="noopener" href="https://carto.com/attribution">CARTO</a>'
+        'type': 'raster',
+        'tiles': [
+            'https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png',
+            'https://b.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png',
+            'https://c.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png',
+            'https://d.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png'
+        ],
+        'tileSize': 256,
+        'attribution': '© <a target="_top" rel="noopener" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a target="_top" rel="noopener" href="https://carto.com/attribution">CARTO</a>'
       }
-  },
-  'glyphs': 'https://cdn.traccar.com/map/fonts/{fontstack}/{range}.pbf',
-  'layers': [
+    },
+    'glyphs': 'https://cdn.traccar.com/map/fonts/{fontstack}/{range}.pbf',
+    'layers': [
       {
-      'id': 'simple-tiles',
-      'type': 'raster',
-      'source': 'raster-tiles',
-      'minzoom': 0,
-      'maxzoom': 22
+        'id': 'simple-tiles',
+        'type': 'raster',
+        'source': 'raster-tiles',
+        'minzoom': 0,
+        'maxzoom': 22
       }
-  ]
+    ]
   },
   center: [0, 0],
   zoom: 1
@@ -129,15 +138,17 @@ const map = new mapboxgl.Map({
 map.addControl(new mapboxgl.NavigationControl());
 
 map.on('load', () => {
-  Promise.all([
-    loadImage('background', 'images/background.svg'),
-    loadImage('icon-marker', 'images/icon/marker.svg')
-  ]).then(() => {
-    ready = true;
-    if (registeredListener) {
-      registeredListener();
-      registeredListener = null;
-    }
+
+  loadImage('images/background.svg').then((background) => {
+    Promise.all([
+      loadIcon('icon-marker', background, 'images/icon/marker.svg')
+    ]).then(() => {
+      ready = true;
+      if (registeredListener) {
+        registeredListener();
+        registeredListener = null;
+      }
+    });
   });
 });