lectures/lec08/map2.html

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map</title>
    <!-- External Stylesheets -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
    <!-- Add the Leaflet JavaScript library -->
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
</head>
<body>
<!-- Our web map and content will go here -->
<div id="map" style="width: 900px; height: 600px"></div>
<script>

    // Create variable to hold map element, give initial settings to map
    var map = L.map('map', {
        center: [44.56576, -123.27888],
        zoom: 16
    });

    // Add OpenStreetMap tile layer to map element
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // load GeoJSON from an external file
    L.geoJson.ajax("assets/geog371.geojson", {
        onEachFeature: function(feature, layer) {
            layer.bindPopup(feature.properties.name);
        }
    }).addTo(map);
</script>
</body>
</html>