Подскажите,я начал изучать карты, хочу подключить 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 © <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?