Modifying Basemaps

So far we have seen how to add/remove data layers, i.e. those layers that appear in the Map Layers menu component. To add/remove basemaps, you basically follow the same steps, the major difference being that we specify the type as basemap so that the application can store them seperately.

Finding Basemaps

There are a few companies that offer free-to-use basemaps around the web. Others offer basemaps with free tiers, and others offer basemaps only for money. In general, you can look try Mapbox, Esri, GIBS, Planet Labs, etc. and go from there. For this walkthrough, we've used Mapbox to create/serve some high resolution satellite imagery basemaps. If you would like use Mapbox layers in your own application, we ask that you please create your own account and use a different api key.

Adding Basemap Configs

This process is nearly identical to adding new data layers. Except that it's easier because by default, CMC is not designed to provide metadata or colorbars for basemaps (though in your own application you may want to extend CMC to provide these). So let's add three new basemap layers from Mapbox

Edit src/default-data/demo-default-data/layers.json and add the following layer configurations

{
    "layers": [
        ...
        {
            "id": "Mapbox_Streets_Satellite",
            "title": "Mapbox Streets-Satellite (Retina)",
            "type": "basemap",
            "thumbnailImage":
                "https://a.tiles.mapbox.com/v4/mapbox.streets-satellite/2/1/[email protected]?access_token=pk.eyJ1IjoiYWFyb25wbGF2ZSIsImEiOiJjamU0eDVqYnAxYTh0MzBycWl2dnpxdWFrIn0.JwpMMB2c-TpLxC7DXZzmUg",
            "handleAs": "xyz_raster",
            "updateParameters": { "time": false },
            "wmtsOptions": {
                "url":
                    "https://a.tiles.mapbox.com/v4/mapbox.streets-satellite/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiYWFyb25wbGF2ZSIsImEiOiJjamU0eDVqYnAxYTh0MzBycWl2dnpxdWFrIn0.JwpMMB2c-TpLxC7DXZzmUg",
                "projection": "EPSG:3857",
                "tileGrid": {
                    "minZoom": 0,
                    "maxZoom": 18,
                    "tileSize": 256
                }
            }
        },
        {
            "id": "Mapbox_Satellite_Retina",
            "title": "Mapbox Satellite (Retina)",
            "type": "basemap",
            "thumbnailImage":
                "https://a.tiles.mapbox.com/v4/mapbox.satellite/2/1/[email protected]?access_token=pk.eyJ1IjoiYWFyb25wbGF2ZSIsImEiOiJjamU0eDVqYnAxYTh0MzBycWl2dnpxdWFrIn0.JwpMMB2c-TpLxC7DXZzmUg",
            "handleAs": "xyz_raster",
            "updateParameters": { "time": false },
            "wmtsOptions": {
                "url":
                    "https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiYWFyb25wbGF2ZSIsImEiOiJjamU0eDVqYnAxYTh0MzBycWl2dnpxdWFrIn0.JwpMMB2c-TpLxC7DXZzmUg",
                "projection": "EPSG:3857",
                "layer": "Mapbox_Satellite_Retina",
                "tileGrid": {
                    "minZoom": 0,
                    "maxZoom": 19,
                    "tileSize": 256
                }
            }
        },
        {
            "id": "Mapbox_Satellite",
            "title": "Mapbox Satellite",
            "type": "basemap",
            "thumbnailImage":
                "https://a.tiles.mapbox.com/v4/mapbox.satellite/2/1/2.png?access_token=pk.eyJ1IjoiYWFyb25wbGF2ZSIsImEiOiJjamU0eDVqYnAxYTh0MzBycWl2dnpxdWFrIn0.JwpMMB2c-TpLxC7DXZzmUg",
            "handleAs": "xyz_raster",
            "updateParameters": { "time": false },
            "wmtsOptions": {
                "url":
                    "https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWFyb25wbGF2ZSIsImEiOiJjamU0eDVqYnAxYTh0MzBycWl2dnpxdWFrIn0.JwpMMB2c-TpLxC7DXZzmUg",
                "projection": "EPSG:3857",
                "layer": "Mapbox_Satellite",
                "tileGrid": {
                    "minZoom": 0,
                    "maxZoom": 19
                }
            }
        },
        ...
    ]
}

Notice that for these layers we must provide some wmts tiling information, and that we are setting them to not update with time (though that is by no means a requirement of basemaps).

You may also notice that the existing basemap configurations have not changed. In particular the ESRI_World_Imagery layer is still using EPSG:4326 as it's projection. That is ok because both Openalayers and Cesium can reproject raster tiles on the fly, they may not look pretty under scrutiny but at a macro level, they'll hold up.

Save your work and refresh your browser. Now under the basemap selector you should see three new Mapbox layers available for selection.