DEV Community

loading...
Cover image for React Maps without Google Api key or Javascript

React Maps without Google Api key or Javascript

sahilthakare1998 profile image sahilthakare ・2 min read

You’re a developer that recently landed on the React ecosystem. There’s so much going on that you have no idea where to start.
tried React-maps? Why isn’t it working?

One thing that I found is that being part of the ecosystem is the quickest way to understand it.
We’ll be using npm and Mapbox to ship compact and idiomatic React code.

What is Mapbox?

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles. It is part of the Mapbox GL ecosystem.

Mapbox uses access tokens to associate API requests with your account. This token will prevent the abusive use of the map.

Add the Mapbox GL JS module

The instructions below assume you are compiling your JS with Webpack, Browserify, or another module bundler.

1.Install the npm package

npm install mapbox-gl --save
Enter fullscreen mode Exit fullscreen mode

Include the GL JS CSS file

Include the GL JS CSS file in the <head> of your HTML file.

<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
Enter fullscreen mode Exit fullscreen mode

2.Import XMapbox

You can get an access token from Mapbox after creating an account. Mapbox is free unless you have high traffic to your map (more than 50,000 requests per month).
An access token can be provided to as an attribute: access-token.

import { XMapbox } from "elements-x/dist/mapbox";
XMapbox.accessToken =
  "pk.eyJ1Ijoic2FoaWx0aGFrYXJlNTIxIiwiYSI6ImNrbjVvMTkzNDA2MXQydnM2OHJ6aHJvbXEifQ.z5aEqRBTtDMWoxVzf3aGsg";
Enter fullscreen mode Exit fullscreen mode

What’s <x-mapbox>?

<x-mapbox> is one of the custom elements from Elements-X.

3. Display Map With a Marker

By adding <x-marker> in <x-mapbox> and Built-in geocoding by providing an address or longitude and latitude.

app.js

      <x-div>
        <x-mapbox>
          <x-marker id="marker" lnglat="Toronto, Canada" center>
            Looking For Here?
          </x-marker>
        </x-mapbox>
      </x-div>
Enter fullscreen mode Exit fullscreen mode

you can see a map:

Alt Text

By default, map displays in terrain mode, but you can switch to satellite mode by clicking an icon in the top-right corner.
Alt Text

Help yourself with the source code- stackblitz

Congratulations!

You've installed Mapbox GL JS, but don't stop there. Continue exploring and see what you can build.

Discussion (0)

pic
Editor guide