DEV - Update the Home icon with a Pin icon

[traycn]

Overview

We need to change the address search icon to use a generic "pin" icon, rather than a "house" icon, so that users will have an easier time understanding that their searched address is being displayed.

More Info

We had previously used a house icon when users search an address, but this was confusing because there's nothing to suggest that the searched address was the user's home. We do not ask the user to specify their address, we encourage any address to be searched, so that users may know what Neighborhood Council that particular address resides in.

Action Items

• Download pin icon as SVG from Figma spec
  • note down the dimensions of this SVG
  • ensure you are providing an informative name, e.g. address-icon-15.svg, where 15px is the dimensions of the SVG
  • upload the SVG to the /assets folder
• modify AddressLayer.js to import the specified SVG, rather than homeSVG
  • in AddressLayer::addImages(), assign img.src to the correct SVG
  • Set the fill of the SVG to: #0F181F
  • Update the Pin on-hover fill styles to be: #1D6996
• Upload screenshots of implementation via your localhost instance of site
  • Address Icon w/out hover
  • Address Icon w/ hover

Resources/Instructions

R1. Internal Documents

• Related Design ticket: Redesign address search house icon #1816 (comment)
• Figma Section Name: Redesign Search House Icon Hand-Off

R2. Developer Resources

Useful Components

• Address Layer
  • path: components > Map > layers > AddressLayer.js
  • Mapbox.Map::addImage:
    • adds an image to the Map style as an icon
    • see Mapbox Documentation, Map Styles below

Click to see excerpts from AddressLayer.cs

---

Import SVG, L5

import homeSVG from '@assets/home-15.svg'; // NOTE: this will need to be changed to the correct SVG, 
                                                                           // e.g. '@assets/address-icon-15.svg`

Mapbox.Map::addImage L70

  addImages = () => {
    let img = new Image(30, 30);
    img.onload = () => this.map.addImage('home-icon', img);
    img.src = homeSVG;
  }

Mapbox.Map::addLayer L83

• see L88 for specifying the point layer's style to utilize home-icon for the icon image

addLayers = () => {
    this.map.addLayer({
      id: 'point',
      type: 'symbol',
      source: 'point',
      layout: {
        'icon-image': 'home-icon',
      },
    })
  };

---

Mapbox Documentation

• Mapbox Map
  • Example: Add an icon to the map
  • Example: Add a new layer below labels
• Map styles
• Mapbox Layers

R3. Deliverable References

Before Screenshot (e.g. "House" icon)

Screenshot of Figma specification

Screenshot of localhost

Address Icon w/out Hover

[TODO] upload

Address Icon w/ Hover

[TODO] upload

[traycn]

Hey @Joy-Truex ! Could you provide the hex color values for the Pin when it is in the 2 states.

For understanding the states, refer to Designer Resources section in the ticket details. Thanks!