News Archive
PhpRiot Newsletter
Your Email Address:

More information

Address lookups with Leaflet and Nominatim

Note: This article was originally published at Planet PHP on 21 April 8720.
Planet PHP

Address lookups with Leaflet and Nominatim

London, UK Tuesday, November 20th 2012, 10:52 GMT

I recently wrote a patch for to add a map of an event's location to the event detail page. With the same patch, I also replaced the location part of the event edit page with a solution that uses JQuery, Leaflet as map API, OpenStreetMap tiles and Nominatim for doing address lookups. This article forms a small tutorial on how to use this same set-up yourself.

The Basics

To start, we create a new directory for our project:

mkdir addresses cd addresses

Then I downloaded the Leaflet and jQuery libraries and extracted them in the js directory of the project:

mkdir js curl -L -o unzip mv CloudMade-Leaflet-*/dist/* js rm -rf CloudMade-Leaflet-* rm curl -o js/jquery-1.8.2.min.js

As first step, we are simply going to show a map on a web page. The map is going to be full screen, and will not have any bells and whistles. The code to embed a map is small, but we will separate it into three files for clarity: a CSS file for our styles (site.css), an html file for the structure (index.html) and a JS file for all our JavaScript functions (js/map.js).

Let's start with the html file:

Leaflet and Nominatim example

Truncated by Planet PHP, read more at the original (another 3750 bytes)