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

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.

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.

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.

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)

Fork me on GitHub