Giters

wrld3d / wrld.js

A JavaScript API for beautiful 3D maps

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

API key

zelenooq opened this issue · comments

commented

Description

I don't have any error but I can't get map.

Steps to Reproduce

<title>Building Gorgeous 3D maps with eegeo.js and Leaflet</title> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script> var map = L.map('map', 'X40XXXaXXdcXXXdXX46XXXf6XX60XXXX', { center: [51.517327, -0.120005], zoom: 15 }); alert(map) /*L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); */ </script>

Expected behavior:

Showing the map of London.

Actual behavior:

Empty map.

Reproduces how often:

Always :)

Additional Information

commented

Hi @zelenooq

How are you accessing the page? Our use of webgl means you will have problems opening our maps with a file:: url . You can set up a local server easily using python -- see #18 for an example.

commented

I have Tomcat 9.0, Eclipse framework and it is http localhost.
I just create my account and I click on Create API key.
But what name should I have there?
I put something random and I created API key for that.

commented

It looks like you have set the API key correctly. In the HTML above, you have not included a div in the body of your page to display the map. I would expect to see something like

<body>
  <div id="map" style="height: 250px"></div>
</body>

It also appears you have not included the wrld.js script. A complete html page would look something like:

<!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 style="position: relative">
    <div id="map" style="height: 400px"></div>
    <script>
      var map = L.Wrld.map("map", "your_api_key_here", {
        center: [51.517327, -0.120005],
        zoom: 16
      });
    </script>

  </div>
  </body>
</html>

where you should fill in your API key where it says "your_api_key_here".

There are more examples in our documentation here.

commented

Now it is working.
Thanks.

commented

Can You just help me how to find maximum or minimum values of some attributes?
I mean, here I don't see maximum value for zoom, either of maxZoom for map object.
Is it 20 maximum value?
How to be closer to the roof of some building?
https://www.wrld3d.com/wrld.js/v0.1.1335/docs/leaflet/L.Map/