diff --git a/R/as-mapboxer-viz.R b/R/as-mapboxer-viz.R index 72ef107..81c295b 100644 --- a/R/as-mapboxer-viz.R +++ b/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) } diff --git a/R/control-panel.R b/R/control-panel.R new file mode 100644 index 0000000..5b00c5f --- /dev/null +++ b/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 +} diff --git a/R/images.R b/R/images.R new file mode 100644 index 0000000..8dda8dc --- /dev/null +++ b/R/images.R @@ -0,0 +1,3 @@ +add_image <- function(map, url, id = "mapboxer", ...) { + invoke_method(map, "addImage", url = url, id = id, ...) +} diff --git a/R/utils.R b/R/utils.R index cdc2490..98c3658 100644 --- a/R/utils.R +++ b/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 + }) +} diff --git a/examples/experimental/custom-icon.R b/examples/experimental/custom-icon.R new file mode 100644 index 0000000..3ddb87e --- /dev/null +++ b/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) diff --git a/examples/experimental/sliders.R b/examples/experimental/sliders.R new file mode 100644 index 0000000..5e9d32f --- /dev/null +++ b/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( + "

Number of persons injured

", + slider, + "

2019-09-day

", + 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")) diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 005fa1e..214e7ec 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -1,5 +1,5 @@ -!function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=4)}([function(t,e,n){t.exports=function(){"use strict"; +!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t,n){e.exports=function(){"use strict"; /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var t=Object.prototype.toString,e=Array.isArray||function(e){return"[object Array]"===t.call(e)};function n(t){return"function"==typeof t}function o(t){return t.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(t,e){return null!=t&&"object"==typeof t&&e in t}var i=RegExp.prototype.test,s=/\S/;function a(t){return!function(t,e){return i.call(t,e)}(s,t)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},l=/\s*/,p=/\s+/,u=/\s*=/,d=/\s*\}/,h=/#|\^|\/|>|\{|&|=|!/;function f(t){this.string=t,this.tail=t,this.pos=0}function m(t,e){this.view=t,this.cache={".":this.view},this.parent=e}function g(){this.templateCache={_cache:{},set:function(t,e){this._cache[t]=e},get:function(t){return this._cache[t]},clear:function(){this._cache={}}}}f.prototype.eos=function(){return""===this.tail},f.prototype.scan=function(t){var e=this.tail.match(t);if(!e||0!==e.index)return"";var n=e[0];return this.tail=this.tail.substring(n.length),this.pos+=n.length,n},f.prototype.scanUntil=function(t){var e,n=this.tail.search(t);switch(n){case-1:e=this.tail,this.tail="";break;case 0:e="";break;default:e=this.tail.substring(0,n),this.tail=this.tail.substring(n)}return this.pos+=e.length,e},m.prototype.push=function(t){return new m(t,this)},m.prototype.lookup=function(t){var e,o,i,s=this.cache;if(s.hasOwnProperty(t))e=s[t];else{for(var a,c,l,p=this,u=!1;p;){if(t.indexOf(".")>0)for(a=p.view,c=t.split("."),l=0;null!=a&&l0?r[r.length-1][4]:n;break;default:o.push(e)}return n}(function(t){for(var e,n,o=[],r=0,i=t.length;r"===s?a=this.renderPartial(i,e,n,r):"&"===s?a=this.unescapedValue(i,e):"name"===s?a=this.escapedValue(i,e):"text"===s&&(a=this.rawValue(i)),void 0!==a&&(c+=a);return c},g.prototype.renderSection=function(t,o,r,i){var s=this,a="",c=o.lookup(t[1]);if(c){if(e(c))for(var l=0,p=c.length;l0||!n)&&(r[i]=o+r[i]);return r.join("\n")},g.prototype.renderPartial=function(t,e,o,r){if(o){var i=n(o)?o(t[1]):o[t[1]];if(null!=i){var s=t[6],a=t[5],c=t[4],l=i;return 0==a&&c&&(l=this.indentPartial(i,c,s)),this.renderTokens(this.parse(l,r),e,o,l,r)}}},g.prototype.unescapedValue=function(t,e){var n=e.lookup(t[1]);if(null!=n)return n},g.prototype.escapedValue=function(t,e){var n=e.lookup(t[1]);if(null!=n)return v.escape(n)},g.prototype.rawValue=function(t){return t[1]};var v={name:"mustache.js",version:"4.0.1",tags:["{{","}}"],clearCache:void 0,escape:void 0,parse:void 0,render:void 0,Scanner:void 0,Context:void 0,Writer:void 0,set templateCache(t){y.templateCache=t},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(t,e){return y.parse(t,e)},v.render=function(t,n,o,r){if("string"!=typeof t)throw new TypeError('Invalid template! Template should be a "string" but "'+(e(i=t)?"array":typeof i)+'" was given as the first argument for mustache#render(template, view, partials)');var i;return y.render(t,n,o,r)},v.escape=function(t){return String(t).replace(/[&<>"'`=\/]/g,(function(t){return c[t]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},function(t,e,n){"use strict";n.d(e,"a",(function(){return o}));const o="MAPBOXER"},function(t,e,n){"use strict";var o={};n.r(o),n.d(o,"TextControl",(function(){return i})),n.d(o,"MousePositionControl",(function(){return s})),n.d(o,"FilterControl",(function(){return a})),n.d(o,"LegendControl",(function(){return c}));var r=n(0);class i{constructor(t){this._options=t||{}}onAdd(t){return this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",this._container.innerHTML=this._options.text||"Hello mapboxer!",this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}getContainer(){return this._container}}class s{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-mouse-position-ctrl"),this._container.style.cssText=this._options.cssText||"";const e=this._options.mustacheTemplate||"{{lng}}, {{lat}}";return this._map.on("mousemove",t=>{this._container.innerHTML=Object(r.render)(e,t.lngLat)}),this._map.on("mouseout",t=>{this._container.innerHTML="",this._container.style.display="none"}),this._map.on("mouseover",t=>{this._container.style.display="block"}),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}}class a{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-filter-ctrl"),this._container.style.cssText=this._options.cssText||"";const e=document.createElement("textarea");return Object.assign(e,{spellcheck:!1,id:"filter"},this._options.textareaAttributes),this._options.filter&&(e.value=JSON.stringify(this._options.filter),t.setFilter(this._options.layerId,this._options.filter)),e.addEventListener("keyup",n=>{const o=e.value;try{const e=JSON.parse(o);t.setFilter(this._options.layerId,e)}catch(t){}}),this._container.append(e),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}}class c{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-legend-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log(this._options.items);const e=this._options.items.map(t=>`\n
  • \n \n ${t.label}\n
    • \n `),n=`\n
    \n
    ${this._options.title||""}
    \n
      ${e.join("")}
    \n
    \n `;return this._container.innerHTML=n,this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}}var l=n(1);function p(t){return"string"==typeof t&&t.startsWith("@=")}e.a={addControl:function(t){const e=new mapboxgl[t.controlName](t.options);this.addControl(e,t.pos)},addSource:function(t){this.addSource(t.id,t.source)},addLayer:function(t){const e=this;t.style.source=t.style.source||l.a,e.addLayer(t.style);const n=t.style.id;e.on("mouseenter",n,()=>e.getCanvas().style.cursor="pointer"),e.on("mouseleave",n,()=>e.getCanvas().style.cursor=""),HTMLWidgets.shinyMode&&e.on("click",t.style.id,t=>{const n=e.getContainer().id,o=t.features[0],r={coords:t.lngLat,props:o.properties,layer_id:o.layer.id,widget_id:n};console.log(r),Shiny.onInputChange(n+"_onclick",r)})},addPopups:function(t){const e=this,n=t.layerId;e.on("click",n,n=>{const o=Object.values(n.lngLat),i=n.features[0],s=Object(r.render)(t.template,i.properties);new mapboxgl.Popup(t.options||{}).setLngLat(o).setHTML(s).addTo(e)})},addTooltips:function(t){const e=this,n=t.layerId,o=new mapboxgl.Popup({closeButton:!1,closeOnClick:!1});e.on("mousemove",n,n=>{const i=Object.values(n.lngLat),s=n.features[0],a=Object(r.render)(t.template,s.properties);o.setLngLat(i).setHTML(a).addTo(e)}),e.on("mouseleave",n,()=>{o.remove()})},addMarker:function(t){const e=(new mapboxgl.Marker).setLngLat([t.lng,t.lat]);e.getElement().style.cursor="pointer",t.popup&&e.setPopup((new mapboxgl.Popup).setHTML(t.popup)),e.addTo(this)},addCustomControl:function(t){const e=new o[t.controlName](t.options);this.addControl(e,t.pos)},customControls:o,setFilter:function(t){this.setFilter(t.layerId,t.filter)},setPaintProperty:function(t){this.setPaintProperty(t.layer,t.property,t.value)},setLayoutProperty:function(t){this.setLayoutProperty(t.layer,t.property,t.value)},setData:function(t){const e=t.source||l.a;this.getSource(e).setData(t.data)},fitBounds:function(t){this.fitBounds(t.bounds,t.options||{})},setStyle:function(t){this.setStyle(t.style)},addDrawControl:function(t){const e=new MapboxDraw(t.options);this.addControl(e,t.pos),t.data&&e.add(t.data),this.on("draw.create",t=>{console.log(t.features),console.log(e.getAll())})},addDeckLayer:function(t){const e=this;if(console.log("deck.gl",deck.version),t.props.type=deck[t.type],t.popup){const n=new mapboxgl.Popup({closeOnClick:!1});t.props.pickable=!0,t.props.onClick=({object:o,lngLat:i})=>{console.log(o),console.log(i),n.setLngLat(i).setHTML(Object(r.render)(t.popup,o)).addTo(e)}}"object"==typeof t.props.data&&(t.props.data=HTMLWidgets.dataframeToD3(t.props.data));const n={};for(let e in t.props){const o=t.props[e];p(o)&&(console.log(o),n[e]=t=>JSON.parse(Object(r.render)(o.replace("@=",""),t)))}Object.assign(t.props,n),console.log(t.props);const o=new deck.MapboxLayer(t.props);e.addLayer(o)}}},function(t,e,n){"use strict";(function(t){n(6);var o=n(2),r=n(1);const i=t.mapboxer={methods:o.a,_widget:{}};e.a=function(t,e,n){let s=null;const a=i._widget[t.id]={};return HTMLWidgets.shinyMode&&Shiny.addCustomMessageHandler("mapboxer",e=>{console.log("proxyObject",e),e.id===t.id&&(console.log("Updating "+t.id),e.widgetData.calls.forEach(({methodName:t,args:e})=>o.a[t].call(s,e)))}),{renderValue:function(e){console.log("mapboxgl",mapboxgl.version),console.log("widgetData",e);const n=e.mapProps.style;"object"==typeof n&&(n.sources=n.sources||{},Object.values(n.sources).forEach(t=>{t.hasOwnProperty("tiles")&!Array.isArray(t.tiles)&&(t.tiles=Array(t.tiles))})),mapboxgl.accessToken=e.accessToken||null,e.mapProps.container=t.id,s=a.map=new mapboxgl.Map(e.mapProps),s.on("error",t=>{throw t.error}),e.source&&s.on("load",()=>o.a.addSource.call(s,{id:r.a,source:e.source})),s.on("load",()=>e.calls.forEach(({methodName:t,args:e})=>{o.a[t].call(s,e)}))},resize:function(t,e){}}}}).call(this,n(5))},function(t,e,n){"use strict";n.r(e);var o=n(3);HTMLWidgets.widget({name:"mapboxer",type:"output",factory:o.a})},function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e,n){var o=n(7),r=n(8);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[t.i,r,""]]);var i={insert:"head",singleton:!1};o(r,i);t.exports=r.locals||{}},function(t,e,n){"use strict";var o,r=function(){return void 0===o&&(o=Boolean(window&&document&&document.all&&!window.atob)),o},i=function(){var t={};return function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}t[e]=n}return t[e]}}(),s=[];function a(t){for(var e=-1,n=0;n":">",'"':""","'":"'","/":"/","`":"`","=":"="},l=/\s*/,p=/\s+/,u=/\s*=/,d=/\s*\}/,h=/#|\^|\/|>|\{|&|=|!/;function f(e){this.string=e,this.tail=e,this.pos=0}function m(e,t){this.view=e,this.cache={".":this.view},this.parent=t}function g(){this.templateCache={_cache:{},set:function(e,t){this._cache[e]=t},get:function(e){return this._cache[e]},clear:function(){this._cache={}}}}f.prototype.eos=function(){return""===this.tail},f.prototype.scan=function(e){var t=this.tail.match(e);if(!t||0!==t.index)return"";var n=t[0];return this.tail=this.tail.substring(n.length),this.pos+=n.length,n},f.prototype.scanUntil=function(e){var t,n=this.tail.search(e);switch(n){case-1:t=this.tail,this.tail="";break;case 0:t="";break;default:t=this.tail.substring(0,n),this.tail=this.tail.substring(n)}return this.pos+=t.length,t},m.prototype.push=function(e){return new m(e,this)},m.prototype.lookup=function(e){var t,o,i,s=this.cache;if(s.hasOwnProperty(e))t=s[e];else{for(var a,c,l,p=this,u=!1;p;){if(e.indexOf(".")>0)for(a=p.view,c=e.split("."),l=0;null!=a&&l0?r[r.length-1][4]:n;break;default:o.push(t)}return n}(function(e){for(var t,n,o=[],r=0,i=e.length;r"===s?a=this.renderPartial(i,t,n,r):"&"===s?a=this.unescapedValue(i,t):"name"===s?a=this.escapedValue(i,t):"text"===s&&(a=this.rawValue(i)),void 0!==a&&(c+=a);return c},g.prototype.renderSection=function(e,o,r,i){var s=this,a="",c=o.lookup(e[1]);if(c){if(t(c))for(var l=0,p=c.length;l0||!n)&&(r[i]=o+r[i]);return r.join("\n")},g.prototype.renderPartial=function(e,t,o,r){if(o){var i=n(o)?o(e[1]):o[e[1]];if(null!=i){var s=e[6],a=e[5],c=e[4],l=i;return 0==a&&c&&(l=this.indentPartial(i,c,s)),this.renderTokens(this.parse(l,r),t,o,l,r)}}},g.prototype.unescapedValue=function(e,t){var n=t.lookup(e[1]);if(null!=n)return n},g.prototype.escapedValue=function(e,t){var n=t.lookup(e[1]);if(null!=n)return y.escape(n)},g.prototype.rawValue=function(e){return e[1]};var y={name:"mustache.js",version:"4.0.1",tags:["{{","}}"],clearCache:void 0,escape:void 0,parse:void 0,render:void 0,Scanner:void 0,Context:void 0,Writer:void 0,set templateCache(e){v.templateCache=e},get templateCache(){return v.templateCache}},v=new g;return y.clearCache=function(){return v.clearCache()},y.parse=function(e,t){return v.parse(e,t)},y.render=function(e,n,o,r){if("string"!=typeof e)throw new TypeError('Invalid template! Template should be a "string" but "'+(t(i=e)?"array":typeof i)+'" was given as the first argument for mustache#render(template, view, partials)');var i;return v.render(e,n,o,r)},y.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},y.Scanner=f,y.Context=m,y.Writer=g,y}()},function(e,t,n){"use strict";n.d(t,"a",(function(){return o}));const o="MAPBOXER"},function(e,t,n){"use strict";var o={};n.r(o),n.d(o,"TextControl",(function(){return i})),n.d(o,"MousePositionControl",(function(){return s})),n.d(o,"FilterControl",(function(){return a})),n.d(o,"LegendControl",(function(){return c})),n.d(o,"PanelControl",(function(){return l}));var r=n(0);class i{constructor(e){this._options=e||{}}onAdd(e){return this._map=e,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",this._container.innerHTML=this._options.text||"Hello mapboxer!",this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}getContainer(){return this._container}}class s{constructor(e){this._options=e||{}}onAdd(e){this._map=e,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-mouse-position-ctrl"),this._container.style.cssText=this._options.cssText||"";const t=this._options.mustacheTemplate||"{{lng}}, {{lat}}";return this._map.on("mousemove",e=>{this._container.innerHTML=Object(r.render)(t,e.lngLat)}),this._map.on("mouseout",e=>{this._container.innerHTML="",this._container.style.display="none"}),this._map.on("mouseover",e=>{this._container.style.display="block"}),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}}class a{constructor(e){this._options=e||{}}onAdd(e){this._map=e,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-filter-ctrl"),this._container.style.cssText=this._options.cssText||"";const t=document.createElement("textarea");return Object.assign(t,{spellcheck:!1,id:"filter"},this._options.textareaAttributes),this._options.filter&&(t.value=JSON.stringify(this._options.filter),e.setFilter(this._options.layerId,this._options.filter)),t.addEventListener("keyup",n=>{const o=t.value;try{const t=JSON.parse(o);e.setFilter(this._options.layerId,t)}catch(e){}}),this._container.append(t),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}}class c{constructor(e){this._options=e||{}}onAdd(e){this._map=e,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-legend-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log(this._options.items);const t=this._options.items.map(e=>`\n
  • \n \n ${e.label}\n
    • \n `),n=`\n
    \n
    ${this._options.title||""}
    \n
      ${t.join("")}
    \n
    \n `;return this._container.innerHTML=n,this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}}class l{constructor(e){this._options=e||{items:[]},this._sliders=[]}onAdd(e){return this._map=e,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(e=>{"Slider"===e.type&&this._addSlider(e),"string"==typeof e&&this._addHTML(e),"LayerSwitcher"===e.type&&this._addCheckbox(e)}),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_addSlider({props:e,filter:t}){const n=document.createElement("div");n.classList.add("mapboxer-slider-ctrl","mapboxer-ctrl-item");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=()=>{o.innerHTML=[t.property,t.operator,r.value].join(" ")};return r.onchange=e=>{i();const n=this._getFilterExpressions(t.layerId);this._map.setFilter(t.layerId,n)},this._sliders.push({layerId:t.layerId,getExpression:()=>[t.operator,t.property,parseInt(r.value)]}),i(),this._map.setFilter(t.layerId,this._getFilterExpressions(t.layerId)),n.append(o,r),this._container.append(n),n}_getFilterExpressions(e){const t=this._sliders.filter(t=>t.layerId===e).map(e=>e.getExpression());return console.log(t),["all"].concat(t)}_addHTML(e){const t=document.createElement("div");t.innerHTML=e,this._container.append(t)}_addCheckbox({layerId:e,freestyle:t}){const n=document.createElement("div");n.classList.add("mapboxer-checkbox-ctrl","mapboxer-ctrl-item");const o=document.createElement("label");o.innerHTML=e;const r=document.createElement("input");r.type="checkbox",r.checked="visible"===this._map.getLayoutProperty(e,"visibility"),r.onchange=t=>{console.log(r.checked),this._map.setLayoutProperty(e,"visibility",r.checked?"visible":"none")},t&&(o.style.width="100%",r.style.width="auto"),n.append(o,r),this._container.append(n)}}var p=n(1);function u(e){return"string"==typeof e&&e.startsWith("@=")}t.a={addControl:function(e){const t=new mapboxgl[e.controlName](e.options);this.addControl(t,e.pos)},addSource:function(e){this.addSource(e.id,e.source)},addLayer:function(e){const t=this;e.style.source=e.style.source||p.a,t.addLayer(e.style);const n=e.style.id;t.on("mouseenter",n,()=>t.getCanvas().style.cursor="pointer"),t.on("mouseleave",n,()=>t.getCanvas().style.cursor=""),HTMLWidgets.shinyMode&&t.on("click",e.style.id,e=>{const n=t.getContainer().id,o=e.features[0],r={coords:e.lngLat,props:o.properties,layer_id:o.layer.id,widget_id:n};console.log(r),Shiny.onInputChange(n+"_onclick",r)})},addPopups:function(e){const t=this,n=e.layerId;t.on("click",n,n=>{const o=Object.values(n.lngLat),i=n.features[0],s=Object(r.render)(e.template,i.properties);new mapboxgl.Popup(e.options||{}).setLngLat(o).setHTML(s).addTo(t)})},addTooltips:function(e){const t=this,n=e.layerId,o=new mapboxgl.Popup({closeButton:!1,closeOnClick:!1});t.on("mousemove",n,n=>{const i=Object.values(n.lngLat),s=n.features[0],a=Object(r.render)(e.template,s.properties);o.setLngLat(i).setHTML(a).addTo(t)}),t.on("mouseleave",n,()=>{o.remove()})},addMarker:function(e){const t=(new mapboxgl.Marker).setLngLat([e.lng,e.lat]);t.getElement().style.cursor="pointer",e.popup&&t.setPopup((new mapboxgl.Popup).setHTML(e.popup)),t.addTo(this)},addCustomControl:function(e){const t=new o[e.controlName](e.options);this.addControl(t,e.pos)},customControls:o,setFilter:function(e){this.setFilter(e.layerId,e.filter)},setPaintProperty:function(e){this.setPaintProperty(e.layer,e.property,e.value)},setLayoutProperty:function(e){this.setLayoutProperty(e.layer,e.property,e.value)},setData:function(e){const t=e.source||p.a;this.getSource(t).setData(e.data)},fitBounds:function(e){this.fitBounds(e.bounds,e.options||{})},setStyle:function(e){this.setStyle(e.style)},addDrawControl:function(e){const t=new MapboxDraw(e.options);this.addControl(t,e.pos),e.data&&t.add(e.data),this.on("draw.create",e=>{console.log(e.features),console.log(t.getAll())})},addDeckLayer:function(e){const t=this;if(console.log("deck.gl",deck.version),e.props.type=deck[e.type],e.popup){const n=new mapboxgl.Popup({closeOnClick:!1});e.props.pickable=!0,e.props.onClick=({object:o,lngLat:i})=>{console.log(o),console.log(i),n.setLngLat(i).setHTML(Object(r.render)(e.popup,o)).addTo(t)}}"object"==typeof e.props.data&&(e.props.data=HTMLWidgets.dataframeToD3(e.props.data));const n={};for(let t in e.props){const o=e.props[t];u(o)&&(console.log(o),n[t]=e=>JSON.parse(Object(r.render)(o.replace("@=",""),e)))}Object.assign(e.props,n),console.log(e.props);const o=new deck.MapboxLayer(e.props);t.addLayer(o)},addImage:function({id:e,url:t,style:n}){const o=this;o.loadImage(t,(t,r)=>{if(t)throw t;o.addImage(e,r),o.addLayer(n)})}}},function(e,t,n){"use strict";(function(e){n(6);var o=n(2),r=n(1);const i=e.mapboxer={methods:o.a,_widget:{}};t.a=function(e,t,n){let s=null;const a=i._widget[e.id]={};return HTMLWidgets.shinyMode&&Shiny.addCustomMessageHandler("mapboxer",t=>{console.log("proxyObject",t),t.id===e.id&&(console.log("Updating "+e.id),t.widgetData.calls.forEach(({methodName:e,args:t})=>o.a[e].call(s,t)))}),{renderValue:function(t){console.log("mapboxgl",mapboxgl.version),console.log("widgetData",t);const n=t.mapProps.style;"object"==typeof n&&(n.sources=n.sources||{},Object.values(n.sources).forEach(e=>{e.hasOwnProperty("tiles")&!Array.isArray(e.tiles)&&(e.tiles=Array(e.tiles))})),mapboxgl.accessToken=t.accessToken||null,t.mapProps.container=e.id,s=a.map=new mapboxgl.Map(t.mapProps),s.on("error",e=>{throw e.error}),t.source&&s.on("load",()=>o.a.addSource.call(s,{id:r.a,source:t.source})),s.on("load",()=>t.calls.forEach(({methodName:e,args:t})=>{o.a[e].call(s,t)}))},resize:function(e,t){}}}}).call(this,n(5))},function(e,t,n){"use strict";n.r(t);var o=n(3);HTMLWidgets.widget({name:"mapboxer",type:"output",factory:o.a})},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){var o=n(7),r=n(8);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.i,r,""]]);var i={insert:"head",singleton:!1};o(r,i);e.exports=r.locals||{}},function(e,t,n){"use strict";var o,r=function(){return void 0===o&&(o=Boolean(window&&document&&document.all&&!window.atob)),o},i=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),s=[];function a(e){for(var t=-1,n=0;n { + 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); + } +} diff --git a/javascript/src/methods.js b/javascript/src/methods.js index a5dcd92..de53250 100644 --- a/javascript/src/methods.js +++ b/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 }; diff --git a/javascript/styles/mapboxer.css b/javascript/styles/mapboxer.css index 8f5c809..e290f17 100644 --- a/javascript/styles/mapboxer.css +++ b/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;