Displaying OpenAerialMap Tiles Using Leaflet.js

April 29th, 2020

Freshly created orthographic map from OAM displayed on my own leaflet map.

A second tile layer featuring OAM tiles over OSM tiles.

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,
        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.


Leave a Reply

Your email address will not be published. Required fields are marked *