4

Is it possible to use react-leaflet as a base map for deck.gl overlay? I am experimenting with the earthquake example and when I try to use leaflet-react instead of {StaticMap} from 'react-map-gl' it doesn't seem to work. Any ideas?

   import React, {Component, Fragment} from 'react';
   import {MAP} from 'react-leaflet';
   import DeckGL from '@deck.gl/react';


   <DeckGL>
          <MAP
            center = {center}
          />
   </DeckG>

but If I use import {MAP} from 'react-map-gl'; it works cool. Any thought? Any ideas?

johnny
  • 2,032
  • 1
  • 25
  • 45
  • It seems it is only compatible and can be integrated with `react-map-gl` which is also a product of Uber. [On the official github repo ](https://github.com/visgl/deck.gl/tree/8.1-release/examples/get-started/react/mapbox) there are only examples with `react-map-gl` plus [on the official website](https://deck.gl/#/) it mentions only **React and Mapbox GL Integrations**. – kboul May 08 '20 at 08:32

2 Answers2

3

I don't know much about leaflet's API, but you should be able to get it to work if you can disable leaflet's interactivity and then use deck.gl's onViewStateChange to sync the leaflet map's view. This how deck.gl works with the base maps it supports directly.

deck.gl won't automatically work with arbitrary base map APIs because the "out of the box" experience (like with react-map-gl) requires deck.gl to set the base map's view to keep things in sync. Direct support is best with MapboxGL but there's also experimental support for Google Maps and ArcGIS. You can also load arbitrary tile sets using the TileLayer.

tsherif
  • 11,502
  • 4
  • 29
  • 27
0

Recently, I have released deck.gl-leaflet, which integrates deck.gl and Leaflet. There are better options available for a new application, but if you have an existing application already integrated with Leaflet heavily, you can use this to add deck.gl visualization.

zakjan
  • 2,391
  • 1
  • 19
  • 29