VE Team's profileVirtual Earth / Live Map...PhotosBlogListsMore Tools Help

Blog


    March 05

    The 10 Minute Map

    Last 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)

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.
    VE Team has turned off comments on this page.
    July 15
    July 15
    July 15
    July 15
    July 15
    July 15
    June 30
    June 30
    June 30
    June 30
    June 30
    No namewrote:
    <a href="http://www.usome.com/" rel=nofollow><b>游商贸</b></a> <a href="http://site.usome.com/" rel=nofollow><b>网址</b></a> <a href="http://news.usome.com/" rel=nofollow><b>新闻</b></a> <a href="http://blog.usome.com/" rel=nofollow><b>博客</b></a> <a href="http://bbs.usome.com/" rel=nofollow><b>论坛</b></a> <a href="http://image.usome.com/" rel=nofollow><b>图片</b></a>
    June 20
    Picture of Anonymous
    (名前なし) wrote:
    バリエステのルーツはインド5千年の歴史を誇る世界三大医学のひとつ伝承療法「
    アーユルベーダー」 を源流とした伝承美容健康法、ヨーロッパのマッサージ技法です。リラクゼーション効果も高いので、内面からの治癒力を高め、精神の鎮静と共にさまざまなトラブルを癒します。まつげエクステ地まつげ1本に1本のまつげエクステをつけると、超自然なまつげが思いのままにアレンジできます。エクステの長さやボリュームも客様一人一人の希望を叶える事が出来、汗や水にも強いのでプールや海・ウェディングにも最適です。
    June 16
    May 9
    May 8
    Picture of Anonymous
    Apr. 28
    Picture of Anonymous
    Apr. 25
    Picture of Anonymous
    no name wrote:
    化粧品 通販「毎日使うスキンケアで自然治癒力を引き出せないか」・・・。アンチエイジングにもっとも効果ある成分は何なのか・・・。 そしてついに、化粧品業界に30年以上従事して美のメカニズムを追求し、全世界の機能性化粧品の窓口でもある研究家に出会いました。どんな肌の状態でも皮膚再生を可能にするノウハウと、不要物だけを確実に取り除くことを可能にする。「何の助けも受けず、どんな苛酷な環境下でも絶滅せずに生き抜く『シルククモ』の生命力の驚くべき秘密」韓国の朴(パク)博士開発の“アラザイム”を含め、あらゆる角度から見つめられた機能する化粧品作り『強くなった肌だけが皮膚のメカニズムを正常に保つ事が出来る』・・・の考え方に共感し、リュースパンドゥルスキンケアシリーズが開発され、完成いたしました。リュースパンドゥルスキンケアシリーズの目的は『凛とした強い肌』、本来の美しい肌作りが目的です。
    Apr. 23
    Apr. 23
    Apr. 22

    Trackbacks (1)

    The trackback URL for this entry is:
    http://virtualearth.spaces.live.com/blog/cns!2BBC66E99FDCDB98!8240.trak
    Weblogs that reference this entry