Adding the interactive map to a regular HTML page is quite straightforward. A few code lines in the <head> section are needed and then a few more in the <body> where you want to show the map.
As a minimum, add the following to the <head> section:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://caruteifi.cymru/leaflet/Control.FullScreen.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://caruteifi.cymru/leaflet/Control.FullScreen.js"></script>You may optionally wish to add some CSS styling such as:
<style>
.leaflet-popup-content {font-size: 13px;margin:10px 20px 8px 10px;}
.leaflet-control-layers label {font-size:1.1em;}
</style>Styling can change the appearance of some elements on the map, but is entirely your choice and does not affect its basic functioning.
Now add the required lines to the <body> section:
The map needs a place on the page, this is defined by a simple <div> with an id of “map”. It can be located and sized to suit your page. For example:
<div id="map" style="height: calc(100vh - 1rem);border:solid 1px black;margin:2px 4px;"></div>The Leafet script files follow the div statement. There are usually several files for the map layers. The first one is essential, whereas the other three 3 could be dropped but features will not appear and the standard layer menu options would not all work.
<script src="https://caruteifi.cymru/leaflet/map-energydevelopments_wales.js"></script>
<script src="https://caruteifi.cymru/leaflet/map-energydevelopments_wales_solar.js"></script>
<script src="https://caruteifi.cymru/leaflet/map-energydevelopments_wales_turbines.js"></script>
<script src="https://caruteifi.cymru/leaflet/map-energydevelopments_wales_lines.js"></script>Here is a really minimal example of a pure HTML page with the map (opens in new tab) – https://deeproot.uk/map-example.html
Adding the map on a WordPress page or blog post
Setting up the map under WordPress is essentially the same as for normal HTML, but because WP manages the page content a method to amend the <head> section is needed. This can be done via a plugin, for example the well known WPCode. There are other plugin alternatives and some themes provide the function, any that enable code lines to be inserted into the <head> section should work.
For the example below, the code is inserted by the WPCode plugin and enabled for this page only. The required code lines are exactly the same as above for an HTML page.
For the body code, the map div and scripts, as above, are directly entered in the page by using the WP code editor option. Simple!
A similar, equivalent method may work for other content management systems.
Information presented on this map is not guaranteed as accurate, but the features are intended to give a reasonably good idea of location. With that in mind, any part of the map may be reproduced for non-commercial purposes. The map uses the open source Leaflet JS library and is produced by Deeproot Software, released under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 (CC BY-NC-SA 4.0) licence.