0

I am using react project, so created create-react-app with tailwind Css by following this guide: https://tailwindcss.com/docs/guides/create-react-app, In my project I need to have Map so I can get the nearest location and so on. So followed this guidline: https://github.com/visgl/react-map-gl and also got the Access Token and Mapbox style from https://studio.mapbox.com/. I cannot figure out what is the reason that I cannot get Map to display on my webpage. Have googled and also have tried almost all the options mention in Stackoverflow but nothing seems to work for me. Some one suggested to add babel loader rules in craco.config.js file, but no luck with this either. Can anyone help me out with this. Will be much Appreciated!Thanks in Advance

enter image description here

My Map.js file:

import { useState } from "react";
import ReactMapGL, { Marker, Popup } from "react-map-gl";
//import getCenter from "geolib/es/getCenter";

// Adding Custom Environment Variables
function Map() {
  const [viewport, setViewport] = useState({
    width: "100",
    height: "400",
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 11,
  });

  return (
    <div>
      <h2 className="text-red-500">Map box map goes here....</h2>
      <ReactMapGL
        mapStyle="mapbox://styles/mapbox/ckszotu58a7dz17qh8ysv970j"
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
        {...viewport}
        onViewportChange={(viewport) => setViewport(viewport)}
      ></ReactMapGL>
    </div>
  );
}

export default Map;

//======================================================
 App.js file rendering it:
<main>
  <section className="bg-gray-900 hidden xl:inline-flex xl:min-w-[300px]">
    <Map />
  </section>
</main>


// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
  babel: {
    loaderOptions: {
      ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"],
    },
  },
};




// in package.json added the last two lines too

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "not chrome < 51",  // this
      "not safari < 10"   // and this
    ],
Ayesha
  • 211
  • 1
  • 2
  • 13

1 Answers1

0

There are 2 potential issue that could prevent your map from being displayed.

  1. Make sure the mapStyle from Studio mapbox and mapboxApiAccessToken are correctly paired.
  2. The width and height in viewport must include units

You can start with this minimal example and then add other features that you need (such as Marker, Popup, et cetera).

import React from "react";
import ReactMapGL from "react-map-gl";

function Map() {
  const [viewport, setViewport] = React.useState({
    width: "100px", //or full width then set width: "100vw",
    height: "400px", //full height then set height: "100vh",
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 11
  });

  return (
    <ReactMapGL
      mapStyle="mapbox://styles/mapbox/ckszotu58a7dz17qh8ysv970j"
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
      onViewportChange={(viewport) => setViewport(viewport)}
      {...viewport}
    ></ReactMapGL>
  );
}

export default Map;
Kevin Le - Khnle
  • 10,579
  • 11
  • 54
  • 80
  • Kevin Le - Khnle, Thank you so much, its working. – Ayesha Sep 01 '21 at 15:49
  • Hi @Kevin Le, When I do refresh then my map doesnot load properly, in the console there is a message saying : " mapbox-gl.js:31 This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css", So I googled and tried to add this import in my index.js --- "import "mapbox-gl/dist/mapbox-gl.css"; But still the map doesnot load whole it'sonly loading half of it. – Ayesha Sep 01 '21 at 22:35
  • @Ayesha If you send me your token and mapStyle somehow, I will try to do a sandbox – Kevin Le - Khnle Sep 02 '21 at 01:46
  • Le, I was thinking I can pus my code to github and make it private as well as give you the access to it. But then I need your Email address to add you. – Ayesha Sep 02 '21 at 07:33
  • Le, I have sended you the github invitaion, its still in pending status. Are you able to accept it or ? Let me know. Thanks – Ayesha Sep 03 '21 at 16:35