added evaluation table to maps

src/EvaluationTable.js

@@ -0,0 +1,54 @@
+import React from "react";
+import data from "./evaluation/metrics.json";
+import {Table} from 'reactstrap';
+import "./css/maps.css";
+
+export default class Google extends React.Component{
+  render() {
+    let categoryRow;
+    let metricRows = data.metrics.map((m, idx, metrics) => {
+      if(idx === 0 || metrics[idx-1].category!==m.category){
+        categoryRow = (<tr><th colSpan="3">{m.category}</th></tr>);
+      }else{
+        categoryRow = <></>
+      }
+      return (
+        <>
+          {categoryRow}
+          <tr key={idx}>
+            <td>{m.metric}</td>
+            <td>{m.rating[this.props.mapId]}</td>
+            <td>{m.comments[this.props.mapId]}</td>
+          </tr>
+        </>
+      )
+    })
+    return (
+      <div>
+        <Table>
+          <tbody>
+            <tr>
+              <th>Metrik</th>
+              <th>Bewertung</th>
+              <th>Kommentar</th>
+            </tr>
+            {metricRows}
+          </tbody>
+        </Table>
+      </div>
+    );
+  }
+}
+
+
+//
+//    <tr> for every metrik
+//
+//    if category != oldCat:
+//    <td> cat name in bold
+//    </tr>
+//    <tr>
+//
+//        <td> metrik name
+//        <td> if map == mapname
+//    </tr>

src/css/maps.css

@@ -73,4 +73,9 @@ button{
 
 .plot{
   width: 100%;
+}
+
+.table{
+  min-width: 400px;
+  max-width: 800px;
 }

src/evaluation/csvToJson.py

@@ -0,0 +1,39 @@
+import pandas as pd
+import json
+
+df = pd.read_csv("metrics.csv", delimiter=";")
+metrics = []
+category = ""
+df = df.fillna("")
+
+for i, row in df.iterrows():
+    newCat = row.get("Kategorie")
+    if type(newCat) == str and newCat != "":
+        category = newCat
+    rating = {
+        "pigeon": row.get("Pigeon"),
+        "leaflet": row.get("Leaflet"),
+        "mapgl": row.get("MapGL"),
+        "mapbox": row.get("Mapbox"),
+        "google": row.get("Google"),
+    }
+
+    comments = {
+        "pigeon": row.get("Kommentar Pigeon"),
+        "leaflet": row.get("Kommentar Leaflet"),
+#        "mapgl": row.get("Kommentar MapGL"),
+#        "mapbox": row.get("Kommentar Mapbox"),
+        "google": row.get("Kommentar Google"),
+    }
+
+    metrics.append({
+        "metric": row.get("Metrik"),
+        "number": row.get("Nummer"),
+        "category": category,
+        "rating": rating,
+        "comments": comments
+    })
+
+with open("metrics.json", "w") as jsonFile:
+    json.dump({"metrics": metrics}, jsonFile, indent=2)
+

src/evaluation/metrics.json

@@ -0,0 +1,684 @@
+{
+  "metrics": [
+    {
+      "metric": "Zoom",
+      "number": "F0",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 2.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 3.0
+      },
+      "comments": {
+        "pigeon": "m\u00f6glich, aber funktionen und buttons m\u00fcssen selbst implementiert werden",
+        "leaflet": "ZoomControl Component mit Position prop",
+        "google": "automatisch, Position/Style nicht ver\u00e4nderbar"
+      }
+    },
+    {
+      "metric": "draggable",
+      "number": "F1",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 3.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "install pigeon-draggable, als componente um marker herum",
+        "leaflet": "Marker prop",
+        "google": "draggable props"
+      }
+    },
+    {
+      "metric": "Directions api",
+      "number": "F2",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 0.0,
+        "leaflet": 0.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 3.0
+      },
+      "comments": {
+        "pigeon": "direkt mit Pigeon nicht m\u00f6glich, andere anbinden",
+        "leaflet": "keine eigene, evtl. externe einbinden",
+        "google": "eigene API, aber langsam und fehleranf\u00e4llig"
+      }
+    },
+    {
+      "metric": "Compass orientation?",
+      "number": "F3",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 0.0,
+        "leaflet": 0.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 0.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "map types (satellite, streets)",
+      "number": "F4",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 2.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 3.0
+      },
+      "comments": {
+        "pigeon": "abh\u00e4ngig vom tile provider (zb openstreepMap oder mapbox)",
+        "leaflet": "LayersControl Component (Button in Map)",
+        "google": "m\u00f6glich, aber Button nicht direkt implementierbar"
+      }
+    },
+    {
+      "metric": "Standort Button",
+      "number": "F5",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 0.0,
+        "leaflet": 2.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 0.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "keine Component aber implementierbar",
+        "google": ""
+      }
+    },
+    {
+      "metric": "Wege einzeichnen und bearbeiten",
+      "number": "F6",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 0.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "Polyline Component",
+        "google": ""
+      }
+    },
+    {
+      "metric": "Fl\u00e4chen einzeichnen und bearbeiten",
+      "number": "F7",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 2.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "Overlay, m\u00f6glich aber kompliziert, nicht f\u00fcr User zeichnen geeignet",
+        "leaflet": "react-leaflet-draw",
+        "google": "https://developers.google.com/maps/documentation/javascript/examples/polygon-simple"
+      }
+    },
+    {
+      "metric": "Tooltips",
+      "number": "F8",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 2.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "m\u00f6glich, custom Overlays, aber keine vorimplementierten Tooltips",
+        "leaflet": "Tooltip Component, permanent oder hover",
+        "google": ""
+      }
+    },
+    {
+      "metric": "Marker Beschriftungen",
+      "number": "F9",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 2.0,
+        "leaflet": 3.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "m\u00f6glich, custom Overlays, aber keine vorimplementierten Beschriftungen",
+        "leaflet": "permanent Tooltip mit css",
+        "google": "title prop"
+      }
+    },
+    {
+      "metric": "Marker custom image",
+      "number": "F10",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 3.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 3.0
+      },
+      "comments": {
+        "pigeon": "mit Marker nicht m\u00f6chlich, custom Overlay als Marker verwenden; seit Update 0.17 (Dezember) sind Farben m\u00f6chlich",
+        "leaflet": "Marker prop icon",
+        "google": "nur custom markers"
+      }
+    },
+    {
+      "metric": "Hover over markers?",
+      "number": "F11",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 2.0,
+        "leaflet": 2.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 3.0
+      },
+      "comments": {
+        "pigeon": "Design wird ge\u00e4ndernt bei hovern",
+        "leaflet": "riseOnHover, aktuellen Marker \u00fcber andere stellen",
+        "google": "Custom hover styles"
+      }
+    },
+    {
+      "metric": "Ma\u00dfstab einblenden",
+      "number": "F12",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 0.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 0.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "ScaleControl Component mit Position prop",
+        "google": ""
+      }
+    },
+    {
+      "metric": "Vollbildmodus",
+      "number": "F13",
+      "category": "Funktionen",
+      "rating": {
+        "pigeon": 0.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "https://github.com/ptma/Leaflet.Legend",
+        "google": ""
+      }
+    },
+    {
+      "metric": "bedienbar mit Tastatur",
+      "number": "B0",
+      "category": "Benutzerfreundlichkeit",
+      "rating": {
+        "pigeon": 0.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "Pfeiltasten, + -",
+        "google": ""
+      }
+    },
+    {
+      "metric": "bedienbar mit Mausrad, Doppelklick, ...",
+      "number": "B1",
+      "category": "Benutzerfreundlichkeit",
+      "rating": {
+        "pigeon": 4.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "seit Update 0.17",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "responsive (f\u00fcr Smartphone geeignet)",
+      "number": "B2",
+      "category": "Benutzerfreundlichkeit",
+      "rating": {
+        "pigeon": "",
+        "leaflet": "",
+        "mapgl": null,
+        "mapbox": "",
+        "google": ""
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "works without internet connection",
+      "number": "B3",
+      "category": "Benutzerfreundlichkeit",
+      "rating": {
+        "pigeon": "",
+        "leaflet": "",
+        "mapgl": null,
+        "mapbox": "",
+        "google": ""
+      },
+      "comments": {
+        "pigeon": "tiles werden nicht geladen",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "Performance bei 100 Markern",
+      "number": "P0",
+      "category": "Performance",
+      "rating": {
+        "pigeon": 1.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": 4.0,
+        "google": 2.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "Performance bei 1.000 Markern",
+      "number": "P1",
+      "category": "Performance",
+      "rating": {
+        "pigeon": 1.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": 4.0,
+        "google": 2.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "Performance bei 10.000 Markern",
+      "number": "P2",
+      "category": "Performance",
+      "rating": {
+        "pigeon": 1.0,
+        "leaflet": 0.0,
+        "mapgl": null,
+        "mapbox": 4.0,
+        "google": 1.0
+      },
+      "comments": {
+        "pigeon": "smooth, 10ms pro Update, 115727.240 for 500 steps",
+        "leaflet": "ruckelig, Duration 76217.835 for 500 steps",
+        "google": "ruckelig, Duration 191357.195 for 500 steps"
+      }
+    },
+    {
+      "metric": "Performance bei 100 bewegengen Marker ",
+      "number": "P3",
+      "category": "Performance",
+      "rating": {
+        "pigeon": "",
+        "leaflet": "",
+        "mapgl": null,
+        "mapbox": "",
+        "google": ""
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "Duration 250510.020 for 500 steps",
+        "google": "gleich ruckelig wie 100? anfangs schnell, dann langsam, Duration 286748.030 for 500 steps"
+      }
+    },
+    {
+      "metric": "Performance bei 1.000 bewegengen Marker ",
+      "number": "P4",
+      "category": "Performance",
+      "rating": {
+        "pigeon": "",
+        "leaflet": "",
+        "mapgl": null,
+        "mapbox": "",
+        "google": ""
+      },
+      "comments": {
+        "pigeon": "PC bei 15.000 immer noch nicht abgest\u00fcrzt aber Marker bewegen sich so langsam dass Bewegung kaum sichtbar ist",
+        "leaflet": "9.000 Crash, 8.000 schon Probleme (Browsert Fenster rendern nur halb)",
+        "google": ""
+      }
+    },
+    {
+      "metric": "Anzahl m\u00f6glicher Marker",
+      "number": "P5",
+      "category": "Performance",
+      "rating": {
+        "pigeon": 4.0,
+        "leaflet": 0.0,
+        "mapgl": null,
+        "mapbox": 4.0,
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "40.000",
+        "leaflet": "7.000 noch m\u00f6glich ohne Crash",
+        "google": "50.000 kein Crash, aber mehrere Sekunden pro Step"
+      }
+    },
+    {
+      "metric": "Anzahl m\u00f6glicher bewegender Marker",
+      "number": "P6",
+      "category": "Performance",
+      "rating": {
+        "pigeon": "",
+        "leaflet": "",
+        "mapgl": null,
+        "mapbox": "",
+        "google": ""
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "ausf\u00fchrliche Dokumentation",
+      "number": "D0",
+      "category": "Dokumentation",
+      "rating": {
+        "pigeon": 3.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 3.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": "nicht vollst\u00e4ndig"
+      }
+    },
+    {
+      "metric": "react spezifisch",
+      "number": "D1",
+      "category": "Dokumentation",
+      "rating": {
+        "pigeon": 4.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 3.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "mit Beispielen",
+      "number": "D2",
+      "category": "Dokumentation",
+      "rating": {
+        "pigeon": 2.0,
+        "leaflet": 3.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "nur ein Beispiel, deckt aber die meisten Funktionen ab",
+        "leaflet": "k\u00f6nnten noch ein paar mehr sein",
+        "google": ""
+      }
+    },
+    {
+      "metric": "Parameter aufgelistet",
+      "number": "D3",
+      "category": "Dokumentation",
+      "rating": {
+        "pigeon": 4.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 2.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": "nicht vollst\u00e4ndig"
+      }
+    },
+    {
+      "metric": "Eventhandler augelistet",
+      "number": "D4",
+      "category": "Dokumentation",
+      "rating": {
+        "pigeon": 4.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "get started example/introduction",
+      "number": "D5",
+      "category": "Dokumentation",
+      "rating": {
+        "pigeon": 4.0,
+        "leaflet": 3.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "werden alle zu installierenden Pakete/Erweiterungen in der Doku erw\u00e4hnt?",
+      "number": "I0",
+      "category": "Installation",
+      "rating": {
+        "pigeon": 4.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "direkte Benutzung (ohne Key zu erstellen)",
+      "number": "I1",
+      "category": "Installation",
+      "rating": {
+        "pigeon": 4.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 0.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": "Key erstellen, Zahlungskonto einrichten"
+      }
+    },
+    {
+      "metric": "kostenfrei",
+      "number": "I2",
+      "category": "Installation",
+      "rating": {
+        "pigeon": 4.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 0.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": "300\u20ac (200?) Guthaben, monatliche Rechnung, dann 2$ pro 1000 Aufrufe"
+      }
+    },
+    {
+      "metric": "Gr\u00f6\u00dfe der Dateien",
+      "number": "I3",
+      "category": "Installation",
+      "rating": {
+        "pigeon": "",
+        "leaflet": "",
+        "mapgl": null,
+        "mapbox": "",
+        "google": ""
+      },
+      "comments": {
+        "pigeon": "21,06 MB + 354 KB",
+        "leaflet": "11,51 MB + 429 KB",
+        "google": "3,32 MB"
+      }
+    },
+    {
+      "metric": "Wird noch gewartet",
+      "number": "I4",
+      "category": "Installation",
+      "rating": {
+        "pigeon": 4.0,
+        "leaflet": 4.0,
+        "mapgl": null,
+        "mapbox": "",
+        "google": 4.0
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "",
+      "number": "",
+      "category": "Installation",
+      "rating": {
+        "pigeon": "",
+        "leaflet": "",
+        "mapgl": null,
+        "mapbox": "",
+        "google": ""
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "",
+      "number": "",
+      "category": "Installation",
+      "rating": {
+        "pigeon": "",
+        "leaflet": "",
+        "mapgl": null,
+        "mapbox": "",
+        "google": ""
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "",
+      "number": "",
+      "category": "Installation",
+      "rating": {
+        "pigeon": "",
+        "leaflet": "",
+        "mapgl": null,
+        "mapbox": "",
+        "google": ""
+      },
+      "comments": {
+        "pigeon": "",
+        "leaflet": "",
+        "google": ""
+      }
+    },
+    {
+      "metric": "",
+      "number": "",
+      "category": "Installation",
+      "rating": {
+        "pigeon": "",
+        "leaflet": "",
+        "mapgl": null,
+        "mapbox": "",
+        "google": ""
+      },
+      "comments": {
+        "pigeon": "0",
+        "leaflet": "0",
+        "google": ""
+      }
+    }
+  ]
+}

src/maps/Google.js

@@ -6,6 +6,7 @@ import {calcDistance} from './../helpers/distance';
 import {longitude, latitude, mapWidth, mapHeight, markerIcon, testPath} from "./../config/variables";
 import {Button} from "reactstrap";
 import PathButtons from "./../PathButtons";
+import EvaluationTable from "./../EvaluationTable";
 
 const svgStyle = {
   top: "-20",
@@ -205,6 +206,8 @@ export default class Google extends React.Component{
 
           <PathButtons updateState={this.updateState} path={this.state.path}/>
         </div>
+
+        <EvaluationTable mapId="google"/>
       </div>
     );
   }

src/maps/Leaflet.js

@@ -19,6 +19,7 @@ import {Button} from "reactstrap";
 import PathButtons from "./../PathButtons";
 import {CustomInput, Input, Label, Row, Col, Container} from "reactstrap";
 import mapboxToken from "./../config/mapboxToken.js";
+import EvaluationTable from "./../EvaluationTable";
 
 
 const mapStyles = {
@@ -249,6 +250,8 @@ export default class Leaflet extends React.Component{
             </Container>
           </div>
         </div>
+
+        <EvaluationTable mapId="leaflet"/>
       </div>
     );
   }

src/maps/MapGL.js

@@ -22,6 +22,7 @@ import {
   DrawLineStringMode,
   DrawPolygonMode,
 } from "react-map-gl-draw";
+import EvaluationTable from "./../EvaluationTable";
 
 const drawModes = [
   {id: "drawPolyline", text: "Draw Polyline", handler: DrawLineStringMode},
@@ -261,6 +262,8 @@ export default class MapGL extends React.Component{
             </Container>
           </div>
         </div>
+
+        <EvaluationTable mapId="mapgl"/>
       </div>
     );
   }

src/maps/Mapbox.js

@@ -15,6 +15,7 @@ import {Button} from "reactstrap";
 import {getRoute, mapStyles} from "./../helpers/mapboxHelper";
 import PathButtons from "./../PathButtons";
 import {GeoJSONLayer} from "react-mapbox-gl";
+import EvaluationTable from "./../EvaluationTable";
 
 const Map = ReactMapboxGl({ accessToken: mapboxToken });
 
@@ -168,6 +169,8 @@ export default class Mapbox extends React.Component{
           </p>
           <PathButtons updateState={this.updateState} path={this.state.path} switchLatLng={true}/>
         </div>
+
+        <EvaluationTable mapId="mapbox"/>
       </div>
     );
   }

src/maps/Pigeon.js

@@ -6,6 +6,7 @@ import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 import {Button} from "reactstrap";
 import PathButtons from "./../PathButtons";
 import {calcDistance} from "./../helpers/distance";
+import EvaluationTable from "./../EvaluationTable";
 
 export default class Pigeon extends React.Component{
   constructor(props) {
@@ -139,6 +140,8 @@ export default class Pigeon extends React.Component{
           </p>
           <PathButtons updateState={this.updateState} path={this.state.path}/>
         </div>
+
+        <EvaluationTable mapId="pigeon"/>
       </div>
     );
   }