Skip to content

Instantly share code, notes, and snippets.

@logston

logston/map.html

Created December 1, 2019 02:58
Show Gist options
  • Save logston/0b6f2cbb928a386decd63fd616d084dd to your computer and use it in GitHub Desktop.
Save logston/0b6f2cbb928a386decd63fd616d084dd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
map.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
html,body {
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="container-fluid h-100"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Leaflet JS -->
<script>
var map_center = [
40.782091, // Latitude
-73.964285 // Longitude
];
var zoom_level = 14;
var map = L.map('map').setView(map_center, zoom_level);
L.tileLayer('https://{server}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
server: 'a', // can be 'a', 'b', or 'c'
// must leave attribution in!
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
<!-- L.Icon.Default.prototype.options.iconSize = 15; -->
<!-- L.Icon.Default.prototype.options.iconAnchor = [0, 0]; -->
<!-- L.Icon.Default.prototype.options.shadowSize = 15; -->
<!-- L.Icon.Default.prototype.options.shadowAnchor = [0, 0]; -->
{% for sighting in sightings %}
var point_lat_lon = [{{ sighting.latitude }}, {{ sighting.longitude }}];
var marker = L.marker(point_lat_lon).addTo(map);
{% endfor %}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment