The application is designed to display the location of companies in a user-friendly way on a map with the ability to group the created markers into clusters. Various options for displaying map layers and additional options are available.
| Structure: | |
|---|---|
| Dependencies |  |
| Appearance: | |
|---|---|
 |
 |
| Appearance (mobile version): | |
|---|---|
 |
 |
| Portrait | Landscape |
The following additional libraries are used:
- Leaflet: JavaScript library for interactive maps
- Leaflet.markercluster: An extension to Leaflet that allows markers to be grouped into clusters to improve map display efficiency.
- geoBoundaries Global Database: Political Administrative Boundaries Database an open license, standardized resource of boundaries for every country in the world.
The libraries are integrated into the project and no additional installation is required.
- Download the project from the repository.
- Open the HTML file in your web browser or use a local server to run it.
- Map: The map coordinates and parameters are configured in
L.map('map').setView([49.0, 31.0], 6);in themap.jsfile. - Markers: Company data is loaded from the
companies.jsonfile and used to place markers on the map. Markers are stored in themarkersfolder. - Clusters: The clustering of markers is implemented using
Leaflet.markercluster. - Legend: Legend data is loaded from the
legend.jsonfile. Markers are stored in themarkersfolder.
- State borders of Ukraine: Geodata for the borders of Ukraine are loaded from the
geoBoundariesGeneral.geojsonfile. - Regional borders: The geodata for Ukrainian regions are loaded from the
geoBoundariesSimplified.geojsonfile. - District borders: The geodata for for districts of Ukraine are loaded from the
geoBoundariesDetailed.geojsonfile.
- Adding Interactivity: I am considering adding additional interactivity for markers or additional layers on the map.