start-map/src/lib/components/MapMarkers.js at c01a20eb4e8ca3cfd849bcbc267fd2f95be74258 · code-for-canada/start-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React from "react";
import { ICONS_REG } from "../constants";
import { Marker } from 'react-leaflet'
import L from 'leaflet'

const icons = {
  "Partnership Program": {
    icon: new L.Icon({
      iconUrl: ICONS_REG["Partnership Program"].icon,
      iconRetinaUrl: ICONS_REG["Partnership Program"].icon,
      iconAnchor: [12, 12],
      iconSize: [25, 25],
    })
  },
  "Outside the Box": {
    icon: new L.Icon({
      iconUrl: ICONS_REG["Outside the Box"].icon,
      iconRetinaUrl: ICONS_REG["Outside the Box"].icon,
      iconAnchor: [12, 12],
      iconSize: [25, 25],
    })
  },
  "StART Support": {
    icon: new L.Icon({
      iconUrl: ICONS_REG["StART Support"].icon,
      iconRetinaUrl: ICONS_REG["StART Support"].icon,
      iconAnchor: [12, 12],
      iconSize: [25, 25],
    })
  },
  "Other": {
    icon: new L.Icon({
      iconUrl: ICONS_REG["Other"].icon,
      iconRetinaUrl: ICONS_REG["Other"].icon,
      iconAnchor: [12, 12],
      iconSize: [25, 25],
    })
  }
};

const MapMarkers = ({ features, activeFeature, onFeatureMapClick }) => {
  const markers = features.map((feature, i) => {
    const program = icons[feature.properties.program] ? feature.properties.program : "Other"
    const isSelected = activeFeature && feature.properties.uid === activeFeature.properties.uid
    let icon;

    if (isSelected) {
      icon = new L.Icon({
        iconUrl: ICONS_REG[program].icon,
        iconRetinaUrl: ICONS_REG[program].icon,
        iconAnchor: [25, 25],
        iconSize: [50, 50],
        className: 'delay-in'
      })
    } else {
      icon = new L.Icon({
        iconUrl: ICONS_REG[program].icon,
        iconRetinaUrl: ICONS_REG[program].icon,
        iconAnchor: [12, 12],
        iconSize: [25, 25],
        className: 'delay-in'
      })
    }

    return(
      <Marker
        key={feature.properties.uid}
        position={[feature.geometry.coordinates[1], feature.geometry.coordinates[0]]}
        icon={icon}
        onClick={() => onFeatureMapClick(feature.id) }
        zIndexOffset={isSelected ? 9999 : 0}
      />
    )
  })

  return markers

}

export default MapMarkers