Home| Questions|Q 85614
Next
In Process
Aryan Pariyar
Sensei
Asked: 2022-12-06T18:32:56+05:45 In:

How to implement mapbox in nextjs in latest version of react-map-gl

Hello mitro’s

I am working on one of the web app there i want to show map on it. How can i show it on my site I have done some work by seeing docs but its not working in my project

MyCode:

import Map from ‘react-map-gl’;
function Mapp() {
  return
    <Map
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    style={{width: 600, height: 400}}
    mapStyle=’mapbox://styles/aryanpariyar/clbbzjybs000014muujyl5q6h’
    mapboxAccessToken={process.env.mapboxAccessToken}
    />;
    }
export default Mapp;
but its not fetching the data from the site.
here is the docs
mapboxreactreact-map-gl
Share

    Related Questions

    You must login to add an answer.

    Need An Account,

    1 Answer

    1. Explainer

      To implement Mapbox in a Next.js app using the latest version of react-map-gl, you will need to do the following:

      1. Install react-map-gl: Run npm install react-map-gl or yarn add react-map-gl to install the react-map-gl library in your Next.js app.
      2. Get a Mapbox access token: Go to the Mapbox website and sign up for an account to get a Mapbox access token.
      3. Add the Mapbox CSS file to your Next.js app: Add the following line to the head element of your Next.js app’s _app.js file to include the Mapbox CSS file:
      Copy code
      <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
      1. Import react-map-gl and use the Map component: In the component where you want to display the map, import react-map-gl and use the Map component. Pass your Mapbox access token as a prop to the Map component, and set the style prop to the style URL for the Mapbox style you want to use.

      For example:

      Copy code
      import MapGL from 'react-map-gl';

      const MyMap = () => {
      return (
      <MapGL
      width={400}
      height={400}
      mapboxApiAccessToken={'YOUR_MAPBOX_ACCESS_TOKEN'}
      style={"mapbox://styles/mapbox/streets-v11"}
      />
      );
      };

      1. Customize the map: You can customize the map by adding additional props to the Map component, such as latitude, longitude, and zoom to set the initial view of the map, or onViewportChange to handle viewport changes. You can also add other Mapbox components, such as Marker or Popup, to add features to the map.

      For more information and examples, you can refer to the react-map-gl documentation.

      • 0