Skip to content

Instantly share code, notes, and snippets.

@russbiggs

russbiggs/index.html

Created April 23, 2020 01:42
Show Gist options
  • Save russbiggs/3cded35dc575a0bc713c262f0d280bae to your computer and use it in GitHub Desktop.
Save russbiggs/3cded35dc575a0bc713c262f0d280bae to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
</head>
<body>
<div id="map"></div>
<script>
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": 1,
"name":"foo",
"url": "http://example.com"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-106.545,
35.025
],
[
-106.420,
35.025
],
[
-106.420,
35.150
],
[
-106.545,
35.150
],
[
-106.545,
35.025
]
]
]
}
},
{
"type": "Feature",
"properties": {"id":2,"name": "bar","url": "http://usgs.gov"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-106.670,
35.025
],
[
-106.545,
35.025
],
[
-106.545,
35.150
],
[
-106.670,
35.150
],
[
-106.670,
35.025
]
]
]
}
}
]
}
var map = L.map('map').setView([35.1137, -106.6374], 11);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
function onEachFeature(feature, layer) {
var popupContent = "<p>Id: " + feature.properties.id + "</p>";
popupContent = popupContent + "<p>Name: " + feature.properties.name + "</p>";
popupContent = popupContent + '<a href="' + feature.properties.url + '">Link</a>';
layer.bindPopup(popupContent);
}
L.geoJSON(data, {
style: {
weight: 2,
color: "#999",
opacity: 1,
fillColor: "#B0DE5C",
fillOpacity: 0.8
},
onEachFeature: onEachFeature,
}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment