none
Setting a location from server side code

    Question

  • Good afternoon,

    I am attempting to load a BING map into an asp .net C# user control with a location retrieved from a database query, which i then want to change based on the user selecting other grid items with (sometimes) different locations. 

    Alas, all I can see is the default Sydney map, unless i hard code the lat and long in the javascript on the page. I can use registerscript to create the initial map (which works) but cannot then change it to a new location. Any help greatly appreciated as I thought this would be quite simple...

    Current code is:

    (on page load if not postback)

    ScriptManager.RegisterStartupScript(this, this.GetType(), "SetView", "window.onload = function() {SetView(" + dt.Rows[0]["Latitude"].ToString() + "," + dt.Rows[0]["Longitude"].ToString() + ");};", true);

    ascx

     <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>

    <script  type='text/javascript'>
    var map = null;
        function GetMap (){
             map = new Microsoft.Maps.Map('#myMap', {
                credentials: [mykey],
                mapTypeId: Microsoft.Maps.MapTypeId.aerial
            });


        }
        function SetView (lat, long){
         var loc = new Microsoft.Maps.Location(lat, long);
            map.setView({ center: loc, zoom: 16 });
            TextBox1.Text = "hello";
        };
    </script>
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </div>
    <div id="myMap" style=";width:600px;height:400px;"></div>

    I put the text box in to see if that was populating, but even it was not which sort of suggests it is the call.

    Friday, December 08, 2017 2:50 AM

Answers

  • The TextBox1 code in SetView won't work. This is JavaScript code, you have to do document.getElementById('TextBox1').value = 'hello';

    Here is a version of your code that works for me:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        public void Page_Load(Object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "SetView", "window.onload = function() {SetView(47.6159, -122.1884)};", true);
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> 
        <script  type='text/javascript'>
        var map = null;
            function GetMap (){
                 map = new Microsoft.Maps.Map('#myMap', {
                    credentials: 'Your Bing Maps Key',
                    mapTypeId: Microsoft.Maps.MapTypeId.aerial
                });
            }
            function SetView (lat, long){
             var loc = new Microsoft.Maps.Location(lat, long);
                map.setView({ center: loc, zoom: 16 });
                document.getElementById('TextBox1').value = 'hello';
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
          <div id="myMap" style=";width:600px;height:400px;"></div>
        </form>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Friday, December 08, 2017 7:37 PM
    Owner

All replies

  • The TextBox1 code in SetView won't work. This is JavaScript code, you have to do document.getElementById('TextBox1').value = 'hello';

    Here is a version of your code that works for me:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        public void Page_Load(Object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "SetView", "window.onload = function() {SetView(47.6159, -122.1884)};", true);
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> 
        <script  type='text/javascript'>
        var map = null;
            function GetMap (){
                 map = new Microsoft.Maps.Map('#myMap', {
                    credentials: 'Your Bing Maps Key',
                    mapTypeId: Microsoft.Maps.MapTypeId.aerial
                });
            }
            function SetView (lat, long){
             var loc = new Microsoft.Maps.Location(lat, long);
                map.setView({ center: loc, zoom: 16 });
                document.getElementById('TextBox1').value = 'hello';
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
          <div id="myMap" style=";width:600px;height:400px;"></div>
        </form>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Friday, December 08, 2017 7:37 PM
    Owner
  • Thank you - it is working now, although still pops up the default map before changing - most likely it is the order of the scripts so I plan to build the whole thing from server code. The map is on the 4th tab of a page so i only want it to populate when properly called.
    Saturday, December 09, 2017 6:05 AM
  • Just a tip, if you are going to use server side code, be user that you load in your scripts using AJAX and not post backs. Post backs will result in your page making unnecessary reloads which will be slow and will also result in your site loading the map several times per user visit which will be expensive. 

    [Blog] [twitter] [LinkedIn]

    Monday, December 11, 2017 5:59 PM
    Owner