Overview

Web application developed for Microsoft Popfly Competition in 2008. Demonstrates georeferenced image overlay technique on Bing Maps (Virtual Earth), allowing custom images to be displayed on map with proper geographic positioning and zoom-aware scaling.

Architecture

Georeferencing System

  • Image anchor point (upper-left corner) defined in lat/long coordinates
  • Original image dimensions (3000×1800 pixels) specified
  • Reference zoom level (7) for 1:1 pixel mapping
  • Mathematical transformation from geographic to pixel space

Zoom-Aware Scaling

  • Each zoom level doubles tile dimensions
  • Scaling factor: 2^(currentZoom - referenceZoom)
  • Example: Zoom 10 = 2^(10-7) = 8x original size
  • Maintains image alignment as user zooms

Dynamic Positioning

  • VEMap.LatLongToPixel() converts coordinates to screen pixels
  • Absolute CSS positioning places image on map
  • Repositioning on pan/zoom events
  • Z-index layering for overlay effect

Performance Optimization

  • Hide image during zoom animation
  • Prevents visual artifacts from intermediate frames
  • Reduces DOM manipulation frequency
  • Improves perceived smoothness

Technical Implementation

Coordinate Transformation: Virtual Earth uses Web Mercator projection (EPSG:3857). Geographic coordinates (lat/long) converted to pixel coordinates at current zoom level. LatLongToPixel() returns x,y in pixels from map origin (upper-left). Image positioned using CSS left/top properties matching these pixel values.

Exponential Scaling: Zoom levels use binary doubling. Zoom 1 = 4 tiles (512×512 px total). Zoom 2 = 16 tiles (1024×1024 px). Zoom n = 4^n tiles (2^n × 256 pixels per side). Image must scale proportionally: scale = 2^(zoom_current - zoom_reference). At reference zoom, scale = 1.0 (original size).

Opacity Blending: CSS opacity: 0.7 and IE filter alpha(opacity=70) provide 70% transparency. Allows base map features visible through overlay. Alpha channel in PNG provides pixel-level transparency for non-rectangular overlays. Useful for irregular shapes (weather radar, property boundaries).

Event Handling: AttachEvent('onendzoom') fires when zoom completes. AttachEvent('onstartzoom') fires when zoom begins. RedrawImage() recalculates dimensions and position. HideImage() sets visibility hidden. Note: RedrawImage() currently leaves visibility hidden (bug or intentional?), preventing image display after zoom.

Technical Challenges

Image Alignment Precision: Georeferencing requires accurate anchor point coordinates. GPS coordinates of image upper-left corner must be precise. 0.001° error (~100 meters) causes visible misalignment at high zoom. Professional tools (ArcGIS, QGIS) used to georeference images before overlay.

Large Image Performance: 3000×1800 pixel PNG is 5-10 MB file size. Browser loads entire image even when viewing small portion. Modern solution: pre-tile image into 256×256 tiles matching map tile system. Load only visible tiles. Tools: GDAL2Tiles, MapTiler.

Cross-Domain Images: Browser security restricts canvas manipulation of cross-origin images. Image from labs.innovativesingapore.com domain. If processing needed (resize, filters), requires CORS headers or proxy. Current implementation just displays, no processing.

Zoom Flickering: Show/hide during zoom prevents smooth transition. Better approach: CSS transform: scale() for hardware-accelerated scaling during animation. Modern libraries (Leaflet.js, OpenLayers) use this technique.

Results

Successfully demonstrated image overlay capability for Popfly Competition. Judge feedback praised practical application for real-world mapping scenarios (traffic overlays, weather radar, property maps). Highlighted need for tile-based approach for larger images/areas.

Tech Stack

  • JavaScript: Virtual Earth API v6.1
  • HTML: XHTML 1.0 Transitional
  • CSS: Absolute positioning, opacity effects
  • Map Service: Microsoft Virtual Earth (Bing Maps)
  • Image Format: PNG with transparency

Historical Context

Developed during Microsoft Popfly era (2007-2009). Popfly was visual programming tool for building web mashups and games. Competition encouraged innovative uses of Microsoft web technologies (Virtual Earth, Silverlight, Live Services).

Virtual Earth JavaScript API v6.1 later evolved into Bing Maps Ajax Control. Many v6.1 APIs deprecated. Modern equivalent uses Bing Maps V8 Web Control or third-party libraries (Leaflet.js with Bing imagery layer).

Image overlay technique remains relevant. Modern applications:

  • Weather radar on maps
  • Satellite imagery comparison
  • Historical map overlays
  • Real estate property boundaries
  • Event venue floor plans

Modern Alternatives

Today’s implementations would use:

  • Leaflet.js ImageOverlay: Simpler API, better performance
  • Tiled overlays: Pre-generated tile pyramids for large images
  • GeoTIFF + COG: Cloud-Optimized GeoTIFF for streaming large rasters
  • Mapbox GL: Vector tiles with custom raster layers

Source Code

Code will be available on GitHub at: https://github.com/tanchunsiong/vetester

Note: Virtual Earth API v6.1 deprecated. Demo may not function with current Bing Maps. Included for historical reference.

Project Created: 2008

Connect: