https://github.com/johnimril/leaflet-route

А React application that demonstrates the use of the Leaflet library to display moving markers (trucks) on a map with routes. Routes are generated randomly. This project demonstrates how to integrate react, leaflet, react-leaflet and react-leaflet-hotline.
https://github.com/johnimril/leaflet-route

leaflet react-leaflet react-leaflet-hotline typescript

Last synced: 1 day ago
JSON representation

А React application that demonstrates the use of the Leaflet library to display moving markers (trucks) on a map with routes. Routes are generated randomly. This project demonstrates how to integrate react, leaflet, react-leaflet and react-leaflet-hotline.

• Host: GitHub
• URL: https://github.com/johnimril/leaflet-route
• Owner: JohnImril
• Created: 2024-07-16T00:01:15.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-07-16T11:18:51.000Z (4 months ago)
• Last Synced: 2024-07-17T03:48:33.514Z (4 months ago)
• Topics: leaflet, react-leaflet, react-leaflet-hotline, typescript
• Language: TypeScript
• Homepage: https://johnimril.github.io/leaflet-route/
• Size: 1.45 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Leaflet Route

[Github Pages](https://johnimril.github.io/leaflet-route/)

## Screenshot

![App Screenshot](./assets/screenshot.png)

## Description

This project demonstrates the use of the Leaflet library with React to display moving markers (trucks) on a map with routes. Routes can either be randomly generated.

## Installation

1. Clone the repository:

    ```bash

    git clone https://github.com/JohnImril/leaflet-route.git

    cd leaflet-route

    ```

2. Install dependencies:

    ```bash

    npm install

    ```

## Usage

1. Start the project:

    ```bash

    npm start

    ```

## Project Structure

-   `public/` - contains static files

-   `src/`

    -   `components/`

        -   `ForestryMap.tsx` - main map component

        -   `MovingIcon.tsx` - component for displaying a moving marker

    -   `images/` - contains images, such as truck icons

    -   `types/` - contains TypeScript types

    -   `utils.ts` - utilities for generating routes

    -   `App.tsx` - main application component

    -   `index.tsx` - application entry point

## Example Usage

### Generating Routes

The `generateRoutes` function generates routes radiating out from a starting point. Each route has random changes in direction and speed to create realistic movement.

### Displaying the Map

The `MapComponent` displays the map with markers and routes. Markers move along the routes, and hovering over a route line changes its opacity.

## License

This project is licensed under the terms of the [MIT License](LICENSE).