1

Why my file only read data3 popup data? data1 and data2 just popup the data3 data

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
  <head profile="http://gmpg.org/xfn/11">
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
      integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
      crossorigin=""
    ></script>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  </head>

  <body>
    <div id="map" style="height: 100%; border: 1px solid #AAA;"></div>

    <script>
      var map = L.map("map").setView([23.5, 121], 7);

      var osm = new L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      //data1

      function style(feature) {
        return {
          fillColor: "green",
          fillOpacity: 0.5,
          weight: 2,
          opacity: 1,
          color: "#0066FF",
          dashArray: "3"
        };
      }
      var highlight = {
        fillColor: "yellow",
        weight: 2,
        opacity: 1
      };

      var url1 = "https://www.geologycloud.tw/api/v1/zh-tw/ActiveFault?t=.json";

      function forEachFeature(feature, layer) {
        var popupContent =
          "<b>Name: </b>" +
          feature.properties.Name +
          "</br>Note: " +
          feature.properties.Note +
          "</br>observe: " +
          feature.properties.observe;

        layer.bindPopup(popupContent);

        layer.on("click", function(e) {
          stateLayer.setStyle(style);
          layer.setStyle(highlight);
        });
      }

      var stateLayer = L.geoJson(null, { onEachFeature: forEachFeature, style: style });

      $.getJSON(url1, function(data) {
        stateLayer.addData(data);
      });

      stateLayer.addTo(map);

      //data2

      function style2(feature) {
        return {
          fillColor: "#77FF00",

          fillOpacity: 0.5,
          weight: 2,
          opacity: 1,
          color: "#77FF00",
          dashArray: "3"
        };
      }
      var highlight2 = {
        fillColor: "white",
        weight: 2,
        opacity: 1
      };

      var url2 = "https://www.geologycloud.tw/api/v1/zh-tw/DipSlope?t=.json";

      function forEachFeature(feature, layer2) {
        var popupContent2 =
          "<p><b>SLOPE_DIR: </b>" +
          feature.properties.SLOPE_DIR +
          "</br>MAP_NAME: " +
          feature.properties.MAP_NAME;

        layer2.bindPopup(popupContent2);

        layer2.on("click", function(e) {
          stateLayer2.setStyle(style2);
          layer2.setStyle(highlight2);
        });
      }

      var stateLayer2 = L.geoJson(null, { onEachFeature: forEachFeature, style: style });

      $.getJSON(url2, function(data) {
        stateLayer2.addData(data);
      });

      stateLayer2.addTo(map);

      //data3

      function style3(feature) {
        return {
          fillColor: "#CC00FF",

          fillOpacity: 0.5,
          weight: 2,
          opacity: 1,
          color: "#CC00FF",
          dashArray: "3"
        };
      }
      var highlight3 = {
        fillColor: "white",
        weight: 2,
        opacity: 1
      };

      var url3 = "https://www.geologycloud.tw/api/v1/zh-tw/RockFall?t=.json";

      function forEachFeature(feature, layer) {
        var popupContent =
          "<p><b>ACTIVITY: </b>" +
          feature.properties.ACTIVITY +
          "</br>SLOPE_ANG: " +
          feature.properties.SLOPE_ANG;

        layer.bindPopup(popupContent);

        layer.on("click", function(e) {
          stateLayer.setStyle(style);
          layer.setStyle(highlight);
        });
      }

      var stateLayer = L.geoJson(null, { onEachFeature: forEachFeature, style: style });

      $.getJSON(url3, function(data) {
        stateLayer.addData(data);
      });

      stateLayer.addTo(map);

      var baseMaps = {
        "Open Street Map": osm
      };

      var overlayMaps = {
        ActiveFault: stateLayer,
        DipSlope: stateLayer2,
        RockFall: stateLayer3
      };

      L.control.layers(baseMaps, overlayMaps).addTo(map);
      L.control.scale().addTo(map);
    </script>
  </body>
</html>
  • You're using variable names stateLayer, stateLayer2 and stateLayer; but I guess you wanted to use stateLayer, stateLayer2 and stateLayer3 instead. Do check your browser dev console for errors, like ReferenceError: stateLayer3 is not defined. – IvanSanchez Aug 5 at 8:50
  • Yes, I revise it, but my layer1 and layer2 also popup layer3's data information – wei shiuan Aug 5 at 9:06
  • You're also reusing the function name forEachFeature. Since functions is JS are hoisted, only the latest definition of forEachFeature is kept. – IvanSanchez Aug 5 at 9:10
  • How can I revise it? – wei shiuan Aug 5 at 9:25
  • 1
    The quick & dirty fix is to use different names, such as forEachFeature1 and forEachFeature2. – IvanSanchez Aug 5 at 10:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.