Skip to content

Example of minZoom/maxZoom/disable tilt+rotation/maxBounds #161

@stevenpandrews

Description

@stevenpandrews

In certain map applications, I like to restrict the map to a certain viewpoint. It'd be neat if there was an example of how to use the additional parameters (the ones I wanted were here: https://maplibre.org/maplibre-gl-js/docs/examples/) to help with this. For what it's worth, this code shows how to set a minZoom, maxZoom, prevent rotation, and force a bounding box. I found the scrollZoom = FALSE call in your story maps page and that really helped it all click.

I had to use something other than projection = 'globe' to get the maxBounds to work.

library(tidyverse)
library(sf)
library(mapgl)

options(tigris_use_cache = TRUE)

# 1. Download Data
ma_county <- tigris::counties("MA") |> select(NAME)

# 2. Find bounding box
bbox <- st_bbox(ma_county |> st_buffer(10000))

# 3. Find SW/NE corners
ma_list <- list(
  as.numeric(c(bbox["xmin"], bbox["ymin"])), 
  as.numeric(c(bbox["xmax"], bbox["ymax"]))
)

# 4. Make the points sf for plotting.
corner_pts <- st_multipoint(matrix(unlist(ma_list), ncol = 2, byrow = TRUE)) |>
  st_sfc(crs = 4326) |>
  st_cast("POINT") |>
  st_as_sf() |>
  mutate(label = c("Southwest Corner", "Northeast Corner"))

# 5. Put it all together.
maplibre(
  bounds = ma_county,
  projection = "mercator", # This makes maxBounds work! globe fails.
  dragRotate = FALSE,
  touchZoomRotate = FALSE,
  minZoom = 7,
  maxZoom = 12,
  maxBounds = ma_list
) |>
  add_fill_layer(
    id = "ma_county",
    source = ma_county,
    fill_color = "navy",
    fill_opacity = 0.7,
    tooltip = "NAME"
  ) |> 
  add_circle_layer(
    id = "bbox_corners",
    source = corner_pts,
    tooltip = "label"
  )

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions