SamSamskies / react-map-gl-geocoder

React wrapper for mapbox-gl-geocoder for use with react-map-gl
MIT License
123 stars 29 forks source link

Adding Geolocate Control - maxZoom ignored #72

Closed Marius-Adam closed 4 years ago

Marius-Adam commented 4 years ago

I'm using Geolocate Control property auto to trigger geolocate on successful mounting of component. I notice that the default maxZoom of 15 is ignored and the geolocate actually zooms in to 20. See below my code

import "mapbox-gl/dist/mapbox-gl.css"; import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css"; import React, { useState, useRef } from "react"; import MapGL, { GeolocateControl } from "react-map-gl"; import DeckGL, { GeoJsonLayer } from "deck.gl"; import Geocoder from "react-map-gl-geocoder";

export default function MapPage() { const [viewport, setViewport] = useState({ latitude: 50.526, longitude: 15.2551, zoom: 4, maxZoom: 15, }); const [searchResultLayer, setSearchResultsLayer] = useState(null); const mapRef = useRef();

const handleViewportChange = (newViewport) => { setViewport({ ...viewport, ...newViewport }); };

const handleGeocoderViewportChange = (viewport) => { const geocoderDefaultOverrides = { transitionDuration: 1000 };

return handleViewportChange({
  ...viewport,
  ...geocoderDefaultOverrides,
});

};

const handleOnResult = (event) => { console.log(event.result); setSearchResultsLayer( new GeoJsonLayer({ id: "search-result", data: event.result.geometry, getFillColor: [255, 0, 0, 128], getRadius: 1000, pointRadiusMinPixels: 10, pointRadiusMaxPixels: 10, }) ); };

console.log(viewport);

return ( <MapGL ref={mapRef} {...viewport} mapStyle="mapbox://styles/mcadamek/ckbmn7bim1knm1imdyamv4qbl" width="100vw" height="100vh" onViewportChange={handleViewportChange} mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_KEY}

<Geocoder mapRef={mapRef} onResult={handleOnResult} onViewportChange={handleGeocoderViewportChange} mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_KEY} position="top-left" />

  <DeckGL {...viewport} layers={[searchResultLayer]}>
    <GeolocateControl
      positionOptions={{ enableHighAccuracy: true }}
      trackUserLocation={true}
      fitBoundsOptions={{ maxZoom: 15 }}
      auto={true}
    />
  </DeckGL>
</MapGL>

); }

SamSamskies commented 4 years ago

Hi @Marius-Adam, I don't think react-map-gl-geocoder is related to your issue since I don't see it rendered in your function. Seems more like an issue for react-map-gl https://github.com/visgl/react-map-gl.