Can we do Google maps circle hover over text?

Anvil Q&A
#1

Q. In Anvil Google maps, can we do hover-over text for circle objects somehow (or at least text that appears upon click) ?

In JS this apparently works:

The tooltip is created via the native title -attribute of DOM-elements, but he API doesn’t provide any method to access the DOMElement that contains the circle.

A possible workaround may be to use the title-attribute of the map-div instead(set it onmouseover and remove it onmouseout )

        //circle is the google.maps.Circle-instance
        google.maps.event.addListener(circle,'mouseover',function(){
             this.getMap().getDiv().setAttribute('title',this.get('title'));});

        google.maps.event.addListener(circle,'mouseout',function(){
             this.getMap().getDiv().removeAttribute('title');});

But can we do this in pure Anvil somehow?

In Anvil, can we respond to Google Map clicks on circles?
#2

Hi @paul.k.pallaghy,

Yes, you can display text in response to clicks and mouseovers on GoogleMap circle objects.

Here’s a clone link that shows both hover and click events in action:

https://anvil.works/build#clone:UXOS7MQ2FPH24UP5=ZZAOFSZ3ASHNEB4WE6PL2CCB

I’m displaying text in an Info Window and I’ve also used the GoogleMap.geocode function to look up an address for the lat/long of the selected circle object, to display in the Info Window.

GoogleMap circles are GoogleMap.Data.Feature objects and therefore the map events that start with ‘data_x’ are the events you’re looking for.

In your JS example above, the mouseover and mouseout events are the equivalent of the data_mouseover and data_mouseout events on an Anvil GoogleMap component.

1 Like
In Anvil, can we respond to Google Map clicks on circles?
#3

Hey anyone or @bridget, I’m finally implementing circles with mouseovers (after many other issues!) but my circles are added as components or markers:

  for g, Gping in enumerate(Gpings):
      lat = Gping['lat']
      lng = Gping['lng']
      circle = GoogleMap.Circle(
        center=GoogleMap.LatLng(lat, lng),
        radius=7000,
        clickable=True,
        fill_color=leg_color,
        stroke_weight=0,
        fill_opacity=0.4
      )
      self.map.add_component(circle)

I don’t get mouseover events for MY circles! You get mouseovers on yours because they are ‘features’ I think.

Q1. How can I get mouseover events triggered for these circle ‘components’?

EDIT
I now agree it’s probably impossible so . .

Q2. Or can I add data feature circles (instead of components/markers) like you Bridget but set the style PER circle? EDIT I’ve tried but am struggling . .

#4

Hello Paul,

The GoogleMap.Data.Feature objects belong to the Data Class, which has an overrideStyle method.

You can use this overrideStyle method to style your feature objects individually. These changes are applied on top of the style applied to all map data objects.

For example:

# Custom style for one of your circles
style1 = GoogleMap.Data.StyleOptions(
      icon=GoogleMap.Symbol(
        path=GoogleMap.SymbolPath.CIRCLE,
        scale=10,
        fill_color='blue',
        fill_opacity=0.7,
        stroke_opacity=1,
        stroke_weight=1,
      )
    )

# Override the custom style with style_1, passing in the `GoogleMap.Data.Feature` object that you want to style
self.map_1.map_data.override_style(feature1, style1)

Clone:
https://anvil.works/build#clone:JAIV2GBZRP74TLLR=WA3KMYLHQ6CFISXFGWUNCDOT

I hope this helps.

2 Likes
#5

Thanks Campo.

Now, my last problem is that sometimes I want to draw a circle with a fixed radius in metres.
But these data feature circles scale as zoomed.
Can we draw data feature circles that don’t scale and have a radius?
(like my geometry circles, but they need to have hover data . .)

#6

Now map.clear() doesn’t clear the data layer.
The data objects build up and up and . . then grounds to a halt after loading 20 different maps.
How can I clear the data layer?
And there’s no map.data.clear() method.
(I’m now using your overridestyle approach @alcampopiano , thanks)

#7

Solved it by iterating thru all features (by first saving them at create time in a global) and using data_map.remove (feature). Seems odd on G maps part not to have a clear_data method . .

1 Like