glow.ready(function(){ if( !window.isNaN(glow.env.opera) ) { glow.dom.get("#map_view_container").addClass("map-not-supported"); glow.dom.get("#map_no_js").addClass("show"); return; } for (i in olympics.mapping) { this[i] = olympics.mapping[i]; } var sportLinksPanelList = [ { label: olympics.lang["CHOOSE_SPORT_ARCHERY"], id: "venues_26", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_ATHLETICS"], id: "venues_1", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_BADMINTON"], id: "venues_11", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_BASEBALL"], id: "venues_27", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_BASKETBALL"], id: "venues_5", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_BEACH_VOLLEYBALL"],id: "venues_28", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_BOXING"], id: "venues_16", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_CANOEING"], id: "venues_7", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_CYCLING"], id: "venues_20", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_CYCLING_ROAD"], id: "venues_31", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_DIVING"], id: "venues_2", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_EQUESTRIAN"], id: "venues_33", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_FENCING"], id: "venues_24", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_FOOTBBALL_NEST"], id: "venues_1", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_FOOTBALL_WORKERS"],id: "venues_15", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_GYMNASTICS"], id: "venues_3", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_HANDBALL"], id: "venues_3", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_HOCKEY"], id: "venues_25", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_JUDO"], id: "venues_10", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_PENT_EQUESTRIAN"], id: "venues_13", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_PENT_SWIMMING"], id: "venues_19", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_PENT_FENCING"], id: "venues_2", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_ROWING"], id: "venues_7", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_SAILING"], id: "venues_32", zoom: 13 }, { label: olympics.lang["CHOOSE_SPORT_SHOOTING"], id: "venues_4", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_SOFTBALL"], id: "venues_18", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_SWIMMING"], id: "venues_2", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_TABLE_TENNIS"], id: "venues_9", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_TAEKWONDO"], id: "venues_10", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_TENNIS"], id: "venues_12", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_TRIATHLON"], id: "venues_30", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_VOLLEYBALL"], id: "venues_17", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_WEIGHTLIFTING"], id: "venues_23", zoom: 15 }, { label: olympics.lang["CHOOSE_SPORT_WRESTLING"], id: "venues_8", zoom: 15 } ]; var landmarkLinksPanelList = [ { label: olympics.lang["CHOOSE_LAND_OBSERVATORY"], id: "venues_47", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_VILLAGE"], id: "venues_41", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_AIRPORT"], id: "venues_38", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_RAILWAY"], id: "venues_48", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_TOWERS"], id: "venues_43", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_BOCOG"], id: "venues_39", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_CCTV"], id: "venues_52", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_MAO"], id: "venues_46", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_FORBIDDEN"], id: "venues_44", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_PAGODA"], id: "venues_40", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_BRIDGE"], id: "venues_51", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_PALACE"], id: "venues_42", zoom: 15 }, { label: olympics.lang["CHOOSE_LAND_SQUARE"], id: "venues_45", zoom: 15 } ]; var venueParser; var venuesLayer; var blogParser; var blogsLayer; var twitterParser; var twittersLayer; var panelsToClose = []; var startupMarkerId = olympics.util.getQueryStringValueForKey("marker", window.location.search); var optionalZoomLevel = olympics.util.getQueryStringValueForKey("zoom", window.location.search); if(olympics.util.LOGGING) console.log("Zoom level is ", optionalZoomLevel); var processMarkers = function(data){ if(olympics.util.LOGGING) console.log("Processing markers: ..."); venueParser = new olympics.feeds.VenueParser(); var markers = venueParser.process(data); venuesLayer = mapView.createLayer(); venuesLayer.addMarkers(markers); var sportControl = glow.dom.get("#sportControl"); var sportLinksArray = glow.lang.map( sportLinksPanelList, function(item) { return "
  • " + item.label + "
    • "; }); var sportLinks = glow.dom.create(sportLinksArray.join("\n")); var jumpToSportPanel = new olympics.ui.LinkPanel( sportLinks, sportControl, { action: function(item){ var el = glow.dom.get(item); if (item.tagName == "LI") { this.hide(); var relData = el.attr("rel").split("-"); var id = relData[0] || 1; var zoom = relData[1] || 15; mapView.openMarkerById(id, {zoom: zoom}); } }, linksPerColumn: 12, name: "sports", width: 500 }); glow.events.addListener(sportControl, "click", function(evt){ jumpToLandmarksPanel.hide(); jumpToSportPanel.show(); }); panelsToClose.push( jumpToSportPanel ); var landmarkLinksArray = glow.lang.map( landmarkLinksPanelList, function(item) { return "
  • " + item.label + "
    • "; }); var landmarkLinks = glow.dom.create( landmarkLinksArray.join("\n" )); var landmarkControl = glow.dom.get("#landmarkControl"); jumpToLandmarksPanel = new olympics.ui.LinkPanel(landmarkLinks, landmarkControl, { action: function(item){ var el = glow.dom.get(item); if (item.tagName == "LI") { this.hide(); var relData = el.attr("rel").split("-"); var id = relData[0] || 1; var zoom = relData[1] || 15; mapView.openMarkerById(id, {zoom: zoom}); } }, linksPerColumn: 7, name: "landmarks", width: 400 }); glow.events.addListener(landmarkControl, "click", function(evt){ jumpToSportPanel.hide(); jumpToLandmarksPanel.show(); }); panelsToClose.push( jumpToLandmarksPanel ); var twitterControl = glow.dom.get("#twitterControl"); glow.events.addListener("#twitterControl", "click", function(evt) { if(!twittersLayer) return false; var source = glow.dom.get(evt.source); if (source.is("input")) { var input = source[0]; if (input.checked) { twittersLayer.show(); } else { twittersLayer.hide(); } } }) glow.events.addListener("#blogControl", "click", function(evt) { if(!blogsLayer) return false; var source = glow.dom.get(evt.source); if (source.is("input")) { var input = source[0]; if (input.checked) { blogsLayer.show(); } else { blogsLayer.hide(); } } }) if(startupMarkerId) { var zoom = Number(optionalZoomLevel); if( !window.isNaN(zoom) ) { mapView.openMarkerById(startupMarkerId, {zoom:zoom}); } else { mapView.openMarkerById(startupMarkerId); } } if (glow.env.ie == 5.5 || glow.env.ie == 6) { var imagesToFix = glow.dom.get(".VEAPI_Pushpin img"); olympics.util.applyPNGFix(imagesToFix); } } var processTwitters = function(data) { if(olympics.util.LOGGING) console.log("Processing twitters: ..."); twitterParser = new olympics.feeds.TwitterParser(); var markers = twitterParser.process(data); toolbar.updateButtonPlaceholderById("twitterControl", "loading", markers.length); twittersLayer = mapView.createLayer(); twittersLayer.addMarkers(markers); } var processBlogs = function(data) { if(olympics.util.LOGGING) console.log("Processing blogs: ..."); blogParser = new olympics.feeds.BlogParser(); var markers = blogParser.process(data); toolbar.updateButtonPlaceholderById("blogControl", olympics.lang["TOOLBAR_LOADING_MESSAGE"], markers.length); blogsLayer = mapView.createLayer(); blogsLayer.addMarkers(markers); } var loadFeed = function(url, action){ if(olympics.util.LOGGING) console.log("load feed: %o", url); var feed = olympics.feeds.Loader.getInstance().load(url, {charset:"utf-8"}); if(olympics.util.LOGGING) console.log("feed loader.load returns: %o", feed, feed.getId()); var feedId = feed.getId(); glow.events.addListener( olympics.feeds.Loader, olympics.feeds.Loader.Events.FEED_LOADED, function(evt){ if(evt.feed){ if(evt.feed.getId() == feedId) { action(feed); } } }); }; loadFeed( "/sol/shared/bsp/hi/olympics2008/map/data/venues.json?callback={callback}", function(feed) { processMarkers(feed.getData()); }); loadFeed( "http://news.bbc.co.uk/sol/shared/bsp/hi/olympics2008/map/data/latest.json?callback={callback}", function(feed) { processTwitters(feed.getData()); }); loadFeed( "http://www.bbc.co.uk/blogs/olympics/geo.json" ); window.olympicsBlogGeo = function(feed) { processBlogs(feed); } if(olympics.util.LOGGING) console.log("init map...") var mapCentre = new LatLon(40.000071, 116.387186); var mapView = new olympics.mapping.MapView( "map_view", {width:786, height:590} ); var usingCookie = false; var usingCookie; if (startupMarkerId) { usingCookie = mapView.display(false); } else { usingCookie = mapView.display(true); } if(olympics.util.LOGGING) console.log("map loaded. using cookie: ", usingCookie); if(!usingCookie) mapView.setCenter( mapCentre ); var clickPanelTemplate = glow.dom.create('
    ')[0]; var clickPanel = new olympics.ui.Panel( clickPanelTemplate, { type : olympics.ui.Panel.Types.PANEL, context : mapView.domElement, closeButton : true, width : 382, height : 159 }); var closeClickPanel = function() { if (clickPanel) { clickPanel.hide(); } } var openClickPanel = function() { clickPanel.show(); } if(olympics.util.LOGGING) window.cp = clickPanel; var hoverPanelTemplate = glow.dom.create('
    ')[0]; var hoverPanel = new olympics.ui.Panel(hoverPanelTemplate, { closeButton: false, width: 300}); glow.events.addListener( mapView, olympics.mapping.MapView.Events.MARKER_OVER, function(evt){ if(olympics.util.LOGGING) console.log(clickPanel.getCurrentMarkerId(), evt.source.id); if(clickPanel._currentMarkerId == evt.source.id) return; var contentForHover = evt.source.getContentObject("hover"); if (contentForHover != null) { hoverPanel.setContent({ title : contentForHover.header, body : contentForHover.body, footer : contentForHover.footer }); hoverPanel.pointToAndShow(evt.source.getDOMElement()); } }); glow.events.addListener( mapView, olympics.mapping.MapView.Events.MARKER_OUT, function(evt){ hoverPanel.hide(); }); glow.events.addListener( mapView, olympics.mapping.MapView.Events.MARKER_CLICK, function(evt){ var markerPoint = evt.source.getLatLon(); var precision = 8; clickPanel.hide(); hoverPanel.hide(); var contentForClick = evt.source.getContentObject("click"); var markerType = evt.source.getContentObject("meta").type; if(olympics.util.LOGGING) console.log("MARKER_CLICK", evt); if( mapView.getCentre().equals(markerPoint, precision) ) { } else if (evt.zoom) { if(olympics.util.LOGGING) console.log("Move and zoom", markerPoint, evt.zoom); mapView.setCentreAndZoom(markerPoint, evt.zoom); } else { if(olympics.util.LOGGING) console.log("Move", markerPoint); mapView.setCenter(markerPoint); } if(olympics.util.LOGGING) console.info("Panning to: ", markerPoint); var bodyHTML = glow.dom.create(contentForClick.body); var hasImg = bodyHTML.get(".images .image-main"); if(hasImg && hasImg.attr("rel")) { var flickrURL = hasImg.attr("rel") + "&jsoncallback={callback}"; loadFeed(flickrURL, function(feed) { var items = olympics.util.randomiseArray(feed.getData().items); var pic = items[0].media.m; var imgWithLink = glow.dom.create(''); hasImg.remove(); imgWithLink.prependTo(bodyHTML.get(".images")); if(markerType == "landmark") { var html = [""); var gallery = html.join("\n"); bodyHTML.get(".images").append(gallery); } contentForClick.body = bodyHTML.html(); clickPanel.setContent({ title: contentForClick.header, body: contentForClick.body, footer: contentForClick.footer }); }); } if (contentForClick != null) { clickPanel.setContent({ title: contentForClick.header, body: contentForClick.body, footer: contentForClick.footer }); if(olympics.util.LOGGING) console.log("Point to: dom el: ", evt.source.getDOMElement()); if(olympics.util.LOGGING) console.warn("Point to marker and await endpan/endzoom event"); clickPanel.pointTo(evt.source.getDOMElement()); clickPanel.setCurrentMarkerId(evt.source.id); if(olympics.util.LOGGING) window.cp = clickPanel; var images = clickPanel.nativePanel.body.get(".icon-group img"); olympics.util.applyPNGFix( images ); if (mapView.getCentre().equals(markerPoint, precision)) { clickPanel.pointToAndShow(evt.source.getDOMElement()); } } }); var mapStateChanged = function() { if(!clickPanel.isVisible()) { clickPanel.show(); } else { clickPanel.reposition(); } } window.setInterval(function(){ mapStateChanged(); }, 1500); mapView.getNative().AttachEvent("onendpan", function(evt) { if(olympics.util.LOGGING) console.log("End pan"); }); mapView.getNative().AttachEvent("onendzoom", function(evt) { if(olympics.util.LOGGING) console.warn("End zoom"); }); mapView.getNative().AttachEvent("onchangeview", function(evt) { if(olympics.util.LOGGING) console.warn("Change view"); mapStateChanged(); }); if (olympics.util.LOGGING) { mapView.getNative().AttachEvent("onclick", function(evt){ var xy = { x: evt.mapX, y: evt.mapY }; var px = new VEPixel(xy.x, xy.y); var ll = mapView.getNative().PixelToLatLong(px); if (olympics.util.LOGGING) console.log("lat long", ll); }); } var closePanels = function() { var len = panelsToClose.length; for(var i = 0; i < len; i++) { panelsToClose[i].hide(); } }; panelsToClose.push(clickPanel); mapView.getNative().AttachEvent("onstartpan", function(evt) { closePanels(); }); mapView.getNative().AttachEvent("onstartzoom", function(evt) { closePanels(); }); mapView.getNative().AttachEvent("onendzoom", function(evt){ var imagesToFix = glow.dom.get(".VEAPI_Pushpin img"); olympics.util.applyPNGFix(imagesToFix); }); mapView.getNative().AttachEvent("onendpan", function(evt){ var imagesToFix = glow.dom.get(".VEAPI_Pushpin img"); olympics.util.applyPNGFix(imagesToFix); }); mapView.getNative().AttachEvent("onchangeview", function(evt){ var imagesToFix = glow.dom.get(".VEAPI_Pushpin img"); olympics.util.applyPNGFix(imagesToFix); }); if(!usingCookie) mapView.getNative().SetZoomLevel(14); mapView.getNative().SetMapStyle(VEMapStyle.Aerial); var toolbar = new olympics.ui.ToolbarPanel(mapView); toolbar.addButton({ type: "panel", id: "sportControl", label: olympics.lang["TOOLBAR_SPORT_BUTTON_LABEL"], action: function(){}, context: this, icon:"http://newsimg.bbc.co.uk/sol/shared/bsp/hi/olympics2008/map/img/nav/sport_nav_icon.png" }); toolbar.addButton({ type: "panel", id: "landmarkControl", label: olympics.lang["TOOLBAR_LANDMARK_BUTTON_LABEL"], action: function(){}, context: this, icon:"http://newsimg.bbc.co.uk/sol/shared/bsp/hi/olympics2008/map/img/nav/landmark_nav_icon.png" }); toolbar.addButton({ type: "toggle", id: "blogControl", label: olympics.lang["TOOLBAR_BLOG_BUTTON_LABEL"] + "(" + olympics.lang["TOOLBAR_LOADING_MESSAGE"] + ")", action: function(){}, context: this, isSelected: true, icon:"http://newsimg.bbc.co.uk/sol/shared/bsp/hi/olympics2008/map/img/nav/blog_nav_icon.png" }); toolbar.addButton({ type: "toggle", id: "twitterControl", label: olympics.lang["TOOLBAR_TWITTER_BUTTON_LABEL"] + "(" + olympics.lang["TOOLBAR_LOADING_MESSAGE"] + ")", action: function(){}, context: this, isSelected: true, icon:"http://newsimg.bbc.co.uk/sol/shared/bsp/hi/olympics2008/map/img/nav/twitter_nav_icon.png" }); var toolbarIcons = glow.dom.get(".toolbarElement img"); olympics.util.applyPNGFix(toolbarIcons); var navigationContainer = glow.dom.create("
    "); var areaShortcuts = new olympics.ui.LocationShortcuts( mapView, navigationContainer ); areaShortcuts.addShortcut({ label: olympics.lang["AREA_SHORTCUT_BEIJING"], latLon: mapCentre, zoom: 14 }); areaShortcuts.addShortcut({ label: olympics.lang["AREA_SHORTCUT_QINGDAO"], latLon: new LatLon(36.056944, 120.3861), zoom: 13 }); areaShortcuts.addShortcut({ label: olympics.lang["AREA_SHORTCUT_HONGKONG"], latLon: new LatLon(22.399444, 114.206666), zoom: 16 }); areaShortcuts.addShortcut({ label: olympics.lang["AREA_SHORTCUT_RESET_MAP"], latLon: mapCentre, zoom: 14 }); var mapLocatorElement = glow.dom.create("
    \""
    "); navigationContainer.append(mapLocatorElement); glow.dom.get("#map_view").prepend(navigationContainer); try { var tileLayerBounds = [new olympics.mapping.LatLon(40.02114036, 116.36834621), new olympics.mapping.LatLon(39.98080324, 116.39971733) ]; var pics = new olympics.mapping.MapTileLayer(mapView, "http://newsimg.bbc.co.uk/sol/shared/bsp/hi/olympics2008/map/img/tiles_v2/%4.png", "Venues", { bounds:tileLayerBounds }); pics.show(); } catch(e) { if(olympics.util.LOGGING) console.error("Problem creating map tile ", e); } if(olympics.util.LOGGING) window.mv = mapView; })