Map with drawing Zones

https://map-with-drawing-zones.web.app/

1. Features
2. Technologies and libraries used
3. Project structure
4. Integration in project
5. MapWithZones API
6. Models

Features

Admin Mode

• creating zone (free drawing like pencil)
• choose color of zone
• setting zone name
• deleting zone
• editing zone

User Mode

• setting marker on the map
• setting radius of the circle and drawing it on the map
• setting time for point and construction and drawing of isochrones
• finding zones that fall within the radius

Technologies and libraries used

• React
• Mapbox
• Turf
• Lodash
• Axios

Project structure

└── map-with-zones/                 # Main folder
    ├── api/                        # Services for API interactions
    ├── components/                 # React components
    ├── controls/                   # Mapbox controls
    ├── layers/                     # Mapbox layers
    └── utils/                      # Utils
    index.jsx                       # Main component
    index.scss                      # Styles css

Integration in project

The main component in folder src/map-with-zones you need to copy this folder to your project. After install the required dependencies:
npm i axios localforage lodash mapbox-gl @turf/turf

Example of usage:
To use you need a mapbox token (https://docs.mapbox.com/help/how-mapbox-works/access-tokens/)

import { MapWithZones } from "./map-with-zones";

const App = () => {
    return (
        <div className="App">
            <MapWithZones mapToken={"YOUR MAPBOX TOKEN"} />
        </div>
    );
};

MapWithZones API

name	type	required	default	description
mapToken	String	true		Mapbox token (https://docs.mapbox.com/help/how-mapbox-works/access-tokens/)
mapStyle	String	false	mapbox://styles/mapbox/streets-v11	Mapbox map style (https://docs.mapbox.com/vector-tiles/reference/)
isAdmin	String	false	false	Selecting the use mode Admin or User
cityCoor	mapboxgl.LngLat	false	Bengaluru	Сity coordinates
selectedZones	string[]	false	[]	Selected zones ID which will be highlighted on the map

Used models

Now the saving of zones is implemented not through API, but through local storage. After building the API for storing zones, it will be necessary to change the methods in the ZoneApi class src/map-with-zones/api/zone-api.js

Now no API for sending zones which user select. After building APi it will be necessary to change the methods in the UserApi class src/map-with-zones/api/user-api.js

type Zone = {
    /** Zone id */
    id: strins;
    /** Zone name */
    name: string;
    /** Zone layer color */
    color: string;
    /** Zone geometry coordinates */
    coordinates: Array<Array<number>>;
};

type UserZone = {
    /** Zone id */
    id: strins;
    /** Zone name */
    name: string;
};

type UserData = {
    /** selected point on map */
    lngLat: mapbox.LngLat;
    /** selected radius */
    radius: number;
    /** zones that fall within radius */
    zones: Array<UserZone>;
};