In this exercise you will fetch the latest incident data from the CFS API and map it on a leaflet map with some key information binded to it. the template below includes a function to add markers by clicking on the map.
Create a new folder
Create a new index.html and script.js file
copy and paste the code below into the relevant files
You task is to see if you can use the fetch data to plot some markers on the page with data attached like its location.
A full solution can be found on our gitHub or demo website.
HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.0/css/bulma.min.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin></script>
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin />
<script
src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
<title>Leaflet CFS Incident Example</title>
</head>
<style>
#map { height: 400px; }
</style>
<body>
<div class="container">
<h1 class="title">Current CFS Incidents</h1>
<div id="mapArea">
<div id="map"></div>
</div>
</div>
<!-- link to your script -->
<script src="script.js"></script>
</body>
</html>
JavaScript
const mapArea = document.getElementById('mapArea'); //make a ref to the area to place map on page
var map; //make a global ref to access map methods
var data;
loadMap(); //start the program
//Load the map from leaftlet an zoom onto adelaide at the start of the program
function loadMap() {
//load the map and starting point with zoom using lat and lon on Adelaide
map = L.map('map').setView([-34.92, 138.61], 6);
//load the map tiles and add to map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: ''
}).addTo(map);
//add a click function to add markers where you click
map.on('click', function (e) {
//create a marker
L.marker(e.latlng).addTo(map).bindPopup("Me");
});
}
//get the data from the cfs site and parse to data as JSON.
async function fetchAllData() {
try {
const response = await fetch('https://data.eso.sa.gov.au/prod/cfs/criimson/cfs_current_incidents.json');
data = await response.json();
} catch (error) {
console.error(error);
}
}
function addIncidentsToMap() {
data.forEach(element => {
//strip out the lat and lon from the data set
let loc = element.Location.split(',');
let lat = parseFloat(loc[0]);
let lon = parseFloat(loc[1]);
//add the marker to the map and bind a pop up with incident details. Hint - see the variable data
//create a marker example
L.marker(e.latlng).addTo(map).bindPopup("Me");
//sometimes it better to push a marker to an array so you can beeter access it later and remove it
//can you extend your app to only put markers on the map if its closer to your location?
//You may have to use a distance formula below to calculate distance between two points usingg the measureDistance function
});
}
function measureDistance(point_lat, point_lon, you_lat, you_lon) {
var from = turf.point([you_lat, you_lon]);
var to = turf.point([point_lat, point_lon]);
var options = { units: 'kilometers' };
var distance = turf.distance(from, to, options);
return distance;
}