A Workshop for GeoMundus 2018
This excercise assumes you already have a github.com account. If not, create one here: github.com
-
Create a new github pages repository following this guide: GitHub Pages.
-
Modify the index.html file in the respository you just created to look like this:
<html>
<head>
<title>GeoMundus 2018</title>
</head>
<body>
<script>
</script>
</body>
</html>- Include Leaflet CSS file in the
<head>section of your document:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />- Include Leaflet JavaScript file right after Leaflet’s CSS:
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>- Put a
<div>element with a certain id inside the<body>section of your document:
<div id="map" style="height:600px; width:100%">
</div>- Create your map in the
<script>section of your document:
var map = L.map("map").setView([38.732329, -9.160455], 10);
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);Now you should have your basic map app running! Open the file in your browser to see.
You can add basic markers to your map by adding the following code in the <script> section of your document:
L.marker([38.732235, -9.160366]).addTo(map);You can add basic polygons to your map by adding the following code in the <script> section of your document:
// Create a red polygon from an array of lat-long points
var points = [
[38.73098724394945, -9.159668684005737],
[38.73015866055299, -9.159711599349976],
[38.73011681265176, -9.158810377120972],
[38.7306022467989, -9.157898426055908],
[38.731414086190945, -9.157887697219849],
[38.73149778044903, -9.158896207809448],
[38.73098724394945, -9.159668684005737]
];
var polygon = L.polygon(points, {color: 'red'}).addTo(map);