1

I'm trying to make a geojson layer in leaflet transparent (not visible on the map) . I require the layer to perform a search based on road name using searchcontrol only. I already have the roads information attached as part of overlayMaps and use in layercontrol.

Below is my code:

 <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="js/leaflet-search.src.js"></script>
    <script src="data/road.js"></script>
    <script>



var map = new L.Map('map', { center: new L.LatLng(-36.68057,149.84078), zoom:14 , attributionControl:true, zoomControl:false, minZoom:6});

var baseMaps = {

     OpenStreetMap: L.tileLayer.wms('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        format: 'png',
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        transparent: true
     }), //base layer

     Imagery: L.tileLayer.wms('http://maps.six.nsw.gov.au/arcgis/services/public/NSW_Imagery/MapServer/WMSServer', {
        layers: 'BestImageryDates',
        format: 'image/png',
        transparent: true,
        attribution: "(c) NSW Land and Property Information"
     })

};

var overlayMaps = {

    "Roads": L.tileLayer.wms('http://10.0.0.24:8080/geoserver/jason/wms', {
        layers: 'jason:roads',
        format: 'image/png',
        transparent: true,
        tiled: true,
        tilesorigin: '-37.50025,149.12562'
    }),

    "Road Authority": L.tileLayer.wms('http://10.0.0.24:8080/geoserver/jason/wms', {
        layers: 'jason:tenure',
        format: 'image/png',
        transparent: true
    }),

    "Levels Of Service": L.tileLayer.wms('http://10.0.0.24:8080/geoserver/jason/wms', {
        layers: 'jason:los',
        format: 'image/png',
        transparent: true
    }),

   "Suburbs": L.tileLayer.wms('http://10.0.0.24:8080/geoserver/jason/wms', {
        layers: 'jason:suburbs',
        format: 'image/png',
        transparent: true,
        opacity: 0.6,
        tiled: true,
        tilesorigin: '-37.50025,149.12562'
    })
};

L.control.layers(baseMaps,overlayMaps,{collapsed:false}).addTo(map);
    baseMaps.OpenStreetMap.addTo(map); //adds OpenStreetMap as default


var controller = L.control.zoom ({
        position:'bottomleft'
        }).addTo(map);


var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("Map " + e.latlng.toString())
                .openOn(map);
        }

        map.on('click', onMapClick);



var featuresLayer = new L.GeoJSON(roads);


var searchControl = new L.Control.Search({
        layer: featuresLayer,
        propertyName: 'road_name',
        marker: false,
        collapsed: false,
        position: 'topleft',
        moveToLocation: function(latlng, title, map) {
                //map.fitBounds( latlng.layer.getBounds() );
                var zoom = map.getBoundsZoom(latlng.layer.getBounds());
                map.setView(latlng, zoom); 
                }
        });

        map.addControl( searchControl );  
0
4

As per the Leaflet docs, use the opacity property (value between 0 & 1) when setting the style of your GeoJSON layer:

var myStyle = {
    "opacity": 0
};

var featuresLayer = new L.geoJSON(roads, {
    style: myStyle
});

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.