Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 19, 2022 02:00 am GMT

Maps and React

Version Information

  • Node v18
  • React-Mapbox-Gl v15
  • Mapbox-Gl v2

React-mapbox-gl is a library that allows you to use Mapbox GL JS, a JavaScript library for interactive, customizable vector maps, within a React application. It provides a set of React components that make it easy to work with Mapbox GL JS in a declarative way, by allowing you to specify the map's behavior and style as props on a React component.

To get started with react-mapbox-gl, you will need to have a Mapbox access token, which you can obtain by signing up for a Mapbox account. Once you have your access token, you can install the library using npm or yarn:

npm install react-mapbox-gl mapbox-gl

or

yarn add react-mapbox-gl mapbox-gl

Next, you can import the Map component from react-mapbox-gl and use it to render a map in your application:

import React from 'react';import MapboxGL from 'mapbox-gl';import { Map } from 'react-mapbox-gl';const App = () => {  return (    <Map      style={{        width: '100%',        height: '100%',      }}      mapboxAccessToken={mapbox_token}      initialViewState={{        latitude: 29.935260993668,        longitude: -90.08128396541,        zoom: 12,        pitch: 60,      }}      mapStyle='mapbox://styles/mapbox/light-v11'    />  );};export default App;

The Map component takes a number of props that allow you to customize the appearance and behavior of the map. For example, you can use the mapStyle prop to specify the Mapbox style to use for the map, and the center and zoom props to control the initial map view.

You can also add other Mapbox GL JS features to the map using the other components provided by react-mapbox-gl, such as Marker, Popup, and Layer. For example, you can add a marker to the map like this:

import React, { useState } from 'react';import MapboxGL from 'mapbox-gl';import { Map, Marker } from 'react-mapbox-gl';const App = () => {  const [mark, setMark] = useState()  const [showPopup, setShowPopup] = useState(false)const {lat, lon} = markreturn (    <Map      style="mapbox://styles/mapbox/streets-v9"      containerStyle={{        height: '400px',        width: '100%'      }}      center={[-74.50, 40]}      zoom={9}    >    {/*    based on the mark object the mark    the popup will render conditionally    */}    {showPopup ?      <Marker        longitude={lon}        latitude={lat}        onClick={() => setShowPopup(false)}      >      </Marker>    :      <Popup        longitude={lon}        latitude={lat}        anchor='bottom'        closeOnClick={false}        onClose={() => setShowPopup(true)}        focusAfterOpen={true}      >      {/* popup info*/}      </Popup>    }    </Map>  );};export default App;

The Marker and the Popup component takes a coordinates prop that specifies the latitude and longitude of the marker, and you can add any content you want inside the Marker component to customize the appearance of the marker.

react-mapbox-gl also provides several other features that make it easy to work with Mapbox GL JS in a React application. For example, you can use the onStyleLoad prop to perform an action when the map style has finished loading, or use the onClick prop to handle click events on the map. You can find a full list of available props


Original Link: https://dev.to/codingmustache/maps-and-react-1nlm

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To