DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

React component to add traffic sign in leaflet map

React Leaflet Traffic Sign

React component to add traffic sign in leaflet map

React component to add traffic sign in leaflet.

React component to add traffic sign in leaflet map

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 }/>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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",
};
Enter fullscreen mode Exit fullscreen mode

License

MIT License.

GitHub

View Github

Warp.dev image

Warp is the #1 coding agent.

Warp outperforms every other coding agent on the market, and gives you full control over which model you use. Get started now for free, or upgrade and unlock 2.5x AI credits on Warp's paid plans.

Download Warp

Top comments (1)

Collapse
 
mohammadtaseenkhan profile image
MD Taseen Khan

The article discusses a React component called ReactLeafletTrafficSign that can be used to add traffic signs to Leaflet maps. Some key points:

  • The component takes props like position, image, title, and data to configure the traffic sign marker.

  • Examples of using the component are provided, showing how to integrate it with the MapContainer and TileLayer components from react-leaflet.

  • The props accepted by the component are documented, including position (the marker position), image (the image URL), title, data (additional data to describe the marker), and size props.

  • An example of the data prop is given, showing how location, timestamp and other information can be passed.

In summary, the article introduces a React component that allows adding customizable traffic sign markers to Leaflet maps in a React application.

Dev Diairies image

User Feedback & The Pivot That Saved The Project

🔥 Check out Episode 3 of Dev Diairies, following a successful Hackathon project turned startup.

Watch full video 🎥

👋 Kindness is contagious

Explore this insightful write-up, celebrated by our thriving DEV Community. Developers everywhere are invited to contribute and elevate our shared expertise.

A simple "thank you" can brighten someone’s day—leave your appreciation in the comments!

On DEV, knowledge-sharing fuels our progress and strengthens our community ties. Found this useful? A quick thank you to the author makes all the difference.

Okay