Getting started with wrld.js


1. Sign up and get an API Key


2. Get wrld.js

Install using a package manager…

  • yarn: yarn add wrld.js

  • NPM: npm install wrld.js

… or reference from a CDN

Add the following lines to the <head> section of your HTML file:

<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" />



3. Add the map to your page

The last step is to insert your API key and you’re good to go!

You can do this whenever you create a new map: L.Wrld.map("map", "your_api_key_here").

Here is a complete live example (drag the map!):

<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" />
<div id="map" style="height: 250px"></div>
<script>L.Wrld.map("map", "your_api_key_here");</script>

Console errors?
Seeing Eegeo:: Bad API Key - Sign up at https://accounts.wrld3d.com/users/sign_in?service=https%3A%2F%2Faccounts.wrld3d.com%2F%23apikeys to get a wrld.js API Key? You probably forgot to insert your API key when creating your map!

4. Add some features

Now that you have your first map, let’s add some features to it!

Take a look at some of our examples to get up and running:

Support

Got a question?

Feel free to email us at support@wrld3d.com or use our Messenger to chat to us directly!

Got a feature request, or found a bug?

Feel free to submit to the wrld.js issue tracker on GitHub.

v0.1.1908