Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

[Google Maps] Marker Cluster#935

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
Aadlei wants to merge17 commits intovikramlearning:main
base:main
Choose a base branch
Loading
fromAadlei:MarkerCluster

Conversation

@Aadlei
Copy link

Addedmarker 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 toinitialize,updateMarkers andaddMarker 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 reacted with thumbs up emoji

@Aadlei
Copy link
Author

Added MapId for people who wantcustom 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 freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Aadlei@gvreddy04

[8]ページ先頭

©2009-2025 Movatter.jp