Div icon as marker

2 files changed, 106 insertions, 5 deletions

diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 7655aee..fab1777 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
 import { connect } from 'react-redux'
+import DivIcon from './leaflet/DivIcon';
 
 const mapStateToProps = state => ({
   positions: state.positions
@@ -17,11 +18,12 @@ class MainMap extends Component {
     const position = [this.state.lat, this.state.lng]
 
     const markers = this.props.positions.map(position =>
-      <Marker key={position.id.toString()} position={{ lat: position.latitude, lng: position.longitude }}>
-        <Popup>
-          A pretty CSS3 popup. <br /> Easily customizable.
-        </Popup>
-      </Marker>
+      <DivIcon position={{ lat: position.latitude, lng: position.longitude }} className="" iconSize={[38, 95]}>
+        <svg className="user-location" viewBox="0 0 120 120" version="1.1"
+          xmlns="http://www.w3.org/2000/svg">
+          <text x="20" y="60" style={{fontSize: '48px'}}>TEST</text>
+        </svg>
+      </DivIcon>
     );
 
     return (
diff --git a/modern/src/leaflet/DivIcon.js b/modern/src/leaflet/DivIcon.js
new file mode 100644
index 0000000..6673c56
--- /dev/null
+++ b/modern/src/leaflet/DivIcon.js
@@ -0,0 +1,99 @@
+import React, {Component} from 'react';
+import {render} from 'react-dom';
+import {DivIcon, marker} from 'leaflet';
+import {MapLayer, withLeaflet} from 'react-leaflet';
+import PropTypes from 'prop-types';
+
+function createContextProvider(context) {
+  class ContextProvider extends Component {
+    getChildContext() {
+      return context;
+    }
+
+    render() {
+      return this.props.children;
+    }
+  }
+
+  ContextProvider.childContextTypes = {};
+  Object.keys(context).forEach(key => {
+    ContextProvider.childContextTypes[key] = PropTypes.any;
+  });
+  return ContextProvider;
+}
+
+export class Divicon extends MapLayer {
+  static propTypes = {
+    opacity: PropTypes.number,
+    zIndexOffset: PropTypes.number,
+  }
+
+  static childContextTypes = {
+    popupContainer: PropTypes.object,
+  }
+
+  getChildContext() {
+    return {
+      popupContainer: this.leafletElement,
+    }
+  }
+
+  // See https://github.com/PaulLeCam/react-leaflet/issues/275
+  createLeafletElement(newProps) {
+    const {map: _map, layerContainer: _lc, position, ...props} = newProps;
+    this.icon = new DivIcon(props);
+    return marker(position, {icon: this.icon, ...props});
+  }
+
+  updateLeafletElement(fromProps, toProps) {
+    if (toProps.position !== fromProps.position) {
+      this.leafletElement.setLatLng(toProps.position);
+    }
+    if (toProps.zIndexOffset !== fromProps.zIndexOffset) {
+      this.leafletElement.setZIndexOffset(toProps.zIndexOffset);
+    }
+    if (toProps.opacity !== fromProps.opacity) {
+      this.leafletElement.setOpacity(toProps.opacity);
+    }
+    if (toProps.draggable !== fromProps.draggable) {
+      if (toProps.draggable) {
+        this.leafletElement.dragging.enable();
+      }
+      else {
+        this.leafletElement.dragging.disable();
+      }
+    }
+  }
+
+  componentDidMount() {
+    super.componentDidMount();
+    this.renderComponent();
+  }
+
+  componentDidUpdate(fromProps) {
+    this.renderComponent();
+    this.updateLeafletElement(fromProps, this.props);
+  }
+
+  renderComponent = () => {
+    const ContextProvider = createContextProvider({...this.context, ...this.getChildContext()});
+    const container = this.leafletElement._icon;
+    const component = (
+      <ContextProvider>
+        {this.props.children}
+      </ContextProvider>
+    );
+    if (container) {
+      render(
+        component,
+        container
+      );
+    }
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default withLeaflet(Divicon)