Как сделать простую картографическую карту на JSFiddle?

Question

У меня средний опыт работы с JS, и я некоторое время использовал рекламный листок. Моя проблема заключается в создании карты JSFiddle. Я создал файл, как требуется JSFiddle. Я не получаю никаких ошибок, хотя я не вижу свою карту. Кто-нибудь почему?

Мой код выглядит следующим образом, и, как вы можете видеть, это фрагмент рабочего стека;

var map = L.map('map').setView([51.505, -0.09], 13); 
 

 
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
}).addTo(map);

html { 
 
\t \t height: 100%; 
 
\t } 
 
\t body { 
 
\t \t margin: 0; 
 
\t \t height: 100%; 
 
\t } 
 
\t #map { 
 
\t \t height: 100%; 
 
\t \t width: 100%; 
 
\t }

<link href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" rel="stylesheet"/> 
 
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> 
 
<div id="map"></div>

Answer 1

Внешние ресурсы должны быть загружены с помощью специальных "Внешние ресурсы" вкладки в JSFiddle, предпочтительно в том же самом протоколе (HTTP/HTTPS) в качестве JSFiddle (из-за смешанного содержимого). Когда вы это сделаете, вы можете заставить его работать. Ниже JSFiddle работает, я создал это только сейчас, используя пример кода по умолчанию:

var map = L.map('map').setView([51.505, -0.09], 13); 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
}).addTo(map); 

https://jsfiddle.net/3650w8w3/