Updates

chunk-map.json

@@ -1 +1 @@
-{"app":["/app-237f4195ec9864dd408e.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-3f4dfa87d4084a3e4c7f.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-a3b4b06e0308af340492.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-908281cf9b67e5ca7b49.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-4a4abc38bfb9ba5a9e48.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-9e29b99fc8f8206db960.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-d603a06a773d4390d197.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-888fb219844c7e68de09.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-51372132400daa78d9f4.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-2ce07a29418f308e7b10.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-e6220de156fa850f23dc.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-9236dafaf963ed9cc4e2.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-eaec6a6139ef112997fd.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-c241c1d9fa9f5bd839af.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-8d877fd2287ec352a154.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-13eade124cc872b29882.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-41183a9867c7fd19d137.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38c44c555b46d5f6d4c2.js"],"component---src-home-js":["/component---src-home-js-bce036ff4a52cc63d8bd.js"]}
+{"app":["/app-8de1e9f42913c7370890.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-c5f2cf797f91936c45dd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-30dcbe73f2f848b6de03.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-f86884ab73a1ff19df0f.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-7d55061135d44b841bb7.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-0f75aa2f53287d1e675d.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-2fb526d33a91fd35db56.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-3485a097759b789df18b.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-d13935bd0dfa430e2b66.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-8aec7f17eb0b6c6778ce.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-3f5d65931d86fe2f5906.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3ee46a88cbd243948aa3.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-c33b8dc7804176d58f28.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-b20a4d3c7034b5901630.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-02f8ec90cccd70af698b.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-655d6bb9a253703c6479.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-1da58f114696ef3f2e8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-51d7708d40ff08f564da.js"],"component---src-home-js":["/component---src-home-js-a29533c9f20477918ebf.js"]}

component---examples-clusters-src-app-js-c5f2cf797f91936c45dd.js

@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{YLK4:function(e,t,r){"use strict";r.r(t),r.d(t,"default",(function(){return l})),r.d(t,"renderToDom",(function(){return p}));r("E5k/");var o=r("mXGw"),n=r("xARA"),c=r("+qjn");var a=function(e){var t,r;function n(){return e.apply(this,arguments)||this}return r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,n.prototype.render=function(){return o.createElement("div",{className:"control-panel"},o.createElement("h3",null,"Create and Style Clusters"),o.createElement("p",null,"Use Mapbox GL JS' built-in functions to visualize points as clusters."),o.createElement("div",{className:"source-link"},o.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/5.2-release/examples/clusters",target:"_new"},"View Code ↗")))},n}(o.PureComponent),i={id:"clusters",type:"circle",source:"earthquakes",filter:["has","point_count"],paint:{"circle-color":["step",["get","point_count"],"#51bbd6",100,"#f1f075",750,"#f28cb1"],"circle-radius":["step",["get","point_count"],20,100,30,750,40]}},s={id:"cluster-count",type:"symbol",source:"earthquakes",filter:["has","point_count"],layout:{"text-field":"{point_count_abbreviated}","text-font":["DIN Offc Pro Medium","Arial Unicode MS Bold"],"text-size":12}},u={id:"unclustered-point",type:"circle",source:"earthquakes",filter:["!",["has","point_count"]],paint:{"circle-color":"#11b4da","circle-radius":4,"circle-stroke-width":1,"circle-stroke-color":"#fff"}};var l=function(e){var t,r;function n(){for(var t,r=arguments.length,n=new Array(r),c=0;c<r;c++)n[c]=arguments[c];return(t=e.call.apply(e,[this].concat(n))||this).state={viewport:{latitude:40.67,longitude:-103.59,zoom:3,bearing:0,pitch:0}},t._sourceRef=o.createRef(),t._onViewportChange=function(e){return t.setState({viewport:e})},t._onClick=function(e){var r=e.features[0],o=r.properties.cluster_id;t._sourceRef.current.getSource().getClusterExpansionZoom(o,(function(e,o){e||t._onViewportChange(Object.assign(Object.assign({},t.state.viewport),{},{longitude:r.geometry.coordinates[0],latitude:r.geometry.coordinates[1],zoom:o,transitionDuration:500}))}))},t}return r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,n.prototype.render=function(){var e=this.state.viewport;return o.createElement(c.default,Object.assign({},e,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/dark-v9",onViewportChange:this._onViewportChange,mapboxApiAccessToken:"",interactiveLayerIds:[i.id],onClick:this._onClick}),o.createElement(c.Source,{type:"geojson",data:"https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",cluster:!0,clusterMaxZoom:14,clusterRadius:50,ref:this._sourceRef},o.createElement(c.Layer,i),o.createElement(c.Layer,s),o.createElement(c.Layer,u)),o.createElement(a,{containerComponent:this.props.containerComponent}))},n}(o.Component);function p(e){Object(n.render)(o.createElement(l,null),e)}}}]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{YLK4:function(e,t,r){"use strict";r.r(t),r.d(t,"default",(function(){return l})),r.d(t,"renderToDom",(function(){return p}));r("E5k/");var o=r("mXGw"),n=r("xARA"),c=r("+qjn");var a=function(e){var t,r;function n(){return e.apply(this,arguments)||this}return r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,n.prototype.render=function(){return o.createElement("div",{className:"control-panel"},o.createElement("h3",null,"Create and Style Clusters"),o.createElement("p",null,"Use Mapbox GL JS' built-in functions to visualize points as clusters."),o.createElement("div",{className:"source-link"},o.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/5.2-release/examples/clusters",target:"_new"},"View Code ↗")))},n}(o.PureComponent),i={id:"clusters",type:"circle",source:"earthquakes",filter:["has","point_count"],paint:{"circle-color":["step",["get","point_count"],"#51bbd6",100,"#f1f075",750,"#f28cb1"],"circle-radius":["step",["get","point_count"],20,100,30,750,40]}},s={id:"cluster-count",type:"symbol",source:"earthquakes",filter:["has","point_count"],layout:{"text-field":"{point_count_abbreviated}","text-font":["DIN Offc Pro Medium","Arial Unicode MS Bold"],"text-size":12}},u={id:"unclustered-point",type:"circle",source:"earthquakes",filter:["!",["has","point_count"]],paint:{"circle-color":"#11b4da","circle-radius":4,"circle-stroke-width":1,"circle-stroke-color":"#fff"}};var l=function(e){var t,r;function n(){for(var t,r=arguments.length,n=new Array(r),c=0;c<r;c++)n[c]=arguments[c];return(t=e.call.apply(e,[this].concat(n))||this).state={viewport:{latitude:40.67,longitude:-103.59,zoom:3,bearing:0,pitch:0}},t._sourceRef=o.createRef(),t._onViewportChange=function(e){return t.setState({viewport:e})},t._onClick=function(e){var r=e.features[0],o=r.properties.cluster_id;t._sourceRef.current.getSource().getClusterExpansionZoom(o,(function(e,o){e||t._onViewportChange(Object.assign({},t.state.viewport,{longitude:r.geometry.coordinates[0],latitude:r.geometry.coordinates[1],zoom:o,transitionDuration:500}))}))},t}return r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,n.prototype.render=function(){var e=this.state.viewport;return o.createElement(c.default,Object.assign({},e,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/dark-v9",onViewportChange:this._onViewportChange,mapboxApiAccessToken:"",interactiveLayerIds:[i.id],onClick:this._onClick}),o.createElement(c.Source,{type:"geojson",data:"https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",cluster:!0,clusterMaxZoom:14,clusterRadius:50,ref:this._sourceRef},o.createElement(c.Layer,i),o.createElement(c.Layer,s),o.createElement(c.Layer,u)),o.createElement(a,{containerComponent:this.props.containerComponent}))},n}(o.Component);function p(e){Object(n.render)(o.createElement(l,null),e)}}}]);

component---examples-clusters-src-app-js-d01467258de71693e0fa.js

@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{YLK4:function(e,t,r){"use strict";r.r(t);r("91GP");var o=r("mXGw"),n=r.n(o),a=r("xARA"),c=r("+qjn");var i=function(e){var t,r;function o(){return e.apply(this,arguments)||this}return r=e,(t=o).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,o.prototype.render=function(){return n.a.createElement("div",{className:"control-panel"},n.a.createElement("h3",null,"Create and Style Clusters"),n.a.createElement("p",null,"Use Mapbox GL JS' built-in functions to visualize points as clusters."),n.a.createElement("div",{className:"source-link"},n.a.createElement("a",{href:"https://github.com/uber/react-map-gl/tree/5.2-release/examples/clusters",target:"_new"},"View Code ↗")))},o}(o.PureComponent),s={id:"clusters",type:"circle",source:"earthquakes",filter:["has","point_count"],paint:{"circle-color":["step",["get","point_count"],"#51bbd6",100,"#f1f075",750,"#f28cb1"],"circle-radius":["step",["get","point_count"],20,100,30,750,40]}},u={id:"cluster-count",type:"symbol",source:"earthquakes",filter:["has","point_count"],layout:{"text-field":"{point_count_abbreviated}","text-font":["DIN Offc Pro Medium","Arial Unicode MS Bold"],"text-size":12}},l={id:"unclustered-point",type:"circle",source:"earthquakes",filter:["!",["has","point_count"]],paint:{"circle-color":"#11b4da","circle-radius":4,"circle-stroke-width":1,"circle-stroke-color":"#fff"}};r.d(t,"default",(function(){return p})),r.d(t,"renderToDom",(function(){return d}));var p=function(e){var t,r;function o(){for(var t,r=arguments.length,o=new Array(r),a=0;a<r;a++)o[a]=arguments[a];return(t=e.call.apply(e,[this].concat(o))||this).state={viewport:{latitude:40.67,longitude:-103.59,zoom:3,bearing:0,pitch:0}},t._sourceRef=n.a.createRef(),t._onViewportChange=function(e){return t.setState({viewport:e})},t._onClick=function(e){var r=e.features[0],o=r.properties.cluster_id;t._sourceRef.current.getSource().getClusterExpansionZoom(o,(function(e,o){e||t._onViewportChange(Object.assign({},t.state.viewport,{longitude:r.geometry.coordinates[0],latitude:r.geometry.coordinates[1],zoom:o,transitionDuration:500}))}))},t}return r=e,(t=o).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,o.prototype.render=function(){var e=this.state.viewport;return n.a.createElement(c.default,Object.assign({},e,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/dark-v9",onViewportChange:this._onViewportChange,mapboxApiAccessToken:"",interactiveLayerIds:[s.id],onClick:this._onClick}),n.a.createElement(c.Source,{type:"geojson",data:"https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",cluster:!0,clusterMaxZoom:14,clusterRadius:50,ref:this._sourceRef},n.a.createElement(c.Layer,s),n.a.createElement(c.Layer,u),n.a.createElement(c.Layer,l)),n.a.createElement(i,{containerComponent:this.props.containerComponent}))},o}(o.Component);function d(e){Object(a.render)(n.a.createElement(p,null),e)}}}]);

component---examples-custom-cursor-src-app-js-908281cf9b67e5ca7b49.js

@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{cmq9:function(e,t,r){"use strict";r.r(t),r.d(t,"default",(function(){return u})),r.d(t,"renderToDom",(function(){return p}));r("E5k/");var n=r("mXGw"),a=r("xARA"),o=r("+qjn");r("rzGZ"),r("Dq+y"),r("8npG"),r("Ggvi");var i={parks:/park/,buildings:/building/,roads:/bridge|road|tunnel/,labels:/label|place|poi/};function c(e,t){for(var r in e)if(e[r]&&i[r].test(t))return!0;return!1}var s=function(e){var t,r;function a(){for(var t,r=arguments.length,n=new Array(r),a=0;a<r;a++)n[a]=arguments[a];return(t=e.call.apply(e,[this].concat(n))||this).state={categories:{parks:!0,buildings:!0,roads:!0,labels:!0}},t}r=e,(t=a).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r;var o=a.prototype;return o.componentDidMount=function(){var e=c.bind(null,this.state.categories);this.props.onChange(e)},o._onToggleLayer=function(e,t){var r,n=Object.assign(Object.assign({},this.state.categories),{},((r={})[e]=t.target.checked,r));this.setState({categories:n});var a=c.bind(null,n);this.props.onChange(a)},o._renderLayerControl=function(e){var t=this.state.categories;return n.createElement("div",{key:e,className:"input"},n.createElement("label",null,e),n.createElement("input",{type:"checkbox",checked:t[e],onChange:this._onToggleLayer.bind(this,e)}))},o.render=function(){var e=this;return n.createElement("div",{className:"control-panel"},n.createElement("h3",null,"Custom Cursor"),n.createElement("p",null,"Customize the cursor based on interactivity."),n.createElement("div",{className:"source-link"},n.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/5.2-release/examples/custom-cursor",target:"_new"},"View Code ↗")),n.createElement("hr",null),n.createElement("p",null,"Clickable layers"),Object.keys(i).map((function(t){return e._renderLayerControl(t)})))},a}(n.PureComponent),l=r("fjjH");var u=function(e){var t,r;function a(){for(var t,r=arguments.length,n=new Array(r),a=0;a<r;a++)n[a]=arguments[a];return(t=e.call.apply(e,[this].concat(n))||this).state={mapStyle:"",viewport:{latitude:37.773,longitude:-122.481,zoom:15.5,bearing:0,pitch:0},interactiveLayerIds:[]},t._onViewportChange=function(e){return t.setState({viewport:e})},t._onInteractiveLayersChange=function(e){t.setState({interactiveLayerIds:l.layers.map((function(e){return e.id})).filter(e)})},t._onClick=function(e){var t=e.features&&e.features[0];t&&window.alert("Clicked layer "+t.layer.id)},t._getCursor=function(e){var t=e.isHovering;e.isDragging;return t?"pointer":"default"},t}return r=e,(t=a).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,a.prototype.render=function(){var e=this.state,t=e.viewport,r=e.interactiveLayerIds;return n.createElement(o.default,Object.assign({},t,{width:"100%",height:"100%",mapStyle:l,clickRadius:2,onClick:this._onClick,getCursor:this._getCursor,interactiveLayerIds:r,onViewportChange:this._onViewportChange,mapboxApiAccessToken:""}),n.createElement(s,{containerComponent:this.props.containerComponent,onChange:this._onInteractiveLayersChange}))},a}(n.Component);function p(e){Object(a.render)(n.createElement(u,null),e)}}}]);

component---examples-custom-cursor-src-app-js-f86884ab73a1ff19df0f.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{cmq9:function(e,t,r){"use strict";r.r(t),r.d(t,"default",(function(){return u})),r.d(t,"renderToDom",(function(){return p}));r("E5k/");var n=r("mXGw"),a=r("xARA"),o=r("+qjn");r("rzGZ"),r("Dq+y"),r("8npG"),r("Ggvi");var i={parks:/park/,buildings:/building/,roads:/bridge|road|tunnel/,labels:/label|place|poi/};function c(e,t){for(var r in e)if(e[r]&&i[r].test(t))return!0;return!1}var s=function(e){var t,r;function a(){for(var t,r=arguments.length,n=new Array(r),a=0;a<r;a++)n[a]=arguments[a];return(t=e.call.apply(e,[this].concat(n))||this).state={categories:{parks:!0,buildings:!0,roads:!0,labels:!0}},t}r=e,(t=a).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r;var o=a.prototype;return o.componentDidMount=function(){var e=c.bind(null,this.state.categories);this.props.onChange(e)},o._onToggleLayer=function(e,t){var r,n=Object.assign({},this.state.categories,((r={})[e]=t.target.checked,r));this.setState({categories:n});var a=c.bind(null,n);this.props.onChange(a)},o._renderLayerControl=function(e){var t=this.state.categories;return n.createElement("div",{key:e,className:"input"},n.createElement("label",null,e),n.createElement("input",{type:"checkbox",checked:t[e],onChange:this._onToggleLayer.bind(this,e)}))},o.render=function(){var e=this;return n.createElement("div",{className:"control-panel"},n.createElement("h3",null,"Custom Cursor"),n.createElement("p",null,"Customize the cursor based on interactivity."),n.createElement("div",{className:"source-link"},n.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/5.2-release/examples/custom-cursor",target:"_new"},"View Code ↗")),n.createElement("hr",null),n.createElement("p",null,"Clickable layers"),Object.keys(i).map((function(t){return e._renderLayerControl(t)})))},a}(n.PureComponent),l=r("fjjH");var u=function(e){var t,r;function a(){for(var t,r=arguments.length,n=new Array(r),a=0;a<r;a++)n[a]=arguments[a];return(t=e.call.apply(e,[this].concat(n))||this).state={mapStyle:"",viewport:{latitude:37.773,longitude:-122.481,zoom:15.5,bearing:0,pitch:0},interactiveLayerIds:[]},t._onViewportChange=function(e){return t.setState({viewport:e})},t._onInteractiveLayersChange=function(e){t.setState({interactiveLayerIds:l.layers.map((function(e){return e.id})).filter(e)})},t._onClick=function(e){var t=e.features&&e.features[0];t&&window.alert("Clicked layer "+t.layer.id)},t._getCursor=function(e){var t=e.isHovering;e.isDragging;return t?"pointer":"default"},t}return r=e,(t=a).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,a.prototype.render=function(){var e=this.state,t=e.viewport,r=e.interactiveLayerIds;return n.createElement(o.default,Object.assign({},t,{width:"100%",height:"100%",mapStyle:l,clickRadius:2,onClick:this._onClick,getCursor:this._getCursor,interactiveLayerIds:r,onViewportChange:this._onViewportChange,mapboxApiAccessToken:""}),n.createElement(s,{containerComponent:this.props.containerComponent,onChange:this._onInteractiveLayersChange}))},a}(n.Component);function p(e){Object(a.render)(n.createElement(u,null),e)}}}]);

component---examples-draggable-markers-src-app-js-7d55061135d44b841bb7.js

@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{oByp:function(e,t,r){"use strict";r.r(t),r.d(t,"default",(function(){return g})),r.d(t,"renderToDom",(function(){return d}));r("E5k/");var n=r("mXGw"),o=r("xARA"),a=r("+qjn");var i=["onDragStart","onDrag","onDragEnd"];function c(e){return(Math.round(1e5*e)/1e5).toFixed(5)}var l=function(e){var t,r;function o(){for(var t,r=arguments.length,o=new Array(r),a=0;a<r;a++)o[a]=arguments[a];return(t=e.call.apply(e,[this].concat(o))||this).renderEvent=function(e){var r=t.props.events,o=(void 0===r?{}:r)[e];return n.createElement("div",{key:e},n.createElement("strong",null,e,":")," ",o?o.map(c).join(", "):n.createElement("em",null,"null"))},t}return r=e,(t=o).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,o.prototype.render=function(){return n.createElement("div",{className:"control-panel"},n.createElement("h3",null,"Draggable Marker"),n.createElement("p",null,"Try dragging the marker to another location."),n.createElement("div",null,i.map(this.renderEvent)),n.createElement("div",{className:"source-link"},n.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/5.2-release/examples/draggable-markers",target:"_new"},"View Code ↗")))},o}(n.PureComponent);var p={fill:"#d00",stroke:"none"},s=function(e){var t,r;function o(){return e.apply(this,arguments)||this}return r=e,(t=o).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,o.prototype.render=function(){var e=this.props.size,t=void 0===e?20:e;return n.createElement("svg",{height:t,viewBox:"0 0 24 24",style:p},n.createElement("path",{d:"M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3\n  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9\n  C20.1,15.8,20.2,15.8,20.2,15.7z"}))},o}(n.PureComponent);var u={position:"absolute",top:0,left:0,padding:"10px"},g=function(e){var t,r;function o(t){var r;return(r=e.call(this,t)||this)._updateViewport=function(e){r.setState({viewport:e})},r._onMarkerDragStart=function(e){r._logDragEvent("onDragStart",e)},r._onMarkerDrag=function(e){r._logDragEvent("onDrag",e)},r._onMarkerDragEnd=function(e){r._logDragEvent("onDragEnd",e),r.setState({marker:{longitude:e.lngLat[0],latitude:e.lngLat[1]}})},r.state={viewport:{latitude:37.785164,longitude:-100,zoom:3.5,bearing:0,pitch:0},marker:{latitude:37.785164,longitude:-100},events:{}},r}r=e,(t=o).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r;var i=o.prototype;return i._logDragEvent=function(e,t){var r;this.setState({events:Object.assign(Object.assign({},this.state.events),{},(r={},r[e]=t.lngLat,r))})},i.render=function(){var e=this.state,t=e.viewport,r=e.marker;return n.createElement(a.default,Object.assign({},t,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/dark-v9",onViewportChange:this._updateViewport,mapboxApiAccessToken:""}),n.createElement(a.Marker,{longitude:r.longitude,latitude:r.latitude,offsetTop:-20,offsetLeft:-10,draggable:!0,onDragStart:this._onMarkerDragStart,onDrag:this._onMarkerDrag,onDragEnd:this._onMarkerDragEnd},n.createElement(s,{size:20})),n.createElement("div",{className:"nav",style:u},n.createElement(a.NavigationControl,{onViewportChange:this._updateViewport})),n.createElement(l,{containerComponent:this.props.containerComponent,events:this.state.events}))},o}(n.Component);function d(e){Object(o.render)(n.createElement(g,null),e)}}}]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{oByp:function(e,t,r){"use strict";r.r(t),r.d(t,"default",(function(){return g})),r.d(t,"renderToDom",(function(){return d}));r("E5k/");var n=r("mXGw"),o=r("xARA"),a=r("+qjn");var i=["onDragStart","onDrag","onDragEnd"];function c(e){return(Math.round(1e5*e)/1e5).toFixed(5)}var l=function(e){var t,r;function o(){for(var t,r=arguments.length,o=new Array(r),a=0;a<r;a++)o[a]=arguments[a];return(t=e.call.apply(e,[this].concat(o))||this).renderEvent=function(e){var r=t.props.events,o=(void 0===r?{}:r)[e];return n.createElement("div",{key:e},n.createElement("strong",null,e,":")," ",o?o.map(c).join(", "):n.createElement("em",null,"null"))},t}return r=e,(t=o).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,o.prototype.render=function(){return n.createElement("div",{className:"control-panel"},n.createElement("h3",null,"Draggable Marker"),n.createElement("p",null,"Try dragging the marker to another location."),n.createElement("div",null,i.map(this.renderEvent)),n.createElement("div",{className:"source-link"},n.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/5.2-release/examples/draggable-markers",target:"_new"},"View Code ↗")))},o}(n.PureComponent);var p={fill:"#d00",stroke:"none"},s=function(e){var t,r;function o(){return e.apply(this,arguments)||this}return r=e,(t=o).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,o.prototype.render=function(){var e=this.props.size,t=void 0===e?20:e;return n.createElement("svg",{height:t,viewBox:"0 0 24 24",style:p},n.createElement("path",{d:"M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3\n  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9\n  C20.1,15.8,20.2,15.8,20.2,15.7z"}))},o}(n.PureComponent);var u={position:"absolute",top:0,left:0,padding:"10px"},g=function(e){var t,r;function o(t){var r;return(r=e.call(this,t)||this)._updateViewport=function(e){r.setState({viewport:e})},r._onMarkerDragStart=function(e){r._logDragEvent("onDragStart",e)},r._onMarkerDrag=function(e){r._logDragEvent("onDrag",e)},r._onMarkerDragEnd=function(e){r._logDragEvent("onDragEnd",e),r.setState({marker:{longitude:e.lngLat[0],latitude:e.lngLat[1]}})},r.state={viewport:{latitude:37.785164,longitude:-100,zoom:3.5,bearing:0,pitch:0},marker:{latitude:37.785164,longitude:-100},events:{}},r}r=e,(t=o).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r;var i=o.prototype;return i._logDragEvent=function(e,t){var r;this.setState({events:Object.assign({},this.state.events,(r={},r[e]=t.lngLat,r))})},i.render=function(){var e=this.state,t=e.viewport,r=e.marker;return n.createElement(a.default,Object.assign({},t,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/dark-v9",onViewportChange:this._updateViewport,mapboxApiAccessToken:""}),n.createElement(a.Marker,{longitude:r.longitude,latitude:r.latitude,offsetTop:-20,offsetLeft:-10,draggable:!0,onDragStart:this._onMarkerDragStart,onDrag:this._onMarkerDrag,onDragEnd:this._onMarkerDragEnd},n.createElement(s,{size:20})),n.createElement("div",{className:"nav",style:u},n.createElement(a.NavigationControl,{onViewportChange:this._updateViewport})),n.createElement(l,{containerComponent:this.props.containerComponent,events:this.state.events}))},o}(n.Component);function d(e){Object(o.render)(n.createElement(g,null),e)}}}]);

component---examples-draggable-markers-src-app-js-ef2b15826e6c37659257.js

@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{oByp:function(e,t,r){"use strict";r.r(t);r("91GP");var n=r("mXGw"),a=r.n(n),o=r("xARA"),i=r("+qjn");var c=["onDragStart","onDrag","onDragEnd"];function l(e){return(Math.round(1e5*e)/1e5).toFixed(5)}var p=function(e){var t,r;function n(){for(var t,r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return(t=e.call.apply(e,[this].concat(n))||this).renderEvent=function(e){var r=t.props.events,n=(void 0===r?{}:r)[e];return a.a.createElement("div",{key:e},a.a.createElement("strong",null,e,":")," ",n?n.map(l).join(", "):a.a.createElement("em",null,"null"))},t}return r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,n.prototype.render=function(){return a.a.createElement("div",{className:"control-panel"},a.a.createElement("h3",null,"Draggable Marker"),a.a.createElement("p",null,"Try dragging the marker to another location."),a.a.createElement("div",null,c.map(this.renderEvent)),a.a.createElement("div",{className:"source-link"},a.a.createElement("a",{href:"https://github.com/uber/react-map-gl/tree/5.2-release/examples/draggable-markers",target:"_new"},"View Code ↗")))},n}(n.PureComponent);var s={fill:"#d00",stroke:"none"},u=function(e){var t,r;function n(){return e.apply(this,arguments)||this}return r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,n.prototype.render=function(){var e=this.props.size,t=void 0===e?20:e;return a.a.createElement("svg",{height:t,viewBox:"0 0 24 24",style:s},a.a.createElement("path",{d:"M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3\n  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9\n  C20.1,15.8,20.2,15.8,20.2,15.7z"}))},n}(n.PureComponent);r.d(t,"default",(function(){return d})),r.d(t,"renderToDom",(function(){return m}));var g={position:"absolute",top:0,left:0,padding:"10px"},d=function(e){var t,r;function n(t){var r;return(r=e.call(this,t)||this)._updateViewport=function(e){r.setState({viewport:e})},r._onMarkerDragStart=function(e){r._logDragEvent("onDragStart",e)},r._onMarkerDrag=function(e){r._logDragEvent("onDrag",e)},r._onMarkerDragEnd=function(e){r._logDragEvent("onDragEnd",e),r.setState({marker:{longitude:e.lngLat[0],latitude:e.lngLat[1]}})},r.state={viewport:{latitude:37.785164,longitude:-100,zoom:3.5,bearing:0,pitch:0},marker:{latitude:37.785164,longitude:-100},events:{}},r}r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r;var o=n.prototype;return o._logDragEvent=function(e,t){var r;this.setState({events:Object.assign({},this.state.events,(r={},r[e]=t.lngLat,r))})},o.render=function(){var e=this.state,t=e.viewport,r=e.marker;return a.a.createElement(i.default,Object.assign({},t,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/dark-v9",onViewportChange:this._updateViewport,mapboxApiAccessToken:""}),a.a.createElement(i.Marker,{longitude:r.longitude,latitude:r.latitude,offsetTop:-20,offsetLeft:-10,draggable:!0,onDragStart:this._onMarkerDragStart,onDrag:this._onMarkerDrag,onDragEnd:this._onMarkerDragEnd},a.a.createElement(u,{size:20})),a.a.createElement("div",{className:"nav",style:g},a.a.createElement(i.NavigationControl,{onViewportChange:this._updateViewport})),a.a.createElement(p,{containerComponent:this.props.containerComponent,events:this.state.events}))},n}(n.Component);function m(e){Object(o.render)(a.a.createElement(d,null),e)}}}]);

component---examples-filter-src-app-js-6c8edb41435526128e70.js

@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{NmCX:function(e,t,r){"use strict";r.r(t);r("91GP");var n=r("mXGw"),o=r.n(n),a=r("xARA"),i=r("+qjn");var l=function(e){var t,r;function n(){return e.apply(this,arguments)||this}return r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r,n.prototype.render=function(){return o.a.createElement("div",{className:"control-panel"},o.a.createElement("h3",null,"Highlight Features Containing Similar Data"),o.a.createElement("p",null,"Hover over counties to highlight counties that share the same name."),o.a.createElement("div",{className:"source-link"},o.a.createElement("a",{href:"https://github.com/uber/react-map-gl/tree/5.2-release/examples/filter",target:"_new"},"View Code ↗")))},n}(n.PureComponent),c={id:"counties",type:"fill","source-layer":"original",paint:{"fill-outline-color":"rgba(0,0,0,0.1)","fill-color":"rgba(0,0,0,0.1)"}},p={id:"counties-highlighted",type:"fill",source:"counties","source-layer":"original",paint:{"fill-outline-color":"#484896","fill-color":"#6e599f","fill-opacity":.75}};r.d(t,"default",(function(){return u})),r.d(t,"renderToDom",(function(){return s}));var u=function(e){var t,r;function n(){for(var t,r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return(t=e.call.apply(e,[this].concat(n))||this).state={filter:["in","COUNTY",""],viewport:{latitude:38.88,longitude:-98,zoom:3,minZoom:2,bearing:0,pitch:0},hoverInfo:null},t._onViewportChange=function(e){return t.setState({viewport:e})},t._onHover=function(e){var r="",n=null,o=e.features[0];o&&(n={lngLat:e.lngLat,county:o.properties},r=o.properties.COUNTY),t.setState({filter:["in","COUNTY",r],hoverInfo:n})},t}r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r;var a=n.prototype;return a._renderPopup=function(){var e=this.state.hoverInfo;return e?o.a.createElement(i.Popup,{longitude:e.lngLat[0],latitude:e.lngLat[1],closeButton:!1},o.a.createElement("div",{className:"county-info"},e.county.COUNTY)):null},a.render=function(){var e=this.state,t=e.viewport,r=e.filter;return o.a.createElement(i.default,Object.assign({},t,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/light-v9",mapboxApiAccessToken:"",onViewportChange:this._onViewportChange,onHover:this._onHover,interactiveLayerIds:["counties"]}),o.a.createElement(i.Source,{type:"vector",url:"mapbox://mapbox.82pkq93d"},o.a.createElement(i.Layer,Object.assign({beforeId:"waterway-label"},c)),o.a.createElement(i.Layer,Object.assign({beforeId:"waterway-label"},p,{filter:r}))),this._renderPopup(),o.a.createElement(l,{containerComponent:this.props.containerComponent}))},n}(n.Component);function s(e){Object(a.render)(o.a.createElement(u,null),e)}}}]);

component---examples-geojson-animation-src-app-js-4124fa82dc370367b642.js

@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{PHfw:function(t,e,n){"use strict";n.r(e);n("91GP");var o=n("mXGw"),a=n.n(o),r=n("xARA"),i=n("+qjn");var c=function(t){var e,n;function o(){return t.apply(this,arguments)||this}return n=t,(e=o).prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n,o.prototype.render=function(){return a.a.createElement("div",{className:"control-panel"},a.a.createElement("h3",null,"Animated GeoJSON"),a.a.createElement("p",null,"Render animation by updating GeoJSON data source."),a.a.createElement("div",{className:"source-link"},a.a.createElement("a",{href:"https://github.com/uber/react-map-gl/tree/5.2-release/examples/geojson-animation",target:"_new"},"View Code ↗")))},o}(o.PureComponent);function p(t){var e=t.center,n=t.angle,o=t.radius;return{type:"Point",coordinates:[e[0]+Math.cos(n)*o,e[1]+Math.sin(n)*o]}}n.d(e,"default",(function(){return l})),n.d(e,"renderToDom",(function(){return s}));var u={type:"circle",paint:{"circle-radius":10,"circle-color":"#007cbf"}},l=function(t){var e,n;function o(){for(var e,n=arguments.length,o=new Array(n),a=0;a<n;a++)o[a]=arguments[a];return(e=t.call.apply(t,[this].concat(o))||this).state={pointData:null,viewport:{latitude:0,longitude:-100,zoom:3,bearing:0,pitch:0}},e.animation=null,e._animatePoint=function(){e.setState({pointData:p({center:[-100,0],angle:Date.now()/1e3,radius:20})}),e.animation=window.requestAnimationFrame(e._animatePoint)},e._onViewportChange=function(t){return e.setState({viewport:t})},e}n=t,(e=o).prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n;var r=o.prototype;return r.componentDidMount=function(){this._animatePoint()},r.componentWillUnmount=function(){window.cancelAnimationFrame(this.animation)},r.render=function(){var t=this.state,e=t.viewport,n=t.pointData;return a.a.createElement(i.default,Object.assign({},e,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/light-v9",onViewportChange:this._onViewportChange,mapboxApiAccessToken:""}),n&&a.a.createElement(i.Source,{type:"geojson",data:n},a.a.createElement(i.Layer,u)),a.a.createElement(c,{containerComponent:this.props.containerComponent}))},o}(o.Component);function s(t){Object(r.render)(a.a.createElement(l,null),t)}}}]);

component---examples-locate-user-src-app-js-7d9fccdd44147c143435.js

@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{NqXV:function(t,e,o){"use strict";o.r(e),o.d(e,"default",(function(){return c})),o.d(e,"renderToDom",(function(){return s}));o("91GP");var n=o("mXGw"),r=o.n(n),a=o("xARA"),i=o("+qjn");var p={position:"absolute",top:0,left:0,margin:10},c=function(t){var e,o;function n(){for(var e,o=arguments.length,n=new Array(o),r=0;r<o;r++)n[r]=arguments[r];return(e=t.call.apply(t,[this].concat(n))||this).state={viewport:{latitude:37.8,longitude:96,zoom:3,bearing:0,pitch:0}},e._onViewportChange=function(t){return e.setState({viewport:t})},e}return o=t,(e=n).prototype=Object.create(o.prototype),e.prototype.constructor=e,e.__proto__=o,n.prototype.render=function(){var t=this.state.viewport;return r.a.createElement(i.default,Object.assign({},t,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/dark-v9",onViewportChange:this._onViewportChange,mapboxApiAccessToken:""}),r.a.createElement(i.GeolocateControl,{style:p,positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0}))},n}(n.Component);function s(t){Object(a.render)(r.a.createElement(c,null),t)}}}]);

component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-ebadec786762b14117ce.js

@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{"2flm":function(n,t,e){"use strict";e.r(t),e.d(t,"default",(function(){return c}));var i=e("q1tI"),o=e.n(i),r=e("Wbzz"),a=e("NKOs");var c=function(n){var t,e;function i(){return n.apply(this,arguments)||this}return e=n,(t=i).prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e,i.prototype.render=function(){var n=this.props.pageContext.examples;return o.a.createElement(a.c,null,n.map((function(n){return o.a.createElement(a.a,{key:n.title,to:"/"+n.path},n.imageSrc?o.a.createElement("img",{width:"100%",src:Object(r.c)(n.imageSrc),alt:n.title}):null,o.a.createElement(a.b,null,n.title))})))},i}(i.Component)},NKOs:function(n,t,e){"use strict";e.d(t,"c",(function(){return r})),e.d(t,"a",(function(){return a})),e.d(t,"b",(function(){return c})),e.d(t,"d",(function(){return u})),e.d(t,"f",(function(){return l})),e.d(t,"e",(function(){return m})),e.d(t,"g",(function(){return h}));var i=e("vOnD"),o=e("Wbzz"),r=(i.c.main.withConfig({displayName:"example__MainExample",componentId:"h9izwc-0"})(["width:100%;height:100%;position:relative;"]),i.c.main.withConfig({displayName:"example__MainExamples",componentId:"h9izwc-1"})(["display:flex;flex-wrap:wrap;@media screen and (max-width:","){padding-top:96px;}"],(function(n){return n.theme.breakpoints.medium}))),a=Object(i.c)(o.a).withConfig({displayName:"example__ExampleCard",componentId:"h9izwc-2"})(["border:",";cursor:pointer;text-decoration:none;width:200px;outline:none;margin:",";padding:"," "," "," ",";transition-property:background,border-color,box-shadow;transition-duration:",";transition-timing-function:",";&:hover{box-shadow:",";background:",";border-color:transparent;}"],(function(n){return n.theme.borders.border300}),(function(n){return n.theme.sizing.scale400}),(function(n){return n.theme.sizing.scale700}),(function(n){return n.theme.sizing.scale600}),(function(n){return n.theme.sizing.scale700}),(function(n){return n.theme.sizing.scale600}),(function(n){return n.theme.animation.timing400}),(function(n){return n.theme.animation.easeInOutCurve}),(function(n){return n.theme.lighting.shadow600}),(function(n){return n.theme.colors.mono200})),c=i.c.div.withConfig({displayName:"example__ExampleTitle",componentId:"h9izwc-3"})(["color:",";font:",";margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:150px;"],(function(n){return n.theme.colors.mono1000}),(function(n){return n.theme.typography.font300})),u=i.c.div.withConfig({displayName:"example__PanelContainer",componentId:"h9izwc-4"})(["font:",";position:absolute;top:0;right:0;width:344px;background:",";box-shadow:",";margin:",";padding:"," ",";max-height:96%;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;outline:none;z-index:1;"],(function(n){return n.theme.typography.font300}),(function(n){return n.theme.colors.white}),(function(n){return n.theme.lighting.shadow400}),(function(n){return n.theme.sizing.scale800}),(function(n){return n.theme.sizing.scale400}),(function(n){return n.theme.sizing.scale800})),l=i.c.h3.withConfig({displayName:"example__PanelTitle",componentId:"h9izwc-5"})(["font:",";margin:"," 0;"],(function(n){return n.theme.typography.font450}),(function(n){return n.theme.sizing.scale300})),m=i.c.div.withConfig({displayName:"example__PanelContent",componentId:"h9izwc-6"})(["div >*{vertical-align:middle;white-space:nowrap;}div >label{display:inline-block;width:40%;margin-right:10%;color:",";margin-top:2px;margin-bottom:2px;}div >input,div >a,div >button,div >select{background:",";font:",";line-height:",";text-transform:none;text-overflow:ellipsis;overflow:hidden;display:inline-block;padding:0 ",";width:50%;height:",";text-align:left;}div >button{color:initial;}div >button:disabled{color:",";cursor:default;background:",";}div >input{border:",";&:disabled{background:",';}&[type="checkbox"]{height:auto;}}p{margin-bottom:',";white-space:initial;}"],(function(n){return n.theme.colors.momo800}),(function(n){return n.theme.colors.white}),(function(n){return n.theme.typography.font100}),(function(n){return n.theme.sizing.scale700}),(function(n){return n.theme.sizing.scale100}),(function(n){return n.theme.sizing.scale700}),(function(n){return n.theme.colors.mono300}),(function(n){return n.theme.colors.mono300}),(function(n){return n.theme.borders.border300}),(function(n){return n.theme.colors.white}),(function(n){return n.theme.sizing.scale600})),h=i.c.a.withConfig({displayName:"example__SourceLink",componentId:"h9izwc-7"})(["display:block;text-align:right;margin-top:",";font:",";color:",";"],(function(n){return n.theme.sizing.scale300}),(function(n){return n.theme.typography.font250}),(function(n){return n.theme.colors.mono800}))}}]);

docs/api-reference/web-mercator-viewport.md

@@ -1,118 +0,0 @@
-# WebMercatorViewport
-
-The `WebMercatorViewport` class takes map camera states (`latitude`, `longitude`, `zoom`, `pitch`, `bearing` etc.),
-and performs projections between world and screen coordinates.
-
-
-## Constructor
-
-| Parameter     |  Type    | Default | Description                                                |
-| ------------- | -------- | ------- | ---------------------------------------------------------- |
-| `width`       | `Number` | `1`       | Width of viewport |
-| `height`      | `Number` | `1`       | Height of viewport |
-| `latitude`    | `Number` | `0`      | Latitude of viewport center  |
-| `longitude`   | `Number` | `0`    | Longitude of viewport center  |
-| `zoom`        | `Number` | `11`      | Map zoom (scale is calculated as `2^zoom`) |
-| `pitch`       | `Number` | `0`       | The pitch (tilt) of the map from the screen, in degrees (0 is straight down) |
-| `bearing`     | `Number` | `0`       | The bearing (rotation) of the map from north, in degrees counter-clockwise (0 means north is up) |
-| `altitude`    | `Number` | `1.5`     | Altitude of camera in screen units  |
-
-
-Remarks:
- - Altitude has a default value that matches assumptions in mapbox-gl
- - `width` and `height` are forced to 1 if supplied as 0, to avoid
-   division by zero. This is intended to reduce the burden of apps to
-   to check values before instantiating a `Viewport`.
- -  When using Mercator projection, per cartographic tradition, longitudes and
-   latitudes are specified as degrees.
-
-
-## Methods
-
-##### `project(lngLatZ, opts)`
-
-Projects latitude and longitude to pixel coordinates on screen.
-
-| Parameter      | Type      | Default  | Description                     |
-| -------------- | --------- | -------- | ------------------------------- |
-| `lngLatZ`      | `Array`   | (required) | map coordinates, `[lng, lat]` or `[lng, lat, Z]` where `Z` is elevation in meters |
-| `opts`         | `Object`  | `{}`     | named options                   |
-| `opts.topLeft` | `Boolean` | `true`   | If `true` projected coords are top left, otherwise bottom left |
-
-Returns: `[x, y]` or `[x, y, z]` in pixels coordinates. `z` is pixel depth.
-- If input is `[lng, lat]`: returns `[x, y]`.
-- If input is `[lng, lat, Z]`: returns `[x, y, z]`.
-
-Remarks:
-* By default, returns top-left coordinates suitable for canvas/SVG type
-  rendering.
-
-
-##### `unproject(xyz, opts)`
-
-Unproject pixel coordinates on screen to longitude and latitude on map.
-
-| Parameter      | Type      | Default  | Description                     |
-| -------------- | --------- | -------- | ------------------------------- |
-| `xyz`          | `Array`   | (required) | pixel coordinates, `[x, y]` or `[x, y, z]` where `z` is pixel depth   |
-| `opts`         | `Object`  | `{}`     | named options                   |
-| `opts.topLeft` | `Boolean` | `true`   | If `true` projected coords are top left, otherwise bottom left |
-| `opts.targetZ` | `Number`  | `0`      | If pixel depth `z` is not specified in `xyz`, use `opts.targetZ` as the desired elevation |
-
-Returns: `[lng, lat]` or `[longitude, lat, Z]` in map coordinates. `Z` is elevation in meters.
-- If input is `[x, y]` without specifying `opts.targetZ`: returns `[lng, lat]`.
-- If input is `[x, y]` with `opts.targetZ`: returns `[lng, lat, targetZ]`.
-- If input is `[x, y, z]`: returns `[lng, lat, Z]`.
-
-
-##### `projectFlat(lngLat, scale)`
-
-Project longitude and latitude onto Web Mercator coordinates.
-
-| Parameter      | Type      | Default  | Description                     |
-| -------------- | --------- | -------- | ------------------------------- |
-| `lngLat`          | `Array`   | (required) | map coordinates, `[lng, lat]`   |
-| `scale`         | `Number`  | `this.scale`     | Web Mercator scale  |
-
-Returns:
-
- - `[x, y]`, representing Web Mercator coordinates.
-
-##### `unprojectFlat(xy, scale)`
-
-Unprojects a Web Mercator coordinate to longitude and latitude.
-| Parameter      | Type      | Default  | Description                     |
-| -------------- | --------- | -------- | ------------------------------- |
-| `xy`          | `Array`   | (required) | Web Mercator coordinates, `[x, y]`   |
-| `scale`         | `Number`  | `this.scale`     | Web Mercator scale  |
-
-Returns:
-
- - `[longitude, latitude]`
-
-
-##### `fitBounds(bounds, options)`
-
-Get a new flat viewport that fits around the given bounding box.
-
-* `bounds` ([[Number,Number],[Number,Number]]) - an array of two opposite corners of
-the bounding box. Each corner is specified in `[lon, lat]`.
-* `options` (Object)
-  + `options.padding` (Number|{top:Number, bottom: Number, left: Number, right: Number}, optional) - The amount of
-  padding in pixels to add to the given bounds from the edge of the viewport. If padding is set as object, all parameters are
-  required.
-  + `options.offset` ([Number,Number], optional) - The center of the given bounds relative to the viewport's center, `[x, y]` measured in pixels.
-
-
-##### `getMapCenterByLngLatPosition(opts)`
-
-Returns the map center that place a given [lng, lat] coordinate at screen point [x, y].
-
-Parameters:
-- `opts` (Object) - options
-- `opts.lngLat` (Array, required) - [lng,lat] coordinates of a location on the sphere.
-- `opts.pos` (Array, required) - [x,y] coordinates of a pixel on screen.
-
-Returns:
-- `[longitude, latitude]` new map center
-