HomeMap 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.
Starting with a simple map. This uses the Standard Open Streetmap tiles. We've centred it on the Plexus Media office, switched on the Minimap and the Scale and added a marker in the center. We've also switched on a couple of links to other mapping systems.
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.