Leaflet MultiLineString Popup and Tooltip Display Issue

Question

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.

Answer 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.