Leaflet.VectorGrid
Leaflet.VectorGrid copied to clipboard
Leaflet
Issues with base layers and VectorGrid
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/[email protected]/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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <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);
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...
Have you tried explicitly adding the different layers to different map panes?
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 [email protected] 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
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.
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
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 [email protected] 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
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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <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
}
}
};
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();
}
});
