tangrams / tangram

WebGL map rendering engine for creative cartography
https://tangram.city
MIT License
2.2k stars 290 forks source link

Question - any possible way to use with maplibre-gl? #807

Closed openSourcerer9000 closed 1 year ago

openSourcerer9000 commented 1 year ago

These examples look wild, I would love to be able to use these as basemaps and learn this GL/JS yaml syntax. However, I've abandoned leaflet from my webmapping stack and have settled on maplibre-gl with react. Could this somehow be used without leaflet? Thanks

bcamper commented 1 year ago

Hi @openSourcerer9000, apologies for the delay. As you may have noticed from the activity here, this project is essentially in maintenance mode. It's quite stable and has been used for high-volume apps, but it is not in active development, and there is currently no easy way to overlay it on top of Maplibre. Good luck!

JannikGM commented 1 year ago

I don't want to hijack this discussion, but you can also check out https://deck.gl which has an existing mapbox/maplibre integration and also supports shaders. Specifically, their integration is mostly in https://github.com/visgl/deck.gl/blob/master/modules/mapbox/src/mapbox-overlay.ts (to create the overlay) and https://github.com/visgl/deck.gl/blob/master/modules/mapbox/src/deck-utils.ts (to mimic the mapbox matrices), so you could attempt to port it to tangram.

openSourcerer9000 commented 1 year ago

@JannikGM ok wow, this is taking me down quite the rabbit hole. I was familiar with kepler and some of the projects built on top of deck gl, but I didn't realize what a powerhouse framework deck gl was.

So I've been building off this lately (https://github.com/mapcomponents/react-map-components-maplibre), which provides some react components for maplibre gl (map, layer, etc). Do you know if I could simply slap some deck gl on top? For example add a layer like this into my maplibre map? https://philogb.github.io/page/wind/

From this, it seems I could do something like

import DeckGL from '@deck.gl/react';
import MapLibreMap from './MapLibreMap/MapLibreMap'
import { MapComponentsProvider } from "@mapcomponents/react-core"

const App = (data) => (
  <DeckGL
  >
    <LineLayer id="line-layer" data={data} />
    <MapComponentsProvider>
      <MapLibreMap options={mapOptions} mapId="map_1" />
    </MapComponentsProvider>
  </DeckGL>
);

Probably not the right thread for this question but do you happen to know if this should be able to work? As far as I understand it, the XYZ coordinates on these maps just refer to the XYZ positions on the webpage, so you should theoretically be able to render additional layers atop a different framework?