Container Shipping Line Map
This sample shows a container-shipping visualization built with GoJS in front of the
Leaflet mapping library.
The GoJS Diagram sits in a transparent div above the map, and a
sync() function re-projects every latitude/longitude on each Leaflet move,
zoom, and resize event.
Ports are fixed Nodes, and shipping lanes are Parts whose polyline Geometry is rebuilt from ocean waypoints. Each vessel belongs to a service and is advanced along its current leg every animation frame. On arrival a ship lays over for a while and then departs for the next port. The badge on a port counts the vessels currently docked there.
Use the Start Storms button in the top corner to spawn storm cells over the oceans. Storms drift slowly, and any vessel whose route takes it through one is slowed to about a third of its normal speed and marked with a warning badge. Storm circles are sized in kilometers, so they scale correctly as you zoom.
The ports, routes, and vessels are illustrative only. Map tiles are CARTO maps based on OpenStreetMap data.
GoJS Features in this sample
Animation
GoJS offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.
The Diagram.animationManager handles animations within a Diagram. The AnimationManager automatically sets up and dispatches default animations, and has properties to customize and disable them. Custom animations are possible by creating instances of Animation or AnimationTrigger. More information can be found in the GoJS learn pages.
Geometry Path Strings
The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.
One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.
More information can be found in the GoJS learn pages.
HTML Interaction
GoJS Diagrams can be used alongside other HTML elements in a webapp. For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the HTMLInfo class.
More information can be found in the GoJS learn pages.