kepler.gl icon indicating copy to clipboard operation
kepler.gl copied to clipboard

Do we have zoom actions

Open SincerelyUnique opened this issue 1 year ago • 2 comments

For example, we want to zoom in/out on map, and we want to get the change from actions, also we want to get the current scale bar value, do we have action to listen this event?

SincerelyUnique avatar Jan 30 '24 02:01 SincerelyUnique

    [ActionTypes.UPDATE_MAP]: (state, action) => {
      let vp = action.payload.payload.viewport
      // vp = {
      //   "width": 1602,
      //   "height": 626,
      //   "latitude": 10.584484326657442,
      //   "longitude": -21.614888755810878,
      //   "zoom": 1.3013429703944752,
      //   "bearing": 0,
      //   "pitch": 0,
      //   "altitude": 1.5,
      //   "maxZoom": 20,
      //   "minZoom": 0,
      //   "maxPitch": 60,
      //   "minPitch": 0,
      //   "normalize": true,
      //   "position": [
      //     0,
      //     0,
      //     0
      //   ],
      //   "transitionDuration": 0
      // }
      console.log("UPDATE_MAP")
      let zoomVal = vp.hasOwnProperty("zoom") ? vp.zoom : 1
      let latitude = vp.hasOwnProperty("latitude") ? vp.latitude : 0
      let longitude = vp.hasOwnProperty("longitude") ? vp.longitude : 0
      if (latitude === 37.75043 && longitude === -122.34679 && zoomVal === 9){
        console.log("error position")
      } else if (vp.hasOwnProperty("zoom")) {
        // let mapState = {
        //   bearing: vp.hasOwnProperty("bearing") ? vp.bearing : 0,
        //   dragRotate: false,
        //   latitude: vp.hasOwnProperty("latitude") ? vp.latitude : 0,
        //   longitude: vp.hasOwnProperty("longitude") ? vp.longitude : 0,
        //   pitch: vp.hasOwnProperty("pitch") ? vp.pitch : 0,
        //   zoom: vp.hasOwnProperty("zoom") ? vp.zoom : 1,
        //   isSplit: false,
        // }
        let mapState = vp
        sampleCustomConfig.config.mapState = mapState

        const message = {
          message: {
            source: "react",
            type: "UPDATE_MAP",
            mapState: mapState
          }
        };
        try {
          window.parent.postMessage(message, '*');
        }catch (e) {
          console.log(e)
        }
      }
      // return {...state, viewport: action.payload}
      return {...state}
    },

I find it works, but another question has happen, how can I keep the viewport when I reload new data? I want to change h3 layer resolution, when I zoom in, I will increase the h3 resolution, when I zoom out, I will decrease the resolution, now when I zoom in , the viewport cannot be locked, it always reset to the initial viewport

SincerelyUnique avatar Jan 30 '24 07:01 SincerelyUnique

The question is how to set viewport when addDataToMap? thanks so much

SincerelyUnique avatar Jan 30 '24 07:01 SincerelyUnique

This is a question not an issue, you may have better luck in the GIthub Discussions tab.

ibgreen avatar Apr 23 '24 16:04 ibgreen