A couple of people have asked me how to use Mapio Cymru as a base map on their websites, apps, and other systems. This is a good way of providing visitors to your website with a map of Wales in the Welsh language.
In other words you can show our map tiles, which are the PNG images available through openstreetmap.cymru.
Then you can do whatever your system allows such as panning, zooming, and perhaps putting pins, shapes, images and other things on the map.
Embed
Before we press ahead, everything that follows is aimed at somebody who is comfortable coding, maintaining a system, or using GIS software.
If you DON’T want to work directly with the base map it’s possible to embed Mapio Cymru on a website. This is probably the fastest and simplest method. It’s very similar to how you would embed video players etc (using an iframe).
Go to openstreetmap.cymru and click Rhannu/Share for details on how to do this. You can get an HTML embed code or alternatively a direct link to a specific view of the map.
Which systems?
The rest of this blog post will describe how to use Mapio Cymru as a base map, for people who want to be a bit more technical.
There are quite a few systems that offer to set a base map of your choice, such as things that run Leaflet.js, e.g. Overpass Turbo.
For example there are a few WordPress plugins that allow you to show maps on your website – such as Leaflet Maps Marker, WP Go Maps, and others.
If you have the skills you could create a website from scratch with Leaflet.js and use Mapio Cymru as a base map. Unfortunately the details on how to do this go beyond this little guide today, but there are guides on the web!
There is also desktop software that uses base maps of your choice such as QGIS.
For those interested Mapio Cymru’s CORS headers now allow direct use of tiles. Please note that some content management systems may show a security warning about cross-site scripting.
The all-important settings
Use the address below as the base map:
https://openstreetmap.cymru/osm_tiles/{z}/{x}/{y}.png
Also if you have to give levels of zoom, put 3 as the minimum and 16 as the maximum.
Here is an attribution or credit you should give, to fulfil the open licensing conditions of OpenStreetMap data. Here’s the HTML version:
Defnyddiwch <a href=”https://www.openstreetmap.cymru” target=”_blank”>openstreetmap.cymru</a>. Data ar y map Ⓗ Cyfranwyr <a href=”https://openstreetmap.org” target=”_blank”>osm.org</a>
Alternatively here’s the plain text version:
Defnyddiwch openstreetmap.cymru. Data ar y map © Cyfranwyr osm.org
Get in touch
If you have managed to get the map on your website or system, please leave a comment with the method you used – and a link to the specific page on your website if possible.
Terms
Please be respectful and reasonable with your use of the Mapio Cymru server. Get in touch if you want to discuss ‘heavy’ use, especially if you are an organisation, service, or project of significant size.
We’ll have to review how things go if demand grows.
