Creating a Map in React JS without using third-party API

In this article, we are going to create a React app which will show a map without any third-party API. You can edit the map's width and height, add markers to it, and do many more amazing things. We will use the pigeon-maps package to create the map. So, let's get started.

Example

First create a React project −

npx create-react-app tutorialpurpose

Now go to the project directory −

cd tutorialpurpose

Download the install the pigeon-maps package −

npm install --save pigeon-maps

We will use this package to add default maps which are downloaded with library inside the React project.

Add the following lines of code in App.js −

import React from "react";
import { Map, Marker } from "pigeon-maps";

export default function App() {
   return (
      <Map height={300} defaultCenter={[17.3850, 78.4867]} defaultZoom={11}>
         <Marker width={50} anchor={[17.3850, 78.4867]} />
      </Map>
   );
}

Explanation

• This code block will create a map with a focus on defaultCenter and also define how much to zoom in.

• Inside the Map component, we use the Marker to mark a given position.

• Here, we have set the defaultCenter at Hyderabad, India, by supplying its geographical coordinates as arguments.

Output

On execution, it will produce the following output −