Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Google Maps] Marker Cluster #935

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

Aadlei
Copy link

@Aadlei Aadlei commented Nov 9, 2024

Added marker clustering for Google Maps, aswell as two demos inside the /google-map showcasing how it works and how its done. Let me know if something looks amiss or if anything needs changing, I tried to test it as much as possible to make sure it works as intended. I tried adding the script src below to the other projects, but could only do WebAssembly for some reason.
Be wary that this is crucial for it to work:
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

image
image

Changes made:

blazor.boostrap.js

  • Made it so that if a "content" of a marker contains <svg, it will add a class that fixes the misalignment that is specifically only for SVGs.
  • Made changes to initialize, updateMarkers and addMarker to support clustering, making sure it happens the most optimal way possible.

blazor.bootstrap.css

  • Added .bb-googlemaps-marker-fix that fixes the misalignment of SVG markers.

GoogleMap.razor.cs

  • Added OnClusterClickJS (works the same way for markers, except for clusters instead)
  • Added ClusterOptions to the initialize (see RefreshAsync and and OnScriptLoad)
  • Added ClusterOptions
  • Added OnClusterClick EventCallback

WebAssembly/wwwroot/index.html

  • Added script src for marker clusterer.

+ Models/Maps/GoogleMapClusterOptions.cs

  • Added GoogleMapClusterOptions with: Renderer, Algorithm, ClusteringEnabled and EnableClusterClick
  • Added GoogleMapClusterAlgorithm with Type and GoogleMapClusterAlgorithmOptions (pardon if the names seem excessive)
  • Added GoogleMapClusterAlgorithmOptions that contains MaxZoom (this may expand in the future)
  • Added GoogleMapClusterRenderer that allows for custom rendering of a cluster (SVG, TextColor, TextFontSize, ShowMarkerCount)
  • Added GoogleMapClusterClickEvent, should work the same way as a MarkerClickEvent.

+ Enums/GoogleMapAlgorithmTypes.cs

  • Added supported algorithm types for clustering. Use enum combined with ToString() to select the different types.

+ RCL/Components/Pages/Maps/GoogleMap_Demo_07_Dynamic_markers_with_clustering.razor

  • Added demo for simple clustering

+ RCL/Components/Pages/Maps/GoogleMap_Demo_08_Dynamic_markers_with_custom_clustering.razor

  • Added demo for advanced clustering with custom icons, algorithm definitions etc.

@gvreddy04
Copy link
Contributor

@Aadlei Thank you for the PR. I'll check this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants