react-leaflet-milsymbol v0.1.2

react-leaflet-milsymbol

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

Installation

npm install react-leaflet-milsymbol
# or
yarn add react-leaflet-milsymbol
# or
pnpm add react-leaflet-milsymbol

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

Dependencies

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

Basic Example

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

function MyMap() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '500px', width: '100%' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      
      {/* Add a military symbol to the map */}
      <MilSymbol
        position={[51.505, -0.09]}
        sidc="SFGPEWRH--MT" // Symbol Identification Code
        size={30}
        options={{
          size: 35,
          fill: true,
          fillOpacity: 0.5,
          strokeWidth: 2,
        }}
      />
    </MapContainer>
  );
}

export default MyMap;

Props

The MilSymbol component accepts the following props:

Options Object

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

{
  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
}

Advanced Usage

Custom Symbol Styling

<MilSymbol
  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

<MilSymbol
  position={[51.505, -0.09]}
  sidc="SFGPEWRH--MT"
  tooltipContent="Infantry Unit"
  popupContent={
    <div>
      <h3>Infantry Unit</h3>
      <p>Unit ID: 12345</p>
      <p>Status: Active</p>
    </div>
  }
/>

With Event Handlers

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

API Reference

Components

<MilSymbol />

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

Hooks

useMilSymbol(sidc, options)

A hook for creating milsymbol instances outside of the component.

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

function SymbolPreview() {
  const symbol = useMilSymbol("SFGPEWRH--MT", { size: 30 });
  
  return (
    <div>
      <h3>Symbol Preview</h3>
      <div dangerouslySetInnerHTML={{ __html: symbol.toSVG() }} />
    </div>
  );
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• milsymbol - The core library for generating military symbols
• react-leaflet - React components for Leaflet maps