Popup containing a Plotly graph (vue-plotly)

[itsgifnotjiff]

I am trying to create a component that features a map with points on it (from a csv ideally) that will display a Plotly popup containing a graph based on the point selected. I am not sure where to start and would really appreciate if someone can help with a codepen. I have been able to that using Folium and python scripting but the Vue/Vuelayers/Vueplotly combo has got me at a lost.

[ghettovoice]

Hello @itsgifnotjiff , here is a simple demo https://codesandbox.io/s/vuelayers-plotly-11d5l?fontsize=14&hidenavigation=1&theme=dark.

I'm not a big expert with vue-plotly/plotly, so I just use simplest example from readme. In your case I guess you need to additionally load some graph data and you can make this in the created/mounted hooks of the Plot component.

[itsgifnotjiff]

This is a great starting point sir and thank you very much but is my understanding correct that the vl-source-vector must be a promise and if that is true is there a way I can load from a GeoJSON in assets? Also a general question about the VueLayers library, seeing it is a thin wrapper of OpenLayers, could I install OpenLayers and use modules from OL such say their GeoJSON function from ol/format/GeoJSON?

[ghettovoice]

is there a way I can load from a GeoJSON in assets?

1. load from local file with webpack json-loader you can just import json file with GeoJSON FeatureCollection, then pass the array to the vl-source-vector as features prop.

<template>
  <vl-source-vector :features="geojsonFeatures" />
</template>

<script>
import featuresCollection from '/path/to/assets/my_features.geojson'

export default {
  data () {
    return {
      geojsonFeatures: featuresCollection.features.slice(),
    }
  },
}
</script>

2. load from url the easiest way

<template>
  <vl-source-vector url="//example.com/my_geojson_features" :features.sync="geojsonFeatures" />
</template>

<script>
export default {
  data () {
    return {
      geojsonFeatures: [],
    }
  },
}
</script>

[ghettovoice]

could I install OpenLayers and use modules from OL such say their GeoJSON function from ol/format/GeoJSON?

OpenLayers already installed with VueLayers, so you can import/use anything from the ol package. If you want to fix ol package in your package.json dependencies, sure you can run :

• if you use vuelayers@0.11.x - npm install ol@5.
• with vuelayers@0.12.x - npm install ol@6