Maps in JS (leaflet)

Leaflet Website - https://leafletjs.com/

Leaflet is an open source JS library which enables plotting of markers on a world map.

Getting Started: In HTML file

Include the following links into the head of your html file in the following order:

<link rel="stylesheet"

            href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"

            integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="

            crossorigin=""/>

<!-- Make sure you put this AFTER Leaflet's CSS -->

        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"

            integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="

            crossorigin=""></script>

Step 2: In the Body

 <!-- Area to show map -->

        <div id="map"></div>

Step 3: Stylesheet

Add the following to resize the map area

#map { height: 400px; }

In your JS File:

Step 1: Make an instance of the map. You can set the default zoom and location. This example points to SA.

var map = L.map('map').setView([-29.8239745, 133.2293163], 6);

Step 2: Add a tile layer. This is the type of map that you will see. This example is an open maps version

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

    maxZoom: 19,

    attribution: '© OpenStreetMap'

}).addTo(map);

You should now see a map displaying on your page. 

Adding Markers and text on Pop Up: 

Use long and lat points. You can render html content into the bindpop up property

var marker =  L.marker(-29.82, 133).addTo(map)

            .bindPopup("Park")

Adding multiple markers from an array of objects: Your object could include additional data etc.

var locations = [

    { name: "Park", lat: -38.0940, long: 144.3180 },

    { name: "Toilet", lat: -36.0940, long: 144.3180 }

]

//place all markers on the map with a pop up

function addMarkers() {

    //iterate over each marker object

    for (var i = 0; i < locations.length; i++) {

        //add the marker to the map

        L.marker([locations[i].lat, locations[i].long]).addTo(map)

            .bindPopup(locations[i].name)

    }

}