0

Im using lvector.js from Jason Sanford to draw Postgis-data as geojson on top of a leaflet map. With the following code, the layers 'layer_n2k_do' is drawn correctly on the map:

    var layer_n2k_do = new lvector.PRWSF({
    url: "http://map.domain.com/rest",
    geotable: "n2k_do",
    fields: "gid, sitecode, sitename, surfha",
    where: "",
    uniqueField: "gid",
    srid: 2169,
    showAll: false,
    scaleRange: [14, 20],
    map: map,
    singleInfoWindow:true,
    popupTemplate:"<div id=\"info\"><p>{sitecode} <br /> {sitename} </p><p>{surfha} ha</p></div>",
    symbology: {
        type: "single",
        vectorOptions: {
            fillColor: "orchid",
            fillOpacity: 0.1,
            weight: 2.0,
            color: "orchid",
            opacity: 0.8,
            clickable: true
        }
    }
});

When I don't put the layer directly to the map, i can later draw it on the map with:

layer_n2k_dh.setMap(map);

I would like to use a layercontrol to collect all my overlays, so that I could toggle their visibility just by activating/deactivating them in the control. I've tried the Leaflet.groupedlayercontrol, but the layers doesn't appear on the map?

var basemaps = {
        OSM: L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }),
        'Google_Hybrid': L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
    maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3']
    })
    };

    var groupedOverlays = {
      "Natura 2000": {
        "Habitat-Dir.": layer_n2k_dh,
        "Birds-Dir.": layer_n2k_do
      },
      "Borders": {
        "Municipalities": layer_mun
      }
    };

    L.control.groupedLayers(basemaps, groupedOverlays).addTo(map);
    basemaps.OSM.addTo(map);

The layers are listed in the control, but they aren't added to the map.

Does anyone have an idea how to get thar work? Or is there an other control that someone knows top work with lvector.js-layers?

1

As it seems to be tricky to get leaflet-vector-layers to work properly with the standard (or grouped) layer control in Leaflet here a hack suggested by Bryan McBride. Since Leaflet uses addTo() and lvector.js uses setMap() to add layers to the map one need to use a dummy-layer that is added to the layercontrol. When toggling the visibility of the dummy-layer the overlayadd- or overlayremove-event is fired, which calls the setMap() method requiered by lvector.js. Here the code I use to implement multiple PRWSF-layers.

//Adding the PRWSF-layers and dummy layers
var layer_n2k_dhHolder = L.geoJson(null); // dummy layer holder
var layer_n2k_dh = new lvector.PRWSF({}); // actual layer
var layer_n2k_doHolder = L.geoJson(null); // dummy layer holder
var layer_n2k_do = new lvector.PRWSF({}); // actual layer
var layer_comHolder = L.geoJson(null); // dummy layer holder
var layer_com = new lvector.PRWSF({}); // actual layer  

//Adding dummy-layers to the groupedOverlays control
var groupedOverlays = {
      "Natura 2000": {
        "Habitat-Dir.": layer_n2k_dhHolder,
        "Vogelschutz-Dir.": layer_n2k_doHolder
      },
      "Grenzen": {
        "Gemeinden": layer_comHolder
      }
};

// Add formerly defined basemaps and groupedOverlays to the map
    L.control.groupedLayers(basemaps,groupedOverlays).addTo(map);       
    basemaps.OSM.addTo(map);

// switch visibility of PRWSF layers on
map.on('overlayadd',function(e) {
switch(e.name) {
case 'Habitat-Dir.': layer_n2k_dh.setMap(map); break;
case 'Vogelschutz-Dir.': layer_n2k_do.setMap(map); break;
case 'Gemeinden': layer_com.setMap(map);
}
});

// switch visibility of PRWSF layers off
map.on('overlayremove',function(e) {
switch(e.name) {
case 'Habitat-Dir.': layer_n2k_dh.setMap(null); break;
case 'Vogelschutz-Dir.': layer_n2k_do.setMap(null); break;
case 'Gemeinden': layer_com.setMap(null);
}
});

Not really nice, but it works. Thanks to Bryan McBride

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.