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";
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-glhttps://github.com/visgl/react-map-gl.
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 };
};
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}
); }