JSONPから取得したgeoJSONデータを一覧表示したい

外部jsに記述した var test_callback = {----geojsonデータ};
は下記のようなコードで読めたのですが、JSONP形式にしたファイルを読み込んで
データ（例えば properties.place ）を一覧表示したいのですが、onEachFeatureを使うのかと考え、色々やってみたいのですがどうやったらいいか全くわからず、、助言を頂けたら助かります。

[外部jsにしたgeojsonの読み込み]

Javascript
1<!doctype html>
2<html lang="js">
3<head>
4    <title>CATマップ</title>
5    <!--[if lt IE 9]>
6    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
7    <![endif]-->
8    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
11    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
12    <script src="cat_geojson.js" type="text/javascript"></script>
13    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
14    <script type="text/javascript" src="japan-map.js"></script>
15
16    <link rel="stylesheet" href="src/style.css" />
17</head>
18<body>
19    <!-- html -->
20<div id="map" style="width: 800px; height: 800px"></div>
21
22<div class="div_cat"></div>
23<form name="form1" action="">
24    <input name="textBox1" type="text" value="" />
25    <input id="exec" type="button" value="Exec"/>
26</form>
27<hr />
28<div id="output"></div>
29
30<script>
31/////////////
32//map start
33var cat_box = new L.LayerGroup();
34
35var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
36    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
37    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
38mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
39
40var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
41    streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});
42
43var map = L.map('map', {
44    center: [38.00,137.00],//緯度経度latlng
45    zoom: 6,
46    layers: [grayscale, cat_box]
47});
48
49var baseLayers = {
50    "Grayscale": grayscale,
51    "Streets": streets
52};
53
54var overlays = {
55   "ネコマップ" : cat_box
56};
57
58L.control.layers(baseLayers, overlays).addTo(map);
59
60////test start
61function onEachFeature(feature, layer) {
62    // does this feature have a property named popupContent?
63    if (feature.properties && feature.properties.popupContent) {
64        layer.bindPopup(feature.properties.popupContent);
65    }
66}
67
68L.geoJSON(cat, {
69    onEachFeature: onEachFeature,
70
71//ここを入れるとポップアップが立たなくなる
72            pointToLayer: function (feature, latlng) {
73            return L.circleMarker(latlng, {
74                radius: 8,
75                fillColor: "#ff7800",
76                color: "#000",
77                weight: 1,
78                opacity: 1,
79                fillOpacity: 0.8
80            });
81        }
82
83}).addTo(cat_box);
84
85</script>
86</body>
87</html>
88

[JSONP]

Javascript
1test_callback({"type":"FeatureCollection","metadata":{
2"generated":1478870781000,
3"url":"#",
4"title":"animal world","status":200,"api":"1.1.1","count":157},
5"features":[{
6	"type":"Feature",
7	"properties": {
8		"place": "サルの国",
9		"time": 1478869672060,
10		"updated": 1478870582064,
11		"type": "earthquake",
12		"title": "M 1.3 - 6km W of The Geysers, California"
13	}, "geometry": {
14	"type": "Point",
15	"coordinates": [120.5471667, 38.0681667, 10.08]
16},
17	"id": "a00001"
18},{
19	"type": "Feature",
20	"properties": {
21		"place": "ネコの国",
22		"time": 1478869672060,
23		"updated": 1478870582064,
24		"type": "earthquake",
25		"title": "M 1.3 - 6km W of The Geysers, California"
26	},
27	"geometry": {
28		"type": "Point",
29		"coordinates": [136, 38.776165, 8]
30	},
31	"id": "a00002"
32},{
33	"type": "Feature",
34	"properties": {
35		"place": "ゾウの国",
36		"time": 1478869672060,
37		"updated": 1478870582064,
38		"type": "earthquake",
39		"title": "M 1.3 - 6km W of The Geysers, California"
40	},
41	"geometry": {
42		"type": "Point",
43		"coordinates": [148, 38.776165, 8]
44	},
45	"id": "a00003"
46},],"bbox": [-178.2071, -32.162, -1.43, 174.4701, 65.4613, 639.36]
47});
48

kei344

2016/12/12 17:21

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。

oyatsu8

2016/12/13 12:01

すみません、解決済にさせて頂きました

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

回答1件

自己解決

自己解決しました。下記のように書いたらちゃんと一覧が表示出来ました。
JSONPはスクリプトであるとのことなのですが、なぜこのようにするのか、
クロスドメイン対策で、jsファイル（var test = {}）とする場合と、jsonp（test_callback({})）にする場合の違いがよくわかりませんでした。

var test_callback = function(jsonData){
for(var index in jsonData.features){
document.write("<p>"+"名前は"+jsonData.features[index].properties.municipality+"</p>");
}
}

投稿2016/12/12 16:39

oyatsu8

総合スコア97