Merge remote-tracking branch 'origin/DivMarker' into supercluster

# Conflicts:
#	CHANGELOG.md
#	package.json
#	src/lib/index.js

CHANGELOG.md

@@ -21,6 +21,7 @@ All notable changes to this project will be documented in this file.
 ### Changed
 
 - Fix of bug in Polygon prop validation.
+- Added DivMarker component.
 
 ## [0.0.17] - 2020-19-05
 

src/lib/LeafletDivMarker.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { DivIcon, marker } from 'leaflet';
+import { MapLayer, withLeaflet, LeafletProvider } from 'react-leaflet';
+import PropTypes from 'prop-types';
+
+export class LeafletDivMarker extends MapLayer {
+  // static propTypes = {
+  //   opacity: PropTypes.number,
+  //   zIndexOffset: PropTypes.number,
+  // }
+
+  constructor(props){
+    super(props)
+    super.componentDidMount();
+  }
+
+  // See https://github.com/PaulLeCam/react-leaflet/issues/275
+  createLeafletElement(newProps) {
+    const { map: _map, layerContainer: _lc, position, ...props } = newProps;
+    this.icon = new DivIcon(newProps.iconOptions);
+    const m = marker(position, { icon: this.icon, ...props });
+    this.contextValue = { ...props.leaflet, popupContainer: m }
+    return m
+  }
+
+  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();
+      }
+    }
+  }
+
+  componentDidUpdate(fromProps) {
+    this.updateLeafletElement(fromProps, this.props);
+  }
+
+  render() {
+    const container = this.leafletElement._icon;
+    if (container) {
+      return ReactDOM.createPortal(<LeafletProvider value={this.contextValue}>
+        {this.props.children}
+      </LeafletProvider>, container)
+    }
+    else {
+      return null
+    }
+  }
+}
+
+export default withLeaflet(LeafletDivMarker)

src/lib/components/DivMarker.react.js

@@ -0,0 +1,149 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+import LeafletDivMarker from '../LeafletDivMarker';
+
+/**
+ * Marker is a wrapper of Marker in react-leaflet.
+ * It takes similar properties to its react-leaflet counterpart.
+ */
+export default class DivMarker extends Component {
+    render() {
+        const nProps = Object.assign({}, this.props);
+        // Bind events.
+        nProps.onclick = (e) => {
+            nProps.setProps({ n_clicks: nProps.n_clicks + 1 });
+        }
+        // Render the leaflet component.
+        return <LeafletDivMarker {...nProps}/>
+    }
+}
+
+DivMarker.defaultProps = {
+    n_clicks: 0
+}
+
+DivMarker.propTypes = {
+    /**
+     * A geographical point (lat, lon)
+     */
+    position: PropTypes.arrayOf(PropTypes.number).isRequired,
+
+    /**
+     * Options passed to DivIcon constructor.
+     */
+    iconOptions: PropTypes.shape({
+        iconSize: PropTypes.arrayOf(PropTypes.number),
+        iconAnchor: PropTypes.arrayOf(PropTypes.number),
+        popupAnchor: PropTypes.arrayOf(PropTypes.number),
+        className: PropTypes.arrayOf(PropTypes.number),
+        html: PropTypes.string
+    }),
+
+    /**
+     * Whether the marker is draggable with mouse/touch or not.
+     */
+    draggable: PropTypes.bool,
+
+    /**
+     * The opacity of the marker.
+     */
+    opacity: PropTypes.number,
+
+    /**
+     * By default, marker images zIndex is set automatically based
+     * on its latitude. Use this option if you want to put the
+     * marker on top of all others (or below), specifying a high
+     * value like 1000 (or high negative value, respectively).
+     */
+    zIndexOffset: PropTypes.number,
+
+    // Static parameters
+
+    /**
+     * Whether the marker can be tabbed to with a keyboard and clicked by
+     * pressing enter.
+     */
+    keyboard: PropTypes.bool,
+
+    /**
+     * Text for the browser tooltip that appear on marker hover (no tooltip
+     * by default).
+     */
+    title: PropTypes.string,
+
+    /**
+     * Text for the alt attribute of the icon image (useful for accessibility).
+     */
+    alt: PropTypes.string,
+
+    /**
+     * If true, the marker will get on top of others when you hover the mouse
+     * over it.
+     */
+    riseOnHover: PropTypes.bool,
+
+    /**
+     * The z-index offset used for the riseOnHover feature.
+     */
+    riseOffset: PropTypes.number,
+
+    /**
+     * When true, a mouse event on this marker will trigger the same event
+     * on the map (unless L.DomEvent.stopPropagation is used).
+     */
+    bubblingMouseEvents: PropTypes.bool,
+
+    /**
+     * Whether to pan the map when dragging this marker near its edge or not.
+     */
+    autoPan: PropTypes.bool,
+
+    /**
+     * Distance (in pixels to the left/right and to the top/bottom) of the map
+     * edge to start panning the map.
+     */
+    autoPanPadding: PropTypes.object,
+
+    /**
+     * Number of pixels the map should pan by.
+     */
+    autoPanSpeed: PropTypes.number,
+
+    /**
+     * If false, the layer will not emit mouse events and will act as a part of
+     * the underlying map.
+     */
+    interactive: PropTypes.bool,
+
+    // Inherited from MapLayer
+
+    /**
+     * The ID used to identify this component in Dash callbacks
+     */
+    id: PropTypes.string,
+
+    /**
+     * The children of this component
+     */
+    children: PropTypes.node,
+
+    /**
+     * The leaflet pane of the component
+     */
+    pane: PropTypes.string,
+
+    /**
+     * The attribution string for the component
+     */
+    attribution: PropTypes.string,
+
+    // Events
+    setProps: PropTypes.func,
+
+    /**
+     * Dash callback property. Number of times the marker has been clicked
+     */
+    n_clicks: PropTypes.number,
+
+};

src/lib/components/Marker.react.js

@@ -46,9 +46,7 @@ Marker.propTypes = {
     position: PropTypes.arrayOf(PropTypes.number).isRequired,
 
     /**
-     * Icon object to use for rendering the marker. See Icon
-     * documentation for details on how to customize the marker
-     * icon. If not specified, an instance of L.Icon.Default is used.
+     * Options passed to Icon constructor.
      */
     icon: PropTypes.object,
 

src/lib/index.js

@@ -2,20 +2,17 @@
 import Circle from './components/Circle.react';
 import CircleMarker from './components/CircleMarker.react';
 import Colorbar from './components/Colorbar.react';
-// import DivOverlay from './components/DivOverlay.react';
 import GeoTIFFOverlay from './components/GeoTIFFOverlay.react';
-// import GridLayer from './components/GridLayer.react';
 import ImageOverlay from './components/ImageOverlay.react';
 import LayerGroup from './components/LayerGroup.react';
 import GeoJSON from './components/GeoJSON.react';
 import MarkerClusterGroup from './components/MarkerClusterGroup.react';
 import Map from './components/Map.react';
 import LocateControl from './components/LocateControl.react';
 import Pane from './components/Pane.react';
-// import MapLayer from './components/MapLayer.react';
+import DivMarker from './components/DivMarker.react';
 import PolylineDecorator from './components/PolylineDecorator.react';
 import Marker from './components/Marker.react';
-// import Path from './components/Path.react';
 import Polyline from './components/Polyline.react';
 import Polygon from './components/Polygon.react';
 import Popup from './components/Popup.react';
@@ -52,5 +49,6 @@ export {
     ScaleControl,
     PolylineDecorator,
     Pane,
-    SuperCluster
+    SuperCluster,
+    DivMarker
 };