Simple Location Picker on Leaflet Map In jQuery

Leaflet location picker is an easy-to-use, fully configurable location picker that gets the coordinates (longitude and latitude) of any location when you click on the post map.

Features

  • Custom location format, lat separator, and precision
  • Choose your Latitude location, and longitude by clicking on the map
  • Bind multiple events or one picker callback
  • Load map picker from a predefined location
  • The callback link on the site has been selected
  • Enable disable location tag
  • Custom base layer for the map

How to make use of it:

1. Load the required jQuery library and Leaflet Map from CDN.

<link rel="stylesheet" href="/path/to/cdn/leaflet.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/leaflet.js"></script>

2. Load the Leaflet Location Picker’s information from the dist folder.

<link rel="stylesheet" href="dist/leaflet-locationpicker.src.css" />
<script src="dist/leaflet-locationpicker.min.js"></script>

3. Create an input field to just accept the picked coordinates (longitude and latitude).

<input class="example" type="text" value="17.9447,88.0342" />

4. Attach the Leaflet Location Picker to the input field and executed.

$('.example').leafletLocationPicker();

5. By default the Leaflet map is just displayed when the input field will get targeted or clicked.

<input class="example" type="text" value="17.9447,88.0342" />
<div id="mapContainer"></div>
$('.example').leafletLocationPicker({
  alwaysOpen: true,
  mapContainer: "#mapContainer"
});

6. Customize the placement format.

$('.example').leafletLocationPicker({
  locationFormat: '{lat}@{lng}#WGS84'
});

7. Determine the position of the map.

$('.example').leafletLocationPicker({
  position: 'bottomleft'
});

8. Determine whether or not to present map markers.

$('.example').leafletLocationPicker({
  locationMarker: false
});

9. Customize the map utilizing the Leaflet Map choices.

$('.example').leafletLocationPicker({
  map: {
    // options here
  }
});

10. Determine the set-off occasion to get the coordinates (longitude and latitude) of a spot.

$('.example').leafletLocationPicker({
  event: 'click'
});

11. Execute a callback function when the placement modifications.

$('.example').leafletLocationPicker({
  onChangeLocation: function(e) {
    // e.latlng.lat
    // e.latlng.lng
    // e.location
  }
});

12. All default configuration choices.

$('.example').leafletLocationPicker({
  alwaysOpen: false,
  className: baseClassName,
  location: optsMap.center,
  locationFormat: '{lat}{sep}{lng}',
  locationMarker: true,
  locationDigits: 6,
  locationSep: ',',
  position: 'topright',
  layer: 'OSM',
  height: 140,
  width: 200,
  event: 'click',
  cursorSize: '30px',
  map: optsMap,
  onChangeLocation: $.noop,
  mapContainer: ""
});

13. Event handlers.

$('.example').leafletLocationPicker()
.on('show', function(e) {
  alert('click on map for insert the location');
})
.on('hide', function(e) {
  alert.text('hidden');
})
.on('changeLocation', function(e) {
  // e.latlng.lat
  // e.latlng.lng
  // e.location
});

Easy Leaflet Location Picker In jQuery, Leaflet Location Picker Plugin/Github, jquery latitude and longitude picker, yii2 location picker, google places autocomplete jquery


See Demo And Download

Official Website(stefanocudini): Click Here

This superior jQuery/javascript plugin is developed by stefanocudini. For extra Advanced Usage, please go to the official website.

Share