ThinkGeo.com    |     Documentation    |     Premium Support

Feature location on Bing/Google Maps moves after zooming in and out or panning around map

Hi ThinkGeo Team,

Our team found that we can zoom in and out to different levels and the location of the feature changes. We found that the issue occurred on several of the Bing map styles. Also we found that it did not do this issue on all the Google Map Types; only “Hybrid” and “Satellite”. In addition we found that sometimes even moving around the map caused the feature to move We are currently using Version 10 of ThinkGeo and more specifically version ThinkGeo.MapSuite.11.0.0-beta041 of MapSuite.

Here is a screen record of Bing Maps: https://www.screencast.com/t/qnhRAfW2f

Here is a screen record of Google Maps by a team member: https://www.screencast.com/t/htHHsgj2

Here is the code below.

Default.aspx

<%@ Page Title=“Home Page” Language=“C#” MasterPageFile="~/Site.Master" AutoEventWireup=“true” CodeBehind=“Default.aspx.cs” Inherits=“Test._Default” %>

<%@ Register Assembly=“ThinkGeo.MapSuite.WebForms” Namespace=“ThinkGeo.MapSuite.WebForms” TagPrefix=“cc1” %>

<asp:Content ID=“BodyContent” ContentPlaceHolderID=“MainContent” runat=“server”>

var OnMapCreating = function (map) {
OpenLayers.Feature.Vector.style = {
‘default’: {
fillColor: “blue”,
fillOpacity: 0.4,
hoverFillColor: “white”,
hoverFillOpacity: 0.8,
strokeColor: “#ee9900”,
strokeOpacity: 1,
strokeWidth: 1,
strokeLinecap: “round”,
strokeDashstyle: “solid”,
hoverStrokeColor: “red”,
hoverStrokeOpacity: 1,
hoverStrokeWidth: 0.2,
pointRadius: 6,
hoverPointRadius: 1,
hoverPointUnit: “%”,
pointerEvents: “visiblePainted”,
cursor: “inherit”
},
‘select’: {
fillColor: “green”,
fillOpacity: 0.4,
hoverFillColor: “white”,
hoverFillOpacity: 0.8,
strokeColor: “blue”,
strokeOpacity: 1,
strokeWidth: 2,
strokeLinecap: “round”,
strokeDashstyle: “solid”,
hoverStrokeColor: “red”,
hoverStrokeOpacity: 1,
hoverStrokeWidth: 0.2,
pointRadius: 6,
hoverPointRadius: 1,
hoverPointUnit: “%”,
pointerEvents: “visiblePainted”,
cursor: “pointer”
}
};
}

</script>    
<div>
    <cc1:Map ID="Map1" runat="server" Height="600px" Width="800px"></cc1:Map>
</div>

<%-- <asp:Button ID=“Button” runat=“server” OnClick=“Button_Click” Text=“Add Layer”/>–%>

</asp:Content>

Default.aspx.cs

using System;
using ThinkGeo.MapSuite.WebForms;
using ThinkGeo.MapSuite.Drawing;
using ThinkGeo.MapSuite.Layers;
using ThinkGeo.MapSuite.Shapes;
using ThinkGeo.MapSuite.Styles;
using ThinkGeo.MapSuite.Serialize;
using ThinkGeo.MapSuite;
using System.IO;
using System.Drawing;
using System.Web;
using System.Web.UI;

namespace Test
{
public partial class _Default : System.Web.UI.Page
{

    protected void Page_Init(object sender, System.EventArgs e)
    {
    }
     protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            if (!Page.IsPostBack)
            {
                Map1.MapBackground = new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"));
                Map1.CurrentExtent = new RectangleShape(-10779959, 3909739, -10777699, 3908399);
                Map1.MapUnit = GeographyUnit.Meter;
                Map1.MapTools.OverlaySwitcher.Enabled = true;
                Map1.MapTools.MouseCoordinate.Enabled = true;
                ////Adds the Google Map as an overlay
                //GoogleOverlay google = new GoogleOverlay("Google Map");
                //google.GoogleMapType = GoogleMapType.Normal;
                //Map1.CustomOverlays.Add(google);
                string applicationID = "Your key";
                BingMapsOverlay mobjBingsOverlay = new BingMapsOverlay("BING", applicationID);
                mobjBingsOverlay.MapStyle = BingMapsStyle.Road;
                mobjBingsOverlay.Name = "BING";
                Map1.CustomOverlays.Add(mobjBingsOverlay);
                //Creates polygon feature to be added to the EditOverlay
                PolygonShape polygonShape = new PolygonShape();
                RingShape ringShape = new RingShape();
                ringShape.Vertices.Add(new Vertex(-10778968, 3909448));
                ringShape.Vertices.Add(new Vertex(-10778686, 3909443));
                ringShape.Vertices.Add(new Vertex(-10778691, 3909180));
                ringShape.Vertices.Add(new Vertex(-10778982, 3909175));
                ringShape.Vertices.Add(new Vertex(-10778968, 3909448));
                polygonShape.OuterRing = ringShape;
                Feature editFeature = new Feature(polygonShape);
                Map1.EditOverlay.Features.Add(editFeature);
                //Sets the properties so that the features can be only draggable.
                //Notice that we don't set the style here. We set the style in javascript in TestForm.aspx under the script tag.
                Map1.EditOverlay.TrackMode = TrackMode.Edit;
                Map1.EditOverlay.EditSettings.IsDraggable = true;
                Map1.EditOverlay.EditSettings.IsReshapable = false;
                Map1.EditOverlay.EditSettings.IsResizable = false;
                Map1.EditOverlay.EditSettings.IsRotatable = false;
            }
            //if (!IsPostBack)
            //{
            //    // Set the Map Unit. The reason for setting it to DecimalDegrees is that is what the shapefile’s unit of measure is inherently in.
            //    Map1.MapUnit = GeographyUnit.DecimalDegree;
            //    LayerOverlay layerOverlay = new LayerOverlay();
            //    InMemoryFeatureLayer imf = new InMemoryFeatureLayer();
            //    imf.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
            //    imf.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
            //    imf.InternalFeatures.Add(new Feature(new RectangleShape(-100, 50, -80, 30)));
            //    layerOverlay.Layers.Add(imf);   
            //    Map1.CustomOverlays.Add(layerOverlay);
            //    FeatureOverlay featureOverlay = Map1.HighlightOverlay;
            //    //Adds the States Shapefile
            //    ShapeFileFeatureLayer shapeFileLayer = new ShapeFileFeatureLayer(MapPath(@"App_Data\states.shp"), MapPath(@"App_Data\states.idx"), GeoFileReadWriteMode.Read, System.Text.Encoding.Default);
            //    ZoomLevel objZoom = shapeFileLayer.ZoomLevelSet.ZoomLevel01;
            //    objZoom.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
            //    AreaStyle objStyle = default(AreaStyle);
            //    objStyle = new AreaStyle(new GeoSolidBrush(GeoColor.FromArgb(100, GeoColor.StandardColors.DarkBlue)));
            //    objZoom.CustomStyles.Add(objStyle);
            //    objZoom.CustomStyles.Add(GetHaloLabelRender(6.5F, "FULLNAME", GeoColor.StandardColors.DarkBlue));
            //    //-- Add layer to map
            //    shapeFileLayer.ZoomLevelSet.CustomZoomLevels.Add(objZoom);
            //    layerOverlay.Layers.Add(shapeFileLayer);
            //    //Adds a FeatureOverlay Point that represents the Highlight Overlay
            //    PointShape objPoint = new PointShape(-100, 45);
            //    GeoColor objPointColor = new GeoColor(255, 0, 0);
            //    PointStyle objPointStyle = new PointStyle((PointSymbolType)0, new GeoSolidBrush(objPointColor), 6);
            //    Feature pointmap = new Feature(objPoint);
            //    featureOverlay.Features.Add(pointmap);
            //    Map1.CurrentExtent = new RectangleShape(-178.215027, 71.406647, -66.969849, 18.924782);
            //    Session.Remove("layerOverlay");
            //    Session.Add("layerOverlay", layerOverlay);
            //    Session.Remove("featureOverlay");
            //    Session.Add("featureOverlay", featureOverlay);
            //}
        }
        catch (Exception ex)
        {
        }
    }
    private TextStyle GetHaloLabelRender(float FontWidth, string strRenderField, GeoColor TextColor, bool blnOnTop = false)
    {
        if (blnOnTop == true)
        {
            return TextStyles.CreateSimpleTextStyle(strRenderField, "Arial", FontWidth, DrawingFontStyles.Bold, TextColor, GeoColor.StandardColors.White, 3, 10, 10);
        }
        else
        {
            return TextStyles.CreateSimpleTextStyle(strRenderField, "Arial", FontWidth, DrawingFontStyles.Bold, TextColor, GeoColor.StandardColors.White, 3, -10, -10);
        }
    }
    //The process is to build a bitmap
    protected void Button_Click(object sender, EventArgs e)
    {
        Bitmap objBitMap = null;
        try
        {
            objBitMap = new Bitmap((int)Map1.WidthInPixels, (int)Map1.HeightInPixels);
            PlatformGeoCanvas objGeoCanvas = new PlatformGeoCanvas();
            objGeoCanvas.BeginDrawing(objBitMap, Map1.CurrentExtent, Map1.MapUnit);
            System.Collections.ObjectModel.Collection<SimpleCandidate> colLayers = new System.Collections.ObjectModel.Collection<SimpleCandidate>();
            BackgroundLayer objBackground = new BackgroundLayer(new GeoSolidBrush(GeoColor.SimpleColors.White));
            BingMapsLayer objBingLayer = new BingMapsLayer("YOUR KEY HERE", ThinkGeo.MapSuite.Layers.BingMapsMapType.Road);
            objBingLayer.Open();
            //Issue Happens HERE
            objBingLayer.Draw(objGeoCanvas, colLayers);
            objBingLayer.Close();
            for (int i = 0; i <= Map1.CustomOverlays.Count - 1; i++)
            {
                if (Map1.CustomOverlays[i].GetType() != typeof(BingMapsOverlay))
                {
                    Layer objTemp; 
                    LayerOverlay objOverlay = (LayerOverlay)Map1.CustomOverlays[i];
                    foreach (Layer objLayer in objOverlay.Layers)
                    {
                        if (objLayer.IsVisible == true)
                        {
                            objTemp = objLayer;
                            objLayer.Open();
                            objLayer.Draw(objGeoCanvas, colLayers); 
                            objLayer.Close();
                        }
                    }
                }
            }
            objGeoCanvas.EndDrawing();
            string strFilePath = Request.PhysicalApplicationPath + "App_Data";
            SaveGISMapToImage(objBitMap, strFilePath);
        }
        catch (Exception ex)
        {
            //Put a Stop Here
            string errorMessage = ex.Message;
        }
    }
    public void SaveGISMapToImage(Bitmap objImage, String strMapPath)
    {
        string strError = "";
        string strFullPath = "";
        try
        {
            strFullPath = strMapPath;
            //Exit if they cancel
            if (strFullPath.Length == 0)
                return;
            string strFileName = "";
            bool blnFinished = true;
            string strFormat = "";
            try
            {
                strFileName = "GIS.bmp";
                objImage.Save(strFullPath + strFileName);
                System.Diagnostics.Process.Start(strFullPath + strFileName);
                System.Web.HttpResponse response = System.Web.HttpContext.Current.Response;
                response.ClearContent();
                response.Clear();
                response.ContentType = "text/plain";
                response.AddHeader("Content-Disposition", "attachment; filename=" + strFileName + ";");
                response.TransmitFile(strFullPath + strFileName);
                response.Flush();
                File.Delete(strFullPath + strFileName);
                System.Web.HttpContext.Current.ApplicationInstance.CompleteRequest();
            }
            catch (Exception ex)
            {
                blnFinished = false;
                strError = ex.Message;
            }
        }
        catch (Exception ex)
        {
        }
    }
}

}

Is there anything we are missing?

Thank you,

Neil

Looks to have cut off my code quotes. Here they are again.

Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test._Default" %>

<%@ Register Assembly="ThinkGeo.MapSuite.WebForms" Namespace="ThinkGeo.MapSuite.WebForms" TagPrefix="cc1" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        var OnMapCreating = function (map) {
            OpenLayers.Feature.Vector.style = {
                'default': {
                    fillColor: "blue",
                    fillOpacity: 0.4,
                    hoverFillColor: "white",
                    hoverFillOpacity: 0.8,
                    strokeColor: "#ee9900",
                    strokeOpacity: 1,
                    strokeWidth: 1,
                    strokeLinecap: "round",
                    strokeDashstyle: "solid",
                    hoverStrokeColor: "red",
                    hoverStrokeOpacity: 1,
                    hoverStrokeWidth: 0.2,
                    pointRadius: 6,
                    hoverPointRadius: 1,
                    hoverPointUnit: "%",
                    pointerEvents: "visiblePainted",
                    cursor: "inherit"
                },
                'select': {
                    fillColor: "green",
                    fillOpacity: 0.4,
                    hoverFillColor: "white",
                    hoverFillOpacity: 0.8,
                    strokeColor: "blue",
                    strokeOpacity: 1,
                    strokeWidth: 2,
                    strokeLinecap: "round",
                    strokeDashstyle: "solid",
                    hoverStrokeColor: "red",
                    hoverStrokeOpacity: 1,
                    hoverStrokeWidth: 0.2,
                    pointRadius: 6,
                    hoverPointRadius: 1,
                    hoverPointUnit: "%",
                    pointerEvents: "visiblePainted",
                    cursor: "pointer"
                }
            };
        }

    </script>    

    <div>
        <cc1:Map ID="Map1" runat="server" Height="600px" Width="800px"></cc1:Map>
    </div>

<%--    <asp:Button ID="Button" runat="server" OnClick="Button_Click" Text="Add Layer"/>--%>
    
</asp:Content>

Default.aspx.cs

using System;
using ThinkGeo.MapSuite.WebForms;
using ThinkGeo.MapSuite.Drawing;
using ThinkGeo.MapSuite.Layers;
using ThinkGeo.MapSuite.Shapes;
using ThinkGeo.MapSuite.Styles;
using ThinkGeo.MapSuite.Serialize;
using ThinkGeo.MapSuite;
using System.IO;
using System.Drawing;
using System.Web;
using System.Web.UI;

namespace Test
{
    public partial class _Default : System.Web.UI.Page
    {

        protected void Page_Init(object sender, System.EventArgs e)
        {

        }

         protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                if (!Page.IsPostBack)
                {
                    Map1.MapBackground = new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"));
                    Map1.CurrentExtent = new RectangleShape(-10779959, 3909739, -10777699, 3908399);
                    Map1.MapUnit = GeographyUnit.Meter;

                    Map1.MapTools.OverlaySwitcher.Enabled = true;
                    Map1.MapTools.MouseCoordinate.Enabled = true;

                    ////Adds the Google Map as an overlay
                    //GoogleOverlay google = new GoogleOverlay("Google Map");
                    //google.GoogleMapType = GoogleMapType.Normal;
                    //Map1.CustomOverlays.Add(google);

                    string applicationID = "Your key";
                    BingMapsOverlay mobjBingsOverlay = new BingMapsOverlay("BING", applicationID);
                    mobjBingsOverlay.MapStyle = BingMapsStyle.Road;
                    mobjBingsOverlay.Name = "BING";
                    Map1.CustomOverlays.Add(mobjBingsOverlay);

                    //Creates polygon feature to be added to the EditOverlay
                    PolygonShape polygonShape = new PolygonShape();
                    RingShape ringShape = new RingShape();
                    ringShape.Vertices.Add(new Vertex(-10778968, 3909448));
                    ringShape.Vertices.Add(new Vertex(-10778686, 3909443));
                    ringShape.Vertices.Add(new Vertex(-10778691, 3909180));
                    ringShape.Vertices.Add(new Vertex(-10778982, 3909175));
                    ringShape.Vertices.Add(new Vertex(-10778968, 3909448));
                    polygonShape.OuterRing = ringShape;

                    Feature editFeature = new Feature(polygonShape);
                    Map1.EditOverlay.Features.Add(editFeature);

                    //Sets the properties so that the features can be only draggable.
                    //Notice that we don't set the style here. We set the style in javascript in TestForm.aspx under the script tag.
                    Map1.EditOverlay.TrackMode = TrackMode.Edit;
                    Map1.EditOverlay.EditSettings.IsDraggable = true;
                    Map1.EditOverlay.EditSettings.IsReshapable = false;
                    Map1.EditOverlay.EditSettings.IsResizable = false;
                    Map1.EditOverlay.EditSettings.IsRotatable = false;
                }
                //if (!IsPostBack)
                //{
                //    // Set the Map Unit. The reason for setting it to DecimalDegrees is that is what the shapefile’s unit of measure is inherently in.
                //    Map1.MapUnit = GeographyUnit.DecimalDegree;

                //    LayerOverlay layerOverlay = new LayerOverlay();

                //    InMemoryFeatureLayer imf = new InMemoryFeatureLayer();
                //    imf.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
                //    imf.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
                //    imf.InternalFeatures.Add(new Feature(new RectangleShape(-100, 50, -80, 30)));
                //    layerOverlay.Layers.Add(imf);   
                //    Map1.CustomOverlays.Add(layerOverlay);

                //    FeatureOverlay featureOverlay = Map1.HighlightOverlay;

                //    //Adds the States Shapefile
                //    ShapeFileFeatureLayer shapeFileLayer = new ShapeFileFeatureLayer(MapPath(@"App_Data\states.shp"), MapPath(@"App_Data\states.idx"), GeoFileReadWriteMode.Read, System.Text.Encoding.Default);
                //    ZoomLevel objZoom = shapeFileLayer.ZoomLevelSet.ZoomLevel01;
                //    objZoom.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
                //    AreaStyle objStyle = default(AreaStyle);
                //    objStyle = new AreaStyle(new GeoSolidBrush(GeoColor.FromArgb(100, GeoColor.StandardColors.DarkBlue)));
                //    objZoom.CustomStyles.Add(objStyle);
                //    objZoom.CustomStyles.Add(GetHaloLabelRender(6.5F, "FULLNAME", GeoColor.StandardColors.DarkBlue));
                //    //-- Add layer to map
                //    shapeFileLayer.ZoomLevelSet.CustomZoomLevels.Add(objZoom);

                //    layerOverlay.Layers.Add(shapeFileLayer);

                //    //Adds a FeatureOverlay Point that represents the Highlight Overlay
                //    PointShape objPoint = new PointShape(-100, 45);
                //    GeoColor objPointColor = new GeoColor(255, 0, 0);
                //    PointStyle objPointStyle = new PointStyle((PointSymbolType)0, new GeoSolidBrush(objPointColor), 6);
                //    Feature pointmap = new Feature(objPoint);
                //    featureOverlay.Features.Add(pointmap);


                //    Map1.CurrentExtent = new RectangleShape(-178.215027, 71.406647, -66.969849, 18.924782);

                //    Session.Remove("layerOverlay");
                //    Session.Add("layerOverlay", layerOverlay);
                //    Session.Remove("featureOverlay");
                //    Session.Add("featureOverlay", featureOverlay);
                //}
            }
            catch (Exception ex)
            {

            }
        }

        private TextStyle GetHaloLabelRender(float FontWidth, string strRenderField, GeoColor TextColor, bool blnOnTop = false)
        {
            if (blnOnTop == true)
            {
                return TextStyles.CreateSimpleTextStyle(strRenderField, "Arial", FontWidth, DrawingFontStyles.Bold, TextColor, GeoColor.StandardColors.White, 3, 10, 10);
            }
            else
            {
                return TextStyles.CreateSimpleTextStyle(strRenderField, "Arial", FontWidth, DrawingFontStyles.Bold, TextColor, GeoColor.StandardColors.White, 3, -10, -10);
            }
        }

        //The process is to build a bitmap
        protected void Button_Click(object sender, EventArgs e)
        {
            Bitmap objBitMap = null;
            try
            {
                objBitMap = new Bitmap((int)Map1.WidthInPixels, (int)Map1.HeightInPixels);

                PlatformGeoCanvas objGeoCanvas = new PlatformGeoCanvas();
                objGeoCanvas.BeginDrawing(objBitMap, Map1.CurrentExtent, Map1.MapUnit);

                System.Collections.ObjectModel.Collection<SimpleCandidate> colLayers = new System.Collections.ObjectModel.Collection<SimpleCandidate>();

                BackgroundLayer objBackground = new BackgroundLayer(new GeoSolidBrush(GeoColor.SimpleColors.White));

                BingMapsLayer objBingLayer = new BingMapsLayer("YOUR KEY HERE", ThinkGeo.MapSuite.Layers.BingMapsMapType.Road);

                objBingLayer.Open();
                //Issue Happens HERE
                objBingLayer.Draw(objGeoCanvas, colLayers);
                objBingLayer.Close();

                for (int i = 0; i <= Map1.CustomOverlays.Count - 1; i++)
                {
                    if (Map1.CustomOverlays[i].GetType() != typeof(BingMapsOverlay))
                    {
                        Layer objTemp; 
                        LayerOverlay objOverlay = (LayerOverlay)Map1.CustomOverlays[i];
                        foreach (Layer objLayer in objOverlay.Layers)
                        {
                            if (objLayer.IsVisible == true)
                            {
                                objTemp = objLayer;
                                objLayer.Open();
                                objLayer.Draw(objGeoCanvas, colLayers); 
                                objLayer.Close();
                            }
                        }
                    }
                }

                objGeoCanvas.EndDrawing();

                string strFilePath = Request.PhysicalApplicationPath + "App_Data";
                SaveGISMapToImage(objBitMap, strFilePath);
            }
            catch (Exception ex)
            {
                //Put a Stop Here
                string errorMessage = ex.Message;
            }

        }

        public void SaveGISMapToImage(Bitmap objImage, String strMapPath)
        {
            string strError = "";
            string strFullPath = "";

            try
            {
                strFullPath = strMapPath;

                //Exit if they cancel
                if (strFullPath.Length == 0)
                    return;

                string strFileName = "";
                bool blnFinished = true;
                string strFormat = "";

                try
                {
                    strFileName = "GIS.bmp";
                    objImage.Save(strFullPath + strFileName);
                    System.Diagnostics.Process.Start(strFullPath + strFileName);

                    System.Web.HttpResponse response = System.Web.HttpContext.Current.Response;
                    response.ClearContent();
                    response.Clear();
                    response.ContentType = "text/plain";
                    response.AddHeader("Content-Disposition", "attachment; filename=" + strFileName + ";");
                    response.TransmitFile(strFullPath + strFileName);
                    response.Flush();

                    File.Delete(strFullPath + strFileName);
                    System.Web.HttpContext.Current.ApplicationInstance.CompleteRequest();
                }
                catch (Exception ex)
                {
                    blnFinished = false;
                    strError = ex.Message;
                }
            }
            catch (Exception ex)
            {

            }
        }
    }
}

Thank you,

Neil

Hi Neil,

Thanks for your code, this bug should had been fixed in earlier version, you can upgrade all the other packages to latest version. Please try attached test sample, which works well.

8692.zip (82.5 KB)

Regards,

Ethan

Looks like we had some packages not completely up to date causing the issue. Once we made sure everything was up to date it was fixed.

Thank you,

Neil

Hi Neil,

I am glad to hear that’s helpful.

Regards,

Ethan