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

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

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

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

567閲覧

XMLから取得したデータを使いGeoJSONの形式を作ったが、leaflet を使ってどうやってそれらのデータにアクセスするかがわからない。

TomofumiKimura

総合スコア65

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/08/21 09:35

編集2022/01/12 10:55

xml からデータを取得してjavascript の中にある関数の中でGeoJSONの形式にしてオブジェクトを作ったのですが、そのオブジェクトのそれぞれのデータにアクセスをしてleafletを使いマップを作りそのデータをマーカーでマップに表示させようとしているのですが、うまく言っていません。わからないことはどうやったらそのGeoJSON のデータ(id, name, capacityにそれぞれアクセスできるのでしょうか?

javascript

1var Convert = (function(){ 2 var pub={}; 3 4 function onEachFeatureImpl(feature, layer) { 5 var popupContent = "<b>Point of Interest</b> <br/>" + feature.properties.description; if (feature.properties && feature.properties.popupContent) { 6 popupContent += feature.properties.popupContent; } 7 layer.bindPopup(popupContent); 8 } 9 10 function loading(){ 11 var file = "libraries.xml"; 12 $.ajax({ 13 type:"GET", 14 url:file, 15 cache:false, 16 // if it receives the file 17 success:function(data){ 18 console.log("i got it"); 19 // need a function to convert 20 // testing 21 convert(data); 22 }, 23 error:function(){ 24 // fail to get it 25 console.log("Failed to get it"); 26 } 27 28 }); 29 30 function convert(data){ 31 // find info in xml 32 $(data).find("library").each(function(){ 33 // xml data i need 34 var address = $(this).find("address")[0].textContent; 35 var lat = $(this).find("lat")[0].textContent; 36 var lng = $(this).find("lng")[0].textContent; 37 var id= $(this).find("id")[0].textContent; 38 var description = "Little_Library"; 39 var capacity = $(this).find("capacity")[0].textContent; 40 // GeoFormat object 41 var geojson = 42 { 43 "type":"FeatureCollection", 44 "features":[ 45 { 46 "type":"Feature", 47 "geometry":{ 48 "type":"Point", 49 "coordinates":[ 50 lng, 51 lat 52 53 ] 54 }, 55 "properties":{ 56 "id": id, 57 "description":description, 58 "name": address, 59 "capacity": capacity, 60 "numBooks": 0 61 } 62 } 63 ] 64 }// end geojson 65 66 67 68 //console.log(geojson); 69 L.geoJSON(geojson, { 70 onEachFeature: onEachFeatureImpl 71 }).addTo(mymap); 72 73 }); 74 }// end convert 75 76 77 }// end converting 78 79 80 81 82 pub.setup = function(){ 83 84 window.onload = Convert.convert; 85 } 86 return pub; 87}()); 88 89$(document).ready(Convert.setup);

html

1<!-- Assignemnt 1 Tomofumi Kimura COSC212 --> 2 3<!DOCTYPE html> 4 5<html> 6 <head> 7 <meta charset ="UTF-8"> 8 <link rel="stylesheet" type="text/css" href="style.css"> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 11 <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 12 13 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" crossorigin="" /> 14 <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA==" crossorigin=""></script> 15 16 <title>Lilliput Libraries</title> 17 <script src = "jquery-3.2.1.min.js"></script> 18 <script src ="data.js"></script> 19 20 </head> 21 22 <body> 23 <div id="mapid" style = "width: 1200px; height:1200px;"></div> 24 <script> 25 //first view in map 26 var mymap = L.map('mapid').setView([-45.866891,170.518202], 18); 27 28 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 29 maxZoom: 18, 30 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 31 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 32 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 33 id: 'mapbox.streets' 34 }).addTo(mymap); 35 36 var customOption = { 37 'maxWidth' : 'auto' 38 } 39 40 L.geoJSON(Convert.points).addTo(mymap); 41 42 // create a marker at given coordinates 43 44 var popup = L.popup(); 45 function onMapClick(e) { 46 popup 47 .setLatLng(e.latlng) 48 .setContent("You clicked the map at " + e.latlng.toString()) 49 .openOn(mymap); 50 } 51 52 mymap.on('click', onMapClick); 53 </script> 54 55 56 <div class = "map-home"> 57 <p class = "aho"></p> 58 59 60 61 62 </div> 63 64 65 66 </body> 67</html>

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

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

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

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

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

kei344

2017/08/21 09:49

「それぞれのデータにアクセス」とは?
TomofumiKimura

2017/08/21 12:13

すみません、質問が下手で。それぞれのデータとはGeoJSONの中のid やnam やcapacity などです。
kei344

2017/08/21 13:22 編集

いつどのように使うために?(追記)失礼、マーカーに使うだけですね。
TomofumiKimura

2017/08/21 13:29

はい、そうです。それでどのようにアクセスできるのでしょうか??お願いします!!
TomofumiKimura

2017/08/21 13:31

htmlの中のjavascriptで L.geoJSON(使いたいデータ).addTo(mymap);このように使いたいのですが。
guest

回答1

0

公式のサンプルでやってしまうか、わざわざgeoJSONにせずにマーカーとポップアップを追加していけばよいのでは。

【Documentation - Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/reference-1.2.0.html#geojson

JavaScript

1L.geoJSON(data, { 2 style: function (feature) { 3 return {color: feature.properties.color}; 4 } 5}).bindPopup(function (layer) { 6 return layer.feature.properties.description; 7}).addTo(map);

Marker:http://leafletjs.com/reference-1.2.0.html#marker
Popup:http://leafletjs.com/reference-1.2.0.html#popup

投稿2017/08/21 13:34

kei344

総合スコア69364

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

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

TomofumiKimura

2017/08/21 13:40

やらなくてはいけないことは、xml ファイルからデータを取得してそれらをGeoJSONの形式に変え、html のページ内にそのGeoJSONの生のコードを表示して、さらにそのGeoJSONからマップを作らなければいけないんですけど、なのでGeoJSONの形式に変えないといけないのです。
kei344

2017/08/21 13:45 編集

公式のサンプルは試しましたか? あと、「生のコードを表示して」用のGeoJSONを作って、マーカーの生成は別でしても同じでしょう。 「変えないといけない」というような発想でコードを書くと柔軟な思考ができませんよ。学校の課題か何かですか?
TomofumiKimura

2017/08/21 13:48

はい、大学の課題です。すいません、別でしても同じとはどういう意味なのでしょうか?
TomofumiKimura

2017/08/21 13:50

あと公式のサンプルのコードがどのように使えるかがわからないのですが。。
kei344

2017/08/21 13:51

マーカーを作るコードと、GeoJSONを作るコードが別でも表示としては画面上にGeoJSONとマーカーが打たれたマップがあるのだから要件は満たしているでしょう。
TomofumiKimura

2017/08/21 13:54

なるほど、それでそれはどのようにしてできるのでしょうか?
kei344

2017/08/21 13:55

> 公式のサンプルのコードがどのように使えるかがわからない ポップアップ付きのマーカーを表示するためのコードのはずですが、どこがわかりませんか?
kei344

2017/08/21 13:55

> それでそれはどのようにしてできるのでしょうか? リンク先にリファレンスがあり、サンプルもいくつか掲載されているのでそれ見て勉強してください。
TomofumiKimura

2017/08/21 14:01

return {color: feature.properties.color}; ここの部分とは何をしているのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問