microsoft / bingmapsv8codesamples Goto Github PK

View Code? Open in Web Editor NEW

144.0 30.0 127.0 61.03 MB

This is a collection of over two hundred code samples an growing for the Bing Maps V8 web control.

Home Page: https://samples.bingmapsportal.com/

License: MIT License

HTML 5.11% JavaScript 30.48% SCSS 64.42%

bing bing-maps msdn-documentation maps microsoft

bingmapsv8codesamples's Introduction

Bing Maps Code Samples

This is a collection of over a hundred code samples for the Bing Maps V8 web control. These samples have been collected from a number of different sources. Some of these samples where created to assist developers on the Bing Maps forums while many others where created for the Bing Maps blog, MSDN documentation and interactive SDK.

Try it now

Warning: Experimental Folder

The experimental folder of this project contains code samples that are proof of concepts, hacks, workarounds, untested code or simply experiments. These samples are primarily for trying things outs and likely contain unsupported code which can break at any time. It is not recommended to use any of these code samples in production applications.

Contributing

We welcome contributions. Feel free to submit code samples, file issues and pull requests on the repo and we'll address them as we can. Learn more about how you can help on our Contribution Rules & Guidelines.

You can reach out to us anytime with questions and suggestions using our communities below:

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Related Projects

Additional Resources

License

MIT

See License for full license text.

bingmapsv8codesamples's People

Contributors

Stargazers

Watchers

Forkers

fredyfx nick-shannon zeroinfinite iceker arrebagrove jesselgit scottw12 jebcat1982 superchaoran jessemaps mcluckster mrgoogol mikecer darrylsk anorouzi yoghcl zorauf wskwish jsgund 2387743262 bradmin77 jdunaganfl perfahlen elhabchiali tsept hungdluit mirmdasif eginter doneladams garrettdehnketurpin dmitchell-vns coffeemadd altiseven sthomas-gerard alikahwaji jakeacrespo hellokingdom davejamesnewman gscodesample ankita132 ginameee laleh-moradi sid12261996 bcarter1ups cainenchristobal elanchezhian-intercea sampathg9 talsaady windowxdeveloper srice84 gmarathi-nisum-com jvmazz sgaab nagarajuyenumula iqdavidh sp3akerb0xx ktp-forked-repos zhenren92 mexikaner9 uncha saiswaroopalluri andyblank1 whbleer vmarquar gasyleiss vikasnarayankar freddyquiroga ethioeddie 176772174 wk5528 margaretfabyanic abhi58 slimteam anirban-mypp abdocad robadams22 zdtang codebycinar siddarthaio eurpeb2012 ramyasat 81pgomes braininjuryradio kalyanaallam pedropaulowski hechengya denesha bhaskers-blu-org2 taffywrinkle claudiusgonzo crystal-rhodes abdulrahim-dev charliechen179 iand11 connectionmaster davecs1 guosongshan 183demao ajmillerdevelopment dieptk

bingmapsv8codesamples's Issues

visible is not configurable in HtmlPushpin

getBoundary method is Queuing api calls

Hey Team,

Seems there is an issue with Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary() method available at Get Multiple Boundaries .

We tried supplying around 1000 zipcodes at one execution, while API draws boundaries of this initial request, We already triggered another request before the first one finished to the same method with another set of 1000 different zipcodes,

A strange behavior of API is observed, The api somehow caches the old requests and still loads the old set of Zipcodes even though we are supplying the new set of them.

Finally it loads it loads all two set of zipcodes i.e. 2000 in total.

Please let me know if we are doing anything wrong,

Below is the set of syntax we used.
Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(latlong, geoDataRequestOptions, map, function (data) { var polygon; if (data.results && data.results.length > 0) { map.entities.push(data.results[0].Polygons); polygon = data.results[0].Polygons[0]; Microsoft.Maps.Events.addHandler(polygon, 'click', function () { highlight(polygon); }); } }, polygonStyle, function errCallback(networkStatus, statusMessage) { console.log(networkStatus); console.log(statusMessage); //alert("e"); });

Here in the above code we are supplying latlng as an array of zipcodes.

Any help would be appreciated.
Regards,
Shohil Sethia

Invalid credentials when using samples

Hi @rbrundritt

I am using these samples on localhost and kept getting the "Your credentials are not valid" message in the middle of all of the samples until I made one small change.

You show:
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[**YOUR_BING_MAPS_KEY**]' async defer></script>

After some searching I found I needed this in GetMap as well:
map = new Microsoft.Maps.Map('#myMap', { credentials: '[**YOUR_BING_MAPS_KEY**]' });

Then the message went away so can you tell me if I have a configuration problem that the second instance of the key is required? I have it in both places at this point.

Sincerely,
IoTGirl

Focus indicator is not clearly visible on "Terms" link on the map

As shown in the picture below, the focus indicator does not completely surround the Terms link.
Additional padding-top ,padding-bottom and padding-right is required on the 'TermsLinkContainer' id in the html.

error while drawing shape in bing map using angular

I am using following code for getting map layer and drawing tools but it throw an error

while run the project debugger not hit and variables becomes empty and that cause an error in my project and not work properly, any solution for that?

Microsoft.Maps.loadModule(['Microsoft.Maps.DrawingTools', 'Microsoft.Maps.SpatialMath'], function () {
    this.drawingLayer = new Microsoft.Maps.Layer();
    debugger;
    this.map.layers.insert(this.drawingLayer);
    debugger;
    this.tools = new Microsoft.Maps.DrawingTools(this.map);
    debugger;
    this.toolsPolyline = new Microsoft.Maps.DrawingTools(this.map);
  });

Possible XSS using InfoboxOptions.description field

I am not sure if this is a feature or a bug, but it is possible to inject executable javascript in the Map component using the description field of the InfoboxOptions object.

The doc doesn't give the impression that arbitrary javascript can be used here:

However, the description string is not escape, resulting in possible javascript execution:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <!-- Reference to the Bing Maps SDK -->
    <script type='text/javascript'
            src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[key]' 
            async defer></script>
    
    <script type='text/javascript'>
    function GetMap()
    {
        var map = new Microsoft.Maps.Map('#myMap');

        var center = map.getCenter();

        var infobox = new Microsoft.Maps.Infobox(center, {
            title: 'Map Center',
            description: `Seattle<img src="" onerror="alert(1);console.log(2)"/>`
        });

        //Assign the infobox to a map instance.
        infobox.setMap(map);

        //Add your post map load code here.
    }
    </script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

[Accessibility] Luminosity ratio of "Microsoft Bing" link text with its background color is less than 4.5:1 on the screen.

Low visible user will face difficulty in identifying the text appearing on the control if the luminosity ratio of text color to its background color is less than 3:1.

Getting error "More than one fragment is found in the input" while using Microsoft.Maps.GeoXmlLayer

I am getting an exception error for using Microsoft.Maps.GeoXmlLayer and the exception is below:

"More than one fragment is found in the input"

and I am trying to implement my code like below:

`var georss = '<feed xmlns="http://www.w3.org/2005/Atom" xmlns:georss="http://www.georss.org/georss"><entry><title>Sample Polygon</title><georss:polygon>46.31409 -122.22616 46.31113 -122.22968 46.31083 -122.23320</georss:polygon></entry></feed>';`
`//Load the GeoXml module.
        Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
            //Create an instance of the GeoXmlLayer.
            layer = new Microsoft.Maps.GeoXmlLayer(georss, false);

            //Add the layer to the map.
            map.layers.insert(layer);
        });`

I have searched a lot through google but didn't find any related solution for that error above.

Any suggestion why the error shows me. I am trying to implement this into my typescript project. But above code is working with the example of msdn standalone.

polygon shape get back to it's after editing finished.

Drawing tools looks promising, i found a bug, when user create polygon it works perfectly, as we use it in edit mode, it gives some js error,
TypeError: Cannot set property 'alpha' of undefined at Function.n._createTemplate

I believe due to this, after finishing edit, polygon get back it's initial shape.

How can hide the Infoboxs when user click to a layer binding by GeoXML?

Hi everyone,

As the subject. I have loaded the kml data by using GeoXml module. This my code:

Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
	var layer = new Microsoft.Maps.GeoXmlLayer();						
	map.layers.insert(layer);
								
        layer.setDataSource('my_url', true);	
});

So the infobox will display when user click to an area in the map as photo below:

Now I want to suppress/hide this Infobox to show another custom popup.

Thanks,
Phuong Tran

[Accessibility] ‘Road’ drop down is not getting collapsed by pressing esc key.

Keyboard user will not be able to collapse the control and cannot access the control efficiently if the control is not collapsing through by pressing Esc key.

HTMLPushPin Layer not displaying

I have downloaded the example code and it works as is (other than point 2 below).

If I amend the code to default to the UK and change the map type, using setView. The pins are no longer displayed.

var zoomOptions=	{
			mapTypeId: Microsoft.Maps.MapTypeId.aerial,
			zoom: 5,
			center: new Microsoft.Maps.Location(54, -2)		};
		
		map.setView(zoomOptions);

Adding more pins and clicking "Bring into View", moves the map, so I can see the items are in the layer. They are just not being displayed. Not sure if this is a timing issue?

if I take out the line
mapTypeId: Microsoft.Maps.MapTypeId.aerial,

and refresh they appear. Changing the Map Type to Aerial works using the map controls. Just not if I set it in code. (the map type changes, but the pins are no longer visible).

The hover label, doesn't appear to be showing the infobox.

Error with Live V8 Code Samples Canvas Overlay

Looking at the Canvas Overlay sample from the Bing Maps sample code.

Getting an error loading the CanvasOverlayModule. The following is logged in the console:

GET http://bingmapsv8samples.azurewebsites.net/CanvasOverlayModule.js 
https://www.bing.com/rms/SDKPlugin/cj,nj/5dac24ae/265f75e7.js?bu=rms+answers+MapsSDKRelease+AnonymousBegin*SDKPluginStart*SDKInfoboxOverlay*Infobox*SDKColor*TileSource*TileLayer*Module*Layer*EntityCollection*Events*SDKPrimitiveTemplateSelector*UserMouseEventArgs*PixelReference*Pushpin*SDKPolygon*SDKPolyline*TestDataGenerator*CustomOverlay*GroundOverlay*AnimatedTileLayer*MapsTilePrimer*SDKMap*PointCompression*DeprecatedClass*SDKPluginEnd*AnonymousEnd

The canvas and pins aren't loading. This was working for me yesterday, looks like there was an update last night though.

Getting a similar error in my own code (using Bing Maps API w/ Webpack and Angular2), unsure what the error is here or how to debug. Please advise.

Microsoft.Maps.loadModule is not a function

Is there a reason I am getting this error? I was trying to load SpatialMath because my application wouldn't recognize getGeodesicPath and getHeading because I assumed it wasn't loading the SpatialMath module.

These are my import statements

/// <reference  path="..\..\..\..\node_modules\bingmaps\scripts\MicrosoftMaps\Microsoft.Maps.d.ts"/>
/// <reference  path="..\..\..\..\node_modules\bingmaps\scripts\MicrosoftMaps\Modules\SpatialMath.d.ts"/>

This is my block of code where the error occurs:

Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath',() => {
    this.generateLines();
});

ROBUX Scam??

Why Why Why Microsoft did u remove the free robux , and also its not fair that u guys are not allowing other countries to have it. Is this a joke , I waited on ur website for 3 hours after I received the free 100 robux but it showed me an error , and it said that this product is unavailable , wtf is wrong with guys , pls send me the robux code ASAP,
I have the right to get it cause I did all the steps . Send me the code here : [email protected] , I better see my robux code in my outlook email by tommorow 31/12/2020

It better be there 😠

I did not sit there in ur stupid website for 3 hours to see this error.

AutoSuggest doesn't work in Bing maps when used in Ionic iOS devices

I'm using Bing maps in Ionic on an iPhone 8 and I can't seem to get the Autocomplete to work. As soon as I click on the input field, I get the following error:

API error: <_UIKBCompatInputView: 0x155eac820; frame = (0 0; 0 0); layer = <CALayer: 0x1c003a6c0>> returned 0 width, assuming UIViewNoIntrinsicMetric
I tried waiting for the platform to be ready:

platform.ready.then(()=>{//execute Autosuggest})

But it still gave me the same error. After popping this error, the autocomplete works fine as expected, but when I click on the suggestions, the callback function is not executed at all. It works fine on Android, IDK whats the issue with iOS.
I don't know how to fix it. Any help would be appreciated.

Pushpins not rendered properly in Safari (Mac book)

Sample code is not working fine in safari(Mac Book), push pins are rendering improperly in image.

Deleting from an array

In BingMapsV8CodeSamples/Samples/Directions/Continuous Tracking and Routing.html i found an error.

function clearDirections() {
        //Clear directions waypoints and display without clearing it's options.
        directionsManager.clearDisplay();
        var wp = directionsManager.getAllWaypoints();
        if (wp && wp.length > 0) {
            for (var i = 0; i < wp.length; i++) {
                directionsManager.removeWaypoint(wp[i]);
            }
        }
        routePath = null;
    }

When you are deleting from the same array, which length is used in 'for' loop, you have a trouble.

It should look like:

if (wp && wp.length > 0) {
      for (let i = wp.length -1; i >=0; i--) {
        this.directionsManager.removeWaypoint(wp[i]);
      }
    }

Event when shape drawing is complete?

@rbrundritt: we are using bing maps to display a large number of shapes (markers, lines, polygons) using x-maps. We have thousands of shapes and performance is pretty good as we stream that data onto the map. However, right now we have no reliable way to let the user know that all drawing has been completed. We know when we sent all data to the map, but there is some latency, sometimes more than a few seconds before all the drawing on the canvas is complete. During that time, the map is essentially locked up as drawing commences.

None of this is terrible, but we would like to display a visual indication that loading/drawing is in progress. Is there an event that is raised once the map has entered into an idle state where all map operations (zooming, drawing, panning, etc). have completed? I could not find anything in the reference.

Google Maps has an 'idle' event that does some of that, (from my testing, it does not take drawing operations into consideration).

bing map draw shape with angular13

i want to add draw shape and find the area of it in bing map using angular13 is it possible in typescript?
like this screenshot

Question on editing complex polygons

@rbrundritt : we've been playing around with implementing poly editing in angular-maps. Pretty straight forward, but we noticed that for complex polys, only the first ring seems to be editable. Is that by design or is that a bug?

Also, we had a complex poly where one of the inner rings had less than 3 points (result of data optimization algorithm). While this does not break the rendering of the poly, it does break the editing for the entire poly. Definitely a data error on our part, but I thought I point it out so you can perhaps consider making it more robust.

Map image generator giving security error in IE

i'm using map image generator to get map as image, it is working fine in Chrome and Firefox. giving security error in IE.

Spider Clusters

Hi, amazing code samples guys!! I am looking into the spider cluster but the examples doesn't work; https://samples.bingmapsportal.com/clustering/spiders, maybe if possible someone can have a look and bring it back to life? thanks!

Map without a base layer (with a custom mercator TileSource TileLayer) does not show on iOS devices

Upgrading our project from v7 to v8. Tried one of your samples on iPhone 6 with iOS 10.2.1
http://bingmapsv8samples.azurewebsites.net/Tile%20Layers/TileLayer_BaseMercator.html

Custom Tile Layer works on iOS if the base layer is included.

Samples/Heatmap Layers/Heatmap_Features.html doesn't display a heatmap

I tried running the heatmap at https://bingmapsv8samples.azurewebsites.net/#Heatmap_Features, when you press update heatmap , nothing happens. I tried setting the options in many ways but nothing changes. It seems that the heatmap layer isn't dynamically updating neither the locations array nor the heatmapOptions object. Is is possible to dynamically update?

Select Data in Drawn Polygon Area Bug

Hi Ricky,

In Select Data in Drawn Polygon Area sample.
https://bingmapsv8samples.azurewebsites.net/#Select%20Data%20in%20Drawn%20Polygon%20Area

If you zoom out the map to maximum and draw a polygon above pacific ocean from Japan sea to North America sea area. All the pushpin will get highlighted.(Refer to picture below)

Do you know how to fix this? Is this a SDK bug or implementation bug?

Thanks,
Kolept

Screen Reader focus is landing outside of location edit box when user selects any location.

Test Environment:
URL: https://samples.bingmapsportal.com/?search=suggestion&sample=business-suggestions
Screen Reader: NVDA

Repro Steps:
Step 1: Open the above URL
Step 2: Press Tab key and navigate to location edit box and type some character.
Step 3: Press down arrow key and select any desired location and observe the issue.

Actual Result:
After selecting the location from the list items screen reader focus is landing outside of the location edit box. Screen reader shows "Business Suggestions - Bing Maps Samples document"

Expected Result:
After selecting from the list items, screen reader focus should not land outside of the pane, and it should be retained same on the location edit box.

Referenced image not found (404)

Hi -
I was browsing through your extensive BingMaps samples and noticed that https://samples.bingmapsportal.com/pushpins/transparentpushpin.png isn't loading (getting a 404). This image is referenced by https://samples.bingmapsportal.com/pushpins/canvas-image (Samples/Pushpins/Canvas Image/Image and Canvas Pushpin.html).

Thanks

SpatialMath Intersection is not accurate with Multiple pins having same locations.

Hey @drwestco ,

I figured an issue, while i have thousands of pins over the map, i am using drawing tool to draw shapes free hand and then executing the Intersection on "drawingEnded" event, While i could see the intersection should return more than it actually returns,

Am i missing something ? For Example, If there are around 500 pins under the new area drawn, Intersection method only returns 100 or few more,

My Spider Cluster Configuration:
` Microsoft.Maps.loadModule(['SpiderClusterManager'], function () {

            spiderManager = new SpiderClusterManager(map, pinssame, {

                //clusteredPinCallback: function (cluster) {
                //    //Customize clustered pushpin.
                //    cluster.setOptions({
                //        color: 'red',
                //        icon:'https://www.bingmapsportal.com/Content/images/poi_custom.png'
                //    });
                //},
                pinSelected: function (pin, cluster) {
                    if (cluster) {
                        showInfobox(cluster.getLocation(), pin);
                    } else {
                        showInfobox(pin.getLocation(), pin);
                    }
                },
                pinUnselected: function () {
                    hideInfobox();
                },
                gridSize: 80

            });
        });

Intersection Function Code which gets triggered after "drawingEnded" event:
` function findIntersectingData(searchArea) {
//Ensure that the search area is a valid polygon, should have 4 Locations in it's ring as it automatically closes.
if (searchArea && searchArea.getLocations().length >= 4) {

            //Get all the pushpins from the pinLayer.
            //var pins = spiderManager._data;

            //Using spatial math find all pushpins that intersect with the drawn search area.
            //The returned data is a copy of the intersecting data and not a reference to the original shapes, 
            //so making edits to them will not cause any updates on the map.
            var intersectingPins = Microsoft.Maps.SpatialMath.Geometry.intersection(pins, searchArea);
            //The data returned by the intersection function can be null, a single shape, or an array of shapes. 
            if (intersectingPins) {
                //For ease of usem wrap individudal shapes in an array.
                if (intersectingPins && !(intersectingPins instanceof Array)) {
                    intersectingPins = [intersectingPins];
                }
                var selectedPins = [];
                //Loop through and map the intersecting pushpins back to their original pushpins by comparing their coordinates.
                for (var j = 0; j < intersectingPins.length; j++) {
                    for (var i = 0; i < pins.length; i++) {
                        if (Microsoft.Maps.Location.areEqual(pins[i].getLocation(), intersectingPins[j].getLocation())) {
                            selectedPins.push(pins[i]);
                            break;
                        }
                    }
                }
                //Return the pushpins that were selected.
                console.log(selectedPins);
                return selectedPins;
            }
        }
        return null;
    }

The function is not returning accurate pin data,
Am i missing something here ?

Any Help Appreciated,

Thanks & Regards,
Shohil Sethia

UPDATE :

Just figured, It is an assumption ,I have multiple pins with same coordinates over the layer, Is this the reason that it returns only pins which intersects with different coordinates over the map ?,

Thanks & Regards,
Shohil Sethia

When the zoom in and zoom out buttons reach the disabled level, the screen reader encounters an error

Test Environment:

Browser: Edge
URL: Find By Property - Bing Maps Samples (bingmapsportal.com)
Screen Reader: NVDA

Repro Steps:

Step 1: Open the above URL on the Edge Dev browser.
Step 2: Press Tab key and navigate to ‘Zoom in’ and press enter key to select it until the button is disabled.
Step 3: Press Tab key and navigate to ‘Zoom out’ and press enter key to select it until the button is disabled.

Actual Result:

Screen Reader conveys incorrect information when the 'Zoom in' or 'Zoom out' button comes to the disabled level.
Here is the log of NVDA for Step 2 of Repro Steps above:
……
Current Level 18, Zoom In
Current Level 19, Zoom In
Current Level 19, Zoom In Disabled
Current Level 20, Zoom In Disabled

The expected result should be:
……
Current Level 18, Zoom In
Current Level 19, Zoom In
Current Level 20, Zoom In Disabled

The log of NVDA for Step3 of Repro Steps above:
……
Current Level 4, Zoom Out
Current Level 3, Zoom Out
Current Level 3, Zoom Out Disabled
Current Level 2, Zoom Out Disabled

The expected result should be:
……
Current Level 4, Zoom Out
Current Level 3, Zoom Out
Current Level 2, Zoom Out Disabled

Not able to use Drag feature on Map, after drawing polygon.

Not able to use Drag feature on Map, after drawing polygon. I found the same issue in Microsoft provided sample.

Zoom to one particular area on Map and draw polygon on it.
Trying to drag the Map to other areas and Map navigation is not changing to other areas.
In this case we can do only zoom in and zoom out.

Clustering_PushpinList: Single pushpins are not clickable after interacting with the map

Thanks for providing all code samples.

After loading the map all pushpins - both clustered and single pushpins - can be clicked and an infobox appears after clicking.

Unfortunately the non-clustered pushpins are not clickable anymore after interacting with the map (dragging, zooming in/out).

It would be very handy if this feature could be added to the Clustering_PushpinList.html example.

Clustering_PushpinList - not clickable after zooming in

While grouping a list of pins, the pins become not clickable once its zoomed in, also the position of the infobox is not visible inside the map for pins in the corner.

https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Clustering/Clustering_PushpinList.html

Is this the desired behaviour?