[Done] Marker Clustering for Google Maps

Feature Requests
#1

Continuing the discussion from Google Maps Marker Clustering:

It would be really helpful to be able to cluster markers together like in these official Google docs without having to resort to javascript :face_vomiting:

2 Likes
#2

That should now work.

Adjusting the example from the official Google Maps docs:

Marker Clustering  |  Maps JavaScript API  |  Google Developers

Here’s a clone:
https://anvil.works/build#clone:RPAZWFZCCY5L7BY7=DYOM6V6NEBCTQDXA5SGKKMKJ

And the code:

Code 

from ._anvil_designer import Form1Template
from anvil import *
from itertools import cycle

from anvil.js import import_from
MarkerClusterer = import_from("https://cdn.skypack.dev/@googlemaps/markerclusterer").MarkerClusterer

labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
locations = [
  { "lat": -31.56391, "lng": 147.154312 },
  { "lat": -33.718234, "lng": 150.363181 },
  { "lat": -33.727111, "lng": 150.371124 },
  { "lat": -33.848588, "lng": 151.209834 },
  { "lat": -33.851702, "lng": 151.216968 },
  { "lat": -34.671264, "lng": 150.863657 },
  { "lat": -35.304724, "lng": 148.662905 },
  { "lat": -36.817685, "lng": 175.699196 },
  { "lat": -36.828611, "lng": 175.790222 },
  { "lat": -37.75, "lng": 145.116667 },
  { "lat": -37.759859, "lng": 145.128708 },
  { "lat": -37.765015, "lng": 145.133858 },
  { "lat": -37.770104, "lng": 145.143299 },
  { "lat": -37.7737, "lng": 145.145187 },
  { "lat": -37.774785, "lng": 145.137978 },
  { "lat": -37.819616, "lng": 144.968119 },
  { "lat": -38.330766, "lng": 144.695692 },
  { "lat": -39.927193, "lng": 175.053218 },
  { "lat": -41.330162, "lng": 174.865694 },
  { "lat": -42.734358, "lng": 147.439506 },
  { "lat": -42.734358, "lng": 147.501315 },
  { "lat": -42.735258, "lng": 147.438 },
  { "lat": -43.999792, "lng": 170.463352 },
]

class Form1(Form1Template):
    def __init__(self, **properties):
        self.init_components(**properties)
        self.setup_map()

    def setup_map(self):
        self.map_1.center = {"lat":-28.024, "lng":140.887 }
        infoWindow = GoogleMap.InfoWindow(disable_auto_pan=True)
        markers = [GoogleMap.Marker(position=p, label=l) for p, l in zip(locations, cycle(labels))]

        def click(sender, **event_args):
            infoWindow.content = sender.label
            infoWindow.open(self.map_1, sender)

        for mark in markers:
            mark.add_event_handler("click", click)

        MarkerClusterer({"markers": markers, "map": self.map_1})
3 Likes
#3

That is amazing thank you. I will go through this tonight.

#4

This works really nicely thank you. Very simple to use based on the example makes a huge difference for visualising larger data sets.

1 Like