Lines on mapbox in Fsharp

<!DOCTYPE html> <html> <head>  <meta charset="utf-8" /> <link rel="canonical" href="https://plotly.com/fsharp/lines-on-mapbox/" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap" rel="stylesheet" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="/all_static/javascripts/algolia/instantsearch.js"></script> <script src="/all_static/javascripts/algolia/polyfill.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script> const theme = localStorage.getItem('theme'); if (theme === "dark-mode") { var root = document.getElementsByTagName('html')[0]; // '0' to assign the first (and only `HTML` tag) root.setAttribute('class', 'dark-mode'); } </script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script> <link href="https://esm.sh/@markprompt/css@0.18.0?css" rel="stylesheet" /> <link href="/all_static/css/markprompt.css" rel="stylesheet" />    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>  <script src="https://cdn.plot.ly/plotly-3.0.1.min.js"></script>   <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic|Ubuntu+Mono:400,700|Asap" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />  <link rel="stylesheet" type="text/css" href="/all_static/css/main.css?version=false" /> <link rel="stylesheet" type="text/css" href="/all_static/css/improve.css?version=2025-03-21-13-37">    <link rel="shortcut icon" href="https://dash.plotly.com/assets/favicon.ico" />   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N6T2RXG');</script>      <title> Lines on mapbox in Fsharp </title> <meta name="description" content=How to draw a line on Map in F# with Plotly.>  <meta name="msvalidate.01" content="D319859A832F9F1D15A7646E2A42150A" />  <meta property="og:title" content= Lines on mapbox in Fsharp /> <meta property="og:type" content="website"/> <meta property="og:image" content="https://images.plot.ly/plotly-documentation/thumbnail/line_mapbox.jpg"> <meta property="og:description" content=How to draw a line on Map in F# with Plotly./> <meta property="og:url" /> <meta property="fb:admins" content="1123751525"/> <meta property="fb:admins" content="22418"/>  <meta name="twitter:card" content="photo" /> <meta name="twitter:title" content= Lines on mapbox in Fsharp /> <meta name="twitter:url" content="https://plotly.com/fsharp/lines-on-mapbox/"/> <meta name="twitter:description" content=How to draw a line on Map in F# with Plotly./> <meta name="twitter:image" content="https://images.plot.ly/plotly-documentation/thumbnail/line_mapbox.jpg"> <meta name="twitter:site" content="@plotlygraphs"/> </head> <body data-spy="scroll" data-target=".watch" style="position:relative;" class="darkmode">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N6T2RXG" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div class="menu-mobile"> <div class="switch-mode"> <div class="icon-dark"></div> <div class="switch"></div> <div class="icon-light"></div> </div> <div class="close-menu"></div> <ul> <li><a style="font-weight: bold;" href="https://community.plotly.com/c/plotly-r-matlab-julia-net/29">Forum</a> </li> <li><a style="font-weight: bold;" href="https://plotly.com/get-pricing/">Pricing</a></li> <li><a style="font-weight: bold;" href="https://dash.plotly.com">Dash</a></li>  </ul> </div> <div class="header-container"> <header class="header-main --default"> <div class="--wrap"> <div class="--wrap-left"> <div class="-identity"> <a href="https://plotly.com/"><img src="/all_static/images/graphing_library_dark.svg" style="height: 30px;" class="logo-dark"></a> <a href="/graphing-libraries/"><img src="/all_static/images/graphing_library.svg" style="height: 30px;" class="logo-white"></a> </div> </div> <div class="--wrap-right"> <nav class="--nav-meta" role="navigation"> <ul> <li class="languages"> <a class="fsharp"> <div class="icon"></div> F# </a> <ul> <li> <a href="https://plotly.com/python/" class="python"> <div class="icon"></div>Python (v6.0.1) </a> </li> <li> <a href="https://plotly.com/r/" class="r"> <div class="icon"></div>R </a> </li> <li> <a href="https://plotly.com/julia/" class="julia"> <div class="icon"></div>Julia </a> </li> <li> <a href="https://plotly.com/javascript/" class="plotly_js"> <div class="icon"></div>Javascript (v3.0.1) </a> </li> <li> <a href="https://plotly.com/ggplot2/" class="ggplot2"> <div class="icon"></div>ggplot2 </a> </li> <li> <a href="https://plotly.com/matlab/" class="matlab"> <div class="icon"></div>MATLAB </a> </li> <li> <a href="https://plotly.com/fsharp/" class="fsharp"> <div class="icon"></div>F# </a> </li> <li> <a href="https://dash.plotly.com/" class="dash"> <div class="icon"></div>Dash </a> </li> </ul> </li> <li><a style="font-weight: bold;" href="https://community.plotly.com/c/plotly-r-matlab-julia-net/29">Forum</a> </li> <li><a style="font-weight: bold;" href="https://plotly.com/get-pricing/">Pricing</a></li> <li><a style="font-weight: bold;" href="https://dash.plotly.com">Dash</a></li>  <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=Plotly.NET&type=star&count=true&size=large" style="padding-top: 5px;" frameborder="0" scrolling="0" width="160px" height="40px"></iframe> </ul> <div class="switch-mode"> <div class="icon-dark"></div> <div class="switch"></div> <div class="icon-light"></div> </div> </nav> </div> <div class="menu-icon"> <span></span><span></span><span></span> </div> </div> </header> </div> <main class="--page page--single --index"> <div class="--wrap">   <aside class="--sidebar-container"> <div class="--sidebar-fixed reference" data-spy="affix" id="where"> <div class="brand"> <a href="/graphing-libraries/"><img src="/all_static/images/graphing_library.svg" style="height: 30px;"></a> </div> <details style="color: white;margin-top: 20px;" > <summary>Quick Reference</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list" style="margin-left: 15px;">  <li class="--sidebar-item"> <a href="/fsharp/getting-started" class="js-splash--navigation-item">Getting Started</a> </li>        <li class="--sidebar-item"> <a target="_blank" href="https://github.com/plotly/plotly.net" class="js-splash--navigation-item">GitHub</a> </li> <li class="--sidebar-item"> <a target="_blank" href="http://community.plotly.com/" class="js-splash--navigation-item">community.plotly.com</a> </li> </ul> </nav> </details> <details style="color: white;margin-top: 20px;" open> <summary>On This Page</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list" id="nav_header_insertion_list"></ul> </nav> </details> </div> <a href="https://go.plotly.com/elevate-your-analytics?utm_source=Webinar:%20Dash%20Enterprise%205.7&utm_medium=graphing_libraries&utm_content=sidebar" target="_blank"> <img src="https://images.prismic.io/plotly-marketing-website-2/Z9mL0DiBA97Gimoh_Square_ads.jpg?auto=format,compress" style="width: 200px; height: 200px; position: fixed; bottom: 10px; left: 50px" alt="Sign up for the upcoming webinar: Elevate Your Analytics with Plotly Dash Enterprise 5.7"> </a> </aside>  <section class="--page-body --tutorial-index --base"> <header class="--welcome"> <div class="--welcome-body">  <div class="--title"> <div class="--body"> <div class="nav-breadcrumb-container"> <div> <div class="breadcrumb-nav"> <a href="/fsharp"> FSharp </a> > <a href="/fsharp/maps">Maps</a> > <span>Lines on Mapbox</span> </div> </div> <div class="nav-breadcrumb-right"> <div class="--fork"> <a id="forklink" href= "https://github.com/plotly/plotly.net-docs/edit/main/fsharp/_posts/fsharp/html/fsharp/2019-07-03-lines-on-mapbox.html" > <div class="icon"> <svg style="width:20px;height:20px" viewbox="0 0 24 24"> <path fill="#000000" d="M2.6,10.59L8.38,4.8L10.07,6.5C9.83,7.35 10.22,8.28 11,8.73V14.27C10.4,14.61 10,15.26 10,16A2,2 0 0,0 12,18A2,2 0 0,0 14,16C14,15.26 13.6,14.61 13,14.27V9.41L15.07,11.5C15,11.65 15,11.82 15,12A2,2 0 0,0 17,14A2,2 0 0,0 19,12A2,2 0 0,0 17,10C16.82,10 16.65,10 16.5,10.07L13.93,7.5C14.19,6.57 13.71,5.55 12.78,5.16C12.35,5 11.9,4.96 11.5,5.07L9.8,3.38L10.59,2.6C11.37,1.81 12.63,1.81 13.41,2.6L21.4,10.59C22.19,11.37 22.19,12.63 21.4,13.41L13.41,21.4C12.63,22.19 11.37,22.19 10.59,21.4L2.6,13.41C1.81,12.63 1.81,11.37 2.6,10.59Z"> </path> </svg> </div> <span>Suggest an edit to this page</span> </a> </div> </div> </div> <h1> Lines on Mapbox in F# </h1> <p>How to draw a line on Map in F# with Plotly. </p> <br>  </div> </div> </div> </header>  <section class="tutorial-content"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js"></script> <div class="cell border-box-sizing code_cell rendered"> <div class="input"> <div class="prompt input_prompt">In [1]:</div> <div class="inner_cell"> <div class="input_area"> <div class=" highlight hl-fsharp"><pre><span></span><span class="o">#</span><span class="n">r</span> <span class="s">"nuget: Plotly.NET,2.0.0-preview.8"</span> <span class="o">#</span><span class="n">r</span> <span class="s">"nuget: Plotly.NET.Interactive,2.0.0-preview.8"</span> <span class="o">#</span><span class="n">r</span> <span class="s">"nuget: FSharp.Data"</span> </pre></div> </div> </div> </div> <div class="output_wrapper"> <div class="output"> <div class="output_area"> <div class="prompt"></div> <div class="output_html rendered_html output_subarea "> <div> <div id='dotnet-interactive-this-cell-7868.Microsoft.DotNet.Interactive.Http.HttpPort' style='display: none'> The below script needs to be able to find the current output cell; this is an easy method to get it. </div> <script type='text/javascript'> async function probeAddresses(probingAddresses) { function timeout(ms, promise) { return new Promise(function (resolve, reject) { setTimeout(function () { reject(new Error('timeout')) }, ms) promise.then(resolve, reject) }) } if (Array.isArray(probingAddresses)) { for (let i = 0; i < probingAddresses.length; i++) { let rootUrl = probingAddresses[i]; if (!rootUrl.endsWith('/')) { rootUrl = `${rootUrl}/`; } try { let response = await timeout(1000, fetch(`${rootUrl}discovery`, { method: 'POST', cache: 'no-cache', mode: 'cors', timeout: 1000, headers: { 'Content-Type': 'text/plain' }, body: probingAddresses[i] })); if (response.status == 200) { return rootUrl; } } catch (e) { } } } } function loadDotnetInteractiveApi() { probeAddresses(["http://192.168.0.3:1000/", "http://127.0.0.1:1000/"]) .then((root) => { // use probing to find host url and api resources // load interactive helpers and language services let dotnetInteractiveRequire = require.config({ context: '7868.Microsoft.DotNet.Interactive.Http.HttpPort', paths: { 'dotnet-interactive': `${root}resources` } }) || require; window.dotnetInteractiveRequire = dotnetInteractiveRequire; window.configureRequireFromExtension = function(extensionName, extensionCacheBuster) { let paths = {}; paths[extensionName] = `${root}extensions/${extensionName}/resources/`; let internalRequire = require.config({ context: extensionCacheBuster, paths: paths, urlArgs: `cacheBuster=${extensionCacheBuster}` }) || require; return internalRequire }; dotnetInteractiveRequire([ 'dotnet-interactive/dotnet-interactive' ], function (dotnet) { dotnet.init(window); }, function (error) { console.log(error); } ); }) .catch(error => {console.log(error);}); } // ensure `require` is available globally if ((typeof(require) !== typeof(Function)) || (typeof(require.config) !== typeof(Function))) { let require_script = document.createElement('script'); require_script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js'); require_script.setAttribute('type', 'text/javascript'); require_script.onload = function() { loadDotnetInteractiveApi(); }; document.getElementsByTagName('head')[0].appendChild(require_script); } else { loadDotnetInteractiveApi(); } </script> </div> </div> </div> <div class="output_area"> <div class="prompt"></div> <div class="output_html rendered_html output_subarea "> <div><div></div><div></div><div><strong>Installed Packages</strong><ul><li><span>FSharp.Data, 4.2.4</span></li><li><span>Plotly.NET, 2.0.0-preview.8</span></li><li><span>Plotly.NET.Interactive, 2.0.0-preview.8</span></li></ul></div></div> </div> </div> <div class="output_area"> <div class="prompt"></div> <div class="output_markdown rendered_html output_subarea "> <p>Loading extensions from <code>Plotly.NET.Interactive.dll</code></p> </div> </div> <div class="output_area"> <div class="prompt"></div> <div class="output_markdown rendered_html output_subarea "> <p>Added Kernel Extension including formatters for Plotly.NET charts.</p> </div> </div> </div> </div> </div> <div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt"> </div><div class="inner_cell"> <div class="text_cell_render border-box-sizing rendered_html"> <h1 id="Mapbox-Access-Token-and-Base-Map-Configuration">Mapbox Access Token and Base Map Configuration<a class="anchor-link" href="#Mapbox-Access-Token-and-Base-Map-Configuration">¶</a></h1><p>To plot on Mapbox maps with Plotly you may need a Mapbox account and a public <a href="url" target="https://www.mapbox.com/studio">Mapbox Access Token</a>.</p> </div> </div> </div> <div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt"> </div><div class="inner_cell"> <div class="text_cell_render border-box-sizing rendered_html"> <h1 id="Lines-on-Mapbox-maps">Lines on Mapbox maps<a class="anchor-link" href="#Lines-on-Mapbox-maps">¶</a></h1> </div> </div> </div> <div class="cell border-box-sizing code_cell rendered"> <div class="input"> <div class="prompt input_prompt">In [2]:</div> <div class="inner_cell"> <div class="input_area"> <div class=" highlight hl-fsharp"><pre><span></span><span class="k">open</span> <span class="nn">Plotly.NET</span> <span class="k">open</span> <span class="nn">FSharp.Data</span> <span class="k">open</span> <span class="nn">Plotly.NET.TraceObjects</span> <span class="k">open</span> <span class="nn">Plotly.NET.LayoutObjects</span> <span class="k">let</span> <span class="nv">data</span> <span class="o">=</span> <span class="nn">CsvFile</span><span class="p">.</span><span class="n">Load</span><span class="o">(</span><span class="s">"https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv"</span><span class="o">)</span> <span class="k">let</span> <span class="nv">getData</span> <span class="n">state</span> <span class="o">=</span> <span class="n">data</span><span class="o">.</span><span class="n">Rows</span> <span class="o">|></span> <span class="nn">Seq</span><span class="p">.</span><span class="n">filter</span> <span class="o">(</span><span class="k">fun</span> <span class="n">row</span> <span class="o">-></span> <span class="n">row</span><span class="o">.</span><span class="n">GetColumn</span><span class="o">(</span><span class="s">"State"</span><span class="o">)</span> <span class="o">=</span> <span class="n">state</span><span class="o">)</span> <span class="o">|></span> <span class="nn">Seq</span><span class="p">.</span><span class="n">map</span> <span class="o">(</span><span class="k">fun</span> <span class="n">row</span> <span class="o">-></span> <span class="n">row</span><span class="o">.</span><span class="n">GetColumn</span><span class="o">(</span><span class="s">"lon"</span><span class="o">),</span><span class="n">row</span><span class="o">.</span><span class="n">GetColumn</span><span class="o">(</span><span class="s">"lat"</span><span class="o">))</span> <span class="k">let</span> <span class="nv">newyorkData</span> <span class="o">=</span> <span class="n">getData</span> <span class="s">"New York"</span> <span class="k">let</span> <span class="nv">ohioData</span> <span class="o">=</span> <span class="n">getData</span> <span class="s">"Ohio"</span> <span class="o">[</span> <span class="nn">Chart</span><span class="p">.</span><span class="n">LineMapbox</span><span class="o">(</span><span class="n">newyorkData</span><span class="o">,</span><span class="n">Name</span><span class="o">=</span><span class="s">"New York"</span><span class="o">)</span> <span class="nn">Chart</span><span class="p">.</span><span class="n">LineMapbox</span><span class="o">(</span><span class="n">ohioData</span><span class="o">,</span><span class="n">Name</span><span class="o">=</span><span class="s">"Ohio"</span><span class="o">)</span> <span class="o">]</span> <span class="o">|></span> <span class="nn">Chart</span><span class="p">.</span><span class="n">combine</span> <span class="o">|></span> <span class="nn">Chart</span><span class="p">.</span><span class="n">withMapbox</span><span class="o">(</span><span class="n">mapBox</span> <span class="o">=</span> <span class="nn">Mapbox</span><span class="p">.</span><span class="n">init</span><span class="o">(</span><span class="n">Style</span><span class="o">=</span><span class="nn">StyleParam</span><span class="p">.</span><span class="nn">MapboxStyle</span><span class="p">.</span><span class="n">StamenTerrain</span><span class="o">,</span><span class="n">Center</span><span class="o">=(-</span><span class="mi">80</span><span class="o">.,</span><span class="mi">41</span><span class="o">.),</span><span class="n">Zoom</span><span class="o">=</span><span class="mi">3</span><span class="o">.))</span> <span class="o">|></span> <span class="nn">Chart</span><span class="p">.</span><span class="n">withMarginSize</span><span class="o">(</span><span class="n">Left</span><span class="o">=</span><span class="mi">0</span><span class="o">,</span><span class="n">Right</span><span class="o">=</span><span class="mi">0</span><span class="o">,</span><span class="n">Top</span><span class="o">=</span><span class="mi">0</span><span class="o">,</span><span class="n">Bottom</span><span class="o">=</span><span class="mi">0</span><span class="o">)</span> </pre></div> </div> </div> </div> <div class="output_wrapper"> <div class="output"> <div class="output_area"> <div class="prompt output_prompt">Out[2]:</div> <div class="output_html rendered_html output_subarea output_execute_result"> <div id="c585f39c-8ee7-45ca-9714-789f7af001bb" style="width: 600px; height: 600px;"></div> <script type="text/javascript"> var renderPlotly_c585f39c8ee745ca9714789f7af001bb = function() { var fsharpPlotlyRequire = requirejs.config({context:'fsharp-plotly',paths:{plotly:'https://cdn.plot.ly/plotly-latest.min'}}) || require; fsharpPlotlyRequire(['plotly'], function(Plotly) { var data = [{"type":"scattermapbox","mode":"lines","lon":["-78.8783689","-73.8370786","-73.93956870000001","-75.9179738","-73.7562317","-77.61092190000001","-73.8987469","-79.03773879999999","-73.6187397","-73.78235490000002","-73.69178509999999","-76.1474244","-73.7084645","-73.58318349999999","-73.76290970000001","-75.232664","-74.00594129999999"],"lat":["42.8864468","40.9125992","42.8142432","42.0986867","42.65257929999999","43.16103","40.9312099","43.0962143","40.706212799999996","40.9114882","42.7284117","43.0481221","40.664269899999994","40.65760220000001","41.0339862","43.100903","40.7127837"],"name":"New York","line":{},"marker":{}},{"type":"scattermapbox","mode":"lines","lon":["-81.6943605","-84.1052256","-82.59932940000002","-84.16882740000001","-82.9987942","-81.48455849999999","-83.09296440000001","-84.56031870000001","-81.72290859999998","-84.5120196","-83.555212","-80.6495194","-82.51544709999999","-83.11407709999999","-83.6499321","-81.83569","-84.1916069","-81.5267873","-80.81841659999999","-84.1246608","-84.5613355","-83.8088171","-81.339552","-82.10764859999999","-84.39827629999999","-82.4012642","-82.9290696","-81.51900529999999","-82.18237459999999","-84.0632685","-81.7981908","-81.378447","-81.556235"],"lat":["41.499320000000004","40.742551","39.71367539999999","39.6895036","39.9611755","41.133944899999996","39.881451899999995","39.345467299999996","41.404774200000006","39.103118200000004","41.6639383","41.0997803","40.758390000000006","40.0992294","41.04422","41.3144966","39.758947799999994","41.5931049","41.237556899999994","39.843947","39.3995008","39.9242266","41.666157299999995","41.36837979999999","39.5150576","40.0581205","40.126174299999995","41.081444700000006","41.452819","39.7092262","41.481993200000005","40.7989473","41.5200518"],"name":"Ohio","line":{},"marker":{}}]; var layout = {"mapbox":{"style":"stamen-terrain","center":{"lon":-80.0,"lat":41.0},"zoom":3.0},"margin":{"l":0,"r":0,"t":0,"b":0}}; var config = {}; Plotly.newPlot('c585f39c-8ee7-45ca-9714-789f7af001bb', data, layout, config); }); }; if ((typeof(requirejs) !== typeof(Function)) || (typeof(requirejs.config) !== typeof(Function))) { var script = document.createElement("script"); script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"); script.onload = function(){ renderPlotly_c585f39c8ee745ca9714789f7af001bb(); }; document.getElementsByTagName("head")[0].appendChild(script); } else { renderPlotly_c585f39c8ee745ca9714789f7af001bb(); } </script> </div> </div> </div> </div> </div> <div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt"> </div><div class="inner_cell"> <div class="text_cell_render border-box-sizing rendered_html"> <h1 id="Lines-on-Mapbox-maps-using-ScatterMapbox-traces">Lines on Mapbox maps using ScatterMapbox traces<a class="anchor-link" href="#Lines-on-Mapbox-maps-using-ScatterMapbox-traces">¶</a></h1><p>This example uses Chart.ScatterMapbox and sets the mode attribute to a combination of markers and line.</p> </div> </div> </div> <div class="cell border-box-sizing code_cell rendered"> <div class="input"> <div class="prompt input_prompt">In [3]:</div> <div class="inner_cell"> <div class="input_area"> <div class=" highlight hl-fsharp"><pre><span></span><span class="o">[</span> <span class="nn">Chart</span><span class="p">.</span><span class="n">ScatterMapbox</span><span class="o">(</span><span class="n">longitudes</span> <span class="o">=</span> <span class="o">[</span> <span class="mi">10</span><span class="o">;</span> <span class="mi">20</span><span class="o">;</span> <span class="mi">30</span> <span class="o">],</span> <span class="n">latitudes</span> <span class="o">=</span> <span class="o">[</span> <span class="mi">10</span><span class="o">;</span> <span class="mi">20</span><span class="o">;</span> <span class="mi">30</span> <span class="o">],</span> <span class="n">mode</span> <span class="o">=</span> <span class="nn">StyleParam</span><span class="p">.</span><span class="nn">Mode</span><span class="p">.</span><span class="n">Lines_Markers</span><span class="o">)</span> <span class="nn">Chart</span><span class="p">.</span><span class="n">ScatterMapbox</span><span class="o">(</span><span class="n">longitudes</span> <span class="o">=</span> <span class="o">[</span> <span class="o">-</span><span class="mi">50</span><span class="o">;</span> <span class="o">-</span><span class="mi">60</span><span class="o">;</span> <span class="mi">40</span> <span class="o">],</span> <span class="n">latitudes</span> <span class="o">=</span> <span class="o">[</span> <span class="mi">30</span><span class="o">;</span> <span class="mi">10</span><span class="o">;</span> <span class="o">-</span><span class="mi">20</span> <span class="o">],</span> <span class="n">mode</span> <span class="o">=</span> <span class="nn">StyleParam</span><span class="p">.</span><span class="nn">Mode</span><span class="p">.</span><span class="n">Lines_Markers</span><span class="o">)</span> <span class="o">]</span> <span class="o">|></span> <span class="nn">Chart</span><span class="p">.</span><span class="n">combine</span> <span class="o">|></span> <span class="nn">Chart</span><span class="p">.</span><span class="n">withMarkerStyle</span> <span class="o">(</span><span class="n">Size</span> <span class="o">=</span> <span class="mi">10</span><span class="o">)</span> <span class="o">|></span> <span class="nn">Chart</span><span class="p">.</span><span class="n">withMarginSize</span> <span class="o">(</span><span class="n">Left</span> <span class="o">=</span> <span class="mi">0</span><span class="o">,</span> <span class="n">Right</span> <span class="o">=</span> <span class="mi">0</span><span class="o">,</span> <span class="n">Top</span> <span class="o">=</span> <span class="mi">0</span><span class="o">,</span> <span class="n">Bottom</span> <span class="o">=</span> <span class="mi">0</span><span class="o">)</span> <span class="o">|></span> <span class="nn">Chart</span><span class="p">.</span><span class="n">withMapbox</span> <span class="o">(</span><span class="nn">Mapbox</span><span class="p">.</span><span class="n">init</span> <span class="o">(</span><span class="n">Center</span> <span class="o">=</span> <span class="o">(</span><span class="mi">10</span><span class="o">.,</span> <span class="mi">10</span><span class="o">.),</span> <span class="n">Style</span> <span class="o">=</span> <span class="nn">StyleParam</span><span class="p">.</span><span class="nn">MapboxStyle</span><span class="p">.</span><span class="n">StamenTerrain</span><span class="o">,</span> <span class="n">Zoom</span> <span class="o">=</span> <span class="mi">1</span><span class="o">.))</span> </pre></div> </div> </div> </div> <div class="output_wrapper"> <div class="output"> <div class="output_area"> <div class="prompt output_prompt">Out[3]:</div> <div class="output_html rendered_html output_subarea output_execute_result"> <div id="08a24bb6-50dd-4b51-82f9-2529e4e34c97" style="width: 600px; height: 600px;"></div> <script type="text/javascript"> var renderPlotly_08a24bb650dd4b5182f92529e4e34c97 = function() { var fsharpPlotlyRequire = requirejs.config({context:'fsharp-plotly',paths:{plotly:'https://cdn.plot.ly/plotly-latest.min'}}) || require; fsharpPlotlyRequire(['plotly'], function(Plotly) { var data = [{"type":"scattermapbox","mode":"lines+markers","lon":[10,20,30],"lat":[10,20,30],"line":{},"marker":{"size":10}},{"type":"scattermapbox","mode":"lines+markers","lon":[-50,-60,40],"lat":[30,10,-20],"line":{},"marker":{"size":10}}]; var layout = {"margin":{"l":0,"r":0,"t":0,"b":0},"mapbox":{"style":"stamen-terrain","center":{"lon":10.0,"lat":10.0},"zoom":1.0}}; var config = {}; Plotly.newPlot('08a24bb6-50dd-4b51-82f9-2529e4e34c97', data, layout, config); }); }; if ((typeof(requirejs) !== typeof(Function)) || (typeof(requirejs.config) !== typeof(Function))) { var script = document.createElement("script"); script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"); script.onload = function(){ renderPlotly_08a24bb650dd4b5182f92529e4e34c97(); }; document.getElementsByTagName("head")[0].appendChild(script); } else { renderPlotly_08a24bb650dd4b5182f92529e4e34c97(); } </script> </div> </div> </div> </div> </div> </section>  </section> </div> </main> <script> var array = []; $('.tutorial-content :header:not(h6)').each(function (i, e) { var item = $(e); var itemText = item.text(); var hash = itemText.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').replace(/^-+|-+$/g, '').toLowerCase(); item.attr("id", hash); array.push({text: itemText, tag: item.prop("tagName"), hash: hash}); }); $("#nav_header_insertion_list").html(array.map(function(entry) { var text = entry.text.replace(/[^a-z0-9\s\.:\-\?\!)]/gi, ''); if(entry.tag.toLowerCase() < "h4"){ return('<li class="--sidebar-item"><a href="#' + entry.hash + '">' + text + '</a></li>'); } else { return('<li class="--sidebar-item"><a href="#' + entry.hash + '">' + text + '</a></li>'); } }).join("")); //$(".tutorial-content :header:not(h6)").append( "\<div class=\"icon copy\" data-tooltip=\"Click to copy direct link\"><svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\"><path fill=\"#000000\" d=\"M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z\"/> </svg> </div>"); </script> <footer class="--footer-main"> <section class="--footer-top"> <div class="--wrap"> <ul class="--footer-body"> <li class="--footer-column"> <h6 style="color:#119dff" class="--footer-heading">JOIN OUR MAILING LIST</h6>			 <ul> 				 <li> <p class="subscribe-text"> Sign up to stay in the loop with all things Plotly — from Dash Club to product updates, webinars, and more!</p> <a href="https://go.plot.ly/subscription" class="subscribe-button" target="_blank"> Subscribe </a> </li> </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#e763fa" class="--footer-heading">Products</h6>			 <ul> <li><a href="https://plotly.com/dash/" target="_self">Dash</a></li> 				 				 <li><a href="https://plotly.com/consulting-and-oem/" target="_self">Consulting and Training</a></li> </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#636efa" class="--footer-heading">Pricing</h6>			 <ul> <li><a href="https://plotly.com/get-pricing/" target="_self">Enterprise Pricing</a></li> 				 </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#00cc96" class="--footer-heading">About Us</h6>			 <ul> <li><a href="https://plotly.com/careers" target="_self">Careers</a></li> 				 <li><a href="https://plotly.com/resources/" target="_self">Resources</a></li> 				 <li><a href="https://medium.com/@plotlygraphs" target="_self">Blog</a></li> 				 </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#EF553B" class="--footer-heading">Support</h6>			 <ul> <li><a href="https://community.plot.ly/" target="_self">Community Support</a></li> 				 <li><a href="https://plotly.com/graphing-libraries" target="_self">Documentation</a></li> 				 </ul> </li> </ul> </div> </section> <section class="--footer-meta"> <div class="--wrap"> <div class="left"> <article class="--copyright">Copyright © 2025 Plotly. All rights reserved.</article> </div> <div class="right"> <article class="--tos"><a href="https://community.plotly.com/tos" target="_blank">Terms of Service</a> </article> <article class="--privacy"><a href="https://plotly.com/privacy/" target="_blank">Privacy Policy</a> </article> </div> </div> <div id="markprompt" /> </section> </footer> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content" id="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <span style="float: left; padding-top:13px; padding-right:10px;"><i class="fa fa-search fa-lg"></i></span> <input id="search-input" class="search-input" type="text" placeholder="" /> </div> <div class="modal-body" id="modal-body"> <div id="search-results" class="search-results"> <div id="primary-search-results" class="primary-search-results"></div> <div id="schema-search-results" class="schema-search-results"></div> </div> </div> </div> </div> </div> <script> window.plotly_doc_language = "fsharp"; </script>  <script> window.ALGOLIA_CONFIG = { 'applicationId': '7EK9KHJW8M', 'indexName': 'fsharp_docs', 'apiKey': '4dae07ded6a721de73bde7356eec9280', 'baseurl': '/' } </script> <script id="algolia__template" type="text/template"> <div class="algolia__result"> <a class="algolia__result-link" onClick="$('#myModal').modal('toggle')" href="/{{ permalink }}">{{{ _highlightResult.name.value }}}</a> <div class="algolia__result-text">{{{ _highlightResult.description.value }}}</div> </div> </script> <script id="algolia__secondary-template" type="text/template"> <div class="algolia__secondary-result"> <a class="algolia__result-link" onClick="$('#myModal').modal('toggle')" href="/{{ permalink }}">{{{ _highlightResult.name.value }}}</a> <div class="algolia__result-text">{{{ _highlightResult.description.value }}}</div> </div> </script> <script id="algolia__template--no-results" type="text/template">No results found.</script> <script src="//cdn.jsdelivr.net/hogan.js/3.0.2/hogan.min.js"></script> <script src="/all_static/javascripts/algolia/algolia.js"></script>  <script src="/all_static//javascripts/hash_offset.js"></script>  <script src="/all_static/javascripts/imghover.js"></script> <script src="/all_static/javascripts/improve.js?version=2025-03-21-13-37"></script>   <script src="/all_static/javascripts/highlight/highlight.min.js"></script> <script src="/all_static/javascripts/highlight/julia.min.js"></script> <script src="/all_static/javascripts/highlight.line-numbers.js"></script> </body> </html>

CINXE.COM

Lines on mapbox in Fsharp