ThinkGeo.com    |     Documentation    |     Premium Support

Lower zoom level with Bing maps

#1

Hello,

I am using Bing maps as my world map overlay and need to go to a lower level of zoom than the default value. I have tried changing the scale value the ZoomLevelSet.ZoomLevel20, however this does not seem to do anything below a certain value. Once the zoom level is below the maximum zoom level for the Bing maps overlay, I would like it to just drop off or disappear. I have some graphics overlaid on the world map using GdiPlusRasterLayers and I would like to further zoom in on these graphics beyond whatever the default max zoom level is for Bing. How can accomplish this?

Thanks in advance for your help,

Dave

#2

Hi David,



Following is the scripts on how to zoom Bing Maps further and the Bing maps tile will disappear beyond the maximum zoom levels.



Client Side:


function OnOverlaysDrawing(layers) {
for (var index = 0; index < layers.length; index++) {
var templayer = layers[index];
if (templayer.CLASS_NAME.contains(‘Bing’)) {
templayer.MIN_ZOOM_LEVEL = 0;
templayer.MAX_ZOOM_LEVEL = 22;
templayer.resolutions.push(templayer.resolutions[19] / 2);
templayer.resolutions.push(templayer.resolutions[20] / 2);
}
}
}
var OnMapCreating = function (map) {
OpenLayers.Tile.Image.prototype.renderTile = function () {
if (this.layer.CLASS_NAME.contains(‘Bing’) && this.layer.map.getZoom() > 20) {
return true;
}
if (this.layer.url == null || this.layer.url == ‘’) {
return true;
}
if (this.imgDiv == null) {
this.initImgDiv();
}
this.imgDiv.viewRequestID = this.layer.map.viewRequestID;
if (this.layer.url instanceof Array) {
this.imgDiv.urls = this.layer.url.slice();
}
this.url = this.layer.getURL(this.bounds);
if (this.url && !this.url.contains(‘blank.gif’) && !this.layer.CLASS_NAME.contains(‘OSM’)
&& !this.layer.CLASS_NAME.contains(‘WMTS’)) {
this.url += ‘&ZOOM=’ + this.layer.map.getZoom();
}
OpenLayers.Util.modifyDOMElement(this.frame,
null, this.position, this.size);
var imageSize = this.layer.getImageSize();
if (this.layerAlphaHack) {
OpenLayers.Util.modifyAlphaImageDiv(this.imgDiv,
null, null, imageSize, this.url);
} else {
OpenLayers.Util.modifyDOMElement(this.imgDiv,
null, null, imageSize);
this.imgDiv.src = this.url;
}
return true;
}
}





Server Side:




protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Map1.MapBackground.BackgroundBrush = new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"));
Map1.CurrentExtent = new RectangleShape(-13939426.6371, 6701997.4056, -7812401.86, 2626987.386962);
Map1.MapUnit = GeographyUnit.Meter;
BingMapsOverlay bingMapsOverlay = new BingMapsOverlay(“BingMaps Map”);
bingMapsOverlay.MapType = BingMapsStyle.Road;
Map1.CustomOverlays.Add(bingMapsOverlay);
}
}
}





Thanks,



Johnny

#3

Hi Johnny.

Thanks for the quick reply! The sample provided allows for 22 zoom levels and the bing tiles drop off as intended, which is great. However, when the bing tiles drop, so does my gdiRasterLayer. Below is my server side code (please pardon my VB, I converted your sample) to build this additional overlay & layer. I tried a few things with the client side script to get this to be rendered on the higher zoom levels, but didn’t have any luck. Could you help me figure out what is required to get the graphics overlay/layer (production will have multiple layers in the graphics overlay) to be displayed on the new zoom levels 21&22?

Thanks again for your help with this, you guys are awesome!



  Map1.MapBackground.BackgroundBrush = New GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))
        Map1.CurrentExtent = New RectangleShape(-13939426.6371, 6701997.4056, -7812401.86, 2626987.386962)
        Map1.MapUnit = GeographyUnit.Meter
        Dim bingMapsOverlay As New BingMapsOverlay(“BingMaps Map”)
        bingMapsOverlay.MapType = BingMapsStyle.Road
        'bingMapsOverlay.IsBaseOverlay = true;
        Map1.CustomOverlays.Add(bingMapsOverlay)
        Map1.MapTools.MouseCoordinate.Enabled = True



        'set up graphics overlay
        Dim imO As New LayerOverlay(“graphicsOverlay”)
        imO.IsBaseOverlay = False
        imO.Opacity = 0.75
        imO.Name = “graphicsOverlay”



        'RectangleShape mapExtent = new RectangleShape((-119.92033813128,  38.9788664699946, -119.920575860844, 38.9791001997615);
        Dim mapExtent As New RectangleShape(“POLYGON((-119.920575860844 38.9791001997615,-119.920575860844 38.9788664699946,-119.92033813128 38.9788664699946,-119.92033813128 38.9791001997615,-119.920575860844 38.9791001997615))”)



        'projection from lat/lon to meters
        Dim myProjection As New Proj4Projection
        myProjection.InternalProjectionParametersString = Proj4Projection.GetEpsgParametersString(4326)
        myProjection.ExternalProjectionParametersString = Proj4Projection.GetGoogleMapParametersString()



        myProjection.Open()
        mapExtent = myProjection.ConvertToExternalProjection(mapExtent)
        myProjection.Close()



        Dim imageID As String = “ec1de86e-b3b5-46ac-840d-8406ce805ec1”
        Dim mapPath As String = “xxx.blob.core.windows.net/dev/ec1de86e-b3b5-46ac-840d-8406ce805ec1.png”
        mapPath = CacheImageLocally(mapPath, imageID, “.png”)



        Dim gdiLayer As New GdiPlusRasterLayer(mapPath, mapExtent)



        gdiLayer.Name = imageID
        imO.Layers.Add(imageID, gdiLayer)



        'add imo to map
        Map1.CustomOverlays.Add(imO)

#4

Hi David,



The codes we provided before might not be fit for you, please try the new one which is using the custom zoomlevel set:

Server side:



Protected Sub Page_Load(sender As Object, e As EventArgs)
    If Not Page.IsPostBack Then
        Map1.MapBackground.BackgroundBrush = New GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))
        Map1.CurrentExtent = New RectangleShape(-13939426.6371, 6701997.4056, -7812401.86, 2626987.386962)
        Map1.MapUnit = GeographyUnit.Meter
        Dim customZoomlevelSet As ZoomLevelSet = GetCustomZoomlevelSet()
        Map1.ZoomLevelSet = customZoomlevelSet
 
        Dim shapeFileFeatureLayer As New ShapeFileFeatureLayer(MapPath("~/SampleData/USA/STATES.shp"))
        For Each item As var In customZoomlevelSet.GetZoomLevels()
            item.DefaultAreaStyle = AreaStyles.CreateSimpleAreaStyle(GeoColor.FromArgb(100, 212, 220, 184), GeoColor.FromArgb(255, 132, 132, 154), 1)
            shapeFileFeatureLayer.ZoomLevelSet.CustomZoomLevels.Add(item)
        Next
 
        Dim proj4 As New Proj4Projection()
        proj4.InternalProjectionParametersString = Proj4Projection.GetEpsgParametersString(4326)
        proj4.ExternalProjectionParametersString = Proj4Projection.GetGoogleMapParametersString()
        shapeFileFeatureLayer.FeatureSource.Projection = proj4
 
        Dim shapeOverlay As New LayerOverlay(“Shape Overlay”, True, TileType.SingleTile)
        shapeOverlay.IsBaseOverlay = False
        shapeOverlay.Layers.Add(shapeFileFeatureLayer)
        shapeOverlay.TransitionEffect = TransitionEffect.None
 
        Dim bingMapsOverlay As New BingMapsOverlay(“BingMaps Map”)
        bingMapsOverlay.MapType = BingMapsStyle.Road
        Map1.CustomOverlays.Add(New GoogleOverlay())
        Map1.CustomOverlays.Add(shapeOverlay)
    End If
End Sub
 
Private Function GetCustomZoomlevelSet() As ZoomLevelSet
    Dim zoomlevelSet As New ZoomLevelSet()
 
    Dim bingZoomlevelset As ZoomLevelSet = New BingMapsZoomLevelSet()
    For Each item As var In bingZoomlevelset.GetZoomLevels()
        zoomlevelSet.CustomZoomLevels.Add(item)
    Next
 
    Dim zoomlevel21 As New ZoomLevel(zoomlevelSet.CustomZoomLevels(zoomlevelSet.CustomZoomLevels.Count - 1).Scale / 2)
    zoomlevelSet.CustomZoomLevels.Add(zoomlevel21)
    Dim zoomlevel22 As New ZoomLevel(zoomlevelSet.CustomZoomLevels(zoomlevelSet.CustomZoomLevels.Count - 1).Scale / 2)
    zoomlevelSet.CustomZoomLevels.Add(zoomlevel22)
    Dim zoomlevel23 As New ZoomLevel(zoomlevelSet.CustomZoomLevels(zoomlevelSet.CustomZoomLevels.Count - 1).Scale / 2)
    zoomlevelSet.CustomZoomLevels.Add(zoomlevel23)
    Dim zoomlevel24 As New ZoomLevel(zoomlevelSet.CustomZoomLevels(zoomlevelSet.CustomZoomLevels.Count - 1).Scale / 2)
    zoomlevelSet.CustomZoomLevels.Add(zoomlevel24)
    Return zoomlevelSet
End Function




Client side:

 

<script type=“text/javascript”>
       function OnOverlaysDrawing(layers)
       {
           for (var index = 0; index < layers.length; index++)
           {
               var templayer = layers[index];
               if (templayer.CLASS_NAME.contains(‘Bing’))
               {
                   templayer.MIN_ZOOM_LEVEL = 0;
                   templayer.MAX_ZOOM_LEVEL = 24;
                   templayer.resolutions.push(templayer.resolutions[19] / 2);
                   templayer.resolutions.push(templayer.resolutions[20] / 2);
                   templayer.resolutions.push(templayer.resolutions[21] / 2);
                   templayer.resolutions.push(templayer.resolutions[22] / 2);
               }
           }
       }
 
       OnMapCreated = function (map) {
           map.numZoomLevels = 24;
       }
   

In the codes, I am using the shapeFileFeatureLayer instead of your GdiPlusRasterLayer, but it doesn’t not a big case to replace it.

If the issue persists, please feel free to let us know.

Regard,

Troy

#5

Hi,



I´m working on a similar scenario with one diference. I want that bing layer remains visible after zoom 20.

Is this possible?



in bing maps site we can zoom closer to the image.



See next examples using the same swimming pool.







Max zoom where i can see bing layer, after this zoom i can´t see the bing layer.







Regards,

Luís Diogo

#6

HI Luis, 
  
 Does Johnny’s code works for you in floor 2? 
  
 Regards, 
  
 Don 


#7

Hi Don, yes it works.



see video in next link:



meocloud.pt/link/e681f67d-1ff3-4939-8553-f862e94b917c/bingZoom.avi/


#8

Hi Luis, 
  
 The code as below should works for you. 
  
 Client side: 
  
<script type=“text/javascript”>
        function OnOverlaysDrawing(layers) {
            for (var index = 0; index < layers.length; index++) {
                var templayer = layers[index];
                if (templayer.CLASS_NAME.indexOf(‘Bing’) > 0) {
                    templayer.resolutions.push(templayer.resolutions[19] / 2);
                    templayer.resolutions.push(templayer.resolutions[20] / 2);
                    templayer.resolutions.push(templayer.resolutions[21] / 2);
                    templayer.resolutions.push(templayer.resolutions[22] / 2);

                    templayer.serverResolutions = [156543.03390625, 78271.516953125, 39135.7584765625,
                            19567.87923828125, 9783.939619140625,
                            4891.9698095703125, 2445.9849047851562,
                            1222.9924523925781, 611.4962261962891,
                            305.74811309814453, 152.87405654907226,
                            76.43702827453613, 38.218514137268066,
                            19.109257068634033, 9.554628534317017,
                            4.777314267158508, 2.388657133579254,
                            1.194328566789627, 0.5971642833948135];

                    templayer.numZoomLevels = 24;
                }
            }
        }
    </script>
 
  
 Server side: 
  
  Protected Sub Page_Load(sender As Object, e As EventArgs)
        If Not Page.IsPostBack Then
            Map1.MapBackground.BackgroundBrush = New GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))
            Map1.CurrentExtent = New RectangleShape(-13939426.6371, 6701997.4056, -7812401.86, 2626987.386962)
            Map1.MapUnit = GeographyUnit.Meter
            Dim customZoomlevelSet As ZoomLevelSet = GetCustomZoomlevelSet()
            Map1.ZoomLevelSet = customZoomlevelSet

            Dim shapeFileFeatureLayer As New ShapeFileFeatureLayer(MapPath("~/SampleData/USA/STATES.shp"))
            For Each item As ZoomLevel In customZoomlevelSet.GetZoomLevels()
                item.DefaultAreaStyle = AreaStyles.CreateSimpleAreaStyle(GeoColor.FromArgb(100, 212, 220, 184), GeoColor.FromArgb(255, 132, 132, 154), 1)
                shapeFileFeatureLayer.ZoomLevelSet.CustomZoomLevels.Add(item)
            Next

            Dim proj4 As New Proj4Projection()
            proj4.InternalProjectionParametersString = Proj4Projection.GetEpsgParametersString(4326)
            proj4.ExternalProjectionParametersString = Proj4Projection.GetGoogleMapParametersString()
            shapeFileFeatureLayer.FeatureSource.Projection = proj4

            Dim shapeOverlay As New LayerOverlay(“Shape Overlay”, True, TileType.SingleTile)
            shapeOverlay.IsBaseOverlay = False
            shapeOverlay.Layers.Add(shapeFileFeatureLayer)
            shapeOverlay.TransitionEffect = TransitionEffect.None

            Dim bingMapsOverlay As New BingMapsOverlay(“BingMaps Map”)
            bingMapsOverlay.MapType = BingMapsStyle.Road
            Map1.CustomOverlays.Add(bingMapsOverlay)
            Map1.CustomOverlays.Add(shapeOverlay)
        End If
    End Sub

    Private Function GetCustomZoomlevelSet() As ZoomLevelSet
        Dim zoomlevelSet As New ZoomLevelSet()

        Dim bingZoomlevelset As ZoomLevelSet = New BingMapsZoomLevelSet()
        For Each item As ZoomLevel In bingZoomlevelset.GetZoomLevels()
            zoomlevelSet.CustomZoomLevels.Add(item)
        Next

        Dim zoomlevel21 As New ZoomLevel(zoomlevelSet.CustomZoomLevels(zoomlevelSet.CustomZoomLevels.Count - 1).Scale / 2)
        zoomlevelSet.CustomZoomLevels.Add(zoomlevel21)
        Dim zoomlevel22 As New ZoomLevel(zoomlevelSet.CustomZoomLevels(zoomlevelSet.CustomZoomLevels.Count - 1).Scale / 2)
        zoomlevelSet.CustomZoomLevels.Add(zoomlevel22)
        Dim zoomlevel23 As New ZoomLevel(zoomlevelSet.CustomZoomLevels(zoomlevelSet.CustomZoomLevels.Count - 1).Scale / 2)
        zoomlevelSet.CustomZoomLevels.Add(zoomlevel23)
        Dim zoomlevel24 As New ZoomLevel(zoomlevelSet.CustomZoomLevels(zoomlevelSet.CustomZoomLevels.Count - 1).Scale / 2)
        zoomlevelSet.CustomZoomLevels.Add(zoomlevel24)
        Return zoomlevelSet
    End Function
 
  
 This code based on Johnny’s code and it works for me, please let me know whether that works for you. 
  
 Regards, 
  
 Don