Changing color of a ColorLayer not visible depending on zoom position #1168

moutz · 2019-06-28T10:14:30Z

Hello,

using last version of Itown.

I try to change the color of a ColorLayer after a click event. But when I do it the color is not updating for some zoom positions.
I made an exemple to reproduce this behaviour based en the globe_vector.html example.

<html>
    <head>
        <title>Itowns - Globe + color layers from vector data</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/loading_screen.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/GUI/dat.gui/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv" class="viewer"></div>
        <div style="position: absolute; top: 0; right: 0;">
            <button onclick="colorAriege()">Color Ariege</button>
        </div>
        <script src="js/GUI/GuiTools.js"></script>
        <script src="../dist/itowns.js"></script>
        <script src="js/loading_screen.js"></script>
        <script src="js/FeatureToolTip.js"></script>
        <script type="text/javascript">
            // # Simple Globe viewer
            /* global itowns, setupLoadingScreen, GuiTools, ToolTip */

            // Define initial camera position
            var positionOnGlobe = { longitude: 3.5, latitude: 44, altitude: 1000000 };

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            var viewerDiv = document.getElementById('viewerDiv');

            // Instanciate iTowns GlobeView*
            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
            var menuGlobe = new GuiTools('menuDiv', view);

            setupLoadingScreen(viewerDiv, view);

            // Add one imagery layer to the scene
            // This layer is defined in a json file but it could be defined as a plain js
            // object. See Layer* for more info.
            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ColorLayer('Ortho', config);
                view.addLayer(layer).then(function _() {
                    menuGlobe.addLayerGUI.bind(menuGlobe);
                    itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
                });
            });
            // Add two elevation layers.
            // These will deform iTowns globe geometry to represent terrain elevation.
            function addElevationLayerFromConfig(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ElevationLayer(config.id, config);
                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
            }
            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);

            var promises = [];

            // Fetch, Parse and Convert by iTowns
            var kmlSource = new itowns.FileSource({
                url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/croquis.kml',
                projection: 'EPSG:4326',
                fetcher: itowns.Fetcher.xml,
                parser: itowns.KMLParser.parse,
            });

            var kmlLayer = new itowns.ColorLayer('Kml', {
                name: 'kml',
                transparent: true,
                source: kmlSource,
            });

            promises.push(view.addLayer(kmlLayer));

            // Parse and Convert by iTowns
            promises.push(itowns.Fetcher.xml('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx')
                .then(function _(gpx) {
                    var gpxSource = new itowns.FileSource({
                        fetchedData: gpx,
                        projection: 'EPSG:4326',
                        parser: itowns.GpxParser.parse,
                    });

                    var gpxLayer = new itowns.ColorLayer('Gpx', {
                        name: 'Ultra 2009',
                        transparent: true,
                        source: gpxSource,
                        style: {
                            stroke: {
                                color: 'red',
                            },
                            point: {
                                color: 'white',
                                line: 'red',
                            }
                        },
                    });

                    return view.addLayer(gpxLayer);
                }));

            // Convert by iTowns
            promises.push(itowns.Fetcher.json('https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/09-ariege/departement-09-ariege.geojson')
                .then(function _(geojson) {
                    return itowns.GeoJsonParser.parse(geojson, {
                        buildExtent: true,
                        crsIn: 'EPSG:4326',
                        crsOut: view.tileLayer.extent.crs,
                        mergeFeatures: true,
                        withNormal: false,
                        withAltitude: false,
                    });
                }).then(function _(parsedData) {
                    var ariegeSource = new itowns.FileSource({
                        parsedData,
                    });

                    var ariegeLayer = new itowns.ColorLayer('ariege', {
                        name: 'ariege',
                        transparent: true,
                        style: {
                            fill: {
                              color: 'orange',
                              opacity: 0.5,
                            },
                            stroke: {
                                color:'white',
                            },
                        },
                        source: ariegeSource,
                    });

                    return view.addLayer(ariegeLayer);
                }));

            // Listen for globe full initialisation event
            view.addEventListener(itowns.VIEW_EVENTS.LAYERS_INITIALIZED, function _() {
                Promise.all(promises).then(new ToolTip(view));
            });

            function colorAriege(){

                var layer = view.getLayerById('ariege');

                layer.style.stroke.color = 'red';
                layer.style.fill.color = 'blue';

                view.notifyChange();

            }


        </script>
    </body>
</html>

Try to zoom in/zoom out, you'll see that the Ariege layer stay yellow some times and take the new colour in some other zoom position.
Is this the right method to do something like this ?

m.

zarov · 2019-06-28T12:17:09Z

Hi, this is totally normal as we don't rasterize a layer everytime we display it: we raster it one time only, and then it goes in the Cache.
However, it could be useful (like in your case) to be able to force the update of the rasterization. I see where we could add something to solve that, so maybe we can have this feature soon.

zarov added the enhancement 🚀 label Jun 28, 2019

zarov added this to the 2.12.0 milestone Jun 28, 2019

gchoqueux modified the milestones: 2.12.0, 2.13.0 Jul 1, 2019

gchoqueux modified the milestones: 2.13.0, 2.14.0 Jul 31, 2019

gchoqueux modified the milestones: 2.14.0, 2.15.0 Aug 27, 2019

gchoqueux modified the milestones: 2.15.0, 2.xx.x Oct 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Changing color of a ColorLayer not visible depending on zoom position #1168

Changing color of a ColorLayer not visible depending on zoom position #1168

moutz commented Jun 28, 2019 •

edited by zarov

Loading

zarov commented Jun 28, 2019

Changing color of a ColorLayer not visible depending on zoom position #1168

Changing color of a ColorLayer not visible depending on zoom position #1168

Comments

moutz commented Jun 28, 2019 • edited by zarov Loading

zarov commented Jun 28, 2019

moutz commented Jun 28, 2019 •

edited by zarov

Loading