Latitude and Longitude picker

A jQuery plugin that creates a location picker on your webpage with a simple input form. It uses OpenLayer as map view and uses Google Geocoding API services to look for the address and elevation of selected point. All actions trigger a signals to hock the activity. Works on touchscreen. Easy to customize markup and CSS.

This is a demo page; the newest live demo will always be here. For the code, install instructions and to see how amazingly free it is, go to Github. Also, you might find other interesting things on my blog at www.staniscia.net.

The simplest form

When you click to set the position

After every position change you'll have the fresh latitude, longitude and zoom values in the hidden fields.
The "location_changed" event will also be fired with the gllLatlonPicker Node JQuery object as attribute.

Code

<fieldset class="gllpLatlonPicker">
        <div class="gllpMap"></div>
        <br/>
        <input type="hidden" class="gllpLatitude"/>
        <input type="hidden" class="gllpLongitude"/>
        <input type="hidden" class="gllpZoom"/>
        <input type="hidden" class="gllpLocationName"/>
</fieldset>

Results

Simple form with a OpenLayer search field and default values

Click on the map to set the position, search for cities, countries or landmark names.

If the search has results, the first element will appear on the map (with the default zoom value 11)
You can set default latitude, longitude and zoom values in the hidden fields
If you don't give an ID to the map, the script generates one; feel free to use custom ID's though

Code

<fieldset class="gllpLatlonPicker">
            <input type="text" class="gllpSearchField" size="45">
            <input type="button" class="gllpSearchButton" value="Search"/>
            <div class="gllpMap"></div>
            <input type="hidden" class="gllpLatitude" value="60"/>
            <input type="hidden" class="gllpLongitude" value="30"/>
            <input type="hidden" class="gllpZoom" value="10"/>
</fieldset>

Results

Reverse lookup: retrieves the location name and elevation once it's picked

Click on the map to set the position.

After the position change you'll have the location name in the gllpLocationName field.
If there is no value, the field will be emptied.
The "location_changed" event will also be fired with the gllLatlonPicker Node JQuery object as attribute.
The "location_name_changed" event will be fired after we received the name of the selected location.
The "elevation_changed" event will be fired after we received the elevation value.

Code

<fieldset class="gllpLatlonPicker">
        <div class="gllpMap"></div><br>
        <input type="hidden" class="gllpLatitude"/>
        <input type="hidden" class="gllpLongitude"/>
        <input type="hidden" class="gllpZoom"/>
        <hr>
        Name of Position: <input type="text" class="gllpLocationName" size=42/><br/>
        Elevation: <input type="text" class="gllpElevation" size=12/>m
    </fieldset>

Results

Name of Position:
Elevation: m

Editable and selectable Latitude/Longitude values

Move the marker, click on the map, search, or set new values to interact.

You can set your own latitude, longitude and zoom values. The map shows your data after pressing the update button.
You can still hide the Zoom field (or any other fields)

Code

<fieldset class="gllpLatlonPicker">
            <div class="gllpMap"></div>
            <hr>
            Search: <input type="text" class="gllpSearchField">
            <input type="button" class="gllpSearchButton" value="GO!"><br/>
            <hr>
            Latitude:  <input type="text" class="gllpLatitude" value="20"/><br/>
            Longitude: <input type="text" class="gllpLongitude" value="20"/><br/>
            Zoom: <input type="text" class="gllpZoom" value="3"/>
            <input type="button" class="gllpUpdateButton" value="Update Map" size="200px">
            <hr>
            Name of Position: <input type="text" class="gllpLocationName" size=42/><br/>
            Elevation: <input type="text" class="gllpElevation" size=12/>m
</fieldset>

Results

Search:

Latitude:
Longitude:
Zoom:

Name of Position:
Elevation: m

Created By

Alessandro Staniscia
Sito: www.staniscia.net
linkedin: http://it.linkedin.com/in/stanisciaalessandro/
Twitter: @alexstani
Code: The Code
Demo: Demo

This project is forked from wonderful project of Richard Dancsi (code)