wrld.js
The WRLD JavaScript API allows you to easily embed beautiful 3D maps into any web page for any modern, WebGL supporting browser. For an example of our 3D maps in action, see these examples.
It is based on Leaflet.js, providing a familiar API for embedding 3D maps in a web page.
Examples
You can find feature-by-feature examples on our website.
API
A full API reference is also available on our website.
Getting Started
Before you begin, you will need to acquire an API key, which you can do by signing up for an account at wrld3d.com and selecting the Digital Twin plan - free trials are available!
You can easily embed a 3D map in any web page. The code below shows a simple example:
<!-- Create a map in an HTML element with wrld.js -->
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/wrld.js@1.x.x"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />
</head>
<body>
<div id="map" style="width: 400px; height: 400px;"></div>
<script type="text/javascript">
const map = Wrld.map("map", "your_api_key_here");
</script>
</body>
</html>Just replace your_api_key_here with an API key from wrld3d.com.
If you're using npm:
Install the wrld.js package:
npm install wrld.js
And in your application:
import Wrld from "wrld.js";
const map = Wrld.map("map", "your_api_key_here");Using React?
We have a component that wraps wrld.js: https://github.com/wrld3d/wrld-react.
Migration from 0.1.x to 1.0.x
Starting from version 1.0.0, the Wrld object now extends L from Leaflet, instead of acting like a plugin – this simplifies using wrld.js with TypeScript and improves interoperability with other Leaflet maps on the same page.
- Replace
L.Wrld.polygonwithWrld.native.polygon - Replace
L.Wrld.polylinewithWrld.native.polyline - Replace all other
L.Wrld.*calls toWrld.* - Replace all
L.*calls withWrld.*
Support
If you have any questions, bug reports, or feature requests, feel free to submit to the issue tracker for wrld.js on GitHub.
Building the API
You may wish to build the API yourself. This is easy to do and only requires that you install node.js.
Requirements
- Node.js (v12 or newer)
- npm (installed with Node.js)
Building
Follow the steps below to build the API:
- Clone this repo:
git clone https://github.com/wrld3d/wrld.js.git - In the root of the repo, run
npm installto install the development dependencies. - Still in the root of the repo, run the command
npm run build.
This will create the file cdn/wrld.js which is the bundled UMD package, and various outputs in the dist/ folder`.
You can also use the command npm run watch to build continuously, watching files for changes.
Testing
Before executing automated tests, make sure you have eeGeoWebGL.js downloaded in /tmp/sdk. This can be achieved by running ./download-sdk.sh.
-
npm run testwill execute automated tests and lint the project. -
npm run test:unitwill only execute automated tests. -
npm run test:watchwill watch the source files and execute affected tests.
Contributing
If you wish to contribute to this repo, pull requests on GitHub are welcomed.
License
The WRLD 3D Maps JavaScript API is released under the Simplified BSD License. See LICENSE.md for details.