├── MIT-LICENCE.txt ├── README.md ├── screenshot └── sample.png └── src ├── L.Control.MousePosition.css └── L.Control.MousePosition.js /MIT-LICENCE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2012 Ardhi Lukianto 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Leaflet.MousePosition 2 | 3 | Leaflet.MousePosition is a simple mouse position control that you can drop into your leaflet map. It displays geographic coordinates of the mouse pointer, as it is moved about the map. 4 | 5 | ## Using the Mouse Position Control 6 | 7 | Insert the following line: 8 | 9 | ... 10 | L.control.mousePosition().addTo(map); 11 | ... 12 | 13 | ## Available Options: 14 | 15 | These are the available options: 16 | 17 | `position:` The standard Leaflet.Control position parameter. Defaults to 'bottomleft' 18 | 19 | `separator:` To separate longitude\latitude values. Defaults to ' : ' 20 | 21 | `emptystring:` Initial text to display. Defaults to 'Unavailable' 22 | 23 | `numDigits:` Number of digits. Defaults to 5 24 | 25 | `lngFirst:` Weather to put the longitude first or not. Defaults to false 26 | 27 | `lngFormatter:` Custom function to format the longitude value. Defaults to undefined 28 | 29 | `latFormatter:` Custom function to format the latitude value. Defaults to undefined 30 | 31 | `prefix:` A string to be prepended to the coordinates. Defaults to the empty string ‘’. 32 | -------------------------------------------------------------------------------- /screenshot/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ardhi/Leaflet.MousePosition/c32f1c84ec49dbf7ad599c51c8659d5e08af0f97/screenshot/sample.png -------------------------------------------------------------------------------- /src/L.Control.MousePosition.css: -------------------------------------------------------------------------------- 1 | .leaflet-container .leaflet-control-mouseposition { 2 | background-color: rgba(255, 255, 255, 0.7); 3 | box-shadow: 0 0 5px #bbb; 4 | padding: 0 5px; 5 | margin:0; 6 | color: #333; 7 | font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; 8 | } 9 | 10 | -------------------------------------------------------------------------------- /src/L.Control.MousePosition.js: -------------------------------------------------------------------------------- 1 | L.Control.MousePosition = L.Control.extend({ 2 | options: { 3 | position: 'bottomleft', 4 | separator: ' : ', 5 | emptyString: 'Unavailable', 6 | lngFirst: false, 7 | numDigits: 5, 8 | lngFormatter: undefined, 9 | latFormatter: undefined, 10 | prefix: "" 11 | }, 12 | 13 | onAdd: function (map) { 14 | this._container = L.DomUtil.create('div', 'leaflet-control-mouseposition'); 15 | L.DomEvent.disableClickPropagation(this._container); 16 | map.on('mousemove', this._onMouseMove, this); 17 | this._container.innerHTML=this.options.emptyString; 18 | return this._container; 19 | }, 20 | 21 | onRemove: function (map) { 22 | map.off('mousemove', this._onMouseMove) 23 | }, 24 | 25 | _onMouseMove: function (e) { 26 | var lng = this.options.lngFormatter ? this.options.lngFormatter(e.latlng.lng) : L.Util.formatNum(e.latlng.lng, this.options.numDigits); 27 | var lat = this.options.latFormatter ? this.options.latFormatter(e.latlng.lat) : L.Util.formatNum(e.latlng.lat, this.options.numDigits); 28 | var value = this.options.lngFirst ? lng + this.options.separator + lat : lat + this.options.separator + lng; 29 | var prefixAndValue = this.options.prefix + ' ' + value; 30 | this._container.innerHTML = prefixAndValue; 31 | } 32 | 33 | }); 34 | 35 | L.Map.mergeOptions({ 36 | positionControl: false 37 | }); 38 | 39 | L.Map.addInitHook(function () { 40 | if (this.options.positionControl) { 41 | this.positionControl = new L.Control.MousePosition(); 42 | this.addControl(this.positionControl); 43 | } 44 | }); 45 | 46 | L.control.mousePosition = function (options) { 47 | return new L.Control.MousePosition(options); 48 | }; 49 | --------------------------------------------------------------------------------