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 https://www.wrld3d.com/wrld.js/examples/.
It is based on Leaflet.js, providing a familiar API for embedding 3D maps in a web page.
You can find feature-by-feature examples on our website.
A full API reference is also available on our website.
Before you begin, you will need to acquire an API key, which you can do by signing up for a free account at wrld3d.com.
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://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.js"></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">
var map = L.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 have any questions, bug reports, or feature requests, feel free to submit to the issue tracker for wrld.js on GitHub.
You may wish to build the API yourself. This is easy to do and only requires that you install node.js.
- Node.js (v4.4.1 tested)
- npm (installed with Node.js)
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 files dist/wrld.js and dist/wrld.min.js which are the API and the minified form respectively.
You can also use the command npm run watch to build continuously, watching files for changes.
If you wish to contribute to this repo, pull requests on GitHub are welcomed.
The WRLD 3D Maps JavaScript API is released under the Simplified BSD License. See LICENSE.md for details.