CODEWITHSUNDEEP
javascriptpopupleafletmarker
wei shiuan
wei shiuan

Reputation: 13

Display marker popup with data information

I run my code, but it can't not display the popup with data information,just can display the marker.

JS 

    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, { maxZoom: 20, attribution: osmAttrib });
    var map = L.map('map').setView([24.151687694799833, 120.64116954803465
    ], 15).addLayer(osm);              //顯示地圖
    L.control.scale().addTo(map);

    $.getJSON("https://sta.ci.taiwan.gov.tw/STA_Rain/v1.0/Things?$expand=Locations&$select=name,properties&$count=true", function (data) {
        var markerGroup = L.featureGroup();
        data.value.forEach(function (itemData, itemInd) {
            var latLng = L.latLng(itemData.Locations[0].location.coordinates[1], itemData.Locations[0].location.coordinates[0]);
            var myMarker = L.marker(latLng).addTo(markerGroup);
            //myMarker.bindPopup('ID: ' + itemData.properties.stationID + '<br />Name: ' + itemData.properties.stationName);

            var popupContent = "<p>stationID <b>" +
                itemData.properties.stationID + "</b> stationName </br>" +
                itemData.properties.stationName + "</br>";


            if (itemData.properties && itemData.properties.popupContent) {
                popupContent += itemData.properties.popupContent;
            }
            myMarker.bindPopup(popupContent);
        });


        markerGroup.addTo(map);
        map.fitBounds(markerGroup.getBounds());
    });      

</script>

HTML

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

I expect I can click the marker and popup with the data information. (such as: name, city_SN, town_SN, Attribute, coordinates)

My json data URL

Upvotes: 1

Views: 592

Answers (1)

kboul
kboul

Reputation: 14570

I do not see any issue with your code. Maybe there is an issue with the order of your script files. For instance where you import jquery and where you define your script. Here is an example using your code:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

</head>

<body>
  <div id="map" style="width: 100%; height: 100vh;"></div>
  <script>
    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      osm = L.tileLayer(osmUrl, {
        maxZoom: 20,
        attribution: osmAttrib
      });

    var map = L.map('map').setView([24.151687694799833, 120.64116954803465], 15).addLayer(osm); //顯示地圖

    L.control.scale().addTo(map);

      $.getJSON("https://sta.ci.taiwan.gov.tw/STA_Rain/v1.0/Things?$expand=Locations&$select=name,properties&$count=true", function(data) {
        var markerGroup = L.featureGroup();
        data.value.forEach(function(itemData, itemInd) {
          var latLng = L.latLng(itemData.Locations[0].location.coordinates[1], itemData.Locations[0].location.coordinates[0]);
          var myMarker = L.marker(latLng).addTo(markerGroup);
          //myMarker.bindPopup('ID: ' + itemData.properties.stationID + '<br />Name: ' + itemData.properties.stationName);

          var popupContent = "<p>stationID <b>" +
            itemData.properties.stationID + "</b> stationName </br>" +
            itemData.properties.stationName + "</br>";


          if (itemData.properties && itemData.properties.popupContent) {
            popupContent += itemData.properties.popupContent;
          }
          myMarker.bindPopup(popupContent);
        });


        markerGroup.addTo(map);
        map.fitBounds(markerGroup.getBounds());
      });
  </script>
</body>

</html>

Upvotes: 2

Related Questions