Карта листов не рендеринга - Javascript

Я пытаюсь изучить Листовку в Javascript (я традиционно использую R). Моя цель - создать простую карту, с которой я могу экспериментировать. Однако я не могу получить карту для рендеринга. Мой код ниже:Карта листов не рендеринга - Javascript

// initialize the map 
 
var map = L.map('map').setView([42.35, -71.08], 13); 
 

 
// load a tile layer 
 
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', { 
 
    attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>', 
 
    maxZoom: 17, 
 
    minZoom: 9 
 
}).addTo(map);

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
#map { 
 
    height: 600px; 
 
    width: 800px; 
 
    display: block; 
 
    margin: auto; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="javascript/index.js" type="text/javascript"></script> 
 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> 
 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Hello...</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="map"></div> 
 

 
</body>

Я яблоко, чтобы заставить его работать в редакторе стеки, но не тогда, когда я создаю традиционные файлы.

Любая помощь будет оценена по достоинству.

источник

2016-11-04 pol_guy

<link rel="stylesheet" type="text/css" href="css/index.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="javascript/index.js" type="text/javascript"></script> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

Проверьте порядок ваших включает: ваша карта конкретизации код полагается на листовке, но включается после того, как листовка.

источник

2016-11-04 19:58:03 tmcw

Я ценю это. Однако ничего не работает. Я проверял, работает ли источник в файле javascript в дополнение к соединению css, и все в порядке. Мне нужно продолжать экспериментировать. –

Этот фрагмент работает для меня - но мне пришлось отключить Privacy Badger, потому что он блокировал unpkg.com.

Я также удалил пункты <link> и <script>, ссылающиеся на обслуживаемые ресурсы, отличные от HTTP.

Фактический Javascript такой же, как и в вашем вопросе.

НТН

// initialize the map 
 
var map = L.map('map').setView([42.35, -71.08], 13); 
 

 
// load a tile layer 
 
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', { 
 
    attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>', 
 
    maxZoom: 17, 
 
    minZoom: 9 
 
}).addTo(map);

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
#map { 
 
    height: 600px; 
 
    width: 800px; 
 
    display: block; 
 
    margin: auto; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> 
 
    <meta charset="utf-8"> 
 
    <title>Hello...</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="map"></div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 

 
</body>

источник

2016-11-05 08:13:50

Карта листов не рендеринга - Javascript

ответ

Смежные вопросы