Lines on Mapbox in F#

How to draw a line on Map in F# with Plotly.

Plotly is known for its graphing libraries, but it's also a broader ecosystem for building interactive data apps, AI data analysis tools, and deploying and hosting Dash apps. Explore the full set of tools and platforms designed to help turn data into action. Discover Plotly.

Note: We are retiring documentation for R, MATLAB, Julia, and F#. Learn more about this change here.

In [1]:

#r "nuget: Plotly.NET,2.0.0-preview.8"
#r "nuget: Plotly.NET.Interactive,2.0.0-preview.8"
#r "nuget: FSharp.Data"

Installed Packages

FSharp.Data, 4.2.4
Plotly.NET, 2.0.0-preview.8
Plotly.NET.Interactive, 2.0.0-preview.8

Loading extensions from Plotly.NET.Interactive.dll

Added Kernel Extension including formatters for Plotly.NET charts.

Mapbox Access Token and Base Map Configuration¶

To plot on Mapbox maps with Plotly you may need a Mapbox account and a public Mapbox Access Token.

Lines on Mapbox maps¶

In [2]:

open Plotly.NET
open FSharp.Data
open Plotly.NET.TraceObjects
open Plotly.NET.LayoutObjects

let data = CsvFile.Load("https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv")

let getData state = data.Rows 
                        |> Seq.filter (fun row -> row.GetColumn("State") = state)
                        |> Seq.map (fun row -> row.GetColumn("lon"),row.GetColumn("lat"))

let newyorkData = getData "New York"
let ohioData = getData "Ohio"

[
    Chart.LineMapbox(newyorkData,Name="New York")
    Chart.LineMapbox(ohioData,Name="Ohio")
]
|> Chart.combine
|> Chart.withMapbox(mapBox = Mapbox.init(Style=StyleParam.MapboxStyle.StamenTerrain,Center=(-80.,41.),Zoom=3.))
|> Chart.withMarginSize(Left=0,Right=0,Top=0,Bottom=0)

Out[2]:

Lines on Mapbox maps using ScatterMapbox traces¶

This example uses Chart.ScatterMapbox and sets the mode attribute to a combination of markers and line.

In [3]:

[ 
    Chart.ScatterMapbox(longitudes = [ 10; 20; 30 ], latitudes = [ 10; 20; 30 ], mode = StyleParam.Mode.Lines_Markers)
    Chart.ScatterMapbox(longitudes = [ -50; -60; 40 ], latitudes = [ 30; 10; -20 ], mode = StyleParam.Mode.Lines_Markers) 
]

|> Chart.combine
|> Chart.withMarkerStyle (Size = 10)
|> Chart.withMarginSize (Left = 0, Right = 0, Top = 0, Bottom = 0)
|> Chart.withMapbox (Mapbox.init (Center = (10., 10.), Style = StyleParam.MapboxStyle.StamenTerrain, Zoom = 1.))

Out[3]: