great circle routes in javascript

Related tags

Maps arc.js
Overview

arc.js

Calculate great circles routes as lines in GeoJSON or WKT format.

Algorithms from https://edwilliams.org/avform.htm#Intermediate

Includes basic support for splitting lines that cross the dateline, based on a partial port of code from OGR.

Install

$ npm install --save arc
$ bower install --save arc.js

License

BSD

Usage

Require the library in node.js like:

var arc = require('arc');

Use in the browser like:

<script src="./arc.js"></script>

API

1) Create start and end coordinates

First we need to declare where the arc should start and end

var start = { x: -122, y: 48 };
var end = { x: -77, y: 39 };

Note that x here is longitude in degrees and y is latitude in degrees.

2) Create GreatCircle object

Next we pass the start/end to the GreatCircle constructor, along with an optional object representing the properties for this future line.

var generator = new arc.GreatCircle(start, end, {'name': 'Seattle to DC'});

3) Generate a line arc

Then call the Arc function on the GreatCircle object to generate a line:

var line = generator.Arc(100,{offset:10});

The line will be a raw sequence of the start and end coordinates plus an arc of intermediate coordinate pairs.

> line
{ properties: { name: 'Seattle to DC' },
  coords: 
   [ [ -122, 48.00000000000001 ],
     [ -112.06161978373486, 47.7241672604096 ],
     [ -102.38404317022653, 46.60813199882492 ],
     [ -93.22718895342909, 44.716217302635705 ],
     [ -84.74823988299501, 42.14415510795357 ],
     [ -77, 38.99999999999999 ] ],
  length: 6 }

Arc options

The first argument to Arc specifies the number of intermediate vertices you want in the resulting line. The higher the number the more dense and accurate the line will be.

The second argument is an optional object to declare options. The offset option controls the likelyhood that lines will be split which cross the dateline. The higher the number the more likely. The default value is 10, which means lines within 10 degress of the dateline will be split. For lines that cross and dateline and are also near the poles you will likely need a higher value to trigger splitting. It is unclear to me (@springmeyer) what the drawbacks are of high offsets. I simply ported the code from OGR's gdal/ogr/ogrgeometryfactory.cpp and have not taken the time to fully comprehend how it works.

4) Convert line to GeoJSON geometry

To serialize to a GeoJSON geometry:

> line.json();
{ geometry: 
   { type: 'LineString',
     coordinates: [ [Object], [Object], [Object], [Object], [Object], [Object] ] },
  type: 'Feature',
  properties: { name: 'Seattle to DC' } }

Or to WKT (Well known text):

> line.wkt();
'LINESTRING(-122 48.00000000000001,-112.06161978373486 47.7241672604096,-102.38404317022653 46.60813199882492,-93.22718895342909 44.716217302635705,-84.74823988299501 42.14415510795357,-77 38.99999999999999)'

It is then up to you to add up these features to create fully fledged geodata. See the examples/ directory for sample code to create GeoJSON feature collection from multiple routes.

Comments
  • Problem with the polylines in the right direction!

    Problem with the polylines in the right direction!

    Try to click on Canada first and then click on Australia, but not in the right side, click on the left side of the map. So, you have the closest distance from Canada to Australia, the route that an airplane follows, and check what happened to the line! The line stops and goes back!

    opened by harby 16
  • Denver to Kuala-Lumpur with GreatCircle

    Denver to Kuala-Lumpur with GreatCircle

    Hello!

    I found one annoying issue (or unwanted feature) with GreatCircle.Arc().

    For example if I want to draw route (with leaflet) from Denver to Kuala-Lumpur ([39.740009, -104.992297] to [3.104769, 101.691994]) with 25 points: new arc.GreatCircle(from, to, properties).Arc(25) I get this picture:

    arc-25

    But if I try to increase points amount (up to 30 or more) then I get this one: new arc.GreatCircle(from, to, properties).Arc(30) arc-30

    opened by zuf 8
  • create es6 module

    create es6 module

    I have made a new file that is identical to arc.js, but has ES6 module exports so that it will be compatible with ES6 bundlers such as Rollup.js.

    I have also added jsnext:main: to the package.json. This is so that Rollup can find the ES6 module file; other module loaders will still read from the main file, and should be unaffected by these changes.

    opened by amaldare93 6
  • Making multiline strings to address international date line

    Making multiline strings to address international date line

    @springmeyer

    I want to ping you on the international date line issue and see if there is a possible solution by using MultiLineStrings. Is it possible to create multiline strings when an arc crosses the date line?

    Another issue with breaking into two lines is the gap that is formed between the two points that cross the date line. Is it also possible to create two points, along the arc, that would be just offset from the date line? So when the line is broken, create two points, at -179.99 and +179.99 at the appropriate latitude?

    Example of a line: https://gist.github.com/39ab121a3e225c516885

    opened by smit1678 6
  • Demo problem

    Demo problem

    Hi all!

    I was not able to visit the demo in https://

    https://springmeyer.github.io/arc.js/

    Having said that also in http:// I'm not sure everything is working. Are you aware of that? Thank you so much :)

    opened by valerio-bozzolan 5
  • Add option for non-breaking lines

    Add option for non-breaking lines

    On https://www.mapbox.com/mapbox.js/example/v1.0.0/cross-date-line/ you'll notice the comment:

    The coordinate -233.9 is technically invalid but Leaflet permits it because it can imply the direction of wrapping - to wrap in a direction, you can add or subtract 360 from the desired end coordinate

    It would be nice if arc.js could generate lines with coordinates like that. If this is something you'd accept in a pull request let me know, I could possibly take a look at it but I can make no promises, my js is very weak.

    Thanks, Cody

    opened by ccarse 5
  • make 'main' the default (protected) branch?

    make 'main' the default (protected) branch?

    these days you don't need to maintain a gh-pages branch in order to wire up GitHub Pages.

    if @springmeyer feels like giving me admin keys to this repo i'd be interested in making main the default branch and setting up branch protection rules to disable -f pushing, etc.

    opened by jgravois 4
  • Fix error with antipodal error generation

    Fix error with antipodal error generation

    The "start" and "end" variables referenced in the error message were not of type Coord, and the code would crash since the .view() function didn't exist. This PR makes changes to reference the correct variables.

    opened by blaine-foreflight 3
  • The arc is a straight line

    The arc is a straight line

    Hi, I'm using this code to do a small test, and it just displays a straight line. I notice that if I use coordinates far from each other(cross Atlantic), there is a VERY slight curve, but only just. Is there anything that I'm doing wrong? If you can put these coordinates working, could you provide the most basic example on how you did it? Thanks

    //load_map.js window.onload = onLoad

    function onLoad(){ var map = L.map('map').setView([32.75,-16.97], 11)

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

    var arc = L.Polyline.Arc([32.6936836, -16.7753468], [32.75, -16.97], { color: "red", vertices: 200, offset:10 }).addTo(map) }

    //index.html

         <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
         <!-- <script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>   I tested with both files-->
    
         <script src='http://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js'></script>
         <script src='Leaflet.Arc.js'></script>
         <script src="load_map.js"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>
    

    mapa

    support 
    opened by miguel-ribeiro 3
  • Add license information to the README and repository

    Add license information to the README and repository

    I would like to use arc.js to draw a great circle on a map. To be able to use this in our project I need to know if the license your are releasing this under gives me the right to do that.

    Please add the license to the github repository and mention the license in the README.

    If have haven't decided yet on a license I am happy to help with that.

    opened by kottmann 3
  • round to six decimal places

    round to six decimal places

    alternative to #52

    • round instead of truncate, for slightly more accurate results
    • yanked const/let in favor of good ol 'var' this codebase is old as hell. its due for a facelift, but i'd rather let (groan!) sleeping dogs lie for now.
    • added WKT tests to confirm those values are rounded too
    • updated doc

    does this seem reasonable @KD33?

    ps: i would have just pushed to the PR that was already open, but you either unticked the box or the option was disabled because you're PRing directly from your own main branch

    opened by jgravois 2
  • Support for Decimal Precision

    Support for Decimal Precision

    Is it possible to provide decimal precision as an option to generator.Arc? I'm working on optimizing a workflow that requires drawing a lot of lines. One of the optimizations I am making is to limit the precision of coordinate values (suggested by MapBox under the section Cleaning up your data https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/).

    Trimming the precision at the same time that the coordinates are generated would save me the trouble of having to iterate through the coordinates after

    Thanks

    opened by KD33 4
  • Support for AMD and corrected browser

    Support for AMD and corrected browser

    • Added load support for AMD (such as requirejs)
    • Added load support for CMD (as well as NodeJS)
    • Corrected browser implementation (script not loaded by script tag may not have arc defined in window)
    opened by harryxue1999 1
  • arc not complete for crossing dateline

    arc not complete for crossing dateline

    sample gist: https://gist.github.com/xqin1/b38dd6ed9ae96174b96e two points for Seattle and Beijing, China. The arc seems to break at dateline, but the second half is not drawn.

    opened by xqin1 2
An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics

Cesium 9.7k Dec 26, 2022
Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.

Polymaps Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers. See http://polymaps.org for more details.

Urban Airship 1.6k Dec 23, 2022
UNMAINTAINED Open source JavaScript renderer for Kartograph SVG maps

This project is not maintained anymore. Here are a few reasons why I stopped working on kartograph.js: there's no need to support non-SVG browsers any

null 1.5k Dec 11, 2022
Mapbox JavaScript API, a Leaflet Plugin

mapbox.js A Mapbox plugin for Leaflet, a lightweight JavaScript library for traditional raster maps. For the state-of-the-art Mapbox vector maps libra

Mapbox 1.9k Dec 23, 2022
An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics

Cesium 9.7k Jan 3, 2023
JavaScript WebGL 3D map rendering engine

VTS Browser JS is a powerful JavaScript 3D map rendering engine with a very small footprint (about 163 kB of gziped JS code). It provides almost all f

Melown Technologies, SE 203 Dec 7, 2022
JavaScript library to transform coordinates from one coordinate system to another, including datum transformations

PROJ4JS Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations. Origina

null 1.7k Dec 28, 2022
The NASA WorldWind Javascript SDK (WebWW) includes the library and examples for creating geo-browser web applications and for embedding a 3D globe in HTML5 web pages.

Web WorldWind New versions of WorldWind released Web WorldWind 0.10.0 and WorldWind Java 2.2.0 are now available on GitHub. The new version of Web Wor

NASA WorldWind 770 Jan 1, 2023
geotiff.js is a small library to parse TIFF files for visualization or analysis. It is written in pure JavaScript, and is usable in both the browser and node.js applications.

geotiff.js Read (geospatial) metadata and raw array data from a wide variety of different (Geo)TIFF files types. Features Currently available function

geotiff.js 649 Dec 21, 2022
Blazing Fast JavaScript Raster Processing Engine

Geoblaze A blazing fast javascript raster processing engine Geoblaze is a geospatial raster processing engine written purely in javascript. Powered by

GeoTIFF 125 Dec 20, 2022
JavaScript Topology Suite

JSTS JSTS is an ECMAScript library of spatial predicates and functions for processing geometry conforming to the Simple Features Specification for SQL

Björn Harrtell 1.3k Jan 4, 2023
The smallest, simplest and fastest JavaScript pixel-level image comparison library

pixelmatch The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests. Fea

Mapbox 5.1k Jan 8, 2023
Geokit - is a command-line interface (CLI) tool written in javascript, that contains all the basic functionalities for measurements, conversions and operations of geojson files.

Geokit Geokit is a command-line interface (CLI) tool written in javascript, that contains all the basic functionalities for measurements, conversions

Development Seed 31 Nov 17, 2022
Jquery.Circle.js - Circle is a Javascript global-menu library for jQuery.

Circle About Circle is a Javascript global-menu library for jQuery. Read more at the website: http://uc.gpgkd906.com/ Installation Just include the Ja

陈瀚 3 Jul 19, 2021
Pim 4 Jun 21, 2022
A concise collection of classes for PHP, Python, JavaScript and Ruby to calculate great circle distance, bearing, and destination from geographic coordinates

GreatCircle A set of three functions, useful in geographical calculations of different sorts. Available for PHP, Python, Javascript and Ruby. Live dem

null 72 Sep 30, 2022
This package enables you to define your routes using the flat-routes convention.

Remix Flat Routes This package enables you to define your routes using the flat-routes convention. This is based on the gist by Ryan Florence ?? Insta

Kiliman 180 Jan 3, 2023
API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

null 3 Mar 6, 2022
circle-svg-animation

Circle SVG Animation Plug css, js and just add short code in your html. Change the custom attribute data-percent and data-time for setting your percen

Sergey Korn 24 Aug 18, 2022
JavaScript Routes

Introduction Crossroads.js is a routing library inspired by URL Route/Dispatch utilities present on frameworks like Rails, Pyramid, Django, CakePHP, C

Miller Medeiros 1.4k Oct 22, 2022