Author Archives: Douglas Harris

Creating 3D Maps with WRLD’s Application Program Interface (API)

Posted on by

Have you ever wanted to create a 3D map, well WRLD has a free solution for you to use.  WRLD is a geospatial company that provides users the ability to create 3D maps through the use of their free API.  WRLD uses reputable sources for their geospatial data including OpenStreetMap, USGS, NASA and more. The first step towards creating 3D maps is to create a WRLD 3D account at https://www.wrld3d.com.  Once your account has been created and verified, you will then need to create an API key which is located under your account information.  Each user will have an unique API key that will be used by WRLD to track the amount of usage. The API key is free as long as you have less than 60,000 users / web views per month.  

In this example I used the Brackets text editor which is available for free to download at http://brackets.io.  Brackets is cross-platform and interactive with Leaflet which is an open source map based on Javascript, HTML and CSS.  Additional coding tips are available on the Leaflet tutorial site at https://leafletjs.com which includes tutorials and code snippets.  To begin, open up Brackets and copy the following code into brackets–see the # sign for a description of the line of code and line comments for a description of a block of code:

<!DOCTYPE HTML>
<html>
 <head>

<!–Copy and paste to reference WRLD’s 3D mapping–>
   https://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.js
   <link href=”https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css” rel=”stylesheet” />
 </head>
 <body>     

<!–  Change height to match parameters of your website/screen    –>
//Insert your API Key below
     var map = L.Wrld.map(“map”, “Insert API Key Here”, {
       //The center point of the map
       center: [39.981358, -75.152776],
       zoom: 17//zoom level of map–set below 18 to see 3D detail
     });
// Name to be displayed when marker is clicked
var school = “Gladfelter Hall”;
//Location of marker. Latitude/Longitude can be found from Google Maps by right clicking and selecting what’s here?
var marker = L.marker([39.981358, -75.152776]).addTo(map).bindPopup(school);
 </div>
 </body>
</html>

    Make sure to save the file with the extension with .html within Brackets in order for it to work using your localhost.  Once connected to the live preview (volt button on top right), the maps will be seen below.  Also, you will be able to zoom in and out by “pinching.”  3D coverage is available throughout the world in major metropolitan areas and additional areas can be built for a fee from the WRLD company.

Gladfelter Hall in 3D

Gladfelter Hall in 3D

Temple University in 3D