From f2c65d56b20998384c1539b5d1c62c0605a0b8f8 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 4 Jul 2021 10:15:20 -0700 Subject: Update some libraries --- modern/package.json | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/modern/package.json b/modern/package.json index 29c0e47..a18d656 100644 --- a/modern/package.json +++ b/modern/package.json @@ -3,19 +3,17 @@ "version": "0.1.0", "private": true, "dependencies": { - "@craco/craco": "^5.6.4", - "@mapbox/mapbox-gl-draw": "^1.2.0", + "@craco/craco": "^5.9.0", + "@mapbox/mapbox-gl-draw": "^1.3.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", + "@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", + "moment": "^2.29.1", "react": "^16.13.1", "react-container-dimensions": "^1.4.1", "react-dom": "^16.13.1", @@ -25,8 +23,8 @@ "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": { -- cgit v1.2.3 From d187ed9b1ffa1835c5498ff5f2e3652447d7c68c Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 4 Jul 2021 10:34:53 -0700 Subject: Migrate to MapLibre --- modern/README.md | 2 +- modern/package.json | 2 +- modern/public/styles.css | 2 +- modern/src/map/CurrentLocationMap.js | 4 ++-- modern/src/map/Map.js | 10 +++++----- modern/src/map/PositionsMap.js | 6 +++--- modern/src/map/ReplayPathMap.js | 4 ++-- modern/src/map/switcher/switcher.css | 12 ++++++------ modern/src/map/switcher/switcher.js | 10 +++++----- 9 files changed, 26 insertions(+), 26 deletions(-) diff --git a/modern/README.md b/modern/README.md index b5cb212..866dfd3 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 a18d656..0658ec3 100644 --- a/modern/package.json +++ b/modern/package.json @@ -12,7 +12,7 @@ "@reduxjs/toolkit": "^1.6.0", "@turf/turf": "^6.4.0", "canvas-tint-image": "^2.0.1", - "mapbox-gl": "^1.12.0", + "maplibre-gl": "^1.15.0", "moment": "^2.29.1", "react": "^16.13.1", "react-container-dimensions": "^1.4.1", diff --git a/modern/public/styles.css b/modern/public/styles.css index 60d1208..7e9de65 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 31e6e28..06aaad0 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 a973cf7..46c59d2 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 baa801f..35d6d92 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 feab071..b40aa69 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 6c8fdb4..e3d491c 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 ff9fbe9..a755645 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'; -- cgit v1.2.3 From 1e39fc957e1ea28fc1d9c25fb13857c2121e1a27 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 4 Jul 2021 10:38:30 -0700 Subject: Update Material UI --- modern/package.json | 8 ++++---- modern/src/reports/ReportFilter.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/modern/package.json b/modern/package.json index 0658ec3..30fc41b 100644 --- a/modern/package.json +++ b/modern/package.json @@ -5,10 +5,10 @@ "dependencies": { "@craco/craco": "^5.9.0", "@mapbox/mapbox-gl-draw": "^1.3.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", + "@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", diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index b9817d5..c92741e 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, makeStyles } 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'; -- cgit v1.2.3 From dbe1cd10a6f3a5901a54b451632e7e397fb7ce90 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 4 Jul 2021 10:41:48 -0700 Subject: Upgrade redux --- modern/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modern/package.json b/modern/package.json index 30fc41b..9475019 100644 --- a/modern/package.json +++ b/modern/package.json @@ -17,7 +17,7 @@ "react": "^16.13.1", "react-container-dimensions": "^1.4.1", "react-dom": "^16.13.1", - "react-redux": "^7.2.1", + "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "^3.4.3", "react-virtualized-auto-sizer": "^1.0.5", -- cgit v1.2.3 From f1d7cd0215225b39ca90da82eeb1e6a9abca1ccd Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 4 Jul 2021 10:43:16 -0700 Subject: Minor react upgrade --- modern/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modern/package.json b/modern/package.json index 9475019..bdae300 100644 --- a/modern/package.json +++ b/modern/package.json @@ -14,9 +14,9 @@ "canvas-tint-image": "^2.0.1", "maplibre-gl": "^1.15.0", "moment": "^2.29.1", - "react": "^16.13.1", + "react": "^16.14.0", "react-container-dimensions": "^1.4.1", - "react-dom": "^16.13.1", + "react-dom": "^16.14.0", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "^3.4.3", -- cgit v1.2.3 From 47ca620eff7883207af2f6de76b9b858bf4baa37 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 4 Jul 2021 10:44:45 -0700 Subject: Major react upgrade --- modern/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modern/package.json b/modern/package.json index bdae300..4bc8f0f 100644 --- a/modern/package.json +++ b/modern/package.json @@ -14,9 +14,9 @@ "canvas-tint-image": "^2.0.1", "maplibre-gl": "^1.15.0", "moment": "^2.29.1", - "react": "^16.14.0", + "react": "^17.0.2", "react-container-dimensions": "^1.4.1", - "react-dom": "^16.14.0", + "react-dom": "^17.0.2", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "^3.4.3", -- cgit v1.2.3 From 627cf95d59f625dcb0544bfd4c067d99dee4bb93 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 4 Jul 2021 10:56:26 -0700 Subject: Minor react scripts update --- modern/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modern/package.json b/modern/package.json index 4bc8f0f..6c74cbe 100644 --- a/modern/package.json +++ b/modern/package.json @@ -19,7 +19,7 @@ "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", -- cgit v1.2.3