I put together a little Atlas demo application that shows how Northwind customer data can be easily displayed with autocomplete help and Virtual Earth map integration. As a particular customer or group of customers is selected by country the Virtual Earth
map will pan to the country. A nice visual effect especially given that I only had to write around 3-4 lines of JavaScript (not including the Web Service code that locates Longitude and Latitude of course). The code for the app can be found here:
While I'm pretty happy with the app overall, I couldn't find a way to dynamically add pushpins to the map using JavaScript. I looked into the appropriate Virtual Earth Javascript file supplied with Atlas and don't see a method like addPushpin() (although I
do see _addPushpin()). Anyone know how to handle dynamic pushpins? I'm guessing that there's a way and I just didn't try it yet.
Very nice demo, Dan! Thanks for that!
This is the first downloadable Atlas demo that really works.
Some notes:
- be sure to set your regional settings to English (US), because Atlas returns errors on regional settings that use a comma as decimal symbol (like Dutch).
- I changed the code for the GetCountries webservices a bit, so it really uses the 'prefixText' parameter.
The map supports 2 kind of pushpins: databound and non-databound. In that matter, it is pretty close to the ListBox control in ASP.NET 2.0: You can add items "statically", and you can still databind it and the dataitems can be appended (so it doesn't replace
your statically added items). This is what the map can do as well.
You can databind the map like you can databind the listview. The map has properties like DataLatitudeField and DataLongitudeField (which default to "Latitude" and "Longitude" respectively). This means you could add an atlas DataSource control to your page
and add a binding between this datasource and the map. The code could look like this:
Please note that static pushpins can have bindings too (which you can use to bind data to this pushpin, which can be used in the popup):
<atlas:VirtualEarthMap Runat="server" ...>
<Pushpins>
<atlas:Pushpin Latitude="..." Longitude="..." PushpinImageUrl="...">
<Bindings>
<atlas:Binding DataContext="someContext" Property="data" />
</Bindings>
</atlas:Pushpin>
</Pushpins>
<Popup>
<atlas:Label Runat="server">
<Bindings>
<atlas:Binding DataPath="CustomerName" Property="text" />
</Bindings>
</atlas:Label>
</Popup>
</atlas:VirtualEarthMap>
If you want to programmatically add pushpins, you should create a Pushpin object and add that to the pushpins property of the map, like so:
var myPushpin = new Web.UI.Pushpin();
myPushpin......
var pushpins = myMap.get_pushpins();
pushpins.add(myPushpin); <- when we add the pushpin to the map, the pushpin will be parented to (and know about) the map
myPushpin.initialize(); <- We need to initialize _after_ adding it to the map. This initialize function takes care of actually adding the pushpin to the map (visually).
Please let me know if you have any questions, or can't get this working. I could help you to get you up to speed.
Update: by the way, this is a cool example that you have made. You could even do it all declaratively :). For example, you could return customer data (with latitude/longitude), and bind that to a ListView AND the map. Additionally, you could add a "navigate
to" button to the listview, and add an action to the button which invokes the "panTo" method on the map. You could then click on this button and the map will center the pushpin of that customer :).
Good stuff Wilco...and thanks for sharing your pushpin idea. I'll give that a shot. I updated my blog with a reference to yours so people could get a look at doing things in a more declarative manner.
Please make sure that if you run into any issues with the map, that you try my modified version of AtlasUIMap.js which fixes some bugs in the current Atlas release.
I have tried to setup the Atlas demo application but I get a Javascript error which I have tracked down to be related to commas in float values. I guess that is what you mean in your post related to regional settings..
Now my questtion goes: How do I change the regional settings? Web.config? or in the code?
Notice that your demo isn't working all the way in FireFox. Problem is that you use a javascript var named 'long', which is a reserved word in FireFox (and should also be in IE :)
dwahlin
Participant
1499 Points
18 Posts
ASPInsiders
MVP
Atlas Demo Application and help with PushPins
Oct 05, 2005 08:25 PM|LINK
http://www.xmlforasp.net/CodeSection.aspx?csID=116
While I'm pretty happy with the app overall, I couldn't find a way to dynamically add pushpins to the map using JavaScript. I looked into the appropriate Virtual Earth Javascript file supplied with Atlas and don't see a method like addPushpin() (although I do see _addPushpin()). Anyone know how to handle dynamic pushpins? I'm guessing that there's a way and I just didn't try it yet.
Dr.NETjes
Member
355 Points
71 Posts
Re: Atlas Demo Application and help with PushPins
Oct 06, 2005 06:16 PM|LINK
Very nice demo, Dan! Thanks for that!
This is the first downloadable Atlas demo that really works.
Some notes:
- be sure to set your regional settings to English (US), because Atlas returns errors on regional settings that use a comma as decimal symbol (like Dutch).
- I changed the code for the GetCountries webservices a bit, so it really uses the 'prefixText' parameter.
WilcoB
Participant
1454 Points
290 Posts
Re: Atlas Demo Application and help with PushPins
Oct 06, 2005 06:40 PM|LINK
You can databind the map like you can databind the listview. The map has properties like DataLatitudeField and DataLongitudeField (which default to "Latitude" and "Longitude" respectively). This means you could add an atlas DataSource control to your page and add a binding between this datasource and the map. The code could look like this:
<atlas:DataSource id="customerData" runat="server" serviceURL="Customers.asmx" />
<atlas:VirtualEarthMap Runat='server" ....>
<Bindings>
<atlas:Binding DataContext="customerData" DataPath="data" Property="data" />
</Bindings>
</atlas:VirtualEarthMap>
Your webservice should return something IEnumerable, where each "row" has a property "Latitude" and "Longitude".
Additionally, you can statically add pushpins too:
<atlas:VirtualEarthMap Runat="server" ...>
<Pushpins>
<atlas:Pushpin Latitude="..." Longitude="..." PushpinImageUrl="..." />
</Pushpins>
</atlas:VirtualEarthMap>
Please note that static pushpins can have bindings too (which you can use to bind data to this pushpin, which can be used in the popup):
<atlas:VirtualEarthMap Runat="server" ...>
<Pushpins>
<atlas:Pushpin Latitude="..." Longitude="..." PushpinImageUrl="...">
<Bindings>
<atlas:Binding DataContext="someContext" Property="data" />
</Bindings>
</atlas:Pushpin>
</Pushpins>
<Popup>
<atlas:Label Runat="server">
<Bindings>
<atlas:Binding DataPath="CustomerName" Property="text" />
</Bindings>
</atlas:Label>
</Popup>
</atlas:VirtualEarthMap>
If you want to programmatically add pushpins, you should create a Pushpin object and add that to the pushpins property of the map, like so:
var myPushpin = new Web.UI.Pushpin();
myPushpin......
var pushpins = myMap.get_pushpins();
pushpins.add(myPushpin); <- when we add the pushpin to the map, the pushpin will be parented to (and know about) the map
myPushpin.initialize(); <- We need to initialize _after_ adding it to the map. This initialize function takes care of actually adding the pushpin to the map (visually).
Please let me know if you have any questions, or can't get this working. I could help you to get you up to speed.
Update: by the way, this is a cool example that you have made. You could even do it all declaratively :). For example, you could return customer data (with latitude/longitude), and bind that to a ListView AND the map. Additionally, you could add a "navigate to" button to the listview, and add an action to the button which invokes the "panTo" method on the map. You could then click on this button and the map will center the pushpin of that customer :).
WilcoB
Participant
1454 Points
290 Posts
Re: Atlas Demo Application and help with PushPins
Oct 06, 2005 09:59 PM|LINK
dwahlin
Participant
1499 Points
18 Posts
ASPInsiders
MVP
Re: Atlas Demo Application and help with PushPins
Oct 06, 2005 10:33 PM|LINK
http://weblogs.asp.net/dwahlin/archive/2005/10/06/426833.aspx
WilcoB
Participant
1454 Points
290 Posts
Re: Atlas Demo Application and help with PushPins
Oct 06, 2005 11:06 PM|LINK
Please make sure that if you run into any issues with the map, that you try my modified version of AtlasUIMap.js which fixes some bugs in the current Atlas release.
andersmunk
Member
10 Points
3 Posts
Re: Atlas Demo Application and help with PushPins
Oct 10, 2005 07:22 AM|LINK
I have tried to setup the Atlas demo application but I get a Javascript error which I have tracked down to be related to commas in float values. I guess that is what you mean in your post related to regional settings..
Now my questtion goes: How do I change the regional settings? Web.config? or in the code?
Regards
Anders
WilcoB
Participant
1454 Points
290 Posts
Re: Atlas Demo Application and help with PushPins
Oct 10, 2005 01:27 PM|LINK
andersmunk
Member
10 Points
3 Posts
Sv.: Re: Atlas Demo Application and help with PushPins
Oct 10, 2005 07:38 PM|LINK
Thanks. Just what I needed.
/Anders
Dr.NETjes
Member
355 Points
71 Posts
Re: Atlas Demo Application and help with PushPins
Oct 20, 2005 06:04 PM|LINK
Notice that your demo isn't working all the way in FireFox. Problem is that you use a javascript var named 'long', which is a reserved word in FireFox (and should also be in IE :)
--Dion