How to Use Stadia Maps' Raster Tiles with a LeafletJS plugin for Wordpress

This document will walk you through the process of setting up the Leaflet Map plugin on your Wordpress web site, replacing the default map tiles to Stadia Maps raster tiles.

Note: if you haven't read our getting started page already, take a look now to ensure your account is correctly configured to enable your Wordpress domain.

Install the Leaflet Map Plugin

You can download and install the latest version of Leaflet Map from the Wordpress web site or install it via your plugin manager.

After installation, make sure the plugin is activated.

Configure Leaflet Map

Once the Leaflet Map plugin is installed and activated, you will need to update a couple of the configuration settings.

From your Wordpress Plugin page, click on the Settings link for Leaflet Map, and then update the following options to the new values listed below:

Map Tile URL

https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png

Note: alidade_smooth is only an example. You can use any of our themes by replacing alidade_smooth as described on our themes page.

Attribution

&copy <a href="https://stadiamaps.com/">Stadia Maps</a>; &copy <a href="https://openmaptiles.org/">OpenMapTiles</a>; &copy <a href="http://openstreetmap.org">OpenStreetMap</a> contributors

Once these adjustments have been made, click Save Changes.

Example

To test your Leaflet Map plugin, create a new Page/Post, and paste the following shortcodes:

[leaflet-map height=300 width=400 lat=50.3340981 lng=6.9426625 zoom=13]

[leaflet-marker lat=50.3340981 lng=6.9426625]Nürburgring:  Motor racing
complex with 1930s & Grand Prix circuits, for competition & driving
experience program.[/leaflet-marker]

This will create a map and add a point to the Nürburgring. If everything is configured correctly, when you Preview your entry, you will see the following map on your Wordpress site:

Leaflet Map Screenshot 0

Now you are all set! You can modify the example [leaflet-map] and [leaflet-marker] shortcodes for your own needs, but you are now incorporating Stadia Maps raster tiles instead of the default.

Leaflet Map Plugin Reference

A full reference of the Leaflet Map plugin can be found on their Github page.