Skip to content

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.

@Aadlei
Copy link
Author

Aadlei commented Jan 10, 2025

Added MapId for people who want custom looking maps .
One can create a style from the same place where they get the API keys, Here is an example of how I styled my map:

image

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

2 participants