0.1.1 • Published 2 years ago
another-react-leaflet-markercluster v0.1.1
another-react-leaflet-markercluster
Markercluster plugin for another-react-leaflet.
Install
npm install --save another-react-leaflet-markercluster leaflet.markercluster
If using typescript also install @types/leaflet.markercluster
.
Usage
Create React App
// setupMarkercluster.ts
// Import markercluster css
import 'leaflet.markercluster/dist/MarkerCluster.css';
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
// MapView.tsx
import React from 'react';
import './setupLeaflet'; // Only needs to be imported once per app.
import './setupMarkercluster'; // Only needs to be imported once per app.
import { MapContainer, Marker, ScaleControl, TileLayer, Tooltip } from 'another-react-leaflet';
import { MarkerClusterGroup } from 'another-react-leaflet-markercluster';
export function MapView() {
return (
<MapContainer zoom={3} center={[0, 0]}>
<ScaleControl/>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
urlTemplate="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
<MarkerClusterGroup>
<Marker latlng={[0, 0]}>
<Tooltip>
<h1>Hello!</h1>
</Tooltip>
</Marker>
<Marker latlng={[0, 1]}>
<Tooltip>
<h1>Hello!</h1>
</Tooltip>
</Marker>
</MarkerClusterGroup>
</MapContainer>
);
}