How do I apply basic authentication to a Google Maps API getTileUrl request in Javascript?

Viewed 198

Really hope somebody can help here as I've been trying loads of stuff to get this working...

When I call my external tileserver, it requires basic authentication, but there appears to be no way to add this.

We are using the latest production version of Google Maps API.

I call up the tile as follows:

                  chartMapLayer = new google.maps.ImageMapType({
                        getTileUrl: function (coord, zoom) {
                            var tileCoords = xyzToBounds(coord.x, coord.y, zoom).join(",");
                            return (ChartURL + '/?' +
                                'SERVICE=WMS' +
                                '&<params go here.....>' +
                                '&BBOX=' + tileCoords);
                        },
                        maxZoom: 17,
                        minZoom: 0,
                        name: "CHARTWORLD",
                        isPng: true,
                        tileSize: new google.maps.Size(256, 256)
                    }); 

If I use the same code to call a server set up with no basic authentication, it works fine. When I call the server we need to, I receive 401 (Unauthorized) errors.

I have tried setting up an XMLHttpRequest override to append the header to all outgoing requests. Worked for everything EXCEPT the map tile request....

I also tried setting up a proxy page...this approach did actually work, but the requests were being served synchronously, so each tile load was taking about quarter of a second. And there were 16 of them, so it was a really poor user experience.

If anybody knows a way to add authentication to Google Maps API tile requests I'd really appreciate it.

EDIT:

My question above was closed due to needing more debugging data or specific requirements, etc. I am honestly not sure what extra information I need to put.

The WMS server I am using requires basic auth to be provided in the header and, as per the comments, does not accept query parameters.

I have created a proxy and this does work, but takes about 5-6 seconds to draw a full page of tiles on the map, compared to almost instantaneous when done without a proxy using a test server from the same provider without the authentication requirements.

I have tried this with an ashx and an aspx page. My current code uses the aspx page. It is called from the javascript within the getTileUrl function as below:

return ('Charts.aspx?p=' + ChartURL + '/?' +
                                'SERVICE=WMS' +
                                '¬VERSION=1.3.0' +
                                '¬REQUEST=GetMap' +
                                '¬FORMAT=image%2Fpng' +
                                '¬CSVALUE=10,5,20,10,1,2,1,500000,100000,200000,1' +
                                '¬CSBOOL=183' +
                                '¬TRANSPARENT=false' +
                                '¬LAYERS=ENC' +
                                '¬CRS=EPSG%3A3857' +
                                '¬STYLES=' +
                                '¬WIDTH=256' +
                                '¬HEIGHT=256' +
                                '¬OBJECTFILTERNEGATION=TRUE' +
                                '¬BBOX=' + tileCoords);

The code behind of the page this calls is as follows:

using System;
using System.IO;
using System.Net.Http;
using System.Web;


public partial class Pages_User_Charts : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string Parameters = Request.QueryString["p"];
        string ChartAuth = "";

        if (HttpContext.Current.Session["chartAuth"] != null)
            ChartAuth = HttpContext.Current.Session["chartAuth"].ToString();

        if (ChartAuth.Length > 0 && Parameters.Length > 0)
        {
            string url = String.Format(Parameters.Replace("¬", "&")); 
            System.Net.WebClient wc = new System.Net.WebClient();
            wc.Headers.Add("ContentType", "application/json");
            wc.Headers.Add("Authorization", "Basic " + ChartAuth);
            byte[] data = wc.DownloadData(url);
            Response.ContentType = "image/png";
            Response.OutputStream.Write(data, 0, data.Length);
            Response.OutputStream.Flush();
            Response.End();
        }
    }
}

For the sake of moderators and/or others who have marked down and/or closed off this question, I have spent three days investigating, testing, and searching the internet for solutions and ideas to resolve this problem before opening this question here. If more details are needed please comment to let me know or email me...I am asking a genuine question and need help. I am not lazy and expecting others to magically fix my problem, I just need some suggestions.

0 Answers
Related