Create a React component for adding traffic signs to a Leaflet map

19 August 2023
0
50

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

nametypedescriptionpositionLatLngExpressionMarker position in the mapimagestringMarker URL or Source ImagetitlestringTitle of the MarkerdatasObjectDatas to description Marker basead key and valueheightnumberMarker height sizewidthnumberMarker width sizeanchorHeight?numberOptional* Marker anchor in heightanchorWidth?numberOptional* Marker anchor in widthoffsetHeight?numberOptional* The offset size marker in heightoffsetWidth?numberOptional* 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",
};