aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/README.md2
-rw-r--r--modern/package.json34
-rw-r--r--modern/public/styles.css2
-rw-r--r--modern/src/map/CurrentLocationMap.js4
-rw-r--r--modern/src/map/Map.js10
-rw-r--r--modern/src/map/PositionsMap.js6
-rw-r--r--modern/src/map/ReplayPathMap.js4
-rw-r--r--modern/src/map/switcher/switcher.css12
-rw-r--r--modern/src/map/switcher/switcher.js10
-rw-r--r--modern/src/reports/ReportFilter.js2
10 files changed, 42 insertions, 44 deletions
diff --git a/modern/README.md b/modern/README.md
index b5cb212c..866dfd37 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 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/). Feedback and contributions are welcome.
+It uses [React](https://reactjs.org/), [Material UI](https://material-ui.com/) and [MapLibre GL JS](https://maplibre.org/). Feedback and contributions are welcome.
To run the project in development mode:
diff --git a/modern/package.json b/modern/package.json
index 29c0e47f..6c74cbe5 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -3,30 +3,28 @@
"version": "0.1.0",
"private": true,
"dependencies": {
- "@craco/craco": "^5.6.4",
- "@mapbox/mapbox-gl-draw": "^1.2.0",
- "@material-ui/core": "^4.11.0",
- "@material-ui/data-grid": "^4.0.0-alpha.22",
- "@material-ui/icons": "^4.9.1",
- "@material-ui/lab": "^4.0.0-alpha.56",
- "@reduxjs/toolkit": "^1.5.1",
- "@turf/turf": "^5.1.6",
+ "@craco/craco": "^5.9.0",
+ "@mapbox/mapbox-gl-draw": "^1.3.0",
+ "@material-ui/core": "^4.11.4",
+ "@material-ui/data-grid": "^4.0.0-alpha.33",
+ "@material-ui/icons": "^4.11.2",
+ "@material-ui/lab": "^4.0.0-alpha.58",
+ "@reduxjs/toolkit": "^1.6.0",
+ "@turf/turf": "^6.4.0",
"canvas-tint-image": "^2.0.1",
- "mapbox-gl": "^1.12.0",
- "moment": "^2.28.0",
- "ol": "^6.4.3",
- "ol-mapbox-style": "^6.1.4",
- "react": "^16.13.1",
+ "maplibre-gl": "^1.15.0",
+ "moment": "^2.29.1",
+ "react": "^17.0.2",
"react-container-dimensions": "^1.4.1",
- "react-dom": "^16.13.1",
- "react-redux": "^7.2.1",
+ "react-dom": "^17.0.2",
+ "react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
- "react-scripts": "^3.4.3",
+ "react-scripts": "^3.4.4",
"react-virtualized-auto-sizer": "^1.0.5",
"react-window": "^1.8.6",
"recharts": "^2.0.9",
- "redux": "^4.0.5",
- "typeface-roboto": "0.0.75",
+ "redux": "^4.1.0",
+ "typeface-roboto": "1.1.13",
"wellknown": "^0.5.0"
},
"scripts": {
diff --git a/modern/public/styles.css b/modern/public/styles.css
index 60d12082..7e9de656 100644
--- a/modern/public/styles.css
+++ b/modern/public/styles.css
@@ -3,6 +3,6 @@ canvas {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
-.mapboxgl-popup-content {
+.maplibregl-popup-content {
padding: 10px !important;
}
diff --git a/modern/src/map/CurrentLocationMap.js b/modern/src/map/CurrentLocationMap.js
index 31e6e285..06aaad0f 100644
--- a/modern/src/map/CurrentLocationMap.js
+++ b/modern/src/map/CurrentLocationMap.js
@@ -1,10 +1,10 @@
-import mapboxgl from 'mapbox-gl';
+import maplibregl from 'maplibre-gl';
import { useEffect } from 'react';
import { map } from './Map';
const CurrentLocationMap = () => {
useEffect(() => {
- const control = new mapboxgl.GeolocateControl({
+ const control = new maplibregl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true,
timeout: 5000,
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index a973cf7d..46c59d2d 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -1,6 +1,6 @@
-import 'mapbox-gl/dist/mapbox-gl.css';
+import 'maplibre-gl/dist/maplibre-gl.css';
import './switcher/switcher.css';
-import mapboxgl from 'mapbox-gl';
+import maplibregl from 'maplibre-gl';
import { SwitcherControl } from './switcher/switcher';
import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
import { deviceCategories } from '../common/deviceCategories';
@@ -14,7 +14,7 @@ const element = document.createElement('div');
element.style.width = '100%';
element.style.height = '100%';
-export const map = new mapboxgl.Map({
+export const map = new maplibregl.Map({
container: element,
style: styleOsm(),
});
@@ -55,7 +55,7 @@ const initMap = async () => {
map.on('load', initMap);
-map.addControl(new mapboxgl.NavigationControl({
+map.addControl(new maplibregl.NavigationControl({
showCompass: false,
}));
@@ -89,7 +89,7 @@ const Map = ({ children }) => {
const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
useEffect(() => {
- mapboxgl.accessToken = mapboxAccessToken;
+ maplibregl.accessToken = mapboxAccessToken;
}, [mapboxAccessToken]);
useEffect(() => {
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index baa801fb..35d6d926 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -1,6 +1,6 @@
import React, { useCallback, useEffect } from 'react';
import ReactDOM from 'react-dom';
-import mapboxgl from 'mapbox-gl';
+import maplibregl from 'maplibre-gl';
import { Provider, useSelector } from 'react-redux';
import { map } from './Map';
@@ -54,7 +54,7 @@ const PositionsMap = ({ positions }) => {
placeholder
);
- new mapboxgl.Popup({
+ new maplibregl.Popup({
offset: 25,
anchor: 'top'
})
@@ -129,7 +129,7 @@ const PositionsMap = ({ positions }) => {
map.on('click', clusters, onClusterClick);
return () => {
- Array.from(map.getContainer().getElementsByClassName('mapboxgl-popup')).forEach(el => el.remove());
+ Array.from(map.getContainer().getElementsByClassName('maplibregl-popup')).forEach(el => el.remove());
map.off('mouseenter', id, onMouseEnter);
map.off('mouseleave', id, onMouseLeave);
diff --git a/modern/src/map/ReplayPathMap.js b/modern/src/map/ReplayPathMap.js
index feab0718..b40aa690 100644
--- a/modern/src/map/ReplayPathMap.js
+++ b/modern/src/map/ReplayPathMap.js
@@ -1,4 +1,4 @@
-import mapboxgl from 'mapbox-gl';
+import maplibregl from 'maplibre-gl';
import { useEffect } from 'react';
import { map } from './Map';
@@ -46,7 +46,7 @@ const ReplayPathMap = ({ positions }) => {
},
});
if (coordinates.length) {
- const bounds = coordinates.reduce((bounds, item) => bounds.extend(item), new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));
+ const bounds = coordinates.reduce((bounds, item) => bounds.extend(item), new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
map.fitBounds(bounds, {
padding: { top: 50, bottom: 250, left: 25, right: 25 },
});
diff --git a/modern/src/map/switcher/switcher.css b/modern/src/map/switcher/switcher.css
index 6c8fdb4e..e3d491c4 100644
--- a/modern/src/map/switcher/switcher.css
+++ b/modern/src/map/switcher/switcher.css
@@ -1,9 +1,9 @@
-.mapboxgl-style-list
+.maplibregl-style-list
{
display: none;
}
-.mapboxgl-ctrl-group .mapboxgl-style-list button
+.maplibregl-ctrl-group .maplibregl-style-list button
{
background: none;
border: none;
@@ -16,22 +16,22 @@
height: auto;
}
-.mapboxgl-style-list button.active
+.maplibregl-style-list button.active
{
font-weight: bold;
}
-.mapboxgl-style-list button:hover
+.maplibregl-style-list button:hover
{
background-color: rgba(0, 0, 0, 0.05);
}
-.mapboxgl-style-list button + button
+.maplibregl-style-list button + button
{
border-top: 1px solid #ddd;
}
-.mapboxgl-style-switcher
+.maplibregl-style-switcher
{
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTQuODQ5cHgiIGhlaWdodD0iNTQuODQ5cHgiIHZpZXdCb3g9IjAgMCA1NC44NDkgNTQuODQ5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NC44NDkgNTQuODQ5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGc+PGc+PHBhdGggZD0iTTU0LjQ5NywzOS42MTRsLTEwLjM2My00LjQ5bC0xNC45MTcsNS45NjhjLTAuNTM3LDAuMjE0LTEuMTY1LDAuMzE5LTEuNzkzLDAuMzE5Yy0wLjYyNywwLTEuMjU0LTAuMTA0LTEuNzktMC4zMThsLTE0LjkyMS01Ljk2OEwwLjM1MSwzOS42MTRjLTAuNDcyLDAuMjAzLTAuNDY3LDAuNTI0LDAuMDEsMC43MTZMMjYuNTYsNTAuODFjMC40NzcsMC4xOTEsMS4yNTEsMC4xOTEsMS43MjksMEw1NC40ODgsNDAuMzNDNTQuOTY0LDQwLjEzOSw1NC45NjksMzkuODE3LDU0LjQ5NywzOS42MTR6Ii8+PHBhdGggZD0iTTU0LjQ5NywyNy41MTJsLTEwLjM2NC00LjQ5MWwtMTQuOTE2LDUuOTY2Yy0wLjUzNiwwLjIxNS0xLjE2NSwwLjMyMS0xLjc5MiwwLjMyMWMtMC42MjgsMC0xLjI1Ni0wLjEwNi0xLjc5My0wLjMyMWwtMTQuOTE4LTUuOTY2TDAuMzUxLDI3LjUxMmMtMC40NzIsMC4yMDMtMC40NjcsMC41MjMsMC4wMSwwLjcxNkwyNi41NiwzOC43MDZjMC40NzcsMC4xOSwxLjI1MSwwLjE5LDEuNzI5LDBsMjYuMTk5LTEwLjQ3OUM1NC45NjQsMjguMDM2LDU0Ljk2OSwyNy43MTYsNTQuNDk3LDI3LjUxMnoiLz48cGF0aCBkPSJNMC4zNjEsMTYuMTI1bDEzLjY2Miw1LjQ2NWwxMi41MzcsNS4wMTVjMC40NzcsMC4xOTEsMS4yNTEsMC4xOTEsMS43MjksMGwxMi41NDEtNS4wMTZsMTMuNjU4LTUuNDYzYzAuNDc3LTAuMTkxLDAuNDgtMC41MTEsMC4wMS0wLjcxNkwyOC4yNzcsNC4wNDhjLTAuNDcxLTAuMjA0LTEuMjM2LTAuMjA0LTEuNzA4LDBMMC4zNTEsMTUuNDFDLTAuMTIxLDE1LjYxNC0wLjExNiwxNS45MzUsMC4zNjEsMTYuMTI1eiIvPjwvZz48L2c+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);
background-position: center;
diff --git a/modern/src/map/switcher/switcher.js b/modern/src/map/switcher/switcher.js
index ff9fbe97..a755645b 100644
--- a/modern/src/map/switcher/switcher.js
+++ b/modern/src/map/switcher/switcher.js
@@ -15,12 +15,12 @@ export class SwitcherControl {
onAdd(map) {
this.map = map;
this.controlContainer = document.createElement('div');
- this.controlContainer.classList.add('mapboxgl-ctrl');
- this.controlContainer.classList.add('mapboxgl-ctrl-group');
+ this.controlContainer.classList.add('maplibregl-ctrl');
+ this.controlContainer.classList.add('maplibregl-ctrl-group');
this.mapStyleContainer = document.createElement('div');
this.styleButton = document.createElement('button');
this.styleButton.type = 'button';
- this.mapStyleContainer.classList.add('mapboxgl-style-list');
+ this.mapStyleContainer.classList.add('maplibregl-style-list');
for (const style of this.styles) {
const styleElement = document.createElement('button');
styleElement.type = 'button';
@@ -48,8 +48,8 @@ export class SwitcherControl {
}
this.mapStyleContainer.appendChild(styleElement);
}
- this.styleButton.classList.add('mapboxgl-ctrl-icon');
- this.styleButton.classList.add('mapboxgl-style-switcher');
+ this.styleButton.classList.add('maplibregl-ctrl-icon');
+ this.styleButton.classList.add('maplibregl-style-switcher');
this.styleButton.addEventListener('click', () => {
this.styleButton.style.display = 'none';
this.mapStyleContainer.style.display = 'block';
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 516891e8..524f7bbf 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography} from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core';
import { useSelector } from 'react-redux';
import moment from 'moment';
import t from '../common/localization';
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-11 15:31:49 +0000