Marc Ridey - Blog

Custom maps styles using the "Styled Maps Wizard"

noreply@blogger.com (Marc (Google Employee)) — Fri, 04 May 2012 05:13:00 +0000

I've just been asked for help on how to create a map with the Terrain background and no roads, no labels.
It is very easy to do using the "Styled Maps Wizard" available here:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

- Click on Map in the top right
- Select terrain ON

At this point you should have a map with the terrain and labels.

- Click on "All" in the top left
- Click on "Visibility" -> Off

At this point you should have a map with the terrain and no labels but no water either.

- Click on Add in the top left
- Click on Water in the top left
- Click "Geometry"
- Click on "Visibility" -> On

Now you should have a map with terrain, water and no labels.

- Click on "Show JSON"
- It should display:

[
{
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "geometry",
stylers: [
{ visibility: "on" }
]
}
]

Use this value to style your map as follow:

var map = new google.maps.Map(
document.getElementById('map_canvas'),
{
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.TERRAIN,
styles: [
{
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "geometry",
stylers: [
{ visibility: "on" }
]
}
]
});

Hope this helps :)

Dynamic markers in Maps API Javascript v3

noreply@blogger.com (Marc (Google Employee)) — Tue, 04 Oct 2011 12:46:00 +0000

Another option for labels is to use dynamic markers.
These are provided by the Google Chart tools API.
You can set the shape, color and text of each marker.

The documentation for the markers can be found at
http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html.

Here's a simple example on how to display a marker and its shadow with custom text:

   
   var latLng = new google.maps.LatLng(40, -100);
   var marker = new google.maps.Marker({
      position: latLng,
      draggable: true,
      map: map,
      icon: new google.maps.MarkerImage(
        "http://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|Label%20123|FF8080|000000",
        null, null, new google.maps.Point(0, 42)),
      shadow: new google.maps.MarkerImage(
        "http://chart.googleapis.com/chart?chst=d_bubble_text_small_shadow&chld=bb|Label%20123",
        null, null, new google.maps.Point(0, 45))
    });

And the marker should look like this:

Label overlay example for Google Maps API v3 - Revisited

noreply@blogger.com (Marc (Google Employee)) — Sun, 22 May 2011 07:31:00 +0000

A while back I published a post showing how to add a label to a marker. I got a lot of comments on that post, in particular regarding adding support for visibility, zIndex and click event.

So here's a revised version.

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
// Initialization
this.setValues(opt_options);

// Label specific
var span = this.span_ = document.createElement('span');
span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
'white-space: nowrap; border: 1px solid blue; ' +
'padding: 2px; background-color: white';

var div = this.div_ = document.createElement('div');
div.appendChild(span);
div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;

// Implement onAdd
Label.prototype.onAdd = function() {
var pane = this.getPanes().overlayImage;
pane.appendChild(this.div_);

// Ensures the label is redrawn if the text or position is changed.
var me = this;
this.listeners_ = [
google.maps.event.addListener(this, 'position_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'visible_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'clickable_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'text_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'zindex_changed', function() { me.draw(); }),
google.maps.event.addDomListener(this.div_, 'click', function() {
if (me.get('clickable')) {
google.maps.event.trigger(me, 'click');
}
})
];
};

// Implement onRemove
Label.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);

// Label is removed from the map, stop updating its position/text.
for (var i = 0, I = this.listeners_.length; i < I; ++i) {
google.maps.event.removeListener(this.listeners_[i]);
}
};

// Implement draw
Label.prototype.draw = function() {
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel(this.get('position'));

var div = this.div_;
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';

var visible = this.get('visible');
div.style.display = visible ? 'block' : 'none';

var clickable = this.get('clickable');
this.span_.style.cursor = clickable ? 'pointer' : '';

var zIndex = this.get('zIndex');
div.style.zIndex = zIndex;

this.span_.innerHTML = this.get('text').toString();
};

And to use it, here's a little example:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
Label Overlay Example
</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="label.js"></script>
<script type="text/javascript">
var marker;

function initialize() {
var latLng = new google.maps.LatLng(40, -100);

var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

  marker = new google.maps.Marker({
  position: latLng,
  draggable: true,
  zIndex: 1,
  map: map,
  optimized: false
  });

  var label = new Label({
  map: map
  });
  label.bindTo('position', marker);
  label.bindTo('text', marker, 'position');
  label.bindTo('visible', marker);
  label.bindTo('clickable', marker);
  label.bindTo('zIndex', marker);

  google.maps.event.addListener(marker, 'click', function() { alert('Marker has been clicked'); })
  google.maps.event.addListener(label, 'click', function() { alert('Label has been clicked'); })
}

function showHideMarker() {
  marker.setVisible(!marker.getVisible());
}

function pinUnpinMarker() {
  var draggable = marker.getDraggable();
  marker.setDraggable(!draggable);
  marker.setClickable(!draggable);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 200px; width: 200px"></div>
<button type="button" onclick="showHideMarker();">Show/Hide Marker</button>
<button type="button" onclick="pinUnpinMarker();">Pin/Unpin Marker</button>
</body>
</html>

The label can be used on its own or bound to a marker.
It supports:

set('position', latLng);
get('position')
set('text', string);
get('text);
set('visible', boolean);
get('visible');
set('clickable', boolean);
get('clickable');
set('zIndex', index);
get('zIndex');

and provides events:

position_changed
text_changed
visible_changed
clickable_changed
zindex_changed
click

Using StreetViewService in Maps API Javascript v3

noreply@blogger.com (Marc (Google Employee)) — Mon, 08 Nov 2010 11:49:00 +0000

Based on my recent post, I've added code to change the content of the infowindow if the panorama we try to display doesn't exist. This needs to be done using StreetViewService as currently the StreetViewPanorama doesn't have an event or property to notify us of a failure to load a panorama.

The code that changed:

// Create a StreetViewService to be able to check
    // if a given LatLng has a corresponding panorama.
    var service = new google.maps.StreetViewService();
    
    // Set the infowindow content and display it on marker click.
    // Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
    function openInfoWindow(marker) {
      title.innerHTML = marker.getTitle();
      streetview.style['visibility'] = 'hidden';
      service.getPanoramaByLocation(marker.getPosition(), 50, function(result, status) {
        if (status == google.maps.StreetViewStatus.OK) {
          pin.set("position", marker.getPosition());
          streetview.style['visibility'] = '';
        }
      })
      infowindow.open(map, marker);
    }

The StreetViewService (see Reference and Example) returns a status code. If it's OK, I make the DIV that contains the StreetView panorama visible. I could have also added text.

And the full code:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Markers, Info Window and StreetView</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() {

    // Create the map 
    // No need to specify zoom and center as we fit the map further down.
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false
    });
 
    // Create the shared infowindow with two DIV placeholders
    // One for a text string, the other for the StreetView panorama.
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    content.appendChild(title);
    var streetview = document.createElement("DIV");
    streetview.style.width = "200px";
    streetview.style.height = "200px";
    content.appendChild(streetview);
    var infowindow = new google.maps.InfoWindow({
      content: content
    });

    // Define the list of markers.
    // This could be generated server-side with a script creating the array.
    var markers = [
      { lat: -33.85, lng: 151.05, name: "marker 1" },
      { lat: -33.90, lng: 151.35, name: "marker 2" },
      { lat: -33.95, lng: 151.15, name: "marker 3" },
      { lat: -33.85, lng: 151.15, name: "marker 4" }
    ];

    // Create the markers
    for (index in markers) addMarker(markers[index]);
    function addMarker(data) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.name
      });
      google.maps.event.addListener(marker, "click", function() {
        openInfoWindow(marker);
      });
    }

    // Zoom and center the map to fit the markers
    // This logic could be conbined with the marker creation.
    // Just keeping it separate for code clarity.
    var bounds = new google.maps.LatLngBounds();
    for (index in markers) {
      var data = markers[index];
      bounds.extend(new google.maps.LatLng(data.lat, data.lng));
    }
    map.fitBounds(bounds);

    // Handle the DOM ready event to create the StreetView panorama
    // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
    var panorama = null;
    var pin = new google.maps.MVCObject();
    google.maps.event.addListenerOnce(infowindow, "domready", function() {
      panorama = new google.maps.StreetViewPanorama(streetview, {
          navigationControl: false,
          enableCloseButton: false,
          addressControl: false,
          linksControl: false,
          visible: true
      });
      panorama.bindTo("position", pin);
    });

    // Create a StreetViewService to be able to check
    // if a given LatLng has a corresponding panorama.
    var service = new google.maps.StreetViewService();
    
    // Set the infowindow content and display it on marker click.
    // Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
    function openInfoWindow(marker) {
      title.innerHTML = marker.getTitle();
      streetview.style['visibility'] = 'hidden';
      service.getPanoramaByLocation(marker.getPosition(), 50, function(result, status) {
        if (status == google.maps.StreetViewStatus.OK) {
          pin.set("position", marker.getPosition());
          streetview.style['visibility'] = '';
        }
      })
      infowindow.open(map, marker);
    }
  }
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div> 
</body> 
</html>

Maps API Javascript v3 - Multiple Markers with multiple infowindows and StreetView

noreply@blogger.com (Marc (Google Employee)) — Mon, 08 Nov 2010 11:17:00 +0000

Similar to the previous post, I have a map with multiple markers but multiple InfoWindows, one per marker. When a marker is clicked, its infowindow is displayed with the marker title and the StreetView panorama at this location.

What to retain from this example:

- How to add multiple markers to the map
- How to manage one InfoWindow per marker
- How to add the StreetView panorama as well as other text in the infowindow
- How to zoom the map to include all the markers

I'll be posting another blog tomorrow showing how to use StreetViewService to detect if a panorama doesn't exist.

Here's the code:

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Markers, Info Window and StreetView</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() {

    // Create the map 
    // No need to specify zoom and center as we fit the map further down.
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false
    });
 
    // Define the list of markers.
    // This could be generated server-side with a script creating the array.
    var markers = [
      { lat: -33.85, lng: 151.05, name: "marker 1" },
      { lat: -33.90, lng: 151.10, name: "marker 2" },
      { lat: -33.95, lng: 151.15, name: "marker 3" },
      { lat: -33.85, lng: 151.15, name: "marker 4" }
    ];

    // Create the markers ad infowindows.
    for (index in markers) addMarker(markers[index]);
    function addMarker(data) {
      // Create the marker
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.name
      });
    
      // Create the infowindow with two DIV placeholders
      // One for a text string, the other for the StreetView panorama.
      var content = document.createElement("DIV");
      var title = document.createElement("DIV");
      title.innerHTML = data.name;
      content.appendChild(title);
      var streetview = document.createElement("DIV");
      streetview.style.width = "200px";
      streetview.style.height = "200px";
      content.appendChild(streetview);
      var infowindow = new google.maps.InfoWindow({
        content: content
      });

      // Open the infowindow on marker click
      google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
      });
    
      // Handle the DOM ready event to create the StreetView panorama
      // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
      google.maps.event.addListenerOnce(infowindow, "domready", function() {
        var panorama = new google.maps.StreetViewPanorama(streetview, {
            navigationControl: false,
            enableCloseButton: false,
            addressControl: false,
            linksControl: false,
            visible: true,
            position: marker.getPosition()
        });
      });
    }

    // Zoom and center the map to fit the markers
    // This logic could be conbined with the marker creation.
    // Just keeping it separate for code clarity.
    var bounds = new google.maps.LatLngBounds();
    for (index in markers) {
      var data = markers[index];
      bounds.extend(new google.maps.LatLng(data.lat, data.lng));
    }
    map.fitBounds(bounds);
  }
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div> 
</body> 
</html>

Maps API Javascript V3 - Multiple Markers, InfoWindow and StreetView

noreply@blogger.com (Marc (Google Employee)) — Mon, 08 Nov 2010 10:45:00 +0000

Another interesting example. For this blog, I have a map with multiple markers and a single InfoWindow shared between the markers. When a marker is clicked, the infowindow is displayed with the marker title and the StreetView panorama at this location.

What to retain from this example:

- How to add multiple markers to the map
- How to share a single InfoWindow for all the markers
- How to add the StreetView panorama as well as other text in the infowindow
- How to zoom the map to include all the markers

I'll be posting another blog tomorrow showing how to use multiple infowindows and how to use StreetViewService to detect if a panorama doesn't exist.

Here's the code:

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Markers, Info Window and StreetView</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() {

    // Create the map 
    // No need to specify zoom and center as we fit the map further down.
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false
    });
 
    // Create the shared infowindow with two DIV placeholders
    // One for a text string, the other for the StreetView panorama.
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    content.appendChild(title);
    var streetview = document.createElement("DIV");
    streetview.style.width = "200px";
    streetview.style.height = "200px";
    content.appendChild(streetview);
    var infowindow = new google.maps.InfoWindow({
   content: content
    });

    // Define the list of markers.
    // This could be generated server-side with a script creating the array.
    var markers = [
      { lat: -33.85, lng: 151.05, name: "marker 1" },
      { lat: -33.90, lng: 151.10, name: "marker 2" },
      { lat: -33.95, lng: 151.15, name: "marker 3" },
      { lat: -33.85, lng: 151.15, name: "marker 4" }
    ];

    // Create the markers
    for (index in markers) addMarker(markers[index]);
    function addMarker(data) {
   var marker = new google.maps.Marker({
  position: new google.maps.LatLng(data.lat, data.lng),
  map: map,
        title: data.name
   });
   google.maps.event.addListener(marker, "click", function() {
  openInfoWindow(marker);
   });
    }

    // Zoom and center the map to fit the markers
    // This logic could be conbined with the marker creation.
    // Just keeping it separate for code clarity.
    var bounds = new google.maps.LatLngBounds();
    for (index in markers) {
   var data = markers[index];
   bounds.extend(new google.maps.LatLng(data.lat, data.lng));
 }
 map.fitBounds(bounds);

    // Handle the DOM ready event to create the StreetView panorama
    // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
    var panorama = null;
    var pin = new google.maps.MVCObject();
    google.maps.event.addListenerOnce(infowindow, "domready", function() {
      panorama = new google.maps.StreetViewPanorama(streetview, {
       navigationControl: false,
       enableCloseButton: false,
       addressControl: false,
       linksControl: false,
       visible: true
      });
      panorama.bindTo("position", pin);
    });
    
    // Set the infowindow content and display it on marker click.
    // Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
    function openInfoWindow(marker) {
   title.innerHTML = marker.getTitle();
   pin.set("position", marker.getPosition());
   infowindow.open(map, marker);
    }
  }
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div> 
</body> 
</html>

How to display a map inside StreetView

noreply@blogger.com (Marc (Google Employee)) — Fri, 05 Nov 2010 12:11:00 +0000

It's fairly easy to display a small map in the corner of a StreetView panorama.
You just need to add a small map on top of the StreetView panorama and bind it.

Code:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>Google Maps JavaScript API Example: Street View with Map</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript"> 
 
  function initialize() {
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"), {
   position: new google.maps.LatLng(42.345573,-71.098326),
   visible: true
    });
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(42.345573,-71.098326),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: true,
      streetView: panorama
    });

    google.maps.event.addListener(panorama, "position_changed", function() {
   map.setCenter(panorama.getPosition());
    });
  }
</script> 
</head> 
<body onload="initialize()">
  <div style="position:absolute;"> 
    <div id="pano" style="z-index:0; width: 800px; height: 600px;"></div> 
    <div id="map_canvas" style="z-index:1; position:absolute; right:0px; bottom:0px; width: 200px; height: 150px"></div>
  </div> 
</body> 
</html>

How to embed StreetView in an infowindow

noreply@blogger.com (Marc (Google Employee)) — Fri, 05 Nov 2010 11:36:00 +0000

I've received a number of queries on how to get StreetView inside an infowindow showing the panorama of the marker bound to the infowindow.

Here's a quick example.
Click on the marker to display the infowindow.
Drag the marker to get a different panorama.

Code:

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Info Window with StreetView</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() {
var myLatlng = new google.maps.LatLng(-33.866943,151.195512);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var contentString = '<div id="content" style="width:200px;height:200px;"></div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click Me',
draggable: true
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});

var pano = null;
google.maps.event.addListener(infowindow, 'domready', function() {
if (pano != null) {
pano.unbind("position");
pano.setVisible(false);
}
pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
enableCloseButton: false,
addressControl: false,
linksControl: false
});
pano.bindTo("position", marker);
pano.setVisible(true);
});

google.maps.event.addListener(infowindow, 'closeclick', function() {
pano.unbind("position");
pano.setVisible(false);
pano = null;
});

}

</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas"></div> 
</body> 
</html>

How to create and display a custom Street View panorama using Maps Javascript API v3

noreply@blogger.com (Marc (Google Employee)) — Thu, 27 May 2010 04:30:00 +0000

To display a custom panorama, first you need a tileset.

There are no restrictions to the tileset size or aspect ratio, the tile size or aspect ratio and the number of tiles used.

Just know that StreetView uses an equirectangular projection (http://en.wikipedia.org/wiki/Equirectangular_projection)

so the panorama will be stretched to wrap exactly around a sphere horizontally and exactly half a sphere vertically. For this reason, a panorama with an aspect ratio 2:1 is best.

There are many tools on the market to create the initial panorama. Look for tile stitching. Place a digital camera on a tripod, take enough pictures to cover every point of view from top to bottom, all around. Then use the stitching software to create a cylindrical projection of you panorama. If you are not covering the panorama from top to bottom, create the panorama as if you had and fill in the missing space with a neutral color.

Once you have created your original panorama and you have decided on the tile size, you need to create each version of the panorama for successive 1/2 height 1/2 width sizes until the panorama fits into one tile.

For example, if you have a panorama of 6000 * 3000 pixels and you use a 512 * 512 tile size, you will need to create:

- panorama 6000 * 3000 (12*6 tiles)

- panorama 3000 * 1500 (6*3 tiles)

- panorama 1500 * 750 (3*2 tiles)

- panorama 750 * 375 (2*1 tiles)

- panorama 375 * 187 (1*1 tile)

When the tiles cover more area than the panorama, have the unused section of the right most tile replicate the left most tile, and the unused section of the bottom most tile filled with a neutral color.

The panorama with a single tile is zoom = 0, then 1,2,3,4 .. so in the example above, the largest panorama is zoom 4.

Once you have created the panoramas, cut them into tiles and name each tile according to its position and zoom level. The top left tile is always tile (0,0).

For the rest of this email, i'll assume that the naming convention used for the tiles is "panorama_z_x_y.jpg".

Now the minimum required to display this panorama is:


        var panorama = new google.maps.StreetViewPanorama(
            document.getElementById('streetview')
        );

        panorama.registerPanoProvider(function(pano) {
          return {
            tiles: {
              tileSize: new google.maps.Size(512, 512),
              worldSize: new google.maps.Size(6000, 3000),
              getTileUrl: function(room, zoom, x, y) {
                return "http://mydomain/somepath/" + room + '_' + zoom + '_' + x + '_' + y + '.jpg';
              }
          };
        });

        panorama.setPano('panorama');

If you want to display an address, a copyright and navigation links, the data to be returned looks like:

        var panorama = new google.maps.StreetViewPanorama(
            document.getElementById('streetview')
        );

        panorama.registerPanoProvider(function(pano) {
          return {
            location: {
              pano: pano,
              description: "My panorama"
            },
            links: links, // an array of StreetViewLink.
            copyright: 'Imagery (c) 2009 Me',
            tiles: {
              tileSize: new google.maps.Size(512, 512),
              worldSize: new google.maps.Size(6000, 3000),
              originHeading: 90, // To align the panorama with the headings in the links.
              getTileUrl: function(room, zoom, x, y) {
                return "http://mydomain/somepath/" + room + '_' + zoom + '_' + x + '_' + y + '.jpg';
              }
            }
          };
        });

        panorama.setPano('panorama');

The originHeading is the compass reading at the point where the left and right borders of the panorama join.

For example, have a look at this tile set:

Zoom 0:

http://syd-office-panos.appspot.com/p/reception_0_0_0.jpg

Zoom 1:

http://syd-office-panos.appspot.com/p/reception_1_0_0.jpg

http://syd-office-panos.appspot.com/p/reception_1_1_0.jpg

To test this tileset, add this code on your page:

function initialize() {
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('streetview'),
    {
      panoProvider: function(pano) {
        return {
          location: {
            pano: pano,
            description: 'Google Australia - Reception'
          },
          copyright: 'Imagery \xA9 2010 Google Inc.',
          links: [],
          tiles: {
            tileSize: new google.maps.Size(512, 512),
            worldSize: new google.maps.Size(8192, 4096),
            originHeading: 0,
            getTileUrl: function(room, zoom, x, y) {
              return 'http://syd-office-panos.appspot.com/p/reception_' +
                  zoom + '_' + x + '_' + y + '.jpg';
            }
          }
        };
      },
      pano: 'google'
    }
  );
}

Custom panoramas in Maps Javascript API v3 - Street View

noreply@blogger.com (Marc (Google Employee)) — Thu, 20 May 2010 02:17:00 +0000

How to display a custom panorama

Register a pano provider in the panorama that returns a StreetViewPanoramaData. The critical element is the 'tiles' property that defines the set of tiles required for the panorama.

panorama.registerPanoProvider(function(pano) {
return {
location: {
pano: pano,
},
tiles: {
tileSize: new google.maps.Size(256, 256),
worldSize: new google.maps.Size(256 * 64, 256 * 32),
originHeading: 110,
getTileUrl: function(pano, zoom, x, y) {
return 'http://someurl/somepath/' + pano + '/' + zoom + '_' + x + '_' + y + '.png';
}
}
};
});

How to set the address text in a custom panorama

Set the description value of the StreetViewLocation in the StreetViewPanoramaData object return by the panoProvider.

panorama.registerPanoProvider(function(pano) {
return {
location: {
...
description: 'Address Text'
},
...
};
});

How to set the copyright in a custom panorama

Set the copyright value in the StreetViewPanoramaData object return by the panoProvider.

panorama.registerPanoProvider(function(pano) {
return {
copyright: 'Copyright text',
...
};
});

How to set the links in a custom panorama

Provide a links array of StreetViewLink in the StreetViewPanoramaData object return by the panoProvider.

panorama.registerPanoProvider(function(pano) {
return {
links: [
{
'heading': 171,
'description' : 'Link Text 1',
'pano' : '5pXLKKqtDowwU0mrpx8pWw'
},
{
'heading': 351,
'description' : 'Link Text 2',
'pano' : '0682ricVXBNcNuEcpSb-rA'
}
],
...
};
});

How to set specify the color and opacity of a link in a custom panorama

Set the roadColor and roadOpacity fields in the StreetViewLink objects in the links array.

panorama.registerPanoProvider(function(pano) {
return {
links: [
{
...
'roadColor' : '#0020C0',
'roadOpacity' : 0.6
},
...
],
...
};
});

Controls in Maps Javascript API v3 - Street View

noreply@blogger.com (Marc (Google Employee)) — Thu, 20 May 2010 02:13:00 +0000

Controls in Street View are very similar to the Map controls.

How to show/hide the address control

panorama.set('addressControl', true/false);

panorama.setOptions({
addressControl: true/false
});

how to position the address control in the panorama

panorama.setOptions({
'addressControlOptions': {
'position': google.maps.ControlPosition.TOP_RIGHT,
...
}
});

How to show/hide the links control

panorama.set('linksControl', true/false);

panorama.setOptions({
linksControl: true/false
});

How to add a link in the links control

var links = panorama.getLinks();
links.push({
'yaw': 150,
'description' : 'For Sale',
'pano' : 'entrance',
'roadColor': 'blue',
'roadOpacity': 0.4
});

then

panorama.setLinks(links);

panorama.setOptions({
links: links
});

panorama.notify('links');

how to add a custom control in the panorama

var aLink = document.createElement('a');
aLink.innerHTML = "Hello";
aLink.href = "http://google.com";
panorama.controls[google.maps.ControlPosition.BOTTOM].push(aLink);

How to show/hide the close button

panorama.set('enableCloseButton', true/false);

panorama.setOptions({
enableCloseButton: true/false
});

How to detect the close button has been clicked

google.maps.event.addListener(panorama, 'closeclick', function() {});

How to show/hide the Navigation controls

panorama.set('navigationControl', true/false);

panorama.setOptions({
navigationControl: true/false
});

How to select the style and position of the navigation controls

panorama.set('navigationControlOptions', {
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.NavigationControlStyle.ZOOM_PAN
});

panorama.setOptions({
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});

Events, markers, infowindows and overlays in Maps Javascript API v3 - Street View

noreply@blogger.com (Marc (Google Employee)) — Thu, 20 May 2010 02:02:00 +0000

How to monitor changes to pano Id

google.maps.event.addListener(panorama, 'pano_changed', function() {});

How to monitor changes to position

google.maps.event.addListener(panorama, 'position_changed', function() {});

How to monitor changes to the point of view

google.maps.event.addListener(panorama, 'pov_changed', function() {});

How to add a marker in the panorama

Markers by default are shared between the map and the panorama. If you create a separate panorama, you can add markers into it using:

var marker = new google.maps.Marker();
marker.setMap(panorama);

How to add an infowindow in the panorama

var infowindow = new google.maps.InfoWindow();
infowindow.open(panorama);

how to add a custom overlay in the panorama

To add a custom overlay on a panorama, follow the same logic as a custom overlay in the map. Derive from OverlayView, implement draw, onAdd, onRemove ... and add it to the panorama using setMap(panorama):

function CustomOverlay() {};
CustomOverlay.prototype = new google.maps.OverlayView;
var customOverlay = new CustomOverlay();
customOverlay.setMap(panorama);

Enabling and initializing Street View in Maps Javascript API v3

noreply@blogger.com (Marc Ridey) — Thu, 20 May 2010 01:48:00 +0000

How to enable Street View

map.set('streetViewControl', true);

map.setOptions({
streetViewControl: true
});

How to access the panorama in the map

var panorama = map.getStreetView();

How to know if the panorama is displayed

var panoramaDisplayed = panorama.getVisible();

How to set a manual Pano Id

panorama.setPano('-gfXi6db7jFB-cwAkTbBgA');

panorama.setOptions({
pano: '-gfXi6db7jFB-cwAkTbBgA'
});

How to set a manual position

panorama.setPosition(new google.maps.LatLng(48.85969, 2.29720));

panorama.setOptions({
position: new google.maps.LatLng(48.85969, 2.29720)
});

How to set the point of view

panorama.setPov({heading:30, pitch:0, zoom:4});

panorama.setOptions({
pov: {heading:30, pitch:0, zoom:4}
});

How to create a panorama without a map

var div = document.getElementById('panoramadiv');
var panorama = new google.maps.StreetViewPanorama(div);

How to have a separate panorama next to the map

var div = document.getElementById('panoramadiv');
var panorama = new google.maps.StreetViewPanorama(div);
map.setStreetView(panorama);

var div = document.getElementById('panoramadiv');
var panorama = new google.maps.StreetViewPanorama(div);
map.setOptions({
streetView: panorama
});

Using MarkerImage in Maps Javascript API v3

noreply@blogger.com (Marc Ridey) — Thu, 25 Mar 2010 12:00:00 +0000

When creating custom markers, you need to supply two images, the icon and the shadow. While you can supply a simple URL for each property, using MarkerImage allows you more flexibility and improves performance.

1. Creating a simple image:

The simplest marker is one made of individual icon and shadow images, with the anchor point (The point used to position the marker) located in the middle of the bottom edge of the image, like the standard marker using by the API.
In this situation, you only need to speficy the image URL such as:

var icon = new google.maps.MarkerImage("http://domain/path/image.png");

2. Specifying an anchor point

Depending of the shape of the marker, you may not want the middle of the bottom edge to be used as the anchor point. For example, in this sample, the anchor point of the beach flag is at the bottom left corner.
In those situation, you need to specify the anchor point of the image as the fourth parameter. This is a value of type Point, relative to the top left corner of the image with positive X going right and positive Y going down.
For example, if the image "beach_flag.png" is 20*32 pixels, we would use:

var icon = new google.maps.MarkerImage("http://domain/path/beach_flag.png", null, null, new google.maps.Point(0, 32));

3. Resizing the image

If you need to display the image larger or smaller than its original size, supply the scaledImage parameter:

var icon = new google.maps.MarkerImage("http://domain/path/image.png", null, null, null, new google.maps.Size(64, 64));

Note that if you use both size and anchor, the anchor value needs to be specified after scaling.
Combining the two previous examples, we would have:

var icon = new google.maps.MarkerImage("http://domain/path/beach_flag.png", null, null, new google.maps.Point(0, 64), new google.maps.Size(40, 64));

Note the change to the anchor from 0, 32 to 0, 64.

4. Using a sprite image

One simple way to imrove the performance of your website is to use sprite images. It means using a single image that contains many of the images you need of the site then using a section of it as required. The browser only makes a single call to download the image where before it would have made many.
To create a MarkerImage from a sprite image, you need to specify the origin and size of the section of the image you want to use to create the icon.

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34));

You can, if you need, also provide the anchor point. The valoue of the anchor is relative to the section of the image, not the whole image.
For example, to use the center of the sprite image above as the anchor point, we would have:

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34), new google.maps.Point(6, 10));

5. Using a scaled sprite image

To combine spriting and scaling, you need to supply a scaled section size as well as the scaled image size.
For example, if we want to display the section in the previous example of size 12*20 pixels, but display it 24*40 pixels, from an image originally 200*300 in size we would have:

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(24, 40), new google.maps.Point(200, 68), new google.maps.Point(12, 20), new google.maps.Size(400, 600));

To display a scaled image or a scaled prite image, just supply the size, origin, anchor and scaledSize parameters with the scale factor applied.

6. Improving performance

They are two ways to improve the performance of MarkerImage:

- When you know the size of the image, specify it. If the size is not supplied, we make a call to download the image and read its size. While most browsers will cache the image and not download it again, this is not true in all cases and it may trigger the download of the image earlier than required, delaying the display of the map.
- When displaying multiple markers with the same shadow or icon, reuse the MarkerImage for all the markers:

var icon = new google.maps.MarkerImage(...);
for (...) {
var marker = new google.maps.Marker({
icon: icon,
...
};
}

Maps Javascript API v3 - More about the MVCObject class

noreply@blogger.com (Marc Ridey) — Wed, 24 Mar 2010 10:21:00 +0000

If you’re doing development using the new Google Maps JavaScript API v3, you will have noticed that all the core classes are derived from the MVCObject class.
Knowing when and how to use the features built into the MVCObject class will make your Maps API v3 development easier.

1. Accessors

To store and retrieve values from an MVCObject, do not access the properties directly, instead use the provided accessor methods.

get(key): Retrieves a value from the MVCObject.
set(key, value): Stores a value in the MVCObject.
setValues(keyValuePairs): Sets multiple values in the MVCObject.

For example:

var a = new google.maps.MVCObject();
a.set(‘level’, 2);
alert(a.get(‘level’)); // Returns 2
var b = new google.maps.MVCObject();
b.setValues({
  level: 2,
  index: 3,
  description: ‘Hello world.’
});
alert(b.get(‘index’)); // Returns 3

2. Binding

Binding two properties between two MVCObjects allows changes to one object to be replicated in the object other.

bindTo(targetKey, source, sourceKey): Binds the sourceKey property of the source to the targetKey property of the MVCObject. Effectively, it means that calling get(targetKey) on the MVCObject calls source.get(sourceKey).

Unbind(targetKey): Removes the binding between the MVCObject and the source but retains the value of the property, so calling get(targetKey) on the MVCObject before or after unbinding returns the same value. This is not true once the sourceKey property of the source is changed.

For example:

var a = new google.maps.MVCObject();
a.set(‘level’, 2);

var b = new google.maps.MVCObject();
b.bindTo(‘index’, a, ‘level’);
alert(b.get(‘index’)); // Returns 2.

// Changes to the source are visible on the target
a.set(‘level’, 3);
alert(b.get(‘index’)); // Returns 3.

// Changes to the target are visible on the source
b.set(‘index’, 4);
alert(a.get(‘level’)); // Returns 4.

// There can be multiple values bounds to the same source
var c = new google.maps.MVCObject();
c.bindTo(‘zoom’, a, ‘level’);
alert(c.get(‘zoom’)); // Returns 4.

// Unbound properties are not changed when the source is changed
b.unbind(‘index’);
alert(b.get(‘index’)); // Returns 4. The value hasn’t changed when unbound.
c.set(‘zoom’, 5);
alert(a.get(‘level’)); // Returns 5, c.zoom is bound to a.level.
alert(b.get(‘index’)); // Returns 4, b.index is not bound to anything.

Note that when bound, the two values are not duplicated but rather the getter of the bound property calls the getter of the source property.

In this code:

var map = new google.maps.Map(div, {…});
var marker = new google.maps.Marker({…});
marker.bindTo(‘position’, map, ‘center’);

The marker LatLng position is bound to the map’s center. This causes the maker position to be updated to the center of the map, everytime the map’s center changes. Effectively, it keeps the marker at the center of the map.

3. Events

Binding ensures that values are kept in sync, but you need to be notified that the values have changed to be able to act on it. The MVCObject provides two notification mechanisms: the changed method and changed events.

The changed method is a generic handler for state changes. Override this in derived classes to handle arbitrary state changes.

For example (See http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html):

Label.changed is called from changes to its properties with the parameter ‘key’ set to the name of the property that was set.

The second method available to monitor changes to MVC properties is the ‘changed’ event. Every time a property is set, an event named ‘xxx_changed’ (where ‘xxx’ is the lowercase value of the key) is triggered. You can listen to these events using google.maps.event.addListener.

For example:

var a = new google.maps.MVCObject();
google.maps.event.addListener(a, ‘level_changed’, function() {
alert(‘a.level has changed and the new value is ‘ + a.get(‘level’));
});
a.set(‘level’, 2); // Will display the alert message.

The changed events follow bound properties. If a.X is bound to b.X and b.X is bound to c.X, setting either a.X, b.X or C.X will cause the 'x_changed' event to be triggered on a, b, and c. The order in which the events are triggered depends o the order in which the values where bound and the listeners were attached.

Note that the changed events are triggered synchronously within the call to set(). In the example above, the alert dialog is displayed before the a.set() calls returns.

Listening to map events in Google Maps API v3 OverlayView

noreply@blogger.com (Marc Ridey) — Wed, 30 Sep 2009 04:12:00 +0000

In my previous post, I showed how to create a simple Label overlay. In that example, the draw method was only called when the position of the overlay relative to the map needed to be recalculated or when the text for the label had changed.

But what if the look/content of the overlay you want to create depends on the map center or the map bounds. Currently, OverlayView.draw is not called if the map is dragged for example.

I've created below a 'Center' overlay to demonstrate how to listen to map events in the overlay.

first, in center.js I have:


// Define the overlay, derived from google.maps.OverlayView
function Center(opt_options) {
  // Initialization
  this.setValues(opt_options);

  // Center specific
  var div1 = document.createElement('div');
  div1.style.cssText = 'position: absolute; left: -20px; top: -20px; ' +
                       'border-right: 1px solid blue; border-bottom: 1px solid blue; width: 19px; height: 19px';
  var div2 = document.createElement('div');
  div2.style.cssText = 'position: absolute; left: 1px; top: -20px; ' +
                       'border-left: 1px solid blue; border-bottom: 1px solid blue; width: 19px; height: 19px';
  var div3 = document.createElement('div');
  div3.style.cssText = 'position: absolute; left: -20px; top: 1px; ' +
                       'border-right: 1px solid blue; border-top: 1px solid blue; width: 19px; height: 19px';
  var div4 = document.createElement('div');
  div4.style.cssText = 'position: absolute; left: 1px; top: 1px; ' +
                       'border-left: 1px solid blue; border-top: 1px solid blue; width: 19px; height: 19px';

  var div = this.div_ = document.createElement('div');
  div.appendChild(div1);
  div.appendChild(div2);
  div.appendChild(div3);
  div.appendChild(div4);
  div.style.cssText = 'position: absolute; display: none';
};
Center.prototype = new google.maps.OverlayView;

// Implement onAdd
Center.prototype.onAdd = function() {
  var pane = this.getPanes().overlayLayer;
  pane.appendChild(this.div_);

  // Ensures the center is redrawn if the map center changes
  var me = this;
  this.listeners_ = [
    google.maps.event.addListener(this.getMap(), 'center_changed',
        function() { me.draw(); }),
  ];
};

// Implement onRemove
Center.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);

  // Label is removed from the map, stop updating its position/text.
  for (var i = 0, I = this.listeners_.length; i < I; ++i) {
    maps.google.event.removeListener(this.listeners_[i]);
  }
};

// Implement draw
Center.prototype.draw = function() {
  var projection = this.getProjection();
  var position = projection.fromLatLngToDivPixel(this.getMap().getCenter());

  var div = this.div_;
  div.style.left = position.x + 'px';
  div.style.top = position.y + 'px';
  div.style.display = 'block';
};

and in the map initialization I just added:


  <script type="text/javascript" src="center.js"></script>

and


  var center = new Center({
    map: map
  });

Adding the Center object to the map creates a cross at the center of the map. When the map is dragged or zoomed, the overlay is redrawn, allowing it to stay centered.

The result looks like this:

Label overlay example for Google Maps API v3

noreply@blogger.com (Marc Ridey) — Tue, 29 Sep 2009 06:30:00 +0000

Here's a simple example of creating a custom overlay class for Google Maps API v3. This Label overlay can either be used on its own, or bound to a marker.

First, create the Label class and place it in a label.js file.


// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
 // Initialization
 this.setValues(opt_options);

 // Label specific
 var span = this.span_ = document.createElement('span');
 span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
                      'white-space: nowrap; border: 1px solid blue; ' +
                      'padding: 2px; background-color: white';

 var div = this.div_ = document.createElement('div');
 div.appendChild(span);
 div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;

// Implement onAdd
Label.prototype.onAdd = function() {
 var pane = this.getPanes().overlayLayer;
 pane.appendChild(this.div_);

 // Ensures the label is redrawn if the text or position is changed.
 var me = this;
 this.listeners_ = [
   google.maps.event.addListener(this, 'position_changed',
       function() { me.draw(); }),
   google.maps.event.addListener(this, 'text_changed',
       function() { me.draw(); })
 ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
 this.div_.parentNode.removeChild(this.div_);

 // Label is removed from the map, stop updating its position/text.
 for (var i = 0, I = this.listeners_.length; i < I; ++i) {
   google.maps.event.removeListener(this.listeners_[i]);
 }
};

// Implement draw
Label.prototype.draw = function() {
 var projection = this.getProjection();
 var position = projection.fromLatLngToDivPixel(this.get('position'));

 var div = this.div_;
 div.style.left = position.x + 'px';
 div.style.top = position.y + 'px';
 div.style.display = 'block';

 this.span_.innerHTML = this.get('text').toString();
};

Then use label.js in the map initialization:


<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <title>Label Overlay Example</title>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="label.js"></script>
 <script type="text/javascript">
   function initialize() {
     var latLng = new google.maps.LatLng(40, -100);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 5,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var marker = new google.maps.Marker({
       position: latLng,
       draggable: true,
       map: map
     });

     var label = new Label({
       map: map
     });
     label.bindTo('position', marker, 'position');
     label.bindTo('text', marker, 'position');
   };
 </script>
</head>
<body onload="initialize()">
 <div id="map_canvas" style="height: 100%; width: 100%"></div>
</body>
</html>

When run, it looks like this:

Drag the marker around and the text of the label with update with the LatLng of the marker.

Hosting Google Maps in a Microsoft WPF application using XAML

noreply@blogger.com (Marc Ridey) — Fri, 11 Sep 2009 03:50:00 +0000

Ever wondered how to implement Google Maps in a WPF application using XAML?

Find out how: http://code.google.com/apis/maps/articles/flashmapinwpf.html

Filtered ObservableCollection

noreply@blogger.com (Marc Ridey) — Mon, 04 May 2009 12:19:00 +0000

On the project I'm working on at the moment, I have a class that stores items in an ObservableCollection. I needed to be able to expose in the same class different subsets of this collection, keeping them all in sync while allowing to add/remove/update elements in all the collections.

For example, imagine you would like to create a collection of people ObservableCollection<People> but also have collection for Males and Females and pass these collections as parameters to other methods that can manipulate these collections (Add/Remove/Update People in the Males collection) and see the original collection updated.

My first approach was to create an ObservableCollection for each subset and use the CollectionChanged event to maintain all the lists in sync. While it worked, it was very code heavy. So today I wrote a simple FilteredObservableCollection class. It encapsulates an ObservableCollection but only enumerates the items that comply with the filter. It's similar to the CollectionView but it still allows to Add/Remove/Update elements in the collection.

The class is not derived from an ObservableCollection since it needs to be able to attach to an existing collection but it expose all the interfaces and members for the observable collection:

public
class
FilteredObservableCollection<T> : IList<T>, ICollection<T>, IEnumerable<T>, IList, ICollection, IEnumerable, INotifyCollectionChanged, INotifyPropertyChanged
{
    private
ObservableCollection<T> _collection;
    private
Predicate<T> _filter;
    private
event
NotifyCollectionChangedEventHandler _collectionchanged;
    private
event
PropertyChangedEventHandler _propertychanged;

    public FilteredObservableCollection(ObservableCollection<T> collection)
    {
        _filter = null;
        _collection = collection;
        _collection.CollectionChanged += new
NotifyCollectionChangedEventHandler(OnCollectionChanged);
        ((INotifyPropertyChanged)_collection).PropertyChanged += new
PropertyChangedEventHandler(OnPropertyChanged);
    }

The two interesting bit in the Filtered collection are the handling on the CollectionChanged event and the enumerator:

The CollectionChanged event received from the encapsulated collection may not necessarily need to be passed by the filtered collection. An item added to or deleted from the main collection, if filtered out, should not generate an event for the filtered collection while a Change to an existing item may cause the item to appear in the list (it now complies with the filter) or disappear from the list (it no longer complies with the filter).

    private
void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        if (_collectionchanged != null)
        {
            // Check the NewItems
            List<T> newlist = new
List<T>();
            if (e.NewItems != null)
                foreach (T item in e.NewItems)
                    if (_filter(item) == true)
                        newlist.Add(item);

            // Check the OldItems
            List<T> oldlist = new
List<T>();
            if (e.OldItems != null)
                foreach (T item in e.OldItems)
                    if (_filter(item) == true)
                        oldlist.Add(item);

            // Create the Add/Remove/Replace lists
            List<T> addlist = new
List<T>();
            List<T> removelist = new
List<T>();
            List<T> replacelist = new
List<T>();

            // Fill the Add/Remove/Replace lists
            foreach (T item in newlist)
                if (oldlist.Contains(item))
                    replacelist.Add(item);
                else
                    addlist.Add(item);
            foreach (T item in oldlist)
                if (newlist.Contains(item))
                    continue;
                else
                    removelist.Add(item);

            // Send the corrected event
            switch (e.Action)
            {
                case
NotifyCollectionChangedAction.Add:
                case
NotifyCollectionChangedAction.Move:
                case
NotifyCollectionChangedAction.Remove:
                case
NotifyCollectionChangedAction.Replace:
                    if (addlist.Count > 0)
                        _collectionchanged(this, new
NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Add, addlist));
                    if (replacelist.Count > 0)
                        _collectionchanged(this, new
NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Replace, replacelist));
                    if (removelist.Count > 0)
                        _collectionchanged(this, new
NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Remove, removelist));
                    break;
                case
NotifyCollectionChangedAction.Reset:
                    _collectionchanged(this, new
NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));
                    break;
            }
        }
    }

The enumerator starts from the first compliant element in the collection and each call to Next() makes the cursor move to the next valid filtered item.

    private
class
FilteredEnumerator : IEnumerator<T>, IEnumerator
    {
        private
FilteredObservableCollection<T> _filteredcollection;
        private
IEnumerator<T> _enumerator;

        public FilteredEnumerator(FilteredObservableCollection<T> filteredcollection, IEnumerator<T> enumerator)
        {
            _filteredcollection = filteredcollection;
            _enumerator = enumerator;
        }

        public T Current
        {
            get
            {
                if (_filteredcollection.Filter == null)
                    return _enumerator.Current;
                else
if (_filteredcollection.Filter(_enumerator.Current) == false)
                    throw
new
InvalidOperationException();
                else
                    return _enumerator.Current;
            }
        }

        public
void Dispose()
        {
            _enumerator.Dispose();
        }

        object
IEnumerator.Current
        {
            get { return
this.Current; }
        }

        public
bool MoveNext()
        {
            while (true)
            {
                if (_enumerator.MoveNext() == false)
                    return
false;
                if (_filteredcollection.Filter == null
                    || _filteredcollection.Filter(_enumerator.Current) == true)
                    return
true;
            }
        }

        public
void Reset()
        {
            _enumerator.Reset();
        }
    }
}

It's worked well so far but a lot remains to be done. I need to optimize the code to avoid for example having to calculate the Count at every call. I need to test all the possible collection manipulation and see if the CollectionChanged event is processed correctly. I need to implement the missing Move() method. I need to test multi-threading.

I've made the code available for download as part of a sample project that displays a list of integers and two subsets of multiples of 2 and of 3.

public
class
Data : DependencyObject
{
    public
static
readonly
DependencyProperty FullListProperty =
     DependencyProperty.Register("FullList", typeof(ObservableCollection<int>), typeof(Data));
    public
static
readonly
DependencyProperty List_2Property =
     DependencyProperty.Register("List_2", typeof(FilteredObservableCollection<int>), typeof(Data));
    public
static
readonly
DependencyProperty List_3Property =
     DependencyProperty.Register("List_3", typeof(FilteredObservableCollection<int>), typeof(Data));

    public
ObservableCollection<int> FullList
    {
        get { return (ObservableCollection<int>)GetValue(FullListProperty); }
        set { SetValue(FullListProperty, value); }
    }

    public
FilteredObservableCollection<int> List_2
    {
        get { return (FilteredObservableCollection<int>)GetValue(List_2Property); }
        set { SetValue(List_2Property, value); }
    }

    public
FilteredObservableCollection<int> List_3
    {
        get { return (FilteredObservableCollection<int>)GetValue(List_3Property); }
        set { SetValue(List_3Property, value); }
    }

    public Data()
    {
        FullList = new
ObservableCollection<int>();
        List_2 = new
FilteredObservableCollection<int>(FullList);
        List_3 = new
FilteredObservableCollection<int>(FullList);

        List_2.Filter = new
Predicate<int>(Filter_2);
        List_3.Filter = new
Predicate<int>(Filter_3);
    }

    private
bool Filter_2(int x) { return x % 2 == 0; }
    private
bool Filter_3(int x) { return x % 3 == 0; }
}

I've used a DependencyObject and DependencyProperties but it wasn't necessary to use the FilteredObservableCollection.

Download the project source code here: Download

Attached DependencyProperty

noreply@blogger.com (Marc Ridey) — Mon, 04 May 2009 12:19:00 +0000

In my previous blog on DependencyProperty, I talked about how to create properties in objects using DependencyProperty and DependencyObject, to have support for Databinding, defaults, expressions, events and validations.
But on some occasions, you want to assign a parent object needs to assign a property to the children objects, regardless of the type of object.

Traditionally, this has been done using base class and inheritance. For example, if you wanted to create a panel control that understands commands, you would need to create a base class 'CmdControl" something like this:

public
partial
class
CmdControl : UserControl
{
public CmdControl()
    {
        InitializeComponent();
    }

    private
string _cmd;

    public
string Cmd
    {
        get
        {
            return _cmd;
        }
        set
        {
            _cmd = value;
        }
    }
}

Then you would create all your controls derived from CmdControl, thus ensuring that each control has a Cmd property:

public
partial
class
MyControl : CmdControl
{
    public MyControl()
    {
        this.Cmd = "Do this";

        InitializeComponent();
    }
}

But this method did not allow the use of existing controls or classes.

With attached properties, a property can be set for each child control but the storage of the value is handled by the parent class.
Let's see how to declare the Grid control and the Cmd attached property:

public
partial
class
MyPanel : System.Windows.Controls.Grid
{
    public MyPanel()
    {
        InitializeComponent();
    }

    public
static
string GetCmd(DependencyObject obj)
    {
        return (string)obj.GetValue(CmdProperty);
    }

    public
static
void SetCmd(DependencyObject obj, string value)
    {
        obj.SetValue(CmdProperty, value);
    }

    public
static
readonly DependencyProperty CmdProperty =
        DependencyProperty.RegisterAttached("Cmd", typeof(string), typeof(MyPanel), new UIPropertyMetadata("Open"));
}

In XAML, the panel is used as per my previous blog:

<Window
x:Class="WPF2.Window1"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:AppCode="clr-namespace:WPF2"
    Title="WPF2"
Height="263"
Width="239"
    >
    <AppCode:MyPanel
x:Name="Panel1">
        <Button
Name="Button1"
Height="23"
Margin="50,0,50,0" >Button1</Button>
        <Button
Name="Button2"
Height="23"
Margin="50,50,50,0" >Button2</Button>
    </AppCode:MyPanel>
</Window>

You can then programmatically assign a command value to any child control:

public
partial
class
Window1 : System.Windows.Window
{
    public Window1()
    {
        InitializeComponent();

        MyPanel.SetCmd(Button1, "Open 1");
        MyPanel.SetCmd(Button2, "Close 1");

        Button1.Click += new
RoutedEventHandler(Button_Click);
        Button2.Click += new
RoutedEventHandler(Button_Click);
    }

    void Button_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("My Command is " + MyPanel.GetCmd(sender as
DependencyObject));
    }
}

Or you can do the same thing in XAML:

<Window
x:Class="WPF2.Window1"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:AppCode="clr-namespace:WPF2"
    Title="WPF2"
Height="263"
Width="239"
    >
    <AppCode:MyPanel
x:Name="Panel1">
        <Button
AppCode:MyPanel.Cmd="Open 1"
Click="Button_Click"
Height="23"
Margin="50,0,50,0" >Button1</Button>
        <Button
AppCode:MyPanel.Cmd="Close 1"
Click="Button_Click"
Height="23"
Margin="50,50,50,0" >Button2</Button>
    </AppCode:MyPanel>
</Window>

When you launch the application, and you click on either button, you get a message box with the text of the command assigned to that button.

More information on attached properties can be found here.

DependencyProperty and DependencyObject

noreply@blogger.com (Marc Ridey) — Mon, 04 May 2009 12:19:00 +0000

Up until now, you would create properties in a class using this syntax:

public
class
MyObject
{
    private
string MyPropertyValue;

    public
string MyProperty
    {
        set
        {
            MyPropertyValue = value;
        }
        get
        {
            return MyPropertyValue;
        }
    }
}

This is fine but then you have a lot of code to add to handle additional features such as PropertyChanged event, data binding, default value, validation.

DependencyObject and DependencyProperty provide a simpler way to implement properties and provide directly off the shelf:

DataBinding
Events
Validation
Default Value

As well as elements more specific to Windows Foundation and .NET 3.0:

Animation
Style
Attached properties
Expressions

So let's see how to use these new classes.
First we create a class similar to the one above:

public
class
Lift : DependencyObject
{
    public
static
DependencyProperty FloorProperty =
        DependencyProperty.Register("Floor", typeof(int), typeof(Lift));

    public
int Floor
    {
        get { return (int)GetValue(FloorProperty); }
        set { SetValue(FloorProperty, value); }
    }
}

I have a class Lift with a property called Floor. Already I can implement many of the WPF feature. The Lift class is ready for DataBinding, the Floor property will accept expressions to be set and can be used as part of another expression.
Let's look at this simple XAML code:

I created an instance of Lift in XAML and databound it to the StackPanel.

Still I rely on the user to set the Floor value to a correct value. Why not assign a default value:

public
static
DependencyProperty FloorProperty =
DependencyProperty.Register("Floor", typeof(int),typeof(Lift),new
PropertyMetadata(0));

By setting the default value in the metadata, I can now create an instance of the Lift class without specifying the value for Floor:

<AppCode:Lift
x:Key="Lift1" />

Now I'd like to display the kind of goods for sale on the floor of that building. I add a second property to my class called "Goods".

    public
static
DependencyProperty GoodsProperty =
        DependencyProperty.Register("Goods", typeof(string), typeof(Lift));

    public
string Goods
    {
        get { return (string)GetValue(GoodsProperty); }
        set { SetValue(GoodsProperty, value); }
    }

And I can use it directly in XAML:

    <AppCode:Lift
x:Key="Lift1"
Floor="1"
Goods="Perfumes" />
    …
    <TextBlock
Text="{Binding Path=Floor}" />
    <TextBlock
Text=": " />
    <TextBlock
Text="{Binding Path=Goods}" />

But I'd like set the goods value directly in my class according to the floor set. I can do that by handling the PropertyChanged event on the Floor property. I just expand a bit the property definition to get the Changed event:

        public
static
DependencyProperty FloorProperty =
            DependencyProperty.Register("Floor", typeof(int),typeof(Lift),new
PropertyMetadata(0,new
PropertyChangedCallback(OnFloorChanged));

        private
static
void OnFloorChanged(DependencyObject obj, DependencyPropertyChangedEventArgs arg)
        {
            Lift l = (Lift)obj;
            switch (l.Floor)
            {
                case 0:
                    l.Goods = "Books";
                    break;
                case 1:
                    l.Goods = "Perfumes";
                    break;
                case 2:
                    l.Goods = "Toys";
                    break;
                case 3:
                    l.Goods = "Kitchenware";
                    break;
            }
        }

So in XAML, it looks like:

    <AppCode:Lift
x:Key="Lift1"
Floor="1" />
    …
    <TextBlock
Text="{Binding Path=Floor}" />
    <TextBlock
Text=": " />
    <TextBlock
Text="{Binding Path=Goods}" />

I no longer have to supply the Goods value, it's set when the Floor value is modified.

Ok so we've looked at Databinding, Property Changed, Default value, now we need validation. My building doesn't have an infinite number of floors so I'd like to restrict the Floor value to between 0 and 3.

I can add validation by handling the Validate event:

    public
static
DependencyProperty FloorProperty =
        DependencyProperty.Register(("Floor", typeof(int),typeof(Lift),new
PropertyMetadata(0,new
PropertyChangedCallback(OnFloorChanged)),new
ValidateValueCallback(OnFloorValidate));

        private
static
bool OnFloorValidate(object obj)
        {
            return obj is
int && (int)obj >= 0 && (int)obj <= 3;
        }

This not only validates that the value is between 0 and 3 but also checks that the value is actually an integer. An exception is thrown if you try to set the property to an incorrect value.

The final class looks like:

    class
Lift : DependencyObject
    {
        public
static
DependencyProperty FloorProperty =
            DependencyProperty.Register(("Floor", typeof(int),typeof(Lift),new
PropertyMetadata(0,new
PropertyChangedCallback(OnFloorChanged)),new
ValidateValueCallback(OnFloorValidate));

        private
static
void OnFloorChanged(DependencyObject obj, DependencyPropertyChangedEventArgs arg)
        {
            Lift l = (Lift)obj;
            switch (l.Floor)
            {
                case 0:
                    l.Goods = "Books";
                    break;
                case 1:
                    l.Goods = "Perfumes";
                    break;
                case 2:
                    l.Goods = "Toys";
                    break;
                case 3:
                    l.Goods = "Kitchenware";
                    break;
            }
        }

        private
static
bool OnFloorValidate(object obj)
        {
            return obj is
int && (int)obj >= 0 && (int)obj <= 3;
        }

        public
int Floor
        {
            get { return (int)GetValue(FloorProperty); }
            set { SetValue(FloorProperty, value); }
        }

        public
static
DependencyProperty GoodsProperty =
        DependencyProperty.Register("Goods", typeof(string), typeof(Lift));

        public
string Goods
        {
            get { return (string)GetValue(GoodsProperty); }
            set { SetValue(GoodsProperty, value); }
        }
    }

And the XAML:

String and Custom Aggregations using CTE and Recursive Queries

noreply@blogger.com (Marc Ridey) — Mon, 04 May 2009 12:17:00 +0000

You'll all be familiar with normal aggregation.

For example I can get the number of subcategories per category in AdventureWorks:

SELECT c.Name,
COUNT(*)
as SubCategoryCount
FROM Production.ProductCategory c
JOIN Production.ProductSubCategory s
ON c.ProductCategoryID = s.ProductCategoryID
GROUP
BY c.Name

Which returns:

Name	SubCategoryCount
Accessories	12
Bikes	3
Clothing	8
Components	14

SQL 2005 supports 13 aggregation functions: AVG, CHECKSUM, CHECKSUM_AGG, COUNT, COUNT_BIG, GROUPING, MAX, MIN, SUM, STDEV, STDEVP, VAR and VARP but nothing to aggregate strings.
You can create custom CLR aggregation functions but on some occasions, a simple SQL recursive query may be able to do what you need.

Let's have a look first at a case that doesn't require recursive queries.
Let's create a comma delimited string of all the available categories.
The data comes from the Product.ProductCategory table:

select
*
from Production.ProductCategory

And returns

ProductCategoryID	Name	rowguid	ModifiedDate
1	Bikes	CFBDA25C-DF71-47A7-B81B-64EE161AA37C	1998-06-01 00:00:00.000
2	Components	C657828D-D808-4ABA-91A3-AF2CE02300E9	1998-06-01 00:00:00.000
3	Clothing	10A7C342-CA82-48D4-8A38-46A2EB089B74	1998-06-01 00:00:00.000
4	Accessories	2BE3BE36-D9A2-4EEE-B593-ED895D97C2A6	1998-06-01 00:00:00.000

To get the comma delimited list of Categories, we can use the COALESCE function and a string variable:

DECLARE @categories varchar(200)
SET @categories =
NULL

SELECT @categories =
COALESCE(@categories +
',','')
+
Name
FROM Production.ProductCategory

SELECT @categories

And returns, as expected a string "Accessories,Bikes,Clothing,Components"

But now, how would we return the recordset of categories with a second column containing the list of subcategories.

I can get the list of subcategories for a single category but not for each category using the COALESCE method.

This is where recursive queries help. First I need to number each subcategory within the category. I can do that using RANK and ROW_NUMBER functions.

SELECT

    c.Name as Category,

    s.Name as SubCategory,

ROW_NUMBER()
OVER(ORDER
BY c.Name,s.Name)
+ 1
        -
RANK()
OVER(ORDER
BY c.Name)
as SubCategoryNumber
FROM Production.ProductCategory c
JOIN Production.ProductSubCategory s
ON c.ProductCategoryID = s.ProductCategoryID

And now the recursive query where each loop of the query adds to the comma delimited string with the initial value equal to the first subcategory

WITH

SubCategories(Category, Subcategory, SubCategoryNumber)
AS
(

    SELECT

        c.Name as Category,

        s.Name as SubCategory,
        ROW_NUMBER()
OVER(ORDER
BY c.Name,s.Name)
+ 1
            -
RANK()
OVER(ORDER
BY c.Name)
as SubCategoryNumber
    FROM Production.ProductCategory c
    JOIN Production.ProductSubCategory s
    ON c.ProductCategoryID = s.ProductCategoryID ),

TempCategories(Category, Subcategories, SubCategoryNumber)
AS
(

    SELECT Category,
CAST(Subcategory as
varchar(max)), SubCategoryNumber
    FROM SubCategories
    WHERE SubCategoryNumber = 1

    UNION ALL

    SELECT TempCategories.Category,
CAST(TempCategories.SubCategories +
','
+ SubCategories.Subcategory as
varchar(max)), TempCategories.SubCategoryNumber + 1
    FROM TempCategories
    JOIN SubCategories
    ON TempCategories.Category = SubCategories.Category and TempCategories.SubCategoryNumber + 1 = SubCategories.SubCategoryNumber ),

MaxCategories(Category, SubCategoryNumber)
AS
(

    SELECT Category,
MAX(SubCategoryNumber)
AS SubCategoryNumber
    FROM SubCategories
    GROUP
BY Category ),

Categories (Category, Subcategories)
AS
(

    SELECT TempCategories.Category, TempCategories.Subcategories
    FROM TempCategories
    JOIN MaxCategories
    ON TempCategories.Category = MaxCategories.Category AND TempCategories.SubCategoryNumber = MaxCategories.SubCategoryNumber )

SELECT
*
FROM Categories

Which returns:

Category	Subcategories
Components	Bottom Brackets,Brakes,Chains,Cranksets,Derailleurs,Forks,Handlebars,Headsets,Mountain Frames,Pedals,Road Frames,Saddles,Touring Frames,Wheels
Clothing	Bib-Shorts,Caps,Gloves,Jerseys,Shorts,Socks,Tights,Vests
Bikes	Mountain Bikes,Road Bikes,Touring Bikes
Accessories	Bike Racks,Bike Stands,Bottles and Cages,Cleaners,Fenders,Helmets,Hydration Packs,Lights,Locks,Panniers,Pumps,Tires and Tubes

If we look at each query:

SubCategories, we've seen already, returns the full list of categories and subcategories with a subcategory number, string at 1, for each category.

TempCategories is the recursive query and adds at each level the previous subcategory list with the current subcategory, so the first subcategory contains itself, the second catains the first and itself, the third contains the first, the second and itself and so on. We then need to only keep the last record of each category that contains every subcategory.

MaxCategories contains the highest SubcategoryNumber for each category.

Categories joins TempCategories and MaxCategory to only retain the highest subcategory number per category. The result we need.

The aggregation operation defined in TempCategories (here adding the string together) could be replaced with any custom aggregation. It iteratively, in a known sequence, combines the previous calculated value with the new value for that row.