1

I'm quite new to leaflet js and I wanted to make a map where when clicked on a particular state, it will give me the latest information, for example, the population of a state that is taken using an API, right now I have set it to display the state names.

If I try to include into the HTML file, the javascript code where I'm using fetch to get the data from the API, nothing loads. This also occurs, if I link the data.js file as a script in the html file. I've got the fetch script working on a data.js file. Is there some way for me to get the data from the variable stored in "data.js" to display as "Data: x" as a Popup on the map?

If I could get a working example through fiddle, that would be super helpful.

jsfiddle https://jsfiddle.net/zy9fxd35/1/

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" data-require="leaflet@0.7.3" data-semver="0.7.3" />
    <link rel="stylesheet" href="styles.css" />
        <style>
            body {
    margin: 0;
    }
    html, body, #map {
    height: 100%;
    }
    .my-class{
      height:100px;
      width:100px;
    }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js" data-require="leaflet@0.7.3" data-semver="0.7.3"></script>



    <script>
        var map = L.map('map', {
      'center': [-28.734968, 134.489563],
      'zoom': 4.8,
      'maxZoom': 4.8,
      'zoomControl': false,
      'dragging': false,
      'layers': [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          'attribution': 'Map data &copy; OpenStreetMap contributors'
        })
      ]
    });
    /*

    */


      var url = 'https://raw.githubusercontent.com/tonywr71/GeoJson-Data/master/australian-states.min.geojson';


      function style(feature) {
      return {
          fillColor: 'orange', 
          fillOpacity: 0.5,  
          weight: 2,
          opacity: 1,
          color: '#ffffff',
          dashArray: '1'
        };
      }
      var highlight = {
        'fillColor': 'yellow',
        'weight': 2,
        'opacity': 1
      };


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

              var hello = "hello";

              if (popupContent == "New South Wales"){
                  popupContent = "<p> Hello";

              }
              layer.bindPopup(popupContent);

              layer.on("click", function (e) { 
                  stateLayer.setStyle(style); //resets layer colors
                  layer.setStyle(highlight);  //highlights selected.
              }); 
                }

    // Null variable that will hold layer
    var stateLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: style});

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

      stateLayer.addTo(map);


      var bounds = geojson.getBounds();

      map.fitBounds(bounds);

      map.options.maxBounds = bounds;
      map.options.minZoom = map.getZoom();


    </script>


  </body>
</html>

This is an example data.js, where I'm getting COVID-19 data from an API. I'm not sure of the best practices for structuring it, but what I've got here works in retrieving the data.

function getInfo (url){
    setInterval(function(){
        fetch("https://corona.blloc.com/current?country=Australia")
        .then(res => res.json())
        .then((out) =>{
            var confirmed = out.confirmed;
            var recovered = out.recovered;
            var deaths = out.deaths;
        }).catch(err => console.error(err));
    }, 500);
}

let url = "https://corona.blloc.com/current?country=Australia";

getInfo(url);
  • What format is your data in data.js file? Can you add an example/excerpt of your data? – TomazicM Apr 13 at 14:52
  • @TomazicM It's in JSON format, I've also included an example of how I'm implementing it. – sh2345 Apr 14 at 0:20
0

After looking for ways to load JSON data in, I came across How to use Javascript to load and parse a static JSON file in the server and then used the following:

var url = 'INSERT_URL_HERE';
var j = [];
$.ajax({
  type: 'GET',
  url: url,
  dataType: 'json',
  success: function(data) { j = data;},
  async: false
});

Which I then used to input data on to the map through using the reference, for example here where it refers to cases confirmed.

j.confirmed;

Then I used it to display onto the map like so:

if (popupContent == "New South Wales")
              {
                  popupContent = "<p> Confirmed " +j.confirmed;
              }
| improve this answer | |

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.