質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

5844閲覧

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

southern_flavor

総合スコア70

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/04/04 09:13

編集2019/04/08 11:07

やりたいこと

現状のソースコードに書いた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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

annderber

2019/04/08 09:10

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

2019/04/08 09:29

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

2019/04/08 09:37 編集

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

2019/04/08 11:07

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

回答1

0

ベストアンサー

再度修正しました。

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についても仕様を確認して実装してみたいと思います。 いろいろお付き合いいただき、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問