Assignment4NatureReserves/CodeAssignment4 at main · BrokeJ/Assignment4NatureReserves · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Map of Münster Nature Reserves</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 850px;
            width: 100%;
        }
    </style>
</head>
<body>

<h1>Interactive Map of Münster Nature Reserves</h1>
<div id="map"></div>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Initialize the map centered over Münster
    var map = L.map('map').setView([51.9607, 7.6261], 12);

    // Add OpenStreetMap tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Add a marker for Münster
    var marker = L.marker([51.9607, 7.6261]).addTo(map);
    marker.bindPopup("<b>Münster</b>");

    // Naturschutzgebiet Rieselfelder Münster
    var rieselfelder = L.polygon([
        [52.04369052807325, 7.634350117535704],
        [52.044733139317565, 7.642300184362833],
        [52.02511129890003, 7.660942186562838],
        [52.02212726489884, 7.647638431177154]
    ], {
        color: 'green',
        fillColor: '#90EE90',
        fillOpacity: 0.6
    }).addTo(map);
    rieselfelder.bindPopup("<b>Rieselfelder Münster</b>");

    // Naturschutzgebiet Aa Aue
    var aaaue = L.polygon([
        [51.979590271876795, 7.519368770503719],
        [51.98070045959327, 7.522329929030125],
        [51.96816960117731, 7.547049166361372],
        [51.93947290224934, 7.580566050817505],
        [51.94256826841826, 7.594170213902591],
        [51.942092072140355, 7.595758081518199],
        [51.937541497203384, 7.579707743998257],
        [51.96734995036969, 7.546577097610785]
    ], {
        color: 'blue',
        fillColor: '#ADD8E6',
        fillOpacity: 0.6
    }).addTo(map);
    aaaue.bindPopup("<b>Aa Aue</b>");

</script>

</body>
</html>