osm-locationpicker

JQuery Location Picker plugin

This plugin allows to find and select location on OpenStreetMap map using Google geoode API for address autocomplete and reverse geocoding.

Supports address autocomplete search and location select on map click.

Address autocomplete is using Google Maps Api, Maps displayed via OpenLayers

Plugin saves location information in inputs and provides same data via callbacks.

#jquery #location-picker, #maps, #autocomplete, #geocode, #OpenStreetMap, #OSM, #OpenLayers

Features

• Location Search by address
• Address autocomplete
• Location pick on map click
• Reverse address geocode from location
• Initialize location picker with:
  • current location
  • custom address
  • custom location(latitude,longitude)
• Save location data in inputs or use in js callbacks
• Specify custom map and inputs elements

Code Example & Minimal setup

See Sample.html demo for configuration and usage

Include required scripts:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places'></script>

then add location picker plugin reference:

<script src='js/location-picker.js'></script>

Example markup:

<style>
  	#map { height: 400px; width:100%;}
  	.map-container { margin-top: 10px;}
</style> 
 
    
<div class='location-picker'>
    <input type='text' id='txtAddress' class='form-control' placeholder='Enter your address here' data-type='address' />
    <input type='hidden' id='txtLocation' data-type='location-store' />
 
    <div class='map-container'>
        <div id='map' data-type='map'></div>
    </div>
</div>

Usage:

<script>
$(function(){
        var locationPicker = $('.location-picker').locationPicker({
            locationChanged : function(data){
                $('#output').text(JSON.stringify(data));
            }
        });
});
</script> 

Location picker API Reference

locationPicker looks for elements with data-type='address', data-type='location-store' and data-type='map' in specified selector by default.

Those elements could be changed via initialization options.

Location selected callback function, initial location information could be passed as well.

All available options are:

<script>
var locationPicker = $('.location-picker').locationPicker({
            {
                address_el : 'input[data-type="address"]', // address autocomplete input
                map_el: '[data-type="map"]', // map element to render OSM map in
                save_el: '[data-type="location-store"]', // Location information is stored in this input in JSON format
                raw_data: false, /* if true, full place information is returned in JSON format 
                False by default, returns latitude, longitude and address string in JSON format
                */			
                init:{ 
                    current_location: true, // True by default, initializes location picker with current location 
                    address : 'Put init adddress here',
                    location : {latitude, longitude} // put initial location here
                    }
            }
            // callback method
            locationChanged : function(data){
 
                $('#output').text(JSON.stringify(data));
            }
            
        });
</script> 

Location Picker methods:

• getData() - returns current location data
• getAddress() - returns address string
• setAddress(address) - sets location picker address and shows location on map
• setLocation(lat, long) - sets location and reverse geocodes it's address

Contributors

• CDK2020 (https://redevs.org)

License

The MIT License (MIT)