diff options
| author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-03-18 23:08:18 -0700 |
|---|---|---|
| committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-03-18 23:08:18 -0700 |
| commit | 09e0ddc2e567cd38fb1196d3f6e73f48dadc435a (patch) | |
| tree | 779ef392335323f5dc2542ec5be1f531d3f6b3ce | |
| parent | 3d05383151ad7ce44c6297fc46bf5bf8457db7c6 (diff) | |
| download | trackermap-web-09e0ddc2e567cd38fb1196d3f6e73f48dadc435a.tar.gz trackermap-web-09e0ddc2e567cd38fb1196d3f6e73f48dadc435a.tar.bz2 trackermap-web-09e0ddc2e567cd38fb1196d3f6e73f48dadc435a.zip | |
Remove leaflet dependency
| -rw-r--r-- | modern/README.md | 2 | ||||
| -rw-r--r-- | modern/package.json | 2 | ||||
| -rw-r--r-- | modern/public/index.html | 2 | ||||
| -rw-r--r-- | modern/src/leaflet/DivIcon.js | 99 |
4 files changed, 1 insertions, 104 deletions
diff --git a/modern/README.md b/modern/README.md index d5f9f7c2..6b8edbb3 100644 --- a/modern/README.md +++ b/modern/README.md @@ -1,6 +1,6 @@ This is a new version of the Traccar web app. It is still in a very early stage of development. -It uses [React](https://reactjs.org/), [Material UI](https://material-ui.com/) and [React-Leaflet](https://react-leaflet.js.org/), which is a wrapper around [Leaflet](https://leafletjs.com/). Feedback and contributions are welcome. +It uses [React](https://reactjs.org/), [Material UI](https://material-ui.com/) and [OpenLayers](https://openlayers.org/). Feedback and contributions are welcome. To run the project in development mode: diff --git a/modern/package.json b/modern/package.json index 79fa97d8..d5eaa131 100644 --- a/modern/package.json +++ b/modern/package.json @@ -5,13 +5,11 @@ "dependencies": { "@material-ui/core": "^4.9.7", "@material-ui/icons": "^4.9.1", - "leaflet": "^1.6.0", "ol": "^6.2.1", "ol-mapbox-style": "^6.0.1", "react": "^16.13.0", "react-container-dimensions": "^1.4.1", "react-dom": "^16.13.0", - "react-leaflet": "^2.6.3", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", "react-scripts": "^3.4.0", diff --git a/modern/public/index.html b/modern/public/index.html index ac6d8d5e..bfc5605e 100644 --- a/modern/public/index.html +++ b/modern/public/index.html @@ -8,8 +8,6 @@ <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"> <title>Traccar</title> </head> <body style="margin: 0; padding: 0;"> diff --git a/modern/src/leaflet/DivIcon.js b/modern/src/leaflet/DivIcon.js deleted file mode 100644 index 6673c56f..00000000 --- a/modern/src/leaflet/DivIcon.js +++ /dev/null @@ -1,99 +0,0 @@ -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) |