Cog Icon signifying link to Admin page

Built on Spanglefish 3

@Spanglefish Youtube

Spanglefish 3 Manual

Map Examples

The OpenStreetMap block type allows you to add a map to your page. You can add more than one map block to a page if you wish. There are a host of different settings allowing you to do various things with these maps.

This map is centred on Mount Everest,uses the Terrain Map tiles and can't be zoomed or scrolled by the user.

This uses the Satellite image tiles. We've then added the following Additional Code to draw a box around Sardinia and a line joining Italy's 3 volcanoes.

var latlngs = [[41.3, 7.9],[38.5, 7.9],[38.5, 10],[41.3, 10]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
var latlngs2 = [[40.82, 14.42],[38.79,15.19],[37.75,14.98]];
var polyline = L.Polyline(latlngs2, {color: 'yellow'}).addTo(map);

The Leaflet documentation explaining how to draw polygons etc is available here.

Adding a Route to a Map

Suppose you want to add a walking route or something like that to a map. First add the map block and then edit the map settings. Size and centre the map so it shows all of the region you're interested in and save it.

Now edit the map settings again. At the bottom of the page you'll see an option called 'Additional Code'. If you know what you're doing you can add all sorts of stuff here, but assuming you don't and you just want to draw a line or shape, click the 'helper' link which will open in a new tab. Now click the Draw on Map > Continue button. You'll find some tools which will allow you to draw on the map and which will then provide you with code to place in the Additional Code box.

A Directory Map block links a map to a Directory block which can be on the same page or elsewhere in your website. This map is linked to a directory of Scottish Premier League team grounds. In this case the map automatically centres and zooms itself to show all the markers.

Site Search