Step-7: Adding a raster layer (cadestrals)

Step-7: Adding a raster layer (cadestrals)

Introduction

This guide shows how to add a raster layer, in this case a cadestral, to the map on top of the raster layer. A cadastral map shows the boundaries and ownership of land parcels. It may show additional details, such as survey district names, unique identifying numbers for parcels. 

Two buttons are added to toggle the visibility of raster layers.

Getting Started

This guide mainly involves 3 steps:

1. Adding toggle buttons
2. Adding a layer
3. Add a Cadastral raster layer.

1. Adding toggle buttons

The code block below adds two buttons on Viamap to toggle the visibility of the raster layers.

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 a Cadastral Raster layer

For a cadastral 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: 

insertafter = "housenumber",
    layer_id = "Matrikler",
    layer_def = {
        "type": "raster",
        "source": {
            "type": "raster",
            "tiles": [
                "https://a.tile.viamap.net/tile/matrikel/{z}/{x}/{y}/?token=" + tkn + "&linewidth=2&linecolor=red&imgformat=png",
                "https://b.tile.viamap.net/tile/matrikel/{z}/{x}/{y}/?token=" + tkn + "&linewidth=2&linecolor=red&imgformat=png",
                "https://c.tile.viamap.net/tile/matrikel/{z}/{x}/{y}/?token=" + tkn + "&linewidth=2&linecolor=red&imgformat=png",
                "https://d.tile.viamap.net/tile/matrikel/{z}/{x}/{y}/?token=" + tkn + "&linewidth=2&linecolor=red&imgformat=png"
            ],
            "minzoom": 15,
            "maxzoom": 20,
            "tileSize": 256
        },
        "layout": {
            "visibility": "none"
        },
        "id": layer_id,

        "paint": {
            "raster-opacity": {
                "base": 1.0,
                "stops": [
                    [
                        15.0,
                        0.0
                    ],
                    [
                        17.05,
                        1.0
                    ]
                ]
            }
        }
    }
addLayer(layer_id, layer_def, insertafter).click();

Final Code

Here is the final code that adds cadastral raster layers to the Viamap with two buttons to toggle the visibility of raster layers.

A working example can be seen here.

<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
        var lnglat = [9.912028, 57.043528],
            zoom = 15.6;

        vms.initmap({
                container: 'map',
                hash: true,
                'center': lnglat,
                'zoom': zoom
            })
            .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
                    }

                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);
                var tkn = "eyJkb21haW5wcmVmaXgiOiAiYm9saWdzaWRlbiJ9.T2rnrL6MBmX3G19hYggJ6ZEiKSONy20bo06MuKM8u0HSK6B6T7MhwYiLES/tBjcTHjZEh5R8N54ojFChoTKeMw";
                insertafter = "housenumber",
                    layer_id = "Matrikler",
                    layer_def = {
                        "type": "raster",
                        "source": {
                            "type": "raster",
                            "tiles": [
                                "https://a.tile.viamap.net/tile/matrikel/{z}/{x}/{y}/?token=" + tkn + "&linewidth=2&linecolor=red&imgformat=png",
                                "https://b.tile.viamap.net/tile/matrikel/{z}/{x}/{y}/?token=" + tkn + "&linewidth=2&linecolor=red&imgformat=png",
                                "https://c.tile.viamap.net/tile/matrikel/{z}/{x}/{y}/?token=" + tkn + "&linewidth=2&linecolor=red&imgformat=png",
                                "https://d.tile.viamap.net/tile/matrikel/{z}/{x}/{y}/?token=" + tkn + "&linewidth=2&linecolor=red&imgformat=png"
                            ],
                            "minzoom": 15,
                            "maxzoom": 20,
                            "tileSize": 256
                        },
                        "layout": {
                            "visibility": "none"
                        },
                        "id": layer_id,

                        "paint": {
                            "raster-opacity": {
                                "base": 1.0,
                                "stops": [
                                    [
                                        15.0,
                                        0.0
                                    ],
                                    [
                                        17.05,
                                        1.0
                                    ]
                                ]
                            }
                        }
                    }
                addLayer(layer_id, layer_def, insertafter).click();




            });
    </script>
</body>

Do you want to try Viamap? Download “starter kit