Press "Enter" to skip to content

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.

jquery location picker, jquery location picker example, laravel location picker, bootstrap google map location picker, get current location address in jquery

Features

  • Custom location format, lat separator, and precision
  • Choose your Latidute location, longitude by clicking on the map
  • Bind multiple events or one picker callback
  • Load map picker from 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.9787,81.0352" />

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.9787,81.0352" />
<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 or to not 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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *