Add Zurich boundary layer to the map

lumagician · Jan 11, 2024 · 8f9a0b0 · 8f9a0b0
1 parent fae2467
commit 8f9a0b0
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,8 +3,6 @@ import { useEffect } from 'react';
 import MapLibreGL from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
-
-
 function Map() {
  useEffect(() => {
  const map = new MapLibreGL.Map({
@@ -18,8 +16,27 @@ function Map() {
  new MapLibreGL.Marker()
  .setLngLat([8.5428242, 47.3669311])
  .addTo(map);
+
+ // load the boarder of burgdorf from the overpass api
+ map.addSource('zurich', {
+ type: 'geojson',
+ data: 'https://overpass-api.de/api/interpreter?data=[out:json];area[name=%22Z%C3%BCrich%22];(relation(area)[type=boundary][boundary=administrative];);out%20geom;'
+ });
+
+
+ map.addLayer({
+ id: 'zurich-layer',
+ type: 'fill',
+ source: 'zurich',
+ layout: {},
+ paint: {
+ 'fill-color': '#ff0000',
+ 'fill-opacity': 0.5
+ }
+ });
  });
  }, []);
+
  return <div id="map" style={{ width: '100%', height: '100vh' }} />;
 }