Листовка не загружает стиль Mapbox - PullRequest
Новая
       1

Листовка не загружает стиль Mapbox

0 голосов
/ 07 мая 2020

Это моя первая попытка html

Код работал нормально с кодом руководства по быстрому запуску по умолчанию из листовки

Теперь я заменил 'id' и 'access token' но карта теперь пуста.

Любые советы приветствуются. 

<html>
<head>

    <title>Quick Start - Leaflet</title>

    <meta charset="utf-8" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

</head>
<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v1/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZWJheCIsImEiOiJjazl0dmJlMmkxZ3V0M2ptbzNyeG5oMGNzIn0.6kuDLwYzzbPdVjNWmOHbLA', {
        maxZoom: 18,
        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>',
        id: 'ebax/ck9txqzg10xfd1in1dl4t2czc'
    }).addTo(mymap);

</script>

</body>
</html>

1 Ответ

1 голос
/ 08 мая 2020

Замените https://api.tiles.mapbox.com/v1/{id}/{z}/{x}/{y}.png url mapbox на https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}

<html>

<head>

  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

</head>

<body>

  <div id="mapid" style="width: 600px; height: 400px;"></div>
  <script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZWJheCIsImEiOiJjazl0dmJlMmkxZ3V0M2ptbzNyeG5oMGNzIn0.6kuDLwYzzbPdVjNWmOHbLA', {
      maxZoom: 18,
      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>',
      id: 'ebax/ck9txqzg10xfd1in1dl4t2czc'
    }).addTo(mymap);
  </script>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...