[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

AJAX Bing Maps Control - Adding pushpins from a database

Posted on 2010-11-24
4
Medium Priority
?
2,949 Views
Last Modified: 2013-03-18
I would like to implement the new AJAX Bing Maps control on our site but I need it to add pushpins from the geocodes located in the database.  I have the attached Javascript code that adds a pin on the client side but I'm not sure that's the most efficient way to do it.  The control is pretty new, so documentation is fairly scant, but this can't be that hard to do.  Hoping someone else has come across this.  Our site is on the .NET 3.5 framework using VB.NET

Thanks in advance,

N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/* Define a style used for infoboxes */
.infobox 
{
 position: absolute;
 border: solid 2px black;
 background-color: White;
 z-index: 1000;
}
</style>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;

function GetMap() {
// Create a new map
map = new Microsoft.Maps.Map(
 document.getElementById("mapDiv"),
 {
  credentials: "AqiytoFcEw3KsI0eSD_vhEhC7x1djyOWcJhPiTeSxuu85fhnPUc3jU-TJRkZ_Db8",
  center: new Microsoft.Maps.Location(35.227396, -80.842257),
  mapTypeId: Microsoft.Maps.MapTypeId.road,
  zoom: 10
 });

// Define first pin
var pin = new Microsoft.Maps.Pushpin(
 new Microsoft.Maps.Location(52.6, 1.26), {
 text: '1 pushpin text here!'
});

// Attach event handlers
Microsoft.Maps.Events.addHandler(pin, 'mouseover', SetInfoBox);
Microsoft.Maps.Events.addHandler(pin, 'mouseout', RemoveInfoBox);

// Add this pushpin to the map
map.entities.push(pin);

// Create an infobox for a pushpin
function SetInfoBox(e) 
{
// Calculate the pixel position of this pushpin relative to the map control
var pointLocation = map.tryLocationToPixel(
  e.target.getLocation(),
  Microsoft.Maps.PixelReference.control
  );
  
// Create a new div
var infodiv = document.createElement("div");
infodiv.id = "infodiv";
infodiv.className = "infobox";

// Place the infobox at the correct pixel coordinates
infodiv.style.left = pointLocation.x;
infodiv.style.top = pointLocation.y;
infodiv.innerHTML =
  "The text of this pushpin is <strong>" + e.target.getText() + "</strong><br/>" +
  "The pushpin is located at <strong>" + e.target.getLocation() + "</strong><br/>";
  
// Add the infobox div as a child to the map
var mapdiv = document.getElementById('mapDiv');
mapdiv.appendChild(infodiv);
}

// Remove the infobox for a pushpin
function RemoveInfoBox(e) {
var mapdiv = document.getElementById('mapDiv');
var infodiv = document.getElementById('infodiv');
if (infodiv != null) { mapdiv.removeChild(infodiv); }
} 
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:640px; height:480px;"></div>    
</body>
</html>

Open in new window

0
Comment
Question by:stretch73
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 2

Accepted Solution

by:
earthware earned 2000 total points
ID: 34205215
the best way I find of doing this is the following

1) create a wcf service (that returns your data as a simple collection of data transfer objects), with json enabled (see here for an example http://dotnetslackers.com/articles/ajax/JSON-EnabledWCFServicesInASPNET35.aspx)
2) handle the response from the service in your javascript and loop through the collection of points it returns, using the code you already have to individually create and load points

I find this method the best way of doing it because:

1) JSON data is especially small (even better if you enable IIS gzip compression) compared to pre-generating the required javascript code client side and delivery to the server
2) The approach feels much more like how you would normally consume data from a webservice
3) It makes it really simple to dynamically reload data (for example as the map moves) making your solution much simpler to add new features in future
4) You actually map page then ends up not really needing any server side code as its all done in client side javascript, making it easier to debug as the code is in one place
5) you can use the same approach in any server side technology (even PHP webservices http://phpmsajax.codeplex.com)


0
 

Author Comment

by:stretch73
ID: 34205432
earthware,

Thanks for the response.  I read the page from that link and while it looks like an effective solution it's a bit involved for me as I don't have any WCF experience.  We're only talking about 200 locations for our site so really what I need help with is the communication between .NET and the Javascript.  Not trying to sound ungrateful here, just don't want to reinvent out data transfer wheel while trying to implement this control.  
0
 
LVL 29

Expert Comment

by:Kumaraswamy R
ID: 34399044
This question has been classified as abandoned and is being closed as part of the Cleanup Program.  See my comment at the end of the question for more details.
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…
Please read the paragraph below before following the instructions in the video — there are important caveats in the paragraph that I did not mention in the video. If your PaperPort 12 or PaperPort 14 is failing to start, or crashing, or hanging, …
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question