Visualization: Geo Maps

[wdanilo]

Summary

Integration of the deck.gl which allows interactive maps visualizations with a lot of possible, predefined layers, like heat maps, transportation paths, and more. Examples:

Specification

• The visualization should use the Using @deck.gl/core, which in contrast to the scripting api provides a declarative API, which is exactly what we need. Be sure to check the declarative playground! For more information check out the implementation, especially the setProps method.

• In order to use Mapbox (used internally by deck.gl), we need an account and token key. Create an Enso account using contact@enso.org email. @iamrecursion will help with it.

• The visualization input data should be JSON containing a description of the location, all effects, all layers, their parameters, etc. An example config is provided below (please note that location parameters are using different layout than the one provided by the Deck class):

  {
   latitude: 37.8,
   longitude: -122.45,
   zoom: 15,
   controller: true,
   layers: [
     new ScatterplotLayer({
       data: [
         {position: [-122.45, 37.8], color: [255, 0, 0], radius: 100}
       ],
       getColor: d => d.color,
       getRadius: d => d.radius
     })
    ]
  }

  Of course, a shorter version should work as well:

  {
   latitude: 37.8,
   longitude: -122.45
  }

• The visualization should be implemented as a JavaScript visualization, according to the JavaScript visualization type documentation and here.

• The visualization should be defined as a JavaScript file and should be placed in the right place, according to the engine specification - it should be an example visualization implementation, not an embedded visualization placed in Rust codebase!.

Acceptance Criteria & Test Cases

• Working visualization in IDE - should display a map for the given JSON input data.
• The following configurations should be tested and saved in some directory (not in IDE repo) as example JSON configs. Please note that this does NOT include any visible sliders in GUI changing the parameters. All parameters should be controlled only by the JSON data:
  • Map zoomed to San Francisco
  • This example
  • This example
  • This example
  • This example
  • This example
  • This example
• It should be possible to interact (zoom, pan, rotate) with the visualization using the touchpad and mouse wheel, after making the visualization active (after clicking the visualization). Making visualizations active is a part of another issue, but testing it in IDE is part of this issue and this issue should not be closed until it works 100% correctly.
• The visualization controls should be the same as our graphs (Mapbox exposes API to change that):
  • Panning should be done by two finger swipe gesture
  • Zooming should be done by pinching
  • Clicking and dragging should rotate the view.
• @sylwiabr should confirm that the visualization behaves correctly before merging this issue to the Main branch.

[BinarySoftware]

Some test code provided, should also be tested when ability to read files come:

mapExampleSanFrancisco = "{latitude: 37.8, longitude: -122.45, zoom: 10, mapStyle: 'mapbox://styles/mapbox/light-v9'}"

mapExampleScatterPlot = "{latitude:37.8,longitude:-122.45,zoom:12,controller:true,layers:[new deck.ScatterplotLayer({data:[{position: [-122.44, 37.8], color: [255, 0, 0], radius: 100},{position: [-122.45, 37.8], color: [0, 255, 0], radius: 100},{position: [-122.46, 37.8], color: [0, 0, 255], radius: 100}],getColor:d => d.color,getRadius:d => d.radius})]}"

mapExampleNewYork = "{longitude: -74,latitude: 40.76,controller: true,layers: [new deck.ScatterplotLayer({data: 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/scatterplot/manhattan.json',radiusScale: 10,radiusMinPixels: 0.5,getPosition: d => [d[0], d[1], 0],getColor: d => (d[2] === 1 ? [0, 128, 255] :  [255, 0, 128])})]}"

mapExampleGeoJsonLayer = "{latitude: 49.254,longitude: -123.13,pitch: 45,zoom:9,controller: true,layers:[new deck.GeoJsonLayer({data: 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json',opacity: 0.6,stroked: false,filled: true,extruded: true,wireframe: true,fp64: true,getElevation: f => Math.sqrt(f.properties.valuePerSqm) * 10,getFillColor: f => [100, 100, 100],getLineColor: f => [255, 255, 255],pickable: true})]}"

[sylwiabr]

It doesn't work with minimal example "{longitude: 53.15, latitude: 13.4}" -> map doesn't show up. also if I define datatype type Geo_Point latitude longitude and then call

main = Geo_Point 13.4 53.15

the visualisation does not work @BinarySoftware

[sylwiabr]

When opening 2 maps visualizations in IDE in best scenario I have wrong content in the visualization, worst scenario - all nodes disappear.