suryakumara Github contribution chart
suryakumara Github Stats
suryakumara Most Used Languages

Activity

20 Nov 2022

Suryakumara

started

Started On 20 Nov 2022 at 01:56:32
Issue Comment

Suryakumara

[plugin:vite:import-analysis] Failed to resolve import "@cloudscape-design/global-styles/index.css" from "common/App.tsx". Does the file exist?

Describe the bug

[plugin:vite:import-analysis] Failed to resolve import "@cloudscape-design/global-styles/index.css" from "common/App.tsx". Does the file exist?

Reproduction

[plugin:vite:import-analysis] Failed to resolve import "@cloudscape-design/global-styles/index.css" from "common/App.tsx". Does the file exist?

Steps to reproduce

No response

System Info

mac/chrome 

Used Package Manager

npm

Logs

No response

Validations

Forked On 09 Nov 2022 at 09:55:18

Suryakumara

Same error : [plugin:vite:import-analysis] Failed to resolve import "@apollo/client" from "common/App.tsx". Does the file exist?

Commented On 09 Nov 2022 at 09:55:18

Suryakumara

Webpack 5 (Angular 12) compatibility

Loading rotate.png and scale.png by require() is with the new version of webpack (5) not possible anymore. I suggest therefore to use new URL(), so the mode is still compatible with the latest frameworks like Angular 12.

Forked On 25 Oct 2022 at 02:53:57

Suryakumara

Yes Loading rotate.png and scale.png by require() causing error

Commented On 25 Oct 2022 at 02:53:57

Suryakumara

Install this packace got error

image

Forked On 24 Oct 2022 at 08:38:33

Suryakumara

also I think its require loadImage before load this tools image

Commented On 24 Oct 2022 at 08:38:33
Issue Comment

Suryakumara

Mobile Chrome - shaking layers

Actual Result

In Chrome (ver. 65) on mobile device (android 8.0) while moving the camera really slowly, layer objects are shaking. Is this a side effect of MapboxGL & DeckGL cameras?

Expected Result

Camera movements should be as smooth as possible - like basemap MapboxGL.

Reproduce Steps

Open GeoJSONLayer example from DeckGL site on mobile Android device and try to really, really slowly pinch and move the map.

Forked On 18 Oct 2022 at 07:39:24

Suryakumara

Area_.webm

Any idea how I solve this ?

Commented On 18 Oct 2022 at 07:39:24
Issue Comment

Suryakumara

chrome sidebar shaking

Description

My webpage shakes alot in certain ratio of web browser. It does not happen on Microsoft Edge. It does not happen when I just add ReactMapGL component. But it happens when I put ReactMapGL inside DeckGL.

<ReactMapGL {...viewport} width="100%" height="100%" onViewportChange={handleViewportChange} mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN} mapStyle="mapbox://styles/mapbox/streets-v9" onHover={(e) => console.log(e)} > {/*

Repro Steps

I attach my code.

import React, { useState, useCallback } from "react"; import ReactMapGL from "react-map-gl";

import DeckGL from "deck.gl"; import Coordinate from "./Coordinate"; import CityLayer from "./CityLayer"; import MarkerLayer from "./MarkerLayer";

require("dotenv").config();

// Set your mapbox token here const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN; // eslint-disable-line

function Deck() { const [viewport, setViewport] = useState({ latitude: 37.284387, longitude: 127.067898, zoom: 11, bearing: 0, pitch: 10, });

const [latlon, setLatlon] = useState({ latitude: 37.284387, longitude: 127.067898, });

const handleViewportChange = useCallback((newViewport) => { setViewport(newViewport); }, []);

const handleMouseHover = useCallback((e) => { if (e.x !== -1) { const mouseLat = e.coordinate[0]; const mouseLon = e.coordinate[1]; setLatlon({ latitude: mouseLat, longitude: mouseLon, }); } }, []);

const [hoverInfo, setHoverInfo] = useState({});

const hideTooltip = () => { setHoverInfo({}); };

const expandTooltip = (info) => { if (info.picked) { setHoverInfo(info); } else { setHoverInfo({}); } };

const layers = [ CityLayer, ];

return (

<div>
  <DeckGL
    initialViewState={viewport}
    controller={true}
    layers={[layers]}
    onViewportChange={handleViewportChange}
    onHover={handleMouseHover}
  >
    <ReactMapGL
      {...viewport}
      width="100%"
      height="100%"
      onViewportChange={handleViewportChange}
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      onHover={(e) => console.log(e)}
    >
      {/* <div className="navi-control">
<NavigationControl /> 

export default Deck;

Environment (please complete the following information):

  • Framework Version: "deck.gl": "^8.3.4",
  • Browser Version: chrome 86.0.4240.198
  • OS: Win 10

Logs

Forked On 18 Oct 2022 at 07:36:05

Suryakumara

Description

My webpage shakes alot in certain ratio of web browser. It does not happen on Microsoft Edge. It does not happen when I just add ReactMapGL component. But it happens when I put ReactMapGL inside DeckGL.

<ReactMapGL {...viewport} width="100%" height="100%" onViewportChange={handleViewportChange} mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN} mapStyle="mapbox://styles/mapbox/streets-v9" onHover={(e) => console.log(e)} > {/*

*/}

Repro Steps

I attach my code.

import React, { useState, useCallback } from "react"; import ReactMapGL from "react-map-gl";

import DeckGL from "deck.gl"; import Coordinate from "./Coordinate"; import CityLayer from "./CityLayer"; import MarkerLayer from "./MarkerLayer";

require("dotenv").config();

// Set your mapbox token here const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN; // eslint-disable-line

function Deck() { const [viewport, setViewport] = useState({ latitude: 37.284387, longitude: 127.067898, zoom: 11, bearing: 0, pitch: 10, });

const [latlon, setLatlon] = useState({ latitude: 37.284387, longitude: 127.067898, });

const handleViewportChange = useCallback((newViewport) => { setViewport(newViewport); }, []);

const handleMouseHover = useCallback((e) => { if (e.x !== -1) { const mouseLat = e.coordinate[0]; const mouseLon = e.coordinate[1]; setLatlon({ latitude: mouseLat, longitude: mouseLon, }); } }, []);

const [hoverInfo, setHoverInfo] = useState({});

const hideTooltip = () => { setHoverInfo({}); };

const expandTooltip = (info) => { if (info.picked) { setHoverInfo(info); } else { setHoverInfo({}); } };

const layers = [ CityLayer, ];

return (

<div>
  <DeckGL
    initialViewState={viewport}
    controller={true}
    layers={[layers]}
    onViewportChange={handleViewportChange}
    onHover={handleMouseHover}
  >
    <ReactMapGL
      {...viewport}
      width="100%"
      height="100%"
      onViewportChange={handleViewportChange}
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      onHover={(e) => console.log(e)}
    >
      {/* <div className="navi-control">
<NavigationControl /> 

*/} ); } export default Deck;

Environment (please complete the following information):

  • Framework Version: "deck.gl": "^8.3.4",
  • Browser Version: chrome 86.0.4240.198
  • OS: Win 10

Logs

Hi I got same problem, I add map deckgl inisde dialog MUI. any idea how solve this ?

Commented On 18 Oct 2022 at 07:36:05
Create Branch

Suryakumara

Description not entered by the user.

On 06 Oct 2022 at 10:01:44

Suryakumara

fix: autofill texfield

Created On 06 Oct 2022 at 09:53:11
Create Branch

Suryakumara

Description not entered by the user.

On 06 Oct 2022 at 09:52:33
Issue Comment

Suryakumara

Rendering NavigationControl with deck.gl

Hello, I'm not sure if this issue belongs in this repo or deck.gl, let me know if you'd rather have over there.

I'm using react-map-gl with deck.gl, and when I try to use the NavigationControl in my setup, the deck.gl canvas has a higher z-index than the map, and therefor blocks mouse events to the NavigationControl. I haven't seen examples of deck.gl using NavigationContol, so I'm not sure it's at all possible.

Here's roughly my code

 <DeckGL
          layers={[layer]}
          controller={true}
          width={500}
          height={300}
          viewState={viewState}
          onViewStateChange={this.handleViewStateChange}
        >
          <StaticMap mapStyle={defaultMapStyle}>
            <div className="nav" style={navStyle}>
              <NavigationControl
                onViewportChange={viewState =>
                  this.handleViewStateChange({ viewState })
                }
              />
            </div>
          </StaticMap>
        </DeckGL> 

In the resulting HTML the deck.gl canvas and the react-map-gl StaticMap are in separate stacking contexts (each having position: absoulte set), with deck.gl (naturally) staying on top. That makes increasing the z-index of the NavigationControl not sufficient.

One possible solution coule be to make NavigationControl a sibling of DeckGL, but it can't since it depends on having viewport in its context. Is there any other way to do it?

I had an idea, since I'm already managing viewState myself, to pass it directly on to NavigationControl. Would you accept a PR that would open up that possibility (and using the context when it's not being passed as props)? It should be a pretty simple change with the addition of only a couple of lines.

Forked On 05 Oct 2022 at 04:44:56

Suryakumara

ContextProvider={MapContext.Provider} MapContext.Provider not support now. any idea I can use this control ?

Commented On 05 Oct 2022 at 04:44:56

Suryakumara

add treemap

Pushed On 02 Oct 2022 at 02:07:31

Suryakumara

init: treemap

Pushed On 02 Oct 2022 at 05:40:19

Suryakumara

add choropleth

Pushed On 01 Oct 2022 at 05:48:32

Suryakumara

init: treemap

Pushed On 01 Oct 2022 at 05:48:32

Suryakumara

add: heat map

Pushed On 29 Sep 2022 at 02:53:42
Issue Comment

Suryakumara

Layer's visible props does not update when using with React hook useState

Hello, I am using DeckGL with React TypeScript. There is a question relevant to changing layer's visible props dynamically i want to ask:

  1. Normal use case works correctly: layer's visibility changes according to the visible props
const [visible, setVisible] = useState<boolean>(true);
const layers = [
        new GeoJsonLayer({           
            data,
            visible,
        }),
 ] 
  1. useState on layers works unexpectedly: layer's visibility does not change when visible props changes
const [visible, setVisible] = useState<boolean>(true);
const [layers, setLayers] = useState<any[]>([
        new GeoJsonLayer({
            data,
            visible,
        }),
 ]); 

Thank you.

Forked On 28 Sep 2022 at 09:47:50

Suryakumara

That's not how hooks work. visible is evaluated when it's used, in your case, only when the component was rendered the first time (useState(initialState)). You need to construct a new layer instance whenever visible changes.

Hi, I want to ask some question. So if I need to update data inside GeoJSONLayer, I need to re-create new GeoJSONLayer ? . Because I did't get any documentation about how to update data in React.

Commented On 28 Sep 2022 at 09:47:50

Suryakumara

started

Started On 26 Sep 2022 at 09:27:29
Issue Comment

Suryakumara

Popup's accepting altitude

Motivation

First of all thanks for all the work you have been doing through the years with Mapbox. I know you're always open for feedback and suggestions, so here I go...

One of the features I've been missing a lot is the possibility to have popups with altitude for my fill-extrusions and my 3D models, so I finally implemented my own version using THREE.CSS2DObject, but honestly it's only a workaround that could be made within popup class that is the proper place.

Design

To implement these custom popups with altitude, it required to create a new CSS2DRenderer instance and call it's render method on the render member of a CustomLayerInterface new layer. Then, create a CSS2DObjetc, add the HTML inside and set position.

This is how it works using the default sample for 3D buildings adding a queryRenderedFeatures call on click to filter the extrusions at the point clicked, and then creating two popups in the same LngLat position, but one using the custom approach including altitude and the other one using the standard popup class. I use feature.properties.height of the clicked extrusion to create one of these custom popups. Position is quite stable on any camera pitch/zoom/bearing combination. I use a converter to project the LngLat + Alt coordinates to position properly. LabelsOnHeight

Implementation

I have updated the jsfiddle Add a 3D model with Popup in Altitude with a simplified sample for better understanding, comparing this custom popup with a standard Mapbox popup. image

As far as I understand, the main difference (apart from the input of a third parameter for altitude) is the calculation of the css translate values for offsetedPos.x and offsetedPos.y final pixels done in _update member, but I could be wrong. I'm aware this could be a major change for popup but I think it deserves the effort now that your maps are now supporting 3D models and fill-extrusions.

Thanks in advance, @jscastro76

Forked On 26 Sep 2022 at 04:02:03

Suryakumara

Waiting for this feature too.

Commented On 26 Sep 2022 at 04:02:03

Suryakumara

add: scatter plot

Pushed On 24 Sep 2022 at 02:54:45

Suryakumara

add: scatter plot

Pushed On 24 Sep 2022 at 02:50:42

Suryakumara

add: barchart

Pushed On 24 Sep 2022 at 12:20:20

Suryakumara

add: barchart

Pushed On 24 Sep 2022 at 12:18:48
Create Branch

Suryakumara

Description not entered by the user.

On 24 Sep 2022 at 12:18:13

Suryakumara

Description not entered by the user.

On 24 Sep 2022 at 12:18:05

Suryakumara

add: data

Pushed On 04 Sep 2022 at 01:15:01
Create Branch

Suryakumara

Description not entered by the user.

On 03 Sep 2022 at 09:29:10
Create Branch

Suryakumara

Description not entered by the user.

On 03 Sep 2022 at 09:29:03

Suryakumara

add confirm end

Pushed On 02 Sep 2022 at 10:30:55