Mapping with Geocoder PHP and Leaflet.js

Interactive maps inside a web application have a lot of great uses. From visualizing data to highlighting points of interest, maps are expected to communicate ideas within the context of location easily.

The hardest part, however, is converting that data into coordinates that the map can understand. Luckily, Geocoder PHP allows us to connect to different geo-coding providers. Combined with Leaflet.js, a simple Javascript library, creating maps is a breeze.

Setting Up Geocoder

Geocoder bills itself as the missing the geocoder library for PHP. It can be used in three simple steps:

Register an adapter

Register a provider

Geocode!

Register an Adapter

The adapter serves as the mechanism to connect and get data to your chosen provider via their API. Some adapters use the built-in functionality within PHP 5.3+, like cURL and sockets. Others, like Buzz, Guzzle, and Zend HTTP Client, use third-party open source libraries that simply require you to add their dependency to your composer file.

The beauty of the Geocoder library is this abstraction of the adapter step. It allows you swap out your adapter if your needs change without requiring you to rewrite how your application receives the data.

For this example, we're going to use cURL and the included CurlHTTPAdapter class inside the Geocoder PHP library.

Register a provider

The full list can be found on the README of the Geocoder PHP repository.

Each provider, as represented by its respective classes, has its own options. Depending on your needs, you can register multiple providers for various circumstances. This may be useful if your application needs to map specific streets in San Jose, Costa Rica using Openstreetmap and find a quick route in Beijing, China using Baidu.

For this example, I'll simply use Google Maps, but register it in a way that if I want to add another provider in the future, I simply need to add it to an array:

Geocode

We can now pass the address to the geocode() method inside your newly instantiated $geocoder object. This will return a result object that is instantiated through the provider chosen earlier. This result object has getLatitude() and getLongitude() methods we can use.

Integrating with Leaflet.js

Leaflet.js is a powerful javascript library that makes mapping very easy.

Maps consist of three parts:

Tiles

Interaction layer (typically through Javascript and CSS)

Data points

The tiles are the 256 by 256 pixel squares that show the map detail. Services like Mapbox and Cloudmade allow you to create your own tilesets. For this example, I've created a free account with Cloudemade and will use the API key given to show tiles from their hosting service.

The interaction layer is handled by Leaflet.js. I simply include the Leaflet Javascript and CSS library into our starter HTML template:

Finally, we print our map data using the PHP array we defined earlier, and make sure the map centers itself on those data points by defining them together as group. All in all, the Javascript in the footer would be:

This is because Leaflet does not inject properties on the height or width of the map div, allowing you to style it and resize it as you please. Simply give your div a height and width, and your map should appear!

Conclusion

You can create beautiful, interactive maps with the Geocoder PHP library and Leaflet.js. Be sure to check out the respective documentation of each project as there are many more advanced customizations that are possible.

Fredric has many years of experience in the IT field, including as a consultant in healthcare IT, an an Interaction Designer, a Lead Developer on a large government project and a Web Development Manager. Since the days of the Tandy 3000, tinkering has always been a passion, and it continues with his Legos and Raspberry Pi.