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

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

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

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

Q&A

解決済

1回答

4992閲覧

Leaflet geojsonから読み込んだ配列の名前の一覧を地図外に作り、吹き出しリンクを付けたい

oyatsu8

総合スコア97

JavaScript

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

0グッド

0クリップ

投稿2017/01/17 10:30

編集2017/01/18 15:49

Leafletのサイトの下記のリンクを参考に
配列の名前の一覧を地図外に作り、吹き出しリンクを付けたいと考えたのですが、
前の質問のようなものを、geojsonのデータ読み込みで
外部テキストリンクを生成したいと考えています。

例えば、地図の横に

This is a A
This is a B
This is a C
This is a D

と表示され、それぞれをクリックすると、対応するマーカーからポップアップがでるものを作りたいと考えていますが、たとえば、each featureの下辺に下記のように書いたら出来るかと思ったのですが、どう書いたらいいか分かりません、、下記はonclikでやろうとしていますが、他の方法でも何でも構いません。アドバイス頂けたら助かります。

javascript

1 2function testFunc(fukidashi){ 3//[bicycleRental]の吹き出しがでる処理 4} 5 6 7$("<p><a id="+ features[index].geometry.coordinates[1] + " onclick=\"testFunc(\""+features[index].properties.title+"\")\">" + features[index].properties.title +"</a></p>").appendTo('#test_txt');

http://leafletjs.com/examples/geojson/

javascript

1<!DOCTYPE html> 2<html> 3<head> 4 <title>GeoJSON tutorial - Leaflet</title> 5 <meta charset="utf-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 8 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> 9 <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> 10 <style> 11 #map { 12 width: 600px; 13 height: 400px; 14 } 15 </style> 16</head> 17<body> 18 19<div id='map'></div> 20<div id='test_txt'></div> 21<script src="sample-geojson.js" type="text/javascript"></script> 22 23<script> 24 25function testFunc(fukidashi){ 26//[bicycleRental]の吹き出しがでる処理 27} 28 var map = L.map('map').setView([39.74739, -105], 13); 29 30 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { 31 maxZoom: 18, 32 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 33 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 34 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 35 id: 'mapbox.light' 36 }).addTo(map); 37 38 var baseballIcon = L.icon({ 39 iconUrl: 'baseball-marker.png', 40 iconSize: [32, 37], 41 iconAnchor: [16, 37], 42 popupAnchor: [0, -28] 43 }); 44 45 function onEachFeature(feature, layer) { 46 var popupContent = "<p>test " + 47 feature.geometry.type + ", test--test</p>"; 48 49 if (feature.properties && feature.properties.popupContent) { 50 popupContent += feature.properties.popupContent; 51 } 52 53 layer.bindPopup(popupContent); 54 55 56 57 58 $("<p><a id="+ [bicycleRental]のid + " onclick=\"testFunc(\""+features[index].properties.title+"\")\">" + features[index].properties.title +"</a></p>").appendTo('#test_txt'); 59 } 60 61 L.geoJSON([bicycleRental], { 62 63 style: function (feature) { 64 return feature.properties && feature.properties.style; 65 }, 66 67 onEachFeature: onEachFeature, 68 69 pointToLayer: function (feature, latlng) { 70 return L.circleMarker(latlng, { 71 radius: 8, 72 fillColor: "#ff7800", 73 color: "#000", 74 weight: 1, 75 opacity: 1, 76 fillOpacity: 0.8 77 }); 78 } 79 }).addTo(map); 80 81</script> 82</body> 83</html>

sample

1var bicycleRental = { 2 "type": "FeatureCollection", 3 "features": [ 4 { 5 "geometry": { 6 "type": "Point", 7 "coordinates": [ 8 -104.9998241, 9 39.7471494 10 ] 11 }, 12 "type": "Feature", 13 "properties": { 14 "popupContent": "This is a A", 15 "title":"id_51とか" 16 }, 17 "id": 51 18 }, 19 { 20 "geometry": { 21 "type": "Point", 22 "coordinates": [ 23 -104.9983545, 24 39.7502833 25 ] 26 }, 27 "type": "Feature", 28 "properties": { 29 "popupContent": "This is a B", 30 "title":"id_52かな" 31 }, 32 "id": 52 33 }, 34 { 35 "geometry": { 36 "type": "Point", 37 "coordinates": [ 38 -104.9963919, 39 39.7444271 40 ] 41 }, 42 "type": "Feature", 43 "properties": { 44 "popupContent": "This is a C", 45 "title":"id_54です" 46 }, 47 "id": 54 48 }, 49 { 50 "geometry": { 51 "type": "Point", 52 "coordinates": [ 53 -104.9960754, 54 39.7498956 55 ] 56 }, 57 "type": "Feature", 58 "properties": { 59 "popupContent": "This is a D", 60 "title":"id_55ですです" 61 62 }, 63 "id": 55 64 }, 65 { 66 "geometry": { 67 "type": "Point", 68 "coordinates": [ 69 -104.9933717, 70 39.7477264 71 ] 72 }, 73 "type": "Feature", 74 "properties": { 75 "popupContent": "This is a E", 76 "title":"id_57" 77 }, 78 "id": 57 79 }, 80 { 81 "geometry": { 82 "type": "Point", 83 "coordinates": [ 84 -104.9913392, 85 39.7432392 86 ] 87 }, 88 "type": "Feature", 89 "properties": { 90 "popupContent": "これで最後", 91 "title":"test end" 92 }, 93 "id": 58 94 }, 95 { 96 "geometry": { 97 "type": "Point", 98 "coordinates": [ 99 -104.9788452, 100 39.6933755 101 ] 102 }, 103 "type": "Feature", 104 "properties": { 105 "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!" 106 }, 107 "id": 74 108 } 109 ] 110}; 111コード

keiさんに教えて頂くことで実現出来ました

javascript

1<!DOCTYPE html> 2<html> 3<head> 4 <title>GeoJSON tutorial - Leaflet</title> 5 <meta charset="utf-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 8 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> 9 <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 11 <style> 12 #map { 13 width: 600px; 14 height: 400px; 15 } 16 </style> 17</head> 18<body> 19 20<div id='map'></div> 21<div id='test_txt'></div> 22<script src="sample-geojson.js" type="text/javascript"></script> 23 24<script> 25 var map = L.map('map').setView([39.74739, -105], 13); 26 27 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { 28 maxZoom: 18, 29 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 30 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 31 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 32 id: 'mapbox.light' 33 }).addTo(map); 34 35 var baseballIcon = L.icon({ 36 iconUrl: 'baseball-marker.png', 37 iconSize: [32, 37], 38 iconAnchor: [16, 37], 39 popupAnchor: [0, -28] 40 }); 41 42 function onEachFeature(feature, layer) { 43 var popupContent = "<p>test " + 44 feature.geometry.type + ", test--test</p>"; 45 46 if (feature.properties && feature.properties.popupContent) { 47 popupContent += feature.properties.popupContent; 48 } 49 layer.bindPopup(popupContent); 50 51 52 var aaa = 'aaa'; 53 layer.bindPopup( feature.properties.popupContent ); 54 $('#test_txt').append('<div id=\"' + feature.id + '\">' + aaa + '</div>' ); 55 $( '#' + feature.id ).click( function() { 56 layer.openPopup(); 57 } ); 58 } 59 60 L.geoJSON([bicycleRental], { 61 62 style: function (feature) { 63 return feature.properties && feature.properties.style; 64 }, 65 66 onEachFeature: onEachFeature, 67 68 pointToLayer: function (feature, latlng) { 69 return L.circleMarker(latlng, { 70 radius: 8, 71 fillColor: "#ff7800", 72 color: "#000", 73 weight: 1, 74 opacity: 1, 75 fillOpacity: 0.8 76 }); 77 } 78 }).addTo(map); 79 80</script> 81 82</body> 83</html> 84

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

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

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

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

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

guest

回答1

0

ベストアンサー

こういうやり方でできるはず。'aaa' 部分には重複のない英数字文字列を入れるように調整すればよいです。

JavaScript

1function onEachFeature( feature, layer ) { 2 var aaa = 'aaa'; 3 layer.bindPopup( feature.properties.popupContent ); 4 $( '#test_txt' ).append( '<div id="' + aaa + '">' + aaa + '</div>' ); 5 $( '#' + aaa ).click( function() { 6 layer.openPopup(); 7 } ); 8}

投稿2017/01/18 11:49

kei344

総合スコア69364

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

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

oyatsu8

2017/01/18 13:36

いつも大変ありがとうございます! やってみたのですが、配列の一番最後のものだけがポップアップする場合は、 外に出すなどしたらいいのでしょうか
kei344

2017/01/18 14:39

配列とはどこのことを指しているのでしょうか。
oyatsu8

2017/01/18 15:48

上記の質問は無事にできました!! どうもありがとうございます。 解決したものを貼ります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問