Using and scaling SVG icons on GoogleMap

[shopinthewoods]

According to this page the icon property of a Marker should take either a string, icon object, or a Symbol.

I’ve been able to make the string work but only for PNG images and I haven’t figured out how to scale them. It doesn’t look like Icon object is exposed through Anvil’s implementation.

I don’t understand at all how to use Symbol at all.

Short of manually sizing images ahead of time, how can I control the appearance of the marker icons better?

[bridget]

Hi @shopinthewoods, the forum post below explains how to use GoogleMap.Symbol and GoogleMap.Icon objects with GoogleMap.Marker:

Change colour of google map marker

Hi @ben2, Excellent question, sorry this isn’t clear. GoogleMap.Symbol objects are used to display particular shapes rather than icons. In particular, they require a path, and if they don’t have one then you get the default red pin that you’re seeing. To draw custom icons, use the GoogleMap.Icon class, which can be constructed with the URL of the image to display. You can find all sorts of useful icon images here. Here’s an example: blue_symbol = GoogleMap.Symbol( path=GoogleMap.Sym…

You’re right that the marker’s icon property can be either a string, GoogleMap.Icon or GoogleMap.Symbol object. If you provide a string as the icon property of a GoogleMap.Marker object, it is treated as a GoogleMap.Icon object with the string as the url property. If you want to scale the image, you’ll need to create a GoogleMap.Icon object, and set the scaled_size or size property, for example:

arrow_icon = GoogleMap.Icon(
      url="http://maps.google.com/mapfiles/kml/shapes/arrow.png",
      scaled_size=GoogleMap.Size(20,20)
    )
marker_1 = GoogleMap.Marker(position=GoogleMap.LatLng(52.2053, 0.1218), icon=arrow_icon)
self.map_1.add_component(marker_1)

[shopinthewoods]

@bridget, Thank you. This works great for scaling png images which is a big step forward. Does this mean it isn’t possible or practical to use an existing svg icon?

[bridget]

@shopinthewoods you can use an existing svg icon in a GoogleMap.Symbol object by setting the path property to a string of the svg expressed using SVG path notation

For example:

blue_svg_triangle = GoogleMap.Symbol(
      path="M0 0 L-10 -20 L10 -20 Z",
      scale=1,
      strokeColor="#003",
      strokeWeight=1,
      fill_color="#00f",
      fill_opacity=1
    )
marker_1 = GoogleMap.Marker(position=GoogleMap.LatLng(50, 0), icon=blue_svg_triangle)
self.map_1.add_component(marker_1)