GoogleMap.Circle events missing

garaycs · July 12, 2019, 1:05pm

I’m creating a circle on a Google Map and save its position+radius.

circle = GoogleMap.Circle(center=center,
  editable=True,
  draggable=True,
  radius=featureParams['radius'],
  clickable=True)

I am then able to create a click event handler which is great

circle.set_event_handler("click", self.removeFeature  )

Now since I created the circle as draggable and editable I’m trying to add an event listener on those changes as well like so

circle.set_event_handler("center_changed", self.saveNewCenter)
circle.set_event_handler("radius_changed", self.saveNewRadius )

but these events seem to be missing.

Can you suggest a solution / workaround to do this?

shaun · July 15, 2019, 3:20pm

Hi @garaycs, welcome to the Forum!

I’m sorry that that’s not currently supported in our Python wrapping of the Google Maps API. You can still use the Google Maps Javascript API. You can import it using Native Libraries - this is where you can write HTML to inject into the <head> of your page, so you can use <script> and <link> tags to import JS libraries:

Then you can use that library in a Custom HTML Form or a HTML file in Assets (in a <script> tag, of course).

Here’s an example using a similar mapping library, leaflet.js:

https://anvil.works/build#clone:MLPTX7YFIEPXYBMA=AIANPMANQWWZGK3KPS4KCTSP

How it works

The Native Libraries contains this:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

In this app, there’s a Custom HTML Form called LeafletMap containing a simple initialisation function:

Click here to see how to create a Custom HTML Form

When you add a new Form, select Custom HTML Form to get a Form that allows you to write HTML:

Click on the Edit button in the Properties Table to write HTML for that Form:

<div id="map" style="height: 1000px"></div>

<script>
function initLeaflet() {
  div = this.find('#map');   // 'this' is this Form. This way, we select the map on this Form, making multiple LeafletMap Forms on one page possible.
  var map = L.map(div[0]).setView([52.2053, 0.1218], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([52.2053, 0.1218]).addTo(map)
      .bindPopup("leaflet.js maps in Anvil, thanks to: <a href=https://anvil.works/blog/escape-hatches-and-ejector-seats>Escape Hatches</a>")
      .openPopup();  
}
</script>

and that function is called from the LeafletMap’s form_show event:

  def form_show(self, **event_args):
    """This method is called when the HTML panel is shown on the screen"""
    self.call_js('initLeaflet')

You mark the Form as a Custom Component by clicking “Use as component”

Then your LeafletMap appears in the ToolBox and you can drag-and-drop them like any other component:

(You can also instantiate them from code as you can with any Form.)

shaun · July 29, 2019, 10:44am

Hi @garaycs, we’ve added the Circle events to the Python version of GoogleMap now.

Here’s an app that prints the radius and centre position of the circle when it is moved/resized:

  def __init__(self, **properties):
    # ...
    self.circle.set_event_handler("center_changed", self.print_centre)
    self.circle.set_event_handler("radius_changed", self.print_radius) 

  def print_centre(self, **event_args):
    print(event_args['sender'].center)
    
  def print_radius(self, **event_args):
    print(event_args['sender'].radius)

https://anvil.works/build#clone:RKVVBRAX6OQCY7YV=7VIQEZ4W6P6L3BQUSTGI7SR5