Below is an example of getting charts.js to work with a basic applicaiotion
create a new folder for the project
Create a index.html and script.js file
You can insert the html template below. I have included scripts and references to:
Bulma a css framework
Jquery
leaflet
Your script.js
<!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">
<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 template</title>
</head>
<style>
#map { height: 400px; }
</style>
<body>
<div class="container">
<h1 class="title">Map of SA Example</h1>
<div id="mapArea">
<div id="map"></div>
</div>
</div>
<!-- link to your script -->
<script src="script.js"></script>
</body>
</html>
4. Now you can use the below Js script to have a basic map of SA appear with a marker appearing here at school.
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
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("a markers information");
});
}