Fix geojson source

Author: Stefan Kuethe

notebooks/layers/Untitled.ipynb

@@ -52,7 +52,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "f08204b538294150862d3323346f4dec",
+       "model_id": "ee4ebb74b08d4764ba14f4b4330800a8",
        "version_major": 2,
        "version_minor": 1
       },

src/openlayers/js/openlayers.anywidget.js

@@ -1,12 +1,12 @@
-import { type AnyModel } from "@anywidget/types";
-// import { transform as transformProj } from "ol/proj";
-import { parseClickEvent } from "./utils";
-
-// import "./style.css";
 import "ol/ol.css";
 
 import MapWidget from "./map";
+import { parseClickEvent } from "./utils";
 
+// --- Types
+import type { AnyModel } from "@anywidget/types";
+
+// --- Main function
 function render({ model, el }: { model: AnyModel; el: HTMLElement }): void {
   console.log("Welcome to ol-anywidget", el);
 
@@ -51,10 +51,6 @@ function render({ model, el }: { model: AnyModel; el: HTMLElement }): void {
     }
   });
 
-  // ...
-  const debugData = model.get("debug_data");
-  mapWidget.debugData(debugData);
-
   el.appendChild(mapElement);
 }
 

src/openlayers/js/openlayers.standalone.js

@@ -3,6 +3,7 @@ import FullScreenControl from 'ol/control/FullScreen.js';
 import ZoomSliderControl from 'ol/control/ZoomSlider.js';
 import MousePositionControl from 'ol/control/MousePosition.js';
 import OverviewMapControl from 'ol/control/OverviewMap.js';
+
 import { InfoBox } from './custom-controls';
 
 const controlCatalog: ControlCatalog = {
@@ -14,10 +15,4 @@ const controlCatalog: ControlCatalog = {
     InfoBox: InfoBox
 };
 
-/*
-function newControl(type: any, options: any): any {
-    return new controlCatalog[type](options);
-}
-*/
-
-export { controlCatalog }
+export { controlCatalog };

srcjs/ipywidget-ts/anywidget.ts

@@ -1,8 +1,6 @@
 import type { ViewOptions } from "ol/View";
 
 declare type MyMapOptions = {
-    // TODO: Pass View JSONDef instead of ViewOptions only
-    // viewOptions: ViewOptions | undefined;
     view: JSONDef;
     layers: JSONDef[] | undefined;
     controls: JSONDef[] | undefined;

srcjs/ipywidget-ts/controls.ts

@@ -50,7 +50,7 @@ class JSONConverter {
     parse(jsonDef: JSONDef): any {
         // console.log(this._catalog);
         const parsedOptions = this.parseOptions(jsonDef);
-        console.log("parsedOptions", parsedOptions);
+        console.log("parsed options", parsedOptions);
         console.log("type detected", jsonDef["@@type"]);
         return new this._catalog[jsonDef["@@type"]](parsedOptions);
     }

srcjs/ipywidget-ts/index.d.ts

@@ -2,9 +2,6 @@ import TileLayer from "ol/layer/Tile";
 import VectorLayer from "ol/layer/Vector";
 import WebGLVectorLayer from 'ol/layer/WebGLVector.js';
 import WebGLTileLayer from 'ol/layer/WebGLTile.js';
-// import BaseLayer from "ol/layer/Base";
-
-// import { newSource } from "./sources";
 
 const layerCatalog: LayerCatalog = {
     TileLayer: TileLayer,
@@ -13,13 +10,4 @@ const layerCatalog: LayerCatalog = {
     WebGLTileLayer: WebGLTileLayer
 };
 
-/*
-function newLayer(type: LayerCatalogKey, options: LayerOptions): any {
-    const sourceDef = options.source;
-    options.source = newSource(sourceDef.type, sourceDef.options);
-    const layer = new layerCatalog[type](options)
-    return layer;
-}
-*/
-
 export { layerCatalog };

srcjs/ipywidget-ts/json.ts

@@ -1,62 +1,33 @@
 import { Map, View } from "ol";
-// import type { ViewOptions } from "ol/View";
-
-// import TileLayer from "ol/layer/Tile";
-
-// import OSM from "ol/source/OSM";
-
 import { defaults as defaultControls } from 'ol/control/defaults.js';
-// import { MapOptions } from "ol/Map";
-
 import GeoJSON from "ol/format/GeoJSON";
-
 import Overlay from "ol/Overlay";
-
+import { fromLonLat } from "ol/proj";
 import { JSONConverter } from "./json";
+import { addTooltip2 } from "./tooltip2";
 
-// import { addTooltipTo } from "./tooltip"; // Uses an overlay
-import { addTooltip2 } from "./tooltip2"; // Uses custom div container
-
-// import { populatedPlacesLayer } from "./test-json-converter";
+// --- Types
 import type Layer from "ol/layer/Layer";
 import type Control from "ol/control/Control";
-
 import type VectorSource from "ol/source/Vector";
-
 import type VectorLayer from "ol/layer/Vector";
 import type WebGLVectorLayer from "ol/layer/WebGLVector";
-
-import { transform as transformProj, fromLonLat } from "ol/proj";
-
-// My types
-import type { MyMapOptions } from ".";
 import type { Coordinate } from "ol/coordinate";
+import type { MyMapOptions } from ".";
 
-// ...
-/*
-type LayerStore = {
-  [key: string]: Layer;
-};
-*/
-
-//
-/* 
-type ControlStore = {
-  [key: string]: Control;
-};
-*/
-
-//
 type Metadata = {
   layers: any[];
   controls: any[];
 };
 
+// --- Constants
+// TODO: Move to constants
 const TYPE_IDENTIFIER = "@@type";
 const GEOJSON_IDENTIFIER = "@@geojson";
 
 const jsonConverter = new JSONConverter();
 
+// --- Helpers
 function parseViewDef(viewDef: JSONDef): View {
   const view = jsonConverter.parse(viewDef) as View;
   const center = view.getCenter();
@@ -72,68 +43,30 @@ function parseViewDef(viewDef: JSONDef): View {
 
 function parseLayerDef(layerDef: JSONDef): Layer {
   const layer = jsonConverter.parse(layerDef);
+  console.log("layerDef", layerDef);
   layer.set("id", layerDef.id);
-  addGeojsonFeatures(layer, layerDef[GEOJSON_IDENTIFIER]);
+  addGeojsonFeatures(layer, layerDef["source"][GEOJSON_IDENTIFIER]);
   return layer;
 }
 
 function addGeojsonFeatures(layer: Layer, features: any): void {
-  if (features === undefined)
-    return;
-
-  const source = layer.getSource() as VectorSource;
-  source.addFeatures(new GeoJSON().readFeatures(features));
-  console.log("geojson features added", features);
+  if (features) {
+    const source = layer.getSource() as VectorSource;
+    source.addFeatures(new GeoJSON().readFeatures(features));
+    console.log("geojson features added", features);
+  }
 }
 
-
+// --- Base class
 export default class MapWidget {
   _container: HTMLElement;
   _map: Map;
   _metadata: Metadata = { layers: [], controls: [] };
 
   constructor(mapElement: HTMLElement, mapOptions: MyMapOptions) {
-    let baseLayers: Layer[] = [] // defaultLayers;
-    /*
-    if (mapOptions.layers !== undefined) {
-      for (let layerJSONDef of mapOptions.layers) {
-
-        // TODO: Duplicated code, use 'addLayer' after map was created instead
-        const layer = jsonConverter.parse(layerJSONDef);
-
-        // if (layerJSONDef.source["@@geojson"] !== undefined)
-        this.addGeoJSONToSource(layer, layerJSONDef.source["@@geojson"]);
-
-        baseLayers.push(layer);
-        this._layerStore[layerJSONDef.id] = layer;
-      }
-    }
-    */
-
-    let baseControls: Control[] = [];
-    // TODO: Use 'addControls' after map was created instead
-    /*
-    if (mapOptions.controls !== undefined) {
-      for (let controlJSONDef of mapOptions.controls) {
-        const control = jsonConverter.parse(controlJSONDef);
-        baseControls.push(control);
-        this._controlStore[controlJSONDef.id] = control;
-      }
-    }
-    */
-
-    // TODO: Move to func 'parseView'
-    /*
-    const view = jsonConverter.parse(mapOptions.view) as View;
-    const center = view.getCenter();
-    console.log("center", center)
-    if (center && view.getProjection().getCode() !== "EPSG:4326") {
-      const centerTransformed = fromLonLat(center);
-      console.log("centerTransformed", centerTransformed);
-      view.setCenter(centerTransformed);
-    }
-      */
     const view = parseViewDef(mapOptions.view);
+    let baseControls: Control[] = [];
+    let baseLayers: Layer[] = [];
 
     this._container = mapElement;
     this._map = new Map({
@@ -154,19 +87,9 @@ export default class MapWidget {
     }
   }
 
-  // TODO: Obsolete
-  /*
-  transformCenter(viewOptions: ViewOptions): ViewOptions {
-    const center = viewOptions.center;
-    if (center && viewOptions.projection !== "EPSG:4326") {
-      // console.log("center before", center);
-      viewOptions.center = fromLonLat(center);
-      // viewOptions.center = transformProj(center, "EPSG:4326", viewOptions.projection || "EPSG:3857");
-      // console.log("center after", viewOptions.center);
-    }
-    return viewOptions;
+  getElement(): HTMLElement {
+    return this._container;
   }
-  */
 
   getMap(): Map {
     return this._map;
@@ -188,32 +111,7 @@ export default class MapWidget {
 
   }
 
-  /*
-  addGeoJSONToSource(layer: Layer, geoJSONObject: any): void {
-    if (geoJSONObject === undefined)
-      return;
-
-    const source = layer.getSource() as VectorSource;
-    source.addFeatures(new GeoJSON().readFeatures(geoJSONObject));
-    console.log("geojsonObject added to VectorSource", geoJSONObject);
-  }
-  */
-
-  /*
-  addLayerOld(layerJSONDef: JSONDef): void {
-    const layer = jsonConverter.parse(layerJSONDef);
-    layer.set("id", layerJSONDef.id);
-
-    //if (layerJSONDef.source["@@geojson"] !== undefined)
-    this.addGeoJSONToSource(layer, layerJSONDef.source["@@geojson"]);
-
-    this._map.addLayer(layer);
-    this._layerStore[layerJSONDef.id] = layer;
-    console.log("layerStore", this._layerStore);
-  }
-  */
-
-  // --- Layers
+  // --- Layer methods
   getLayer(layerId: string): Layer | undefined {
     for (let layer of this._map.getLayers().getArray()) {
       if (layer.get("id") === layerId)
@@ -240,7 +138,23 @@ export default class MapWidget {
     }
   }
 
-  // --- Controls
+  setLayerStyle(layerId: string, style: any): void {
+    const layer = this.getLayer(layerId) as VectorLayer | WebGLVectorLayer;
+    if (layer) {
+      console.log("set layer style", layerId, style);
+      layer.setStyle(style)
+    }
+  }
+
+  applyCallToLayer(layerId: string, call: OLAnyWidgetCall): void {
+    console.log("run layer method", layerId);
+    const layer = this.getLayer(layerId);
+
+    // @ts-expect-error
+    layer[call.method](...call.args)
+  }
+
+  // --- Control methods
   getControl(controlId: string): Control | undefined {
     for (let control of this._map.getControls().getArray()) {
       if (control.get("id") === controlId)
@@ -268,32 +182,6 @@ export default class MapWidget {
     }
   }
 
-  // --- Misc
-  setLayerStyle(layerId: string, style: any): void {
-    const layer = this.getLayer(layerId) as VectorLayer | WebGLVectorLayer;
-    if (layer) {
-      console.log("set layer style", layerId, style);
-      layer.setStyle(style)
-    }
-  }
-
-  applyCallToLayer(layerId: string, call: OLAnyWidgetCall): void {
-    console.log("run layer method", layerId);
-    const layer = this.getLayer(layerId);
-
-    // @ts-expect-error
-    layer[call.method](...call.args)
-  }
-
-  // TODO: Remove
-  testJSONDef(jsonDef: JSONDef): any {
-    return jsonConverter.parse(jsonDef);
-  }
-
-  // TODO: Remove
-  debugData(data: any): void {
-  }
-
   // TODO: Test only at the moment
   addOverlay(position: Coordinate | undefined): void {
     const el = document.createElement("div");

srcjs/ipywidget-ts/layers.ts

@@ -3,10 +3,6 @@ import VectorSource from "ol/source/Vector";
 import GeoTIFFSource from 'ol/source/GeoTIFF.js';
 import ImageTileSource from "ol/source/ImageTile";
 
-// import { GeoJSON } from "ol/format";
-
-// import { OSM } from "ol/source";
-
 const sourceCatalog: SourceCatalog = {
     OSM: OSM,
     VectorSource: VectorSource,
@@ -15,22 +11,4 @@ const sourceCatalog: SourceCatalog = {
     ImageTileSource: ImageTileSource
 };
 
-/*
-function parseSourceOptions(options: SourceOptions): SourceOptions {
-    if (options.format === "geojson") {
-        options.format = new GeoJSON()
-    }
-
-    return options;
-}
-*/
-
-/*
-function newSource(type: SourceCatalogKey, options?: SourceOptions): any {
-    options = options ? parseSourceOptions(options) : options;
-    const source = new sourceCatalog[type](options)
-    return source;
-}
-*/
-
 export { sourceCatalog };