Overlay layer with SVG is only showing on top left tile

[tilmans]

Drawing an overlay layer with a simple SVG circle. The circle shows on the top-left tile but the other tiles seem to have a higher z-index and hide the SVG.

Browser: Chrome 61 on Mac OS

render : List Location -> Map msg -> Svg msg
render locations map =
    let
        size =
            Map.size map

        locToScreen =
            Map.locationToScreenPoint map

        pointList =
            List.map locToScreen locations

        circles =
            List.map
                (\{ x, y } ->
                    circle
                        [ cx (toString x)
                        , cy (toString y)
                        , r "20"
                        , stroke "red"
                        ]
                        []
                )
                pointList
    in
        svg [] circles


layer : List Location -> Layer msg
layer locations =
    Layer.overlay |> Layer.custom (render locations)

[tilmans]

Never mind, being stupid. Note to future self: Make sure to set the correct SVG canvas size ...

[klaftertief]

Glad you figured it out. Setting the dimensions was not needed in an earlier iteration as the svg element was created automatically. I'll have this in mind when writing some proper documentation, soon.