i2i無料WEBパーツ
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Google Mapの画像を読み込み、都市の緯度経度を画像の位置とマッピングさせる手法を試してみました。
ものすごく簡単にできるんですね。。。驚きますわ。

GoogleMapperってのを使ったんですが、経度緯度を画面にマッピングしてくれるんですね。
便利。郵便番号から経度、緯度を取得するAPIを使ってみたかったんですが、
xmlのパースがうまくいかずにとりあえず保留にしました。

参考にしたサイトはこちら↓。
Processingでお手軽にGoogleマップから画像を取得する - Imaginable Reality

googlemapper


import googlemapper.*;
//import processing.xml.*;

XML xml;
GoogleMapper gMapper;
PImage mapImage;

void setup() {
size(640, 640);

double mapCenterLat = 35.709961; // 緯度
double mapCenterLon = 139.810858; // 経度
int zoomLevel = 5; // ズームレベル
String mapType = GoogleMapper.MAPTYPE_HYBRID; // 表示の種類
int mapWidth = width; // 横サイズ
int mapHeight = height; // 縦サイズ

// インスタンスの作成
gMapper = new GoogleMapper(mapCenterLat, mapCenterLon, zoomLevel, mapType, mapWidth, mapHeight);

//マップ画像の取得
mapImage = gMapper.getMap();

//xml = loadXML("http://geoapi.heartrails.com/api/xml?method=searchByPostal&postal=0030808");
//XML[] children = xml.getChildren();
//println(xml.listAttributes());
//for(int i=0; i // println(i);
// println(children[i].listAttributes());
//}

}

void draw() {
image(mapImage, 0, 0); // 画像の描画
//center(=Tokyo) add point
float tokyoX = 320;
float tokyoY = 320;

noFill();
ellipse(tokyoX,tokyoY,10,10);

//Sapppro add point
//String[] str = loadStrings("http://geoapi.heartrails.com/api/xml?method=searchByPostal&postal=0030808");
double sapporoLat = 43.062859;
double sapporoLon = 141.379781;
float sapporoX = (float)gMapper.lon2x(sapporoLon);
float sapporoY = (float)gMapper.lat2y(sapporoLat);
ellipse(sapporoX ,sapporoY ,10,10);

//line
smooth();
stroke(0);
line(tokyoX, tokyoY, sapporoX, sapporoY);

}


こんな感じになります。
WS000450.jpg

ニュースとかでよくある、GoogleMapをズームしていく演出とか、Processingでできそうですね。
おもしろいな。これ。
スポンサーサイト
データビジュアライゼーション・ツール20選のメモ
Processingもちょっとだけ紹介されています。
いろんなツールがあるんですねぇ。。。

データビジュアライゼーション・ツール20選 | lab.sugimototatsuo.com


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。