Commit 1443073a authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Geolocate button added

parent 059d8372
......@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
### Added
- If no map position is provided when loading an existing sketch, it zooms automatically to existing shapes
- Map background can be changed using left menu
- Geolocation button added
### Changed
- Drawn shapes are now more or less wide according to zoom level
......
......@@ -4453,6 +4453,11 @@
"resolved": "https://registry.npmjs.org/leaflet-hash/-/leaflet-hash-0.2.1.tgz",
"integrity": "sha1-w2xxg0fFJDAztXy0uuomEZ2CxwE="
},
"leaflet.locatecontrol": {
"version": "0.70.0",
"resolved": "https://registry.npmjs.org/leaflet.locatecontrol/-/leaflet.locatecontrol-0.70.0.tgz",
"integrity": "sha512-21pW002ifgXdQ05R+/aqAuAGt8wkh5H/WfVngYc32dN3cQwd8sJ4OGydi/b4snUZeD+C3yNfFgzIQd9LhVWKdw=="
},
"leven": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
......
......@@ -7,7 +7,7 @@
"start": "npm run build && node src/index.js",
"start:prod": "npm run build && while [ true ]; do node src/index.js; sleep 5; done",
"build": "npm run build:assets && npm run build:js",
"build:assets": "mkdir -p build && cp -r src/website/*.html src/website/*.css src/website/img node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery-slim/dist/jquery.slim.min.js node_modules/leaflet/dist/leaflet.js node_modules/leaflet/dist/leaflet.css node_modules/leaflet-hash/leaflet-hash.js node_modules/font-awesome/css/font-awesome.min.css node_modules/font-awesome/fonts node_modules/qrcode-svg/dist/qrcode.min.js node_modules/leaflet-bing-layer/leaflet-bing-layer.min.js build/",
"build:assets": "mkdir -p build && cp -r src/website/*.html src/website/*.css src/website/img node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery-slim/dist/jquery.slim.min.js node_modules/leaflet/dist/leaflet.js node_modules/leaflet/dist/leaflet.css node_modules/leaflet-hash/leaflet-hash.js node_modules/font-awesome/css/font-awesome.min.css node_modules/font-awesome/fonts node_modules/qrcode-svg/dist/qrcode.min.js node_modules/leaflet-bing-layer/leaflet-bing-layer.min.js node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.js build/",
"build:js": "simplifyify --minify --outfile \"build/*.min.js\" src/website/*.js",
"clean": "rm -rf ./build"
},
......@@ -35,6 +35,7 @@
"leaflet": "^1.6.0",
"leaflet-bing-layer": "^3.3.1",
"leaflet-hash": "^0.2.1",
"leaflet.locatecontrol": "^0.70.0",
"pg": "^7.14.0",
"qrcode-svg": "^1.1.0",
"request": "^2.88.2",
......
......@@ -16,6 +16,7 @@
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="leaflet.css" />
<link rel="stylesheet" type="text/css" href="L.Control.Locate.min.css" />
<link rel="stylesheet" type="text/css" href="font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
......@@ -173,6 +174,7 @@
<script src="leaflet-hash.js"></script>
<script src="qrcode.min.js"></script>
<script src="leaflet-bing-layer.min.js"></script>
<script src="L.Control.Locate.min.js"></script>
<script src="socket.io/socket.io.js"></script>
<script src="index.min.js"></script>
</body>
......
......@@ -16,7 +16,7 @@ const COLORS = [
let map, sid, shapesLayer, tmpShapeCoordinates,
tmpShapeLayer, timerGeocoder, noStartLocation,
backgroundLayers, tilesLayer, backgroundLayersPosition,
useBackgroundFromURL;
useBackgroundFromURL, mapLocCtrl;
const drawOpts = {
color: "#f0240f",
penSize: 10,
......@@ -132,7 +132,7 @@ function loadSketch(id) {
*/
function registerSketch() {
showLoader(true);
changeMode("nav");
changeMode("nav", { autoLocate: true });
loadBackgroundFromURL();
socket.on("sketch_created", id => {
......@@ -417,8 +417,10 @@ function showLoader(show) {
/**
* Change the current mode of the map
* @param {string} mode The mode (draw, nav)
* @param {Object} [opts] Options
*/
function changeMode(mode) {
function changeMode(mode, opts) {
opts = opts || {};
document.body.classList.remove("mode-draw", "mode-nav");
document.body.classList.add("mode-"+mode);
map.invalidateSize();
......@@ -428,10 +430,19 @@ function changeMode(mode) {
disableDrawing();
[ map.dragging, map.doubleClickZoom, map.scrollWheelZoom, map.touchZoom ].forEach(h => h.enable());
map.zoomControl.addTo(map);
map.addControl(mapLocCtrl);
if(opts.autoLocate) {
try {
mapLocCtrl.start();
}catch(e) {
console.error(e);
}
}
break;
case "draw":
[ map.dragging, map.doubleClickZoom, map.scrollWheelZoom, map.touchZoom ].forEach(h => h.disable());
map.zoomControl.remove();
map.removeControl(mapLocCtrl);
domBtnColor.style.color = drawOpts.color;
enableDrawing();
break;
......@@ -762,6 +773,20 @@ function init() {
noStartLocation = true;
}
mapLocCtrl = L.control.locate({
setView: "untilPanOrZoom",
onLocationError: e => { console.log("Location error", e.message); },
locateOptions: { maxZoom: 19, enableHighAccuracy: true },
// strings: {
// title: "Me localiser sur la carte",
// metersUnit: "mètres",
// feetUnit: "pieds",
// popup: "Vous êtes dans les {distance} {unit} autour de ce point",
// outsideMapBoundsMsg: "Vous êtes localisé en dehors de l'emprise de la carte"
// },
flyTo: true
});
tilesLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
......
......@@ -60,6 +60,10 @@
bottom: 55px;
}
.leaflet-bar span.fa {
line-height: 30px;
}
/* Menus */
.menu-dark {
background-color: #222;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment