SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Bing Map - placing multiple pins

    Hi!
    I have a Bing Map which I have created and it does everything I need it to do, if I am only needing it to display 1 pin on the map - which Im not.

    Just now I connect my Map to a database which pulls out the Longitude and Latitude, it then swaps the string in to the javascript i.e.

    Code:
    var loc = new Microsoft.Maps.Location(POINT_LATITUDE, POINT_LONGITUDE);
    it then places the pin on the map i.e.

    Code:
    pin.push(new Microsoft.Maps.Pushpin(loc));
    But what I need to do is read the database and store the information for each location, which will eventually display an information bubble as well.

    Here is the code I have just now which works for pulling out 1 location.

    Code:
     const string MAP_JAVASCRIPT = @"<script type=""text/javascript"">
           		
    
            function GetMap_NAMING_ID() {
    		
            //Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById('NAMING_ID'),
            {credentials:'My_Bing_Key',
            mapTypeId: Microsoft.Maps.MapTypeId.auto});
    		
                 
            // Get number of locations in the Location DB
            var locationCount = COUNTER_NUM;
            
     
                    
            // Create the locations
            var loc = new Microsoft.Maps.Location(POINT_LATITUDE, POINT_LONGITUDE);
            var loc2 = new Microsoft.Maps.Location(51.900223473309865,8.4759521484375);
            var loc3 = new Microsoft.Maps.Location(56.511017504952136,-6.92138671875);
            
            
    
            
    
            var pin = new Microsoft.Maps.EntityCollection();
            
            pin.push(new Microsoft.Maps.Pushpin(loc));
            pin.push(new Microsoft.Maps.Pushpin(loc2));
            pin.push(new Microsoft.Maps.Pushpin(loc3));
            
    
    
            map.entities.push(pin);
    
                  
    		}
     $(function() { GetMap_NAMING_ID();});
    		
    		</script>";
    Code:
     foreach (var item in myCollection)
                {
    
                Counter++;
                
    
                string Scounter = Convert.ToString(Counter);
    
                
    
                script = MAP_JAVASCRIPT.Replace("NAMING_ID", BingMapPanel1.ClientID);
                
                script = script.Replace("DASHBOARD_SIZE", DashboardSize);
                
                Latitude = item.GetValue("crtLatitude").ToString();
                script = script.Replace("POINT_LATITUDE", Latitude);
               
                Longitude = item.GetValue("crtLongitude").ToString();
                script = script.Replace("POINT_LONGITUDE", Longitude);
                
                script = script.Replace("ZOOM_LEVEL", Zoom);
    
                Location = item.GetValue("Title").ToString();
                script = script.Replace("POINT_TITLE", Location);
    
                script = script.Replace("POINT_ADDRESS", Street);
                script = script.Replace("POINT_CITY", City);
                script = script.Replace("POINT_STATE", State);
                script = script.Replace("POINT_ZIPCODE", Zipcode);
                script = script.Replace("COUNTER_NUM", Scounter);
    
            }
    
                // only register global bing map script once
               
                
                if (!Page.IsClientScriptBlockRegistered("Bing.Map.Script"))
                    Page.ClientScript.RegisterClientScriptInclude("Bing.Map.Script", "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0");
    
                // render this widgets map script
                Page.ClientScript.RegisterStartupScript(typeof(BingLocationMap), BingMapPanel1.ClientID, script, false);
    For the code above, I've hard coded the 2 extra locations but ideally I would want to have something like var loc[i] = new Microsoft.Map.Location(Lat,Long); so that I could populate it with as many or as few locations as I want.


    I think I need to do a foreach loop within the javascript but Im not 100% how to go about this, do I need an arraylist?

    Im using ASP.net, C# and Javascript.

    Can anyone help or point me in the right direction.

    Thanks
    Failure happens, its what you learn from it that is important!

  2. #2
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm another step forward. I found this website: http://www.hybridplanet.co.in/2012/0...s-in-bing.html which is doing what I want to do, but its hardcoding the latitude and longitude in to the code.

    If anyone can suggest how I go about populating the array via MyCollection items then that would be great!
    Failure happens, its what you learn from it that is important!

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    What you want to show?? just single pin or multiple pin.??

    in my code i used hardcoding. if you want to pass the lat-lon value from database. then you have declare global variable in javascript like this:

    <script type="text/javascript">

    var lat = new Array();
    var lon = new Array();

    function AddLocationsInArray(lattitude,longitude)
    {
    lat[i] = lattitude;
    lon[z] = longitude;
    }

    </script>


    call "AddLocationsInArray(lattitude,longitude)" through C# code behind LOOP:
    your lat-lon value will be come from database.

    FOR(loop start) {

    this.Page.ClientScript.RegisterStartupScript(this.GetType(), "AddLocationsInArray","AddLocationsInArray("<-- YOUR LAT VALUE --->","<-- YOUR LON VALUE --->");", true);

    }


    in my hybridplanet page just modify the AddLocations() function

    with this one

    function AddLocations()
    {
    var i;
    var z;

    //Calculate the total pins in the array


    var TotalPins = lat.length;


    //Now add multiple pushpins and infobox on the map

    for (i = 0; i < TotalPins; i++) {
    for(z=0;z<=i;z++){

    AddPushPins(lat[i], lon[i], "My Title", "This is infobox!");

    }
    }

    }




    I didnt tested the codes but i think this way will work...

    Ashish
    (Administrator - www.hybridplanet.co.in )


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •