show text output for data without features and geometry to display on the map (#35)

Author: RandomFractals

src/renderer/geoConverter.ts

@@ -58,7 +58,12 @@ export class GeoConverter {
     if (Array.isArray(objects)) {
       // create geo features collection
       geoJson = {type: 'FeatureCollection', features: []};
-      objects.forEach(item => geoJson.features.push(this.getFeature(item, settings)));
+      objects.forEach(item => {
+        const feature: any = this.getFeature(item, settings);
+        if (feature.geometry?.type !== undefined) { // has geometry type and coordinates
+          geoJson.features.push(feature);
+        }
+      });
       this.addOptionalProperties(geoJson, settings);
     } 
     else {

src/renderer/outputLoader.ts

@@ -249,6 +249,11 @@ export class OutputLoader {
     catch(error: any) {
       console.log('leaflet.map:data: GeoJSON parse error:\n', error);
     }
+    if (!geoData.features || geoData.features.length <= 0) {
+      // console.log(`leaflet.map:data:features: ${JSON.stringify(geoData.features, null, 2)}`);
+      // use parsed data input instead
+      return data;
+    }
     return geoData;
   }
 

src/renderer/renderer.ts

@@ -30,28 +30,22 @@ const leafletMap = require('./leafletMap.js');
   console.log(`leaflet.map:data:mimeType: ${output.mimeType}`);
   const outputLoader: OutputLoader = new OutputLoader(output.value, output.mimeType);
   let data: any = outputLoader.getData();
-  if (data.features) {  // has geometry features collection
+  if (data.features && data.features.length > 0) {  // has geometry features to display
     // create leaflet map and add it to notebook cell output display
     const mapContainer: HTMLDivElement = document.createElement('div');
     mapContainer.className = 'map-container';
     output.container.appendChild(mapContainer);
-    const map = leafletMap.createMap(data, mapContainer);
-  }
-  else {
-    // create text output display nodes
-    const pre = document.createElement('pre');
-    pre.className = 'text-output';
-    const code = document.createElement('code');
-    if (typeof data !== 'string') {
-      // stringify json data
-      code.textContent = JSON.stringify(data, null, 2);
+    try {
+      // try to load geo data into leaflet map
+      const map = leafletMap.createMap(data, mapContainer);
     }
-    else {
-      // show cell output text
-      code.textContent = output.value.text();
+    catch(error: any) {
+      console.error('leaflet.map:data: GeoJSON parse error:\n', error);
+      showTextData(data, output);
     }
-    pre.appendChild(code);
-    output.container.appendChild(pre);
+  }
+  else {
+    showTextData(data, output);
   }
 }
 
@@ -60,3 +54,23 @@ if (module.hot) {
     // cleanup or stash any state on renderer dispose
   });
 }
+
+/**
+ * Displays text data.
+ */
+function showTextData(data: any, output: IRenderInfo): void {
+  // create text output display nodes
+  const pre = document.createElement('pre');
+  pre.className = 'text-output';
+  const code = document.createElement('code');
+  if (typeof data !== 'string') {
+    // stringify json data
+    code.textContent = JSON.stringify(data, null, 2);
+  }
+  else {
+    // show cell output text
+    code.textContent = output.value.text();
+  }
+  pre.appendChild(code);
+  output.container.appendChild(pre);
+}