none
Setting the zIndex on a Layer of Polygons No Longer Redraws the Map RRS feed

  • Question

  • Hi,

    An important feature of my Bing Maps application is to allow users to re-order layers consisting of Polygons so that they can easily select an object (e.g. move a layer of counties above a layer of states in order to be able select a county).

    This is accomplished by calling setZIndex() on a layer. When calling this function, the map used to appropriately reflect the change in a layer's zIndex. Now the change does not appear on the map until I turn the visibility of the layer off and then on (moving or zooming the map makes no difference).

    You can replicate the issue with the simple code below. It creates three layers, each with a different colored polygon. If you click the "Move Red to Bottom" button (which sets the zIndex of the layer with the red polygon to 1), you'll notice the map does not change (i.e. the red polygon still appears on top). If you then click the "Toggle Red Visible" button twice, you will see the map then displays the red polygon correctly at the bottom of the three layers. When changing the zIndex of a layer of polygons, this used to update the map without having to change the visibililty of the layer.

    <!DOCTYPE html>
    <html>
    <head>
        <title>setZIndex Issue</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="myMap" style=";width:1000px;height:800px;margin-bottom:10px;"></div>
        <button type="button" onclick="moveBottom();">Move Red to Bottom</button>
        <button type="button" onclick="moveTop();">Move Red to Top</button>
        <button type="button" onclick="toggleVisibility();">Toggle Red Visible</button>

        <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=getMap'  async defer></script>
        <script type='text/javascript'>

        var map, layerRed, layerBlue, layerGreen,
            redGeoJson = {
                "type": "Polygon",
                "coordinates": [[
                        [-122.12901, 47.64178],
                        [-122.12901, 47.64226],
                        [-122.12771, 47.64226],
                        [-122.12771, 47.64178],
                        [-122.12901, 47.64178]
                ]]
            },
            greenGeoJson = {
                "type": "Polygon",
                "coordinates": [[
                        [-122.12897, 47.64174],
                        [-122.12897, 47.64222],
                        [-122.12767, 47.64222],
                        [-122.12767, 47.64174],
                        [-122.12897, 47.64174]
                ]]
            },
            blueGeoJson = {
                "type": "Polygon",
                "coordinates": [[
                        [-122.12905, 47.64182],
                        [-122.12905, 47.64230],
                        [-122.12775, 47.64230],
                        [-122.12775, 47.64182],
                        [-122.12905, 47.64182]
                ]]
            };

        function getMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key',
                center: new Microsoft.Maps.Location(47.642, -122.128),
                zoom: 18
            });

    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
                
                //Create layers.
                layerRed = new Microsoft.Maps.Layer();
                layerRed.setZIndex(1000);
                layerRed.setPrimitives(
                    Microsoft.Maps.GeoJson.read(redGeoJson, {
                        polygonOptions: {
                            fillColor: '#ff0000'
                        }
                    })
                );

                layerGreen = new Microsoft.Maps.Layer();
                layerGreen.setZIndex(20);
                layerGreen.setPrimitives(
                    Microsoft.Maps.GeoJson.read(greenGeoJson, {
                        polygonOptions: {
                            fillColor: '#00ff00'
                        }
                    })
                );

                layerBlue = new Microsoft.Maps.Layer();
        layerBlue.setZIndex(10);
                layerBlue.setPrimitives(
                    Microsoft.Maps.GeoJson.read(blueGeoJson, {
                        polygonOptions: {
                            fillColor: '#0000ff'
                        }
                    })
                );
        
                //Add layers to map.
                map.layers.insertAll( [layerRed, layerBlue, layerGreen] );

            });
        }

        function moveTop() {
    layerRed.setZIndex(1000);
        }

        function moveBottom() {
    layerRed.setZIndex(1);
        }

        function toggleVisibility() {
            layerRed.setVisible(!layerRed.getVisible());
        }
        </script>
    </body>
    </html>
    Saturday, March 14, 2020 4:18 PM

Answers

  • Thanks for reporting this issue. We have a fix for it and will be rolling it out this week. 

    • Marked as answer by Ken C Bowman Friday, March 20, 2020 2:10 PM
    Tuesday, March 17, 2020 9:28 PM

All replies