mapseed/platform

Fix icon anchors in config.yml

Closed this issue · 0 comments

For many points on the map, some of the icon anchors are off. Under our config.yml, for place_types, you can see how we have some points like this:

      - condition: '"{{geometry.type}}" == "Point" && "{{properties.marker-symbol}}" === "park2"'
        icon:
          iconUrl: /static/css/images/markers/marker-heart.png
          iconSize: [40, 40]
          iconAnchor: [13, 13]

This means that the marker-heart.png icon will 40 units wide and 40 units tall, and the actual point will be anchored 13 units below and 13 units to the right of the top left corner of the icon. (think of the icon as an x,y grid, with the point (0,0) in the top left corner)

So in this example, marker-heart.png is a square icon, and we want our point to be anchored in the center of the icon, so we should change iconAnchor to be iconAnchor: [20, 20]. It would be great to have someone help with this!

BTW, keep in mind, not all icon anchors will be in the center of the icon. For our icon points, we want to keep to anchor in the bottom center of the icon. For example:

      - condition: '{{map.zoom}} >= 14 && {{layer.focused}} === false'
        icon:
          iconUrl: /static/css/images/markers/marker-observation.png
          iconSize: [38, 46]
          iconAnchor: [19, 46]


And this example is correct - we want the anchor for our Observation markers to be at the bottom center of the marker.

It would be super useful if someone can help us with this task!