Easy Leaflet Location Picker In jQuery

An easy-to-use yet fully configurable location picker that gets the coordinates (longitude and latitude) of any place when you click on the Leaflet Map.

Key Features:

• Always visible or show on click.
• Custom location format.
• Custom map position, location, layer, size.
• Shows map markers or not.
• Custom trigger event.
• Useful event handlers.

How to use it:

1. Load the necessary 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 files 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 accept the picked coordinates (longitude and latitude).

<input class="example" type="text" value="17.9787,81.0352" />

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

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

5. By default the Leaflet map is only displayed when the input field gets focused or clicked. You're allowed to make it always be visible on the page using the alwaysOpen setting.

<input class="example" type="text" value="17.9787,81.0352" />
<div id="mapContainer"></div>

$('.example').leafletLocationPicker({
  alwaysOpen: true,
  mapContainer: "#mapContainer"
});

6. Customize the location format. Default: '{lat}{sep}{lng}'.

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

7. Determine the position of the map. Default: 'topright'.

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

8. Determine whether or not to show map markers. Default: true.

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

9. Customize the map using the Leaflet Map options.

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

10. Determine the trigger event to get the the coordinates (longitude and latitude) of a place. Default: 'click'.

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

11. Execute a callback function when the location changes.

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

12. All default configuration options.

$('.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
});

Changelog:

2023-08-12

• Bugfix & update

---

This awesome jQuery plugin is developed by stefanocudini. For more Advanced Usages, please check the demo page or visit the official website.