"Map with Marker Clusters"

EN | UA

Overview

This application is designed to visualize markers on the map using the Leaflet library and group them using Leaflet.markercluster. The application is designed to display the location of companies on the map with the ability to group markers into clusters. Various options for displaying map layers and additional options are available.

Structure:
Dependencies

Appearance:
Administrative layer	Topographic layer

Appearance (mobile version):
Portrait	Landscape

Technical resources and libraries

The following additional libraries are used:

1. Leaflet: JavaScript library for interactive maps
   • Leaflet Documentation
2. Leaflet.markercluster: An extension to Leaflet that allows markers to be grouped into clusters to improve map display efficiency.
   • Leaflet.markercluster Documentation

The libraries are integrated into the project and no additional installation is required.

Installation and startup

1. Download the project from the repository.
2. Open the HTML file in your web browser or use a local server to run it.

Configuration and Data

1. Map: The map coordinates and parameters are configured in L.map('map').setView([49.0, 31.0], 6); in the map.js file.
2. Markers: Company data is loaded from the companies.json file and used to place markers on the map. Markers are stored in the markers folder.
3. Clusters: The clustering of markers is implemented using Leaflet.markercluster.
4. Legend: Legend data is loaded from the legend.json file. Markers are stored in the markers folder.

Additional Geodata

1. Regions of Ukraine: The geodata for the regions of Ukraine are loaded from the file ukraine.geojson.
2. Borders of Ukraine: Geodata for the borders of Ukraine are loaded from the file ukraine_border.geojson.

Tasks for Future Development

1. Adding Interactivity: I am considering adding additional interactivity for markers or additional layers on the map.

License

Copyright (c) 2023-2024 Serhii I. Myshko