7+ React Map 使い方 References

React map library comparison LogRocket Blog from blog.logrocket.com

Introduction

React Map is a popular library used to integrate maps into React applications. It is a powerful tool that allows developers to create interactive and dynamic maps easily. In this article, we will discuss the basics of React Map and its usage in developing web applications.

Installing React Map

To start using React Map, you need to install it by running the following command in your terminal:

npm install react-map-gl

This command will install React Map and its dependencies in your project. Once installed, you can import it to your project using the following code:

import ReactMapGL from 'react-map-gl';

Setting Up a Map

To set up a map, you need to create a new instance of the ReactMapGL component and pass it the required props, such as the map style, viewport, and access token. Here's an example:

import React, { useState } from 'react'; import ReactMapGL from 'react-map-gl'; const Map = () => { const [viewport, setViewport] = useState({ latitude: 37.7577, longitude: -122.4376, zoom: 8 }); return ( setViewport(nextViewport)} mapboxApiAccessToken={'YOUR_ACCESS_TOKEN'} /> ); }; export default Map;

Adding Markers

React Map allows you to add markers to your maps easily. You can use the Marker component to add markers to your map. Here's an example:

import React, { useState } from 'react'; import ReactMapGL, { Marker } from 'react-map-gl'; const Map = () => { const [viewport, setViewport] = useState({ latitude: 37.7577, longitude: -122.4376, zoom: 8 }); return ( setViewport(nextViewport)} mapboxApiAccessToken={'YOUR_ACCESS_TOKEN'} >

Marker

); }; export default Map;

Adding Popups

Popups are an excellent way to display additional information about a marker on your map. You can use the Popup component to add popups to your map. Here's an example:

import React, { useState } from 'react'; import ReactMapGL, { Marker, Popup } from 'react-map-gl'; const Map = () => { const [viewport, setViewport] = useState({ latitude: 37.7577, longitude: -122.4376, zoom: 8 }); const [selectedMarker, setSelectedMarker] = useState(null); return ( setViewport(nextViewport)} mapboxApiAccessToken={'YOUR_ACCESS_TOKEN'} > setSelectedMarker(true)}>

Marker

{selectedMarker && ( setSelectedMarker(null)} >

This is a popup!

)} ); }; export default Map;

Conclusion

React Map is a powerful library that simplifies the process of integrating maps into React applications. It provides developers with a wide range of features, such as markers and popups, that make it easy to create interactive and dynamic maps. With the basics covered in this article, you should be able to get started with React Map and create your own maps in no time. Happy mapping!