A menu in somewhere in Kobe
A menu of a drinking restaurant somewhere in Kobe, Japan.

Yahoo maps and Vimeo videos embedded here

Recently I added those long waited features such as Yahoo Maps and Vimeo videos to my site. They require both some Actionscript and JavaScript.

Firstly here is the AS3 code for the Yahoo Maps implementation:

package
{
    import flash.display.*;
    import flash.events.*;
    import flash.filters.GlowFilter;
    import flash.text.*;
    import flash.system.Security;

    import com.yahoo.maps.api.*;
    import com.yahoo.maps.api.core.location.LatLon;
    import com.yahoo.maps.api.markers.Marker;
    import com.yahoo.maps.webservices.geocoder.events.*;
    import com.yahoo.maps.webservices.geocoder.GeocoderResultSet;
    import com.yahoo.maps.api.widgets.*;

    [SWF(backgroundColor = '0x006599', frameRate = '33', width = '700', height = '500')]

    /**
     * @see http://developer.yahoo.com/flash/maps/classreference/
     */
    public class YahooMapWhereWasThis extends Sprite
    {
        private const YAHOO_MAP_ID:String = "http://developer.yahoo.com/wsregapp/";

        private const MINIMAP_SIZE:Number = 200;

        private var view:Sprite;
        private var map:YahooMap;
        private var miniview:Sprite;
        private var minimap:YahooMap;
        private var wolf:Sprite;
        private var mark:Marker;

        /**
         * Center of the map. Defaults to the Olympic Stadium of Helsinki, Finland.
         */
        private var _center:LatLon = new LatLon(60.186929111472885, 24.927334785461426);
        private var _title:String = "Helsinki Olympic Stadium";

        public function YahooMapWhereWasThis()
        {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.quality = StageQuality.MEDIUM;

            Security.loadPolicyFile("http://www.yahoo.com/crossdomain.xml");

            loaderInfo.addEventListener(Event.INIT, onInit);
        }

        private function onInit(event:Event):void
        {
            stage.addEventListener(Event.RESIZE, onResize);

            if (stage.loaderInfo.parameters.lat != undefined && stage.loaderInfo.parameters.lat != "")
            {
                _center.lat = parseFloat(stage.loaderInfo.parameters.lat);
            }
            if (stage.loaderInfo.parameters.lng != undefined && stage.loaderInfo.parameters.lng != "")
            {
                _center.lon = parseFloat(stage.loaderInfo.parameters.lng);
            }
            if (stage.loaderInfo.parameters.title != undefined && stage.loaderInfo.parameters.title != "")
            {
                _title = String(stage.loaderInfo.parameters.title);
            }

            view = new Sprite();
            view.name = "view";
            addChild(view);

            miniview = new Sprite();
            miniview.name = "miniview";
            addChild(miniview);

            var gra:Graphics = miniview.graphics;
            gra.lineStyle(2, 0x000000);
            gra.beginFill(0x006599);
            gra.drawRoundRect(0, 0, MINIMAP_SIZE, MINIMAP_SIZE, 10, 10);
            gra.endFill();

            miniview.x = stage.stageWidth - (MINIMAP_SIZE + 2);
            miniview.y = stage.stageHeight - (MINIMAP_SIZE + 2);

            createMaps();
        }

        private function createMaps():void
        {
            map = new YahooMap();
            map.addEventListener(YahooMapEvent.MAP_INITIALIZE, onMapInitialize);
            map.addEventListener(YahooMapEvent.MAP_MOVE, onMapMove);
            map.init(YAHOO_MAP_ID, stage.stageWidth, stage.stageHeight);
            view.addChild(map);

            var mapType:MapTypeWidget = new MapTypeWidget(map);
            view.addChild(mapType);
        }

        private function onResize(event:Event):void
        {
            if (map != null)
            {
                map.setSize(stage.stageWidth, stage.stageHeight);
            }
            miniview.x = stage.stageWidth - (MINIMAP_SIZE + 2);
            miniview.y = stage.stageHeight - (MINIMAP_SIZE + 2);
            swapChildren(miniview, getChildAt(numChildren - 1));
        }

        private function onMapInitialize(event:YahooMapEvent):void
        {
            map.addPanControl();
            map.addZoomWidget();
            map.addScaleBar();

            map.zoomLevel = 4;
            map.centerLatLon = _center;

            _center.addEventListener(GeocoderEvent.GEOCODER_FAILURE, onGeocoderEvent);
            _center.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, onGeocoderEvent);
            _center.reverseGeocode();

            var spot:Shape = new Shape();
            spot.name = "spot";
            spot.graphics.lineStyle(1, 0x121212, 0.5);
            spot.graphics.beginFill(0xFF6600, 0.5);
            spot.graphics.drawCircle(0, 0, 16);
            spot.graphics.endFill();

            var format:TextFormat = new TextFormat("Verdana", 12, 0x121212, true);

            var field:TextField = new TextField();
            field.name = "field";
            field.defaultTextFormat = format;
            field.mouseEnabled = false;
            field.multiline = true;
            field.text = _title;
            field.autoSize = TextFieldAutoSize.LEFT;
            field.x = -field.width / 2;
            field.y = -field.height / 2;
            field.filters = [new GlowFilter(0x006599, 1, 10, 10)];

            mark = new Marker();
            mark.addChild(spot);
            mark.addChild(field);
            mark.latlon = map.centerLatLon;
            map.markerManager.addMarker(mark);

            minimap = new YahooMap();
            minimap.addEventListener(YahooMapEvent.MAP_INITIALIZE, onMinimapInitialize);
            minimap.init(YAHOO_MAP_ID, MINIMAP_SIZE - 4, MINIMAP_SIZE - 4);
            minimap.x = 2;
            minimap.y = 2;
            miniview.addChild(minimap);
        }

        private function onMinimapInitialize(event:YahooMapEvent):void
        {
            minimap.addCrosshair();
            minimap.zoomLevel = 10;
            minimap.centerLatLon = _center;
        }

        private function onGeocoderEvent(event:GeocoderEvent):void
        {
            var res:GeocoderResultSet = event.data as GeocoderResultSet;

            var field:TextField = mark.getChildByName("field") as TextField;
            field.appendText("\n" + _center.address.address);
            field.y = -field.height / 2;
        }

        private function onMapMove(event:YahooMapEvent):void
        {
            if (minimap != null)
            {
                minimap.centerLatLon = map.centerLatLon;
            }
        }
    }
}

The video player from Vimeo is requested by the following JavaScript code:

Juga.showVimeo = function (id, w, h) {
    Juga.openBlockUI('vimeocont', 'Loading the Vimeo player...', w, h);

    var swf = 'http://vimeo.com/moogaloop.swf?clip_id=' + id + '& ' + 'width=' + w + '&' + 'height=' + h;
    Juga.embedFlash('#vimeocont', swf, w, h);
};

Which then uses the common tools, which are using the jQuery JavaScript library.

Juga.embedFlash = function (id, swf, w, h, vars) {
    if (!vars)
    {
        vars = {};
    }
    $(id).flash({
        swf: swf,
        width: w,
        height: h,
        params: {
            'allowScriptAccess': 'sameDomain',
            'allowNetworking': 'all',
            'allowFullScreen': true
        },
        flashvars: vars
    });
};

Juga.openBlockUI = function(id, message, w, h) {
    $.blockUI({
        message: '<' + 'div id="' + id + '"><' + 'p>' + message + '<' + '/p><' +  '/div>',
        css: {
            top: ($(window).height() - h) / 2,
            left: ($(window).width() - w) / 2,
            width: w,
            height: h,
            color: '#fff',
            backgroundColor:'#000',
            cursor: 'pointer'
        }
    });
    setTimeout(function() {
        $('.blockOverlay').click(function() {
            $.unblockUI();
        });
    }, 200);
};

The Juga.showVimeo callback is triggered by the following DOM ready triggered code:

$('p.vimeo a').click(function() {
    /*if ($.hasFlashPlayerVersion('9.0.128'))
    {*/
        var id = $(this).attr('href').split('/').pop();
        var size = $(this).attr('rev').split('x');
        var w = size[0];
        var h = size.pop();
        Juga.showVimeo(id, w, h);
    /*}
    else
    {
        Juga.openWindow($(this).attr('href'));
    }*/
    return false;
});

The code in the else clause, for checking the minimum Flash player version, is currently commented out as the jQuery.SWFObject plugin has some minor bugs related to this feature, would be called to open the given hypertext reference in a new window:

Juga.openWindow = function (href) {
    var now = new Date();
    window.open(href, now.getMilliseconds().toString());
};

In similar manner as the Vimeo player is triggered by clicking on a certain element, so are the Yahoo Maps, should use Flash player version checking her too:

$('p.geo a').click(function() {
    var lat = $(this).children('.latitude').attr('title');
    var lng = $(this).children('.longitude').attr('title');
    var title = $(this).attr('title');
    Juga.showLocation(lat, lng, title);
    return false;
});

Here is the callback that it calls:

Juga.showLocation = function(lat, lng, title) {
    var margin = 200;
    var w = $(window).width() - margin;
    var h = $(window).height() - margin;
    Juga.openBlockUI('geocont', 'Loading Yahoo Maps...', w, h);

    var swf = Juga.base + 'swf/YahooMapWhere.swf';
    Juga.embedFlash('#geocont', swf, w, h, {lat: lat, lng: lng, title: title});
};

As there are some much material for learning jQuery from the zero, I do not explain anything in more detail. Good luck with the Internet. Everything is free, no responsibility.

These code snippets are in real use on the links below. A video of puppies and a map of the Nichibukan Naginata dojo in New York.