Finalizing the Virtual Earth web part
I promised you all I'd be back with the JavaScript to finish the Virtual Earth web part. It took me a little bit longer because a colleague of mine had a great suggestion actually. He wondered if the map could maintain state on post back AND if he could then use this state values to filter lists. In that way he could filter a list of locations simply by dragging around the Virtual Earth map control. That sounded like a great feature to me so, I decided to implement this feature.
The problem is however that all this has become pretty big and complicated. Explaining all this is not really interesting and would be a very long read. I promised you guys the source code however so I feel I have to do something.
So I decided to give you guys a brief overview of how it all fits together AND the complete source code in case you would like to really investigate how it all works.
Hidden Fields
The only way for me to maintain state is through hidden fields. So we had to register no less than 4 hidden fields on the page. These 4 hidden fields maintain the the minimum longitude, the maximum longitude, the minimum latitude, and the maximum latitude. With these four values I restore the virtual earth map control by calling SetMapView
if (restorePosition) { var savedView = map.GetSavedPosition();
if (savedView != null) { map.SetMapView(savedView);
}
}
Initiate Postback
Saving these values isn’t that hard because you can attach an event with the Virtual Earth API but how to initiate a postback? We need a postback reference and some sort of trigger to call this function. I finished with a timer that get’s reset on every change and triggers after a given amount of time.
VEMap.prototype.ClearPostBackTimeout = function() { if (this.postBackTimeout) { clearTimeout(this.postBackTimeout);
}
}
VEMap.prototype.SetPostBackTimeout = function() { this.ClearPostBackTimeout();
this.postBackTimeout = setTimeout(this.postBackEventReference, this.autoPostBackTimeout);
}
SharePoint Designer
To use the values of our Virtual Earth control we need to get to SharePoint Designer and add parameters to our DataFormWebPart:
And then use these parameters in our filter criteria:
Do remember we filter our dataview web part with the values from our Virtual Earth web part. Unfortunately the dataview web part does not implement the ITableProvider interface or we could actually get the locations to display on the Virtual Earth webpart from our list. That would be extremely nice… maybe I will think of something to solve this.
The download
The download contains all the source files you need. And a WSP ready to be installed right away. Notice that you’ll need to have two features. The jQuery feature and the Virtual Earth feature. The Virtual Earth feature has a dependency on the jQuery feature.
DISCLAIMER: The download is as is. There’s no warranty what so ever and if you prefer to use it, you do so at your own risk. You should look at this code as en example of how things could be done and not necessarily how things should be done.
Conclusion
I do hope you all like this motion10 Virtual Earth feature and that it will serve your needs. If you have any questions, like to submit improvements or get in contact with me, please feel free to add a comment. You can also contact me by clicking the Live Messenger button in the left sidebar of this page.
Cheers,
Wes