Home > Flash | WEB > マッシュアップ地図アルバムを作ってみる[Flickr+GoogleMaps+Flash]

マッシュアップ地図アルバムを作ってみる[Flickr+GoogleMaps+Flash]

2009-07-20 (月) 5:53
Flash | WEB
actionscript3 | as3flickrlib | flickr | googlemaps

ちょっと前にas3flickrlibを使ってFlickrの緯度経度情報の取り方を調べた。

緯度経度情報が取れたのなら、やることはひとつ、
GoogleMaps上に表示だ。
さっそくGoogleMaps Flash API のリファレンスを見ながらしこしこ作ってみた。

以前の記事の下北GPSログの情報を流用した。

マーカーをクリックで該当箇所の画像が見られる。
地図上のラインは、KMLから緯度経度ルート情報を作成した、
外部ファイルから取得している。
リストはこんな感じ。
突貫で作ったので、今度余裕があったらコレをオサレ化してみようと思う。

Google API Key、 Flickr API Keyは伏せたソース一覧↓
＊以下のファイル他、as3flickrlibにちょっと手をいれてます。

GPSPhoto.as(メイン)

>>text

ACTIONSCRIPT:

package {
import com.adobe.webapis.flickr.PhotoSet;
import com.google.maps.LatLng;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class GPSPhoto extends Sprite
{
private var csvURL:String = "shimokita.csv";
private var setid:String = "72157620666800332";
private var gpsLoader:URLLoader;
private var map:Gmap;
private var flcon:FlickerConnector;
private var flickrImageList:Array;
private var photoSet:PhotoSet;
public function GPSPhoto()
{
// パラメータでGPSリストとPhotoSetのID取得
if(loaderInfo.parameters.propertyIsEnumerable("csvURL")) this.csvURL = loaderInfo.parameters["csvURL"];
if(loaderInfo.parameters.propertyIsEnumerable("setid")) this.csvURL = loaderInfo.parameters["setid"];
stage.align = "TL";
stage.scaleMode = "noScale";
map = new Gmap(750,600,this.mapReadyHandler);
map.onMarkerClick = this.onMarkerClickHandler;
this.addChild(map);
}
private function mapReadyHandler(event:Event):void{
var url:String = csvURL;
var request:URLRequest = new URLRequest(url);
gpsLoader = new URLLoader(request);
gpsLoader.addEventListener(Event.COMPLETE, loadCompleteHandler);
gpsLoader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
flcon = new FlickerConnector;
flcon.onFail = this.onFlickrFailHandler;
flcon.onGetInfo = this.onGetInfoHandler;
flcon.onGetPhotos = this.onGetPhotosHandler;
flcon.getInfo(setid);
}
private function onMarkerClickHandler(id:String):void{
for(var i:Number = 0; this.flickrImageList.length; i++){
var image:FlickrImage = flickrImageList[i];
if(image.id == id){
this.map.showPhoto(image.width_m, image.height_m, new LatLng(parseFloat(image.latitude), parseFloat(image.longitude)), image.title, image.url_m);
break;
}
}
}
private function loadCompleteHandler(event:Event):void{
var lineGeoCSV:String = String(gpsLoader.data);
var geoList:Array = lineGeoCSV.split(" ");
var pointList:Array = new Array;
for(var i:Number=0; i
if(String(geoList[i])=="") continue;
var infos:Array = String(geoList[i]).split(",");
pointList.push(new LatLng(infos[1], infos[0]));
}
map.drawPolyline(pointList);
}
private function onGetInfoHandler(photoset:PhotoSet):void {
this.photoSet = photoSet;
this.flcon.getPhotos(this.setid);
}
// 画像一覧情報ロードの完了
private function onGetPhotosHandler(flickrImageList:Array):void {
this.flickrImageList = flickrImageList;
/*　次への布石
for (var i:Number = 0; i <flickrImageList.length; i++) {
var image:FlickrImage = flickrImageList[i];
this.addChild(image.image);
}*/
map.drawMarkers(flickrImageList);
}
private function onFlickrFailHandler():void {
// (^-^;;
}
private function ioErrorHandler(event:IOErrorEvent):void{
// (^-^;;
}
}
}

Gmap.as 地図管理用

>>text

ACTIONSCRIPT:

package
{
import com.google.maps.InfoWindowOptions;
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Polyline;
import com.google.maps.overlays.PolylineOptions;
import com.google.maps.styles.FillStyle;
import com.google.maps.styles.StrokeStyle;
import flash.display.Sprite;
import flash.geom.Point;
import flash.text.StyleSheet;
/**
* ...
* @author okm
*/
public class Gmap extends Sprite
{
private var map:Map;
private var markerList:Array;
public var onReady:Function;
public var onMarkerClick:Function;
public function Gmap(width:Number,height:Number, onReady:Function)
{
this.onReady = onReady;
markerList = new Array;
map = new Map;
map.addEventListener(MapEvent.MAP_READY, onReady);
map.key = "Google Maps APIキー";
map.addControl(new MapTypeControl());
map.addControl(new ZoomControl());
map.setSize(new Point(width, height));
this.addChild(map);
}
public function drawPolyline(pointList:Array):void{
var polyline:Polyline = new Polyline(
pointList,
new PolylineOptions({ strokeStyle: new StrokeStyle({
color: 0x6481F5,
thickness: 4,
alpha: 0.7})
}));
this.map.addOverlay(polyline);
this.map.setCenter(pointList[0],17);
}
public function drawMarkers(flickrImageList:Array):void{
for(var i:Number = 0; i <flickrImageList.length; i++){
var image:FlickrImage = flickrImageList[i];
var marker:Marker = new Marker(new LatLng(parseFloat(image.latitude), parseFloat(image.longitude)),
new MarkerOptions({
strokeStyle: new StrokeStyle({color: 0x666666}),
fillStyle: new FillStyle({color: 0x6481F5, alpha: 0.8}),
radius: 12,
hasShadow: true
}));
marker.addEventListener(MapMouseEvent.CLICK, onMarkerClickHandler, false, 1, true);
this.markerList.push({id:image.id, marker:marker});
this.map.addOverlay(marker);
}
}
private function onMarkerClickHandler(event:MapMouseEvent):void{
for(var i:Number = 0; i <markerList.length; i++){
if(markerList[i].marker == event.target){
if(this.onMarkerClick != null) this.onMarkerClick(markerList[i].id);
continue;
}
}
//map.panTo(event.target.getLatLng()); //マーカー座標へ移動
}
public function showPhoto(width:Number, height:Number, latlng:LatLng, title:String, imageUrl:String):void {
var style:StyleSheet = new StyleSheet();
var heading:Object = new Object();
heading.fontWeight = "bold";
heading.color = "#FF0000";
var body:Object = new Object();
body.fontStyle = "italic";
body.textAlign = "center";
style.setStyle(".heading", heading);
style.setStyle("body", body);
// インフォウィンドウ　オープン
map.openInfoWindow(latlng, new InfoWindowOptions( { width:width+20, height:height+35,hasCloseButton: true, contentHTML:"<span class="heading">"+title+"</span>
<img src=""+imageUrl+"" alt="" />", contentStyleSheet:style, hasTail:false}));
}
}
}