search

Leaflet / Leaflet.VectorGrid

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0
598 stars 194 forks source link

Issues with base layers and VectorGrid #154

Open soli004 opened 6 years ago

soli004 commented 6 years ago

Hello, I have problems with my polygon layers not showing up when changing base layers. I can se the polygon layers flashing up when I change base layer, it seem like it falls behind the base layer and not on top as it should. There is no problem with my circleMarkers they are always "on top" the only difference is that I am not using vectorGrid for the markers. If I remove all base layers I can see the polygons but then of course with no base map (seems base maps is hiding the polygon layers)... What causes this and how to solve it? I use the Layer Control Tree to activate layers ( I have also tried without using the Layer.Control.Tree plugin), here is part of the code... thanks

<!DOCTYPE html>
<html lang="sv">
<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>circleMarker and Polygons</title>

    <link rel="stylesheet" type="text/css" href="css/L.Control.Layers.Tree.css">
    <link rel="stylesheet" href="libs/leaflet.css" />

    <script type="text/javascript" src="libs/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@1.3.0/dist/Leaflet.VectorGrid.js"></script>
    <script src="src/L.Control.Layers.Tree.js"></script>

</head>
<body>
    <div id="map" style="height: 800px; border: 1px solid #ccc"></div>
 <script>

        var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
        { attribution: '© OpenStreetMap contributors'}
        );

        var osm_bw = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', 
        { attribution: '© OpenStreetMap contributors'}
        );

        var osm_bw2 = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', 
        { attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'}
        );

map = new L.Map('map', {center: new L.LatLng(59.5, 14.5), zoom: 5});
drawnItems = L.featureGroup().addTo(map);

var baseTree = {
    label: '<b>Base layers</b>',
    children: [
                { label: 'OpenStreetMap', layer: osm.addTo(map) },
                { label: 'OpenStreetMap v1 B/W', layer: osm_bw },
                { label: 'OpenStreetMap v2 B/W', layer: osm_bw2 },
            ]
        };
var ctl = L.control.layers.tree(baseTree);
ctl.addTo(map);

var maplayers = {
    label: '<b>Show & Hide layers</b>',
    children: [
        { 
    label: '<b>Draw layers</b>',
            children: [
                { label: 'Drawing objects', layer: drawnItems },
            ]
        },
        {
    label: '<b>Pointlayer</b>',
    children: [
        {
    label: '<b>SCB Tatorter</b>',
            children: [
                { label: 'Tatort <= 2000', layer: tatort_2000 },
                { label: 'Tatort 2000 to 5000', layer: tatort_two2five },
                { label: 'Tatort 5000 to 10000', layer: tatort_five2ten },
                { label: 'Tatort 10000 to 20000', layer: tatort_ten2twenty },
                { label: 'Tatort 20000 to 30000', layer: tatort_twenty2thirty },
                { label: 'Tatort 30000 to 50000', layer: tatort_thirty2fifty },
                { label: 'Tatort 50000 to 100000', layer: tatort_fifty2hundred },
                { label: 'Tatort >=100000', layer: tatort_large },
            ]
        },
        {
    label: '<b>Places</b>',
                        children: [
                        { label: 'Terminals', layer: term },
                        { label: 'Terminals2', layer: term two },
                        { label: 'HUB', layer: hub },
                        { label: 'depot', layer: dep },
                        { label: 'hangar', layer: hang },
                        { label: 'garage', layer: gar },
                        { label: 'customers', layer: just },
                    ]
                },
                {
    label: '<b>data</b>',
                    children: [
                        { label: 'center', layer: cent },
                        { label: 'delivery', layer: del },
                        { label: 'services', layer: serv },
                    ]
                },
                ]
        },
        {
    label: '<b>Polygonlayer</b>', // Polygons with vectorGrid
    children: [
        {
     label: '<b>Areas</b>',
            children: [
                { label: 'restricted', layer: rest },
                { label: 'parks', layer: park },
                { label: 'lakes', layer: lakes },
                { label: 'forrest', layer: forrest },
            ]
        },
        {
            label: '<b>Production areas</b>',
                        children: [
                        { label: 'Region', layer: reg_omr },
                        { label: 'Terminal', layer: term_omr },
                        { label: 'Building', layer: build_omr },
                    ]
                },
                {
                    label: '<b>Custom areas</b>',
                    children: [
                        { label: 'Custom', layer: cust_omr },
                    ]
                },
               {
    label: '<b>SCB City Areas</b>',
                children: [
                    { label: 'City areas', layer: city_omr },
                    ]
                },
            ]
        },
    ]};

ctl.setOverlayTree(maplayers).collapseTree(true).expandSelected(true);
chriszrc commented 6 years ago

I'm having this problem too, although I haven't ruled out that maybe I'm not doing something right, but I don't have that issue with other layers (that aren't vectorgrids), so it does seem like this is a vectorgrid problem...

tomchadwin commented 6 years ago

Have you tried explicitly adding the different layers to different map panes?

chriszrc commented 6 years ago

No I haven't, I just add it to the map like every other layer. Is there a pane you would suggest?

On Tue, Apr 17, 2018 at 2:08 PM, Tom Chadwin notifications@github.com wrote:

Have you tried explicitly adding the different layers to different map panes?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Leaflet/Leaflet.VectorGrid/issues/154#issuecomment-382088661, or mute the thread https://github.com/notifications/unsubscribe-auth/AYgWKQpsQMg9xIb1-X96PilhU6pf45l5ks5tpi-VgaJpZM4SvaBS .

-- -- Chris Marx ZevRoss - Know Your Data Data Science & Spatial Analysis New website: www.zevross.com Ithaca, NY

tomchadwin commented 6 years ago

No, I don't mean you should do it in production without a reason to. I just thought it would be useful to see if placing each in their own pane is a workaround, and might help debugging this issue.

soli004 commented 6 years ago

Kind of happy that others seem this problem as well, felt a bit alone here. When using vectorgrid I use only one basemap as that work for the moment waiting for an solution, if I apply the second basemap the problems get back... I have no idea what causes this, it happens on Chrome and Safari

chriszrc commented 6 years ago

Yeah same here, with one basemap I was fine, adding in a second (satellite in my case), I got the problem-

On Tue, Apr 17, 2018 at 3:20 PM, soli004 notifications@github.com wrote:

Kind of happy that others seem this problem as well, felt a bit alone here. When using vectorgrid I use only one basemap as that work for the moment waiting for an solution, if I apply the second basemap the problems get back... I have no idea what causes this, it happens on Chrome and Safari

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Leaflet/Leaflet.VectorGrid/issues/154#issuecomment-382110907, or mute the thread https://github.com/notifications/unsubscribe-auth/AYgWKSfwvA9_kG65PDNXCsFjPA_oiDp2ks5tpkCZgaJpZM4SvaBS .

-- -- Chris Marx ZevRoss - Know Your Data Data Science & Spatial Analysis New website: www.zevross.com Ithaca, NY

dowenj commented 6 years ago

I've encountered this previously and I'm pretty sure it's to do with how Leaflet decides on the layer order. For me, explicitly setting the zIndex of the layers so that the base layers load behind my VectorGrid layers seemed to correct the problem. Example - 

var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
{ 
    zIndex: 1,
    attribution: '© OpenStreetMap contributors'}
);

var osm_bw = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', 
{ 
    zIndex: 1,
    attribution: '© OpenStreetMap contributors'}
);

var osm_bw2 = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', 
{ 
    zIndex: 1,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'}
);

Your VectorGrid layers, wherever they're defined would have a zIndex value that's higher than your baselayers to ensure they render on top, or higher than other VectorGrid layers to bring them right to the front. Example from mine -

var defenceTileOptions = {
    rendererFactory: L.canvas.tile,
    zIndex: 3,
    vectorTileLayerStyles: {
        'defence': {
            weight: 3,
            color: 'DARKBLUE',
            opacity: 1
        }
    }
};
mngyng commented 5 years ago

Adding zIndex doesn't work for me. Here's one simple solution, though: bring your vector tile to front whenever there's a base layer change:

map.on('baselayerchange', function() {
    if (map.hasLayer(vectorGrid)) {
        vectorGrid.bringToFront();
    }
});