react map gl custom markers don 27t stay at exact position on zoom

Solutions on MaxInterview for react map gl custom markers don 27t stay at exact position on zoom by the best coders in the world

showing results for - "react map gl custom markers don 27t stay at exact position on zoom"
Vicente
06 Nov 2017
1import React, {PureComponent} from 'react';
2
3const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
4  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
5  C20.1,15.8,20.2,15.8,20.2,15.7z`;
6
7const pinStyle = {
8  cursor: 'pointer',
9  fill: '#d00',
10  stroke: 'none'
11};
12
13export default class CityPin extends PureComponent {
14
15  render() {
16    const {size = 20, onClick} = this.props;
17
18    return (
19      <svg 
20        height={size}
21        viewBox="0 0 24 24"
22        style={{...pinStyle, transform: `translate(${-size / 2}px,${-size}px)`}}
23        onClick={onClick}
24      >
25        <path d={ICON}/>
26      </svg>
27    );
28  }
29}