Почему листовка и код карты не отображаются? - PullRequest
Новая
       7

Почему листовка и код карты не отображаются?

0 голосов
/ 22 октября 2018

Кто-нибудь знает, почему не работает следующий код?Я новичок в листовке JS и mapbox, и не смог выяснить проблему с моим кодом.

Данные GeoJSON, которые предоставляют нам географические координаты, а также экономические данные, можно найти по адресу: https://github.com/Nicknyr/Europe_Choropleth/blob/master/europe.js

<html>

<head>
<meta charset="utf-8">
<title></title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>

<script src="europe.js"></script>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC|Roboto" rel="stylesheet">
</head>

<body>
<div id="mapid"></div>
<script>
    var geojson;

    // Lat/Long for Prague
    var lat = 50.0755381;
    var long = 14.43780049999998;

    var mymap = L.map('mapid').setView([lat, long], 13); 

     L.tileLayer(' https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibmlja255ciIsImEiOiJjajduNGptZWQxZml2MndvNjk4eGtwbDRkIn0.L0aWwfHlFJVGa-WOj7EHaA', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 4,
      minZoom: 3,
      id: 'mapbox.dark'
    }).addTo(mymap);
</script>    

</body>

</html>

1 Ответ

0 голосов
/ 22 октября 2018

Как сказал @peebee, вам нужно добавить высоту на карту и затем добавить геойсон на карту. 

<div id="mapid" style="height: 500px;"></div>

...

var geojson = countriesData;
L.geoJSON(geojson).addTo(mymap);

Демо

...