Last updated 7 February 2015. Created on 7 July 2013.
Edited by eleuthere, Satraa, batigolix, marcoscano. Log in to edit this page.

Leaflet Widget for Geofield

Leaflet Widget for Geofield is a widget that provides a Leaflet based widget for adding and removing geometries (point, lineString, polygon) to a leaflet map and then have geofield store it.



Users that already have a geofield setup that is working can jump to (Install the widget).

  1. Install geofield and geoPHP (see requirements).
  2. Add a geofield to the content type you what to tag with geo-data. Choose WKT as an input widget and Geofield in the field display settings.
    field settings
    Display settings
    display settings

You should now be able to add geo-related data to your nodes. Make sure that this is working by example creating a new node and paste this WKT for the city of Paris, France into the field:

GEOMETRYCOLLECTION (POINT (2.382317 48.849129))

Viewing the node should now display a map of Paris. If not, please go back to the geofield documentation and troubleshoot.

Install the widget

We expect that your geofield is added to your content type and you are sure it is working correctly.

  1. Download from Leaflet JS library and place it in your libraries directory (sites/all/libraries). Make sure your directory's name is "leaflet" (case sensitive).
    • # cd ~my site~/sites/all/libraries/
    • # unzip /~path~/
    • # ls
  2. Download Leaflet Widget and place it in your libraries directory (sites/all/libraries). Make sure you rename the directory to Leaflet.widget (case sensitive).
    • # cd ~my site~/sites/all/libraries/
    • # tar -xzvf /~path~/tnightingale-Leaflet.widget-5b40011.tar.gz
    • # mv tnightingale-Leaflet.widget-5b40011 Leaflet.widget
  3. Download Leaflet draw and place it in your libraries directory (sites/all/libraries). Make sure you rename the directory to Leaflet.draw.
    • # cd ~my site~/sites/all/libraries/
    • # unzip /~path~/
    • # mv Leaflet.draw-master Leaflet.draw
  4. Give the libraries directory back to the web server user :
    # chown -Rf www-data ~my site~/sites/all/libraries/*
  5. Download and install Leaflet Widget for Geofield (this module).
  6. You are now ready to use this new widget. Go to your geofield setting and the new widget should show up in your widget list. Enable it and it should show up when you edit/create new nodes.
    A working widget


Check your Drupal logs (admin/reports/dblog). If the widget is having problem loading the js there will be entries in there trying to tell you what is going on.

Enable your favorite browser debugging tool (example Firebug) and load the node/[nid]/edit that is not showing the widget, watch for js errors.

Display settings.png27.83 KB
Field settings.png15.21 KB
New widget.png19.64 KB
working widget.png585.53 KB

Looking for support? Visit the forums, or join #drupal-support in IRC.