Не могу подключить на openstreetmap библиотеку Leaflet

Алекс_76 · 2018-03-21T10:14:06.000Z

Подскажите,я начал изучать карты, хочу подключить Leaflet на свой сайт(пользуюсь Open Server).Брал разные примеры с интернета, не пойму почему библиотека Leaflet не подключается? Вот мой сайт:

                                                                     
                                                                        HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Карта Leaflet</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css">
	<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
	<link href="css/carts.css" rel="stylesheet">
</head>
<body>

<div id="map">
<iframe class="one" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=30.309433937072757%2C59.91446128149463%2C30.35732746124268%2C59.927345147739615&layer=mapnik" ></iframe><br/>
<small><a href="https://www.openstreetmap.org/#map=15/59.9209/30.3334">Посмотреть более крупную карту</a></small>
</div>
</body>
</html>

                                                                                    carts.css
#map {
	width: 80%; border:1px solid red;
	height: 500px;float: left;
}

                                                                                      carts.js
var map = new L.Map('map');
map.setView(new L.LatLng(59.939, 30.327), 12);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    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: 'mapbox.streets',
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

var circle = L.circle([59.921, 30.339], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(mymap);

Изображение карты появляется, а параметры написанные Leaflet не появляются.Может Leaflet не подключается к Open Server?

kocio · 2018-03-21T10:17:26.000Z

I have moved this thread to the proper language subforum, I hope this will help.

freeExec · 2018-03-21T10:26:29.000Z

Что есть в вашем коде mymap?

Zverik · 2018-03-21T11:12:14.000Z

На всякий случай, вместо ‘your.mapbox.access.token’ вы подставили свой токен из панели Mapbox?

OverThere · 2018-03-21T18:23:35.000Z

Затем мы добавим слой плитки, чтобы добавить к нашей карте, в этом случае это слой плитки Mapbox Streets. Создание слоя плитки обычно включает в себя настройку шаблона URL-адресов для изображений плитки, текста атрибуции и максимального уровня масштабирования слоя. В этом примере мы будем использовать плитки mapbox.streets из «Классических карт» Mapbox (чтобы использовать плитки из Mapbox, вы также должны запросить токен доступа).

Вы должны заменить текст «your.mapbox.access.token» на строку с accessToken: «‘your.mapbox.access.token’» с помощью токена доступа из URL https://www.mapbox.com/signin/?route-to=‘/account/access-tokens/’

Извините, мой бедный русский язык. Я американец. Для меня русский язык не является родным.

andygol · 2018-03-22T19:44:34.000Z

Повторите все с этой страницы http://leafletjs.com/examples/quick-start/ , просто скопируйте куски кода, последовательно друг за другом, и, да здесь ** accessToken: ‘your.mapbox.access.token’** вместо ‘your.mapbox.access.token’ укажите свой публичный ключ Mapbox (брать здесь https://www.mapbox.com/account/access-tokens/ после регистрации)

PS. И измените название топика на “Как подключить тайлы Мапбокса в Leaflet?” так будет правильнее.

andygol · 2018-03-22T19:57:31.000Z

А вообще, раз пошла такая пляска, смотрите сразу примеры здесь - https://www.mapbox.com/mapbox-gl-js/example/simple-map/

или чуть сложнее - https://www.mapbox.com/help/building-a-store-locator/