Skip to content

Commit

Permalink
Merge pull request #151 from GeotrekCE/show-user-heading
Browse files Browse the repository at this point in the history
feat: show user heading
  • Loading branch information
bastyen authored Sep 17, 2024
2 parents 984f882 + 536a39e commit 95a26e4
Show file tree
Hide file tree
Showing 6 changed files with 223 additions and 10 deletions.
6 changes: 0 additions & 6 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@
"leaflet": "^1.9.4",
"leaflet-i18n": "^0.3.4",
"leaflet-rotate": "^0.2.8",
"leaflet.locatecontrol": "^0.79.0",
"leaflet.markercluster": "^1.5.3",
"leaflet.offline": "^3.0.1",
"slugify": "^1.6.6",
Expand Down
28 changes: 27 additions & 1 deletion src/components/grw-map/grw-map.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use '~leaflet/dist/leaflet.css';
@use '~leaflet.locatecontrol/dist/L.Control.Locate.min.css';
@use '../../utils/leaflet-simple-locate.css';
@use '~@raruto/leaflet-elevation/dist/leaflet-elevation.min.css';
@use '~leaflet.markercluster/dist/MarkerCluster.css';

Expand Down Expand Up @@ -381,3 +381,29 @@
width: 221px;
margin: 0;
}

.leaflet-simple-locate svg {
--primary-rgb: 00, 00, 00;
}

.leaflet-simple-locate-icon {
--primary-rgb: 25, 135, 84;
}

.leaflet-simple-locate-orientation {
--primary-rgb: 25, 135, 84 !important;
}

.leaflet-simple-locate.button-locate {
--primary-rgb: 25, 135, 84;
margin: 10px 0px 0px 10px !important;
position: relative;
transform: none;
top: auto;
left: auto;
width: 34px;
height: 34px;
border-radius: 4px;
border: 2px solid rgba(0, 0, 0, 0.2) !important;
box-shadow: none;
}
8 changes: 6 additions & 2 deletions src/components/grw-map/grw-map.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Component, Host, h, Prop, State, Event, EventEmitter, getAssetPath, Build, Listen, Element, forceUpdate } from '@stencil/core';
import { Feature, FeatureCollection } from 'geojson';
import L, { MarkerClusterGroup, TileLayer } from 'leaflet';
import 'leaflet.locatecontrol';
import 'leaflet-i18n';
import '@raruto/leaflet-elevation/dist/leaflet-elevation.min.js';
import 'leaflet.markercluster/dist/leaflet.markercluster.js';
import '../../utils/leaflet-simple-locate.min.js';
import state, { onChange } from 'store/store';
import { translate } from 'i18n/i18n';
import { getTrekGeometry } from 'services/treks.service';
Expand Down Expand Up @@ -274,7 +274,6 @@ export class GrwMap {
this.map = L.map(this.mapRef, { zoom: 4, center: [47, 2] });

L.control.scale({ metric: true, imperial: false }).addTo(this.map);
(L.control as any).locate({ showPopup: false }).addTo(this.map);

const nameLayers = this.nameLayer ? this.nameLayer.split(',') : [];

Expand Down Expand Up @@ -327,6 +326,11 @@ export class GrwMap {

(L.control as any).contract({ position: 'topleft' }).addTo(this.map);

new (L.Control as any).SimpleLocate({
position: 'topleft',
className: 'button-locate',
}).addTo(this.map);

if (state.currentTrek) {
this.addTrek();
} else if (state.currentTreks) {
Expand Down
126 changes: 126 additions & 0 deletions src/utils/leaflet-simple-locate.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
/*
* Leaflet.SimpleLocate v1.0.4 - 2024-6-15
*
* Copyright 2024 mfhsieh
* [email protected]
*
* Licensed under the MIT license.
*
* Demos:
* https://mfhsieh.github.io/leaflet-simple-locate/
*
* Source:
* [email protected]:mfhsieh/leaflet-simple-locate.git
*
*/
@-moz-document url-prefix() {
.leaflet-simple-locate .fa,
.leaflet-simple-locate .fab,
.leaflet-simple-locate .far,
.leaflet-simple-locate .fas {
margin-top: 0.05rem;
margin-bottom: -0.05rem;
}
}

.leaflet-simple-locate {
display: flex;
align-items: center;
justify-content: center;
/* to make webkit and moz consistent */
box-sizing: border-box;
width: 2.5rem;
height: 2.5rem;
padding: 0;
margin: 0;
font-size: 1.375rem;
color: rgba(var(--primary-rgb), 1);
background-color: rgba(255, 255, 255, 1) !important;
border: 0.125rem solid rgba(var(--primary-rgb), 1) !important;
border-radius: 2.5rem;
box-shadow: rgba(0, 0, 0, 0.33) 0 0.125rem 0.375rem;
/* opacity: .5;
transition: opacity .2s; */
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-khtml-text-size-adjust: none;
}

/* .leaflet-simple-locate:hover,
.leaflet-simple-locate:active {
opacity: 1;
} */

.leaflet-simple-locate:active {
color: white;
background-color: rgba(var(--primary-rgb), 1) !important;
border-color: white !important;
}

.leaflet-simple-locate:active svg {
fill: white;
}

.leaflet-simple-locate:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

.leaflet-simple-locate:focus-visible {
border: 0.125rem solid rgba(0, 0, 0, 1);
}

.leaflet-simple-locate svg {
fill: rgba(var(--primary-rgb), 1);
width: 1.375rem;
height: 1.375rem;
}

.leaflet-simple-locate.button-locate {
position: absolute;
margin: 0 !important;
left: 0.5rem;
top: calc(var(--vh, 1vh) * 50);
transform: translateY(-50%);
}

.leaflet-simple-locate-icon {
fill: rgba(var(--primary-rgb), 1);
pointer-events: none !important;
cursor: grab;
}

.leaflet-simple-locate-icon stop {
stop-color: rgba(var(--primary-rgb), 1);
}

.leaflet-simple-locate-icon .orientation {
transform: rotate(calc(-1 * var(--leaflet-simple-locate-orientation, 0deg)));
}

.leaflet-simple-locate-circle {
display: var(--leaflet-simple-locate-circle-display);
fill: rgba(var(--primary-rgb), 1);
fill-opacity: 0.1;
stroke: rgba(var(--primary-rgb), 1);
stroke-width: 1;
stroke-opacity: 0.3;
pointer-events: none !important;
cursor: grab;
}

.leaflet-simple-locate-orientation {
transform: rotate(var(--leaflet-simple-locate-orientation, 0deg));
}

#leaflet-simple-locate-icon-spot {
pointer-events: auto;
cursor: pointer;
}
64 changes: 64 additions & 0 deletions src/utils/leaflet-simple-locate.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 95a26e4

Please sign in to comment.