cdp-map-osm-changes/index.html at main · mapping-systems/cdp-map-osm-changes · 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
108
109
110
<!DOCTYPE html>
<html>
  <head>
    <title>OSM Changes 250720</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/maplibre-gl@^5.6.1/dist/maplibre-gl.js"></script>
    <link
      href="https://unpkg.com/maplibre-gl@^5.6.1/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      #map {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map" style="height: 100vh"></div>
    <div id="location-indicator" style="position:absolute; bottom: 10px; left: 10px; background: white; padding: 5px; border-radius: 3px;">

    <script>
      var map = new maplibregl.Map({
        container: "map", // container id
        style: "style.json", // style URL for basemap
        center: [-73.97144, 40.70491], // starting position [lng, lat]
        zoom: 1, // starting zoom
      });
      // Add zoom and rotation controls to the map.
      map.addControl(new maplibregl.NavigationControl());

      map.on("load", () => {
        map.addSource("point-edits", {
          type: "vector",
          tiles: ["https://tiles.wxy-labs.org/osm_250720nfl2/{z}/{x}/{y}.mvt"],
        });

        map.addLayer({
          id: "point-edits-layer",
          type: "circle",
          source: "point-edits",
          "source-layer": "changes_Point",
          paint: {
            "circle-radius": 4,
            "circle-stroke-width": 2,
            "circle-color": "#ff7800",
            "circle-stroke-color": "white",
          },
          maxZoom: 24,
        });

        map.on("click", "point-edits-layer", (e) => {
          const bbox = [
            [e.point.x - 5, e.point.y - 5],
            [e.point.x + 5, e.point.y + 5],
          ];

          // Find features intersecting the bounding box.
          const selectedFeatures = map.queryRenderedFeatures(bbox, {
            layers: ["point-edits-layer"],
          });
          if (selectedFeatures.length === 0) {
            return;
          }

          const description = selectedFeatures[0].properties.tags;
          const user = selectedFeatures[0].properties.user;
          const changeset = selectedFeatures[0].properties.changeset;

          const descriptionString =
            `${user} - <br></br>` +
            `<a href="https://osmcha.org/changesets/${changeset}" target="_blank">${changeset}</a> - <br></br>` +
            Object.entries(JSON.parse(description))
              .map(([key, value]) => `<strong>${key}:</strong> ${value}`)
              .join("<br></br>");

          new maplibregl.Popup()
            .setLngLat(e.lngLat)
            .setHTML(descriptionString)
            .addTo(map);
        });
        map.on("mouseenter", "point-edits-layer", () => {
          map.getCanvas().style.cursor = "pointer";
        });

        // Change it back to a pointer when it leaves.
        map.on("mouseleave", "point-edits-layer", () => {
          map.getCanvas().style.cursor = "";
        });

        map.on("move", () => {
          const center = map.getCenter();
          const zoom = map.getZoom();
          document.getElementById("location-indicator").innerHTML =
            `Center: ${center.lng.toFixed(5)}, ${center.lat.toFixed(5)}<br>` +
            `Zoom: ${zoom.toFixed(2)}`;
        });
        map.fire("move"); // Trigger initial update

      });
    </script>
  </body>
</html>