Build a Map Repository in SharePoint – Part 1
My seven year old son is a natural athlete. It doesn’t matter which sport. As long as his body is in motion, he has a beautific look on his face, unself-concious joy. He plays ice hockey three times a week, has a little league baseball game on Sunday mornings, plays kickball in the school yard everyday at lunch.
He has gone on an 18 mile bicycle ride with me to prepare for the next time I ride across the United States. “As soon as you can ride 50 miles with me in one day, I’ll take you on my next trip.” Little did I know when I made that promise how easy it’s going to be for him to reach that goal.
The latest challenge he wants to conquer is a marathon. Let’s say that again: I’ve got a 7 year old son who seriously wants to run a marathon. Not just run it, he wants to WIN it! When his grandfather was running the Boston Marathon two years ago, Orion was 5. He literally jumped on the course with his grandfather about 8 miles from the finish and had every intention of going all the way to the finish line until we pulled him off, much to his disappointment.
I told him we’ve got to build up to something like that. You just can’t step outside and run 26.2 miles without some kind of training. So this Wednesday morning, before school, I took him out for a three mile run. Honestly, I didn’t think he would be able to do it.
As soon as we hit the West Side Highway, he started talking. I mean really talking. It’s as if he doesn’t have a govenor between his brain and his mouth when his body is in motion. He sprinted ahead every chance he got, and when I’d catch up he’d say “I’ve been waiting for you for 10 minutes! You’re so slow.” At the turn around, right past the Ferry Terminal at Battery Park City, I thought he was going to give up. Nope, he just wanted to lope across the grassy area, making it a little easier on his legs.
We got back to the house at around 7:15am. Did I tell you he woke me up at 5:45am because he was so excited to go on the run? We went in and mapped out our run on Google maps. I was amazed and what we’d done… not 3 miles, but closer to 3.4 miles! Unbelievable. I really do believe this kid is going to run a marathon before he’s 12.
Because of his proven ability to cover the distance, Orion and I are going to run the Annual Father’s Day Race Against Prostate Cancer in Central Park on June 12th. As part of the training for that event, I am building a map respository in my SharePoint site to keep track of the routes and distances we are using as part of our training schedule.
I’ve used Google Maps for years to plot driving directions, but I’ve never thought of using it for running routes. I have an account at Runner’s World, but they’ve changed the interface and put premium services on it for the basics of logging in a workout. That left the door wide open for me to create my own alternative in SharePoint.
Begin Building the Route
First thing I had to do was figure out how to make Google work the way I wanted. I didn’t want to map street routes for driving. I wanted exact control over the entire route. I logged onto Google Maps, www.Google.com/maps and chose the Get Directions link.
Google has new interface icons, giving four choices for mapping: Driving, Public Transit, Walking and Bicycling. I choose the “Walking” icon to set the interface.
I typed in “New York City” as the intitial destination, zoomed in really close to my neighborhood, and dragged the destination icon onto the start of our run: West Side Highway (9A) at West 11th Street.
Set Destination Points in the Route
To set the first route marker, I zoomed out to get a higher level view , right mouse-clicked the turn at Stuyvesant High School and chose “Directions from here”. This placed a marker on the map and also told me that the route to that point was 1.2 miles. Sweet! Hopefully it won’t take me 23 minutes to get to that point, as I don’t intend on walking at a 20 minute per mile pace.
From there, I continued to right mouse-click and set destination points until I reached the turn-around point at the World Financial Center Plaza, right past the new Ferry Terminal. The turn-around point was set at 1.7 miles, meaning the out and back was a nice 3.4 miles, a little more than a 5K.
Save Your Work
A nice feature in the Google interface is the ability to save your maps as interactive objects to embed on your web pages. In the top, right corner of the map I clicked the “Link” icon, bringing up a dialog screen that offered me a link to paste into an email or IM, and some object code to paste into a web page.
The map you see below is what appears as a result of copying and pasting the code. It is interactive, so you can zoom in, zoom out and scroll through the entire thing.
View Larger Map
Summary
Now that we’ve got our route coordinates set and can embed them into a web page, it’s time to start work on the SharePoint Map Repository. My next article will step through the process of building a customized document library that will display my saved maps along with route information to help me choose which training route to run on my training days.
Suggestions or comments for columns in the repository?
- Build a Map Repository in SharePoint - Part 1
- Build a Map Repository in SharePoint - Part 2
- Build a Map Repository in SharePoint – Part 3
I used this same technique by creating a public map of the locations of our mobile mammography unit and embedding it to the site. Now when a patient calls the scheduling department, stating they live in Clarence, the scheduler can quickly see what location is closest to Clarence to schedule them at the next available time. Our schedulers love it, and patients are on the phone for half the time scheduling because they can instantly find a close location! Everyon thinks it is the coolest thing, mostly I was thrilled to finally find a reason to get to make a map!
http://www.gmap-pedometer.com/
I’ve been using that for running routes for ages and has the added benefits of being able to ignore roads if you run across parks or up hills.
How would we be able to go about using sharepoint list data to populate markers on a route? For example if Row 1 equals 25 and Row 2 equals 50, would we be able to mark 25 and 50 miles along a route? Would it be possible to highlight the marker and have it display the Title column?
I have no idea :-) Let me know how your experiments progress. — Mark
I believe this is the algorithm you’ll need to accomplish this. http://stackoverflow.com/questions/2698112/how-to-add-markers-on-google-maps-polylines-based-on-distance-along-the-line
I imagine once you have that sorted it out it would be another great way to use Marc’s SPServices library to grab the information from the SP list and map it out on the client.
This sounds like a fun experiment.
Ok Tom – I’ve got it working. I created a custom SharePoint list called MarkerList with a number column called Marker. I added a few values to it.
I took the code I posted in the link and modified it as follows:
1. Add references to Jquery and SPServices
2. Added the following code in the document.ready event:
markerArray = new Array();
var i = 0;
$(document).ready(function() {
$().SPServices({
operation: “GetListItems”,
async: false,
webURL: “http://sandbox”,
listName: “MarkerList”,
CAMLViewFields: “”,
completefunc: function (xData, Status) {
$(xData.responseXML).find(”[nodeName=z:row]“).each(function() {
markerArray[i] = $(this).attr(”ows_Marker”);
i++;
});
}
});
for (iCount=0;iCount<markerArray.length;iCount++)
{
nextPoint = moveAlongPath(points, parseInt(markerArray[iCount]));
if (nextPoint) {
// Draw the marker on the map.
map.addOverlay(new GMarker(nextPoint));
nextMarkerAt += parseInt(markerArray[iCount + 1]);
}
else {
// moveAlongPath returned null, so there are no more check points.
break;
}
}
3. Removed the author's call that was adding a marker every 1000 meters.
That is it. Another interesting use for SPServices
Tom,
Here’s how you can do it.
1. I create a SharePoint list called MarkerList with a column called Marker.
2. Add references to the jQuery and SPServices library.
3. Put the following code in the document.ready event and delete the original authors code where he sets the markers at 1000m intervals:
markerArray = new Array(); var i = 0; $(document).ready(function() { $().SPServices({ operation: "GetListItems", async: false, webURL: "http://sandbox", listName: "MarkerList", CAMLViewFields: "", completefunc: function (xData, Status) { $(xData.responseXML).find("[nodeName=z:row]").each(function() { markerArray[i] = $(this).attr("ows_Marker"); i++; }); } }); for (iCount=0;iCount<markerArray.length;iCount++) { nextPoint = moveAlongPath(points, parseInt(markerArray[iCount])); if (nextPoint) { // Draw the marker on the map. map.addOverlay(new GMarker(nextPoint)); nextMarkerAt += parseInt(markerArray[iCount + 1]); } else { // moveAlongPath returned null, so there are no more check points. break; } } });Actually looking at that code you could simplify it a bit by getting rid of the for loop and moving it into the loop in the completefunc function. You c ould then drop the array too.