Feature/sliders

R/as-mapboxer-viz.R

@@ -1,5 +1,5 @@
 as_mapboxer_viz <- function(data, style = basemaps$Carto$voyager, ...,
-                            coords = NULL) {
+                            layer_id = "mapboxer-viz", coords = NULL) {
   # Use classes imstead
   if (!is.null(coords)) data <- sf::st_as_sf(data, coords = coords)
 
@@ -10,5 +10,5 @@ as_mapboxer_viz <- function(data, style = basemaps$Carto$voyager, ...,
       element_id = "mapboxerviz"
     ) %>%
     add_navigation_control() %>%
-    add_circle_layer(...)
+    add_circle_layer(..., id = layer_id)
 }

R/control-panel.R

@@ -0,0 +1,22 @@
+add_control_panel <- function(map, ..., pos = NULL, css_text = NULL) {
+  invoke_method(map, "addCustomControl", controlName = "PanelControl",
+                options = list(items = list(...), cssText = css_text), pos = pos)
+}
+
+layer_visibility_checkbox <- function(layer_id, ...) {
+  list(type = "LayerSwitcher", layerId = layer_id, ...)
+}
+
+int_filder_slider <- function() {
+
+}
+
+elem_range_slider <- function(min, max, step, value = min) {
+  list(props = list(min = min, max = max, step = step, value = value), type = "Slider")
+}
+
+on_change_filter <- function(elem, layer_id, property, operator = "==") {
+  #modifyList(elem, list(mapboxLayerId = layer_id, mapboxProperty = property, mapboxOperator = operator))
+  elem$filter <- list(layerId = layer_id, property = property, operator = operator)
+  elem
+}

R/images.R

@@ -0,0 +1,3 @@
+add_image <- function(map, url, id = "mapboxer", ...) {
+  invoke_method(map, "addImage", url = url, id = id, ...)
+}

R/utils.R

@@ -1,3 +1,11 @@
 utils_has_attr <- function(x, attr_name) {
   attr_name %in% names(attributes(x))
 }
+
+utils_shiny_tags_as_character <- function(x) {
+  lapply(x, function(y) {
+    if (inherits(y, "shiny.tag")) return(as.character(y))
+
+    y
+  })
+}

examples/experimental/custom-icon.R

@@ -0,0 +1,22 @@
+devtools::load_all()
+
+image_url <- "https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png"
+image_url <- "http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Lisa-Simpson-icon.png"
+#image_url <- "https://upload.wikimedia.org/wikipedia/en/e/ec/Lisa_Simpson.png"
+image_url <- "http://localhost:8000/Lisa-Simpson-icon.png"
+
+icon_style <- list(
+  id = 'custom-icon',
+  type = "symbol",
+  source = as_mapbox_source(us_states),#as_mapbox_source(data.frame(lng = 0, lat = 0)),
+  layout = list(
+    "icon-image" = "cat"
+    ,"icon-size" = 0.5
+  )
+)
+
+mapboxer(
+  #style = basemaps$Mapbox$outdoors_v11,
+  element_id = "mapboxer"
+) %>%
+  add_image(image_url, "cat", style = icon_style) #%>% add_layer(icon_style)

examples/experimental/sliders.R

@@ -0,0 +1,23 @@
+LAYER_ID <- "crashes"
+
+mvc <- motor_vehicle_collisions_nyc
+mvc$day <- lubridate::day(mvc$date)
+
+slider <- elem_range_slider(min = 0, max = 6, step = 1, value = 3) %>%
+  on_change_filter(LAYER_ID, property = "injured", operator = ">=")
+
+slider2 <- elem_range_slider(min = min(mvc$day), max = max(mvc$day), step = 1) %>%
+  on_change_filter(LAYER_ID, property = "day", operator = "==")
+
+as_mapboxer_viz(mvc, coords = c("lng", "lat"), layer_id = LAYER_ID, visibility = "none") %>%
+  add_control_panel(
+    "<p><b>Number of persons <i>injured</i></b></p>",
+    slider,
+    "<p><b>2019-09-<i>day</i></b></p>",
+    slider2,
+    layer_visibility_checkbox(LAYER_ID),
+    pos = "top-left"
+    , css_text = htmltools::css(width = "220px")
+    #, css_text = htmltools::css(background = "black", color = "white")
+  ) %>%
+  add_popups(LAYER_ID, mapbox_popup("{{injured}}", event = "hover"))

javascript/src/custom-controls/index.js

@@ -2,3 +2,4 @@ export { default as TextControl } from "./text-control";
 export { default as MousePositionControl } from "./mouse-position-control";
 export { default as FilterControl } from "./filter-control";
 export { default as LegendControl } from "./legend-control";
+export { default as PanelControl } from "./panel-control";

javascript/src/custom-controls/panel-control.js

@@ -0,0 +1,100 @@
+export default class PanelControl {
+  constructor(options) {
+    this._options = options || { items: [ ] };
+    this._sliders = [ ];
+  }
+
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement("div");
+    this._container.classList.add("mapboxgl-ctrl", "mapboxer-panel-ctrl");
+    this._container.style.cssText = this._options.cssText || "";
+    console.log("control panel", this._options);
+    this._options.items.forEach(item => {
+      if (item.type === "Slider") this._addSlider(item);
+
+      if (typeof item === "string") this._addHTML(item);
+
+      if (item.type === "LayerSwitcher") this._addCheckbox(item);
+    });
+
+    return this._container;
+  }
+
+  onRemove() {
+    this._container.parentNode.removeChild(this._container);
+    this._map = undefined;
+  }
+
+  _addSlider({props, filter}) {
+    const container = document.createElement("div");
+    container.classList.add("mapboxer-slider-ctrl", "mapboxer-ctrl-item");
+    const label = document.createElement("label");
+    const slider = document.createElement("input");
+    slider.type = "range";
+    Object.assign(slider, props);
+
+    const setLabel = () => {
+      label.innerHTML = [ filter.property, filter.operator, slider.value ].join(" ");
+    };
+
+    const getExpression = () => [
+      filter.operator,
+      filter.property,
+      parseInt(slider.value)
+    ];
+
+    slider.onchange = (e) => {
+      setLabel();
+      const expression = this._getFilterExpressions(filter.layerId);
+      this._map.setFilter(filter.layerId, expression);
+    };
+    this._sliders.push({
+      layerId: filter.layerId,
+      getExpression
+    });
+    setLabel();
+    this._map.setFilter(filter.layerId, this._getFilterExpressions(filter.layerId));
+    container.append(label, slider);
+    this._container.append(container);
+    return container;
+  }
+
+  _getFilterExpressions(layerId) {
+    const expressions = this._sliders.filter(slider => slider.layerId === layerId)
+      .map(slider => slider.getExpression());
+    console.log(expressions);
+    return [ "all" ].concat(expressions);
+  }
+
+  _addHTML(html) {
+    const container = document.createElement("div");
+    container.innerHTML = html;
+    this._container.append(container);
+  }
+
+  // At the moment only used to switch a layer's visibility prop
+  _addCheckbox({layerId, freestyle}) {
+    const container = document.createElement("div");
+    container.classList.add("mapboxer-checkbox-ctrl", "mapboxer-ctrl-item");
+    const label = document.createElement("label");
+    label.innerHTML = layerId;
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.checked = this._map.getLayoutProperty(layerId, "visibility") === "visible" ?
+      true
+      :
+      false;
+    input.onchange = (e) => {
+      console.log(input.checked);
+      this._map.setLayoutProperty(layerId, "visibility", input.checked ? "visible" : "none");
+    };
+    if (freestyle) {
+      label.style.width = "100%";
+      input.style.width = "auto";
+    }
+
+    container.append(label, input);
+    this._container.append(container);
+  }
+}

javascript/src/methods.js

@@ -90,6 +90,16 @@ function addMarker(args) {
   marker.addTo(map);
 }
 
+function addImage({id, url, style}) {
+  const map = this;
+  map.loadImage(url, (error, image) => {
+    if (error) throw error;
+
+    map.addImage(id, image);
+    map.addLayer(style);
+  });
+}
+
 function addCustomControl(args) {
   const map = this;
   const control = new customControls[args.controlName](args.options);
@@ -204,5 +214,6 @@ export default {
   fitBounds,
   setStyle,
   addDrawControl,
-  addDeckLayer
+  addDeckLayer,
+  addImage
 };

javascript/styles/mapboxer.css

@@ -1,5 +1,9 @@
+canvas:focus {
+  outline: none;
+}
+
 .mapboxer-text-ctrl, .mapboxer-mouse-position-ctrl,
-.mapboxer-legend-ctrl /*, .mapboxer-filter-ctrl */ {
+.mapboxer-legend-ctrl, .mapboxer-panel-ctrl /*, .mapboxer-filter-ctrl */ {
   background: #FFFFFF;
   border-radius: 4px;
   padding: 8px;
@@ -35,6 +39,25 @@
   vertical-align: middle;
 }
 
+.mapboxer-slider-ctrl, .mapboxer-checkbox-ctrl {
+/*.mapboxer-ctrl-item {*/
+  display: flex;
+  align-items: center;
+  /*padding: 5px;*/
+}
+
+.mapboxer-ctrl-item label {
+  width: 40%;
+  /*padding-right: 10px;*/
+  margin-right: 10px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+
+.mapboxer-ctrl-item input {
+  width: 150px;
+}
+
 /* Legend */
 .mapboxer-legend ul {
   padding: 0;