jackhp95 / elm-mapbox / Maps.Map

Functions for manipulating the Map.


type alias Map =
Maps.Internal.OpaqueTypes.Map

The map type contains all the information necessary to display a map on the screen. The map type is opaque, so use the functions in this module to maniuplate the map.

Setters

The setters can be used to modify a map

For example, MapBox tiles on a large map:

map
    |> setTileServer ("https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=" ++ accessToken)
    |> setWidth 1200
    |> setHeight 800

setTileServer : String -> Map -> Map

Set the tile server.

The format is a URL with {x} {y} {z} placeholders for the x, y and zoom coordinates.

setWidth : Basics.Float -> Map -> Map

Set the width, as displayed on the screen, of a given Map.

setHeight : Basics.Float -> Map -> Map

Set the height, as displayed on the screen, of a given Map.

setTileSize : Basics.Float -> Map -> Map

Set the width/height in px of a tile. Note, this is dependent on the tile server, and the default of 256px is almost always correct.

Map Movement and Zooming

move : Maps.Internal.Screen.Offset -> Map -> Map

Move the map a given number of pixels in the x and y dimensions.

For example, up 10px and right 10px:

map
    |> move { x = 10, y = -10 }

moveTo : Maps.Geo.LatLng -> Map -> Map

Move the center of the map to a specific location.

For example, move the map to Shanghai:

map
    |> moveTo (Maps.Geo.LatLng 31.267401 121.522179)

setZoom : Basics.Float -> Map -> Map

Sets the zoom to a specific level

For example, zoom all the way out

map
    |> zoom 0

Or all the way in:

map
    |> zoom 19

zoom : Basics.Float -> Map -> Map

Zoom into the center of the map.

For example zoom out two levels:

map
    |> zoom -2

zoomTo : Basics.Float -> Maps.Internal.Screen.Offset -> Map -> Map

Zoom into an x,y co-ordinate on the map.

For example, zoom into the top left corner of the map:

map
    |> zoom 1 { x = 0, y = 0 }

viewBounds : Maps.Geo.Bounds -> Map -> Map

Move and zoom the map to cover given the bounds.

For example, view the bounds of Madagascar:

let
    madagascar =
        Maps.Geo.bounds
            { northEast = Maps.Geo.latLng -11.9519639 50.48377989999999
            , southWest = Maps.Geo.latLng -25.6065157 43.1851395
            }
in
map
    |> viewBounds madagascar