New StackOverflow Question: Leaflet.js Quick Start Basic Example Demo

6 views

Skip to first unread message

stacko...@mg.bodar.com

unread,

Mar 7, 2017, 5:10:37 AM3/7/17

to total...@googlegroups.com

Leaflet.js Quick Start Basic Example Demo

Asked by Akin Hwan on 2017-02-06T22:29:23Z

Reply on StackOverflow

I am having trouble getting the basic example working locally. All I can see is a gray box with the zoom in/out ui in upper left corner, and the attribution in bottom right corner. There is grey where there should be a map essentially.

My code apart from the api-key I got from Mapbox.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title></title>
  <link rel="stylesheet" href="https://unpkg.com/lea...@1.0.3/dist/leaflet.css">
  <script src="https://unpkg.com/lea...@1.0.3/dist/leaflet.js"></script>
  <style type='text/css'>
        #mapid {
                height: 180px;
              }

  </style>


</head>
<body>

  <div id="mapid" style="width: 600px; height: 400px; position: relative; outline:none;" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0">

  </div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=MYMAPBOXAPIKEY', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'your.mapbox.project.id',
    accessToken: 'MYMAPBOXAPIKEY'
}).addTo(mymap);

L.marker([40.717192,-74.012042]).addTo(map)
    .bindPopup('The Borough of Manhattan Community College.')
    .openPopup();

</script>
</body>
</html>