1

I have a geoJSON layer of watercourses for which I want the multi line strings and also tooltips and popups to appear in a Leaflet map on instantiation.

The below code will not display popups or tooltips, but the watercourses do appear:

    function waterPops(feature, layer){
      layer.bindPopup(feature.properties.NAME)
      layer.bindTooltip(feature.properties.NAME)
    };

    var lineStyle = {
        "color": "#00b3ff",
        "weight": 1,
        "opacity": 1
    };

    var water = L.geoJSON(waterExtract, {
      style: lineStyle,
      onEachFeature: waterPops,
    }).addTo(mymap);

Something I tried with a strange result: If I load the above water variable into a layer group WITHOUT addTo(mymap) for var water, obviously the watercourses layer doesn't load on instantiation, but when I turn the layer on in the layer group the popups and tooltips will work, along with the watercourses. Similarly, if I load the water variable into a layer group WITH addTo(mymap) for var water, on instantiation the watercourses appear, but tooltips and popups do not work. If I turn the layer off then on again, the tooltips and popups will work and watercourses will appear.

Popups, tooltips, and watercourses will work for the below code if I turn the layer on in the layer control.

    function waterPops(feature, layer){
      layer.bindPopup(feature.properties.NAME)
      layer.bindTooltip(feature.properties.NAME)
    };

    var lineStyle = {
        "color": "#00b3ff",
        "weight": 1,
        "opacity": 1
    };

    var water = L.geoJSON(waterExtract, {
      style: lineStyle,
      onEachFeature: waterPops,
    });

    var baseLayers = {
      "Map": streets,
      "Satellite": googleSat
    };

    var overlayMaps = {
      "Thing": thing,
      "Watercourses": water,

    };

    L.control.layers(baseLayers, overlayMaps).addTo(mymap);

For the code below, watercourses appear, but popups and tooltips will not work on instantiation. If I turn the layer off then on in the layer control, then everything works:

    function waterPops(feature, layer){
      layer.bindPopup(feature.properties.NAME)
      layer.bindTooltip(feature.properties.NAME)
    };

    var lineStyle = {
        "color": "#00b3ff",
        "weight": 1,
        "opacity": 1
    };

    var water = L.geoJSON(waterExtract, {
      style: lineStyle,
      onEachFeature: waterPops,
    }).addTo(mymap);

    var baseLayers = {
      "Map": streets,
      "Satellite": googleSat
    };

    var overlayMaps = {
      "Thing": thing,
      "Watercourses": water,

    };

    L.control.layers(baseLayers, overlayMaps).addTo(mymap);

Ideally I would like to have the watercourses, popups, and tooltips working on instantiation, whether in a layer control group or alone.

1 Answer 1

1

I ended up needing to load it asynchronously and run it from a server instead of locally:

var water = new L.GeoJSON.AJAX('waterExtract.geojson', {
  style: lineStyle,
  onEachFeature: waterPops,
}).addTo(mymap);

It works with layer groups still.

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.