react-leaflet-milsymbol

!NPM Version

A React Leaflet v4 integration for the milsymbol library, allowing you to easily add military symbols to your React Leaflet maps.

!React Leaflet Milsymbol Example

Installation

``bash
npm install react-leaflet-milsymbol


or

> [!IMPORTANT]
> If using React 19, you will need to add the --legacy-peer-deps flag, as react-leaflet only supports React ^18.0.0

$3

This package requires the following peer dependencies:

- react (v18.0.0 or v19.0.0)
- react-dom (v18.0.0 or v19.0.0)
- leaflet (v1.9.0 or higher)
- react-leaflet (v4.0.0 or higher)
- milsymbol (v3.0.0 or higher)

Make sure to install these dependencies in your project if you haven't already.

Usage

$3

`jsx
import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import { MilSymbol } from 'react-leaflet-milsymbol';

function MyMap() {
return (

url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>

{/ Add a military symbol to the map /}
position={[51.505, -0.09]}
sidc="SFGPEWRH--MT" // Symbol Identification Code
size={30}
options={{
size: 35,
fill: true,
fillOpacity: 0.5,
strokeWidth: 2,
}}
/>

);
}

export default MyMap;
`

$3

The MilSymbol component accepts the following props:

| Prop | Type | Description |
| ---------------- | ----------------------- | -------------------------------------------------------- |
| position | [number, number] | Latitude and longitude where the symbol should be placed |
| sidc | string | Symbol Identification Code (SIDC) |
| size | number | Size of the symbol (optional) |
| options | object | Additional options to customize the symbol (see below) |
| tooltipContent | string or ReactNode | Optional content for tooltip |
| popupContent | string or ReactNode | Optional content for popup |
| eventHandlers | object | Event handlers for the symbol |

#### Options Object

The options object can include any properties available in the milsymbol library, such as:

`javascript
{
size: 35, // Size of the symbol
fill: true, // Fill the symbol with color
fillOpacity: 0.5, // Opacity of the fill
strokeWidth: 2, // Width of the outline stroke
outlineColor: "rgb(0, 0, 0)", // Color of the outline
outlineWidth: 3, // Width of the symbol outline
icon: true, // Show the icon
monoColor: false, // Use monochrome color
civilianColor: false, // Use civilian colors for the symbol
colorMode: "Light", // "Light", "Medium", "Dark"
infoColor: "rgb(70, 70, 70)", // Color for information fields
infoSize: 10, // Size of information fields
alternateMedal: false, // Use alternate medal
}
`

$3

#### Custom Symbol Styling

`jsx
position={[51.505, -0.09]}
sidc="SFGPEWRH--MT"
options={{
size: 40,
fill: true,
fillOpacity: 0.7,
colorMode: "Dark",
monoColor: "rgb(255, 0, 0)",
infoFields: false,
}}
/>
`

#### With Popup and Tooltip

`jsx
position={[51.505, -0.09]}
sidc="SFGPEWRH--MT"
tooltipContent="Infantry Unit"
popupContent={


`jsx
position={[51.505, -0.09]}
sidc="SFGPEWRH--MT"
eventHandlers={{
click: () => {
console.log('Symbol clicked!');
},
mouseover: () => {
console.log('Mouse over symbol');
},
}}
/>
`

API Reference

$3

####

The main component for adding military symbols to your React Leaflet map.

$3

#### useMilSymbol(sidc, options)

A hook for creating milsymbol instances outside of the component.

`jsx
import { useMilSymbol } from 'react-leaflet-milsymbol';

function SymbolPreview() {
const symbol = useMilSymbol("SFGPEWRH--MT", { size: 30 });

return (