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

React JSJavascript LibraryFront End Technology

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 −

raja
Published on 29-Sep-2021 08:15:06
Advertisements