Customizing The Datasets’ GetFeatureInfo Templates¶
When “clicking” over a feature of a dataset into a GeoNode Map, an info window popups showing a formatted representation of the raw data identified by the coordinates (see Fig. 1)
The way how such information is presented to the user is defined by what we call “GetFeatureInfo Template”. The latter is basically an HTML snippet containing some placeholders and special inline codes that instruct GeoServer on how to generate the raw data output.
The outcome is a rendered HTML snippet with the real values replacing the placeholders of the Template.
Currently, GeoNode allows a very simple mechanism to customize the “GetFeatureInfo Template” of a dataset.
It is possible, through the dataset Metadata Editor, to assign a name, a label and also set the attributes we want to display on the GetFeatureInfo output.
As an instance, by using the example above, we can customize a bit the dataset Metadata as shown in Fig. 2
The “GetFeatureInfo” output will change accordingly as shown in Fig. 3
Simple Template: Assigning A Media-Type To Attribute Values¶
The easiest way to render a different media-type (image, audio, video or iframe) to a property value, is to change it from the Metadata Edit attributes panel.
By changing the Display Type of an attribute from this panel as shown in Fig. 4
GeoNode will create automatically the HTML media type when rendering by using the value of the selected property.
So, as an example, if, in the figure above, the attribute NAME
contains values representing some links
to other resources, GeoNode will create those links automatically for you when clicking over a geometry.
Selecting image as media-type (Fig. 6)
and editing the contents accordingly (Fig. 7)
you will get a nice effect as shown in Fig. 8
Advanced Template: Use A Custom HTML Template¶
By selecting the option Use a custom template? as shown in Fig. 9
You will be able to provide your own custom HTML Template for the Feature Info output.
Attributes from the dataset can be represented inside the template using ${properties.ATTRIBUTE}
, where ATTRIBUTE
is the name of an attribute (field) from your dataset.
The example below uses the wikipedia
and the name
attributes to show the name of the airport as a link to the Wikipedia page:
This is the result shown when you click on an airport