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/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);

Description

Contributor guide

First steps

Research direction

Assessment

Issues with base layers and VectorGrid

Description

Contributor guide

First steps

Research direction

Assessment

Get new issues in your inbox