webapp/script.js at main · 05220066jnec-ui/webapp · 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// TASK 1: Paste map creation code here
const map = L.map("map", {
  measureControl: true
}).setView([27.5, 90.4], 8);

var coordsDiv = L.control({ position: 'bottomleft' });

coordsDiv.onAdd = function () {
    this._div = L.DomUtil.create('div', 'coords');
    this.update();
    return this._div;
};

coordsDiv.update = function (latlng) {
    this._div.innerHTML = latlng
        ? "Lat: " + latlng.lat.toFixed(5) + " , Lng: " + latlng.lng.toFixed(5)
        : "Move mouse over map";
};

coordsDiv.addTo(map);

map.on('mousemove', function(e) {
    coordsDiv.update(e.latlng);
});
L.control.measure({
  position: 'topleft',
  primaryLengthUnit: 'kilometers',
  secondaryLengthUnit: 'meters',
  primaryAreaUnit: 'sqkilometers',
  secondaryAreaUnit: 'sqmeters'
}).addTo(map);
// TASK 2: Paste basemap code here
const osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "© OpenStreetMap contributors"
}).addTo(map);

// TASK 3: Paste layer group code here
const dzongkhagLayer = L.layerGroup().addTo(map);
const educationLayer = L.layerGroup().addTo(map);
const healthLayer = L.layerGroup().addTo(map);

// TASK 4: Paste zoom function here
function zoomToBhutan() {
  map.setView([27.5, 90.4], 8);
}

// TASK 5: Paste GeoJSON layer loading code here
fetch("./Data/bhutan_dzong_web.geojson")
  .then(response => response.json())
  .then(data => {
    L.geoJSON(data, {
      style: {
        color: "black",
        weight: 1,
        fillColor: "orange",
        fillOpacity: 0.3
      },
      onEachFeature: function(feature, layer) {
        layer.bindPopup("Dzongkhag Boundary");
      }
    }).addTo(dzongkhagLayer);
  });

fetch("./Data/bhutan_education_center.geojson")
  .then(response => response.json())
  .then(data => {
    L.geoJSON(data, {
      pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
          radius: 5,
          color: "blue",
          fillColor: "blue",
          fillOpacity: 0.8
        });
      },
      onEachFeature: function(feature, layer) {
        layer.bindPopup("Education Center");
      }
    }).addTo(educationLayer);
  });

fetch("./Data/bhutan_health_center.geojson")
  .then(response => response.json())
  .then(data => {
    L.geoJSON(data, {
      pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
          radius: 5,
          color: "red",
          fillColor: "red",
          fillOpacity: 0.8
        });
      },
      onEachFeature: function(feature, layer) {
        layer.bindPopup("Health Center");
      }
    }).addTo(healthLayer);
  });

// TASK 6: Paste layer control code here
const overlayMaps = {
  "Dzongkhag Boundary": dzongkhagLayer,
  "Education Centers": educationLayer,
  "Health Centers": healthLayer
};

L.control.layers(null, overlayMaps).addTo(map);