2016-11-04 5 views
0

リーフレットを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>

私は伝統的なファイルを作成するとき、それはスタックのエディタで実行しなくてもらうためにリンゴです。

ご協力いただければ幸いです。地図のインスタンス化コードがリーフレットに依存しているが、リーフレットの後に含まれています:

答えて

2
<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> 

チェックあなたの順序が含まれています。

+0

私はそれを感謝しています。しかし、何も働いていません。私はjavascriptファイルへのソースがcss接続に加えて機能しているかどうかを調べるためにテストしました。 私は実験を続けなければなりません。 –

1

このスニペットは私にとってはうまくいきますが、プライバシーバッヂはブロックされていたため、無効にする必要がありましたunpkg.com

HTTP以外のサービスリソースを参照して、<link><script>という項目も削除しました。

実際のJavascriptはあなたの質問と同じです。

HTH

// 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>

関連する問題