Leaflet - how to make geojson layer transparent (not visible on map),

Question

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/[email protected]/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 );  

Answer 1

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

Answer 2

opacity is for border layer, for shape layer you can use 'fillOpacity' like script below:

var myStyle = {
    "opacity": 0,
    "fillOpacity": 0.5 // value between 0-1 or 0% - 100%
};

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