CODEWITHSUNDEEP
leafletwebglreact-leafletdeck.gl
johnny
johnny

Reputation: 2122

Using deck.gl with react-leaflet

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?

Upvotes: 5

Views: 3064

Answers (2)

zakjan
zakjan

Reputation: 2559

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.

Upvotes: 0

tsherif
tsherif

Reputation: 11710

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.

Upvotes: 4

Related Questions