GeoJSON.io: Add an external tile layer (The hardish way)

Jump to bottom Edit New page

Ryan Cooper edited this page Sep 16, 2015 · 1 revision

GeoJSON.io has an API that allows you to access Leaflet methods for creating a more editing flexible interface. One of the greatest benefits here is being able to add tile layers beyond the four default ones. Let's add the 1855 map we've georeferenced.

Go to GeoJSON.io.
Open up your browser's developer tools

Chrome: Press F12
Firefox: Install Firebug and press F12
IE or Safari: Close your browser, install and open Chrome or Firefox

Navigate to the Console tab.
Open a new browser tab. Navigate to the export tab on the 1855 map's Mapwarper page

http://mapwarper.net/maps/10505#Export_tab.

Copy the URL for Tiles (Google/OSM scheme) option

http://mapwarper.net/maps/tile/10505/{z}/{x}/{y}.png

We might want to remove this tile layer at some point. Before we add the 1855 map, let's assign it to a variable so we can do that at some point.In your developer tools console, add the following and press Enter:

var lex1855 = L.tileLayer('http://mapwarper.net/maps/tile/10505/{z}/{x}/{y}.png')

Again in the developer tools console, add the lex1855 tile layer:

window.api.map.addLayer(lex1855)

The 1855 map should show up in your GeoJSON.io map. If you want to remove that layer, do the following:

window.api.map.removeLayer(lex1855)

Useful links