repository·main·Indexed 43 days ago
https://github.com/tonghohin/shadcn-mapA specialized map component library for shadcn/ui built with Leaflet and React Leaflet. Version 0.1.0 provides a suite of components including Map, MapTileLayer with automatic theme switching via next-themes, MapMarker with clustering, and various drawing and control tools like MapZoomControl, MapFullscreenControl, and MapSearchControl.
To allow users to switch between different tile layers or toggle layer groups, you must use the MapLayers context and the MapLayersControl UI component.
Required when using multiple tile layers or layer groups together, especially if you want to use MapLayersControl.
defaultTileLayer: The name of the MapTileLayer to select by default.defaultLayerGroups: An array of names of the MapLayerGroups to activate by default.Renders a UI for selecting the active tile layer and toggling layer groups.
tileLayersLabel: Custom label for the tile layers section (Defaults to Map Type).layerGroupsLabel: Custom label for the layer groups section (Defaults to Layers).position: Custom position (Defaults to top-1 right-1).MapLayers component.<Map center={[51.5, -0.09]}>
<MapLayers defaultTileLayer="Satellite">
<MapTileLayer name="Street" url="..." />
<MapTileLayer name="Satellite" url="..." />
<MapLayersControl />
</MapLayers>
</Map>Use these components to manage the visibility of multiple layers.
Used for grouping multiple map layers to control their visibility as a single unit.
name (Required): A unique name for the group.disabled: If true, prevents users from toggling this group in the layer control.Similar to MapLayerGroup, but provides extra capabilities:
name (Required): A unique name for the group.disabled: If true, prevents users from toggling this group in the layer control.MapControlContainer component. This prevents user interactions with your UI—such as double-clicking, dragging, or scrolling—from being passed through to the map and triggering unintended actions like panning or zooming.To group related markers or features and allow users to toggle their visibility, wrap MapLayerGroup components inside a MapLayers container and include the MapLayersControl component.
Use the defaultLayerGroups prop on the MapLayers container to specify which groups should be visible when the map first loads.
<MapLayers defaultLayerGroups={['group-id-1']}>
<MapLayerGroup id="group-id-1">
{/* Markers or features here */}
</MapLayerGroup>
<MapLayersControl />
</MapLayers>You can pass optional callback functions to the LocateControl to react when the user's location is successfully retrieved or when an error occurs (e.g., if the user denies permission).
// Example pattern for using callbacks with Locate Control
<LocateControl
onLocationSuccess={(location) => {
console.log('User location:', location);
}}
onLocationError={(error) => {
console.error('Failed to get location:', error);
}}
/>position prop to the control component. This allows you to use CSS to achieve flexible or complex control layouts.MapFeatureGroup functions similarly to MapLayerGroup. Wrap your feature groups in a MapLayers container and include MapLayersControl to provide a UI for toggling their visibility.DrawControl component allows users to draw shapes directly on the map. You can customize which shapes are available by including only specific shape controls inside the MapDrawControl component.To add the map component to your project, use the shadcn CLI. This component is built using Leaflet and React Leaflet, following shadcn/ui design patterns.
Prerequisite: You must have shadcn/ui already installed and configured in your project.
npx shadcn@latest add @shadcn-map/mapTo react when a user selects a specific place from the autocomplete results, pass an onPlaceSelect callback to the search control.
Important: Because useMap can only be used inside a Map container, you must wrap the search control in a client-side wrapper component if you intend to perform map actions (like panning, zooming, or adding markers) based on the selection.
// Example of a client-side wrapper component
const MapSearchWrapper = () => {
const map = useMap();
const handlePlaceSelect = (place: any) => {
// Perform map actions like panning to the selected location
map.panTo(place.location);
// Or add a marker
};
return (
<SearchControl onPlaceSelect={handlePlaceSelect} />
);
};You can use the onResultsChange callback to receive the list of search results as the user types. This is useful for displaying markers on the map for every result returned by the search engine.
<SearchControl
onResultsChange={(results) => {
// Handle results, e.g., displaying markers for each result
console.log(results);
}}
/>