Home " Private document " Interactive maps for gatherings

Interactive maps for gatherings

Contents

In the articles WordPress For regional gatherings, assemblies or holidays, it is often appropriate to include a map showing the places where the gatherings, holidays, etc. will take place. On the centcols.org website, interactive maps can be integrated into articles. WordPress using the extension Leaflet Map. This extension works by short codes (short codes). This manual describes the main options available. For further information, please refer to the extension documentation or its site on GitHub.

The extension Leaflet Map is limited to a single base map. OpenStreetMap has been chosen for our site, so it can be used for all countries. For the publication of cycling routes, there is also a possibility of using this extension, but it is advisable to use the club's own system for this, ccTours.

Block for short codes

To write articles WordPressdifferent types of blocks are used. When you place the mouse under an existing block (for example a title or a paragraph), a blue line with a + symbol appears to add a block. You then need to choose browse all then in the widgets select short code (symbolised [/]). This is how such a block appears:

It is therefore in this block that you need to indicate how the map should be displayed. As this is short code, the results are not directly visible. To do this, you need to save the draft and then display the preview. But one advantage of short codes is that they are easy to copy and can then be reused, with a few adaptations, on other articles. You can also copy the entire block, which avoids having to search for the right type of block from the long list of those available.

The map

A typical short code to define an interactive geographical map looks like this:

[leaflet-map lat=45.09 lng=5.85 zoom=12]

In this example, we define the coordinates of the centre of the map (latitude, longitude, in degrees WGS 84) and the initial zoom factor. Another option is to let the system adapt the position and zoom according to the markers defined (see below how to define markers). This method is only recommended if you really have several markers. In this case, you can simply define the map in this way:

[leaflet-map fitbounds]

It may be useful to specify the size of the map on the screen. For the width, you can indicate either the size in pixels or the proportion in % in relation to the width of the item. For the height, the number of pixels is always used.

[leaflet-map fitbounds width=80% height=500]

However, the default values are often adequate and these indications can be omitted. On the centcols.org site, the default values are 100% in width and 600 px in height (values defined in the administration of the extension Leaflet Map).

Markers

In principle, any image can be added to a map as a marker. For each marker, you need to define which image to use and the coordinates at which to place it. You also need to specify the size of the image, a text (a caption) and where to place the caption in relation to the image. Here's an example:

[leaflet-marker lat=45.0875 lng=5.84895 iconurl=/res/lib/leaflet/images/collar.png iconsize=24,72 popupanchor=0,-32]Col Luitel[/leaflet-marker]

Items in bold are those that will change from one marker to the next. The rest can normally be used as is. As a series of markers has been prepared for the centcols.org site, the easiest thing to do is to use them. Simply replace the word 'col' above with the name of another marker. Here they are, in alphabetical order:

Technical note: in order for these markers to be displayed with their tips on the desired coordinates, they have in fact been drawn with a transparent bottom part. This is why the 24 x 72 px size indicated in the short code is larger than what you see on screen (24 x 38 px). The tip of the marker is therefore in the centre of the image and appears at the required coordinates.