1.実装したい機能
Mapのサービス(今回はMappBox※)で、データテーブルからGeoJSON作成し、複数のマーカーを地図上に立てたい。
※Mapboxは、google map APIと同等の考え方でOK。
2.前提条件
・html内でjavascriptを走らせる。
・データテーブルに必要なプロパティを保存済み。
・API連携はすでにできている
・cssのマーカー作りも問題なし。
3.1.発生している問題-大枠
①ループ処理でGEOJSONデータを作成していくことが出来ない
特に「JSON内のJSONを作成する」ところで行き詰まっている
②ループ処理内の各array?の中にbubble内データベースのレコードを変数としてぶち込む。
3.2.想定している手順と出来ているところ
◯→出来てる、×→出来てない、★問題部分
- [◯・フロント] htmlの設置、CSSのクラスをheaderに追加
- [◯・html内] タグのセット
- [◯・html内] 内に以下の設置
・3.1.[◯]API元のaccessToken = private key
・3.2.[★]GeoJSONデータを置く
・[ver.1-◯] JSONデータのベタ打ちでやる
・[ver.2-×] JSONデータをbubbleのカラムを使ってループ処理で作成する
→'features'内のJSONデータをループ処理で作成していきたい。
・3.3.[◯]上記GeoJSONごとに、ループ処理でクラスやプロパティ(タップ時の遷移URL)を追加
3.3. 上記「3.2.[ver.1]」で出来てること
JSONデータのベタ打ちはこちら。
featuresの中身が地図のマーカーを置きたいとこのリストになる。
const geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [139.695473, 35.670871]//経度・緯度。ここも苦戦しそう
}//つまりJSON内にさらに下階層ある。 "features[i].geometry.type: 'Point',"的な...？
}, //{この後、このfeature[i]が続く}
]
}
3.4. 上記「3.2.[ver.2]」で考えたこと
stringデータをJSON化(stringify)し、読める形(parse)する？
といいつつ、JSON化でも苦戦してる。
parse不要？そもそもこの方法が間違っている説もある。
const geojson = JSON.stringify(
'type': 'FeatureCollection',
'features':
var datasets = "ここにbubble内データのsearch forしたカラム";
for ( var =i,i<=datasets.length, i++){
var keido = datasets[i].keido //ここにSQLでいうselect 経度カラムの数字を入れる
var ido = datasets[i].ido //ここにSQLでいうselect 緯度カラムの数字を入れる
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [[keido], [ido]]//上記のvarの値をセット
}
}
)
var Geodata = JSON.parse(geojson); //これいる...？最初なかったぞ。Features内のJSONをJSON.stringifyすべき？
###4.スクリーンショット
*できれば、全体が分かるようにスクリーンショットを載せてもらえれば助かります。
- 出来てるやつ (JSONデータ部分)
補足情報 （調べたURL/参考になりそうな事例）
- MapBoxのexample (ループなし。Ver1のもの)
出来てる部分はここからほぼコピペ。
Add custom icons with Markers | Mapbox GL JS | Mapbox
2.MapboxのJSONデータ複数のものを直接管理画面にぶち込むチュートリアル&動画。
まぁ、上記出来てるJSONデータの羅列ですね。
-
GeoJSON作成(stringify)のstackoverflow
活かせてないがありえる。
javascript - Cannot "stringify" geoJSON data - Stack Overflow -
上記2内のベタ打ちverのJSONデータ
JS Bin - Collaborative JavaScript Debugging