Geographic Diagram in Front of Leaflet.js Map
This sample integrates GoJS as a layer in front of the Leaflet mapping library. This demonstrates how to use GoJS within a GIS application by displaying a Diagram of nodes and links atop the map, using latitude and longitude for their coordinates.
You can pan and zoom with Leaflet, and select and drag with GoJS.
Dragged nodes will update their latitude and longitude data in the Diagram.model.
The GoJS div is on top of the Leaflet map, but this sample has mouse events go through the diagram when the user's mouse is not over a Node or Link.
This is done by adding a pointermove event listener to the map's HTML div:
if the mouse moved onto a GoJS Part, then the overlay has pointerEvents: auto,
otherwise, pointerEvents: none (actions go through to the map instead).
Because GoJS and Leaflet use separate coordinate systems, the sample keeps them aligned
with a sync() function that runs on every Leaflet move, zoom,
and resize event. For each node it converts the stored latitude and longitude into a
pixel position with map.latLngToContainerPoint (where map is the leaflet map) and sets the node's
Part.location accordingly.
This diagram displays made-up factories delivering packages around the globe. The data is only meant as an example of using GoJS and is not meant to be accurate. We also have a separate sample that demonstrates the ability to reshape routes between points, instead of only having a simple point-to-point line.
Note that the map tiles are CARTO maps based on OpenStreetMap data.
GoJS Features in this sample
Tools
Tools handle all input events, such as mouse and keyboard interactions, in a Diagram. There are many kinds of predefined Tool classes that implement all of the common operations that users do.
For flexibility and simplicity, all input events are canonicalized as InputEvents and redirected by the diagram to go to the Diagram.currentTool. By default the Diagram.currentTool is an instance of ToolManager held as the Diagram.toolManager. The ToolManager implements support for all mode-less tools. The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool. This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished, at which time the diagram's current tool reverts back to the Diagram.defaultTool, which is normally the ToolManager, again.
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.