React Leaflet Traffic Sign

React component to add traffic sign in leaflet.

Getting Started

import { ReactLeafletTrafficSign } from "ReactLeafletTrafficSign";

<ReactLeafletTrafficSign 
   position={ route[0] } 
   image="/overspeed.png" 
   title="Speed Traffic Sign"
   data={{
      fuel: 5.5,
      speed: 100,
      odometer: 10000,
      dateTime: new Date("2024-02-01T05:48:000Z")
      location: [ -23.45678, 54.3210 ]
   }}
   height={ 24 } 
   width={ 24 }/>

Example

import { MapContainer, TileLayer } from "react-leaflet";
import { ReactLeafletTrafficSign } from "ReactLeafletTrafficSign";

const Example = function() {

   const route = [ [0,0], [1,1], [2,2] ];

   return(
      <MapContainer center={ [0,0] } zoom={ 0 }>

         <TileLayer url="http://tile.com/map"/>

         <Polyline positions={ route } pathOptions={{ color: "#000000", weight: 5 }}/>
         
         <ReactLeafletTrafficSign 
            position={ route[0] } 
            image="/alert.png" 
            title="Alert Traffic Sign"
            data={{
               fuel: 8.2,
               speed: 80,
               odometer: 50000,
               dateTime: new Date("2024-05-02T14:48:500Z")
               location: [ -23.45678, 54.3210 ]
            }}
            height={ 24 } 
            width={ 24 }/> 

      </MapContainer>
   );

};

export default Example;

Props

ReactLeafletTrafficSignProps

name	type	description
position	LatLngExpression	Marker position in the map
image	string	Marker URL or Source Image
title	string	Title of the Marker
datas	Object	Datas to description Marker basead key and value
height	number	Marker height size
width	number	Marker width size
anchorHeight?	number	Optional* Marker anchor in height
anchorWidth?	number	Optional* Marker anchor in width
offsetHeight?	number	Optional* The offset size marker in height
offsetWidth?	number	Optional* The offset size marker in width

Examples Props

// Leaflet Latitude and Longitude Expression
const position = [ -12.3456, 87.6543 ] as L.LatLngExpression;

// datas: { [ key: string ]: string }
const datas = {
   address: "Havelchaussee, 14193 Berlin, Germany",
   position: "52.488192, 13.203841",
   timestamp: "2023-11-08",
};

License

MIT License.

GitHub

View Github