VE Team's profileVirtual Earth / Live Map...PhotosBlogListsMore ![]() | Help |
|
March 05 The 10 Minute MapLast week I posted a top 10 list of unknown features in Live Maps. At number 1 was the ability to drop a dynamic map with a custom data layer on your website in just a few minutes. Extra cool in that you can make real-time updates to the data layer by simply editing your Collection at Live maps, which then become visible to all of your web visitors. The 10 minute map. Your final masterpiece will work in 2d and 3d right in your web browser. You won't need to know what AJAX is. You won't need to fire up an IDE or write any code (although you'll modify one line of my code). you won't mash anything up. But 10 minutes from now you'll have your own custom web mapping application with your own personalized data layer that 12 years ago cost 5 figures and 5 weeks. Why is this significant? I was thinking over the weekend how far the technology behind online digital maps has come over the last dozen years. My first foray into web mapping was with a product called Proserver from MapInfo. It was expensive (50k bucks!) and relatively difficult to use (you had to learn a proprietary programming language, configure a dedicated server, promise to buy the weird IT guy a beer for poking a hole in his firewall...) and yet after all that it was still cool as hell! but that coolness was out of the reach of most people. Things are a lot different today - using the Virtual Earth SDK for instance, I can do things in hours that used to take months and I can do it for free. Very powerful, but you still need to write code and create data. We're going to go a step better and get a pretty powerful map online without encountering any scary code. here we go... 1. Create Your Collection. What do you need to show on your map? Is it all of the Curling clubs in the US? Kennebunk Savings Banks? London Universities? Houses for Sale? A tour of Sarajevo? You can build a Collection of Locations representing anything you want. If you aren't familiar with how to create a Collection, here is a simple tutorial I wrote last year. You can add new items to a collection at any time, make edits, remove items, add photos, etc... If you don't want to create a Collection right now, you can just use one of the ones I linked to earlier in this step. At the end of the day, all you need in order to move on to the next step is the unique Identifier for your Collection which is known as the CID (Collection ID). you can see your CID by emailing yourself a permalink on the 'Share' menu. a permalink will look something like this: http://local.live.com/?cid=250F429081C5ABBB!614&style=r in this case the unique CID is 250F429081C5ABBB!614 You will use the CID in the next step to customize your map. 2. Create a Web page to display your Collection. The easiest way to do this is to simply copy an existing web page that displays a Collection. Here is a simple page that displays a Collection of attractions in Dublin: http://www.veteam.members.winisp.net/10MinuteMap/10MinuteMapPt1.htm In your web browser, use the View --> Source menu item to display the HTML of the page. Scroll down to line 23 which looks like this: veLayerSpec.LayerSource = "EE8A32C733F8E28D!601"; //Dublin Tour Substitute your Collection ID in there. Save your modified web page on your local PC and give it a friendly name like MyCollectionMap.html You can pretty up the HTML as much or as little as you like to match the look n feel of your website. 3. View your Web page! Open the file you saved in step 2 in your web browser. You should see something like this, but with your Collection displayed. You can upload this file to your webserver and your custom map is visible to the world. Further edits you make to the Collection at Live maps are immediately visible - no need to ever edit your web page. 4. Further customization. You can stop here, or invest a few minutes in customizing your web page. If you want to change the size of the map, scroll down to the end of the file and adjust the height and width settings on this line: <div id="mymapdiv" STYLE="HEIGHT: 600px; WIDTH: 800px; OVERFLOW: hidden; POSITION:relative; border: 1px solid;"> 6. Displaying the Content of your Collection on the web page. As a more advanced step, you may want to show a list of the items from your collection on the web page like this: http://www.veteam.members.winisp.net/10MinuteMap/10MinuteMapPt2.htm If so, view the source of this page and insert your CID in there, just as you did in step 2 If you create a Collection map and publish it to the web, post your URL here in comments. Comments (55)
VE Team
has turned off comments on this page.
Trackbacks (1)The trackback URL for this entry is: http://virtualearth.spaces.live.com/blog/cns!2BBC66E99FDCDB98!8240.trak Weblogs that reference this entry
|
|
|