Search code examples
plotlymaps

How to inlay plotly plot into a map

I've created a polar chart in Plotly. I can post the code to create it if you wish, but here is an image of it.

enter image description here

What I need to do (and am unsure of the best way to accomplish it) is to insert it at a given lat, lon and be able to specify the radius of it (or at least control the size such that when the map is panned/zoomed it stays consistent). I investigated Plotly's maps but I don't see anything to even make an attempt at. Below is an example of what I'm trying to accomplish (although I need a much smaller diameter, this was just made in GIMP)

enter image description here

Any advice is appreciated.

Solution

  • So this was multi-faceted to complete, but in case anyone has a similar issue, I've found a way to do this. Tools used are Leaflet for the map and Plotly for the plot.

    HTML For Plot

    <plotly-plot #myPlot style="width: 100%; height: 100%; display: none;" 
   [data]="myGraph.data" [config]="myGraph.config"
   [layout]="myGraph.layout" [style]="myGraph.style">
</plotly-plot>

    First, you have to make sure that the plot's layout is configured correctly.

    layout : {
      autosize: true,
      polar: {
        radialaxis: {
          visible: false,
          range: [0, 1]          
        },
        bgcolor:'rgba(0,0,0,0)'
      },
      showlegend: false,
      paper_bgcolor: 'rgba(0,0,0,0)'  
    }

    Ensure that the background and plot to cover up the map.

    Next, we have to export the plot to an image.

    @ViewChild('myPlot') public myPlot: Plotly;
Plotly.toImage(this.myPlot, {
      format: 'png',
      height: 800,
      width: 800
    }).then((url) => {
      this.addPlotToMap(url);
    })

    Finally, add that to the map via an image layer. This will be a circle with a two mile radius.

    addPlotToMap(url){
    let TWO_MILE_RADIUS_IN_METERS = 3218.69;
    let imageBounds = L.latLng(44.671613, -89.733720).toBounds(TWO_MILE_RADIUS_IN_METERS)
    let overlay = L.imageOverlay(url,imageBounds);
    overlay.addTo(this.map);
  }