Co je Mapbox?
Mapbox je platforma pro živé umístění, která umožňuje vývojářům vytvářet interaktivní a intuitivní mapová rozhraní pro různé aplikace. Na webu se to provádí pomocí knihovny JavaScriptu nazvané Mapbox GL JS, která používá Web GL k vykreslování interaktivních map z vektorových čar a stylů Mapbox.
Chcete vytvořit mapová rozhraní s Reactem? Díky inženýrům Uber to můžeme udělat relativně snadno prostřednictvím balíčku nazvaného React-map-gl, který poskytuje integraci React pro mapbox-gl a také snadno použitelnou knihovnu komponent, na které lze stavět.
V tomto článku budeme používat react-map-gl k vytvoření dvou mapových komponent, z nichž jedna zobrazuje vaši aktuální polohu a druhá vám umožňuje vyhledávat místa po celém světě.
Nejprve zavedeme naši aplikaci pomocí create-react-app spuštěním create-react-app mapbox-react .
Zjištění vaší pozice
Rádi bychom začali s přesným určením polohy. S react-map-gl můžeme to udělat pomocí vestavěné komponenty nazvané GeolocateControl což nám umožňuje sledovat polohu uživatele prostřednictvím prohlížeče. Než to budeme moci udělat, musíme inicializovat mapu pomocí MapGL komponenta z react-map-gl . Podívejme se, jak to děláme v kódu, a abychom věci udělali zajímavějšími, použijeme React Hooks.
Pojďme nainstalovat respond-map-gl spuštěním npm install react-map-gl .
Nyní nastavíme naši komponentu.
import React,{ useState } from 'react'
import MapGL, {GeolocateControl } from 'react-map-gl'
import config from '../config'
import 'mapbox-gl/dist/mapbox-gl.css'
const TOKEN=config.REACT_APP_TOKEN
const geolocateStyle = {
float: 'left',
margin: '50px',
padding: '10px'
};
const Map = () => {
const [viewport, setViewPort ] = useState({
width: "100%",
height: 900,
latitude: 0,
longitude: 0,
zoom: 2
})
const _onViewportChange = viewport => setViewPort({...viewport, transitionDuration: 3000 })
return (
<div style={{ margin: '0 auto'}}>
<h1 style={{textAlign: 'center', fontSize: '25px', fontWeight: 'bolder' }}>GeoLocator: Click To Find Your Location or click <a href="/search">here</a> to search for a location</h1>
<MapGL
{...viewport}
mapboxApiAccessToken={TOKEN}
mapStyle="mapbox://styles/mapbox/dark-v8"
onViewportChange={_onViewportChange}
>
<GeolocateControl
style={geolocateStyle}
positionOptions={{enableHighAccuracy: true}}
trackUserLocation={true}
/>
</MapGL>
</div>
)
}
export default Map
Výše uvedený kód vytvoří mapu s možností určit vaši aktuální pozici kliknutím na tlačítko v levém horním rohu stránky. Pojďme si rozebrat, jak to funguje.
Abychom iniciovali naši mapu, iniciujeme naši komponentu Mapa a pomocí stavu Hook iniciujeme objekt s názvem viewport které vložíme do komponenty MapGL jako rekvizity. Použijeme viewport inicializuje počáteční souřadnice mapy spolu s jejím přiblížením a velikostí.
Také iniciujeme setViewport funkce, která bude použita k aktualizaci hodnot výřezu. MapGL komponenta vyžaduje tři další rekvizity, mapboxApiAccessToken což je přístupový token potřebný k volání do mapbox API a lze jej získat z mapboxu. mapStyle odkazy na různé styly map poskytované mapboxem, v tomto případě použijeme tmavý režim.
Poslední rekvizita je onViewportChange což je funkce, kterou používáme k aktualizaci našeho viewport . To je vše, máme funkční mapu! Nyní musíme přidat služby určování polohy.
Pro přidání geolokace importujeme GeolocateControl komponentu, ke které poskytneme tři rekvizity. První je styl deklarovaný jako geolocateStyle dříve předán jako objekt stylu React, to určuje velikost a umístění tlačítka, které spouští geolokační službu. Další podpora nám positionOptions což je objekt obsahující možnosti předané do Geolocation API pro získání a sledování polohy uživatele, jako je povolení vysoké přesnosti, což provedeme nastavením enableHighAccuracy pravda. Nastavili jsme také rekvizitu s názvem trackUserLocation to je pravda, díky tomu je tlačítko geolokace přepínačem, který sleduje a aktualizuje polohu uživatele, když se změní.
Hledání místa
Abychom mohli vyhledat polohu uživatele, budeme stavět na schopnostech react-map-gl pomocí balíčku nazvaného React-map-gl-geocoder, což je obal React pro mapbox-gl-geocoder pro použití s React-map-gl.
Chcete-li jej nainstalovat, spusťte npm install react-map-gl-geocoder
Budeme také používat deck-gl, vizualizační rámec od Uberu, abychom přidali překryvnou vrstvu označující oblast, kterou jsme hledali na naší mapě, abychom měli větší čitelnost. Chcete-li jej nainstalovat run npm install deck.gl .
Skvělé, nyní jsme připraveni postavit naši komponentu, kterou pojmenujeme SearchableMap , náš kód by měl vypadat takto:
import "mapbox-gl/dist/mapbox-gl.css"
import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css"
import React, { Component } from 'react'
import MapGL from "react-map-gl";
import DeckGL, { GeoJsonLayer } from "deck.gl";
import Geocoder from "react-map-gl-geocoder";
const token = process.env.REACT_APP_TOKEN
class SearchableMap extends Component {
state = {
viewport :{
latitude: 0,
longitude: 0,
zoom: 1
},
searchResultLayer: null
}
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 };
return this.handleViewportChange({
...viewport,
...geocoderDefaultOverrides
});
};
handleOnResult = event => {
this.setState({
searchResultLayer: new GeoJsonLayer({
id: "search-result",
data: event.result.geometry,
getFillColor: [255, 0, 0, 128],
getRadius: 1000,
pointRadiusMinPixels: 10,
pointRadiusMaxPixels: 10
})
})
}
render(){
const { viewport, searchResultLayer} = this.state
return (
<div style={{ height: '100vh'}}>
<h1 style={{textAlign: 'center', fontSize: '25px', fontWeight: 'bolder' }}>Use the search bar to find a location or click <a href="/">here</a> to find your location</h1>
<MapGL
ref={this.mapRef}
{...viewport}
mapStyle="mapbox://styles/mapbox/streets-v9"
width="100%"
height="90%"
onViewportChange={this.handleViewportChange}
mapboxApiAccessToken={token}
>
<Geocoder
mapRef={this.mapRef}
onResult={this.handleOnResult}
onViewportChange={this.handleGeocoderViewportChange}
mapboxApiAccessToken={token}
position='top-left'
/>
</MapGL>
<DeckGL {...viewport} layers={[searchResultLayer]} />
</div>
)
}
}
export default SearchableMap;
Nejprve vytvoříme mapový kontejner s MapGL komponentu, jako jsme to udělali v předchozí komponentě. Dále použijeme komponentu Geocoder z react-map-gl-geocoder což je vyhledávací komponenta, která vrací souřadnice daného umístění z Mapbox API.
Chce to pár rekvizit. onResult prop je funkce, která se volá, když je z vyhledávání vrácen parametr výsledku a v našem případě vytvoří GeoJsonLayer objekt a umístí jej do stavu jako searchResultLayer . Tato vrstva GeoJsonLayer se pak použije k vytvoření vrstvy deck-gl nad mapou, která označuje hledané místo na mapě.
Stejně jako MapGL Geocoder má také onViewportChange funkce, která je volána k aktualizaci mapy, v našem případě jsme se rozhodli vytvořit samostatnou funkci, která to zvládne, s názvem handleGeocoderViewportChange tak, aby se přepsala doba trvání přechodu při aktualizaci výřezu na mapě. Chcete-li použít výchozí hodnoty, můžete použít stejný ovladač změny výřezu jako MapGL. Geokodér také vyžaduje token mapbox pro přístup k mapbox API a načítání umístění.
Při vyhledávání náš geokodér navrhne některá místa, jak je uvedeno níže.
Také si všimnete, že vytváříme a používáme odkaz, který používáme k integraci dvou komponent, a je předán oběma komponentám jako mapRef prop.
Posledním kouskem v naší prohledávatelné mapě je vrstva deck.gl, pro kterou jsme vytvořili data. To se vykreslí na mapě, když hledáme oblast. Jsou předány podrobnosti o výřezu a také searchResultLayer kterou používá ke generování tečky nad naší polohou, jak je znázorněno níže.
A je to, máme mapu s možností vyhledávání!
Směrování
Všimněte si, že jsem umístil odkazy na komponenty v horní části každé komponenty. Nyní upravíme App.js a přidáme směrování k propojení těchto dvou komponent. Budeme používat react-router-dom abyste toho dosáhli, spusťte npm install react-router-dom . Vše připraveno, přidejte naše trasy.
import React from 'react'
import './App.css'
import Map from './components/Map'
import SearchableMap from './components/SearchableMap';
import { Route, Switch, BrowserRouter } from 'react-router-dom'
function App() {
return (
<div>
<BrowserRouter >
<Switch>
<Route exact path="/" component={Map} />
<Route exact path="/search" component={SearchableMap} />
</Switch>
</BrowserRouter>
</div>
)
}
export default App
Skvělé, všichni jsme připraveni, spusťte svou aplikaci a pohrajte si se dvěma komponentami. Zde je návod, jak budou vypadat po dokončení.
Závěr
Mapbox GL je skvělý nástroj pro vytváření interaktivních mapových rozhraní as react-map-gl integrace do aplikací React je ještě jednodušší. Kromě tohoto okolního ekosystému balíčků od Uberu můžete rozšířit jeho funkčnost a vytvořit řadu skvěle vypadajících rozhraní pomocí deck-gl k vytvoření úchvatně vypadajících překryvných vrstev.
Plug:LogRocket, DVR pro webové aplikace
LogRocket je frontendový protokolovací nástroj, který vám umožní přehrát problémy, jako by se staly ve vašem vlastním prohlížeči. Namísto hádání, proč k chybám dochází, nebo žádostí uživatelů o snímky obrazovky a výpisy protokolů, vám LogRocket umožňuje přehrát relaci, abyste rychle pochopili, co se pokazilo. Funguje perfektně s jakoukoli aplikací, bez ohledu na rámec, a má pluginy pro přihlášení dalšího kontextu z Redux, Vuex a @ngrx/store.
Kromě protokolování akcí a stavu Redux zaznamenává LogRocket protokoly konzoly, chyby JavaScriptu, stacktrace, síťové požadavky/odpovědi s hlavičkami + těly, metadata prohlížeče a vlastní protokoly. Nástroj DOM také zaznamenává HTML a CSS na stránku a vytváří videa dokonalá v pixelech i těch nejsložitějších jednostránkových aplikací.
Vyzkoušejte to zdarma.
Příspěvek Jak používat Mapbox GL s Reactem appeared first on LogRocket Blog.