@deck.gl-community/bing-maps

@deck.gl-community/bing-maps

This module allows deck.gl to be used as a Bing Maps custom layer.

Installation

npm install deck.gl @deck.gl-community/bing-maps

Usage

import {loadModules} from '@deck.gl-community/bing-maps';
import {GeoJsonLayer} from 'deck.gl';

loadModules().then(({Maps, Location, DeckOverlay}) => {
  // Create map
  const map = new Map(document.getElementById('map'), {
    credentials: 'YOUR_API_KEY',
    // Disable modes that are not supported
    disableBirdsEye: true,
    disableStreetside: true
  });

  map.setView({
    center: new Location(37.78, -122.45),
    zoom: 10
  });

  // Add deck.gl overlay
  const deckOverlay = new DeckOverlay({
    layers: [
      new GeoJsonLayer({
        data:
          'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson',
        lineWidthMinPixels: 2,
        getLineColor: [60, 60, 60],
        getFillColor: [200, 200, 200]
      })
    ]
  });
  map.layers.insert(deckOverlay);
});

API Reference

loadModules

loadModules(moduleNames)

Arguments:

• moduleNames (Array?) - Optional modules to load, e.g. 'Microsoft.Maps.GeoJson', 'Microsoft.Maps.DrawingTools'

Returns a Promise that resolves to the global Microsoft.Maps namespace. A custom class, DeckOverlay, is also added to the namespace.

DeckOverlay

An implementation of CustomOverlay.

const deckOverlay = new DeckOverlay({...});
map.layers.insert(deckOverlay);

The constructor accepts a props object that is passed to the Deck constructor. See the limitations section below for more details.

The following Deck methods can be called directly from a DeckOverlay instance:

• deckOverlay.setProps
• deckOverlay.pickObject
• deckOverlay.pickMultipleObjects
• deckOverlay.pickObjects
• deckOverlay.redraw
• deckOverlay.finalize

Supported Features and Limitations

Supported deck.gl features:

• Layers
• Effects
• Auto-highlighting
• Attribute transitions
• onHover and onClick callbacks
• Tooltip

Not supported features:

• Tilting
• Multiple views
• Controller
• React integration
• Gesture event callbacks (e.g. onDrag*)