@swim/map provides canvas views for efficiently rendering geospatially
located map overlays, including fully animatable views for lines, circles,
and polygons. Check out the traffic map
and transit map demos to see
massively real-time maps in action. @swim/map is part of the
@swim/ux framework.
For an npm-managed project, npm install @swim/map to make it a dependency.
TypeScript sources will be installed into node_modules/@swim/map/main.
Transpiled JavaScript and TypeScript definition files install into
node_modules/@swim/map/lib/main. And a pre-built UMD script can
be found in node_modules/@swim/map/dist/main/swim-map.js.
Browser applications can load swim-ux.js—which bundles the @swim/map
library—along with its swim-core.js and swim-ui.js dependencies, directly
from the swimOS CDN.
<!-- Development --><scriptsrc="https://cdn.swimos.org/js/latest/swim-core.js"></script><scriptsrc="https://cdn.swimos.org/js/latest/swim-ui.js"></script><scriptsrc="https://cdn.swimos.org/js/latest/swim-ux.js"></script><!-- Production --><scriptsrc="https://cdn.swimos.org/js/latest/swim-core.min.js"></script><scriptsrc="https://cdn.swimos.org/js/latest/swim-ui.min.js"></script><scriptsrc="https://cdn.swimos.org/js/latest/swim-ux.min.js"></script>
Alternatively, the standalone swim-system.js script may be loaded
from the swimOS CDN, which bundles @swim/map together with all other
@swim/system
libraries.
<!-- Development --><scriptsrc="https://cdn.swimos.org/js/latest/swim-system.js"></script><!-- Production --><scriptsrc="https://cdn.swimos.org/js/latest/swim-system.min.js"></script>
When loaded by a web browser, the swim-ux.js script adds all
@swim/map library exports to the global swim namespace.
The swim-ux.js script requires that swim-core.js and swim-ui.js
have already been loaded.
The swim-system.js script also adds all @swim/map library exports
to the global swim namespace, making it a drop-in replacement for
'swim-core.js', swim-ui.js, and swim-ux.js when additional
@swim/system libraries are needed.
@swim/map
@swim/map provides canvas views for efficiently rendering geospatially located map overlays, including fully animatable views for lines, circles, and polygons. Check out the traffic map and transit map demos to see massively real-time maps in action. @swim/map is part of the @swim/ux framework.
Installation
npm
For an npm-managed project,
npm install @swim/map
to make it a dependency. TypeScript sources will be installed intonode_modules/@swim/map/main
. Transpiled JavaScript and TypeScript definition files install intonode_modules/@swim/map/lib/main
. And a pre-built UMD script can be found innode_modules/@swim/map/dist/main/swim-map.js
.Browser
Browser applications can load
swim-ux.js
—which bundles the @swim/map library—along with itsswim-core.js
andswim-ui.js
dependencies, directly from the swimOS CDN.<!-- Development --> <script src="https://cdn.swimos.org/js/latest/swim-core.js"></script> <script src="https://cdn.swimos.org/js/latest/swim-ui.js"></script> <script src="https://cdn.swimos.org/js/latest/swim-ux.js"></script> <!-- Production --> <script src="https://cdn.swimos.org/js/latest/swim-core.min.js"></script> <script src="https://cdn.swimos.org/js/latest/swim-ui.min.js"></script> <script src="https://cdn.swimos.org/js/latest/swim-ux.min.js"></script>
Alternatively, the standalone
swim-system.js
script may be loaded from the swimOS CDN, which bundles @swim/map together with all other @swim/system libraries.<!-- Development --> <script src="https://cdn.swimos.org/js/latest/swim-system.js"></script> <!-- Production --> <script src="https://cdn.swimos.org/js/latest/swim-system.min.js"></script>
Usage
ES6/TypeScript
@swim/map can be imported as an ES6 module from TypeScript and other ES6-compatible environments.
import * as map from "@swim/map";
CommonJS/Node.js
@swim/map can also be used as a CommonJS module in Node.js applications.
var map = require("@swim/map");
Browser
When loaded by a web browser, the
swim-ux.js
script adds all @swim/map library exports to the globalswim
namespace. Theswim-ux.js
script requires thatswim-core.js
andswim-ui.js
have already been loaded.The
swim-system.js
script also adds all @swim/map library exports to the globalswim
namespace, making it a drop-in replacement for 'swim-core.js',swim-ui.js
, andswim-ux.js
when additional @swim/system libraries are needed.