Replace custom locate control with Leaflet.Locate

This commit is contained in:
Aleksejs Popovs 2022-11-24 13:56:21 -05:00
parent c4415e1e99
commit 864abf9f46
2 changed files with 20 additions and 2 deletions

View file

@ -250,7 +250,18 @@ L.U.Map.include({
}
this._controls.zoom = new L.Control.Zoom({zoomInTitle: L._('Zoom in'), zoomOutTitle: L._('Zoom out')});
this._controls.datalayers = new L.U.DataLayersControl(this);
this._controls.locate = new L.U.LocateControl();
this._controls.locate = L.control.locate({
strings: {
title: L._('Center map on your location'),
},
showPopup: false,
// We style this control in our own CSS for consistency with other controls,
// but the control breaks if we don't specify a class here, so a fake class
// will do.
icon: 'umap-empty',
iconLoading: 'umap-empty',
flyTo: true,
});
this._controls.fullscreen = new L.Control.Fullscreen({title: {'false': L._('View Fullscreen'), 'true': L._('Exit Fullscreen')}});
this._controls.search = new L.U.SearchControl();
this._controls.embed = new L.Control.Embed(this, this.options.embedOptions);

View file

@ -41,6 +41,7 @@
background-position: 0 -32px;
}
.leaflet-measure-control a,
.leaflet-control-locate a,
.umap-control a {
background-position: 50% 50%;
background-repeat: no-repeat;
@ -81,7 +82,9 @@ a.umap-control-less {
.leaflet-control-locate a {
background-position: -1px -121px;
}
.leaflet-control-locate.active a {
.leaflet-control-locate.active a,
.leaflet-control-locate.requesting a
{
background-position: -80px -161px;
box-shadow: 0 0 4px 0 black inset;
}
@ -263,6 +266,10 @@ ul.photon-autocomplete {
display: inline-block;
vertical-align: middle;
}
.leaflet-control-locate-location circle {
animation: none;
}
/* ********************************* */