Modest Mapsをためしてみる。

Modest Mapsという（新）BSDライセンスの地図APIのデモ

これはBSDライセンスです。

Modest Mapsという（新）BSDライセンスの地図APIのデモ
http://modestmaps.com/

ソースに同梱されているSampleほぼそのまま。
wonderfl用にパッケージを解いてちょっといじったくらい。
右上のメニューから地図画像を選択できる。
一部（AC Transit,Daily Planet）がうまく動かないけど、
たぶん、地図が用意されていないから。

▼Wonderfl
http://wonderfl.net/code/4bc00c11098ba2924331e5d9f5085ff500d6e55f

▼ActionScript AS3(FP9)
[sourcecode language=”as3″]
/*
* これはBSDライセンスです。
*
* Modest Mapsという（新）BSDライセンスの地図APIのデモ
* http://modestmaps.com/
*
* ソースに同梱されているSampleほぼそのまま。
* wonderfl用にパッケージを解いてちょっといじったくらい。
* 右上のメニューから地図画像を選択できる。
* 一部（AC Transit,Daily Planet）がうまく動かないけど、
* たぶん、地図が用意されていないから。
* */
package {
//import com.adobe.viewsource.ViewSource;
import com.modestmaps.Map;
import com.modestmaps.TweenMap;
import com.modestmaps.core.MapExtent;
import com.modestmaps.events.MapEvent;
import com.modestmaps.events.MarkerEvent;
import com.modestmaps.extras.MapControls;
import com.modestmaps.extras.MapCopyright;
import com.modestmaps.extras.ZoomBox;
import com.modestmaps.extras.ZoomSlider;
import com.modestmaps.geo.Location;
import com.modestmaps.mapproviders.*;
import com.modestmaps.mapproviders.microsoft.*;
import com.modestmaps.mapproviders.yahoo.*;

import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFormat;

/**
* Pure Actionscript 3 Flex Builder project,
* based on ModestMapsSample.fla by David Knape.
*
* This demonstration app shows the basics of:
* – creating a map
* – setting/changing map providers
* – adding markers
* – listening for map and marker events
*
* @author David Knape
*/
[SWF(backgroundColor="#000000", frameRate="30")]
public class Main extends Sprite
{
// Our modest map
private var map:Map;

// a tooltip/flag that appears on marker rollover
private var tooltip:Tooltip;

// status text field at bottom of screen
private var status:TextField;

// our map provier button holder
private var mapButtons:Sprite;

// padding around map in pixels
private const PADDING:int = 20;

/**
* This constructor is called automatically when the SWF starts
*/
public function Main()
{
// be the web, as best we can
//ViewSource.addMenuItem(this, ‘srcview/index.html’, true);

// setup stage
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

// create child components
createChildren();

// place the markers
placeMarkers();

// adjust sizes for things if the window changes
stage.addEventListener(Event.RESIZE, onResize);

// init size by forcing call to stage resize handler
onResize();
}

/**
* Creates child componets
* – map
* – status text field
* – buttons
*/
private function createChildren():void
{
// create map
map = new TweenMap(stage.stageWidth – 2 * PADDING, stage.stageHeight – 2 * PADDING,
true,
new MicrosoftRoadMapProvider(),
new MapExtent(35.70503,35.68551,-220.31546,-220.28285));
//new MapExtent(37.829853, 37.700121, -122.212601, -122.514725));
map.addEventListener(MouseEvent.DOUBLE_CLICK, map.onDoubleClick);
map.x = map.y = PADDING;

//map.addChild(map.grid.debugField);

// listen for map events
map.addEventListener(MapEvent.ZOOMED_BY, onZoomed);
map.addEventListener(MapEvent.STOP_ZOOMING, onStopZoom);
map.addEventListener(MapEvent.PANNED, onPanned);
map.addEventListener(MapEvent.STOP_PANNING, onStopPan);
map.addEventListener(MapEvent.RESIZED, onResized);

// listen for marker events
map.addEventListener(MarkerEvent.MARKER_CLICK, onMarkerClick);
map.addEventListener(MarkerEvent.MARKER_ROLL_OVER, onMarkerRollOver);
map.addEventListener(MarkerEvent.MARKER_ROLL_OUT, onMarkerRollOut);

// add some controls using the MapControls extra
// we’re adding them as children of map so they move with the map
map.addChild(new MapControls(map));
map.addChild(new ZoomSlider(map));

map.addChild(new ZoomBox(map));

// add a default copyright handler to the map
//map.addChild(new MapCopyright(map));

// create tooltip
tooltip = new Tooltip();

// create text field to hold status text
status = new TextField();
status.defaultTextFormat = new TextFormat(‘Verdana’, 10, 0xeeeeee);
status.selectable = false;
status.text = ‘Welcome to Modest Maps…’;
status.width = 600;
status.height = 20;

// create some provider buttons
mapButtons = new Sprite();
mapButtons.addChild(new MapProviderButton(‘MS Road’, map.getMapProvider(), true));
mapButtons.addChild(new MapProviderButton(‘MS Aerial’, new MicrosoftAerialMapProvider()));
mapButtons.addChild(new MapProviderButton(‘MS Hybrid’, new MicrosoftHybridMapProvider()));
mapButtons.addChild(new MapProviderButton(‘Yahoo Road’, new YahooRoadMapProvider()));
mapButtons.addChild(new MapProviderButton(‘Yahoo Aerial’, new YahooAerialMapProvider()));
mapButtons.addChild(new MapProviderButton(‘Yahoo Hybrid’, new YahooHybridMapProvider()));
mapButtons.addChild(new MapProviderButton(‘Open Street Map’, new OpenStreetMapProvider()));
mapButtons.addChild(new MapProviderButton(‘AC Transit’, new ACTransitMapProvider()));
mapButtons.addChild(new MapProviderButton(‘Daily Planet’, new DailyPlanetProvider()));

// arrange buttons 22px apart
for( var n:int = 0; n < mapButtons.numChildren; n++) {
mapButtons.getChildAt(n).y = n * 22;
}

// listen for map provider button clicks
mapButtons.addEventListener(MouseEvent.CLICK, onProviderButtonClick);

map.addChild(map.grid.debugField);

// add children to the display list
addChild(map);
addChild(status);
addChild(mapButtons);
addChild(tooltip);
}

/**
* Places sample markers on our map
*/
private function placeMarkers():void
{
// Some sample data
// In most cases, we would have loaded this from XML, or a web service.
var markerpoints:Array = [
{ title:’mztm.jp’, loc:"35.70295, -220.29511"},
{ title:’Rochdale’, loc:"37.865571, -122.259679"},
{ title:’Parker Ave.’, loc:"37.780492, -122.453731"},
{ title:’Pepper Dr.’, loc:"37.623443, -122.426577"},
{ title:’3rd St.’, loc:"37.779297, -122.392877"},
{ title:’Divisadero St.’, loc:"37.771919, -122.437413"},
{ title:’Market St.’, loc:"37.812734, -122.280064"},
{ title:’17th St. is a long street with a short name, but we want to test the tooltip with a long title.’, loc:"37.804274, -122.262940"}
];

var o:Object;

// Now, we just loop through our data set, and place the markers
for each (o in markerpoints) {

// step 1 – create a marker
var marker:SampleMarker = new SampleMarker();

// step 2 – give it any custom app-specific data it might need
marker.title = o.title;

// step 3 – create a location object
//
// if you have lat and long…
// var loc:Location = new Location (lat, long);
//
// but, we have a comma-separated lat/long pair, so…
var loc:Location = Location.fromString( o.loc );

// step 4 – put the marker on the map
map.putMarker( loc, marker);
}
}

/**
* Stage Resize handler
*/
private function onResize(event:Event = null):void
{
var w:Number = stage.stageWidth – 2 * PADDING;
var h:Number = stage.stageHeight – 2 * PADDING;

// position and size the map
map.x = map.y = PADDING;
map.setSize(w, h);

// align the buttons to the right
mapButtons.x = map.x + w – 120;
mapButtons.y = map.y + 10;

// place status just below the map on the left
status.width = w;
status.x = map.x + 2;
status.y = map.y + h;
}

/**
* Change map provider when provider buttons are clicked
*/
private function onProviderButtonClick(event:Event):void
{
var button:MapProviderButton = event.target as MapProviderButton;
map.setMapProvider(button.mapProvider);
button.selected = true;

for (var i:int = 0; i < mapButtons.numChildren; i++) {
var other:MapProviderButton = mapButtons.getChildAt(i) as MapProviderButton;
if (other != button) {
other.selected = false;
}
}
}

/**
* Marker Click
*/
private function onMarkerClick(event:MarkerEvent):void
{
var marker:SampleMarker = event.marker as SampleMarker;
status.text = "Marker Clicked: " + marker.title + " " + event.location;
}

/**
* Marker Roll Over
*/
private function onMarkerRollOver(event:MarkerEvent):void
{
//trace(‘Roll Over ‘ + event.marker + event.location);
var marker:SampleMarker = event.marker as SampleMarker;

// show tooltip
var pt:Point = map.locationPoint( event.location, this );
tooltip.x = pt.x;
tooltip.y = pt.y;
tooltip.label = marker.title;
tooltip.visible = true;
}

/**
* Marker Roll Out
*/
private function onMarkerRollOut(event:MarkerEvent):void
{
// hide the tooltip
tooltip.visible = false;
}

//———————
// Map Event Handlers
//———————
private function onPanned(event:MapEvent):void
{
status.text = ‘Panned by ‘ + event.panDelta.toString() + ‘, top left: ‘ + map.getExtent().northWest.toString() + ‘, bottom right: ‘ + map.getExtent().southEast.toString();
}

private function onStopPan(event:MapEvent):void
{
status.text = ‘Stopped panning, top left: ‘ + map.getExtent().northWest.toString() + ‘, center: ‘ + map.getCenterZoom()[0].toString() + ‘, bottom right: ‘ + map.getExtent().southEast.toString() + ‘, zoom: ‘ + map.getCenterZoom()[1];
}

private function onZoomed(event:MapEvent):void
{
status.text = ‘Zoomed by ‘ + event.zoomDelta.toFixed(3) + ‘, top left: ‘ + map.getExtent().northWest.toString() + ‘, bottom right: ‘ + map.getExtent().southEast.toString();
}

private function onStopZoom(event:MapEvent):void
{
status.text = ‘Stopped zooming, top left: ‘ + map.getExtent().northWest.toString() + ‘, center: ‘ + map.getCenterZoom()[0].toString() + ‘, bottom right: ‘ + map.getExtent().southEast.toString() + ‘, zoom: ‘ + map.getCenterZoom()[1];
}

private function onResized(event:MapEvent):void
{
status.text = ‘Resized to: ‘ + event.newSize[0] + ‘ x ‘ + event.newSize[1];
}
}
}

//MapProviderButton.as
import com.modestmaps.mapproviders.IMapProvider;

import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.DropShadowFilter;
import flash.geom.ColorTransform;
import flash.text.TextField;
import flash.text.TextFormat;
/**
* Button for use in ModestMaps Sample
*
* @author David Knape
*/

class MapProviderButton extends Sprite {

private var label:TextField;
public var mapProvider:IMapProvider;

private var overTransform:ColorTransform = new ColorTransform(1,1,1);
private var outTransform:ColorTransform = new ColorTransform(1,.9,.6);

private var normalFormat:TextFormat = new TextFormat( ‘Verdana’, 10, 0x000000, false);
private var selectedFormat:TextFormat = new TextFormat( ‘Verdana’, 10, 0x000000, true);

private var _selected:Boolean = false;

public function MapProviderButton( label_text:String, map_provider:IMapProvider, selected:Boolean=false ) {

useHandCursor = true;
mouseChildren = false;
buttonMode = true;

addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);

mapProvider = map_provider;

filters = [ new DropShadowFilter(1,45,0,1,3,3,.7,2) ];
transform.colorTransform = outTransform;

// create label
label = new TextField();
label.selectable = false;
label.defaultTextFormat = normalFormat;
label.text = label_text;
label.width = label.textWidth + 8;
label.height = 18;
label.x = label.y=1;
addChild( label );

this.selected = selected;

// create background
graphics.clear();
graphics.beginFill(0xdddddd);
graphics.drawRoundRect(0, 0, 110, 18, 9, 9);
graphics.beginFill(0xffffff);
graphics.drawRoundRect(0, 0, 108, 16, 9, 9);
graphics.beginFill(0xbbbbbb);
graphics.drawRoundRect(2, 2, 108, 16, 9, 9);
graphics.beginFill(0xdddddd);
graphics.drawRoundRect(1, 1, 108, 16, 9, 9);

}

public function onMouseOver(event:MouseEvent=null):void
{
transform.colorTransform = overTransform;
}

public function onMouseOut(event:MouseEvent=null):void
{
transform.colorTransform = outTransform;
}

public function set selected(s:Boolean):void
{
_selected = s;
label.setTextFormat(s ? selectedFormat : normalFormat);
}

public function get selected():Boolean
{
return _selected;
}
}

//SampleMarker.as
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.BevelFilter;

/**
* Sample Marker
* @author David Knape
*/

class SampleMarker extends Sprite {

private var _title : String;

public function SampleMarker() {

buttonMode = true;
mouseChildren = false;
tabEnabled = false;
//cacheAsBitmap = true;
mouseEnabled = true;

// David’s Flash example draws the marker
// in the Flash environment
// but need to draw something:

// first a zero-alpha circle so the filter’s bitmap cache doesn’t mess things up
graphics.beginFill(0xff0000,0);
graphics.drawCircle(0, 0, 11);
graphics.endFill();

// now a red circle
graphics.beginFill(0x4465d7);
graphics.drawCircle(0, 0, 10);
graphics.endFill();

filters = [ new BevelFilter(1,45,0xffffff,0.35,0×000000,0.35,2,2,1,1) ];

addEventListener( MouseEvent.MOUSE_OVER, mouseOver );
}

public function get title () : String {
return _title;
}

public function set title (s:String) : void {
_title = s;
}

protected function mouseOver(e:MouseEvent) : void {
parent.swapChildrenAt(parent.getChildIndex(this), parent.numChildren – 1);
}

override public function toString() : String {
return ‘[SampleMarker] ‘ + title;
}
}

//Tooltip.as
import flash.display.Shape;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;

/**
* @author David Knape
*/

class Tooltip extends Sprite {

public var background:Shape;
public var label_txt:TextField;

public function Tooltip() {

background = new Shape();
background.graphics.beginFill(0xffffff);
background.graphics.drawRect(0,0,100,20);
background.graphics.endFill();
addChild(background);

label_txt = new TextField();
label_txt.selectable = false;
label_txt.defaultTextFormat = new TextFormat( ‘Verdana’, 10, 0x000000 );
addChild(label_txt);

visible = false;
mouseEnabled = false;
}

public function set label ( s: String ) : void {
label_txt.autoSize = TextFieldAutoSize.LEFT;
label_txt.width = 200;
label_txt.multiline = label_txt.wordWrap = true;
label_txt.text = s;
background.width = Math.max( 100, label_txt.textWidth + 10);
background.height = label_txt.textHeight + 18;
background.y = Math.round( -background.height – 16 );
background.x = 1;
label_txt.y = background.y + 2;

graphics.clear();
graphics.lineStyle(0,0×000000);
graphics.beginFill(0xffffff);
graphics.moveTo(0,0);
graphics.lineTo(background.x-1,background.y+background.height+1);
graphics.lineTo(background.x-1,background.y-1);
graphics.lineTo(background.x+background.width+1,background.y-1);
graphics.lineTo(background.x+background.width+1,background.y+background.height+1);
graphics.lineTo(background.x+10,background.y+background.height+1);
graphics.lineTo(0,0);

}
}

[/sourcecode]