Map Mode

Grey Scale

To get a grey scale map , follow the below steps:

  • Create a new instance of the class GCUI.Map and push a new instance of the class ol.View in it. 
var map = new GCUI.Map('mapDiv', {
        layers: [],
        view: new ol.View({
            center: center,
            zoom: zoom,
            projection: projection
        }),
        zoom: true
    });
  • Create a new instance of the class ol.source.Raster and pass the map source and play around the pixel operation to convert it into grey scale. 
var rasterSource = new ol.source.Raster({
sources: [
                  // original source here, e.g. ol.source.WMTS
                  gcLayer.getSource()
],
operation: (pixels, data) => {
        var pixel = pixels[0];
        var lightness = (pixel[0] * 0.3 + pixel[1] * 0.59 + pixel[2] * 0.11);
        return [lightness, lightness, lightness, pixel[3]];
}
});

HTML  

<div id="mapDiv1" style="height:300px"></div>

JavaScript  

function createMap(center, zoom, projection) {
         return new GCUI.Map('mapDiv1', {
        layers: [],
        view: new ol.View({
            center: center,
            zoom: zoom,
            projection: projection
        }),
        zoom: true
    });
}
var map = createMap([261108, 6251020], 6);

if (map) {
var gcLayer = new GCUI.Layer.GeoConcept('GC layer',
        'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
        {
                layer:'STANDARD',
                crossDomain: "Anonymous"
        });
gcLayer.on('change:initialized', function() {
        var rasterSource = new ol.source.Raster({
                sources: [
                                  // original source here, e.g. ol.source.WMTS
                                  gcLayer.getSource()
                ],
                operation: (pixels, data) => {
                        var pixel = pixels[0];
                        var lightness = (pixel[0] * 0.3 + pixel[1] * 0.59 + pixel[2] * 0.11);
                        return [lightness, lightness, lightness, pixel[3]];
                }
        });
        var raster = new ol.layer.Image({
                source: rasterSource,
                name: "Source Raster (Greyscale)"
        });
        raster.setMap(map);
});
        }

Night mode

To get a night mode map , follow the below steps:

  • Create a new instance of the class GCUI.Map and push a new instance of the class ol.View in it. 
var map = new GCUI.Map('mapDiv', {
        layers: [],
        view: new ol.View({
            center: center,
            zoom: zoom,
            projection: projection
        }),
        zoom: true
    });
  • Create a new instance of the class ol.source.Raster and pass the map source and play around the pixel operation to convert it into night mode. 
var rasterSource = new ol.source.Raster({
sources: [
                  // original source here, e.g. ol.source.WMTS
                  gcLayer.getSource()
],
operation: (pixels, data) => {
        var pixel = pixels[0];
        var lightness = (255 - pixel[0], 255 - pixel[1], 255 - pixel[2]);
        return [lightness, lightness, lightness, pixel[3]];
}
});

HTML  

<div id="mapDiv2" style="height:300px"></div>

JavaScript  

function createMap(center, zoom, projection) {
         return new GCUI.Map('mapDiv2', {
        layers: [],
        view: new ol.View({
            center: center,
            zoom: zoom,
            projection: projection
        }),
        zoom: true
    });
}
var map = createMap([261108, 6251020], 6);

if (map) {
var gcLayer = new GCUI.Layer.GeoConcept('GC layer',
        'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
        {
                layer:'STANDARD',
                crossDomain: "Anonymous"
        });
gcLayer.on('change:initialized', function() {
        var rasterSource = new ol.source.Raster({
                sources: [
                                  // original source here, e.g. ol.source.WMTS
                                  gcLayer.getSource()
                ],
                operation: (pixels, data) => {
                        var pixel = pixels[0];
                        var lightness = (255 - pixel[0], 255 - pixel[1], 255 - pixel[2]);
                        return [lightness, lightness, lightness, pixel[3]];
                }
        });
        var raster = new ol.layer.Image({
                source: rasterSource,
                name: "Source Raster (Night mode)"
        });
        raster.setMap(map);
});
        }

Prev  Up  Next
  Home