Getting Started


Cogoport Components provides plenty of map components to integrate your web applications with leaflet map library, and we will improve components experience consistently. Install @cogoport/maps to get started.

We are using leaflet and react-leaflet as base libraries.


Install Cogomaps using any Package registry

npm install @cogoport/maps

After installation, components can be imported using named imports.

import { CogoMaps, L, Marker, Popup} from '@cogoport/maps';


Create a Map component using components from @cogoport/maps

const center = [20.5937, 78.9629];
const icon = new L.Icon({ iconUrl: '/images/default-red.svg', iconSize: [20, 20] });
NEXT_PUBLIC_MAPS_BASE_URL = // testing purposes
const baseLayer = [
		name        : 'Cogo Maps',
		url         : `${process.env.NEXT_PUBLIC_MAPS_BASE_URL}/{z}/{x}/{y}.png`,
		attribution : '<a href="">&copy;Cogoport T&C</a> | <a href="">Privacy & data protection</a>',
		minZoom     : 0,
		maxZoom     : 15,
return (
		style={{ height: '700px', width: '100%' }}
		<Marker position={center} icon={icon}>
				This is a popup

Import the map component with next/dynamic.

const Map = dynamic(() => import('../Map'), {
	ssr: false,

Now use it in any react component

<div className={styles.container}>
	<h2>This is an interactive map !!</h2>
	<Map />

This is how it will look

This is an interactive map !!

For detailed documentation on Leafletclick here.For working examples on react-leafletclick here.