none
Set visibility range for pushpoints, polylines and polygons RRS feed

  • Question

  • I'm new to web development.

    Is it possible to specify a range of scales at which pushpoints/lines/polygons display? I.e. at maximum extent you see polygons for country outlines.  When you zoom in, pushpins display while the polygons vanish.

    If so, please show an example of the HTML :).  Thanks.

    Wednesday, February 15, 2017 8:49 AM

Answers

All replies

  • The best way to do this is to separate your data into layers what you want to have visible at different zoom levels. From there you can use the maps viewchange end event to make layers visible or not based on the zoom level for. I've put together a sample you can try here: http://bingmapsv8samples.azurewebsites.net/#Limit%20Layer%20to%20Zoom%20Range The source code can be viewed here: https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Layers/Limit%20Layer%20to%20Zoom%20Range.html


    [Blog] [twitter] [LinkedIn]

    Wednesday, February 15, 2017 8:23 PM
  • Thanks - lots of helpful resources.

    I'm attempting to use the Bing Spatial Data Services module to load boundaries for Countries and States.  But can't quite get it right... :

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'Your Bing Maps Key',
        center: new Microsoft.Maps.Location(43.7, -79.3834),
        zoom: 2
            });
    
            //Create an array of locations to get the boundaries of.
            var zipCodes = ['98004', '98005', '98007', '98008', '98039'];
            var state = ['New York']
    
            //Create the request options.
            var geoDataRequestOptions = {
                entityType: 'Postcode1' 
                entityType: 'AdminDivision1' 
                
            };
    
            //Load the Bing Spatial Data Services module.
            Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
    
                //Use the GeoData API manager to get the boundaries of the zip codes.
                Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(
                    zipCodes,
                    state,
                    geoDataRequestOptions,
                    map,
                    function (data) {
                        //This callback function will be called once for each zip code.
                        //Add the polygons to the map.
                        if (data.results && data.results.length > 0) {
                            map.entities.push(data.results[0].Polygons);
                        }
                    });
            });

    Sunday, February 19, 2017 1:14 PM
  • That service only allows querying for one entity type at a time. You need to make two separate requests. Not you have to create two separate geoDataRequestOptions otherwise the second entityType value will overwrite the first.

    [Blog] [twitter] [LinkedIn]

    Sunday, February 19, 2017 3:26 PM
  • Like this?

    Using the interactive SDK, the map displays fine in the preview, but in the printout window one geoDataRequestOptions seems to override the other i.e. states turn into countries. 

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'Your Bing Maps Key',
        center: new Microsoft.Maps.Location(43.7, -79.3834),
        zoom: 7
    });
    var geoDataRequestOptions = {
        entityType: 'PopulatedPlace'
    };
    Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
        //Use the GeoData API manager to get the boundary
        Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(map.getCenter(), geoDataRequestOptions, map, function (data) {
            if (data.results && data.results.length > 0) {
                map.entities.push(data.results[0].Polygons);
            }
        });
    });
    
    
    //Create an array of locations to get the boundaries of 
    	var countries = ['New Zealand','Australia','Japan', 'Singapore','Russia','France','Netherland','South Korea','Tonga','Ireland','Mongolia']; 
    	var geoDataRequestOptions = { 
    	getAllPolygons: true 
    
    }; 
    	Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () { 
    //Use the GeoData API manager to get the boundary 
    	Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(countries, geoDataRequestOptions, map, function (data) { 
    	if (data.results && data.results.length > 0) { 
    	map.entities.push(data.results[0].Polygons); 
    } 
    }); 
    }); 
    

    Sunday, February 26, 2017 2:08 AM
  • In your second Geo data options add an entity type of CountryRegion.

    [Blog] [twitter] [LinkedIn]


    Sunday, February 26, 2017 2:55 AM
  • Adding entityType: 'CountryRegion' to the 2nd Geo Data had no effect...  I still get this in the printout window:

    S

    Seems I'm still missing a trick. 

    Tuesday, February 28, 2017 12:10 PM
  • Zoom out. I just tried this code:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'Your Bing Maps Key',
        zoom: 1
    });
    
    var geoDataRequestOptions = {
        entityType: 'PopulatedPlace'
    };
    Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
        //Use the GeoData API manager to get the boundary
        Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(map.getCenter(), geoDataRequestOptions, map, function (data) {
            if (data.results && data.results.length > 0) {
                map.entities.push(data.results[0].Polygons);
            }
        });
    });
    
    var countries = ['New Zealand','Australia','Japan', 'Singapore','Russia','France','Netherland','South Korea','Tonga','Ireland','Mongolia']; 
    var geoDataRequestOptions = { 
    	getAllPolygons: true,
    	entityType: 'CountryRegion'
    }; 
    
    Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () { 
    //Use the GeoData API manager to get the boundary 
    	Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(countries, geoDataRequestOptions, map, function (data) { 
    	if (data.results && data.results.length > 0) { 
    	map.entities.push(data.results[0].Polygons); 
    	}});
    });

    Note, you only have to load a module once, so you can clean this code up a bit if you want.


    [Blog] [twitter] [LinkedIn]

    Tuesday, February 28, 2017 7:59 PM
  • I appreciate your patience!

    I may have discovered a bug.

    In the screen capture below, the map displays how I want in the preview, but it changes in the pop-out map (i.e. British Columbia turns into Canada).
    How the map looks in the pop-out is what I get in GitHub.

    As a newbie, I'm learning by playing with the examples. Your html examples on GitHub are fantastic.
    https://github.com/Microsoft/BingMapsV8CodeSamples/tree/master/Samples/Spatial%20Data%20Services
    But I haven't seen example of html querying multiple boundary types.

    Code:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'Your Bing Maps Key',
        zoom: 1
    }); 
     //Create an array of locations to get the boundaries of 
     var states = ['Dubai', 'California', 'nevada', 'utah', 'arizona', 'colorado', 'dc', 'maryland', 'new york', 'British Columbia', 'Beijing', 'England', 'Scotland', 'Northern Island']; 
     var geoDataRequestOptions = { 
     entityType: 'AdminDivision1', 
     getAllPolygons: false, 
     }; 
     Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () { 
     //Use the GeoData API manager to get the State 
     Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(states, geoDataRequestOptions, map, function (data) { 
     if (data.results && data.results.length > 0) { 
     map.entities.push(data.results[0].Polygons); 
     } 
     }); 
    
    
    });
    
    var countries = ['New Zealand','Australia','Japan', 'Singapore','Russia','France','Netherland','South Korea','Tonga','Ireland','Mongolia']; 
    var geoDataRequestOptions = { 
    	getAllPolygons: true,
    	entityType: 'CountryRegion'
    }; 
    
    Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () { 
    //Use the GeoData API manager to get the boundary 
    	Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(countries, geoDataRequestOptions, map, function (data) { 
    	if (data.results && data.results.length > 0) { 
    	map.entities.push(data.results[0].Polygons); 
    	}});
    });


    Wednesday, March 1, 2017 1:58 AM
  • Found the issue. You are defining the geodata request options outside of the loading of the modules. Both options use the same name. Modules are loaded asynchronously. As such the second set of options are overwriting the first set and then when the module is loaded, only country boundaries are loaded. Since you like the new samples on GitHub, I've added one for this scenario:

    Source Code: https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Spatial%20Data%20Services/Multiple%20GeoData%20Entity%20Type%20Boundaries.html

    Live Sample: http://bingmapsv8samples.azurewebsites.net/#Multiple%20GeoData%20Entity%20Type%20Boundaries  

    Glad you like these new samples. We just put them online in the last few weeks and will have a blog post about them soon.


    [Blog] [twitter] [LinkedIn]

    Wednesday, March 1, 2017 4:44 AM
  • Perfect. Thanks so much.

    I had this to the second geodata request:

    var countryRequestOptions = {
    entityType: 'CountryRegion',
    getAllPolygons: true,
    };

    Saturday, March 4, 2017 2:34 PM
  • One more quick questions :)

    If I wanted to make a button that takes me to new map extent and zoom level - what's the best/easiest way to do that?  Is that the reuse map option: http://bingmapsv8samples.azurewebsites.net/#Reusable%20Map

    I tried copying ur code in GitHub, but the maps wont' display.
    Monday, March 6, 2017 9:32 AM
  • If you want to simply change the view from a button, then use the existing map. You can do something like this:

    <input type="button" onclick="map.setView({ center : new Microsoft.Maps.Location(48.857, 2.333), zoom: 13})" value="Paris"/>


    [Blog] [twitter] [LinkedIn]

    Monday, March 6, 2017 5:16 PM
  • The button works great. Thanks.

    If I wanted the Paris example to open from a link e.g. https://github.com/paris... what is the code to do that.

    I've been searching and at a loss.

    Friday, March 10, 2017 12:32 PM
  • If you want a URL to a map on your page you can use query parameters and then parse those and process them as needed. If you want a URL to the Bing Maps website, you can follow this documentation: https://msdn.microsoft.com/en-us/library/dn217138.aspx

    [Blog] [twitter] [LinkedIn]

    Friday, March 10, 2017 4:47 PM