osm-field jQuery Plugin

View the Project on GitHub: sinnwerkstatt/django-osm-field

The jQuery plugin

This page describes the jQuery part of the Django osm field plugin. You can use this stand alone in your own projects if you just pick the osm_field.js plugin file. Everything else in the repository is the Django project. You might also find it on python.org.

The jQuery osmfield plugin is a geolocation picker that turns three INPUT elements into a position locator. Type in the address. If the OpenStreetMap Nominatim API finds matching coordinates, a map will be shown. You can specify details in the INPUT now and correct the location in the map. Finally, the Address and coordinates will be saved in the original INPUT elements. The dependencies are Leaflet and jQuery.

Simple osmfield

Let's start with jQuery, Leaflet, the Plugin and some lines CSS…

<link rel="stylesheet" href="leaflet.css">
<link rel="stylesheet" href="osm_field.css">
<script src="jquery-2.1.0.min.js"></script>
<script src="leaflet.js"></script>
<script src="osmfield.js"></script>

…add the INPUT elements…

<input class="osmfield" id="example1" />
<input type="hidden" id="example1_lat" />
<input type="hidden" id="example1_lon" />

...it will initialize itself if it has the class osmfiled.

Try it! Type Berlin or something.

The address' INPUT element must have an ID. The same ID with appended “_lat” and “_lon” are the IDs of (usually hidden) latitude and longitude INPUTs.

osmfield with address

Set a default address.

<input class="osmfield" id="example2" value="Thinkfarm Berlin" />
<input type="hidden" id="example2_lat" />
<input type="hidden" id="example2_lon" />

osmfield with address and geo coordinates

In this example, the geo coordinates are already given on initialization. They do not have to match the address.

<input class="osmfield" id="example3" value="Thinkfarm Berlin" />
<input id="example3_lat" value="41.6147605" type="hidden" />
<input id="example3_lon" value="0.6267842" type="hidden" />

osmfield with just geo coordinates

<input class="osmfield" id="example4" />
<input id="example4_lat" value="41.6147605" type="hidden" />
<input id="example4_lon" value="0.6267842" type="hidden" />

Works but does not make sense.

Internationalization

<input class="osmfield" id="example5"
  value="München"
  lang="de" />
<input id="example5_lat" type="hidden" />
<input id="example5_lon" type="hidden" />

Munich or München? Usually you have a document wide setting like <html lang="en-US">. osmfield uses the lang attribute that is set nearest to the selector.

Use the data

<script type="application/javascript">
$(function() {

  $('button#getvalues').click(function() {
    $('pre#values').text(
      'address: '+$('input[name=yourhome]').val()+'\n'+
      'latitude: '+$('input[name=yourhome_lat]').val()+'\n'+
      'longitude: '+$('input[name=yourhome_lon]').val()
    );
  });

});
</script>

<form action="." method="get">
  <input name="address" class="osmfield" id="example6" value="European Quarter, Brussels" />
  <input name="latitude" id="example6_lat" type="hidden" />
  <input name="longitude" id="example6_lon" type="hidden" />

  <input type="submit" />
</form>

<button id="getvalues" />Get me the values!</button>

<pre id="values"></pre>

You can read the address and geo coordinates whenever you want. This even works without user interaction simply after initailzation. Click the buttons.

Click and look at the URL: