5

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?

  • The proper approach to this is to load the results (and layer) when the locationfound event occurs. You don't need to create the layer before hand, or if you do, just leave it in the map, without records. After the location is found, populate the layer. – George Silva Dec 19 '16 at 21:21
  • and how is that possible? if i remove 'return marker' and add it to the locationfound process, ill dont get any results in my search bar... – howard.D Jan 10 '17 at 13:32
  • canceled this... didnt find i way to make the leaflet work fluent. went back to l.circlemarker – howard.D Jan 12 '17 at 20:37
3

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.

  • 1
    Thanks for this advice! I already tried this. It does not boost the performance a lot. By using L.circleMarker instead of L.marker everything works much (!) smoother. – howard.D Jan 20 '17 at 12:25

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.