Leafletにてgeojsonが外部読み込みされない

やりたいこと

現状のソースコードに書いたhoge.geojsonをjQueryなしで外部読み込みさせたいのですが、
うまくいきません。
なにか解決策はご存知でしょうか？

###現状のソースコード

HTML
1<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
2  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
3  crossorigin=""/>
4<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
5<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
6<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
7  integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
8  crossorigin=""></script>
9<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
10
11<div id="map" style="width: 600px;height: 500px"></div>

JavaScript
1<script>
2		var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
3		    maxZoom: 14,
4		    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
5		});
6
7        var map = L.map('map')
8                .addLayer(tiles);
9
10        var markers = L.markerClusterGroup({
11		    showCoverageOnHover: true,
12		    spiderfyOnMaxZoom: false,
13		    removeOutsideVisibleBounds: true,
14		    disableClusteringAtZoom: 8
15			}
16        	);
17
18httpObj = new XMLHttpRequest();
19httpObj.open("get", "hoge.geojson", function(data){
20	 GeoJSON.parse(data);
21
22    var geoJsonLayer = L.geoJson(data, {
23            onEachFeature: function (feature, layer) {
24                layer.bindPopup(feature.properties.popup);
25            },
26			pointToLayer: function(feature, latlng) {
27				var iconChange = L.icon({
28				    iconUrl: '<?php echo get_stylesheet_directory_uri(); ?>/'+ feature.properties.pcp +'.png',
29				    iconRetinaUrl: '<?php echo get_stylesheet_directory_uri(); ?>/'+ feature.properties.pcp2x +'.png',
30				    iconSize: [25, 41]
31				    //iconAnchor: [12.5, -20],
32				    //popupAnchor: [0, 20],
33				});
34				return L.marker(latlng, {icon: iconChange});
35				return L.polyline(latlng);
36			},
37			style: function (feature) {
38        		return {
39        			color: feature.properties['stroke'],
40        			weight: feature.properties['stroke-width'],
41        			opacity: feature.properties['stroke-opacity']
42        		};
43    		}
44        });
45	    markers.addLayer(geoJsonLayer);
46        map.addLayer(markers);
47        map.fitBounds(markers.getBounds());
48        map.setView([35.156, 136.890], 8);
49
50		httpObj.send(null);
51});
52</script>

geojson
1{
2  "type": "FeatureCollection",
3  "features": [
4    {
5      "type": "Feature",
6      "properties": {
7        "marker-color": "#7e7e7e",
8        "marker-size": "medium",
9        "marker-symbol": "",
10        "popup": "<a href=\"hoge.jpg\" target=\"_blank\">あああ</a>"
11      },
12      "geometry": {
13        "type": "Point",
14        "coordinates": [
15          138.787242,
16          37.664411
17        ]
18      }
19    },
20    {
21      "type": "Feature",
22      "properties": {
23        "marker-color": "#7e7e7e",
24        "marker-size": "medium",
25        "marker-symbol": "",
26        "popup": "あああああああ"
27      },
28      "geometry": {
29        "type": "Point",
30        "coordinates": [
31          138.78552,
32          37.663027
33        ]
34      }
35    },
36    {
37      "type": "Feature",
38      "properties": {},
39      "geometry": {
40        "type": "Point",
41        "coordinates": [
42          138.802069,
43          37.653211
44        ]
45      }
46    },
47    {
48      "type": "Feature",
49      "properties": {},
50      "geometry": {
51        "type": "Point",
52        "coordinates": [
53          138.819922,
54          37.64502
55        ]
56      }
57    },
58    {
59      "type": "Feature",
60      "properties": {},
61      "geometry": {
62        "type": "Point",
63        "coordinates": [
64          138.826511,
65          37.636968
66        ]
67      }
68    },
69    {
70      "type": "Feature",
71      "properties": {},
72      "geometry": {
73        "type": "Point",
74        "coordinates": [
75          138.826649,
76          37.626823
77        ]
78      }
79    },
80    {
81      "type": "Feature",
82      "properties": {},
83      "geometry": {
84        "type": "Point",
85        "coordinates": [
86          138.834801,
87          37.626811
88        ]
89      }
90    },
91    {
92      "type": "Feature",
93      "properties": {},
94      "geometry": {
95        "type": "Point",
96        "coordinates": [
97          138.83981,
98          37.61816
99        ]
100      }
101    },
102    {
103      "type": "Feature",
104      "properties": {},
105      "geometry": {
106        "type": "Point",
107        "coordinates": [
108          138.832363,
109          37.6159
110        ]
111      }
112    },
113    {
114      "type": "Feature",
115      "properties": {
116        "stroke": "#d10004",
117        "stroke-width": 10,
118        "stroke-opacity": 1
119      },
120      "geometry": {
121        "type": "LineString",
122        "coordinates": [
123          [
124            138.77723693847656,
125            37.66670097960347
126          ],
127          [
128            138.78976821899414,
129            37.662488471331706
130          ]
131        ]
132      }
133    }
134  ]
135}

現在のエラー

マップはグレーアウトした状態で表示され、画像が読み込めていない状態です。
詳細にお伝えすると以下のようなhtmlしか読み込まれていないです。

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

ズームマークをクリックすると以下のようなコンソールエラーがでます。

leaflet.js:5 Uncaught Error: Set map center and zoom first.
    at e._checkIfLoaded (leaflet.js:5)
    at e.getCenter (leaflet.js:5)
    at e.<anonymous> (leaflet.js:5)
    at e.fire (leaflet.js:5)
    at e._onPanTransitionEnd (leaflet.js:5)
    at e.fire (leaflet.js:5)
    at e._complete (leaflet.js:5)
    at e._step (leaflet.js:5)
    at e._animate (leaflet.js:5)

annderber

2019/04/08 09:10

うまくいかないとありますが具体的にどのような問題が起きているのでしょうか？エラーメッセージなど表示されているなら追記をお願いいたします。

southern_flavor

2019/04/08 09:29

ご指摘ありがとうございます。エラーの詳細について追記しました。

annderber

2019/04/08 09:37 編集

いくつか確認させてください。１．httpObj.open("get", "hoge.geojson", function(data)の処理でファイルの取得は出来ていますでしょうか。２．GeoJSON.parse(data);とありますが、JSON.parse(data);の間違えではないでしょうか。３．feature.properties.pcpとfeature.properties.pcp2xのパラメータがgeojson内に存在しません。掲示されているgeojsonデータをscript内にべた書きして読み込んだ限りではパラメータ不足でエラーが出ていても、マップの表示自体はされていました。ご確認お願いいたします。

southern_flavor

2019/04/08 11:07

1〜3まで一通りチェックしたのですが、地図の画像が表示されませんでした。。現在、どのような表示になっているか、質問欄に添付します。 open("get","")の""には絶対パスを使っているくらいですが。。マップが表示されているとのことですが、マップの画像も表示されていますか？

行動規範の内容に同意します

回答1件

ベストアンサー

再度修正しました。

JavaScript
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
9    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
10    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
11    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
12    <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
13
14    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
15</head>
16<body>
17    <div id="map" style="width: 600px;height: 500px"></div>
18
19    <script>
20        var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
21            maxZoom: 14,
22            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
23        });
24
25        var map = L.map('map')
26                .addLayer(tiles);
27
28        var markers = L.markerClusterGroup({
29            showCoverageOnHover: true,
30            spiderfyOnMaxZoom: false,
31            removeOutsideVisibleBounds: true,
32            disableClusteringAtZoom: 8
33            }
34        );
35
36        httpObj = new XMLHttpRequest();
37        httpObj.open("GET", "hoge.json", true);
38        httpObj.addEventListener('load', function(res){
39            const data = JSON.parse(res.currentTarget.response);
40            var geoJsonLayer = L.geoJson(data, {
41                onEachFeature: function (feature, layer) {
42                    layer.bindPopup(feature.properties.popup);
43                },
44                pointToLayer: function(feature, latlng) {
45                    var iconChange = L.icon({
46                        iconUrl: '<?php echo get_stylesheet_directory_uri(); ?>/'+ feature.properties.pcp +'.png',
47                        iconRetinaUrl: '<?php echo get_stylesheet_directory_uri(); ?>/'+ feature.properties.pcp2x +'.png',
48                        iconSize: [25, 41]
49                        //iconAnchor: [12.5, -20],
50                        //popupAnchor: [0, 20],
51                    });
52                    return L.marker(latlng, {icon: iconChange});
53                    return L.polyline(latlng);
54                },
55                style: function (feature) {
56                    return {
57                        color: feature.properties['stroke'],
58                        weight: feature.properties['stroke-width'],
59                        opacity: feature.properties['stroke-opacity']
60                    };
61                }
62            });
63            markers.addLayer(geoJsonLayer);
64            map.addLayer(markers);
65            map.fitBounds(markers.getBounds());
66            map.setView([35.156, 136.890], 8);
67
68        });
69
70        httpObj.send(null)
71    </script>
72</body>
73</html>

XMLHttpRequestを行った場合での処理で編集し直しました。ファイルのパスは変更してください。

投稿2019/04/09 06:31

編集2019/04/09 08:12

annderber

総合スコア98

southern_flavor

2019/04/09 07:47

コードまで貼り付けていただき、ありがとうございます。確かにこの通り実行すると表示されました。ただ、説明不足で申し訳ないのですが、geojsonの形式は外部読み込みで先頭にvarやconstを入れない形にしたいです。なので、このような形のままにしたいです。 { "type": "FeatureCollection", "features": [ {・・・こうなるとjQueryの $.getJSON()　を使うしかないのでしょうか。

annderber

2019/04/09 08:27

回答修正しました。 XMLHttpRequestの仕様を見る限り書き方を間違えています。私もあまりXMLHttpRequestを使用することはないので、回答の書き方が一番良いかは分からないです。今だとfetchAPIの方が使いやすいと思います。 https://qiita.com/uhyo/items/91649e260165b35fecd7

southern_flavor

2019/04/09 11:35

ありがとうございます。 XHRの仕様を確認すればよかったですね。こちらのコードで問題なく動きました。また、fetchについても仕様を確認して実装してみたいと思います。いろいろお付き合いいただき、ありがとうございました。

行動規範の内容に同意します