react-map-gl-geocoder - npm Package Compare versions

Comparing version 2.0.14 to 2.0.15

package.json

		{
		"name": "react-map-gl-geocoder",
		"version": "2.0.14",
		"version": "2.0.15",
		"description": "React wrapper for mapbox-gl-geocoder for use with react-map-gl",
		@@ -5,0 +5,0 @@ "source": "src/index.js",

README.md

		@@ -81,70 +81,54 @@ # react-map-gl-geocoder
		import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css'
		import React, { Component } from 'react'
		import React, { useState, useRef, useCallback } from 'react'
		import MapGL from 'react-map-gl'
		import Geocoder from 'react-map-gl-geocoder'

		function getAccessToken() {
		var accessToken = null;

		if (typeof window !== 'undefined' && window.location) {
		var match = window.location.search.match(/access_token=([^&\/]*)/);
		accessToken = match && match[1];
		}

		if (!accessToken && typeof process !== 'undefined') {
		// Note: This depends on bundler plugins (e.g. webpack) inmporting environment correctly
		accessToken = accessToken \|\| process.env.MapboxAccessToken; // eslint-disable-line
		}

		return accessToken \|\| null;
		}

		// Ways to set Mapbox token: https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens
		const MAPBOX_TOKEN = getAccessToken()
		const MAPBOX_TOKEN = 'REPLACE_WITH_YOUR_MAPBOX_TOKEN'

		class Example extends Component {
		state = {
		viewport: {
		latitude: 37.7577,
		longitude: -122.4376,
		zoom: 8
		}
		}
		const Example = () => {
		const [viewport, setViewport] = useState({
		latitude: 37.7577,
		longitude: -122.4376,
		zoom: 8
		});
		const mapRef = useRef();
		const handleViewportChange = useCallback(
		(newViewport) => setViewport(newViewport),
		[]
		);

		mapRef = React.createRef()

		handleViewportChange = (viewport) => {
		this.setState({
		viewport: { ...this.state.viewport, ...viewport }
		})
		}

		// if you are happy with Geocoder default settings, you can just use handleViewportChange directly
		handleGeocoderViewportChange = (viewport) => {
		const geocoderDefaultOverrides = { transitionDuration: 1000 }
		const handleGeocoderViewportChange = useCallback(
		(newViewport) => {
		const geocoderDefaultOverrides = { transitionDuration: 1000 };

		return this.handleViewportChange({
		...viewport,
		...geocoderDefaultOverrides
		})
		}
		return handleViewportChange({
		...newViewport,
		...geocoderDefaultOverrides
		});
		},
		[handleViewportChange]
		);

		render() {
		return (
		return (
		<div style={{ height: "100vh" }}>
		<MapGL
		ref={this.mapRef}
		{...this.state.viewport}
		ref={mapRef}
		{...viewport}
		width="100%"
		height="100%"
		onViewportChange={this.handleViewportChange}
		mapboxApiAccessToken={MAPBOX_TOKEN}>
		onViewportChange={handleViewportChange}
		mapboxApiAccessToken={MAPBOX_TOKEN}
		>
		<Geocoder
		mapRef={this.mapRef}
		onViewportChange={this.handleGeocoderViewportChange}
		mapRef={mapRef}
		onViewportChange={handleGeocoderViewportChange}
		mapboxApiAccessToken={MAPBOX_TOKEN}
		position="top-left"
		/>
		</MapGL>
		)
		}
		}
		</div>
		);
		};

		@@ -151,0 +135,0 @@ export default Example

react-map-gl-geocoder - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics