diff options
Diffstat (limited to 'modern/src')
-rw-r--r-- | modern/src/MainMap.js | 12 | ||||
-rw-r--r-- | modern/src/leaflet/DivIcon.js | 99 |
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) |