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

Overview

Bing Maps Logo

license

Bing Maps V8 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.

Comments
  • error while drawing shape in bing map using angular

    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);
      });
    
    Capture
    opened by vivek-vekariya 11
  • How can hide the Infoboxs when user click to a layer binding by GeoXML?

    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: image

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

    Thanks, Phuong Tran

    opened by tranphuongyd 8
  • getBoundary method is Queuing api calls

    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

    opened by shohil06 6
  • Microsoft.Maps.loadModule is not a function

    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();
    });
    
    opened by drewteachout 6
  • polygon shape get back to it's after editing finished.

    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.

    opened by hiteshhilok 4
  • Samples/Heatmap Layers/Heatmap_Features.html doesn't display a heatmap

    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?

    opened by jkpratt 3
  • Clustering_PushpinList: Single pushpins are not clickable after interacting with the map

    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.

    opened by jengeb 3
  • ROBUX Scam??

    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.

    opened by LolalrikofficialYT 2
  • Invalid credentials when using samples

    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

    opened by IoTGirl 2
  • Select Data in Drawn Polygon Area Bug

    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

    bug

    opened by kolept 2
  • Error with Live V8 Code Samples Canvas Overlay

    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.

    opened by retwedt 2
Owner
Microsoft
Open source projects and samples from Microsoft
Microsoft
Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.

Polymaps Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers. See http://polymaps.org for more details.

Urban Airship 1.6k Dec 23, 2022
A simple web extension that redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.

Get Donate FIRO aEyKPU7mwWBYRFGoLiUGeQQybyzD8jzsS8 BTC: 3JZWooswwmmqQKw5iW6AYFfK5gcWTrvueE ETH: 0x90049dc59365dF683451319Aa4632aC61193dFA7 About A web

Simon Brazell 1.6k Dec 29, 2022
:leaves: JavaScript library for mobile-friendly interactive maps

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of gzipped JS plus 4 KB of gzipp

Leaflet 36.5k Jan 1, 2023
An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics

Cesium 9.7k Dec 26, 2022
the easiest way to use Google Maps

Important If you're developer, I'm moving gmaps.js to NPM, you can give your opinion and check the migration progress in Issue #404 gmaps.js - A Javas

Gustavo Leon 7.1k Dec 28, 2022
UNMAINTAINED Open source JavaScript renderer for Kartograph SVG maps

This project is not maintained anymore. Here are a few reasons why I stopped working on kartograph.js: there's no need to support non-SVG browsers any

null 1.5k Dec 11, 2022
An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics

Cesium 9.7k Jan 3, 2023
the easiest way to use Google Maps

Important If you're developer, I'm moving gmaps.js to NPM, you can give your opinion and check the migration progress in Issue #404 gmaps.js - A Javas

Gustavo Leon 7.1k Apr 7, 2021
React components for Leaflet maps

React Leaflet React components for Leaflet maps. Documentation Getting started API reference Changes See the CHANGELOG file. Contributing See the CONT

Paul Le Cam 4.4k Jan 3, 2023
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Vue Leaflet 1.9k Dec 29, 2022
Converts geojson to svg string given svg viewport size and maps extent.

geojson2svg Converts geojson to svg string given svg viewport size and maps extent. Check world map, SVG scaled map and color coded map examples to de

Gagan Bansal 163 Dec 17, 2022
AngularJS directive to embed an interact with maps managed by Leaflet library

Angular Leaflet Why the fork? While we are grateful for all the original work at tombatossals/angular-leaflet-directive. We need to be able to operate

AngularUI 313 Nov 10, 2022
Downloads satellite images from Google Maps, only slightly illegal.

Google Maps Satellite Downloader This is a script to download satellite images from Google Maps. The below mentioned optimization system requires that

null 5 Oct 31, 2022
An online tool to generate and visualize maps for irregular and/or gapped LED layouts, for use with FastLED, Pixelblaze and other libraries.

An online tool to generate and visualize maps for irregular and/or gapped LED layouts, for use with FastLED, Pixelblaze and other libraries.

Jason Coon 172 Dec 8, 2022
🖼️ Create beautiful maps from OpenStreetMap data in a webapp

prettymapp ??️ Prettymapp is a webapp to create beautiful maps from OpenStreetMap data (based on prettymaps) ?? Try it out here: prettymapp on streaml

Christoph Rieke 233 Jan 3, 2023
Dashboards-maps is a frontend plugin that helps you in uploading custom GeoJSON to OpenSearch and communicates with the geospatial backend plugin for the same.

Welcome! Project Resources Code of Conduct License Copyright Dashboards-Maps Dashboards-maps is a frontend plugin that helps you in uploading custom G

null 9 Dec 28, 2022
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specif

Mapbox 9.4k Jan 7, 2023
The NASA WorldWind Javascript SDK (WebWW) includes the library and examples for creating geo-browser web applications and for embedding a 3D globe in HTML5 web pages.

Web WorldWind New versions of WorldWind released Web WorldWind 0.10.0 and WorldWind Java 2.2.0 are now available on GitHub. The new version of Web Wor

NASA WorldWind 770 Jan 1, 2023
A web based data mining tool for OpenStreetMap using the Overpass API.

overpass turbo https://overpass-turbo.eu/ – stable version https://tyrasd.github.io/overpass-turbo/ – latest version This is a GUI for testing and dev

Martin Raifer 607 Dec 29, 2022