Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Deck.gl Layers and Utility Support for vue-maplibre-gL #106

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

MostafaGamalSayed
Copy link

Summary of Changes

This pull request enhances the package with the following additions:

  1. New Components for Deck.gl Layers:

    • Added MglDeckGeojsonLayer component to integrate Deck.gl's GeoJsonLayer (@commit:43bab18a).
    • Added MglDeckArcLayer component to integrate Deck.gl's ArcLayer (@commit:2dba67d3).
  2. Core Composable for Layer Management:

    • Introduced useDeckLayer composable to handle lifecycle and reactivity for Deck.gl layers within Maplibre (@commit:462eb07f).
  3. Utility and Prop Configuration:

    • Added deck.layer.lib.ts, which defines common and layer-specific props with utilities for Deck.gl layers, ensuring reusable, type-safe layer configurations (@commit:9503c64c).
  4. New Dependencies:

    • Added Deck.gl-related packages (@deck.gl/core, @deck.gl/layers, @deck.gl/mapbox) to the project (package.json updates) (@commit:b0b75cca).

Features

  • New Deck.gl Layers: Support for ArcLayer and GeoJsonLayer, integrated as reusable Vue components.
  • Dynamic Tooltip Support: Enables reactive tooltips for layers using getTooltip functionality.
  • Interactive Map Layers: Allows developers to add, update, and remove custom Deck.gl layers easily.
  • Composable Architecture: Simplifies usage of Deck.gl layers with Maplibre in Vue projects.

Motivation

The goal of these changes is to expand the functionality of the @indoorequal/vue-maplibre-gl package by introducing seamless integration with Deck.gl layers. These enhancements bring extended interactivity, 3D visualization, and customization options for applications using the library. The composable and utility-driven design ensures easier implementation and extension of Deck.gl layers within Vue projects.

Future Plans

This is just the beginning of integrating Deck.gl into the @indoorequal/vue-maplibre-gl package. Over time, the implementation will be extended to include support for all available Deck.gl layers, ensuring the package becomes a comprehensive solution for Deck.gl and Maplibre users. Future layers to be added include ScatterplotLayer, IconLayer, BitmapLayer, and many more.

Testing

  • The changes have been tested with dynamic datasets for both ArcLayer and GeoJsonLayer.
  • Verified layer interactivity, tooltip rendering, and reactivity under different map states

….gl layers

- Defined common `baseLayerProps` and layer-specific props (`arcProps`, `geojsonProps`) for Deck.gl layers.
- Added type-safe support for interactivity, styling, 3D features, and extensions.
- Introduced `genDeckLayerOpts` utility for sanitizing layer configurations.
- Added `useDeckLayer` composable to integrate Deck.gl layers.
- Supports `getTooltip` and manages layer lifecycle with Vue's reactivity.
…x integration

- Added `@deck.gl/core`, `@deck.gl/layers`, and `@deck.gl/mapbox` dependencies.
- Implemented `MglDeckArcLayer` Vue component using Deck.gl's `ArcLayer`.
- Included support for dynamic tooltips, prop validation, and layer configuration.
…tion

- Implemented `MglDeckGeojsonLayer` Vue component using Deck.gl's `GeojsonLayer`.
- Included support for dynamic tooltips, prop validation, and layer configuration.
@francois2metz
Copy link
Member

Hi,

Thanks for your contribution. This add interesting new features. I don't know if it should be integrated to the default package, as it make the library bigger. This is something to look at.
Could you rebase your branch and make sure that the command yarn build? I was not able to build it locally.
Also one or two examples would be nice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants