search

mfhsieh / leaflet-simple-locate

A Leaflet plugin to show the location and orientation!
https://mfhsieh.github.io/leaflet-simple-locate/
MIT License
3 stars 1 forks source link
javascript leaflet leaflet-plugins

readme

Leaflet.SimpleLocate

A Leaflet plugin displaying device location and orientation on the map, with orientation adjusted according to screen rotation.

Usage

Simply include the JS and CSS in the head.

<head>
    ...
    <script src="https://github.com/mfhsieh/leaflet-simple-locate/raw/main/dist/leaflet-simple-locate.min.js"></script>
    <link rel="stylesheet" href="https://github.com/mfhsieh/leaflet-simple-locate/blob/main/demo.css" />
    ...
</head>

And add the control to the map.

new L.Control.SimpleLocate({
    position: "topleft",
    className: "button-locate",
    afterClick: (result) => {
        // Do something after the button is clicked.
    },
    afterMarkerAdd: () => {
        // Do something after the marker (displaying the device's location and orientation) is added.
    },
    afterDeviceMove: (event) => {
        // Do something after the device moves.
    }
}).addTo(map);

The CSS variable --leaflet-simple-locate-orientation changes based on the device's orientation and can be used to customize other HTML elements.

For more details, refer to this demo (code: index.html, demo.css).

Options

Option Type Default Description
className String "" the custom CSS class name assigned to the control
afterClick Function null the callback function after the button is clicked
afterMarkerAdd Function null the callback function after the marker (displaying the device's location and orientation) is added
afterDeviceMove Function null the callback function after the device moved
setViewAfterClick Boolean true After the button is clicked, move the map to the device's location.
zoomLevel Boolean undefined After the button is clicked, zoom the map to this level.
drawCircle Boolean true Draw a circle to indicate location accuracy.
minAngleChange Number 3 It will only take effect when the angle change (in degrees) exceeds this value.
clickTimeoutDelay Number 500 time interval (in milliseconds) for detecting a double-click on the button
title String "Locate Geolocation and Orientation" the "title" attribute of the button
ariaLabel String "" the "aria-label" attribute of the button. If it is an empty string, it will be equal to "title".
htmlInit String refer to html_init.svg the HTML content of the button before it is clicked.
htmlSpinner String refer to html_spinner.svg the HTML content of the button during the user authorization
htmlGeolocation String refer to html_geolocation.svg the HTML content of the button for geolocation authorization only
htmlOrientation String refer to html_orientation.svg the HTML content of the button for geolocation and orientation authorization
iconGeolocation L.divIcon refer to icon_geolocation.svg the icon representing device's location
iconOrientation L.divIcon refer to icon_orientation.svg the icon representing device's location and orientation

Where

Author