Views GeoJSON Example Use Case

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


• 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

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:

The final results look like this: