teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Leafletにてgeojsonが外部読み込みされない

編集履歴

質問編集履歴

4

現在のマップ状態を添付

2019/04/08 11:08

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -219,6 +219,8 @@
219
219
  ### 現在のエラー
220
220
  マップはグレーアウトした状態で表示され、画像が読み込めていない状態です。
221
221
  詳細にお伝えすると以下のようなhtmlしか読み込まれていないです。
222
+
223
+ ![現在のマップ状態](7b81032f0fe239d0bd9fa1377e23968e.png)
222
224
  ```
223
225
  <div id="map" style="width: 600px; height: 500px; position: relative;" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"></div><div class="leaflet-pane leaflet-shadow-pane"></div><div class="leaflet-pane leaflet-overlay-pane"></div><div class="leaflet-pane leaflet-marker-pane"></div><div class="leaflet-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"></div><div class="leaflet-proxy leaflet-zoom-animated"></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">−</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a></div></div></div></div>
224
226
  ```

3

エラーの詳細について

2019/04/08 11:07

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -212,4 +212,27 @@
212
212
  }
213
213
  ]
214
214
  }
215
+ ```
216
+
217
+
218
+
219
+ ### 現在のエラー
220
+ マップはグレーアウトした状態で表示され、画像が読み込めていない状態です。
221
+ 詳細にお伝えすると以下のようなhtmlしか読み込まれていないです。
222
+ ```
223
+ <div id="map" style="width: 600px; height: 500px; position: relative;" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"></div><div class="leaflet-pane leaflet-shadow-pane"></div><div class="leaflet-pane leaflet-overlay-pane"></div><div class="leaflet-pane leaflet-marker-pane"></div><div class="leaflet-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"></div><div class="leaflet-proxy leaflet-zoom-animated"></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">−</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a></div></div></div></div>
224
+ ```
225
+
226
+ ズームマークをクリックすると以下のようなコンソールエラーがでます。
227
+ ```
228
+ leaflet.js:5 Uncaught Error: Set map center and zoom first.
229
+ at e._checkIfLoaded (leaflet.js:5)
230
+ at e.getCenter (leaflet.js:5)
231
+ at e.<anonymous> (leaflet.js:5)
232
+ at e.fire (leaflet.js:5)
233
+ at e._onPanTransitionEnd (leaflet.js:5)
234
+ at e.fire (leaflet.js:5)
235
+ at e._complete (leaflet.js:5)
236
+ at e._step (leaflet.js:5)
237
+ at e._animate (leaflet.js:5)
215
238
  ```

2

外部読み込みされない問題について

2019/04/08 09:28

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
@@ -1,1 +1,1 @@
1
- Leaflet.jsにて外部GeoJSONの変数部分をとり、polyline（線）を表示させたい
1
+ Leafletにてgeojsonが外部読み込みされない
body CHANGED
@@ -1,34 +1,9 @@
1
1
  ### やりたいこと
2
- 二つあります。
3
2
 
4
- 1.現状のソースコードに書いたGeoJSONファイルの「var geoJsonData =」部分を取り除いて、外部から読み込めるようにしたいです。
3
+ 現状のソースコードに書いたhoge.geojsonをjQueryなしで外部読み込みさせたいのですが、
5
- ```geojson
4
+ うまくいきません。
6
- {
7
- "type": "FeatureCollection",
8
- "features": [
9
- {
10
- "type": "Feature",
11
- "properties": {
12
- "marker-color": "#7e7e7e",
13
- "marker-size": "medium",
14
- "marker-sy
5
+ なにか解決策はご存知でしょうか？
15
- ・・・
16
- ```
17
- 上記のような状態で外部GeoJSONを読み込めるようにしたのですが、可能でしょうか？
18
6
 
19
- 2.polylineを表示させたいです。
20
-
21
- 現状のソースコードでは、1.の変数部分をとると外部から読み込めなくなります。
22
- JQueryの$.getJSON() も試してみたのですが、うまくいきませんでした。
23
-
24
- polylineについては、http://geojson.io/で作成したpolylineです。
25
- いろいろ試しましたが、表示されないです。
26
-
27
- #現在の仕様
28
- leaflet.jsにmarkercluster.jsも入れています。
29
- オリジナルのマーカーも設定し、問題なく表示されています。
30
- polylineが表示されないだけで、外部読み込みは成功しています（「var geojsondata」がついているため）。
31
-
32
7
  ###現状のソースコード
33
8
 
34
9
  ```HTML
@@ -42,47 +17,67 @@
42
17
  crossorigin=""></script>
43
18
  <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
44
19
 
45
- <script src="hoge.geojson"></script>
46
20
  <div id="map" style="width: 600px;height: 500px"></div>
47
21
  ```
48
22
 
49
23
  ```JavaScript
50
24
  <script>
51
- var iconChange = L.icon({
52
- iconUrl: 'fugaicon.png',
25
+ var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
53
- iconSize: [25, 40],
26
+ maxZoom: 14,
27
+ attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
54
28
  });
55
29
 
56
- var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
57
- maxZoom: 18,
58
- attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
59
- });
60
-
61
30
  var map = L.map('map')
62
31
  .addLayer(tiles);
63
32
 
64
- var markers = L.markerClusterGroup();
33
+ var markers = L.markerClusterGroup({
34
+ showCoverageOnHover: true,
35
+ spiderfyOnMaxZoom: false,
36
+ removeOutsideVisibleBounds: true,
37
+ disableClusteringAtZoom: 8
38
+ }
39
+ );
65
40
 
41
+ httpObj = new XMLHttpRequest();
42
+ httpObj.open("get", "hoge.geojson", function(data){
43
+ GeoJSON.parse(data);
44
+
66
- var geoJsonLayer = L.geoJson(geoJsonData, {
45
+ var geoJsonLayer = L.geoJson(data, {
67
46
  onEachFeature: function (feature, layer) {
68
- layer.polyline(geometry.LineString);
69
47
  layer.bindPopup(feature.properties.popup);
48
+ },
49
+ pointToLayer: function(feature, latlng) {
50
+ var iconChange = L.icon({
51
+ iconUrl: '<?php echo get_stylesheet_directory_uri(); ?>/'+ feature.properties.pcp +'.png',
52
+ iconRetinaUrl: '<?php echo get_stylesheet_directory_uri(); ?>/'+ feature.properties.pcp2x +'.png',
53
+ iconSize: [25, 41]
54
+ //iconAnchor: [12.5, -20],
55
+ //popupAnchor: [0, 20],
56
+ });
70
- layer.setIcon(iconChange);
57
+ return L.marker(latlng, {icon: iconChange});
58
+ return L.polyline(latlng);
59
+ },
60
+ style: function (feature) {
61
+ return {
62
+ color: feature.properties['stroke'],
63
+ weight: feature.properties['stroke-width'],
64
+ opacity: feature.properties['stroke-opacity']
65
+ };
71
- }
66
+ }
72
67
  });
73
- var polyline = L.polyline(geoJsonData).addTo(map);
74
- map.addLayer(polyline);
75
-
76
- markers.addLayer(geoJsonLayer);
68
+ markers.addLayer(geoJsonLayer);
77
69
  map.addLayer(markers);
78
70
  map.fitBounds(markers.getBounds());
79
71
  map.setView([35.156, 136.890], 8);
72
+
73
+ httpObj.send(null);
74
+ });
80
75
  </script>
81
76
  ```
82
77
 
83
78
 
84
79
  ```geojson
85
- var geoJsonData = {
80
+ {
86
81
  "type": "FeatureCollection",
87
82
  "features": [
88
83
  {

1

タイトルにLeaflet.jsと記載

2019/04/08 06:57

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
@@ -1,1 +1,1 @@
1
- 外部GeoJSONの変数部分をとり、polylineを表示させたい
1
+ Leaflet.jsにて外部GeoJSONの変数部分をとり、polyline（線）を表示させたい
body CHANGED
File without changes