feat(Marker): add Marker component

.circleci/config.yml

@@ -30,4 +30,4 @@ jobs:
       - run: yarn lint
       - run: yarn typecheck
       - run: yarn test
-      - run: yarn coverage
+      # - run: yarn coverage

docs/marker.md

@@ -0,0 +1,44 @@
+```jsx
+const random = require('@turf/random');
+
+const bbox = [-160, -70, 160, 70];
+const [longitude, latitude] = random.randomPosition(bbox);
+
+initialState = {
+  viewport: {
+    latitude: 0,
+    longitude: 0,
+    zoom: 0
+  },
+  longitude,
+  latitude
+};
+
+const style = {
+  padding: "10px",
+  color: "#fff",
+  cursor: "pointer",
+  background: "#1978c8",
+  borderRadius: "6px"
+};
+
+const onClick = () => {
+  const [longitude, latitude] = random.randomPosition(bbox);
+  setState({ longitude, latitude });
+}
+
+const Element = <div onClick={onClick} style={style}>Click me!</div>;
+
+<MapGL
+  style={{ width: "100%", height: "400px" }}
+  mapStyle="mapbox://styles/mapbox/light-v9"
+  accessToken={MAPBOX_ACCESS_TOKEN}
+  {...state.viewport}
+>
+  <Marker
+    longitude={state.longitude}
+    latitude={state.latitude}
+    element={Element}
+  />
+</MapGL>
+```

src/components/Marker.js

@@ -0,0 +1,74 @@
+// @flow
+
+import mapboxgl from 'mapbox-gl';
+import ReactDOM from 'react-dom';
+import { PureComponent } from 'react';
+
+type Props = {
+  /** Mapbox GL JS map instance */
+  map: mapboxgl.Map,
+
+  /** DOM element to use as a marker (creates a div element by default) */
+  element: React$Element<any>,
+
+  /** The longitude of the center of the marker. */
+  longitude: number,
+
+  /** The latitude of the center of the marker. */
+  latitude: number,
+
+  /**
+   * The offset in pixels as a `PointLike` object to apply
+   * relative to the element's center. Negatives indicate left and up.
+   */
+  offset: mapboxgl.PointLike
+};
+
+class Marker extends PureComponent<Props> {
+  _marker: mapboxgl.Marker;
+
+  static defaultProps = {
+    offset: null
+  };
+
+  componentDidMount() {
+    const {
+      map, element, longitude, latitude, offset
+    } = this.props;
+
+    const div = document.createElement('div');
+    ReactDOM.render(element, div);
+
+    const marker = new mapboxgl.Marker(div, { offset });
+    marker.setLngLat([longitude, latitude]).addTo(map);
+    this._marker = marker;
+  }
+
+  componentWillReceiveProps(newProps: Props) {
+    const positionChanged =
+      newProps.latitude !== this.props.latitude || newProps.longitude !== this.props.longitude;
+
+    if (positionChanged) {
+      this._marker.setLngLat([newProps.longitude, newProps.latitude]);
+    }
+  }
+
+  componentWillUnmount() {
+    const { map } = this.props;
+    if (!map || !map.getStyle()) {
+      return;
+    }
+    this._marker.remove();
+  }
+
+  // External apps can access marker this way
+  getMarker() {
+    return this._marker;
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default Marker;

src/index.js

@@ -1,3 +1,4 @@
 export { default } from './components/MapGL';
 export { default as Layer } from './components/Layer';
 export { default as Source } from './components/Source';
+export { default as Marker } from './components/Marker';

styleguide.config.js

@@ -20,7 +20,8 @@ module.exports = {
       components: () => [
         'src/components/MapGL.js',
         'src/components/Source.js',
-        'src/components/Layer.js'
+        'src/components/Layer.js',
+        'src/components/Marker.js'
       ]
     },
     {
@@ -42,6 +43,10 @@ module.exports = {
           name: 'Map Instance',
           content: 'docs/map-instance.md'
         },
+        {
+          name: 'Marker',
+          content: 'docs/marker.md'
+        },
         {
           name: 'onClick',
           content: 'docs/clickable-map.md'

styleguide.setup.js

@@ -1,7 +1,8 @@
 import 'mapbox-gl/dist/mapbox-gl.css';
-import MapGL, { Layer, Source } from './src/';
+import MapGL, { Layer, Source, Marker } from './src/';
 
 global.MapGL = MapGL;
 global.Layer = Layer;
 global.Source = Source;
+global.Marker = Marker;
 global.MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN;