aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-03-18 23:08:18 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-03-18 23:08:18 -0700
commit09e0ddc2e567cd38fb1196d3f6e73f48dadc435a (patch)
tree779ef392335323f5dc2542ec5be1f531d3f6b3ce /modern
parent3d05383151ad7ce44c6297fc46bf5bf8457db7c6 (diff)
downloadetbsa-traccar-web-09e0ddc2e567cd38fb1196d3f6e73f48dadc435a.tar.gz
etbsa-traccar-web-09e0ddc2e567cd38fb1196d3f6e73f48dadc435a.tar.bz2
etbsa-traccar-web-09e0ddc2e567cd38fb1196d3f6e73f48dadc435a.zip
Remove leaflet dependency
Diffstat (limited to 'modern')
-rw-r--r--modern/README.md2
-rw-r--r--modern/package.json2
-rw-r--r--modern/public/index.html2
-rw-r--r--modern/src/leaflet/DivIcon.js99
4 files changed, 1 insertions, 104 deletions
diff --git a/modern/README.md b/modern/README.md
index d5f9f7c..6b8edbb 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 79fa97d..d5eaa13 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 ac6d8d5..bfc5605 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 6673c56..0000000
--- 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)