Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

"Trying pigeon-maps as an alternative to react-leaflet +leaflet and it seems much easier (and reactive).

This commit is contained in:
Eric van der Vlist 2022-09-01 19:05:23 +02:00
parent 01fc789614
commit a0ee63ef09
5 changed files with 22 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
package-lock.json generated
View File

@ -25,15 +25,13 @@
"@types/node": "^12.19.15",
"@types/react": "^18.0.18",
"@types/react-dom": "^18.0.6",
"@types/react-leaflet": "^2.8.2",
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"cordova-plugin-geolocation": "^4.1.0",
"ionicons": "^6.0.3",
"leaflet": "^1.8.0",
"pigeon-maps": "^0.21.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.0.2",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.0",
@ -3147,16 +3145,6 @@
"prettier": ">=2.3"
}
},
"node_modules/@react-leaflet/core": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.1.tgz",
"integrity": "sha512-XGmx01DovDt0IWsW4tqeuSYifpY19aUn9NYCqTBI3KNtjbCjj0pfiWa7krNsnJ6l2oQbv4Nt0/BabLbIvT4ocA==",
"peerDependencies": {
"leaflet": "^1.8.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -4004,11 +3992,6 @@
"@types/node": "*"
}
},
"node_modules/@types/geojson": {
"version": "7946.0.10",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
},
"node_modules/@types/graceful-fs": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@ -4112,14 +4095,6 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
"node_modules/@types/leaflet": {
"version": "1.7.11",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz",
"integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==",
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/mime": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@ -4188,15 +4163,6 @@
"@types/react": "*"
}
},
"node_modules/@types/react-leaflet": {
"version": "2.8.2",
"resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
"integrity": "sha512-Iel8Vd1bSCD38Yhiqcmm/+9hjPEdd39LFE3tBMbOytq3QAQsC3LDrbo6ifoh8JbpqPbCsQPo9Wx5OELHixEShg==",
"dependencies": {
"@types/leaflet": "*",
"@types/react": "*"
}
},
"node_modules/@types/react-router": {
"version": "5.1.18",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz",
@ -11253,11 +11219,6 @@
"language-subtag-registry": "~0.3.2"
}
},
"node_modules/leaflet": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
},
"node_modules/leven": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -12576,6 +12537,14 @@
"node": ">=0.10.0"
}
},
"node_modules/pigeon-maps": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/pigeon-maps/-/pigeon-maps-0.21.0.tgz",
"integrity": "sha512-p3GaGday5nmufHVGZW/36LnSXfYVh6qfzYisqcC87nqFr0eXIKkqQcDuPP9g4F1OXL1JeJe4x6JEnAE9HB+zWQ==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/pirates": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@ -14244,19 +14213,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-leaflet": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.0.2.tgz",
"integrity": "sha512-pDyIf50Ek/LZ0p4Qxw2D9LMOx+LytQs2R+MY3mhTUPGzubrpP4QAgbCv2qc0L9y0qVRgx7dHavWuPFkc/WCJCw==",
"dependencies": {
"@react-leaflet/core": "^2.0.1"
},
"peerDependencies": {
"leaflet": "^1.8.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -20127,12 +20083,6 @@
"prettier": ">=2.3"
}
},
"@react-leaflet/core": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.1.tgz",
"integrity": "sha512-XGmx01DovDt0IWsW4tqeuSYifpY19aUn9NYCqTBI3KNtjbCjj0pfiWa7krNsnJ6l2oQbv4Nt0/BabLbIvT4ocA==",
"requires": {}
},
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -20769,11 +20719,6 @@
"@types/node": "*"
}
},
"@types/geojson": {
"version": "7946.0.10",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
},
"@types/graceful-fs": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@ -20873,14 +20818,6 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
"@types/leaflet": {
"version": "1.7.11",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz",
"integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==",
"requires": {
"@types/geojson": "*"
}
},
"@types/mime": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@ -20949,15 +20886,6 @@
"@types/react": "*"
}
},
"@types/react-leaflet": {
"version": "2.8.2",
"resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
"integrity": "sha512-Iel8Vd1bSCD38Yhiqcmm/+9hjPEdd39LFE3tBMbOytq3QAQsC3LDrbo6ifoh8JbpqPbCsQPo9Wx5OELHixEShg==",
"requires": {
"@types/leaflet": "*",
"@types/react": "*"
}
},
"@types/react-router": {
"version": "5.1.18",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz",
@ -26142,11 +26070,6 @@
"language-subtag-registry": "~0.3.2"
}
},
"leaflet": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
},
"leven": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -27109,6 +27032,12 @@
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
},
"pigeon-maps": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/pigeon-maps/-/pigeon-maps-0.21.0.tgz",
"integrity": "sha512-p3GaGday5nmufHVGZW/36LnSXfYVh6qfzYisqcC87nqFr0eXIKkqQcDuPP9g4F1OXL1JeJe4x6JEnAE9HB+zWQ==",
"requires": {}
},
"pirates": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@ -28138,14 +28067,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-leaflet": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.0.2.tgz",
"integrity": "sha512-pDyIf50Ek/LZ0p4Qxw2D9LMOx+LytQs2R+MY3mhTUPGzubrpP4QAgbCv2qc0L9y0qVRgx7dHavWuPFkc/WCJCw==",
"requires": {
"@react-leaflet/core": "^2.0.1"
}
},
"react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

4
package.json
View File

@ -21,15 +21,13 @@
"@types/node": "^12.19.15",
"@types/react": "^18.0.18",
"@types/react-dom": "^18.0.6",
"@types/react-leaflet": "^2.8.2",
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"cordova-plugin-geolocation": "^4.1.0",
"ionicons": "^6.0.3",
"leaflet": "^1.8.0",
"pigeon-maps": "^0.21.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.0.2",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.0",

2
src/App.tsx
View File

@ -19,8 +19,6 @@ import '@ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';
import './theme/leaflet.css';
/* Components */
import LiveMap from './components/live-map'

23
src/components/live-map.tsx
View File

@ -1,37 +1,26 @@
import react from "react";
import { useState, useEffect } from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import { useMap } from 'react-leaflet';
import { Map, Marker } from "pigeon-maps"
import { Geolocation } from "@awesome-cordova-plugins/geolocation";
const LiveMap: react.FC = () => {
const initialPosition: [number, number] = [44.73574, 6.18981];
const [currentPosition, setCurrentposition] = useState(initialPosition);
const theMap = useMap();
useEffect(()=>{
Geolocation.getCurrentPosition().then((position) =>
{
setCurrentposition([position.coords.latitude, position.coords.longitude]);
theMap.setView([position.coords.latitude, position.coords.longitude], 13);
}
}
);
}, [])
return (
<MapContainer center={initialPosition} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='{"&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors"}'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={currentPosition}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
);
<Map center={currentPosition} defaultZoom={11}>
<Marker width={50} anchor={currentPosition} />
</Map>
);
};
export default LiveMap;

4
src/theme/leaflet.css
View File

@ -1,4 +0,0 @@
.leaflet-container {
width: 100%;
height: 100vh;
}