In order to create an interactive map from the LeaftletJS website, I followed Tutorials > Leaflet Quick Start Guide. By viewing the first stand-alone example further down the page, I was able to right click on this and view the source code. I copied this into my code editing software and saved it in order to be able to make and track changes manually along the way. Please click on the images provided to view these in your browser.
Setting Up The Map
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
</script>
</body>
</html>
In the <head> of the HTML it links an external CSS and JavaScript of which has been provided by LeafletJS themselves. Moving down to the <body>, the size of the map has been defined as 600px by 400px, meaning the map will always load to this size whatever device it is displayed on. .setView is followed by a set of co-ordinates to centralise the map and maxZoom: 18 ensures the zoom level each time the page is loaded or refreshed. Following this, attribution: creates the little taxonomy strip at the bottom including links to sites referenced. I will be removing this later on in the project to personalise my map interface.
Markers, Circles & Polygons
var marker = L.marker([51.5, -0.09]).addTo(mymap);
I have added a blue marker at a specific defined co-ordinate and assigned it the variable marker.
var circle = L.circle([51.508, -0.11], {
color: '#44066b',
fillColor: '#7a17b7',
fillOpacity: '0.5',
radius: 500
}).addTo(mymap);
Then, I added a circle at another predefined set of co-ordinates. I changed the colour of this to a purple hex code to go nicely with the blues and greens.
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap);
polygon.setStyle({
color: '#44066b',
fillColor: '#7a17b7',
fillOpacity: '0.5',
}).addTo(mymap);
Following this I have added a polygon made up of 3 co-ordinates with the same colour scheme as the previous circle.
Popups
marker.bindPopup("<b>You are here</b>").openPopup();
circle.bindPopup("This is the circle area");
polygon.bindPopup("This is the polygon area");
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(mymap);
Adding popups to my map was a simple task as it only requires .bindPopup, followed by what text I wanted to include. To create a stand-alone popup, not assigned to any shape or marker, I just gave it it’s own set of co-ordinates.
Bibliography
Leafletjs.com. (2017). Cite a Website – Cite This For Me. [online] Available at: http://leafletjs.com/examples.html [Accessed 28 Sep. 2017].