Vector Tiles

[SymbolixAU]

copied from : SymbolixAU/mapdeck#128

Add Vector Tiles

https://docs.mapbox.com/mapbox-gl-js/example/vector-source/

Will likely need to re-design how the map and layers interact, as per : https://github.com/uber/deck.gl/blob/master/docs/api-reference/mapbox/overview.md

working prototype

js <- '{"id": "terrain-data",
	"type": "line",
	"source": {
		"type": "vector",
		"url": "mapbox://mapbox.mapbox-terrain-v2"
	},
	"source-layer": "contour",
	"layout": {
		"line-join": "round",
		"line-cap": "round"
	},
	"paint": {
		"line-color": "#ff69b4",
		"line-width": 1
	}}'


mapbox(
  token = token
  , location = c(-122.44, 37.753)
  , zoom = 10
  ) %>%
    add_mapbox_layer( js )

source <- '{
	"type": "vector",
	"url": "mapbox://mapbox.mapbox-terrain-v2"
}'

id <- 'contours'

contours <- '{
	"id": "contours",
	"type": "line",
	"source": "contours",
	"source-layer": "contour",
	"layout": {
		"visibility": "visible",
		"line-join": "round",
		"line-cap": "round"
	},
	"paint": {
		"line-color": "#877b59",
		"line-width": 1
	}
}'

mapbox(
   token = token
   , location = c(-71.9675, -13.5320)
  , zoom = 10
  ) %>% 
    add_source(
      id = 'contours'
      , js = source
    ) %>% 
      add_layer(
        js = contours
      )

js <- '{"id": "3d-buildings",
"source": "composite",
"source-layer": "building",
"filter": ["==", "extrude", "true"],
"type": "fill-extrusion",
"minzoom": 15,
"paint": {
	"fill-extrusion-color": "#aaa",
	"fill-extrusion-height": [
		"interpolate", ["linear"], ["zoom"],
		15, 0,
		15.05, ["get", "height"]
		],
	"fill-extrusion-base": [
		"interpolate", ["linear"], ["zoom"],
		15, 0,
		15.05, ["get", "min_height"]
		],
	"fill-extrusion-opacity": 0.6
}}'

mapbox(
  token = token
  , location = c(-74.0066, 40.7135)
  , zoom = 15
  , pitch = 45
  ) %>%
	add_mapbox_layer( js )

---

TODO

• add_source() for the source data
• add_layer() for the layer specs
• remove_source()
• remove_layer()
• check type of map object is valid in the above functions
• handle 'There is already a source with this ID' error in javascript console
• legends
• tooltips