Javascript,leaflet.js
GeoJson(下記では jsファイル cat_geojson.js)でLeaflet.jsを使った地図にクリックでポップアップするピンを建てたいのですが、なぜか立ちません。アドバイスを頂けると助かります。
自分の解釈では、function onEachFeature(feature, layer) {...
関数を書けば、自動的にポップアップになると思っていました。
このページを参考にしました。
http://leafletjs.com/examples/geojson/
//読み込んでいる cat_geojson.js
var cat = { "type": "FeatureCollection", "features": [ { "type": "feature", "geometry":{ "type":"Point", "coordinates":[ 141.347899, 40.863968 ] }, "type": "Feature", "properties":{ "popupContent":"にゃー", "title":"三毛猫", "material":"ネコ", "style": {//変更してみた weight: 2, color: "#444", opacity: 1, fillColor: "#f00", fillOpacity: 0.8 } , "color":"#00F" }, "id": 1 },{ "type": "feature", "geometry":{ "type":"Point", "coordinates":[ 141.347899, 41.863968 ] }, "type": "Feature", "properties":{ "popupContent":"にゃーにゃー", "title":"黒猫", "material":"ネコ", "style": {//変更してみた weight: 2, color: "#444", opacity: 1, fillColor: "#f00", fillOpacity: 0.8 } , "color":"#00F" }, "id": 1 }, ]};//JSONデータ おわり
//index.html <!doctype html> <html lang="js"> <head> <title>catIリスト</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="dist/leaflet.css" /> <link rel="stylesheet" href="src/leaflet-search.css" /> <link rel="stylesheet" href="src/style.css" /> </head> <body> <!-- html --> <div id="map" style="width: 800px; height: 800px"></div> <script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script> <div class="div_cat"></div> <form name="form1" action=""> <input name="textBox1" type="text" value="" /> <input id="exec" type="button" value="Exec"/> </form> <hr /> <div id="output"></div> <script src="cat_geojson.js" type="text/javascript"></script> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> ///////////// //map start var cat_box = new L.LayerGroup(); var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>', mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw'; var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}), streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}); var map = L.map('map', { center: [38.00,137.00], zoom: 6, layers: [grayscale, cat_box] }); var baseLayers = { "Grayscale": grayscale, "Streets": streets }; var overlays = { "ネコマップ" : cat_box }; L.control.layers(baseLayers, overlays).addTo(map); //map end ///////////// //test var p1 = L.point(10, 10), p2 = L.point(40, 60), bounds = L.bounds(p1, p2); ////test start function onEachFeature(feature, layer) { var popupContent = "<p>I started out as a GeoJSON " + feature.geometry.type + ", but now I'm a cat!</p>"; if (feature.properties && feature.properties.popupContent) { popupContent += feature.properties.popupContent; layer.bindPopup(feature.properties.popupContent); } } L.geoJSON(cat, { style: function (feature) { return feature.properties && feature.properties.style; }, onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius: 8, fillColor: "#00ffff", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }); } }).addTo(map); ////test end </script> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/02 18:22
2016/11/02 18:30
2016/11/03 02:43
2016/11/03 05:54