Getting Started

Introduction

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.

Installation

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';

Setup

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 = https://maps.dev.cogoport.io/cogo-tiles // testing purposes
const baseLayer = [
	{
		name        : 'Cogo Maps',
		url         : `${process.env.NEXT_PUBLIC_MAPS_BASE_URL}/{z}/{x}/{y}.png`,
		attribution : '<a href="https://www.cogoport.com/en/terms-and-conditions/">&copy;Cogoport T&C</a> | <a href="https://www.cogoport.com/en/privacy-policy/">Privacy & data protection</a>',
		minZoom     : 0,
		maxZoom     : 15,
	},
];
return (
	<CogoMaps
		center={center}
		style={{ height: '700px', width: '100%' }}
		zoom={4}
		baseLayer={baseLayer}
	>
		<Marker position={center} icon={icon}>
			<Popup>
				This is a popup
			</Popup>
		</Marker>
	</CogoMaps>
);

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 />
</div>

This is how it will look

This is an interactive map !!


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

Table of contents