PaackEng / elm-google-maps / GoogleMaps.Polygon

This module allows you to create polygons to be used along with GoogleMaps.Map

import GoogleMaps.Map as Map
import GoogleMaps.Polygon as Polygon

myPolygon : Polygon.Polygon Msg
myPolygon =
    Polygon.init
        [ ( -3.7344654, -38.5057405 )
        , ( -3.7366108, -38.5188557 )
        , ( -3.7374002, -38.5195225 )
        , ( -3.7474947, -38.5153675 )
        ]
        |> Polygon.withStrokeColor "red"
        |> Polygon.withFillColor "orange"
        |> Polygon.withFillOpacity 0.25
        |> Polygon.onClick OnMarkerClicked
        |> Polygon.withClosedMode

mapView : String -> Html Msg
mapView apiKey =
    Map.init apiKey
        |> Map.withPolygons [ myPolygon ]
        |> Map.toHtml

Types


type alias Polygon msg =
Internals.Polygon.Polygon msg

Opaque type that upholds the polygon description.


type alias Latitude =
Basics.Float

This type is latitude in float format as expected by Google Maps.


type alias Longitude =
Basics.Float

This type is longitude in float format as expected by Google Maps.

Basics

init : List ( Latitude, Latitude ) -> Polygon msg

Creates a polygon from a list of coordinates.

Modifiers

withClosedMode : Polygon msg -> Polygon msg

It forces the polygon to be a closed shape

withFillColor : String -> Polygon msg -> Polygon msg

There is no default color

this function accepts the same formats as the CSS color values

E.g "rbg(255,255,0)", "orange" or "#ff00ff"

withFillOpacity : Basics.Float -> Polygon msg -> Polygon msg

The default is 0

withStrokeColor : String -> Polygon msg -> Polygon msg

The default is black

this function accepts the same formats as the CSS color values

E.g "rbg(255,255,0)", "orange" or "#ff00ff"

withStrokeWeight : Basics.Int -> Polygon msg -> Polygon msg

The default is 3

withZIndex : Basics.Int -> Polygon msg -> Polygon msg

Positions the polygon in an integer-numbered third-dimension.

Events

onClick : msg -> Polygon msg -> Polygon msg

Specify a message which is triggered when the user clicks over the polygon.