Leaflet.js is a very powerful javascript library for creating browser-based maps and mapping related experiments. Recently as I was getting ready to publish my latest SCHS Aerial map, I realized I needed to find some way to display the tiles from OpenAerialMap. OpenAerialMap hosts the Orthographic map and its tiles, but I didn’t just want to embed the page. Thus, my solution came about in the form of the TMS URL available on every OAM image. You can use this as a Leaflet TileLayer to display multiple tiled images at a time. Use the code below, replacing {Layer 2 url} with your TMS Url from openAerialMap.

map = L.map('map', {
    center: [33.1581,-117.2857],
    minZoom: 4,
    maxZoom: 20,
    zoom: 16,
    fullscreenControl: true,
    layers:[
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19,attribution: '© OpenStreetMap contributors'}),
        L.tileLayer("{Layer 2 url}")
    ]
});

That’s it! One simple extra line in your map instance is all that’s needed.

• Filed to:
• Code,
• Javascript,
• Leaflet,
• OpenAerialMap,
• OpenStreetMap