osm-field jQuery Plugin

View the Project on GitHub MarkusH/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. The whole Django project is described on github and on python.org.

The jQuery osmfield plugin is a geolocation picker that turns any INPUT element into a position locator. Type in the address. If the OpenStreetMap Nominatim API finds matching coordinates, a map will be shown. You can correct the location here now or type another address. Finally, the Address and coordinates will be saved in the original INPUT element. 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">
<script src="jquery-2.1.0.min.js"></script>
<script src="leaflet.js"></script>
<script src="osmfield.js"></script>

<style type="text/css">
div.osmfield-wrapper {
  position:relative;
}

div.osmfield-map {
  width: 350px;
  height: 250px;
  border: 1px solid black;
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 1000;
}
</style>

…add the INPUT elements…

<input class="osm-demo" id="example1" />
<input type="hidden" id="example1_lat" />
<input type="hidden" id="example1_lon" />

…and now initalize everything.

<script type="application/javascript">
$(function() {
  $('.osm-demo').osmfield();
});
</script>

Try it! Type Berlin or something.

The address' INPUT element must have an ID. This with appended “_lat” and “_lon” are the IDs of (usually hidden) latitude and longitude INPUTs. The map container will be prepended to the address INPUT. If there already is a DIV with ID “example1_lat”, it will be used. This way you can place the map whereever you like.

osmfield with address

Set a default address.

<input class="osm-demo" 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="osm-demo" 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="osm-demo" 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="osm-demo" 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="osm-demo" 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. If an INPUT.osmfield-address is set as shown in most of the examples above, its name attribute will be used for lat and lon INPUT elements with appended “_lat“. If there is no INPUT.osmfield-address or it does not have any name attribute, “osmfield_lat“ and “osmfield_lon“ will be used. All this even works without user interaction simply after initailzation. Click the button.

Click and look at the URL: 






No Popup


<style type="text/css">
  div.osmfield-embedded-map { position: static; top: 0; left: 0; }
</style>

<input class="osm-demo" id="example7" value="Jeber-Bergfrieden" />
<div class="osmfield-embedded-map" id="example7-map"></div>
<input id="example7_lat" type="hidden" />
<input id="example7_lon" type="hidden" />


If you don't want your map to pop over the page, simply embed it like any other element. The CSS is up to you.













This text is always visible as the map scrolls everything down.