Step-6: Adding an orthophoto raster layer with roads, ocean and labels

Step-6: Adding a raster layer (orthophoto) with roads, ocean and labels

Introduction

This guide shows how to add a raster layer, in this case an orthophoto, to the map with roads, ocean and labels on top of the raster layer. An orthophoto, orthophotograph or orthoimage is an aerial photograph or satellite imagery.

A button toggles the visibility of an Orthophoto raster layer via function call.

Getting Started

This guide mainly involves 3 steps:

1. Adding a button
2. Adding a layer
3. Add an orthophoto raster layer.

1. Adding a button

The code block below adds a buttons on Viamap to toggle the raster layers on the map as shown below:

var addButton = function(text, clickfun, classes) {
    classes = classes || '';
    var link = document.createElement('a');
    link.textContent = text;
    link.href = '#';
    link.className = classes;
    link.onclick = clickfun;
    document.getElementsByClassName('buttons')[0].appendChild(link);

    return link;
}

2. Adding a Layer

As explained in step-2 a layer can be added on the map by using:

addLayer (layer, beforeId?)

A helper function is written to utilize the map.addLayer(layer, beforeId?) method which supports additional parameters, for example, a clickfun method which is used to toggle the visibility of the raster layer as shown below:

addLayer = function(layer_id, layer_def, insertafter, clickfun) {
    clickfun = clickfun || function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (map.getLayoutProperty(layer_id, 'visibility') === 'visible') {
            map.setLayoutProperty(layer_id, 'visibility', 'none');
            this.className = '';
        } else {
            this.className = 'active';
            map.setLayoutProperty(layer_id, 'visibility', 'visible');
        }
    }
    layer_def['id'] = layer_id;
    map.addLayer(layer_def, insertafter);
    return addButton(layer_id, clickfun, layer_def.layout['visibility'] == 'visible' ? 'active' : '');
}

Parameters:

NameDescription
layer_idLayer_id is the unique layer name, in this example Flyfoto is used as a layer_id.
layer_defThe layer definition basically is an object, please see Layer’s definition
insertafterThe ID of an existing layer to insert the new layer after. If this argument is omitted, the layer will be appended to the end of the layers array. 
clickfunA function that toggles the visibility of the layer

3. Adding an Orthophoto Raster Layer

For an orthophoto raster layer, Tiled sources must be used with their details specified in terms of the TileJSON specification. Make sure to set the "type": "raster" as shown in the code block below: 

var insertafter = "water_ocean",
    layer_id = "Flyfoto",
    layer_def = {
        "type": "raster",
        "source": {
            "type": "raster",
            "tiles": [
                "https://a.tile.viamap.net/tile/ortho//{z}/{x}/{y}/",
                "https://b.tile.viamap.net/tile/ortho//{z}/{x}/{y}/",
                "https://c.tile.viamap.net/tile/ortho//{z}/{x}/{y}/",
                "https://d.tile.viamap.net/tile/ortho//{z}/{x}/{y}/"
            ],
            "minzoom": 0,
            "maxzoom": 19,
            "tileSize": 256
        },
        "layout": {
            "visibility": "none"
        },
        "id": layer_id
    }

addLayer(layer_id, layer_def, insertafter);

Final Code:

Here is the final code that adds an orthophoto raster layer to the Viamap with roads, ocean and labels on top of the raster layer with a button to toggle the visibility of an orthophoto raster layer.

A working example can be seen here.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>Viamap vektordemo</title>

        <!-- add viamap bootstrap code -->
        <script src="./js/viamapstrap.js"></script>
        <style type="text/css">
            nav.buttons {
                background: #fff;
                position: absolute;
                z-index: 1;
                top: 10px;
                right: 10px;
                width: 120px;
                font-family: 'Open Sans', sans-serif;
            }

            .buttons a {
                font-size: 13px;
                color: #404040;
                display: block;
                margin: 0;
                padding: 0;
                padding: 10px;
                text-decoration: none;
                border-bottom: 1px solid rgba(0, 0, 0, 0.25);
                text-align: center;
            }

            .buttons a:last-child {
                border: none;
            }

            .buttons a:hover {
                background-color: #f8f8f8;
                color: #404040;
            }

            .buttons a.active {
                background-color: #3887be;
                color: #ffffff;
            }

            .buttons a.active:hover {
                background: #3074a4;
            }
        </style>
    </head>

    <body style="margin:0; padding:0;">
        <nav class="buttons"></nav>
        <div id='map' style="position:absolute; top:0; bottom:0; width:100%;"></div>
        <script>
            // the position for the marker

            vms.initmap({
                    container: 'map',
                    hash: false,
                })
                .then(function(map) {
                    // add some controls
                    map.addControl(new mapboxgl.NavigationControl(), 'top-left');


                    /* Define some helper functions for adding layers and inserting control buttons*/
                    var addButton = function(text, clickfun, classes) {
                            classes = classes || '';
                            var link = document.createElement('a');
                            link.textContent = text;
                            link.href = '#';
                            link.className = classes;
                            link.onclick = clickfun;
                            document.getElementsByClassName('buttons')[0].appendChild(link);

                            return link;
                        },
                        addLayer = function(layer_id, layer_def, insertafter, clickfun) {
                            clickfun = clickfun || function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                if (map.getLayoutProperty(layer_id, 'visibility') === 'visible') {
                                    map.setLayoutProperty(layer_id, 'visibility', 'none');
                                    this.className = '';
                                } else {
                                    this.className = 'active';
                                    map.setLayoutProperty(layer_id, 'visibility', 'visible');
                                }
                            }
                            layer_def['id'] = layer_id;
                            map.addLayer(layer_def, insertafter);
                            return addButton(layer_id, clickfun, layer_def.layout['visibility'] == 'visible' ? 'active' : '');
                        };


                    // add ortophoto layer
                    var insertafter = "water_ocean",
                        layer_id = "Flyfoto",
                        layer_def = {
                            "type": "raster",
                            "source": {
                                "type": "raster",
                                "tiles": [
                                    "https://a.tile.viamap.net/tile/ortho//{z}/{x}/{y}/",
                                    "https://b.tile.viamap.net/tile/ortho//{z}/{x}/{y}/",
                                    "https://c.tile.viamap.net/tile/ortho//{z}/{x}/{y}/",
                                    "https://d.tile.viamap.net/tile/ortho//{z}/{x}/{y}/"
                                ],
                                "minzoom": 0,
                                "maxzoom": 19,
                                "tileSize": 256
                            },
                            "layout": {
                                "visibility": "none"
                            },
                            "id": layer_id
                        }

                    addLayer(layer_id, layer_def, insertafter);



                });
        </script>
    </body>

</html>

Do you want to try Viamap? Download “starter kit