Geo-location based content (content development)

In this part of the coverage of Hippo CMS Google Maps plugin I will show how to use the plugin when designing content types using Hippo CMS.

Btw, If something is not clear the source code also contains a demo project with a document that is already geo-tagged.

Dependency

First of all, in order to use the plugin we need to have the dependency added to your cms project pom:

    
        org.onehippo.plugins
        google-maps-plugin
        1.0
    

Keep in mind to use the latest available version (which is 1.0 at the time of writing).
In order for the plugin artefact to be resolved you can either build it and put it in your repository or fork the project and add it directly to your reactor pom as a module.

Document type

Once the dependency is added the plugin is ready to be used with Hippo CMS. The plugin offers custom compound type called 'Location'. The Location component can be added to the desired document type by selecting Location compound type on the Compound Field panel in the document type editor:

Upon selecting the Location component it will be added to the document type:

The rendering is done by the plugin itself while the structure is kept in the compound type. The location component contains some of the default values, such as latitude, longitude and zoom level.
When the document type is updated with the Location component it is possible to tag documents of that type with GPS coordinates.

Geo-tagging the documents

When opening document for editing the location component will be rendered by the plugin in the same fashion as shown above. Except that the data that is stored in the Latitude, Longitude and Zoom fields will be stored with the document.

The following is typical scenario how a document can be tagged with gps-location:

Let's say we want to tag current document with the location of Amsterdam. For that we could of course lookup the GPS coordinates of the city and manually put those values into the location fields.
Another possibility is to use the Search field which is only used for searching and does not store any values with the document. The plugin tries to find possible matches with as you type:

Once the desired match is selected the map automatically jumps to that place. All is left to do is to choose the right zoom level and click on the map to place a marker:

When the marker is being placed its' coordinates together with the current zoom level are recorded in the location fields:

That's it - the document is tagged! Upon saving (and closing) the document all stored location values (together with a static piece of map) will be displayed along with the rest of the document content:

In the next article I will show how to use that information on your website.