Display L.marker without icon

Question

Would like to start my leaflet map without any features displayed on start. The feature should not be displayed before a location is found via my search.control.

I started with

// first "invisible" icon
var smallIcon = new L.Icon({
    iconUrl: 'mypicture',
    iconRetinaUrl: 'mypicture',
    iconSize:    [0.00, 0.00],
    iconAnchor:  [0, 0],
    popupAnchor: [1, -34],
    shadowSize:  [0, 0]
});

// second "visible" icon
var smallIcon2 = new L.Icon({
    iconUrl: 'mypicture',
    iconRetinaUrl: 'mypicture',
    iconSize:    [25, 41],
    iconAnchor:  [12, 41],
    popupAnchor: [1, -34],
    shadowUrl: 'mypicture',
    shadowSize:  [41, 41]
});

// adding geojson and display feautures with "invisible" marker
var marker;
var json_AlleJSON = new L.geoJson(myjson, {
    onEachFeature: pop_All,                     
    pointToLayer: function (feature, latlng) {
        marker = new L.marker(latlng, {icon: smallIcon});
        return marker;
    }
});

And to change the icon when location is found:

// changing the icon to "visible"
searchControl.on('search_locationfound', function(e) {
    sidebar.hide();
    e.layer.setIcon(smallIcon2); 
});

This actually works BUT the problem I got: even by reducing the iconSize to 0.0, the map interacting gets so slow because of loading an image for every feature (my json contains about 100 entries).

I tried to solve this by leaving the iconUrl empty but this didn't work.

Any ideas?

Answer 1

What if you created a transparent L.DivIcon for your first invisible image? (This technique is used in the Leaflet.draw plugin.)

From Leaflet.draw's javascript source code:

var marker = L.marker(this._map.getCenter(), {
                icon: L.divIcon({
                    className: 'leaflet-mouse-marker',
                    iconAnchor: [20, 20],
                    iconSize: [40, 40]
                }),
                opacity: 0,
                zIndexOffset: this.options.zIndexOffset
            });

and from the css:

.leaflet-mouse-marker{background-color:#fff;cursor:crosshair}

I suspect you don't even need the css...just skip the class name. I think the opacity: 0 is the important part. In any case, I've found for myself that DivIcons load much faster than images for regular markers.