Read embedded GeoJSON

Author: simon04

OverpassVectorLayer.ts

@@ -2,6 +2,7 @@ import { Vector as VectorLayer } from "ol/layer";
 import { Vector as VectorSource } from "ol/source";
 import { type Rule, evaluateStyle, parseMapCSS } from "./mapcss";
 import { Geometry } from "ol/geom";
+import GeoJSON from "ol/format/GeoJSON";
 import OSMXML from "./OSMXML";
 import { splitQuerySubpart } from "./overpass";
 
@@ -12,16 +13,24 @@ export default class OverpassVectorLayer extends VectorLayer<
     const map = this.getMapInternal();
     const features = await Promise.all(
       splitQuerySubpart(query).map(({ query, subpart }) =>
-        this.executeQuery0(query, subpart),
+        /\/\/\/\s*@type geojson/dg.test(query)
+          ? this.readGeoJSON(query.replace(/\/\/\/.*/dg, ""), subpart)
+          : this.executeQuery0(query, subpart),
       ),
     );
     const vectorSource = new VectorSource({
-      features: features.reduce((a, b) => [...a, ...b]),
+      features: features.flat(),
     });
     this.setSource(vectorSource);
     map?.getView().fit(vectorSource.getExtent(), { padding: [24, 24, 24, 24] });
   }
 
+  private readGeoJSON(query: string, subpart = "") {
+    const features = new GeoJSON().readFeatures(query);
+    features.forEach((feature) => feature.set("@subpart", subpart));
+    return features;
+  }
+
   private async executeQuery0(query: string, subpart = "") {
     const map = this.getMapInternal();
     if (map) {

default.mapcss

@@ -50,3 +50,8 @@ relation:active {
   color: #f50;
   fill-color: #f50;
 }
+node[place=town] {
+  font: "bold 11pt / 1.0 sans-serif";
+  text-color: black;
+  text: name;
+}

main.ts

@@ -23,6 +23,18 @@ const defaultQuery = `
 relation(4740507);>;out geom;
 /// @subpart background
 //nwr[railway=rail]({{bbox}});out geom;
+/// @subpart town
+/// @type geojson
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": { "name": "Gars am Kamp", "place": "town" },
+      "geometry": { "type": "Point", "coordinates": [15.6594592, 48.5951053] }
+    }
+  ]
+}
 `.trim();
 const store = new (class Store {
   get query(): string {