Like your project! First used it today, found that Bing map attributes include "© AND". Here's a one-line change which filters it out. Warning: REQUIRES that you save leaflet-bing-layer.js in UNICODE, to preserve the copyright character. I'm sure some clever person will figure out a better way.

This goes in the _getAttributions function:

      if (provider.attribution != '© AND') { //"© AND" was showing up in the attribution
        attributions.push(provider.attribution);
      }  

Trying to get buildings on the map on Road view.
Current look on bing maps. Really would be helpful for my project.

Hello, trying to apply a custom style as seen in this example (https://msdn.microsoft.com/en-us/library/mt823636.aspx) using the options object of the leaflet bing layer as follows:

var map = L.map('map').setView([51.505, -0.09], 13)

var myMapStyle = {
    "elements": {
        "water": { "fillColor": "#a1e0ff" },
        "waterPoint": { "iconColor": "#a1e0ff" },
        "transportation": { "strokeColor": "#aa6de0" },
        "road": { "fillColor": "#b892db" },
        "railway": { "strokeColor": "#a495b2" },
        "structure": { "fillColor": "#ffffff" },
        "runway": { "fillColor": "#ff7fed" },
        "area": { "fillColor": "#f39ebd" },
        "political": { "borderStrokeColor": "#fe6850", "borderOutlineColor": "#55ffff" },
        "point": { "iconColor": "#ffffff", "fillColor": "#FF6FA0", "strokeColor": "#DB4680" },
        "transit": { "fillColor": "#AA6DE0" }
    },
    "version": "1.0" 
};

var options = {
    bingMapsKey: BingKey,
    imagerySet: 'RoadOnDemand',
    culture: 'en',
    style: myMapStyle
};

L.tileLayer.bing(options).addTo(map);

However styles do not seem to be applied, the standard Bing style is displayed. Am I missing something?
Thanks!

Does anyone have any methodology for requesting the bing maps session ID used after the original API key to reduce billable map tile requests.

On the Bing site it says this:

Reducing Usage Transactions
If you are using the Bing Maps Rest services in conjunction with one of the Bing Maps map controls, you can significantly reduce the number of transactions your application incurs against your Bing Maps account if you request the Bing Maps key from the map control rather than using your normal Bing Maps key. This is quite often an overlooked feature. When getting the credentials from the map you do not get back your original Bing Maps key. Instead, you get a special session key which you can use as a Bing Maps key to make requests of the Bing Maps services. By doing this, all transactions incurred by this session key will be non-billable.
https://msdn.microsoft.com/en-us/library/dn894107.aspx

However, I cannot work out how to do this using Leaflet and this plug-in (which is very good!)

If anyone has any ideas that would be brilliant, thanks!

I would like to use the package, but would like to clarify the licence under which I can use it. Please could you include a LICENCE file?

Thanks

Thank you for your great job.

I noticed that leaflet-bing-layer does not support well for other countries (culture:"zh-Hans"), but the following codes from bing dev center shows another way in China area:
<script type='text/javascript' src='https://cn.bing.com/mapspreview/sdk/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
(The default market setting there is var market = "zh-CN";)

How can I request layers from different market? Thank you.

Seems related to and old issue: Leaflet/Leaflet#5078
If you need more information let me know !

How to reproduce

• Leaflet version: 1.3.1
• Browser: Chrome 64
• Os: Win10

I wonder if it's possible for you to publish the latest changes as 3.1.1 or something? I'm particularly interested in 636ba59 .

Howto switch from Road to Satellite?

Hello,

I am trying to look into doing custom styling on my map. I know it is possible to do using Bing Maps V8 and REST Services, as shown here https://msdn.microsoft.com/en-us/library/mt823632.aspx. Is it possible to do the same sort of thing here? I have been looking all over and have not been able to find a solution. I know there are the predefined imagerySets but I would like to make something custom if I could. If you know whether or not this is possible that would be very helpful thank you!

If the page is opened using https instead of http, the map does not open. If I manually go to the file leaflet-bing-layer.min.js and change http to https, it works fine.
How do I configure it in L.tileLayer.bing so that my app works both with http and https?

Did you know that the Live Example has stopped working
http://lab.digital-democracy.org/leaflet-bing-layer/

It would be useful to correct this

I installed the script via Bower, but it looks like fetchJsonp is never defined (these lines are never executed)

leaflet-bing-layer.js?md5=:100 Uncaught TypeError: fetchJsonp is not a function
    at e.initialize (leaflet-bing-layer.js?md5=:100)
    at new e (leaflet.js?md5=:5)
    at Object.createLayer (base-layer-options.js:26)
    at controller.js:73
    at Array.forEach (<anonymous>)
    at Object.bind (controller.js:71)
    at controller.js:43

I use Bing Maps Layer in a map-application. 'Goethestraße' (52.51623 13.51613) is not rendered correctly on the map (Göthestraße).

Bing shows the proper street name:

Do you know the reason for this issue?

Bing Maps version 8 was released earlier this year.

As per the naming convention in the Leaflet plugin guide

I am using leaflet-bing-layer in my project. I am currently loading Aerial and Road views of Bing Maps. Now I also want to load Bing maps Streetside view in my application similar to https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/setviewtostreetside#TS. Can you help me how can I achieve that.

I use leaflet bing layer plugin. I have been notified that Bing Maps is moving from V7 to V8 version on June 30, 2017. Does this plugin take that into consideration ?

Is 'birdseye' view an acceptable input instead of 'aerial', 'aerial with labels' or 'road'?

has bing map retina support, can it retrieve 2x images? Because there is space between tiles at retina

there is wrong link on demo http://gmaclennan.github.io/leaflet-bing-layer/

please change into http://digidem.github.io/leaflet-bing-layer/

Hi All

I have been using the plugin for a year now and it works pretty good, but we have been wondering if it supports high definition imagery, according to this bing documentation (https://blogs.bing.com/maps/2015/02/12/high-ppi-maps-now-available-in-the-bing-maps-ajax-control) it is supported by their native SDK but not sure if there is a way we can use it on the plugin. I have used the default leaflet option detectRetina true but it seems the imagery is not being loaded on high res.

I'm trying to add a bing AerialWithLabels type layer with Russian labels. I've tried to set culture option to 'ru', or 'RU-ru', or 'ru-RU' - and neither did work. The layer is always displayed with english labels. How can this be fixed?

I use maxNativeZoom and maxZoom on some projects to allow zooming further than normal zoom levels allow. Normally I can zoom past the native level and continue to render tiles, despite the fact that they get blurry. This is desirable sometimes. Using Bing imagery, leaflet will cease to render tiles past the stated maxNativeZoom level.

L.tileLayer.bing({bingMapsKey: BING_KEY, imagerySet: "AerialWithLabels", maxNativeZoom: "19", maxZoom: "23"}).addTo(map),

see https://stackoverflow.com/q/53882863/287948

Would be fantastic to implement this feature: https://github.com/ghybs/Leaflet.TileLayer.Fallback/

Unfortuantely, the two plugins are incompatible as they both override the getTileUrl method.

As I am currently using the bing plugin from shramov (https://github.com/shramov/leaflet-plugins/blob/master/layer/tile/Bing.js) I wonder why you decided to build a new bing plugin. Did you experience any limitations with that plugin?

There's no need to force browserify (browserify-shim specifically) in the dependencies. Causes annoying errors and warnings for projects using alternative bundlers (webpack) and polyfills (core-js).

Hi, thanks to offer leaflet-bing-layer, it is great!

I am new here, trying to "zoom in" (by interpolation if not possible more tham 18)...

    var BING_KEY = 'AuhiCJHlGzhg93IqUH_oCpl_-ZUrIE6SPftlyGYUvr9Amx5nzA-WqGcPquyFZl4L'

    var map = L.map('map').setView([1.2862100, 103.8541900], 18)
    map.options.maxZoom = 20;
    map.options.maxNativeZoom = 18;

    var bingLayer = L.tileLayer.bing(BING_KEY).addTo(map)

It is not working (blank image), after 18 (clicking "+")

It would be nice if there was a typescript support for me to use it in my angular cli project

  const bingLayer = L.tileLayer.bing({
    bingMapsKey:BINGKEY,
    imagerySet:'CanvasLight',
    culture:'af',
  })

But its not work.

Hi
This is the code

let map = L.map('map').setView([27.991369850942526,86.88915252685547], 3);
L.tileLayer.bing({ bingMapsKey, culture: "zh-Hans" }).appTo(map);
There was nothing changed . Am I misunderstand this property? ^_^

I installed the Leaflet.TileLayer.PouchDBCached plugin to cache the tiles for offline use, but it doesn't seem to work. The plugin keeps requesting tiles from the server and ignores the cache.
did anybody tried this?

I have recently upgraded to Angular 10 and am receiving the error

WARNING in myComponent.ts depends on 'leaflet-bing-layer'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

As per this stackOverflow post, please could you bundle as an ECMAScript module (ESM) bundle?

Thanks

the demo and the tileLayer.bing(MyBingMapsKey).addTo(map) example say nothing about how to use options... Please show at README a good example, with standard (e.g. "attribution") and exclusive (e.g. "bingMapsKey" or "culture") parameters.

I tried to use map with russian labels:

L.tileLayer.bing({bingMapsKey: '*****', id: 'bing', imagerySet: 'AerialWithLabelsOnDemand', culture: 'ru', attribution: '.....'}),

But labels still in en_US. So i added this line before line 163 "return url" in getTileUrl method:

url = url.replace(/en\-US/, this.options.culture)

And now all works.

Please create a typescript definition file; otherwise, I can't use this in our Angular application and will have to move away from Leaflet towards OpenLayers.

Thank you.

When the longitude is > 180 or < -180, which happens when the map is allowed to wrap, the bounding box intersection logic does not normalize the longitude to something within those bounds and results in no attribution.

how to open two bing base map (satellite and street) layer group and layer control with leaflet?

In the index.js file you can find a variable called statics.METADATA_URL that points to the Bing Maps script of version 1:

statics: {
    METADATA_URL: 'https://dev.virtualearth.net/REST/v1/Imagery/Metadata/{imagerySet}?key={bingMapsKey}&include=ImageryProviders&uriScheme=https',
    POINT_METADATA_URL: 'https://dev.virtualearth.net/REST/v1/Imagery/Metadata/{imagerySet}/{lat},{lng}?zl={z}&key={bingMapsKey}&uriScheme=https'
  }

I suppose I can overwrite this url and use a newer version, right? Does leaflet-bing-layer support the usage of Bing Maps version 8? I ask because the embedding of the v8 script is described in this migration guide and different (e.g., asynchronous) from older versions:

<script type='text/javascript' src='http//www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>