Community Documentation

Views GeoJSON Example Use Case

Last updated July 30, 2012. Created by idevit on June 15, 2012.
Edited by RdeBoer, betoscopio, jeffschuler, batigolix. Log in to edit this page.

In this example use case, Druplicon the blogger travels around the world and blogs about the awesome stuff he encounters on his travels.

What's Views GeoJSON for?

Druplicon's blog-site will collect location information for each post. Views GeoJSON allows using Views to provide a GeoJSON feed of this locative data that can be added to a map, or that another site can collect (maybe with the Feeds module) and utilize.

Setting up Views GeoJSON

Download and install Views GeoJSON.

In this example we'll use Geofield to store geospatial data. We could do so as well with the Location module, or via any content type that maintains latitude & longitude or WKT data.

  • Add a geofield to a content type, in this example basic page
  • Geofield depends on geoPHP
  • geoPHP requires the geoPHP Library so you need to get the libraries module and download geoPHP library to 'sites/all/libraries/geoPHP'
  • Create a View with fields as display and add the necessary fields, in this example Location (latitude, longitude), Title and Body. Alternatively, add the fields from Location module or WKT data.
  • Set the Format for the display to GeoJSON Feed.
  • Map out the fileds to the sources for GeoJSON as shown in the image below
    Mapping the fields in GeoJSON

  • Give the view a proper name and description

The View Result looks like this.

{
  "type" : "FeatureCollection",
  "features" : [
    {
      "type" : "Feature",
      "geometry" : {
        "type" : "Point",
        "coordinates" : [
          33,
          11
        ]
      },
      "properties" : {
        "name" : "<a href=\"/link-to-node\">Title of the page</a>",
        "description" : "<p>Description about the page etc..."
      }
    }
}

For reference there is a gmap display included
Example data in gmap

Set up on the receiving site

We use OpenLayers to represent Druplicon's visits and blogs on a map. We could also use Leaflet.

See Getting Started with OpenLayers in Drupal 7 for help.
To get quickly started we clone the JSON example and remove the JSON markup and point it to the views URL created above.
Then to get a display clone default streetmap and set layer to the GeoJSON.
This can be found in: 'admin/structure/openlayers/maps/[name-of-map]/edit'
The layer configuration looks like this:
Getting the layer in the map
The final results look like this:
Results in Open Streetmap

Page status

Needs technical review

Log in to edit this page

About this page

Drupal version
Drupal 7.x
Audience
Site builders
Level
Intermediate
Keywords
feed, geo data, geo spatial, GeoJSON, json
Drupal’s online documentation is © 2000-2013 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License. Comments on documentation pages are used to improve content and then deleted.