Cilogi guides contain maps of several kinds
- Maps using online map data (we use OpenStreetMap)
- Maps using online data, but with overlays for our collection. These maps are particularly useful for outdoor sites where its helpful to use the phone's GPS to show visitors their location.
- Plans of building, galleries, plant houses, etc. Maps of indoor areas where GPS will not be used.
- Photographs of display cases, plant beds or other areas where signs can't be placed and yet where visitors may want information about items of interest.
There is no technical distinction between the last two types of map, but it is helpful to make the conceptual distinction.
For our example we'll use a map of type (2) above, an online map with overlay.
Before looking at the map proper we need to talk about markers. A marker is a map pin which visually shows a location. Its helpful to have different categories of marker, to show different categories of object. We allow both the color and the icon of markers to be varied.
Before creating the map we need to create markers. We'll create four, only one of which we'll use at the moment.
- Marker for toilets.
- Marker for playground
- Marker for Cafe
- Marker for trail pages (the 3 pages we created last week)
- Start editing the guide by going to the Dashboard, selecting the guide and pressing Edit.
- Press the Markers menu item on the left side menu. You'll see the following
Its probably a good idea to leave the default marker unchanged, so let's create the toilets marker by pressing the New button. This pops up a new marker on the same screen and we can fill in the values. This looks as follows
When we're adding markers to the map, this one will be labelled toilets with a male and female icon, with background color red, and with the icon in white. When the marker is clicked on the map the popup will be headed Toilets.
- Let's go ahead and create the other markers. The markers should be saved, by pressing the Save button. The result looks like this
Now we've added the markers let's create our map. Go to the Maps screen by pressing the Maps button in the left side panel. You should see this
Press the New button to create a map. You'll see this
The map name is used to reference this map in links. We'll call it
map1. The description will be
The Botanics Gardens. The index is used to refer to the map from elsewhere and will be
Since we want a map we use the osm (OpenStreetMap) tile set. This is Open Source and freely available.
This map will have an overlay and we can set the opacity of the overlay. This is the amount by which the underlying map will show through. In our case our overlay is a PNG image with transparency built in, so no transparency is required and the opacity can stay at 1.
Before loading the overlay its a good idea to set the underlying map to the correct location. You can type in a location in the Find Location box, and hit return to be taken to the location of your collection. Do this before you load the overlay!
Now we're ready to load the overlay, so press Choose File and load the overlay from your local computer. This is what we see
Now we have to align the overlay with the Map. The top left red circle should be dragged to where the top left of the overlay sits on the map. You can zoom using the +/- control or with a mouse wheel or by double clicking. You can adjust the bottom right red circle similarly. This bottom red circle allows rotation and scaling of the overlay while the top left circle only translates it.
The final result looks like
At this point its worth saving the map by pressing the Save button. Note that when you save the map the area you see on the page will be the area covered by the map for your users. The map will exist at the scale you save it plus two levels down. The lowest level is 4 times larger than the highest. If this is not enough for your purposes please let us know, and we'll sort something out.
Now we add the markers to the map. Each marker is created by clicking on the map pin, which is on the upper left of the map under the +/- icons. You will see a pin and click the map to land the pin.
Here are the markers laid out. Notice that the markers added are default.
The next step is to configure each marker with its linking item, and the correct icon and color. Let's do this for the Weeping Ash. Start by double clicking on the marker. You'll see the following dialog, which we've filled in.
This changes the marker style, by showing the leaf. Let's do the same for the other markers. This is what we now see.
Note that we don't require a page index to be associated with a marker. If there is an associated index then when the marker is pressed the popup information box will contain a link to the page, but the marker will popup without the link if there is no page.
Save and Publish
If you now save a backup, publish, and visit the published guide you can go to the Kibble Palace page and you'll notice that the Map icon in the topmost right part of the navigation bar is active. If you click on this icon you'll be taken to the map we've just created with the Kibble Palace icon selected and centered.
In the next lesson we'll look at importing images and audio files.