From e75ad2bcd5d6a5092e400b1dc21338ee649f3f75 Mon Sep 17 00:00:00 2001 From: skuethe Date: Tue, 3 Nov 2020 16:05:16 +0100 Subject: [PATCH 01/21] Add initial slider control --- R/control-panel.R | 8 ++++ inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/index.js | 1 + javascript/src/custom-controls/xyz-control.js | 39 +++++++++++++++++++ 4 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 R/control-panel.R create mode 100644 javascript/src/custom-controls/xyz-control.js diff --git a/R/control-panel.R b/R/control-panel.R new file mode 100644 index 0000000..465369e --- /dev/null +++ b/R/control-panel.R @@ -0,0 +1,8 @@ +add_control_panel <- function(map, ...) { + invoke_method(map, "addCustomControl", controlName = "XYZControl", + options = list(elem_range_slider(0, 6, 1, 2))) +} + +elem_range_slider <- function(min, max, step, value) { + list(min = min, max = max, step = step, value = value) +} diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 005fa1e..71705aa 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * 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(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})),n.d(o,"XYZControl",(function(){return l}));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}}class l{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const e=function(t){const e=document.createElement("input");return e.type="range",Object.assign(e,t),e.onchange=t=>console.log(t.target.value),e}(this._options[0]);return this._container.append(e),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}}var p=n(1);function u(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||p.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||p.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];u(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 console.log(slider.value, e.target.value); + */ + const slider = createSlider(this._options[0]); + this._container.append(slider); + + return this._container; + } + + onRemove() { + this._container.parentNode.removeChild(this._container); + this._map = undefined; + } +} + +function createSlider(props) { + const slider = document.createElement("input"); + slider.type = "range"; + Object.assign(slider, props); + slider.onchange = (e) => console.log(e.target.value); + return slider; +} From a6540955cf6a2754f26f3f78e3ecd03cdec40e66 Mon Sep 17 00:00:00 2001 From: skuethe Date: Tue, 3 Nov 2020 19:49:42 +0100 Subject: [PATCH 02/21] Add 'layer_id' parameter --- R/as-mapboxer-viz.R | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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) } From cc5af5a25146b53ec7fb41d6ac427e579390f892 Mon Sep 17 00:00:00 2001 From: skuethe Date: Tue, 3 Nov 2020 19:52:32 +0100 Subject: [PATCH 03/21] Filter layer on slider change event --- R/control-panel.R | 8 +++++-- examples/experimental/sliders.R | 10 +++++++++ inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/xyz-control.js | 22 ++++++++++++------- 4 files changed, 31 insertions(+), 11 deletions(-) create mode 100644 examples/experimental/sliders.R diff --git a/R/control-panel.R b/R/control-panel.R index 465369e..b286a28 100644 --- a/R/control-panel.R +++ b/R/control-panel.R @@ -1,8 +1,12 @@ add_control_panel <- function(map, ...) { invoke_method(map, "addCustomControl", controlName = "XYZControl", - options = list(elem_range_slider(0, 6, 1, 2))) + options = list(...)) } -elem_range_slider <- function(min, max, step, value) { +elem_range_slider <- function(min, max, step, value = min) { list(min = min, max = max, step = step, value = value) } + +on_change_filter <- function(elem, layer_id, property, operator = "==") { + modifyList(elem, list(mapboxLayerId = layer_id, mapboxProperty = property, mapboxOperator = operator)) +} diff --git a/examples/experimental/sliders.R b/examples/experimental/sliders.R new file mode 100644 index 0000000..547af41 --- /dev/null +++ b/examples/experimental/sliders.R @@ -0,0 +1,10 @@ +LAYER_ID <- "crashes" + +slider <- elem_range_slider(min = 0, max = 6, step = 1) %>% + on_change_filter(LAYER_ID, property = "injured", operator = ">=") + +as_mapboxer_viz(motor_vehicle_collisions_nyc, coords = c("lng", "lat"), layer_id = LAYER_ID) %>% + add_control_panel( + slider + ) %>% + add_popups(LAYER_ID, "{{injured}}") diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 71705aa..b22da9b 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * 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})),n.d(o,"XYZControl",(function(){return l}));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}}class l{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const e=function(t){const e=document.createElement("input");return e.type="range",Object.assign(e,t),e.onchange=t=>console.log(t.target.value),e}(this._options[0]);return this._container.append(e),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}}var p=n(1);function u(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||p.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||p.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];u(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(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})),n.d(o,"XYZControl",(function(){return l}));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}}class l{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const e=this._createSlider(this._options[0]);return this._container.append(e),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_createSlider(t){const e=document.createElement("input");return e.type="range",Object.assign(e,t),e.onchange=t=>{const n=[e.mapboxOperator,e.mapboxProperty,parseInt(e.value)];console.log(n),this._map.setFilter(e.mapboxLayerId,n)},e}}var p=n(1);function u(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||p.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||p.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];u(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 console.log(slider.value, e.target.value); */ - const slider = createSlider(this._options[0]); + const slider = this._createSlider(this._options[0]); this._container.append(slider); return this._container; @@ -28,12 +28,18 @@ export default class XYZControl { this._container.parentNode.removeChild(this._container); this._map = undefined; } -} -function createSlider(props) { - const slider = document.createElement("input"); - slider.type = "range"; - Object.assign(slider, props); - slider.onchange = (e) => console.log(e.target.value); - return slider; + _createSlider(props) { + const slider = document.createElement("input"); + slider.type = "range"; + Object.assign(slider, props); + slider.onchange = (e) => { + // e.target + const expression = [ slider.mapboxOperator, slider.mapboxProperty, parseInt(slider.value) ]; + console.log(expression); + this._map.setFilter(slider.mapboxLayerId, expression); + }; + return slider; + } } + From c76f97ccdfa2839a0b46452e72bed8aaf6b431bd Mon Sep 17 00:00:00 2001 From: skuethe Date: Wed, 4 Nov 2020 07:24:12 +0100 Subject: [PATCH 04/21] Add slider container --- inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/xyz-control.js | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index b22da9b..39626d8 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * 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})),n.d(o,"XYZControl",(function(){return l}));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}}class l{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const e=this._createSlider(this._options[0]);return this._container.append(e),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_createSlider(t){const e=document.createElement("input");return e.type="range",Object.assign(e,t),e.onchange=t=>{const n=[e.mapboxOperator,e.mapboxProperty,parseInt(e.value)];console.log(n),this._map.setFilter(e.mapboxLayerId,n)},e}}var p=n(1);function u(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||p.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||p.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];u(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(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})),n.d(o,"XYZControl",(function(){return l}));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}}class l{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const e=this._createSlider(this._options[0]);return this._container.append(e),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_createSlider(t){const e=document.createElement("div");e.classList.add("mapboxer-slider-ctrl");const n=document.createElement("output"),o=document.createElement("input");return o.type="range",Object.assign(o,t),o.onchange=t=>{n.innerHTML=o.value;const e=[o.mapboxOperator,o.mapboxProperty,parseInt(o.value)];console.log(e),this._map.setFilter(o.mapboxLayerId,e)},n.innerHTML=o.value,e.append(n,o),e}}var p=n(1);function u(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||p.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||p.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];u(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 { + output.innerHTML = slider.value; // e.target const expression = [ slider.mapboxOperator, slider.mapboxProperty, parseInt(slider.value) ]; console.log(expression); this._map.setFilter(slider.mapboxLayerId, expression); }; - return slider; + + output.innerHTML = slider.value; + container.append(output, slider); + return container; } } From 552f7acea49c5d14b6d29fb8a572e1a8a6b3b890 Mon Sep 17 00:00:00 2001 From: skuethe Date: Wed, 4 Nov 2020 07:36:50 +0100 Subject: [PATCH 05/21] Refactor slider --- R/control-panel.R | 6 ++++-- examples/experimental/sliders.R | 4 ++-- inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/xyz-control.js | 7 ++++--- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/R/control-panel.R b/R/control-panel.R index b286a28..ebf4d40 100644 --- a/R/control-panel.R +++ b/R/control-panel.R @@ -4,9 +4,11 @@ add_control_panel <- function(map, ...) { } elem_range_slider <- function(min, max, step, value = min) { - list(min = min, max = max, step = step, value = value) + list(props = list(min = min, max = max, step = step, value = value)) } on_change_filter <- function(elem, layer_id, property, operator = "==") { - modifyList(elem, list(mapboxLayerId = layer_id, mapboxProperty = property, mapboxOperator = 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/examples/experimental/sliders.R b/examples/experimental/sliders.R index 547af41..734a680 100644 --- a/examples/experimental/sliders.R +++ b/examples/experimental/sliders.R @@ -1,7 +1,7 @@ LAYER_ID <- "crashes" -slider <- elem_range_slider(min = 0, max = 6, step = 1) %>% - on_change_filter(LAYER_ID, property = "injured", operator = ">=") +slider <- elem_range_slider(min = 0, max = 6, step = 1, value = 3) %>% + on_change_filter(LAYER_ID, property = "injured", operator = "==") as_mapboxer_viz(motor_vehicle_collisions_nyc, coords = c("lng", "lat"), layer_id = LAYER_ID) %>% add_control_panel( diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 39626d8..e7078ea 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * 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})),n.d(o,"XYZControl",(function(){return l}));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}}class l{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const e=this._createSlider(this._options[0]);return this._container.append(e),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_createSlider(t){const e=document.createElement("div");e.classList.add("mapboxer-slider-ctrl");const n=document.createElement("output"),o=document.createElement("input");return o.type="range",Object.assign(o,t),o.onchange=t=>{n.innerHTML=o.value;const e=[o.mapboxOperator,o.mapboxProperty,parseInt(o.value)];console.log(e),this._map.setFilter(o.mapboxLayerId,e)},n.innerHTML=o.value,e.append(n,o),e}}var p=n(1);function u(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||p.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||p.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];u(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(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})),n.d(o,"XYZControl",(function(){return l}));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}}class l{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const e=this._createSlider(this._options[0]);return this._container.append(e),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_createSlider({props:t,filter:e}){const n=document.createElement("div");n.classList.add("mapboxer-slider-ctrl");const o=document.createElement("output"),r=document.createElement("input");return r.type="range",Object.assign(r,t),r.onchange=t=>{o.innerHTML=r.value;const n=[e.operator,e.property,parseInt(t.target.value)];console.log(n),this._map.setFilter(e.layerId,n)},o.innerHTML=r.value,n.append(o,r),this._map.setFilter(e.layerId,[e.operator,e.property,t.value]),n}}var p=n(1);function u(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||p.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||p.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];u(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 { output.innerHTML = slider.value; // e.target - const expression = [ slider.mapboxOperator, slider.mapboxProperty, parseInt(slider.value) ]; + const expression = [ filter.operator, filter.property, parseInt(e.target.value) ]; console.log(expression); - this._map.setFilter(slider.mapboxLayerId, expression); + this._map.setFilter(filter.layerId, expression); }; output.innerHTML = slider.value; container.append(output, slider); + this._map.setFilter(filter.layerId, [ filter.operator, filter.property, props.value ]); return container; } } From 5dd835f6b8d66428de0a0be0a7ffe823a8bd6b87 Mon Sep 17 00:00:00 2001 From: skuethe Date: Wed, 4 Nov 2020 07:56:35 +0100 Subject: [PATCH 06/21] Style slider --- inst/htmlwidgets/mapboxer.js | 4 ++-- javascript/src/custom-controls/xyz-control.js | 12 +++++------- javascript/styles/mapboxer.css | 13 +++++++++++++ 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index e7078ea..51de99a 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})),n.d(o,"XYZControl",(function(){return l}));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}}class l{constructor(t){this._options=t||{}}onAdd(t){this._map=t,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const e=this._createSlider(this._options[0]);return this._container.append(e),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_createSlider({props:t,filter:e}){const n=document.createElement("div");n.classList.add("mapboxer-slider-ctrl");const o=document.createElement("output"),r=document.createElement("input");return r.type="range",Object.assign(r,t),r.onchange=t=>{o.innerHTML=r.value;const n=[e.operator,e.property,parseInt(t.target.value)];console.log(n),this._map.setFilter(e.layerId,n)},o.innerHTML=r.value,n.append(o,r),this._map.setFilter(e.layerId,[e.operator,e.property,t.value]),n}}var p=n(1);function u(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||p.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||p.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];u(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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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,"XYZControl",(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||{}}onAdd(e){this._map=e,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const t=this._createSlider(this._options[0]);return this._container.append(t),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_createSlider({props:e,filter:t}){const n=document.createElement("div");n.classList.add("mapboxer-slider-ctrl");const o=document.createElement("label"),r=document.createElement("input");return r.type="range",Object.assign(r,e),r.onchange=e=>{o.innerHTML=e.target.value;const n=[t.operator,t.property,parseInt(e.target.value)];console.log(n),this._map.setFilter(t.layerId,n)},o.innerHTML=r.value,this._map.setFilter(t.layerId,[t.operator,t.property,e.value]),n.append(o,r),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)}}},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 { - output.innerHTML = slider.value; - // e.target + label.innerHTML = e.target.value; const expression = [ filter.operator, filter.property, parseInt(e.target.value) ]; console.log(expression); this._map.setFilter(filter.layerId, expression); }; - output.innerHTML = slider.value; - container.append(output, slider); + label.innerHTML = slider.value; this._map.setFilter(filter.layerId, [ filter.operator, filter.property, props.value ]); + container.append(label, slider); return container; } } diff --git a/javascript/styles/mapboxer.css b/javascript/styles/mapboxer.css index 8f5c809..5dbe9bf 100644 --- a/javascript/styles/mapboxer.css +++ b/javascript/styles/mapboxer.css @@ -1,3 +1,7 @@ +canvas:focus { + outline: none; +} + .mapboxer-text-ctrl, .mapboxer-mouse-position-ctrl, .mapboxer-legend-ctrl /*, .mapboxer-filter-ctrl */ { background: #FFFFFF; @@ -35,6 +39,15 @@ vertical-align: middle; } +.mapboxer-slider-ctrl { + display: flex; + align-items: center; +} + +.mapboxer-slider-ctrl label { + padding-right: 10px; +} + /* Legend */ .mapboxer-legend ul { padding: 0; From dc30709575a2ba8db13e6282dadc84d566e1631f Mon Sep 17 00:00:00 2001 From: skuethe Date: Wed, 4 Nov 2020 08:22:29 +0100 Subject: [PATCH 07/21] Use filter expression as label --- R/control-panel.R | 6 +++--- examples/experimental/sliders.R | 7 ++++--- inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/xyz-control.js | 10 +++++++--- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/R/control-panel.R b/R/control-panel.R index ebf4d40..60c3675 100644 --- a/R/control-panel.R +++ b/R/control-panel.R @@ -1,10 +1,10 @@ -add_control_panel <- function(map, ...) { +add_control_panel <- function(map, ..., pos = NULL) { invoke_method(map, "addCustomControl", controlName = "XYZControl", - options = list(...)) + options = list(...), pos = pos) } elem_range_slider <- function(min, max, step, value = min) { - list(props = list(min = min, max = max, step = step, value = value)) + list(props = list(min = min, max = max, step = step, value = value), type = "Slider") } on_change_filter <- function(elem, layer_id, property, operator = "==") { diff --git a/examples/experimental/sliders.R b/examples/experimental/sliders.R index 734a680..4f95f17 100644 --- a/examples/experimental/sliders.R +++ b/examples/experimental/sliders.R @@ -1,10 +1,11 @@ LAYER_ID <- "crashes" slider <- elem_range_slider(min = 0, max = 6, step = 1, value = 3) %>% - on_change_filter(LAYER_ID, property = "injured", operator = "==") + on_change_filter(LAYER_ID, property = "injured", operator = ">=") as_mapboxer_viz(motor_vehicle_collisions_nyc, coords = c("lng", "lat"), layer_id = LAYER_ID) %>% add_control_panel( - slider + slider, + pos = "top-left" ) %>% - add_popups(LAYER_ID, "{{injured}}") + add_popups(LAYER_ID, mapbox_popup("{{injured}}", event = "hover")) diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 51de99a..bf302f6 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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,"XYZControl",(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||{}}onAdd(e){this._map=e,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const t=this._createSlider(this._options[0]);return this._container.append(t),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_createSlider({props:e,filter:t}){const n=document.createElement("div");n.classList.add("mapboxer-slider-ctrl");const o=document.createElement("label"),r=document.createElement("input");return r.type="range",Object.assign(r,e),r.onchange=e=>{o.innerHTML=e.target.value;const n=[t.operator,t.property,parseInt(e.target.value)];console.log(n),this._map.setFilter(t.layerId,n)},o.innerHTML=r.value,this._map.setFilter(t.layerId,[t.operator,t.property,e.value]),n.append(o,r),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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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,"XYZControl",(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||{}}onAdd(e){this._map=e,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const t=this._createSlider(this._options[0]);return this._container.append(t),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_createSlider({props:e,filter:t}){const n=document.createElement("div");n.classList.add("mapboxer-slider-ctrl");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=[t.operator,t.property,parseInt(e.target.value)];console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._map.setFilter(t.layerId,[t.operator,t.property,e.value]),n.append(o,r),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)}}},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 { + label.innerHTML = [filter.property, filter.operator, value].join(" "); + }; slider.onchange = (e) => { - label.innerHTML = e.target.value; + //label.innerHTML = e.target.value; + setLabel(e.target.value); const expression = [ filter.operator, filter.property, parseInt(e.target.value) ]; console.log(expression); this._map.setFilter(filter.layerId, expression); }; - label.innerHTML = slider.value; + setLabel(slider.value); + //label.innerHTML = slider.value; this._map.setFilter(filter.layerId, [ filter.operator, filter.property, props.value ]); container.append(label, slider); return container; From af198d3a2f3f832f7be90ddf50f4da0d47a43668 Mon Sep 17 00:00:00 2001 From: skuethe Date: Wed, 4 Nov 2020 08:51:53 +0100 Subject: [PATCH 08/21] Support multiple sliders --- examples/experimental/sliders.R | 4 ++++ inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/xyz-control.js | 21 +++++++------------ 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/examples/experimental/sliders.R b/examples/experimental/sliders.R index 4f95f17..3fcfef5 100644 --- a/examples/experimental/sliders.R +++ b/examples/experimental/sliders.R @@ -3,9 +3,13 @@ LAYER_ID <- "crashes" 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 = 0, max = 6, step = 1, value = 4) %>% + on_change_filter(LAYER_ID, property = "injured", operator = "<=") + as_mapboxer_viz(motor_vehicle_collisions_nyc, coords = c("lng", "lat"), layer_id = LAYER_ID) %>% add_control_panel( slider, + slider2, pos = "top-left" ) %>% add_popups(LAYER_ID, mapbox_popup("{{injured}}", event = "hover")) diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index bf302f6..2329aeb 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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,"XYZControl",(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||{}}onAdd(e){this._map=e,this._container=document.createElement("div"),this._container.classList.add("mapboxgl-ctrl","mapboxer-text-ctrl"),this._container.style.cssText=this._options.cssText||"",console.log("slider",this._options);const t=this._createSlider(this._options[0]);return this._container.append(t),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}_createSlider({props:e,filter:t}){const n=document.createElement("div");n.classList.add("mapboxer-slider-ctrl");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=[t.operator,t.property,parseInt(e.target.value)];console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._map.setFilter(t.layerId,[t.operator,t.property,e.value]),n.append(o,r),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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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,"XYZControl",(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||{}}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||"",console.log("control panel",this._options),this._options.forEach(e=>{"Slider"===e.type&&this._addSlider(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");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=[t.operator,t.property,parseInt(e.target.value)];console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._map.setFilter(t.layerId,[t.operator,t.property,e.value]),n.append(o,r),this._container.append(n),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)}}},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 console.log(slider.value, e.target.value); - */ - const slider = this._createSlider(this._options[0]); - this._container.append(slider); - + console.log("control panel", this._options); + this._options.forEach(item => { + if(item.type === "Slider") this._addSlider(item); + }); return this._container; } @@ -29,7 +21,7 @@ export default class XYZControl { this._map = undefined; } - _createSlider({props, filter}) { + _addSlider({props, filter}) { const container = document.createElement("div"); container.classList.add("mapboxer-slider-ctrl"); const label = document.createElement("label"); @@ -47,10 +39,11 @@ export default class XYZControl { this._map.setFilter(filter.layerId, expression); }; - setLabel(slider.value); //label.innerHTML = slider.value; + setLabel(slider.value); this._map.setFilter(filter.layerId, [ filter.operator, filter.property, props.value ]); container.append(label, slider); + this._container.append(container); return container; } } From 9f76e36823bef841726d82190bc256a5a6dc7b5f Mon Sep 17 00:00:00 2001 From: skuethe Date: Wed, 4 Nov 2020 12:00:12 +0100 Subject: [PATCH 09/21] Support multiple slider filters for a layer --- inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/xyz-control.js | 21 +++++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 2329aeb..4e503c9 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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,"XYZControl",(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||{}}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||"",console.log("control panel",this._options),this._options.forEach(e=>{"Slider"===e.type&&this._addSlider(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");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=[t.operator,t.property,parseInt(e.target.value)];console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._map.setFilter(t.layerId,[t.operator,t.property,e.value]),n.append(o,r),this._container.append(n),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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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,"XYZControl",(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||{},this._sliders=[]}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||"",console.log("control panel",this._options),this._options.forEach(e=>{"Slider"===e.type&&this._addSlider(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");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=this._getFilterExpressions(t.layerId);console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._sliders.push({layerId:t.layerId,getExpression:()=>[t.operator,t.property,parseInt(r.value)]}),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["all"].concat(t)}}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)}}},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 { label.innerHTML = [filter.property, filter.operator, value].join(" "); }; + const getExpression = () => [filter.operator, filter.property, parseInt(slider.value)]; slider.onchange = (e) => { //label.innerHTML = e.target.value; setLabel(e.target.value); - const expression = [ filter.operator, filter.property, parseInt(e.target.value) ]; + //const expression = [ filter.operator, filter.property, parseInt(e.target.value) ]; + //const expression = getExpression(); + const expression = this._getFilterExpressions(filter.layerId); console.log(expression); this._map.setFilter(filter.layerId, expression); }; //label.innerHTML = slider.value; setLabel(slider.value); - this._map.setFilter(filter.layerId, [ filter.operator, filter.property, props.value ]); + //this._map.setFilter(filter.layerId, [ filter.operator, filter.property, props.value ]); + this._sliders.push({ + layerId: filter.layerId, + getExpression + }); + this._map.setFilter(filter.layerId, this._getFilterExpressions(filter.layerId)); + + // Add container 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()); + return [ "all" ].concat(expressions); + } } From 5559fe6066fe1ca2c89e7b5b32c7141b0dec7cb1 Mon Sep 17 00:00:00 2001 From: skuethe Date: Wed, 4 Nov 2020 14:54:30 +0100 Subject: [PATCH 10/21] Style labels --- inst/htmlwidgets/mapboxer.js | 2 +- javascript/styles/mapboxer.css | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 4e503c9..dbed57b 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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,"XYZControl",(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||{},this._sliders=[]}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||"",console.log("control panel",this._options),this._options.forEach(e=>{"Slider"===e.type&&this._addSlider(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");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=this._getFilterExpressions(t.layerId);console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._sliders.push({layerId:t.layerId,getExpression:()=>[t.operator,t.property,parseInt(r.value)]}),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["all"].concat(t)}}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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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,"XYZControl",(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||{},this._sliders=[]}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||"",console.log("control panel",this._options),this._options.forEach(e=>{"Slider"===e.type&&this._addSlider(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");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=this._getFilterExpressions(t.layerId);console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._sliders.push({layerId:t.layerId,getExpression:()=>[t.operator,t.property,parseInt(r.value)]}),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["all"].concat(t)}}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)}}},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 Date: Wed, 4 Nov 2020 14:55:30 +0100 Subject: [PATCH 11/21] Add second slider to control panel example --- examples/experimental/sliders.R | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/examples/experimental/sliders.R b/examples/experimental/sliders.R index 3fcfef5..191bb32 100644 --- a/examples/experimental/sliders.R +++ b/examples/experimental/sliders.R @@ -1,12 +1,15 @@ 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 = 0, max = 6, step = 1, value = 4) %>% - 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(motor_vehicle_collisions_nyc, coords = c("lng", "lat"), layer_id = LAYER_ID) %>% +as_mapboxer_viz(mvc, coords = c("lng", "lat"), layer_id = LAYER_ID) %>% add_control_panel( slider, slider2, From a47d1b03319d25c25a2d104e210044e874b0a2bd Mon Sep 17 00:00:00 2001 From: skuethe Date: Wed, 4 Nov 2020 14:55:51 +0100 Subject: [PATCH 12/21] Add skeleton for int filter slider --- R/control-panel.R | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/R/control-panel.R b/R/control-panel.R index 60c3675..e8bba57 100644 --- a/R/control-panel.R +++ b/R/control-panel.R @@ -3,6 +3,10 @@ add_control_panel <- function(map, ..., pos = NULL) { options = list(...), pos = pos) } +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") } From 4a71b26a0337ef202da8a67c1e0825d0e011a888 Mon Sep 17 00:00:00 2001 From: skuethe Date: Thu, 5 Nov 2020 19:00:19 +0100 Subject: [PATCH 13/21] Rename control --- R/control-panel.R | 2 +- inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/index.js | 2 +- .../src/custom-controls/{xyz-control.js => panel-control.js} | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) rename javascript/src/custom-controls/{xyz-control.js => panel-control.js} (98%) diff --git a/R/control-panel.R b/R/control-panel.R index e8bba57..248e477 100644 --- a/R/control-panel.R +++ b/R/control-panel.R @@ -1,5 +1,5 @@ add_control_panel <- function(map, ..., pos = NULL) { - invoke_method(map, "addCustomControl", controlName = "XYZControl", + invoke_method(map, "addCustomControl", controlName = "PanelControl", options = list(...), pos = pos) } diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index dbed57b..29a677c 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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,"XYZControl",(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||{},this._sliders=[]}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||"",console.log("control panel",this._options),this._options.forEach(e=>{"Slider"===e.type&&this._addSlider(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");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=this._getFilterExpressions(t.layerId);console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._sliders.push({layerId:t.layerId,getExpression:()=>[t.operator,t.property,parseInt(r.value)]}),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["all"].concat(t)}}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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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||{},this._sliders=[]}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||"",console.log("control panel",this._options),this._options.forEach(e=>{"Slider"===e.type&&this._addSlider(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");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=this._getFilterExpressions(t.layerId);console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._sliders.push({layerId:t.layerId,getExpression:()=>[t.operator,t.property,parseInt(r.value)]}),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["all"].concat(t)}}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)}}},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 Date: Thu, 5 Nov 2020 19:09:06 +0100 Subject: [PATCH 14/21] Use 'items' property --- R/control-panel.R | 2 +- inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/panel-control.js | 6 +++--- javascript/styles/mapboxer.css | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/R/control-panel.R b/R/control-panel.R index 248e477..97e3bba 100644 --- a/R/control-panel.R +++ b/R/control-panel.R @@ -1,6 +1,6 @@ add_control_panel <- function(map, ..., pos = NULL) { invoke_method(map, "addCustomControl", controlName = "PanelControl", - options = list(...), pos = pos) + options = list(items = list(...)), pos = pos) } int_filder_slider <- function() { diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 29a677c..762aff9 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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||{},this._sliders=[]}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||"",console.log("control panel",this._options),this._options.forEach(e=>{"Slider"===e.type&&this._addSlider(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");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=this._getFilterExpressions(t.layerId);console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._sliders.push({layerId:t.layerId,getExpression:()=>[t.operator,t.property,parseInt(r.value)]}),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["all"].concat(t)}}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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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)}),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");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=this._getFilterExpressions(t.layerId);console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._sliders.push({layerId:t.layerId,getExpression:()=>[t.operator,t.property,parseInt(r.value)]}),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["all"].concat(t)}}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)}}},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 { + this._options.items.forEach(item => { if(item.type === "Slider") this._addSlider(item); }); return this._container; diff --git a/javascript/styles/mapboxer.css b/javascript/styles/mapboxer.css index 28c230c..9da13a5 100644 --- a/javascript/styles/mapboxer.css +++ b/javascript/styles/mapboxer.css @@ -3,7 +3,7 @@ canvas:focus { } .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; From ab2018f282b87b26b658ed497065cf114bdfe723 Mon Sep 17 00:00:00 2001 From: skuethe Date: Thu, 5 Nov 2020 19:21:25 +0100 Subject: [PATCH 15/21] Add 'css_text' parameter --- R/control-panel.R | 4 ++-- examples/experimental/sliders.R | 1 + javascript/src/custom-controls/panel-control.js | 1 - 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/R/control-panel.R b/R/control-panel.R index 97e3bba..3fad2f9 100644 --- a/R/control-panel.R +++ b/R/control-panel.R @@ -1,6 +1,6 @@ -add_control_panel <- function(map, ..., pos = NULL) { +add_control_panel <- function(map, ..., pos = NULL, css_text = NULL) { invoke_method(map, "addCustomControl", controlName = "PanelControl", - options = list(items = list(...)), pos = pos) + options = list(items = list(...), cssText = css_text), pos = pos) } int_filder_slider <- function() { diff --git a/examples/experimental/sliders.R b/examples/experimental/sliders.R index 191bb32..336761b 100644 --- a/examples/experimental/sliders.R +++ b/examples/experimental/sliders.R @@ -14,5 +14,6 @@ as_mapboxer_viz(mvc, coords = c("lng", "lat"), layer_id = LAYER_ID) %>% slider, slider2, pos = "top-left" + , css_text = htmltools::css(background = "black", color = "white") ) %>% add_popups(LAYER_ID, mapbox_popup("{{injured}}", event = "hover")) diff --git a/javascript/src/custom-controls/panel-control.js b/javascript/src/custom-controls/panel-control.js index 48ddd2d..0700c50 100644 --- a/javascript/src/custom-controls/panel-control.js +++ b/javascript/src/custom-controls/panel-control.js @@ -9,7 +9,6 @@ export default class PanelControl { this._container = document.createElement("div"); this._container.classList.add("mapboxgl-ctrl", "mapboxer-panel-ctrl"); this._container.style.cssText = this._options.cssText || ""; - //this._container.innerHTML = "Control Panel"; console.log("control panel", this._options); this._options.items.forEach(item => { if(item.type === "Slider") this._addSlider(item); From ea20345bbb1a5ebaeb76522853569b8307baa392 Mon Sep 17 00:00:00 2001 From: skuethe Date: Fri, 6 Nov 2020 13:09:08 +0100 Subject: [PATCH 16/21] Refactor --- R/utils.R | 8 ++++++ inst/htmlwidgets/mapboxer.js | 2 +- .../src/custom-controls/panel-control.js | 28 +++++++++---------- 3 files changed, 22 insertions(+), 16 deletions(-) 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/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 762aff9..e3fb879 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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)}),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");const o=document.createElement("label"),r=document.createElement("input");r.type="range",Object.assign(r,e);const i=e=>{o.innerHTML=[t.property,t.operator,e].join(" ")};return r.onchange=e=>{i(e.target.value);const n=this._getFilterExpressions(t.layerId);console.log(n),this._map.setFilter(t.layerId,n)},i(r.value),this._sliders.push({layerId:t.layerId,getExpression:()=>[t.operator,t.property,parseInt(r.value)]}),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["all"].concat(t)}}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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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)}),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");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)}}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)}}},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 { - label.innerHTML = [filter.property, filter.operator, value].join(" "); + + const setLabel = () => { + label.innerHTML = [ filter.property, filter.operator, slider.value ].join(" "); }; - const getExpression = () => [filter.operator, filter.property, parseInt(slider.value)]; + + const getExpression = () => [ + filter.operator, + filter.property, + parseInt(slider.value) + ]; + slider.onchange = (e) => { - //label.innerHTML = e.target.value; - setLabel(e.target.value); - //const expression = [ filter.operator, filter.property, parseInt(e.target.value) ]; - //const expression = getExpression(); + setLabel(); const expression = this._getFilterExpressions(filter.layerId); - console.log(expression); this._map.setFilter(filter.layerId, expression); }; - - //label.innerHTML = slider.value; - setLabel(slider.value); - //this._map.setFilter(filter.layerId, [ filter.operator, filter.property, props.value ]); this._sliders.push({ layerId: filter.layerId, getExpression }); + setLabel(); this._map.setFilter(filter.layerId, this._getFilterExpressions(filter.layerId)); - - // Add container container.append(label, slider); this._container.append(container); return container; @@ -60,7 +58,7 @@ export default class PanelControl { _getFilterExpressions(layerId) { const expressions = this._sliders.filter(slider => slider.layerId === layerId) .map(slider => slider.getExpression()); + console.log(expressions); return [ "all" ].concat(expressions); } } - From b5fe53b14cf9776806e6126787b46cbb238a2d0a Mon Sep 17 00:00:00 2001 From: skuethe Date: Fri, 6 Nov 2020 14:16:51 +0100 Subject: [PATCH 17/21] Add HTML items to panel control --- examples/experimental/sliders.R | 5 ++++- inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/panel-control.js | 11 ++++++++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/examples/experimental/sliders.R b/examples/experimental/sliders.R index 336761b..9688727 100644 --- a/examples/experimental/sliders.R +++ b/examples/experimental/sliders.R @@ -11,9 +11,12 @@ slider2 <- elem_range_slider(min = min(mvc$day), max = max(mvc$day), step = 1) % as_mapboxer_viz(mvc, coords = c("lng", "lat"), layer_id = LAYER_ID) %>% add_control_panel( + "

    Number of persons injured

    ", slider, + "

    2019-09-day

    ", slider2, pos = "top-left" - , css_text = htmltools::css(background = "black", color = "white") + , 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 e3fb879..55b0baa 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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)}),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");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)}}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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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)}),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");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)}}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)}}},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 (item.type === "Slider") this._addSlider(item); + + if (typeof item === "string") this._addHTML(item); }); + return this._container; } @@ -61,4 +64,10 @@ export default class PanelControl { console.log(expressions); return [ "all" ].concat(expressions); } + + _addHTML(html) { + const container = document.createElement("div"); + container.innerHTML = html; + this._container.append(container); + } } From 67d1deb7b3002bf63e1346c35e46bae84f19a66e Mon Sep 17 00:00:00 2001 From: skuethe Date: Fri, 6 Nov 2020 15:46:39 +0100 Subject: [PATCH 18/21] Add layer switcher checkbox to control panel --- R/control-panel.R | 4 ++++ examples/experimental/sliders.R | 3 ++- inst/htmlwidgets/mapboxer.js | 2 +- .../src/custom-controls/panel-control.js | 24 ++++++++++++++++++- javascript/styles/mapboxer.css | 9 +++++-- 5 files changed, 37 insertions(+), 5 deletions(-) diff --git a/R/control-panel.R b/R/control-panel.R index 3fad2f9..bdb10c2 100644 --- a/R/control-panel.R +++ b/R/control-panel.R @@ -3,6 +3,10 @@ add_control_panel <- function(map, ..., pos = NULL, css_text = NULL) { 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() { } diff --git a/examples/experimental/sliders.R b/examples/experimental/sliders.R index 9688727..5e9d32f 100644 --- a/examples/experimental/sliders.R +++ b/examples/experimental/sliders.R @@ -9,12 +9,13 @@ slider <- elem_range_slider(min = 0, max = 6, step = 1, value = 3) %>% 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) %>% +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") diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 55b0baa..ecdbf5a 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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)}),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");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)}}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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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.layerId)}),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(e){const t=document.createElement("div");t.classList.add("mapboxer-checkbox-ctrl","mapboxer-ctrl-item");const n=document.createElement("label");n.innerHTML=e;const o=document.createElement("input");o.type="checkbox",o.checked="visible"===this._map.getLayoutProperty(e,"visibility"),o.onchange=t=>{console.log(o.checked),this._map.setLayoutProperty(e,"visibility",o.checked?"visible":"none")},t.append(n,o),this._container.append(t)}}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)}}},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 { + console.log(input.checked); + this._map.setLayoutProperty(layerId, "visibility", input.checked ? "visible" : "none"); + }; + container.append(label, input); + this._container.append(container); + } } diff --git a/javascript/styles/mapboxer.css b/javascript/styles/mapboxer.css index 9da13a5..e290f17 100644 --- a/javascript/styles/mapboxer.css +++ b/javascript/styles/mapboxer.css @@ -39,13 +39,14 @@ canvas:focus { vertical-align: middle; } -.mapboxer-slider-ctrl { +.mapboxer-slider-ctrl, .mapboxer-checkbox-ctrl { +/*.mapboxer-ctrl-item {*/ display: flex; align-items: center; /*padding: 5px;*/ } -.mapboxer-slider-ctrl label { +.mapboxer-ctrl-item label { width: 40%; /*padding-right: 10px;*/ margin-right: 10px; @@ -53,6 +54,10 @@ canvas:focus { margin-bottom: 3px; } +.mapboxer-ctrl-item input { + width: 150px; +} + /* Legend */ .mapboxer-legend ul { padding: 0; From 40642c4558bd771651eb84d49c61fd2ce49df20a Mon Sep 17 00:00:00 2001 From: skuethe Date: Fri, 6 Nov 2020 19:57:09 +0100 Subject: [PATCH 19/21] Use control panel as layer switcher --- R/control-panel.R | 4 ++-- inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/custom-controls/panel-control.js | 9 +++++++-- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/R/control-panel.R b/R/control-panel.R index bdb10c2..5b00c5f 100644 --- a/R/control-panel.R +++ b/R/control-panel.R @@ -3,8 +3,8 @@ add_control_panel <- function(map, ..., pos = NULL, css_text = NULL) { options = list(items = list(...), cssText = css_text), pos = pos) } -layer_visibility_checkbox <- function(layer_id) { - list(type = "LayerSwitcher", layerId = LAYER_ID) +layer_visibility_checkbox <- function(layer_id, ...) { + list(type = "LayerSwitcher", layerId = layer_id, ...) } int_filder_slider <- function() { diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index ecdbf5a..a38aed0 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 v.escape(n)},g.prototype.rawValue=function(e){return e[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(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.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 y.render(e,n,o,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return c[e]}))},v.Scanner=f,v.Context=m,v.Writer=g,v}()},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.layerId)}),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(e){const t=document.createElement("div");t.classList.add("mapboxer-checkbox-ctrl","mapboxer-ctrl-item");const n=document.createElement("label");n.innerHTML=e;const o=document.createElement("input");o.type="checkbox",o.checked="visible"===this._map.getLayoutProperty(e,"visibility"),o.onchange=t=>{console.log(o.checked),this._map.setLayoutProperty(e,"visibility",o.checked?"visible":"none")},t.append(n,o),this._container.append(t)}}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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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)}}},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 Date: Sun, 8 Nov 2020 14:27:31 +0100 Subject: [PATCH 20/21] Add func to load custom icon from url --- R/images.R | 3 +++ examples/experimental/custom-icon.R | 20 ++++++++++++++++++++ inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/methods.js | 12 +++++++++++- 4 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 R/images.R create mode 100644 examples/experimental/custom-icon.R 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/examples/experimental/custom-icon.R b/examples/experimental/custom-icon.R new file mode 100644 index 0000000..ebc2fdf --- /dev/null +++ b/examples/experimental/custom-icon.R @@ -0,0 +1,20 @@ +devtools::load_all() + +image_url <- "https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png" + +icon_style <- list( + id = 'custom-icon', + type = "symbol", + source = as_mapbox_source(data.frame(lng = 0, lat = 0)), + layout = list( + "icon-image" = "cat", + "icon-size" = 0.25 + ) +) + +mapboxer( + #style = basemaps$Mapbox$outdoors_v11, + element_id = "mapboxer" +) %>% + add_image(image_url, "cat", style = icon_style) %>% + add_layer(icon_style) diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index a38aed0..09d21dc 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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)}}},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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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;console.log("image",t,e),o.loadImage(t,(t,n)=>{if(t)throw t;console.log("image",n),o.addImage(e,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 (error) throw error; + + map.addImage(id, image); + }); +} + function addCustomControl(args) { const map = this; const control = new customControls[args.controlName](args.options); @@ -204,5 +213,6 @@ export default { fitBounds, setStyle, addDrawControl, - addDeckLayer + addDeckLayer, + addImage }; From e29d61c215bafbcfd29dd54e5a28eabf89dd4d46 Mon Sep 17 00:00:00 2001 From: skuethe Date: Thu, 11 Mar 2021 13:56:04 +0100 Subject: [PATCH 21/21] Add style parameter --- examples/experimental/custom-icon.R | 12 +++++++----- inst/htmlwidgets/mapboxer.js | 2 +- javascript/src/methods.js | 3 ++- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/examples/experimental/custom-icon.R b/examples/experimental/custom-icon.R index ebc2fdf..3ddb87e 100644 --- a/examples/experimental/custom-icon.R +++ b/examples/experimental/custom-icon.R @@ -1,14 +1,17 @@ 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(data.frame(lng = 0, lat = 0)), + source = as_mapbox_source(us_states),#as_mapbox_source(data.frame(lng = 0, lat = 0)), layout = list( - "icon-image" = "cat", - "icon-size" = 0.25 + "icon-image" = "cat" + ,"icon-size" = 0.5 ) ) @@ -16,5 +19,4 @@ mapboxer( #style = basemaps$Mapbox$outdoors_v11, element_id = "mapboxer" ) %>% - add_image(image_url, "cat", style = icon_style) %>% - add_layer(icon_style) + add_image(image_url, "cat", style = icon_style) #%>% add_layer(icon_style) diff --git a/inst/htmlwidgets/mapboxer.js b/inst/htmlwidgets/mapboxer.js index 09d21dc..214e7ec 100644 --- a/inst/htmlwidgets/mapboxer.js +++ b/inst/htmlwidgets/mapboxer.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var i=RegExp.prototype.test,s=/\S/;function a(e){return!function(e,t){return i.call(e,t)}(s,e)}var c={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},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;console.log("image",t,e),o.loadImage(t,(t,n)=>{if(t)throw t;console.log("image",n),o.addImage(e,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":">",'"':""","'":"'","/":"/","`":"`","=":"="},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 (error) throw error; map.addImage(id, image); + map.addLayer(style); }); }