diff --git a/docs/README.md b/docs/README.md index 66986f02..8426812e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,5 +1,3 @@ -# vis.gl Project Template +# deck.gl-community -This is a template for vis.gl projects. - -[Creating a repository from a template](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template) +This repository contains a collection of community supported modules for [deck.gl](https://deck.gl). diff --git a/docs/modules/bing-maps/README.md b/docs/modules/bing-maps/README.md new file mode 100644 index 00000000..24016030 --- /dev/null +++ b/docs/modules/bing-maps/README.md @@ -0,0 +1,96 @@ +# Overview + +This module allows [deck.gl](https://deck.gl) to be used as a Bing Maps custom layer. + +## Installation + +```bash +npm install deck.gl deck.gl-bing-maps +``` + +## Usage + +```js +import {loadModules} from 'deck.gl-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` (`string[]?`) - 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](https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/customoverlay-class). + +```js +const deckOverlay = new DeckOverlay({...}); +map.layers.insert(deckOverlay); +``` + +The constructor accepts a props object that is passed to the [Deck](https://deck.gl/docs/api-reference/core/deck) constructor. See the [limitations](#supported-features-and-limitations) section below for more details. + +The following [Deck methods](https://deck.gl/docs/api-reference/core/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*`) diff --git a/docs/modules/bing-maps/table-of-contents.json b/docs/modules/bing-maps/table-of-contents.json new file mode 100644 index 00000000..0f1448a2 --- /dev/null +++ b/docs/modules/bing-maps/table-of-contents.json @@ -0,0 +1,7 @@ +{ + "type": "category", + "label": "deck.gl-bing-maps", + "items": [ + "modules/bing-maps/README" + ] +} diff --git a/modules/graph-gl/docs/README.md b/docs/modules/graph-gl/README.md similarity index 100% rename from modules/graph-gl/docs/README.md rename to docs/modules/graph-gl/README.md diff --git a/modules/graph-gl/docs/advanced/custom-layout.md b/docs/modules/graph-gl/advanced/custom-layout.md similarity index 100% rename from modules/graph-gl/docs/advanced/custom-layout.md rename to docs/modules/graph-gl/advanced/custom-layout.md diff --git a/modules/graph-gl/docs/advanced/gallery.md b/docs/modules/graph-gl/advanced/gallery.md similarity index 99% rename from modules/graph-gl/docs/advanced/gallery.md rename to docs/modules/graph-gl/advanced/gallery.md index 520288a4..293ce465 100644 --- a/modules/graph-gl/docs/advanced/gallery.md +++ b/docs/modules/graph-gl/advanced/gallery.md @@ -1,5 +1,6 @@ # Experimental Layouts +```css