Guide to adding maps to your RF

Preparing the map data for upload to the map feature

Map data can be either in polygon or point format contained within a .CSV file ready for upload. 

Ensure that the .CSV file is set up with following headings – Title, Content, Link URL, Image, Geo, Marker Icon and Categories

Don’t worry if there is no data in a field on the .CSV file, not all fields need to be filled. 

Map information can be added as lat/long, NGR, or eastings and northings – the system will convert to lat/long.

Adding maps to the Framework Site

Adding maps to the Framework site is a two stage process.  First you need to create the map, and then add it to a page.

Creating a map

Click on Maps on left Dashboard menu and click Add New.

This will open what looks like a page editor, but is actually a map editor. Give your map a title.

Uploading Feature data

This is the information which displays the map, and where you can enter the data.  It is possible to enter each point or polygon manually, but we recommend that points are entered as a .CSV upload, you may find that polygons have too much data for a .CSV file and therefore will need copying from a notepad file.

CSV file uploading feature data

Ensure that your data columns match the Features headings (see below).

Headings for the CSV file

Move down to the bottom of the page to CSV Upload and click on Add file. The media library will open and you can choose a .CSV file already there or upload a new file.

Uploading a CSV file to the map

This will then import the data into the map.

The Geo spatial data from the spreadsheet in the map

Polygon uploading geo data

Polygons are likely to have too much information for a .CSV file, so with polygons it is best to use notepad – save the datapoints into a notepad and then copy and paste into the Geo field.

Polygon data for ‘London’ region – can be copied directly into the geo box in features

Creating GEOJSON files for upload

The above polygon text was taken from a GeoJson file of a map drawn on the website – here you can create polygons by drawing boundaries, and then save the resulting feature data as a .geojson file (which opens in notepad).

Geojson map with South West Region polygon drawn

Once the data is imported Update the map (top right corner).

Displaying point/polygon information

There are two methods for displaying any information about the data, either Popup or Infobar. Which you choose depends on the amount of information; it is best to choose the same style for all the maps on your site.

In the Info View choose the format you’d like the information about your points on the map to show.

The information displayed in the Popup or Infobar is taken from the Content field of the data – you can put any information here.

If your map points have more information choose the Infobar, if you’re just putting a bit of short text then Popup is sufficient – you can change this later if you wish.

Example of an Infobar – for more information text which can be formatted.
Example of a popup – better for small amount of text.

You can also set the Map Height on the web page, this defaults to 400 pixels, but if you have a lot of detail on the map that might not be enough and you can increase it (do not go above 700 pixels).

Making changes to the map information

If you need to make changes to the map points or polygons, or any of the text is is best to do this within the original CSV file and re-upload to the media library.

If you make any changes and need to upload a new .CSV file, note that uploading a new file will overwrite earlier files.

Manually uploading feature data

If you have a small amount of data it is possible to manually upload to the database instead of using a .CSV file.

Click Add Row in the Features menu, which will open a series of boxes;

Manually adding a row to the features

Title of the point or polygon, the information you put in the Content field will appear in either the pop up or Info bar (can be text or an image), link URL can be to any page on the site (or external, this is not advised), an image can be added (this will need to be in the media folder), Marker icon is default (but also see below), and categories will be discussed later.

The only box which is required is Geo, which is where the spatial data such as lat/long or NGR for points, or polygons is located.

Enter the information in the required fields, each row will be a single point or polygon.

Adding the map to a page to view on the site

In order to view the map, and check that everything displays correctly you will need to embed it into a page.

Choose the page you wish to have the map on, and open it for editing (or create a new page).

A map is a block like paragraphs or images, and is added in the same way. Click on the Add block symbol, to open the dialogue box, and choose or search for maps.

Choose or search for map

This will place a map block onto the page, in the right hand menu select the map you wish to add.

Select the required map in the dropdown on the right

The map will then appear on the page.

Choose full width

At this point is a good idea to open another browser tab and view the page to be sure that the map is displaying correctly.

If your map is on a web page on it’s own with no headings, it is best to change the default display for the page to remove the left menu bar, do this by clicking on page in the top right corner.

Under template choose Full width.

Changing Point map markers

Each point feature on a map has a marker (polygons do not have markers), this can be an image of a pin, a drop or whatever you’d like.   

Default map marker

The system has a default marker, but you can change it if you wish; you could decide to have different colours for different types of find spot for instance. 

These need to be a small image (.png file), with a transparent background.  When you have your image you’ll need to upload it to the media section of the website as you would any image.

Once uploaded to the Media library, find the image you wish to use.  Click on it in the Media library to open the details.  You then need to look at the URL at the top of the page and make a note of the item number.

Make a note of the item number for the image

If you are using a custom point marker, take the item number you noted in the Media Library for the marker image you wish to use (in the example above this was ‘171’), ensure that this is in the entered on the spreadsheet in the Marker Icon field for each line.