Merge pull request #1959 from DorianDeptuch/update-the-home-icon-with-a-pin-icon-1905

Update the home icon with a pin icon 1905

Author: rayneng

assets/address-icon-48.svg

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import homeSVG from '@assets/home-15.svg';
+import addressSVG from '@assets/address-icon-48.svg';
 import {
   emptyGeo,
   makeGeoCircle,
@@ -69,8 +69,8 @@ class AddressLayer extends React.Component {
 
   addImages = () => {
     let img = new Image(30, 30);
-    img.onload = () => this.map.addImage('home-icon', img);
-    img.src = homeSVG;
+    img.onload = () => this.map.addImage('address-icon', img);
+    img.src = addressSVG;
   }
 
   addSources = () => {
@@ -81,14 +81,33 @@ class AddressLayer extends React.Component {
   };
 
   addLayers = () => {
-    this.map.addLayer({
-      id: 'point',
-      type: 'symbol',
-      source: 'point',
-      layout: {
-        'icon-image': 'home-icon',
-      },
-    })
+    // Default layer
+    if (!this.map.getLayer('point')) {
+      this.map.addLayer({
+        id: 'point',
+        type: 'symbol',
+        source: 'point',
+        layout: {
+          'icon-image': 'address-icon',
+          'icon-size': 1
+        }
+      });
+    }
+
+    // Hover layer
+    if (!this.map.getLayer('point-hover')) {
+      this.map.addLayer({
+        id: 'point-hover',
+        type: 'circle',
+        source: 'point',
+        paint: {
+          'circle-radius': 4,
+          'circle-color': '#1D6996',
+          'circle-opacity': 0,
+          'circle-translate': [0, -3.5]
+        }
+      });
+    }
   };
 
   addListeners = () => {
@@ -128,13 +147,15 @@ class AddressLayer extends React.Component {
     //   this.map.once('touchend', onUp);
     // });
 
-    // this.map.on('mouseenter', 'shed-fill', e => {
-    //   this.canvas.style.cursor = 'move';
-    // });
+    this.map.on('mouseenter', 'point', () => {
+      this.map.setPaintProperty('point-hover', 'circle-opacity', 1);
+      this.canvas.style.cursor = 'pointer';
+    });
 
-    // this.map.on('mouseleave', 'shed-fill', e => {
-    //   this.canvas.style.cursor = '';
-    // });
+    this.map.on('mouseleave', 'point', () => {
+      this.map.setPaintProperty('point-hover', 'circle-opacity', 0);
+      this.canvas.style.cursor = '';
+    });
   }
 
   // setVisibility = visible => {