none
Silverlight Bing Maps Control integration with Lightswitch - two way databinding, drag map pins to update location data in LS grid (human verified locations) RRS feed

  • Question

  • Hi LightSwitch Enthusiasts, this is my first post. To start, I am thrilled with the technology that Microsoft has released in 2010. LightSwitch is poised to be my favorite. Odd that LightSwitch is not mentioned on the front page of Silverlight.net. I stumbled across this product a few days ago. I would hate to see its rapid adoption and development hindered from lack of exposure. Enough chit chat, on to the post…

    I watched the great Beth Massi How Do I Videos, the Hands-On-Lab lab on creating “LightSwitch Control Extensions” (Custom Bing Map Control), plus several great posts by Michael Washington and Johannes Kebeck. Now I am stuck. Most of my mapping programming has been using JavaScript (and now jQuery) as this has been the language of the Web 2.0 Ajax Maps.

    There is a huge gap between jQuery and C# or VB, so converts to Silverlight Mapping may need some help that .NET developers find obvious.

    The question of this post is: How do you set up two way data binding between the LightSwitch Data Screens and the Bing Map?

    Here is the scenario. If you follow Johannes Kebeck post “Switch on the Light - Bing Maps and LightSwitch” you will end up with a very nice app that places an orange pin on a map as the selection in a list changes. Awesome!

    1)    But, what happens if the pin is not exactly where you want? Can I drag the pin to the correct location and save the new Lat/Long/Zoom to the database? Then change the pin color to reflect that it has been verified as accurate by a human. For example red pins are computer guessed, yellow are moved and awaiting confirmation and green pins are verified accurate. (like a traffic lights colors) Or can I edit the values of the Lat/Long/Zoom in the text boxes?

    2)    What happens if you want to multi-select items in the list and see multiple pins? Several pins could appear on the map and the corresponding text details could dynamically create tabs above the map. Picking a pin or tab, sets the focus on the other.

    3)    The last issue from the demo is sizing of the layout containers. Web maps have issues filling up the containers that hold them when they are percent values in fluid layouts. We need a bit more control over the layout and nesting of containers and any subsequent scroll bars. I prefer fluid layouts where the map changes size.

    To conclude, both LightSwitch and the Silverlight Map Control are amazing products. I would like to see them play very happily together. I am also testing out SharePoint 2010 and Azure, so if any of you are interested, send me a message and I will send you the link to the test sites. Or, I live five minutes from an Alpine Ski Resort in the Rocky Mountains, so you can drop in this winter and talk shop.

    Cheers James

     

    Thursday, October 28, 2010 3:30 PM

Answers

  • Hi James,

    Did you download the training kit from at the following location:

    http://www.microsoft.com/downloads/en/details.aspx?FamilyID=ac1d8eb5-ac8e-45d5-b1e3-efb8e4e3ebd1&displaylang=en

    This has the sample code to the Bing Map control and how to work with it.

    Now, I will try and answer the 3 points you have posted above.

    1)    But, what happens if the pin is not exactly where you want? Can I drag the pin to the correct location and save the new Lat/Long/Zoom to the database? Then change the pin color to reflect that it has been verified as accurate by a human. For example red pins are computer guessed, yellow are moved and awaiting confirmation and green pins are verified accurate. (like a traffic lights colors) Or can I edit the values of the Lat/Long/Zoom in the text boxes?

        

         Humm, I am not sure about this, it seems specific to the Bing Map control. You create a few fields in the model (entity), like "Location (unverified)" and "Location (Verified)", if you want to verifiy it later. Or you could do some logic in your extension code that allows the event to happen and the final location (human verified) could be the address that is stored?

    2)    What happens if you want to multi-select items in the list and see multiple pins? Several pins could appear on the map and the corresponding text details could dynamically create tabs above the map. Picking a pin or tab, sets the focus on the other.

        This is in the extension code it self @ Bing.xaml.cs

                 private void NavigationToAddress(string address)
            {
                // Remove all push pins on the map
                this.BingMapControl.Children.Clear();

         So instead of clearing the pins, they could get all added and then based on a pin click event you could set focus to the data you want to present.

    3)    The last issue from the demo is sizing of the layout containers. Web maps have issues filling up the containers that hold them when they are percent values in fluid layouts. We need a bit more control over the layout and nesting of containers and any subsequent scroll bars. I prefer fluid layouts where the map changes size.

         This can be done a couple of ways, when placing the bing map control in the screen, use the stack controls to allow how you want to place child controls in the IDE (design time). The other way is in the extension itself, in the Bing.xaml file, which you place the ContentSizingControl (runtime action) around it.


    Program Manager - Microsoft Visual Studio LightSwitch - Extensibility
    Wednesday, November 10, 2010 12:36 AM
    Moderator

All replies

  • Hello again, there has been a lot of views on my post above, but no comments. I am not sure why. Even some simple comments on the basics of communications between extensions and "native" LightSwitch code, would be appreciated.

     

    Cheers James


    James Swansburg NiceSite.ca
    Saturday, October 30, 2010 2:53 PM
  • Hi James,

    Did you download the training kit from at the following location:

    http://www.microsoft.com/downloads/en/details.aspx?FamilyID=ac1d8eb5-ac8e-45d5-b1e3-efb8e4e3ebd1&displaylang=en

    This has the sample code to the Bing Map control and how to work with it.

    Now, I will try and answer the 3 points you have posted above.

    1)    But, what happens if the pin is not exactly where you want? Can I drag the pin to the correct location and save the new Lat/Long/Zoom to the database? Then change the pin color to reflect that it has been verified as accurate by a human. For example red pins are computer guessed, yellow are moved and awaiting confirmation and green pins are verified accurate. (like a traffic lights colors) Or can I edit the values of the Lat/Long/Zoom in the text boxes?

        

         Humm, I am not sure about this, it seems specific to the Bing Map control. You create a few fields in the model (entity), like "Location (unverified)" and "Location (Verified)", if you want to verifiy it later. Or you could do some logic in your extension code that allows the event to happen and the final location (human verified) could be the address that is stored?

    2)    What happens if you want to multi-select items in the list and see multiple pins? Several pins could appear on the map and the corresponding text details could dynamically create tabs above the map. Picking a pin or tab, sets the focus on the other.

        This is in the extension code it self @ Bing.xaml.cs

                 private void NavigationToAddress(string address)
            {
                // Remove all push pins on the map
                this.BingMapControl.Children.Clear();

         So instead of clearing the pins, they could get all added and then based on a pin click event you could set focus to the data you want to present.

    3)    The last issue from the demo is sizing of the layout containers. Web maps have issues filling up the containers that hold them when they are percent values in fluid layouts. We need a bit more control over the layout and nesting of containers and any subsequent scroll bars. I prefer fluid layouts where the map changes size.

         This can be done a couple of ways, when placing the bing map control in the screen, use the stack controls to allow how you want to place child controls in the IDE (design time). The other way is in the extension itself, in the Bing.xaml file, which you place the ContentSizingControl (runtime action) around it.


    Program Manager - Microsoft Visual Studio LightSwitch - Extensibility
    Wednesday, November 10, 2010 12:36 AM
    Moderator
  • Hi Campbell - what version of the Bing Maps SDK works with the training kit example.  

    I have installed Bing Maps SDK 1.0.1.0.   It appears that the training kit example code is design for a previous/different Bing Map Control version?

    Where can I find a C# Lightswitch Bing Map example that works with the current SDK 1.0.1.0 version?

    Thanks,

    Tony

    Friday, August 5, 2011 2:29 PM
  • I have not used the Bing maps control yet myself so of course you want to just refer to Campbell Gunn's response.

    I just wanted to point out one thing I have come to the conclusion on after spending days trying to find the easiest way to implement the Telerik RadEditor in LightSwitch (I did find what I was looking for because you can do the whole tutorial in about 15 minutes) :

    Use a .xaml control and place the Silverlight control you want to use on that .xaml page. The reason is that, if you don't you have to write 5-15 lines of code to wire up the bindings and to raise events. If you instead use declarative binding, you do not have to write any code in LightSwitch at all. This makes things easier to debug and keep track of in the long run.

    So my answer to your 3 questions, when you use the MVVM pattern with Lightswitch, LightSwitch can do anything that a normal Silverlight application can do.

     


    Make Them Ask: That's a LightSwitch App?

    http://LightSwitchHelpWebsite.com

    Sunday, August 7, 2011 5:17 PM
  • I have similar questions on what happens if you want to see multiple pins? (Question 2) I have no problem to show single address but what if I like to show all my sales order locations in a single map. Is there any way I can send mutiple addresses to Bing Map extention?

    And secondly I like to know if there is any way to calculate the distance of all those pins from some specefic location like our store os so.

    Thanks,

    Ray 

    Wednesday, August 10, 2011 7:14 PM
  • I have a similar request. I have the Bing Map Control working in my Lightswitch application per the Labs and the tutorial I found on the Internet. I want to be able to "raise" a click on the control in Lightswitch to create a new record based on the address of the click. Is there anyone who could point me in the direction of how to modify the XAML, if that is what it takes. Or can I just intercept a click on the custom control in the Lightswitch environment? Any help greatly appreciated.
    Thursday, November 3, 2011 12:49 AM
  • I have a similar request. I have the Bing Map Control working in my Lightswitch application per the Labs and the tutorial I found on the Internet. I want to be able to "raise" a click on the control in Lightswitch to create a new record based on the address of the click. Is there anyone who could point me in the direction of how to modify the XAML, if that is what it takes. Or can I just intercept a click on the custom control in the Lightswitch environment? Any help greatly appreciated.


    see:

    Two Ways To Call LightSwitch From a Custom Silverlight Control

    Using Microsoft Expression Blend To Call A Method (No Code Behind)

    This Is How LightSwitch Does MVVM


    Make Them Ask: That's a LightSwitch App?

    http://LightSwitchHelpWebsite.com

    Thursday, November 3, 2011 2:20 AM
  • Well, this is a pretty old post, but I tried the custom Bing Map Control tutorial that Beth Massi had put out. I'm using VS 2013 and get errors creating the service reference. Not sure where to turn after this.

    Any help will be nice....

    Thanks...

    Friday, February 27, 2015 7:18 AM