diff --git a/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js b/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js
similarity index 75%
rename from 73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js
rename to 73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js
index e6d34aec..39a71fc2 100644
--- a/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js
+++ b/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js
@@ -1,2 +1,2 @@
-/*! For license information please see 73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{ExcP:function(t,e,n){"use strict";(function(t){n.d(e,"b",(function(){return r})),n.d(e,"c",(function(){return i})),n.d(e,"a",(function(){return o}));var r="undefined"!=typeof navigator&&navigator.userAgent?navigator.userAgent.toLowerCase():"",i="undefined"!=typeof window?window:t,o=(void 0!==t||window,"undefined"!=typeof document&&document,!1);try{var a={get passive(){return o=!0,!0}};i.addEventListener("test",a,a),i.removeEventListener("test",a,a)}catch(s){}}).call(this,n("yLpj"))},ODXe:function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));var r=n("BsWD");function i(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t)){var n=[],r=!0,i=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!e||n.length!==e);r=!0);}catch(c){i=!0,o=c}finally{try{r||null==s.return||s.return()}finally{if(i)throw o}}return n}}(t,e)||Object(r.a)(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},QFcT:function(t,e,n){var r=n("I+eb"),i=Math.hypot,o=Math.abs,a=Math.sqrt;r({target:"Math",stat:!0,forced:!!i&&i(1/0,NaN)!==1/0},{hypot:function(t,e){for(var n,r,i=0,s=0,c=arguments.length,u=0;s<c;)u<(n=o(arguments[s++]))?(i=i*(r=u/n)*r+1,u=n):i+=n>0?(r=n/u)*r:n;return u===1/0?1/0:u*a(i)}})},QFtD:function(t,e,n){var r;!function(i,o,a,s){"use strict";var c,u=["","webkit","Moz","MS","ms","o"],l=o.createElement("div"),h=Math.round,p=Math.abs,f=Date.now;function d(t,e,n){return setTimeout(w(t,n),e)}function v(t,e,n){return!!Array.isArray(t)&&(g(t,n[e],n),!0)}function g(t,e,n){var r;if(t)if(t.forEach)t.forEach(e,n);else if(void 0!==t.length)for(r=0;r<t.length;)e.call(n,t[r],r,t),r++;else for(r in t)t.hasOwnProperty(r)&&e.call(n,t[r],r,t)}function m(t,e,n){var r="DEPRECATED METHOD: "+e+"\n"+n+" AT \n";return function(){var e=new Error("get-stack-trace"),n=e&&e.stack?e.stack.replace(/^[^\(]+?[\n$]/gm,"").replace(/^\s+at\s+/gm,"").replace(/^Object.<anonymous>\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",o=i.console&&(i.console.warn||i.console.log);return o&&o.call(i.console,r,n),t.apply(this,arguments)}}c="function"!=typeof Object.assign?function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),n=1;n<arguments.length;n++){var r=arguments[n];if(null!=r)for(var i in r)r.hasOwnProperty(i)&&(e[i]=r[i])}return e}:Object.assign;var b=m((function(t,e,n){for(var r=Object.keys(e),i=0;i<r.length;)(!n||n&&void 0===t[r[i]])&&(t[r[i]]=e[r[i]]),i++;return t}),"extend","Use `assign`."),y=m((function(t,e){return b(t,e,!0)}),"merge","Use `assign`.");function O(t,e,n){var r,i=e.prototype;(r=t.prototype=Object.create(i)).constructor=t,r._super=i,n&&c(r,n)}function w(t,e){return function(){return t.apply(e,arguments)}}function j(t,e){return"function"==typeof t?t.apply(e&&e[0]||void 0,e):t}function E(t,e){return void 0===t?e:t}function _(t,e,n){g(x(e),(function(e){t.addEventListener(e,n,!1)}))}function P(t,e,n){g(x(e),(function(e){t.removeEventListener(e,n,!1)}))}function M(t,e){for(;t;){if(t==e)return!0;t=t.parentNode}return!1}function S(t,e){return t.indexOf(e)>-1}function x(t){return t.trim().split(/\s+/g)}function T(t,e,n){if(t.indexOf&&!n)return t.indexOf(e);for(var r=0;r<t.length;){if(n&&t[r][n]==e||!n&&t[r]===e)return r;r++}return-1}function k(t){return Array.prototype.slice.call(t,0)}function D(t,e,n){for(var r=[],i=[],o=0;o<t.length;){var a=e?t[o][e]:t[o];T(i,a)<0&&r.push(t[o]),i[o]=a,o++}return n&&(r=e?r.sort((function(t,n){return t[e]>n[e]})):r.sort()),r}function C(t,e){for(var n,r,i=e[0].toUpperCase()+e.slice(1),o=0;o<u.length;){if((r=(n=u[o])?n+i:e)in t)return r;o++}}var I=1;function R(t){var e=t.ownerDocument||t;return e.defaultView||e.parentWindow||i}var A="ontouchstart"in i,L=void 0!==C(i,"PointerEvent"),z=A&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent),N=["x","y"],F=["clientX","clientY"];function Z(t,e){var n=this;this.manager=t,this.callback=e,this.element=t.element,this.target=t.options.inputTarget,this.domHandler=function(e){j(t.options.enable,[t])&&n.handler(e)},this.init()}function V(t,e,n){var r=n.pointers.length,i=n.changedPointers.length,o=1&e&&r-i==0,a=12&e&&r-i==0;n.isFirst=!!o,n.isFinal=!!a,o&&(t.session={}),n.eventType=e,function(t,e){var n=t.session,r=e.pointers,i=r.length;n.firstInput||(n.firstInput=B(e));i>1&&!n.firstMultiple?n.firstMultiple=B(e):1===i&&(n.firstMultiple=!1);var o=n.firstInput,a=n.firstMultiple,s=a?a.center:o.center,c=e.center=U(r);e.timeStamp=f(),e.deltaTime=e.timeStamp-o.timeStamp,e.angle=X(s,c),e.distance=H(s,c),function(t,e){var n=e.center,r=t.offsetDelta||{},i=t.prevDelta||{},o=t.prevInput||{};1!==e.eventType&&4!==o.eventType||(i=t.prevDelta={x:o.deltaX||0,y:o.deltaY||0},r=t.offsetDelta={x:n.x,y:n.y});e.deltaX=i.x+(n.x-r.x),e.deltaY=i.y+(n.y-r.y)}(n,e),e.offsetDirection=W(e.deltaX,e.deltaY);var u=q(e.deltaTime,e.deltaX,e.deltaY);e.overallVelocityX=u.x,e.overallVelocityY=u.y,e.overallVelocity=p(u.x)>p(u.y)?u.x:u.y,e.scale=a?(l=a.pointers,h=r,H(h[0],h[1],F)/H(l[0],l[1],F)):1,e.rotation=a?function(t,e){return X(e[1],e[0],F)+X(t[1],t[0],F)}(a.pointers,r):0,e.maxPointers=n.prevInput?e.pointers.length>n.prevInput.maxPointers?e.pointers.length:n.prevInput.maxPointers:e.pointers.length,function(t,e){var n,r,i,o,a=t.lastInterval||e,s=e.timeStamp-a.timeStamp;if(8!=e.eventType&&(s>25||void 0===a.velocity)){var c=e.deltaX-a.deltaX,u=e.deltaY-a.deltaY,l=q(s,c,u);r=l.x,i=l.y,n=p(l.x)>p(l.y)?l.x:l.y,o=W(c,u),t.lastInterval=e}else n=a.velocity,r=a.velocityX,i=a.velocityY,o=a.direction;e.velocity=n,e.velocityX=r,e.velocityY=i,e.direction=o}(n,e);var l,h;var d=t.element;M(e.srcEvent.target,d)&&(d=e.srcEvent.target);e.target=d}(t,n),t.emit("hammer.input",n),t.recognize(n),t.session.prevInput=n}function B(t){for(var e=[],n=0;n<t.pointers.length;)e[n]={clientX:h(t.pointers[n].clientX),clientY:h(t.pointers[n].clientY)},n++;return{timeStamp:f(),pointers:e,center:U(e),deltaX:t.deltaX,deltaY:t.deltaY}}function U(t){var e=t.length;if(1===e)return{x:h(t[0].clientX),y:h(t[0].clientY)};for(var n=0,r=0,i=0;i<e;)n+=t[i].clientX,r+=t[i].clientY,i++;return{x:h(n/e),y:h(r/e)}}function q(t,e,n){return{x:e/t||0,y:n/t||0}}function W(t,e){return t===e?1:p(t)>=p(e)?t<0?2:4:e<0?8:16}function H(t,e,n){n||(n=N);var r=e[n[0]]-t[n[0]],i=e[n[1]]-t[n[1]];return Math.sqrt(r*r+i*i)}function X(t,e,n){n||(n=N);var r=e[n[0]]-t[n[0]],i=e[n[1]]-t[n[1]];return 180*Math.atan2(i,r)/Math.PI}Z.prototype={handler:function(){},init:function(){this.evEl&&_(this.element,this.evEl,this.domHandler),this.evTarget&&_(this.target,this.evTarget,this.domHandler),this.evWin&&_(R(this.element),this.evWin,this.domHandler)},destroy:function(){this.evEl&&P(this.element,this.evEl,this.domHandler),this.evTarget&&P(this.target,this.evTarget,this.domHandler),this.evWin&&P(R(this.element),this.evWin,this.domHandler)}};var Y={mousedown:1,mousemove:2,mouseup:4};function G(){this.evEl="mousedown",this.evWin="mousemove mouseup",this.pressed=!1,Z.apply(this,arguments)}O(G,Z,{handler:function(t){var e=Y[t.type];1&e&&0===t.button&&(this.pressed=!0),2&e&&1!==t.which&&(e=4),this.pressed&&(4&e&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:"mouse",srcEvent:t}))}});var K={pointerdown:1,pointermove:2,pointerup:4,pointercancel:8,pointerout:8},Q={2:"touch",3:"pen",4:"mouse",5:"kinect"},J="pointerdown",$="pointermove pointerup pointercancel";function tt(){this.evEl=J,this.evWin=$,Z.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}i.MSPointerEvent&&!i.PointerEvent&&(J="MSPointerDown",$="MSPointerMove MSPointerUp MSPointerCancel"),O(tt,Z,{handler:function(t){var e=this.store,n=!1,r=t.type.toLowerCase().replace("ms",""),i=K[r],o=Q[t.pointerType]||t.pointerType,a="touch"==o,s=T(e,t.pointerId,"pointerId");1&i&&(0===t.button||a)?s<0&&(e.push(t),s=e.length-1):12&i&&(n=!0),s<0||(e[s]=t,this.callback(this.manager,i,{pointers:e,changedPointers:[t],pointerType:o,srcEvent:t}),n&&e.splice(s,1))}});var et={touchstart:1,touchmove:2,touchend:4,touchcancel:8};function nt(){this.evTarget="touchstart",this.evWin="touchstart touchmove touchend touchcancel",this.started=!1,Z.apply(this,arguments)}function rt(t,e){var n=k(t.touches),r=k(t.changedTouches);return 12&e&&(n=D(n.concat(r),"identifier",!0)),[n,r]}O(nt,Z,{handler:function(t){var e=et[t.type];if(1===e&&(this.started=!0),this.started){var n=rt.call(this,t,e);12&e&&n[0].length-n[1].length==0&&(this.started=!1),this.callback(this.manager,e,{pointers:n[0],changedPointers:n[1],pointerType:"touch",srcEvent:t})}}});var it={touchstart:1,touchmove:2,touchend:4,touchcancel:8};function ot(){this.evTarget="touchstart touchmove touchend touchcancel",this.targetIds={},Z.apply(this,arguments)}function at(t,e){var n=k(t.touches),r=this.targetIds;if(3&e&&1===n.length)return r[n[0].identifier]=!0,[n,n];var i,o,a=k(t.changedTouches),s=[],c=this.target;if(o=n.filter((function(t){return M(t.target,c)})),1===e)for(i=0;i<o.length;)r[o[i].identifier]=!0,i++;for(i=0;i<a.length;)r[a[i].identifier]&&s.push(a[i]),12&e&&delete r[a[i].identifier],i++;return s.length?[D(o.concat(s),"identifier",!0),s]:void 0}O(ot,Z,{handler:function(t){var e=it[t.type],n=at.call(this,t,e);n&&this.callback(this.manager,e,{pointers:n[0],changedPointers:n[1],pointerType:"touch",srcEvent:t})}});function st(){Z.apply(this,arguments);var t=w(this.handler,this);this.touch=new ot(this.manager,t),this.mouse=new G(this.manager,t),this.primaryTouch=null,this.lastTouches=[]}function ct(t,e){1&t?(this.primaryTouch=e.changedPointers[0].identifier,ut.call(this,e)):12&t&&ut.call(this,e)}function ut(t){var e=t.changedPointers[0];if(e.identifier===this.primaryTouch){var n={x:e.clientX,y:e.clientY};this.lastTouches.push(n);var r=this.lastTouches;setTimeout((function(){var t=r.indexOf(n);t>-1&&r.splice(t,1)}),2500)}}function lt(t){for(var e=t.srcEvent.clientX,n=t.srcEvent.clientY,r=0;r<this.lastTouches.length;r++){var i=this.lastTouches[r],o=Math.abs(e-i.x),a=Math.abs(n-i.y);if(o<=25&&a<=25)return!0}return!1}O(st,Z,{handler:function(t,e,n){var r="touch"==n.pointerType,i="mouse"==n.pointerType;if(!(i&&n.sourceCapabilities&&n.sourceCapabilities.firesTouchEvents)){if(r)ct.call(this,e,n);else if(i&&lt.call(this,n))return;this.callback(t,e,n)}},destroy:function(){this.touch.destroy(),this.mouse.destroy()}});var ht=C(l.style,"touchAction"),pt=void 0!==ht,ft=function(){if(!pt)return!1;var t={},e=i.CSS&&i.CSS.supports;return["auto","manipulation","pan-y","pan-x","pan-x pan-y","none"].forEach((function(n){t[n]=!e||i.CSS.supports("touch-action",n)})),t}();function dt(t,e){this.manager=t,this.set(e)}dt.prototype={set:function(t){"compute"==t&&(t=this.compute()),pt&&this.manager.element.style&&ft[t]&&(this.manager.element.style[ht]=t),this.actions=t.toLowerCase().trim()},update:function(){this.set(this.manager.options.touchAction)},compute:function(){var t=[];return g(this.manager.recognizers,(function(e){j(e.options.enable,[e])&&(t=t.concat(e.getTouchAction()))})),function(t){if(S(t,"none"))return"none";var e=S(t,"pan-x"),n=S(t,"pan-y");if(e&&n)return"none";if(e||n)return e?"pan-x":"pan-y";if(S(t,"manipulation"))return"manipulation";return"auto"}(t.join(" "))},preventDefaults:function(t){var e=t.srcEvent,n=t.offsetDirection;if(this.manager.session.prevented)e.preventDefault();else{var r=this.actions,i=S(r,"none")&&!ft.none,o=S(r,"pan-y")&&!ft["pan-y"],a=S(r,"pan-x")&&!ft["pan-x"];if(i){var s=1===t.pointers.length,c=t.distance<2,u=t.deltaTime<250;if(s&&c&&u)return}if(!a||!o)return i||o&&6&n||a&&24&n?this.preventSrc(e):void 0}},preventSrc:function(t){this.manager.session.prevented=!0,t.preventDefault()}};function vt(t){this.options=c({},this.defaults,t||{}),this.id=I++,this.manager=null,this.options.enable=E(this.options.enable,!0),this.state=1,this.simultaneous={},this.requireFail=[]}function gt(t){return 16&t?"cancel":8&t?"end":4&t?"move":2&t?"start":""}function mt(t){return 16==t?"down":8==t?"up":2==t?"left":4==t?"right":""}function bt(t,e){var n=e.manager;return n?n.get(t):t}function yt(){vt.apply(this,arguments)}function Ot(){yt.apply(this,arguments),this.pX=null,this.pY=null}function wt(){yt.apply(this,arguments)}function jt(){vt.apply(this,arguments),this._timer=null,this._input=null}function Et(){yt.apply(this,arguments)}function _t(){yt.apply(this,arguments)}function Pt(){vt.apply(this,arguments),this.pTime=!1,this.pCenter=!1,this._timer=null,this._input=null,this.count=0}function Mt(t,e){return(e=e||{}).recognizers=E(e.recognizers,Mt.defaults.preset),new St(t,e)}vt.prototype={defaults:{},set:function(t){return c(this.options,t),this.manager&&this.manager.touchAction.update(),this},recognizeWith:function(t){if(v(t,"recognizeWith",this))return this;var e=this.simultaneous;return e[(t=bt(t,this)).id]||(e[t.id]=t,t.recognizeWith(this)),this},dropRecognizeWith:function(t){return v(t,"dropRecognizeWith",this)||(t=bt(t,this),delete this.simultaneous[t.id]),this},requireFailure:function(t){if(v(t,"requireFailure",this))return this;var e=this.requireFail;return-1===T(e,t=bt(t,this))&&(e.push(t),t.requireFailure(this)),this},dropRequireFailure:function(t){if(v(t,"dropRequireFailure",this))return this;t=bt(t,this);var e=T(this.requireFail,t);return e>-1&&this.requireFail.splice(e,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(t){return!!this.simultaneous[t.id]},emit:function(t){var e=this,n=this.state;function r(n){e.manager.emit(n,t)}n<8&&r(e.options.event+gt(n)),r(e.options.event),t.additionalEvent&&r(t.additionalEvent),n>=8&&r(e.options.event+gt(n))},tryEmit:function(t){if(this.canEmit())return this.emit(t);this.state=32},canEmit:function(){for(var t=0;t<this.requireFail.length;){if(!(33&this.requireFail[t].state))return!1;t++}return!0},recognize:function(t){var e=c({},t);if(!j(this.options.enable,[this,e]))return this.reset(),void(this.state=32);56&this.state&&(this.state=1),this.state=this.process(e),30&this.state&&this.tryEmit(e)},process:function(t){},getTouchAction:function(){},reset:function(){}},O(yt,vt,{defaults:{pointers:1},attrTest:function(t){var e=this.options.pointers;return 0===e||t.pointers.length===e},process:function(t){var e=this.state,n=t.eventType,r=6&e,i=this.attrTest(t);return r&&(8&n||!i)?16|e:r||i?4&n?8|e:2&e?4|e:2:32}}),O(Ot,yt,{defaults:{event:"pan",threshold:10,pointers:1,direction:30},getTouchAction:function(){var t=this.options.direction,e=[];return 6&t&&e.push("pan-y"),24&t&&e.push("pan-x"),e},directionTest:function(t){var e=this.options,n=!0,r=t.distance,i=t.direction,o=t.deltaX,a=t.deltaY;return i&e.direction||(6&e.direction?(i=0===o?1:o<0?2:4,n=o!=this.pX,r=Math.abs(t.deltaX)):(i=0===a?1:a<0?8:16,n=a!=this.pY,r=Math.abs(t.deltaY))),t.direction=i,n&&r>e.threshold&&i&e.direction},attrTest:function(t){return yt.prototype.attrTest.call(this,t)&&(2&this.state||!(2&this.state)&&this.directionTest(t))},emit:function(t){this.pX=t.deltaX,this.pY=t.deltaY;var e=mt(t.direction);e&&(t.additionalEvent=this.options.event+e),this._super.emit.call(this,t)}}),O(wt,yt,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return["none"]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.scale-1)>this.options.threshold||2&this.state)},emit:function(t){if(1!==t.scale){var e=t.scale<1?"in":"out";t.additionalEvent=this.options.event+e}this._super.emit.call(this,t)}}),O(jt,vt,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return["auto"]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,r=t.distance<e.threshold,i=t.deltaTime>e.time;if(this._input=t,!r||!n||12&t.eventType&&!i)this.reset();else if(1&t.eventType)this.reset(),this._timer=d((function(){this.state=8,this.tryEmit()}),e.time,this);else if(4&t.eventType)return 8;return 32},reset:function(){clearTimeout(this._timer)},emit:function(t){8===this.state&&(t&&4&t.eventType?this.manager.emit(this.options.event+"up",t):(this._input.timeStamp=f(),this.manager.emit(this.options.event,this._input)))}}),O(Et,yt,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return["none"]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.rotation)>this.options.threshold||2&this.state)}}),O(_t,yt,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:30,pointers:1},getTouchAction:function(){return Ot.prototype.getTouchAction.call(this)},attrTest:function(t){var e,n=this.options.direction;return 30&n?e=t.overallVelocity:6&n?e=t.overallVelocityX:24&n&&(e=t.overallVelocityY),this._super.attrTest.call(this,t)&&n&t.offsetDirection&&t.distance>this.options.threshold&&t.maxPointers==this.options.pointers&&p(e)>this.options.velocity&&4&t.eventType},emit:function(t){var e=mt(t.offsetDirection);e&&this.manager.emit(this.options.event+e,t),this.manager.emit(this.options.event,t)}}),O(Pt,vt,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return["manipulation"]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,r=t.distance<e.threshold,i=t.deltaTime<e.time;if(this.reset(),1&t.eventType&&0===this.count)return this.failTimeout();if(r&&i&&n){if(4!=t.eventType)return this.failTimeout();var o=!this.pTime||t.timeStamp-this.pTime<e.interval,a=!this.pCenter||H(this.pCenter,t.center)<e.posThreshold;if(this.pTime=t.timeStamp,this.pCenter=t.center,a&&o?this.count+=1:this.count=1,this._input=t,0===this.count%e.taps)return this.hasRequireFailures()?(this._timer=d((function(){this.state=8,this.tryEmit()}),e.interval,this),2):8}return 32},failTimeout:function(){return this._timer=d((function(){this.state=32}),this.options.interval,this),32},reset:function(){clearTimeout(this._timer)},emit:function(){8==this.state&&(this._input.tapCount=this.count,this.manager.emit(this.options.event,this._input))}}),Mt.VERSION="2.0.7",Mt.defaults={domEvents:!1,touchAction:"compute",enable:!0,inputTarget:null,inputClass:null,preset:[[Et,{enable:!1}],[wt,{enable:!1},["rotate"]],[_t,{direction:6}],[Ot,{direction:6},["swipe"]],[Pt],[Pt,{event:"doubletap",taps:2},["tap"]],[jt]],cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}};function St(t,e){var n;this.options=c({},Mt.defaults,e||{}),this.options.inputTarget=this.options.inputTarget||t,this.handlers={},this.session={},this.recognizers=[],this.oldCssProps={},this.element=t,this.input=new((n=this).options.inputClass||(L?tt:z?ot:A?st:G))(n,V),this.touchAction=new dt(this,this.options.touchAction),xt(this,!0),g(this.options.recognizers,(function(t){var e=this.add(new t[0](t[1]));t[2]&&e.recognizeWith(t[2]),t[3]&&e.requireFailure(t[3])}),this)}function xt(t,e){var n,r=t.element;r.style&&(g(t.options.cssProps,(function(i,o){n=C(r.style,o),e?(t.oldCssProps[n]=r.style[n],r.style[n]=i):r.style[n]=t.oldCssProps[n]||""})),e||(t.oldCssProps={}))}St.prototype={set:function(t){return c(this.options,t),t.touchAction&&this.touchAction.update(),t.inputTarget&&(this.input.destroy(),this.input.target=t.inputTarget,this.input.init()),this},stop:function(t){this.session.stopped=t?2:1},recognize:function(t){var e=this.session;if(!e.stopped){var n;this.touchAction.preventDefaults(t);var r=this.recognizers,i=e.curRecognizer;(!i||i&&8&i.state)&&(i=e.curRecognizer=null);for(var o=0;o<r.length;)n=r[o],2===e.stopped||i&&n!=i&&!n.canRecognizeWith(i)?n.reset():n.recognize(t),!i&&14&n.state&&(i=e.curRecognizer=n),o++}},get:function(t){if(t instanceof vt)return t;for(var e=this.recognizers,n=0;n<e.length;n++)if(e[n].options.event==t)return e[n];return null},add:function(t){if(v(t,"add",this))return this;var e=this.get(t.options.event);return e&&this.remove(e),this.recognizers.push(t),t.manager=this,this.touchAction.update(),t},remove:function(t){if(v(t,"remove",this))return this;if(t=this.get(t)){var e=this.recognizers,n=T(e,t);-1!==n&&(e.splice(n,1),this.touchAction.update())}return this},on:function(t,e){if(void 0!==t&&void 0!==e){var n=this.handlers;return g(x(t),(function(t){n[t]=n[t]||[],n[t].push(e)})),this}},off:function(t,e){if(void 0!==t){var n=this.handlers;return g(x(t),(function(t){e?n[t]&&n[t].splice(T(n[t],e),1):delete n[t]})),this}},emit:function(t,e){this.options.domEvents&&function(t,e){var n=o.createEvent("Event");n.initEvent(t,!0,!0),n.gesture=e,e.target.dispatchEvent(n)}(t,e);var n=this.handlers[t]&&this.handlers[t].slice();if(n&&n.length){e.type=t,e.preventDefault=function(){e.srcEvent.preventDefault()};for(var r=0;r<n.length;)n[r](e),r++}},destroy:function(){this.element&&xt(this,!1),this.handlers={},this.session={},this.input.destroy(),this.element=null}},c(Mt,{INPUT_START:1,INPUT_MOVE:2,INPUT_END:4,INPUT_CANCEL:8,STATE_POSSIBLE:1,STATE_BEGAN:2,STATE_CHANGED:4,STATE_ENDED:8,STATE_RECOGNIZED:8,STATE_CANCELLED:16,STATE_FAILED:32,DIRECTION_NONE:1,DIRECTION_LEFT:2,DIRECTION_RIGHT:4,DIRECTION_UP:8,DIRECTION_DOWN:16,DIRECTION_HORIZONTAL:6,DIRECTION_VERTICAL:24,DIRECTION_ALL:30,Manager:St,Input:Z,TouchAction:dt,TouchInput:ot,MouseInput:G,PointerEventInput:tt,TouchMouseInput:st,SingleTouchInput:nt,Recognizer:vt,AttrRecognizer:yt,Tap:Pt,Pan:Ot,Swipe:_t,Pinch:wt,Rotate:Et,Press:jt,on:_,off:P,each:g,merge:y,extend:b,assign:c,inherit:O,bindFn:w,prefixed:C}),(void 0!==i?i:"undefined"!=typeof self?self:{}).Hammer=Mt,void 0===(r=function(){return Mt}.call(e,n,e,t))||(t.exports=r)}(window,document)},Z2JM:function(t,e,n){"use strict";(function(t){n.d(e,"a",(function(){return u}));var r=n("W0B4"),i=n("Zs1x"),o=n("uR8M");var a={container:r.object,gl:r.object,mapboxApiAccessToken:r.string,mapboxApiUrl:r.string,attributionControl:r.bool,preserveDrawingBuffer:r.bool,reuseMaps:r.bool,transformRequest:r.func,mapOptions:r.object,mapStyle:r.oneOfType([r.string,r.object]),preventStyleDiffing:r.bool,visible:r.bool,asyncRender:r.bool,onLoad:r.func,onError:r.func,width:r.number,height:r.number,viewState:r.object,longitude:r.number,latitude:r.number,zoom:r.number,bearing:r.number,pitch:r.number,altitude:r.number},s={container:i.a.body,mapboxApiAccessToken:function(){var e=null;if("undefined"!=typeof window&&window.location){var n=window.location.search.match(/access_token=([^&\/]*)/);e=n&&n[1]}e||void 0===t||(e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ");return e||"no-token"}(),mapboxApiUrl:"https://api.mapbox.com",preserveDrawingBuffer:!1,attributionControl:!0,reuseMaps:!1,mapOptions:{},mapStyle:"mapbox://styles/mapbox/light-v8",preventStyleDiffing:!1,visible:!0,asyncRender:!1,onLoad:function(){},onError:function(t){t&&console.error(t.error)},width:0,height:0,longitude:0,latitude:0,zoom:0,bearing:0,pitch:0,altitude:1.5};function c(t,e){void 0===e&&(e="component"),t.debug&&r.checkPropTypes(a,t,"prop",e)}var u=function(){function t(e){var n=this;if(this.props=s,this.width=0,this.height=0,this._fireLoadEvent=function(){n.props.onLoad({type:"load",target:n._map})},this._handleError=function(t){n.props.onError(t)},!e.mapboxgl)throw new Error("Mapbox not available");this.mapboxgl=e.mapboxgl,t.initialized||(t.initialized=!0,this._checkStyleSheet(this.mapboxgl.version)),this._initialize(e)}var e=t.prototype;return e.finalize=function(){return this._destroy(),this},e.setProps=function(t){return this._update(this.props,t),this},e.redraw=function(){var t=this._map;t.style&&(t._frame&&(t._frame.cancel(),t._frame=null),t._render())},e.getMap=function(){return this._map},e._reuse=function(e){this._map=t.savedMap;var n=this._map.getContainer(),r=e.container;for(r.classList.add("mapboxgl-map");n.childNodes.length>0;)r.appendChild(n.childNodes[0]);this._map._container=r,t.savedMap=null,e.mapStyle&&this._map.setStyle(Object(o.a)(e.mapStyle),{diff:!1}),this._map.isStyleLoaded()?this._fireLoadEvent():this._map.once("styledata",this._fireLoadEvent)},e._create=function(e){if(e.reuseMaps&&t.savedMap)this._reuse(e);else{if(e.gl){var n=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=n,e.gl}}var r={container:e.container,center:[0,0],zoom:8,pitch:0,bearing:0,maxZoom:24,style:Object(o.a)(e.mapStyle),interactive:!1,trackResize:!1,attributionControl:e.attributionControl,preserveDrawingBuffer:e.preserveDrawingBuffer};e.transformRequest&&(r.transformRequest=e.transformRequest),this._map=new this.mapboxgl.Map(Object.assign({},r,e.mapOptions)),this._map.once("load",this._fireLoadEvent),this._map.on("error",this._handleError)}return this},e._destroy=function(){this._map&&(this.props.reuseMaps&&!t.savedMap?(t.savedMap=this._map,this._map.off("load",this._fireLoadEvent),this._map.off("error",this._handleError),this._map.off("styledata",this._fireLoadEvent)):this._map.remove(),this._map=null)},e._initialize=function(t){var e=this;c(t=Object.assign({},s,t),"Mapbox"),this.mapboxgl.accessToken=t.mapboxApiAccessToken||s.mapboxApiAccessToken,this.mapboxgl.baseApiUrl=t.mapboxApiUrl,this._create(t);var n=t.container;Object.defineProperty(n,"offsetWidth",{get:function(){return e.width}}),Object.defineProperty(n,"clientWidth",{get:function(){return e.width}}),Object.defineProperty(n,"offsetHeight",{get:function(){return e.height}}),Object.defineProperty(n,"clientHeight",{get:function(){return e.height}});var r=this._map.getCanvas();r&&(r.style.outline="none"),this._updateMapViewport({},t),this._updateMapSize({},t),this.props=t},e._update=function(t,e){if(this._map){c(e=Object.assign({},this.props,e),"Mapbox");var n=this._updateMapViewport(t,e),r=this._updateMapSize(t,e);this._updateMapStyle(t,e),e.asyncRender||!n&&!r||this.redraw(),this.props=e}},e._updateMapStyle=function(t,e){t.mapStyle!==e.mapStyle&&this._map.setStyle(Object(o.a)(e.mapStyle),{diff:!e.preventStyleDiffing})},e._updateMapSize=function(t,e){var n=t.width!==e.width||t.height!==e.height;return n&&(this.width=e.width,this.height=e.height,this._map.resize()),n},e._updateMapViewport=function(t,e){var n=this._getViewState(t),r=this._getViewState(e),i=r.latitude!==n.latitude||r.longitude!==n.longitude||r.zoom!==n.zoom||r.pitch!==n.pitch||r.bearing!==n.bearing||r.altitude!==n.altitude;return i&&(this._map.jumpTo(this._viewStateToMapboxProps(r)),r.altitude!==n.altitude&&(this._map.transform.altitude=r.altitude)),i},e._getViewState=function(t){var e=t.viewState||t,n=e.longitude,r=e.latitude,i=e.zoom,o=e.pitch,a=void 0===o?0:o,s=e.bearing,c=void 0===s?0:s,u=e.altitude;return{longitude:n,latitude:r,zoom:i,pitch:a,bearing:c,altitude:void 0===u?1.5:u}},e._checkStyleSheet=function(t){if(void 0===t&&(t="0.47.0"),void 0!==i.a)try{var e=i.a.createElement("div");if(e.className="mapboxgl-map",e.style.display="none",i.a.body.appendChild(e),!("static"!==window.getComputedStyle(e).position)){var n=i.a.createElement("link");n.setAttribute("rel","stylesheet"),n.setAttribute("type","text/css"),n.setAttribute("href","https://api.tiles.mapbox.com/mapbox-gl-js/v"+t+"/mapbox-gl.css"),i.a.head.appendChild(n)}}catch(r){}},e._viewStateToMapboxProps=function(t){return{center:[t.longitude,t.latitude],zoom:t.zoom,bearing:t.bearing,pitch:t.pitch}},t}();u.initialized=!1,u.propTypes=a,u.defaultProps=s,u.savedMap=null}).call(this,n("8oxB"))},ZaHm:function(t,e,n){"use strict";n.d(e,"b",(function(){return i})),n.d(e,"c",(function(){return o})),n.d(e,"h",(function(){return a})),n.d(e,"g",(function(){return s})),n.d(e,"e",(function(){return c})),n.d(e,"f",(function(){return u})),n.d(e,"d",(function(){return l})),n.d(e,"a",(function(){return h}));n("QFcT");var r=n("yU0y");function i(t,e){var n=e[0],r=e[1],i=e[2],o=e[3],a=e[4],s=e[5],c=e[6],u=e[7],l=e[8],h=e[9],p=e[10],f=e[11],d=e[12],v=e[13],g=e[14],m=e[15],b=n*s-r*a,y=n*c-i*a,O=n*u-o*a,w=r*c-i*s,j=r*u-o*s,E=i*u-o*c,_=l*v-h*d,P=l*g-p*d,M=l*m-f*d,S=h*g-p*v,x=h*m-f*v,T=p*m-f*g,k=b*T-y*x+O*S+w*M-j*P+E*_;return k?(k=1/k,t[0]=(s*T-c*x+u*S)*k,t[1]=(i*x-r*T-o*S)*k,t[2]=(v*E-g*j+m*w)*k,t[3]=(p*j-h*E-f*w)*k,t[4]=(c*M-a*T-u*P)*k,t[5]=(n*T-i*M+o*P)*k,t[6]=(g*O-d*E-m*y)*k,t[7]=(l*E-p*O+f*y)*k,t[8]=(a*x-s*M+u*_)*k,t[9]=(r*M-n*x-o*_)*k,t[10]=(d*j-v*O+m*b)*k,t[11]=(h*O-l*j-f*b)*k,t[12]=(s*P-a*S-c*_)*k,t[13]=(n*S-r*P+i*_)*k,t[14]=(v*y-d*w-g*b)*k,t[15]=(l*w-h*y+p*b)*k,t):null}function o(t,e,n){var r=e[0],i=e[1],o=e[2],a=e[3],s=e[4],c=e[5],u=e[6],l=e[7],h=e[8],p=e[9],f=e[10],d=e[11],v=e[12],g=e[13],m=e[14],b=e[15],y=n[0],O=n[1],w=n[2],j=n[3];return t[0]=y*r+O*s+w*h+j*v,t[1]=y*i+O*c+w*p+j*g,t[2]=y*o+O*u+w*f+j*m,t[3]=y*a+O*l+w*d+j*b,y=n[4],O=n[5],w=n[6],j=n[7],t[4]=y*r+O*s+w*h+j*v,t[5]=y*i+O*c+w*p+j*g,t[6]=y*o+O*u+w*f+j*m,t[7]=y*a+O*l+w*d+j*b,y=n[8],O=n[9],w=n[10],j=n[11],t[8]=y*r+O*s+w*h+j*v,t[9]=y*i+O*c+w*p+j*g,t[10]=y*o+O*u+w*f+j*m,t[11]=y*a+O*l+w*d+j*b,y=n[12],O=n[13],w=n[14],j=n[15],t[12]=y*r+O*s+w*h+j*v,t[13]=y*i+O*c+w*p+j*g,t[14]=y*o+O*u+w*f+j*m,t[15]=y*a+O*l+w*d+j*b,t}function a(t,e,n){var r,i,o,a,s,c,u,l,h,p,f,d,v=n[0],g=n[1],m=n[2];return e===t?(t[12]=e[0]*v+e[4]*g+e[8]*m+e[12],t[13]=e[1]*v+e[5]*g+e[9]*m+e[13],t[14]=e[2]*v+e[6]*g+e[10]*m+e[14],t[15]=e[3]*v+e[7]*g+e[11]*m+e[15]):(r=e[0],i=e[1],o=e[2],a=e[3],s=e[4],c=e[5],u=e[6],l=e[7],h=e[8],p=e[9],f=e[10],d=e[11],t[0]=r,t[1]=i,t[2]=o,t[3]=a,t[4]=s,t[5]=c,t[6]=u,t[7]=l,t[8]=h,t[9]=p,t[10]=f,t[11]=d,t[12]=r*v+s*g+h*m+e[12],t[13]=i*v+c*g+p*m+e[13],t[14]=o*v+u*g+f*m+e[14],t[15]=a*v+l*g+d*m+e[15]),t}function s(t,e,n){var r=n[0],i=n[1],o=n[2];return t[0]=e[0]*r,t[1]=e[1]*r,t[2]=e[2]*r,t[3]=e[3]*r,t[4]=e[4]*i,t[5]=e[5]*i,t[6]=e[6]*i,t[7]=e[7]*i,t[8]=e[8]*o,t[9]=e[9]*o,t[10]=e[10]*o,t[11]=e[11]*o,t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15],t}function c(t,e,n){var r=Math.sin(n),i=Math.cos(n),o=e[4],a=e[5],s=e[6],c=e[7],u=e[8],l=e[9],h=e[10],p=e[11];return e!==t&&(t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15]),t[4]=o*i+u*r,t[5]=a*i+l*r,t[6]=s*i+h*r,t[7]=c*i+p*r,t[8]=u*i-o*r,t[9]=l*i-a*r,t[10]=h*i-s*r,t[11]=p*i-c*r,t}function u(t,e,n){var r=Math.sin(n),i=Math.cos(n),o=e[0],a=e[1],s=e[2],c=e[3],u=e[4],l=e[5],h=e[6],p=e[7];return e!==t&&(t[8]=e[8],t[9]=e[9],t[10]=e[10],t[11]=e[11],t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15]),t[0]=o*i+u*r,t[1]=a*i+l*r,t[2]=s*i+h*r,t[3]=c*i+p*r,t[4]=u*i-o*r,t[5]=l*i-a*r,t[6]=h*i-s*r,t[7]=p*i-c*r,t}function l(t,e,n,r,i){var o,a=1/Math.tan(e/2);return t[0]=a/n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=a,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[11]=-1,t[12]=0,t[13]=0,t[15]=0,null!=i&&i!==1/0?(o=1/(r-i),t[10]=(i+r)*o,t[14]=2*i*r*o):(t[10]=-1,t[14]=-2*r),t}function h(t,e){var n=t[0],i=t[1],o=t[2],a=t[3],s=t[4],c=t[5],u=t[6],l=t[7],h=t[8],p=t[9],f=t[10],d=t[11],v=t[12],g=t[13],m=t[14],b=t[15],y=e[0],O=e[1],w=e[2],j=e[3],E=e[4],_=e[5],P=e[6],M=e[7],S=e[8],x=e[9],T=e[10],k=e[11],D=e[12],C=e[13],I=e[14],R=e[15];return Math.abs(n-y)<=r.b*Math.max(1,Math.abs(n),Math.abs(y))&&Math.abs(i-O)<=r.b*Math.max(1,Math.abs(i),Math.abs(O))&&Math.abs(o-w)<=r.b*Math.max(1,Math.abs(o),Math.abs(w))&&Math.abs(a-j)<=r.b*Math.max(1,Math.abs(a),Math.abs(j))&&Math.abs(s-E)<=r.b*Math.max(1,Math.abs(s),Math.abs(E))&&Math.abs(c-_)<=r.b*Math.max(1,Math.abs(c),Math.abs(_))&&Math.abs(u-P)<=r.b*Math.max(1,Math.abs(u),Math.abs(P))&&Math.abs(l-M)<=r.b*Math.max(1,Math.abs(l),Math.abs(M))&&Math.abs(h-S)<=r.b*Math.max(1,Math.abs(h),Math.abs(S))&&Math.abs(p-x)<=r.b*Math.max(1,Math.abs(p),Math.abs(x))&&Math.abs(f-T)<=r.b*Math.max(1,Math.abs(f),Math.abs(T))&&Math.abs(d-k)<=r.b*Math.max(1,Math.abs(d),Math.abs(k))&&Math.abs(v-D)<=r.b*Math.max(1,Math.abs(v),Math.abs(D))&&Math.abs(g-C)<=r.b*Math.max(1,Math.abs(g),Math.abs(C))&&Math.abs(m-I)<=r.b*Math.max(1,Math.abs(m),Math.abs(I))&&Math.abs(b-R)<=r.b*Math.max(1,Math.abs(b),Math.abs(R))}},Zs1x:function(t,e,n){"use strict";(function(t){n.d(e,"a",(function(){return r}));"undefined"!=typeof window&&window,void 0!==t||window;var r="undefined"!=typeof document?document:{}}).call(this,n("yLpj"))},ZxFD:function(t,e,n){"use strict";n.d(e,"a",(function(){return i})),n.d(e,"e",(function(){return o})),n.d(e,"b",(function(){return a})),n.d(e,"d",(function(){return s})),n.d(e,"c",(function(){return c})),n.d(e,"f",(function(){return h}));n("QFcT");var r=n("yU0y");function i(t,e,n){return t[0]=e[0]+n[0],t[1]=e[1]+n[1],t}function o(t,e,n){return t[0]=e[0]*n,t[1]=e[1]*n,t}function a(t){var e=t[0],n=t[1];return Math.hypot(e,n)}function s(t,e){return t[0]=-e[0],t[1]=-e[1],t}function c(t,e,n,r){var i=e[0],o=e[1];return t[0]=i+r*(n[0]-i),t[1]=o+r*(n[1]-o),t}var u,l,h=function(t,e,n){return t[0]=e[0]-n[0],t[1]=e[1]-n[1],t};u=new r.a(2),r.a!=Float32Array&&(u[0]=0,u[1]=0),l=u},bl9R:function(t,e,n){"use strict";n.d(e,"a",(function(){return i})),n.d(e,"b",(function(){return o}));n("QFcT");var r=n("yU0y");function i(t,e,n){return t[0]=e[0]*n,t[1]=e[1]*n,t[2]=e[2]*n,t[3]=e[3]*n,t}function o(t,e,n){var r=e[0],i=e[1],o=e[2],a=e[3];return t[0]=n[0]*r+n[4]*i+n[8]*o+n[12]*a,t[1]=n[1]*r+n[5]*i+n[9]*o+n[13]*a,t[2]=n[2]*r+n[6]*i+n[10]*o+n[14]*a,t[3]=n[3]*r+n[7]*i+n[11]*o+n[15]*a,t}var a,s;a=new r.a(4),r.a!=Float32Array&&(a[0]=0,a[1]=0,a[2]=0,a[3]=0),s=a},iXzu:function(t,e,n){"use strict";(function(t){n("E9XD");var r=function(){if("undefined"!=typeof Map)return Map;function t(t,e){var n=-1;return t.some((function(t,r){return t[0]===e&&(n=r,!0)})),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var n=t(this.__entries__,e),r=this.__entries__[n];return r&&r[1]},e.prototype.set=function(e,n){var r=t(this.__entries__,e);~r?this.__entries__[r][1]=n:this.__entries__.push([e,n])},e.prototype.delete=function(e){var n=this.__entries__,r=t(n,e);~r&&n.splice(r,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(t,e){void 0===e&&(e=null);for(var n=0,r=this.__entries__;n<r.length;n++){var i=r[n];t.call(e,i[1],i[0])}},e}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,o=void 0!==t&&t.Math===Math?t:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),a="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(o):function(t){return setTimeout((function(){return t(Date.now())}),1e3/60)};var s=["top","right","bottom","left","width","height","size","weight"],c="undefined"!=typeof MutationObserver,u=function(){function t(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t,e){var n=!1,r=!1,i=0;function o(){n&&(n=!1,t()),r&&c()}function s(){a(o)}function c(){var t=Date.now();if(n){if(t-i<2)return;r=!0}else n=!0,r=!1,setTimeout(s,e);i=t}return c}(this.refresh.bind(this),20)}return t.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},t.prototype.removeObserver=function(t){var e=this.observers_,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this.connected_&&this.disconnect_()},t.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},t.prototype.updateObservers_=function(){var t=this.observers_.filter((function(t){return t.gatherActive(),t.hasActive()}));return t.forEach((function(t){return t.broadcastActive()})),t.length>0},t.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),c?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,n=void 0===e?"":e;s.some((function(t){return!!~n.indexOf(t)}))&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),l=function(t,e){for(var n=0,r=Object.keys(e);n<r.length;n++){var i=r[n];Object.defineProperty(t,i,{value:e[i],enumerable:!1,writable:!1,configurable:!0})}return t},h=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||o},p=b(0,0,0,0);function f(t){return parseFloat(t)||0}function d(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return e.reduce((function(e,n){return e+f(t["border-"+n+"-width"])}),0)}function v(t){var e=t.clientWidth,n=t.clientHeight;if(!e&&!n)return p;var r=h(t).getComputedStyle(t),i=function(t){for(var e={},n=0,r=["top","right","bottom","left"];n<r.length;n++){var i=r[n],o=t["padding-"+i];e[i]=f(o)}return e}(r),o=i.left+i.right,a=i.top+i.bottom,s=f(r.width),c=f(r.height);if("border-box"===r.boxSizing&&(Math.round(s+o)!==e&&(s-=d(r,"left","right")+o),Math.round(c+a)!==n&&(c-=d(r,"top","bottom")+a)),!function(t){return t===h(t).document.documentElement}(t)){var u=Math.round(s+o)-e,l=Math.round(c+a)-n;1!==Math.abs(u)&&(s-=u),1!==Math.abs(l)&&(c-=l)}return b(i.left,i.top,s,c)}var g="undefined"!=typeof SVGGraphicsElement?function(t){return t instanceof h(t).SVGGraphicsElement}:function(t){return t instanceof h(t).SVGElement&&"function"==typeof t.getBBox};function m(t){return i?g(t)?function(t){var e=t.getBBox();return b(0,0,e.width,e.height)}(t):v(t):p}function b(t,e,n,r){return{x:t,y:e,width:n,height:r}}var y=function(){function t(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=b(0,0,0,0),this.target=t}return t.prototype.isActive=function(){var t=m(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t.prototype.broadcastRect=function(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t}(),O=function(t,e){var n,r,i,o,a,s,c,u=(r=(n=e).x,i=n.y,o=n.width,a=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,c=Object.create(s.prototype),l(c,{x:r,y:i,width:o,height:a,top:i,right:r+o,bottom:a+i,left:r}),c);l(this,{target:t,contentRect:u})},w=function(){function t(t,e,n){if(this.activeObservations_=[],this.observations_=new r,"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=t,this.controller_=e,this.callbackCtx_=n}return t.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof h(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)||(e.set(t,new y(t)),this.controller_.addObserver(this),this.controller_.refresh())}},t.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof h(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)&&(e.delete(t),e.size||this.controller_.removeObserver(this))}},t.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},t.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach((function(e){e.isActive()&&t.activeObservations_.push(e)}))},t.prototype.broadcastActive=function(){if(this.hasActive()){var t=this.callbackCtx_,e=this.activeObservations_.map((function(t){return new O(t.target,t.broadcastRect())}));this.callback_.call(t,e,t),this.clearActive()}},t.prototype.clearActive=function(){this.activeObservations_.splice(0)},t.prototype.hasActive=function(){return this.activeObservations_.length>0},t}(),j="undefined"!=typeof WeakMap?new WeakMap:new r,E=function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=u.getInstance(),r=new w(e,n,this);j.set(this,r)};["observe","unobserve","disconnect"].forEach((function(t){E.prototype[t]=function(){var e;return(e=j.get(this))[t].apply(e,arguments)}}));var _=void 0!==o.ResizeObserver?o.ResizeObserver:E;e.a=_}).call(this,n("yLpj"))},"n+fv":function(t,e,n){"use strict";n.d(e,"a",(function(){return i})),n.d(e,"c",(function(){return o})),n.d(e,"b",(function(){return c}));n("QFcT");var r=n("yU0y");function i(t,e,n){return t[0]=e[0]+n[0],t[1]=e[1]+n[1],t[2]=e[2]+n[2],t}function o(t,e){return t[0]=-e[0],t[1]=-e[1],t[2]=-e[2],t}var a,s,c=function(t,e,n){return t[0]=e[0]*n[0],t[1]=e[1]*n[1],t[2]=e[2]*n[2],t};a=new r.a(3),r.a!=Float32Array&&(a[0]=0,a[1]=0,a[2]=0),s=a},oXiK:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return Xe})),n.d(e,"InteractiveMap",(function(){return Xe})),n.d(e,"StaticMap",(function(){return wt})),n.d(e,"Source",(function(){return Je})),n.d(e,"Layer",(function(){return sn})),n.d(e,"BaseControl",(function(){return pn})),n.d(e,"Marker",(function(){return Pn})),n.d(e,"Popup",(function(){return Dn})),n.d(e,"AttributionControl",(function(){return An})),n.d(e,"FullscreenControl",(function(){return Vn})),n.d(e,"GeolocateControl",(function(){return Xn})),n.d(e,"NavigationControl",(function(){return er})),n.d(e,"ScaleControl",(function(){return or})),n.d(e,"CanvasOverlay",(function(){return cr})),n.d(e,"HTMLOverlay",(function(){return hr})),n.d(e,"SVGOverlay",(function(){return dr})),n.d(e,"TRANSITION_EVENTS",(function(){return Vt})),n.d(e,"TransitionInterpolator",(function(){return _t})),n.d(e,"LinearInterpolator",(function(){return Ft})),n.d(e,"FlyToInterpolator",(function(){return At})),n.d(e,"MapController",(function(){return Re})),n.d(e,"WebMercatorViewport",(function(){return N})),n.d(e,"setRTLTextPlugin",(function(){return vr})),n.d(e,"MapContext",(function(){return lt})),n.d(e,"_useMapControl",(function(){return ln})),n.d(e,"_MapContext",(function(){return lt}));var r=n("KQm4"),i=n("rePB"),o=n("q1tI"),a=n("W0B4"),s=n("ODXe"),c=n("1OyB"),u=n("vuIU"),l=n("bl9R");function h(t,e){var n=l.b([],e,t);return l.a(n,n,1/n[3]),n}function p(t,e){var n=t%e;return n<0?e+n:n}function f(t,e,n){return n*e+(1-n)*t}var d=Math.log2||function(t){return Math.log(t)*Math.LOG2E},v=n("ZaHm"),g=n("ZxFD"),m=n("n+fv");function b(t,e){if(!t)throw new Error(e||"@math.gl/web-mercator: assertion failed.")}var y=Math.PI,O=y/4,w=y/180,j=180/y;function E(t){return Math.pow(2,t)}function _(t){return d(t)}function P(t){var e=Object(s.a)(t,2),n=e[0],r=e[1];b(Number.isFinite(n)),b(Number.isFinite(r)&&r>=-90&&r<=90,"invalid latitude");var i=r*w;return[512*(n*w+y)/(2*y),512*(y+Math.log(Math.tan(O+.5*i)))/(2*y)]}function M(t){var e=Object(s.a)(t,2),n=e[0],r=e[1],i=n/512*(2*y)-y,o=2*(Math.atan(Math.exp(r/512*(2*y)-y))-O);return[i*j,o*j]}function S(t){var e=t.latitude,n=t.longitude,r=t.highPrecision,i=void 0!==r&&r;b(Number.isFinite(e)&&Number.isFinite(n));var o={},a=Math.cos(e*w),s=512/360/a,c=512/4003e4/a;if(o.unitsPerMeter=[c,c,c],o.metersPerUnit=[1/c,1/c,1/c],o.unitsPerDegree=[512/360,s,c],o.degreesPerUnit=[.703125,1/s,1/c],i){var u=w*Math.tan(e*w)/a,l=512/360*u/2,h=512/4003e4*u,p=h/s*c;o.unitsPerDegree2=[0,l,h],o.unitsPerMeter2=[p,0,p]}return o}function x(t){var e=t.height,n=t.pitch,r=t.bearing,i=t.altitude,o=t.scale,a=t.center,s=void 0===a?null:a,c=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];return v.h(c,c,[0,0,-i]),v.e(c,c,-n*w),v.f(c,c,r*w),o/=e,v.g(c,c,[o,o,o]),s&&v.h(c,c,m.c([],s)),c}function T(t){var e=t.width,n=t.height,r=t.pitch,i=function(t){var e=t.width,n=t.height,r=t.fovy,i=void 0===r?k(1.5):r,o=t.altitude,a=t.pitch,s=void 0===a?0:a,c=t.nearZMultiplier,u=void 0===c?1:c,l=t.farZMultiplier,h=void 0===l?1:l;void 0!==o&&(i=k(o));var p=.5*i*w,f=D(i),d=s*w,v=Math.sin(p)*f/Math.sin(Math.min(Math.max(Math.PI/2-d-p,.01),Math.PI-.01));return{fov:2*p,aspect:e/n,focalDistance:f,near:u,far:(Math.sin(d)*v+f)*h}}({width:e,height:n,altitude:t.altitude,fovy:t.fovy,pitch:r,nearZMultiplier:t.nearZMultiplier,farZMultiplier:t.farZMultiplier}),o=i.fov,a=i.aspect,s=i.near,c=i.far;return v.d([],o,a,s,c)}function k(t){return 2*Math.atan(.5/t)*j}function D(t){return.5/Math.tan(.5*t*w)}function C(t,e){var n=Object(s.a)(t,3),r=n[0],i=n[1],o=n[2],a=void 0===o?0:o;return b(Number.isFinite(r)&&Number.isFinite(i)&&Number.isFinite(a)),h(e,[r,i,a,1])}function I(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=Object(s.a)(t,3),i=r[0],o=r[1],a=r[2];if(b(Number.isFinite(i)&&Number.isFinite(o),"invalid pixel coordinate"),Number.isFinite(a)){var c=h(e,[i,o,a,1]);return c}var u=h(e,[i,o,0,1]),l=h(e,[i,o,1,1]),p=u[2],f=l[2],d=p===f?0:((n||0)-p)/(f-p);return g.c([],u,l,d)}function R(t){var e=t.width,n=t.height,r=t.bounds,i=t.minExtent,o=void 0===i?0:i,a=t.maxZoom,c=void 0===a?24:a,u=t.padding,l=void 0===u?0:u,h=t.offset,p=void 0===h?[0,0]:h,f=Object(s.a)(r,2),v=Object(s.a)(f[0],2),g=v[0],m=v[1],y=Object(s.a)(f[1],2),O=y[0],w=y[1];if(Number.isFinite(l)){l={top:l,bottom:l,left:l,right:l}}else b(Number.isFinite(l.top)&&Number.isFinite(l.bottom)&&Number.isFinite(l.left)&&Number.isFinite(l.right));var j=new N({width:e,height:n,longitude:0,latitude:0,zoom:0}),E=j.project([g,w]),_=j.project([O,m]),P=[Math.max(Math.abs(_[0]-E[0]),o),Math.max(Math.abs(_[1]-E[1]),o)],M=[e-l.left-l.right-2*Math.abs(p[0]),n-l.top-l.bottom-2*Math.abs(p[1])];b(M[0]>0&&M[1]>0);var S=M[0]/P[0],x=M[1]/P[1],T=(l.right-l.left)/2/S,k=(l.bottom-l.top)/2/x,D=[(_[0]+E[0])/2+T,(_[1]+E[1])/2+k],C=j.unproject(D),I=Math.min(c,j.zoom+d(Math.abs(Math.min(S,x))));return b(Number.isFinite(I)),{longitude:C[0],latitude:C[1],zoom:I}}var A=Math.PI/180;function L(t){var e,n,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=t.width,o=t.height,a=t.unproject,s={targetZ:r},c=a([0,o],s),u=a([i,o],s),l=t.fovy?.5*t.fovy*A:Math.atan(.5/t.altitude),h=(90-t.pitch)*A;return l>h-.01?(e=z(t,0,r),n=z(t,i,r)):(e=a([0,0],s),n=a([i,0],s)),[c,u,n,e]}function z(t,e,n){var r=t.pixelUnprojectionMatrix,i=h(r,[e,0,1,1]),o=h(r,[e,t.height,1,1]),a=(n*t.distanceScales.unitsPerMeter[2]-i[2])/(o[2]-i[2]),s=M(g.c([],i,o,a));return s[2]=n,s}var N=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{width:1,height:1},n=e.width,r=e.height,i=e.latitude,o=void 0===i?0:i,a=e.longitude,s=void 0===a?0:a,u=e.zoom,l=void 0===u?0:u,h=e.pitch,p=void 0===h?0:h,f=e.bearing,d=void 0===f?0:f,v=e.altitude,g=void 0===v?null:v,b=e.fovy,y=void 0===b?null:b,O=e.position,w=void 0===O?null:O,j=e.nearZMultiplier,_=void 0===j?.02:j,M=e.farZMultiplier,C=void 0===M?1.01:M;Object(c.a)(this,t),n=n||1,r=r||1,null===y&&null===g?y=k(g=1.5):null===y?y=k(g):null===g&&(g=D(y));var I=E(l);g=Math.max(.75,g);var R=S({longitude:s,latitude:o}),A=P([s,o]);A[2]=0,w&&m.a(A,A,m.b([],w,R.unitsPerMeter)),this.projectionMatrix=T({width:n,height:r,pitch:p,fovy:y,nearZMultiplier:_,farZMultiplier:C}),this.viewMatrix=x({height:r,scale:I,center:A,pitch:p,bearing:d,altitude:g}),this.width=n,this.height=r,this.scale=I,this.latitude=o,this.longitude=s,this.zoom=l,this.pitch=p,this.bearing=d,this.altitude=g,this.fovy=y,this.center=A,this.meterOffset=w||[0,0,0],this.distanceScales=R,this._initMatrices(),this.equals=this.equals.bind(this),this.project=this.project.bind(this),this.unproject=this.unproject.bind(this),this.projectPosition=this.projectPosition.bind(this),this.unprojectPosition=this.unprojectPosition.bind(this),Object.freeze(this)}return Object(u.a)(t,[{key:"_initMatrices",value:function(){var t=this.width,e=this.height,n=this.projectionMatrix,r=this.viewMatrix,i=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];v.c(i,i,n),v.c(i,i,r),this.viewProjectionMatrix=i;var o=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];v.g(o,o,[t/2,-e/2,1]),v.h(o,o,[1,-1,0]),v.c(o,o,i);var a=v.b([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],o);if(!a)throw new Error("Pixel project matrix not invertible");this.pixelProjectionMatrix=o,this.pixelUnprojectionMatrix=a}},{key:"equals",value:function(e){return e instanceof t&&(e.width===this.width&&e.height===this.height&&v.a(e.projectionMatrix,this.projectionMatrix)&&v.a(e.viewMatrix,this.viewMatrix))}},{key:"project",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.topLeft,r=void 0===n||n,i=this.projectPosition(t),o=C(i,this.pixelProjectionMatrix),a=Object(s.a)(o,2),c=a[0],u=a[1],l=r?u:this.height-u;return 2===t.length?[c,l]:[c,l,o[2]]}},{key:"unproject",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.topLeft,r=void 0===n||n,i=e.targetZ,o=void 0===i?void 0:i,a=Object(s.a)(t,3),c=a[0],u=a[1],l=a[2],h=r?u:this.height-u,p=o&&o*this.distanceScales.unitsPerMeter[2],f=I([c,h,l],this.pixelUnprojectionMatrix,p),d=this.unprojectPosition(f),v=Object(s.a)(d,3),g=v[0],m=v[1],b=v[2];return Number.isFinite(l)?[g,m,b]:Number.isFinite(o)?[g,m,o]:[g,m]}},{key:"projectPosition",value:function(t){var e=P(t),n=Object(s.a)(e,2);return[n[0],n[1],(t[2]||0)*this.distanceScales.unitsPerMeter[2]]}},{key:"unprojectPosition",value:function(t){var e=M(t),n=Object(s.a)(e,2);return[n[0],n[1],(t[2]||0)*this.distanceScales.metersPerUnit[2]]}},{key:"projectFlat",value:function(t){return P(t)}},{key:"unprojectFlat",value:function(t){return M(t)}},{key:"getMapCenterByLngLatPosition",value:function(t){var e=t.lngLat,n=I(t.pos,this.pixelUnprojectionMatrix),r=P(e),i=g.a([],r,g.d([],n));return M(g.a([],this.center,i))}},{key:"getLocationAtPoint",value:function(t){var e=t.lngLat,n=t.pos;return this.getMapCenterByLngLatPosition({lngLat:e,pos:n})}},{key:"fitBounds",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=this.width,i=this.height,o=R(Object.assign({width:r,height:i,bounds:e},n)),a=o.longitude,s=o.latitude,c=o.zoom;return new t({width:r,height:i,longitude:a,latitude:s,zoom:c})}},{key:"getBounds",value:function(t){var e=this.getBoundingRegion(t),n=Math.min.apply(Math,Object(r.a)(e.map((function(t){return t[0]})))),i=Math.max.apply(Math,Object(r.a)(e.map((function(t){return t[0]}))));return[[n,Math.min.apply(Math,Object(r.a)(e.map((function(t){return t[1]}))))],[i,Math.max.apply(Math,Object(r.a)(e.map((function(t){return t[1]}))))]]}},{key:"getBoundingRegion",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return L(this,t.z||0)}}]),t}();function F(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return Z(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Z(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,i=function(){};return{s:i,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,s=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return a=t.done,t},e:function(t){s=!0,o=t},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw o}}}}function Z(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var V=["longitude","latitude","zoom"],B={curve:1.414,speed:1.2};function U(t,e,n){var r=(n=Object.assign({},B,n)).curve,i=t.zoom,o=[t.longitude,t.latitude],a=E(i),s=e.zoom,c=[e.longitude,e.latitude],u=E(s-i),l=P(o),h=P(c),p=g.f([],h,l),f=Math.max(t.width,t.height),d=f/u,v=g.b(p)*a,m=Math.max(v,.01),b=r*r,y=(d*d-f*f+b*b*m*m)/(2*f*b*m),O=(d*d-f*f-b*b*m*m)/(2*d*b*m),w=Math.log(Math.sqrt(y*y+1)-y),j=Math.log(Math.sqrt(O*O+1)-O);return{startZoom:i,startCenterXY:l,uDelta:p,w0:f,u1:v,S:(j-w)/r,rho:r,rho2:b,r0:w,r1:j}}var q=n("iXzu"),W=n("Z2JM"),H=n("bhPm"),X=n.n(H);function Y(t){return Array.isArray(t)||ArrayBuffer.isView(t)}function G(t,e){if(t===e)return!0;if(Y(t)&&Y(e)){if(t.length!==e.length)return!1;for(var n=0;n<t.length;++n)if(!G(t[n],e[n]))return!1;return!0}return Math.abs(t-e)<=1e-7}function K(t,e,n){return Math.max(e,Math.min(n,t))}function Q(t,e,n){return Y(t)?t.map((function(t,r){return Q(t,e[r],n)})):n*e+(1-n)*t}function J(t,e){if(!t)throw new Error(e||"react-map-gl: assertion failed.")}function $(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function tt(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?$(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):$(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var et={minZoom:0,maxZoom:24,minPitch:0,maxPitch:85},nt=0,rt=0,it=1.5,ot=function(){function t(t){var e=t.width,n=t.height,r=t.latitude,i=t.longitude,o=t.zoom,a=t.bearing,s=void 0===a?rt:a,c=t.pitch,u=void 0===c?nt:c,l=t.altitude,h=void 0===l?it:l,p=t.maxZoom,f=void 0===p?et.maxZoom:p,d=t.minZoom,v=void 0===d?et.minZoom:d,g=t.maxPitch,m=void 0===g?et.maxPitch:g,b=t.minPitch,y=void 0===b?et.minPitch:b,O=t.transitionDuration,w=t.transitionEasing,j=t.transitionInterpolator,E=t.transitionInterruption,_=t.startPanLngLat,P=t.startZoomLngLat,M=t.startRotatePos,S=t.startBearing,x=t.startPitch,T=t.startZoom;J(Number.isFinite(e),"`width` must be supplied"),J(Number.isFinite(n),"`height` must be supplied"),J(Number.isFinite(i),"`longitude` must be supplied"),J(Number.isFinite(r),"`latitude` must be supplied"),J(Number.isFinite(o),"`zoom` must be supplied"),this._viewportProps=this._applyConstraints({width:e,height:n,latitude:r,longitude:i,zoom:o,bearing:s,pitch:u,altitude:h,maxZoom:f,minZoom:v,maxPitch:m,minPitch:y,transitionDuration:O,transitionEasing:w,transitionInterpolator:j,transitionInterruption:E}),this._state={startPanLngLat:_,startZoomLngLat:P,startRotatePos:M,startBearing:S,startPitch:x,startZoom:T}}var e=t.prototype;return e.getViewportProps=function(){return this._viewportProps},e.getState=function(){return this._state},e.panStart=function(t){var e=t.pos;return this._getUpdatedMapState({startPanLngLat:this._unproject(e)})},e.pan=function(t){var e=t.pos,n=t.startPos,r=this._state.startPanLngLat||this._unproject(n);if(!r)return this;var i=this._calculateNewLngLat({startPanLngLat:r,pos:e}),o=i[0],a=i[1];return this._getUpdatedMapState({longitude:o,latitude:a})},e.panEnd=function(){return this._getUpdatedMapState({startPanLngLat:null})},e.rotateStart=function(t){var e=t.pos;return this._getUpdatedMapState({startRotatePos:e,startBearing:this._viewportProps.bearing,startPitch:this._viewportProps.pitch})},e.rotate=function(t){var e,n=t.pos,r=t.deltaAngleX,i=void 0===r?0:r,o=t.deltaAngleY,a=void 0===o?0:o,s=this._state,c=s.startRotatePos,u=s.startBearing,l=s.startPitch;return Number.isFinite(u)&&Number.isFinite(l)?(e=n?this._calculateNewPitchAndBearing(tt(tt({},this._getRotationParams(n,c)),{},{startBearing:u,startPitch:l})):{bearing:u+i,pitch:l+a},this._getUpdatedMapState(e)):this},e.rotateEnd=function(){return this._getUpdatedMapState({startBearing:null,startPitch:null})},e.zoomStart=function(t){var e=t.pos;return this._getUpdatedMapState({startZoomLngLat:this._unproject(e),startZoom:this._viewportProps.zoom})},e.zoom=function(t){var e=t.pos,n=t.startPos,r=t.scale;J(r>0,"`scale` must be a positive number");var i=this._state,o=i.startZoom,a=i.startZoomLngLat;Number.isFinite(o)||(o=this._viewportProps.zoom,a=this._unproject(n)||this._unproject(e)),J(a,"`startZoomLngLat` prop is required for zoom behavior to calculate where to position the map.");var s=this._calculateNewZoom({scale:r,startZoom:o||0}),c=new N(Object.assign({},this._viewportProps,{zoom:s})).getMapCenterByLngLatPosition({lngLat:a,pos:e}),u=c[0],l=c[1];return this._getUpdatedMapState({zoom:s,longitude:u,latitude:l})},e.zoomEnd=function(){return this._getUpdatedMapState({startZoomLngLat:null,startZoom:null})},e._getUpdatedMapState=function(e){return new t(Object.assign({},this._viewportProps,this._state,e))},e._applyConstraints=function(t){var e=t.maxZoom,n=t.minZoom,r=t.zoom;t.zoom=K(r,n,e);var i=t.maxPitch,o=t.minPitch,a=t.pitch;return t.pitch=K(a,o,i),Object.assign(t,function(t){var e=t.width,n=t.height,r=t.longitude,i=t.latitude,o=t.zoom,a=t.pitch,s=void 0===a?0:a,c=t.bearing,u=void 0===c?0:c;(r<-180||r>180)&&(r=p(r+180,360)-180),(u<-180||u>180)&&(u=p(u+180,360)-180);var l=d(n/512);if(o<=l)o=l,i=0;else{var h=n/2/Math.pow(2,o),f=M([0,h])[1];if(i<f)i=f;else{var v=M([0,512-h])[1];i>v&&(i=v)}}return{width:e,height:n,longitude:r,latitude:i,zoom:o,pitch:s,bearing:u}}(t)),t},e._unproject=function(t){var e=new N(this._viewportProps);return t&&e.unproject(t)},e._calculateNewLngLat=function(t){var e=t.startPanLngLat,n=t.pos;return new N(this._viewportProps).getMapCenterByLngLatPosition({lngLat:e,pos:n})},e._calculateNewZoom=function(t){var e=t.scale,n=t.startZoom,r=this._viewportProps,i=r.maxZoom,o=r.minZoom;return K(n+Math.log2(e),o,i)},e._calculateNewPitchAndBearing=function(t){var e=t.deltaScaleX,n=t.deltaScaleY,r=t.startBearing,i=t.startPitch;n=K(n,-1,1);var o=this._viewportProps,a=o.minPitch,s=o.maxPitch,c=i;return n>0?c=i+n*(s-i):n<0&&(c=i-n*(a-i)),{pitch:c,bearing:r+180*e}},e._getRotationParams=function(t,e){var n=t[0]-e[0],r=t[1]-e[1],i=t[1],o=e[1],a=this._viewportProps,s=a.width,c=a.height,u=n/s,l=0;return r>0?Math.abs(c-o)>5&&(l=r/(o-c)*1.2):r<0&&o>5&&(l=1-i/o),{deltaScaleX:u,deltaScaleY:l=Math.min(1,Math.max(-1,l))}},t}();function at(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function st(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?at(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):at(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var ct=Object(o.createContext)({viewport:null,map:null,container:null,onViewportChange:null,onViewStateChange:null,eventManager:null}),ut=ct.Provider;ct.Provider=function(t){var e=t.value,n=t.children,r=Object(o.useState)(null),i=r[0],a=r[1],s=Object(o.useContext)(ct);return e=st(st({setMap:a},s),{},{map:s&&s.map||i},e),o.createElement(ut,{value:e},n)};var lt=ct,ht="undefined"!=typeof window?o.useLayoutEffect:o.useEffect;function pt(t,e){var n=e.longitude,r=e.latitude;return t&&t.queryTerrainElevation&&t.queryTerrainElevation([n,r])||0}function ft(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function dt(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?ft(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ft(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var vt="A valid API access token is required to use Mapbox data";function gt(t){var e=t.map,n=t.props,r=t.width,i=t.height,o=dt(dt(dt({},n),n.viewState),{},{width:r,height:i});return o.position=[0,0,pt(e,o)],new N(o)}var mt={position:"absolute",width:"100%",height:"100%",overflow:"hidden"},bt=Object.assign({},W.a.defaultProps,{disableTokenWarning:!1,visible:!0,onResize:function(){},className:"",style:null,visibilityConstraints:et});function yt(){return o.createElement("div",{key:"warning",id:"no-token-warning",style:{position:"absolute",left:0,top:0}},o.createElement("h3",{key:"header"},vt),o.createElement("div",{key:"text"},"For information on setting up your basemap, read"),o.createElement("a",{key:"link",href:"https://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens"},"Note on Map Tokens"))}var Ot=Object(o.forwardRef)((function(t,e){var n=Object(o.useState)(!0),r=n[0],i=n[1],a=Object(o.useState)({width:0,height:0}),s=a[0],c=a[1],u=Object(o.useRef)(null),l=Object(o.useRef)(null),h=Object(o.useRef)(null),p=Object(o.useRef)(null),f=Object(o.useContext)(lt);ht((function(){if(Ot.supported()){var e=new W.a(dt(dt(dt({},t),s),{},{mapboxgl:X.a,container:l.current,onError:function(e){401===(e.error&&e.error.status||e.status)&&r&&(console.error(vt),i(!1)),t.onError(e)}}));u.current=e,f&&f.setMap&&f.setMap(e.getMap());var n=new q.a((function(e){if(e[0].contentRect){var n=e[0].contentRect,r=n.width,i=n.height;c({width:r,height:i}),t.onResize({width:r,height:i})}}));return n.observe(h.current),function(){e.finalize(),u.current=null,n.disconnect()}}}),[]),ht((function(){u.current&&u.current.setProps(dt(dt({},t),s))}));var d=u.current&&u.current.getMap();Object(o.useImperativeHandle)(e,(function(){return function(t){return{getMap:function(){return t.current&&t.current.getMap()},queryRenderedFeatures:function(e,n){void 0===n&&(n={});var r=t.current&&t.current.getMap();return r&&r.queryRenderedFeatures(e,n)}}}(u)}),[]);var v=Object(o.useCallback)((function(t){var e=t.target;e===p.current&&e.scrollTo(0,0)}),[]),g=d&&o.createElement(ut,{value:dt(dt({},f),{},{viewport:f.viewport||gt(dt({map:d,props:t},s)),map:d,container:f.container||h.current})},o.createElement("div",{key:"map-overlays",className:"overlays",ref:p,style:mt,onScroll:v},t.children)),m=t.className,b=t.width,y=t.height,O=t.style,w=t.visibilityConstraints,j=Object.assign({position:"relative"},O,{width:b,height:y}),E=t.visible&&function(t,e){for(var n in void 0===e&&(e=et),e){var r=n.slice(0,3),i=(o=n.slice(3))[0].toLowerCase()+o.slice(1);if("min"===r&&t[i]<e[n])return!1;if("max"===r&&t[i]>e[n])return!1}var o;return!0}(t.viewState||t,w),_=Object.assign({},mt,{visibility:E?"inherit":"hidden"});return o.createElement("div",{key:"map-container",ref:h,style:j},o.createElement("div",{key:"map-mapbox",ref:l,style:_,className:m}),g,!r&&!t.disableTokenWarning&&o.createElement(yt,null))}));Ot.supported=function(){return X.a&&X.a.supported()},Ot.defaultProps=bt;var wt=Ot;function jt(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return Et(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Et(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function Et(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var _t=function(){function t(){this.propNames=[]}var e=t.prototype;return e.arePropsEqual=function(t,e){for(var n,r=jt(this.propNames||[]);!(n=r()).done;){var i=n.value;if(!G(t[i],e[i]))return!1}return!0},e.initializeProps=function(t,e){return{start:t,end:e}},e.interpolateProps=function(t,e,n){J(!1,"interpolateProps is not implemented")},e.getDuration=function(t,e){return e.transitionDuration},t}(),Pt=n("dI71"),Mt={longitude:1,bearing:1};function St(t){return Number.isFinite(t)||Array.isArray(t)}function xt(t,e,n){return function(t){return t in Mt}(t)&&Math.abs(n-e)>180&&(n=n<0?n+360:n-360),n}function Tt(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return kt(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return kt(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function kt(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var Dt=["longitude","latitude","zoom","bearing","pitch"],Ct=["latitude","longitude","zoom","width","height"],It=["bearing","pitch"],Rt={speed:1.2,curve:1.414},At=function(t){function e(e){var n;return void 0===e&&(e={}),(n=t.call(this)||this).propNames=Dt,n.props=Object.assign({},Rt,e),n}Object(Pt.a)(e,t);var n=e.prototype;return n.initializeProps=function(t,e){for(var n,r={},i={},o=Tt(Ct);!(n=o()).done;){var a=n.value,s=t[a],c=e[a];J(St(s)&&St(c),a+" must be supplied for transition"),r[a]=s,i[a]=xt(a,s,c)}for(var u,l=Tt(It);!(u=l()).done;){var h=u.value,p=t[h]||0,f=e[h]||0;r[h]=p,i[h]=xt(h,p,f)}return{start:r,end:i}},n.interpolateProps=function(t,e,n){for(var r,i=function(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},i={},o=U(t,e,r),a=o.startZoom,s=o.startCenterXY,c=o.uDelta,u=o.w0,l=o.u1,h=o.S,p=o.rho,d=o.rho2,v=o.r0;if(l<.01){var m,b=F(V);try{for(b.s();!(m=b.n()).done;){var y=m.value,O=t[y],w=e[y];i[y]=f(O,w,n)}}catch(D){b.e(D)}finally{b.f()}return i}var j=n*h,E=Math.cosh(v)/Math.cosh(v+p*j),P=u*((Math.cosh(v)*Math.tanh(v+p*j)-Math.sinh(v))/d)/l,S=1/E,x=a+_(S),T=g.e([],c,P);g.a(T,T,s);var k=M(T);return i.longitude=k[0],i.latitude=k[1],i.zoom=x,i}(t,e,n,this.props),o=Tt(It);!(r=o()).done;){var a=r.value;i[a]=Q(t[a],e[a],n)}return i},n.getDuration=function(t,e){var n=e.transitionDuration;return"auto"===n&&(n=function(t,e){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r=Object.assign({},B,r),o=i.screenSpeed,a=i.speed,s=i.maxDuration,c=U(t,e,r),u=c.S,l=c.rho,h=1e3*u;return n=Number.isFinite(o)?h/(o/l):h/a,Number.isFinite(s)&&n>s?0:n}(t,e,this.props)),n},e}(_t);function Lt(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return zt(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return zt(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function zt(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var Nt=["longitude","latitude","zoom","bearing","pitch"],Ft=function(t){function e(e){var n;return void 0===e&&(e={}),n=t.call(this)||this,Array.isArray(e)&&(e={transitionProps:e}),n.propNames=e.transitionProps||Nt,e.around&&(n.around=e.around),n}Object(Pt.a)(e,t);var n=e.prototype;return n.initializeProps=function(t,e){var n={},r={};if(this.around){n.around=this.around;var i=new N(t).unproject(this.around);Object.assign(r,e,{around:new N(e).project(i),aroundLngLat:i})}for(var o,a=Lt(this.propNames);!(o=a()).done;){var s=o.value,c=t[s],u=e[s];J(St(c)&&St(u),s+" must be supplied for transition"),n[s]=c,r[s]=xt(s,c,u)}return{start:n,end:r}},n.interpolateProps=function(t,e,n){for(var r,i={},o=Lt(this.propNames);!(r=o()).done;){var a=r.value;i[a]=Q(t[a],e[a],n)}if(e.around){var s=new N(Object.assign({},e,i)).getMapCenterByLngLatPosition({lngLat:e.aroundLngLat,pos:Q(t.around,e.around,n)}),c=s[0],u=s[1];i.longitude=c,i.latitude=u}return i},e}(_t),Zt=function(){};var Vt={BREAK:1,SNAP_TO_END:2,IGNORE:3,UPDATE:4},Bt={transitionDuration:0,transitionEasing:function(t){return t},transitionInterpolator:new Ft,transitionInterruption:Vt.BREAK,onTransitionStart:Zt,onTransitionInterrupt:Zt,onTransitionEnd:Zt},Ut=function(){function t(t){var e=this;void 0===t&&(t={}),this._animationFrame=null,this._onTransitionFrame=function(){e._animationFrame=requestAnimationFrame(e._onTransitionFrame),e._updateViewport()},this.props=null,this.onViewportChange=t.onViewportChange||Zt,this.onStateChange=t.onStateChange||Zt,this.time=t.getTime||Date.now}var e=t.prototype;return e.getViewportInTransition=function(){return this._animationFrame?this.state.propsInTransition:null},e.processViewportChange=function(t){var e=this.props;if(this.props=t,!e||this._shouldIgnoreViewportChange(e,t))return!1;if(this._isTransitionEnabled(t)){var n=Object.assign({},e),r=Object.assign({},t);if(this._isTransitionInProgress()&&(e.onTransitionInterrupt(),this.state.interruption===Vt.SNAP_TO_END?Object.assign(n,this.state.endProps):Object.assign(n,this.state.propsInTransition),this.state.interruption===Vt.UPDATE)){var i=this.time(),o=(i-this.state.startTime)/this.state.duration;r.transitionDuration=this.state.duration-(i-this.state.startTime),r.transitionEasing=function(t,e){var n=t(e);return function(r){return 1/(1-n)*(t(r*(1-e)+e)-n)}}(this.state.easing,o),r.transitionInterpolator=n.transitionInterpolator}return r.onTransitionStart(),this._triggerTransition(n,r),!0}return this._isTransitionInProgress()&&(e.onTransitionInterrupt(),this._endTransition()),!1},e._isTransitionInProgress=function(){return Boolean(this._animationFrame)},e._isTransitionEnabled=function(t){var e=t.transitionDuration,n=t.transitionInterpolator;return(e>0||"auto"===e)&&Boolean(n)},e._isUpdateDueToCurrentTransition=function(t){return!!this.state.propsInTransition&&this.state.interpolator.arePropsEqual(t,this.state.propsInTransition)},e._shouldIgnoreViewportChange=function(t,e){return!t||(this._isTransitionInProgress()?this.state.interruption===Vt.IGNORE||this._isUpdateDueToCurrentTransition(e):!this._isTransitionEnabled(e)||e.transitionInterpolator.arePropsEqual(t,e))},e._triggerTransition=function(t,e){J(this._isTransitionEnabled(e)),this._animationFrame&&cancelAnimationFrame(this._animationFrame);var n=e.transitionInterpolator,r=n.getDuration?n.getDuration(t,e):e.transitionDuration;if(0!==r){var i=e.transitionInterpolator.initializeProps(t,e),o={inTransition:!0,isZooming:t.zoom!==e.zoom,isPanning:t.longitude!==e.longitude||t.latitude!==e.latitude,isRotating:t.bearing!==e.bearing||t.pitch!==e.pitch};this.state={duration:r,easing:e.transitionEasing,interpolator:e.transitionInterpolator,interruption:e.transitionInterruption,startTime:this.time(),startProps:i.start,endProps:i.end,animation:null,propsInTransition:{}},this._onTransitionFrame(),this.onStateChange(o)}},e._endTransition=function(){this._animationFrame&&(cancelAnimationFrame(this._animationFrame),this._animationFrame=null),this.onStateChange({inTransition:!1,isZooming:!1,isPanning:!1,isRotating:!1})},e._updateViewport=function(){var t=this.time(),e=this.state,n=e.startTime,r=e.duration,i=e.easing,o=e.interpolator,a=e.startProps,s=e.endProps,c=!1,u=(t-n)/r;u>=1&&(u=1,c=!0),u=i(u);var l=o.interpolateProps(a,s,u),h=new ot(Object.assign({},this.props,l));this.state.propsInTransition=h.getViewportProps(),this.onViewportChange(this.state.propsInTransition,this.props),c&&(this._endTransition(),this.props.onTransitionEnd())},t}();Ut.defaultProps=Bt;var qt,Wt,Ht=n("QFtD"),Xt=n.n(Ht),Yt={mousedown:1,mousemove:2,mouseup:4};qt=Xt.a.PointerEventInput,Wt=qt.prototype.handler,qt.prototype.handler=function(t){var e=this.store;t.button>0&&(function(t,e){for(var n=0;n<t.length;n++)if(e(t[n]))return!0;return!1}(e,(function(e){return e.pointerId===t.pointerId}))||e.push(t)),Wt.call(this,t)},Xt.a.MouseInput.prototype.handler=function(t){var e=Yt[t.type];1&e&&t.button>=0&&(this.pressed=!0),2&e&&0===t.which&&(e=4),this.pressed&&(4&e&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:"mouse",srcEvent:t}))};var Gt=Xt.a.Manager,Kt=Xt.a,Qt=Kt?[[Kt.Pan,{event:"tripan",pointers:3,threshold:0,enable:!1}],[Kt.Rotate,{enable:!1}],[Kt.Pinch,{enable:!1}],[Kt.Swipe,{enable:!1}],[Kt.Pan,{threshold:0,enable:!1}],[Kt.Press,{enable:!1}],[Kt.Tap,{event:"doubletap",taps:2,enable:!1}],[Kt.Tap,{event:"anytap",enable:!1}],[Kt.Tap,{enable:!1}]]:null,Jt={tripan:["rotate","pinch","pan"],rotate:["pinch"],pinch:["pan"],pan:["press","doubletap","anytap","tap"],doubletap:["anytap"],anytap:["tap"]},$t={doubletap:["tap"]},te={pointerdown:"pointerdown",pointermove:"pointermove",pointerup:"pointerup",touchstart:"pointerdown",touchmove:"pointermove",touchend:"pointerup",mousedown:"pointerdown",mousemove:"pointermove",mouseup:"pointerup"},ee=["keydown","keyup"],ne=["mousedown","mousemove","mouseup","mouseover","mouseout","mouseleave"],re=["wheel","mousewheel","DOMMouseScroll"],ie={tap:"tap",anytap:"anytap",doubletap:"doubletap",press:"press",pinch:"pinch",pinchin:"pinch",pinchout:"pinch",pinchstart:"pinch",pinchmove:"pinch",pinchend:"pinch",pinchcancel:"pinch",rotate:"rotate",rotatestart:"rotate",rotatemove:"rotate",rotateend:"rotate",rotatecancel:"rotate",tripan:"tripan",tripanstart:"tripan",tripanmove:"tripan",tripanup:"tripan",tripandown:"tripan",tripanleft:"tripan",tripanright:"tripan",tripanend:"tripan",tripancancel:"tripan",pan:"pan",panstart:"pan",panmove:"pan",panup:"pan",pandown:"pan",panleft:"pan",panright:"pan",panend:"pan",pancancel:"pan",swipe:"swipe",swipeleft:"swipe",swiperight:"swipe",swipeup:"swipe",swipedown:"swipe"},oe={click:"tap",anyclick:"anytap",dblclick:"doubletap",mousedown:"pointerdown",mousemove:"pointermove",mouseup:"pointerup",mouseover:"pointerover",mouseout:"pointerout",mouseleave:"pointerleave"},ae=n("ExcP"),se=-1!==ae.b.indexOf("firefox"),ce=re,ue=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},i),this.events=ce.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent,!!ae.a&&{passive:!1})}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"wheel"===t&&(this.options.enable=e)}},{key:"handleEvent",value:function(t){if(this.options.enable){var e=t.deltaY;ae.c.WheelEvent&&(se&&t.deltaMode===ae.c.WheelEvent.DOM_DELTA_PIXEL&&(e/=ae.c.devicePixelRatio),t.deltaMode===ae.c.WheelEvent.DOM_DELTA_LINE&&(e*=40));var n={x:t.clientX,y:t.clientY};0!==e&&e%4.000244140625==0&&(e=Math.floor(e/4.000244140625)),t.shiftKey&&e&&(e*=.25),this._onWheel(t,-e,n)}}},{key:"_onWheel",value:function(t,e,n){this.callback({type:"wheel",center:n,delta:e,srcEvent:t,pointerType:"mouse",target:t.target})}}]),t}(),le=ne,he=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.pressed=!1,this.options=Object.assign({enable:!0},i),this.enableMoveEvent=this.options.enable,this.enableLeaveEvent=this.options.enable,this.enableOutEvent=this.options.enable,this.enableOverEvent=this.options.enable,this.events=le.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent)}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"pointermove"===t&&(this.enableMoveEvent=e),"pointerover"===t&&(this.enableOverEvent=e),"pointerout"===t&&(this.enableOutEvent=e),"pointerleave"===t&&(this.enableLeaveEvent=e)}},{key:"handleEvent",value:function(t){this.handleOverEvent(t),this.handleOutEvent(t),this.handleLeaveEvent(t),this.handleMoveEvent(t)}},{key:"handleOverEvent",value:function(t){this.enableOverEvent&&"mouseover"===t.type&&this.callback({type:"pointerover",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleOutEvent",value:function(t){this.enableOutEvent&&"mouseout"===t.type&&this.callback({type:"pointerout",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleLeaveEvent",value:function(t){this.enableLeaveEvent&&"mouseleave"===t.type&&this.callback({type:"pointerleave",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleMoveEvent",value:function(t){if(this.enableMoveEvent)switch(t.type){case"mousedown":t.button>=0&&(this.pressed=!0);break;case"mousemove":0===t.which&&(this.pressed=!1),this.pressed||this.callback({type:"pointermove",srcEvent:t,pointerType:"mouse",target:t.target});break;case"mouseup":this.pressed=!1}}}]),t}(),pe=ee,fe=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},i),this.enableDownEvent=this.options.enable,this.enableUpEvent=this.options.enable,this.events=pe.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),e.tabIndex=i.tabIndex||0,e.style.outline="none",this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent)}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"keydown"===t&&(this.enableDownEvent=e),"keyup"===t&&(this.enableUpEvent=e)}},{key:"handleEvent",value:function(t){var e=t.target||t.srcElement;"INPUT"===e.tagName&&"text"===e.type||"TEXTAREA"===e.tagName||(this.enableDownEvent&&"keydown"===t.type&&this.callback({type:"keydown",srcEvent:t,key:t.key,target:t.target}),this.enableUpEvent&&"keyup"===t.type&&this.callback({type:"keyup",srcEvent:t,key:t.key,target:t.target}))}}]),t}(),de=function(){function t(e,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},r),this.handleEvent=this.handleEvent.bind(this),e.addEventListener("contextmenu",this.handleEvent)}return Object(u.a)(t,[{key:"destroy",value:function(){this.element.removeEventListener("contextmenu",this.handleEvent)}},{key:"enableEventType",value:function(t,e){"contextmenu"===t&&(this.options.enable=e)}},{key:"handleEvent",value:function(t){this.options.enable&&this.callback({type:"contextmenu",center:{x:t.clientX,y:t.clientY},srcEvent:t,pointerType:"mouse",target:t.target})}}]),t}(),ve=n("U8pU"),ge={pointerdown:1,pointermove:2,pointerup:4,mousedown:1,mousemove:2,mouseup:4};var me={srcElement:"root",priority:0},be=function(){function t(e){Object(c.a)(this,t),this.eventManager=e,this.handlers=[],this.handlersByElement=new Map,this.handleEvent=this.handleEvent.bind(this),this._active=!1}return Object(u.a)(t,[{key:"isEmpty",value:function(){return!this._active}},{key:"add",value:function(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=arguments.length>4&&void 0!==arguments[4]&&arguments[4],o=this.handlers,a=this.handlersByElement;n&&("object"!==Object(ve.a)(n)||n.addEventListener)&&(n={srcElement:n}),n=n?Object.assign({},me,n):me;var s=a.get(n.srcElement);s||(s=[],a.set(n.srcElement,s));var c={type:t,handler:e,srcElement:n.srcElement,priority:n.priority};r&&(c.once=!0),i&&(c.passive=!0),o.push(c),this._active=this._active||!c.passive;for(var u=s.length-1;u>=0&&!(s[u].priority>=c.priority);)u--;s.splice(u+1,0,c)}},{key:"remove",value:function(t,e){for(var n=this.handlers,r=this.handlersByElement,i=n.length-1;i>=0;i--){var o=n[i];if(o.type===t&&o.handler===e){n.splice(i,1);var a=r.get(o.srcElement);a.splice(a.indexOf(o),1),0===a.length&&r.delete(o.srcElement)}}this._active=n.some((function(t){return!t.passive}))}},{key:"handleEvent",value:function(t){if(!this.isEmpty()){for(var e=this._normalizeEvent(t),n=t.srcEvent.target;n&&n!==e.rootElement;){if(this._emit(e,n),e.handled)return;n=n.parentNode}this._emit(e,"root")}}},{key:"_emit",value:function(t,e){var n=this.handlersByElement.get(e);if(n){for(var r=!1,i=function(){t.handled=!0},o=function(){t.handled=!0,r=!0},a=[],s=0;s<n.length;s++){var c=n[s],u=c.type,l=c.handler,h=c.once;if(l(Object.assign({},t,{type:u,stopPropagation:i,stopImmediatePropagation:o})),h&&a.push(n[s]),r)break}for(var p=0;p<a.length;p++){var f=a[p],d=f.type,v=f.handler;this.remove(d,v)}}}},{key:"_normalizeEvent",value:function(t){var e=this.eventManager.element;return Object.assign({},t,function(t){var e=ge[t.srcEvent.type];if(!e)return null;var n=t.srcEvent,r=n.buttons,i=n.button,o=n.which,a=!1,s=!1,c=!1;return 4===e||2===e&&!Number.isFinite(r)?(a=1===o,s=2===o,c=3===o):2===e?(a=Boolean(1&r),s=Boolean(4&r),c=Boolean(2&r)):1===e&&(a=0===i,s=1===i,c=2===i),{leftButton:a,middleButton:s,rightButton:c}}(t),function(t,e){var n=t.srcEvent;if(!t.center&&!Number.isFinite(n.clientX))return null;var r=t.center||{x:n.clientX,y:n.clientY},i=e.getBoundingClientRect(),o=i.width/e.offsetWidth,a=i.height/e.offsetHeight;return{center:r,offsetCenter:{x:(r.x-i.left-e.clientLeft)/o,y:(r.y-i.top-e.clientTop)/a}}}(t,e),{handled:!1,rootElement:e})}}]),t}();function ye(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return Oe(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Oe(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,i=function(){};return{s:i,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,s=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return a=t.done,t},e:function(t){s=!0,o=t},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw o}}}}function Oe(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var we={events:null,recognizers:null,recognizerOptions:{},Manager:Gt,touchAction:"none",tabIndex:0},je=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Object(c.a)(this,t),this.options=Object.assign({},we,n),this.events=new Map,this._onBasicInput=this._onBasicInput.bind(this),this._onOtherEvent=this._onOtherEvent.bind(this),this.setElement(e);var r=n.events;r&&this.on(r)}return Object(u.a)(t,[{key:"setElement",value:function(t){var e=this;if(this.element&&this.destroy(),this.element=t,t){var n=this.options,r=n.Manager;for(var i in this.manager=new r(t,{touchAction:n.touchAction,recognizers:n.recognizers||Qt}).on("hammer.input",this._onBasicInput),n.recognizers||Object.keys(Jt).forEach((function(t){var n=e.manager.get(t);n&&Jt[t].forEach((function(t){n.recognizeWith(t)}))})),n.recognizerOptions){var o=this.manager.get(i);if(o){var a=n.recognizerOptions[i];delete a.enable,o.set(a)}}this.wheelInput=new ue(t,this._onOtherEvent,{enable:!1}),this.moveInput=new he(t,this._onOtherEvent,{enable:!1}),this.keyInput=new fe(t,this._onOtherEvent,{enable:!1,tabIndex:n.tabIndex}),this.contextmenuInput=new de(t,this._onOtherEvent,{enable:!1});var c,u=ye(this.events);try{for(u.s();!(c=u.n()).done;){var l=Object(s.a)(c.value,2),h=l[0],p=l[1];p.isEmpty()||(this._toggleRecognizer(p.recognizerName,!0),this.manager.on(h,p.handleEvent))}}catch(f){u.e(f)}finally{u.f()}}}},{key:"destroy",value:function(){this.element&&(this.wheelInput.destroy(),this.moveInput.destroy(),this.keyInput.destroy(),this.contextmenuInput.destroy(),this.manager.destroy(),this.wheelInput=null,this.moveInput=null,this.keyInput=null,this.contextmenuInput=null,this.manager=null,this.element=null)}},{key:"on",value:function(t,e,n){this._addEventHandler(t,e,n,!1)}},{key:"once",value:function(t,e,n){this._addEventHandler(t,e,n,!0)}},{key:"watch",value:function(t,e,n){this._addEventHandler(t,e,n,!1,!0)}},{key:"off",value:function(t,e){this._removeEventHandler(t,e)}},{key:"_toggleRecognizer",value:function(t,e){var n=this.manager;if(n){var r=n.get(t);if(r&&r.options.enable!==e){r.set({enable:e});var i=$t[t];i&&!this.options.recognizers&&i.forEach((function(i){var o=n.get(i);e?(o.requireFailure(t),r.dropRequireFailure(i)):o.dropRequireFailure(t)}))}this.wheelInput.enableEventType(t,e),this.moveInput.enableEventType(t,e),this.keyInput.enableEventType(t,e),this.contextmenuInput.enableEventType(t,e)}}},{key:"_addEventHandler",value:function(t,e,n,r,i){if("string"==typeof t){var o=this.manager,a=this.events,s=oe[t]||t,c=a.get(s);c||(c=new be(this),a.set(s,c),c.recognizerName=ie[s]||s,o&&o.on(s,c.handleEvent)),c.add(t,e,n,r,i),c.isEmpty()||this._toggleRecognizer(c.recognizerName,!0)}else for(var u in n=e,t)this._addEventHandler(u,t[u],n,r,i)}},{key:"_removeEventHandler",value:function(t,e){if("string"==typeof t){var n=this.events,r=oe[t]||t,i=n.get(r);if(i&&(i.remove(t,e),i.isEmpty())){var o,a=i.recognizerName,s=!1,c=ye(n.values());try{for(c.s();!(o=c.n()).done;){var u=o.value;if(u.recognizerName===a&&!u.isEmpty()){s=!0;break}}}catch(h){c.e(h)}finally{c.f()}s||this._toggleRecognizer(a,!1)}}else for(var l in t)this._removeEventHandler(l,t[l])}},{key:"_onBasicInput",value:function(t){var e=t.srcEvent,n=te[e.type];n&&this.manager.emit(n,t)}},{key:"_onOtherEvent",value:function(t){this.manager.emit(t.type,t)}}]),t}();function Ee(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function _e(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Ee(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Ee(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var Pe={transitionDuration:0},Me={transitionDuration:300,transitionEasing:function(t){return t},transitionInterpolator:new Ft,transitionInterruption:Vt.BREAK},Se=function(t){return 1-(1-t)*(1-t)},xe=["wheel"],Te=["panstart","panmove","panend"],ke=["pinchstart","pinchmove","pinchend"],De=["tripanstart","tripanmove","tripanend"],Ce=["doubletap"],Ie=["keydown"],Re=function(){function t(){var t=this;this.events=[],this.scrollZoom=!0,this.dragPan=!0,this.dragRotate=!0,this.doubleClickZoom=!0,this.touchZoom=!0,this.touchRotate=!1,this.keyboard=!0,this._interactionState={isDragging:!1},this._events={},this._setInteractionState=function(e){Object.assign(t._interactionState,e),t.onStateChange&&t.onStateChange(t._interactionState)},this._onTransition=function(e,n){t.onViewportChange(e,t._interactionState,n)},this.handleEvent=this.handleEvent.bind(this),this._transitionManager=new Ut({onViewportChange:this._onTransition,onStateChange:this._setInteractionState})}var e=t.prototype;return e.handleEvent=function(t){this.mapState=this.getMapState();var e=this._eventStartBlocked;switch(t.type){case"panstart":return!e&&this._onPanStart(t);case"panmove":return this._onPan(t);case"panend":return this._onPanEnd(t);case"pinchstart":return!e&&this._onPinchStart(t);case"pinchmove":return this._onPinch(t);case"pinchend":return this._onPinchEnd(t);case"tripanstart":return!e&&this._onTriplePanStart(t);case"tripanmove":return this._onTriplePan(t);case"tripanend":return this._onTriplePanEnd(t);case"doubletap":return this._onDoubleTap(t);case"wheel":return this._onWheel(t);case"keydown":return this._onKeyDown(t);default:return!1}},e.getCenter=function(t){var e=t.offsetCenter;return[e.x,e.y]},e.isFunctionKeyPressed=function(t){var e=t.srcEvent;return Boolean(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)},e.blockEvents=function(t){var e=this,n=setTimeout((function(){e._eventStartBlocked===n&&(e._eventStartBlocked=null)}),t);this._eventStartBlocked=n},e.updateViewport=function(t,e,n){var r=this.mapState instanceof ot?this.mapState.getViewportProps():this.mapState,i=_e(_e({},t.getViewportProps()),e),o=Object.keys(i).some((function(t){return r[t]!==i[t]}));this._state=t.getState(),this._setInteractionState(n),o&&this.onViewportChange(i,this._interactionState,r)},e.getMapState=function(t){return new ot(_e(_e(_e({},this.mapStateProps),this._state),t))},e.isDragging=function(){return this._interactionState.isDragging},e.setOptions=function(t){var e=t.onViewportChange,n=t.onStateChange,r=t.eventManager,i=void 0===r?this.eventManager:r,o=t.isInteractive,a=void 0===o||o,s=t.scrollZoom,c=void 0===s?this.scrollZoom:s,u=t.dragPan,l=void 0===u?this.dragPan:u,h=t.dragRotate,p=void 0===h?this.dragRotate:h,f=t.doubleClickZoom,d=void 0===f?this.doubleClickZoom:f,v=t.touchZoom,g=void 0===v?this.touchZoom:v,m=t.touchRotate,b=void 0===m?this.touchRotate:m,y=t.keyboard,O=void 0===y?this.keyboard:y;this.onViewportChange=e,this.onStateChange=n;var w=this.mapStateProps||{},j=w.height!==t.height||w.width!==t.width;this.mapStateProps=t,j&&(this.mapState=w,this.updateViewport(new ot(t))),this._transitionManager.processViewportChange(t),this.eventManager!==i&&(this.eventManager=i,this._events={},this.toggleEvents(this.events,!0)),this.toggleEvents(xe,a&&Boolean(c)),this.toggleEvents(Te,a&&Boolean(l||p)),this.toggleEvents(ke,a&&Boolean(g||b)),this.toggleEvents(De,a&&Boolean(b)),this.toggleEvents(Ce,a&&Boolean(d)),this.toggleEvents(Ie,a&&Boolean(O)),this.scrollZoom=c,this.dragPan=l,this.dragRotate=p,this.doubleClickZoom=d,this.touchZoom=g,this.touchRotate=b,this.keyboard=O},e.toggleEvents=function(t,e){var n=this;this.eventManager&&t.forEach((function(t){n._events[t]!==e&&(n._events[t]=e,e?n.eventManager.on(t,n.handleEvent):n.eventManager.off(t,n.handleEvent))}))},e._onPanStart=function(t){var e=this.getCenter(t);this._panRotate=this.isFunctionKeyPressed(t)||t.rightButton;var n=this._panRotate?this.mapState.rotateStart({pos:e}):this.mapState.panStart({pos:e});return this.updateViewport(n,Pe,{isDragging:!0}),!0},e._onPan=function(t){return!!this.isDragging()&&(this._panRotate?this._onPanRotate(t):this._onPanMove(t))},e._onPanEnd=function(t){return!!this.isDragging()&&(this._panRotate?this._onPanRotateEnd(t):this._onPanMoveEnd(t))},e._onPanMove=function(t){if(!this.dragPan)return!1;var e=this.getCenter(t),n=this.mapState.pan({pos:e});return this.updateViewport(n,Pe,{isPanning:!0}),!0},e._onPanMoveEnd=function(t){if(this.dragPan){var e=this.dragPan.inertia,n=void 0===e?300:e;if(n&&t.velocity){var r=this.getCenter(t),i=[r[0]+t.velocityX*n/2,r[1]+t.velocityY*n/2],o=this.mapState.pan({pos:i}).panEnd();return this.updateViewport(o,_e(_e({},Me),{},{transitionDuration:n,transitionEasing:Se}),{isDragging:!1,isPanning:!0}),!0}}var a=this.mapState.panEnd();return this.updateViewport(a,null,{isDragging:!1,isPanning:!1}),!0},e._onPanRotate=function(t){if(!this.dragRotate)return!1;var e=this.getCenter(t),n=this.mapState.rotate({pos:e});return this.updateViewport(n,Pe,{isRotating:!0}),!0},e._onPanRotateEnd=function(t){if(this.dragRotate){var e=this.dragRotate.inertia,n=void 0===e?300:e;if(n&&t.velocity){var r=this.getCenter(t),i=[r[0]+t.velocityX*n/2,r[1]+t.velocityY*n/2],o=this.mapState.rotate({pos:i}).rotateEnd();return this.updateViewport(o,_e(_e({},Me),{},{transitionDuration:n,transitionEasing:Se}),{isDragging:!1,isRotating:!0}),!0}}var a=this.mapState.panEnd();return this.updateViewport(a,null,{isDragging:!1,isRotating:!1}),!0},e._onWheel=function(t){if(!this.scrollZoom)return!1;var e=this.scrollZoom,n=e.speed,r=void 0===n?.01:n,i=e.smooth,o=void 0!==i&&i;t.preventDefault();var a=this.getCenter(t),s=t.delta,c=2/(1+Math.exp(-Math.abs(s*r)));s<0&&0!==c&&(c=1/c);var u=this.mapState.zoom({pos:a,scale:c});return u.getViewportProps().zoom!==this.mapStateProps.zoom&&(this.updateViewport(u,_e(_e({},Me),{},{transitionInterpolator:new Ft({around:a}),transitionDuration:o?250:1}),{isPanning:!0,isZooming:!0}),!0)},e._onPinchStart=function(t){var e=this.getCenter(t),n=this.mapState.zoomStart({pos:e}).rotateStart({pos:e});return this._startPinchRotation=t.rotation,this._lastPinchEvent=t,this.updateViewport(n,Pe,{isDragging:!0}),!0},e._onPinch=function(t){if(!this.isDragging())return!1;if(!this.touchZoom&&!this.touchRotate)return!1;var e=this.mapState;if(this.touchZoom){var n=t.scale,r=this.getCenter(t);e=e.zoom({pos:r,scale:n})}if(this.touchRotate){var i=t.rotation;e=e.rotate({deltaAngleX:this._startPinchRotation-i})}return this.updateViewport(e,Pe,{isDragging:!0,isPanning:Boolean(this.touchZoom),isZooming:Boolean(this.touchZoom),isRotating:Boolean(this.touchRotate)}),this._lastPinchEvent=t,!0},e._onPinchEnd=function(t){if(!this.isDragging())return!1;if(this.touchZoom){var e=this.touchZoom.inertia,n=void 0===e?300:e,r=this._lastPinchEvent;if(n&&r&&t.scale!==r.scale){var i=this.getCenter(t),o=this.mapState.rotateEnd(),a=Math.log2(t.scale),s=(a-Math.log2(r.scale))/(t.deltaTime-r.deltaTime),c=Math.pow(2,a+s*n/2);return o=o.zoom({pos:i,scale:c}).zoomEnd(),this.updateViewport(o,_e(_e({},Me),{},{transitionInterpolator:new Ft({around:i}),transitionDuration:n,transitionEasing:Se}),{isDragging:!1,isPanning:Boolean(this.touchZoom),isZooming:Boolean(this.touchZoom),isRotating:!1}),this.blockEvents(n),!0}}var u=this.mapState.zoomEnd().rotateEnd();return this._state.startPinchRotation=0,this.updateViewport(u,null,{isDragging:!1,isPanning:!1,isZooming:!1,isRotating:!1}),this._startPinchRotation=null,this._lastPinchEvent=null,!0},e._onTriplePanStart=function(t){var e=this.getCenter(t),n=this.mapState.rotateStart({pos:e});return this.updateViewport(n,Pe,{isDragging:!0}),!0},e._onTriplePan=function(t){if(!this.isDragging())return!1;if(!this.touchRotate)return!1;var e=this.getCenter(t);e[0]-=t.deltaX;var n=this.mapState.rotate({pos:e});return this.updateViewport(n,Pe,{isRotating:!0}),!0},e._onTriplePanEnd=function(t){if(!this.isDragging())return!1;if(this.touchRotate){var e=this.touchRotate.inertia,n=void 0===e?300:e;if(n&&t.velocityY){var r=this.getCenter(t),i=[r[0],r[1]+=t.velocityY*n/2],o=this.mapState.rotate({pos:i});return this.updateViewport(o,_e(_e({},Me),{},{transitionDuration:n,transitionEasing:Se}),{isDragging:!1,isRotating:!0}),this.blockEvents(n),!1}}var a=this.mapState.rotateEnd();return this.updateViewport(a,null,{isDragging:!1,isRotating:!1}),!0},e._onDoubleTap=function(t){if(!this.doubleClickZoom)return!1;var e=this.getCenter(t),n=this.isFunctionKeyPressed(t),r=this.mapState.zoom({pos:e,scale:n?.5:2});return this.updateViewport(r,Object.assign({},Me,{transitionInterpolator:new Ft({around:e})}),{isZooming:!0}),!0},e._onKeyDown=function(t){if(!this.keyboard)return!1;var e,n=this.isFunctionKeyPressed(t),r=this.keyboard,i=r.zoomSpeed,o=void 0===i?2:i,a=r.moveSpeed,s=void 0===a?100:a,c=r.rotateSpeedX,u=void 0===c?15:c,l=r.rotateSpeedY,h=void 0===l?10:l,p=this.mapStateProps;switch(t.srcEvent.keyCode){case 189:e=n?this.getMapState({zoom:p.zoom-Math.log2(o)-1}):this.getMapState({zoom:p.zoom-Math.log2(o)});break;case 187:e=n?this.getMapState({zoom:p.zoom+Math.log2(o)+1}):this.getMapState({zoom:p.zoom+Math.log2(o)});break;case 37:e=n?this.getMapState({bearing:p.bearing-u}):this.mapState.pan({pos:[s,0],startPos:[0,0]});break;case 39:e=n?this.getMapState({bearing:p.bearing+u}):this.mapState.pan({pos:[-s,0],startPos:[0,0]});break;case 38:e=n?this.getMapState({pitch:p.pitch+h}):this.mapState.pan({pos:[0,s],startPos:[0,0]});break;case 40:e=n?this.getMapState({pitch:p.pitch-h}):this.mapState.pan({pos:[0,-s],startPos:[0,0]});break;default:return!1}return this.updateViewport(e,Me)},t}();function Ae(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function Le(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Ae(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Ae(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var ze=Object.assign({},wt.propTypes,{maxZoom:a.number,minZoom:a.number,maxPitch:a.number,minPitch:a.number,onViewStateChange:a.func,onViewportChange:a.func,onInteractionStateChange:a.func,transitionDuration:a.oneOfType([a.number,a.string]),transitionInterpolator:a.object,transitionInterruption:a.number,transitionEasing:a.func,onTransitionStart:a.func,onTransitionInterrupt:a.func,onTransitionEnd:a.func,scrollZoom:a.oneOfType([a.bool,a.object]),dragPan:a.oneOfType([a.bool,a.object]),dragRotate:a.oneOfType([a.bool,a.object]),doubleClickZoom:a.bool,touchZoom:a.oneOfType([a.bool,a.object]),touchRotate:a.oneOfType([a.bool,a.object]),keyboard:a.oneOfType([a.bool,a.object]),onHover:a.func,onClick:a.func,onDblClick:a.func,onContextMenu:a.func,onMouseDown:a.func,onMouseMove:a.func,onMouseUp:a.func,onTouchStart:a.func,onTouchMove:a.func,onTouchEnd:a.func,onMouseEnter:a.func,onMouseLeave:a.func,onMouseOut:a.func,onWheel:a.func,touchAction:a.string,eventRecognizerOptions:a.object,clickRadius:a.number,interactiveLayerIds:a.array,getCursor:a.func,controller:a.instanceOf(Re)}),Ne=Object.assign({},wt.defaultProps,et,Ut.defaultProps,{onViewStateChange:null,onViewportChange:null,onClick:null,onNativeClick:null,onHover:null,onContextMenu:function(t){return t.preventDefault()},scrollZoom:!0,dragPan:!0,dragRotate:!0,doubleClickZoom:!0,touchZoom:!0,touchRotate:!1,keyboard:!0,touchAction:"none",eventRecognizerOptions:{},clickRadius:0,getCursor:function(t){var e=t.isDragging,n=t.isHovering;return e?"grabbing":n?"pointer":"grab"}});function Fe(t){if(t.lngLat||!t.offsetCenter)return t;var e=t.offsetCenter,n=e.x,r=e.y;if(!Number.isFinite(n)||!Number.isFinite(r))return t;var i=[n,r];t.point=i;var o=this.viewport,a=o.unproject(i,{targetZ:o.meterOffset[2]});return t.lngLat=[a[0],a[1]],t}function Ze(t){var e=this.map;if(!e||!t)return null;var n={},r=this.props.clickRadius;this.props.interactiveLayerIds&&(n.layers=this.props.interactiveLayerIds);try{return e.queryRenderedFeatures(r?[[t[0]-r,t[1]+r],[t[0]+r,t[1]-r]]:t,n)}catch(i){return null}}function Ve(t,e){var n=this.props[t];n&&n(Fe.call(this,e))}function Be(t){Ve.call(this,"touch"===t.pointerType?"onTouchStart":"onMouseDown",t)}function Ue(t){Ve.call(this,"touch"===t.pointerType?"onTouchEnd":"onMouseUp",t)}function qe(t){if(Ve.call(this,"touch"===t.pointerType?"onTouchMove":"onMouseMove",t),!this.state.isDragging){var e,n=this.props,r=n.onHover,i=n.interactiveLayerIds;t=Fe.call(this,t),(i||r)&&(e=Ze.call(this,t.point));var o=Boolean(i&&e&&e.length>0),a=o&&!this.state.isHovering,s=!o&&this.state.isHovering;(r||a)&&(t.features=e,r&&r(t)),a&&Ve.call(this,"onMouseEnter",t),s&&Ve.call(this,"onMouseLeave",t),(a||s)&&this.setState({isHovering:o})}}function We(t){var e=this.props,n=e.onClick,r=e.onNativeClick,i=e.onDblClick,o=e.doubleClickZoom,a=[],s=i||o;switch(t.type){case"anyclick":a.push(r),s||a.push(n);break;case"click":s&&a.push(n)}(a=a.filter(Boolean)).length&&((t=Fe.call(this,t)).features=Ze.call(this,t.point),a.forEach((function(e){return e(t)})))}var He=Object(o.forwardRef)((function(t,e){var n=Object(o.useContext)(lt),i=Object(o.useMemo)((function(){return t.controller||new Re}),[]),a=Object(o.useMemo)((function(){return new je(null,{touchAction:t.touchAction,recognizerOptions:t.eventRecognizerOptions})}),[]),s=Object(o.useRef)(null),c=Object(o.useRef)(null),u=Object(o.useRef)({width:0,height:0,state:{isHovering:!1,isDragging:!1}}).current;u.props=t,u.map=c.current&&c.current.getMap(),u.setState=function(e){u.state=Le(Le({},u.state),e),s.current.style.cursor=t.getCursor(u.state)};var l,h,p=!0,f=function(t,e,n){if(p)l=[t,e,n];else{var r=u.props,i=r.onViewStateChange,o=r.onViewportChange;Object.defineProperty(t,"position",{get:function(){return[0,0,pt(u.map,t)]}}),i&&i({viewState:t,interactionState:e,oldViewState:n}),o&&o(t,e,n)}};Object(o.useImperativeHandle)(e,(function(){return function(t){return{getMap:t.current&&t.current.getMap,queryRenderedFeatures:t.current&&t.current.queryRenderedFeatures}}(c)}),[]);var d=Object(o.useMemo)((function(){return Le(Le({},n),{},{eventManager:a,container:n.container||s.current})}),[n,s.current]);d.onViewportChange=f,d.viewport=n.viewport||gt(u),u.viewport=d.viewport;var v=function(t){var e=t.isDragging,n=void 0!==e&&e;if(n!==u.state.isDragging&&u.setState({isDragging:n}),p)h=t;else{var r=u.props.onInteractionStateChange;r&&r(t)}},g=function(){u.width&&u.height&&i.setOptions(Le(Le(Le({},u.props),u.props.viewState),{},{isInteractive:Boolean(u.props.onViewStateChange||u.props.onViewportChange),onViewportChange:f,onStateChange:v,eventManager:a,width:u.width,height:u.height}))};Object(o.useEffect)((function(){return a.setElement(s.current),a.on({pointerdown:Be.bind(u),pointermove:qe.bind(u),pointerup:Ue.bind(u),pointerleave:Ve.bind(u,"onMouseOut"),click:We.bind(u),anyclick:We.bind(u),dblclick:Ve.bind(u,"onDblClick"),wheel:Ve.bind(u,"onWheel"),contextmenu:Ve.bind(u,"onContextMenu")}),function(){a.destroy()}}),[]),ht((function(){l&&f.apply(void 0,Object(r.a)(l)),h&&v(h)})),g();var m=t.width,b=t.height,y=t.style,O=t.getCursor,w=Object(o.useMemo)((function(){return Le(Le({position:"relative"},y),{},{width:m,height:b,cursor:O(u.state)})}),[y,m,b,O,u.state]);return l&&u._child||(u._child=o.createElement(ut,{value:d},o.createElement("div",{key:"event-canvas",ref:s,style:w},o.createElement(wt,Object.assign({},t,{width:"100%",height:"100%",style:null,onResize:function(t){var e=t.width,n=t.height;u.width=e,u.height=n,g(),u.props.onResize({width:e,height:n})},ref:c}))))),p=!1,u._child}));He.supported=wt.supported,He.propTypes=ze,He.defaultProps=Ne;var Xe=He;function Ye(t,e){if(t===e)return!0;if(!t||!e)return!1;if(Array.isArray(t)){if(!Array.isArray(e)||t.length!==e.length)return!1;for(var n=0;n<t.length;n++)if(!Ye(t[n],e[n]))return!1;return!0}if(Array.isArray(e))return!1;if("object"==typeof t&&"object"==typeof e){var r=Object.keys(t),i=Object.keys(e);if(r.length!==i.length)return!1;for(var o=0,a=r;o<a.length;o++){var s=a[o];if(!e.hasOwnProperty(s))return!1;if(!Ye(t[s],e[s]))return!1}return!0}return!1}function Ge(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var Ke=0;function Qe(t,e,n){if(t.style&&t.style._loaded){var r=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Ge(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Ge(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},n);return delete r.id,delete r.children,t.addSource(e,r),t.getSource(e)}return null}var Je=function(t){var e=Object(o.useContext)(lt),n=Object(o.useRef)({id:t.id,type:t.type}),r=Object(o.useState)(0)[1],i=Object(o.useMemo)((function(){return t.id||"jsx-source-"+Ke++}),[]),a=e.map;Object(o.useEffect)((function(){if(a){var t=function(){return r((function(t){return t+1}))};return a.on("styledata",t),function(){a.off("styledata",t),requestAnimationFrame((function(){a.style&&a.style._loaded&&a.getSource(i)&&a.removeSource(i)}))}}}),[a,i]);var s=a&&a.style&&a.getSource(i);return s?function(t,e,n){J(e.id===n.id,"source id changed"),J(e.type===n.type,"source type changed");var r="",i=0;for(var o in e)"children"===o||"id"===o||Ye(n[o],e[o])||(r=o,i++);if(i){var a=e.type;if("geojson"===a)t.setData(e.data);else if("image"===a)t.updateImage({url:e.url,coordinates:e.coordinates});else if("canvas"!==a&&"video"!==a||1!==i||"coordinates"!==r)if("vector"===a&&t.setUrl)switch(r){case"url":t.setUrl(e.url);break;case"tiles":t.setTiles(e.tiles)}else console.warn("Unable to update <Source> prop: "+r);else t.setCoordinates(e.coordinates)}}(s,t,n.current):s=Qe(a,i,t),n.current=t,s&&o.Children.map(t.children,(function(t){return t&&Object(o.cloneElement)(t,{source:i})}))||null},$e=n("zLVn");function tn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function en(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?tn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):tn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var nn={type:a.oneOf(["fill","line","symbol","circle","fill-extrusion","raster","background","heatmap","hillshade","sky"]).isRequired,id:a.string,source:a.string,beforeId:a.string};function rn(t,e,n,r){J(n.id===r.id,"layer id changed"),J(n.type===r.type,"layer type changed");try{!function(t,e,n,r){var i=n.layout,o=void 0===i?{}:i,a=n.paint,s=void 0===a?{}:a,c=n.filter,u=n.minzoom,l=n.maxzoom,h=n.beforeId,p=Object($e.a)(n,["layout","paint","filter","minzoom","maxzoom","beforeId"]);if(h!==r.beforeId&&t.moveLayer(e,h),o!==r.layout){var f=r.layout||{};for(var d in o)Ye(o[d],f[d])||t.setLayoutProperty(e,d,o[d]);for(var v in f)o.hasOwnProperty(v)||t.setLayoutProperty(e,v,void 0)}if(s!==r.paint){var g=r.paint||{};for(var m in s)Ye(s[m],g[m])||t.setPaintProperty(e,m,s[m]);for(var b in g)s.hasOwnProperty(b)||t.setPaintProperty(e,b,void 0)}for(var y in Ye(c,r.filter)||t.setFilter(e,c),u===r.minzoom&&l===r.maxzoom||t.setLayerZoomRange(e,u,l),p)Ye(p[y],r[y])||t.setLayerProperty(e,y,p[y])}(t,e,n,r)}catch(i){console.warn(i)}}var on=0;function an(t){var e=Object(o.useContext)(lt),n=Object(o.useRef)({id:t.id,type:t.type}),r=Object(o.useState)(0)[1],i=Object(o.useMemo)((function(){return t.id||"jsx-layer-"+on++}),[]),a=e.map;return Object(o.useEffect)((function(){if(a){var t=function(){return r((function(t){return t+1}))};return a.on("styledata",t),function(){a.off("styledata",t),a.style&&a.style._loaded&&a.removeLayer(i)}}}),[a]),a&&a.style&&a.getLayer(i)?rn(a,i,t,n.current):function(t,e,n){if(t.style&&t.style._loaded){var r=en(en({},n),{},{id:e});delete r.beforeId,t.addLayer(r,n.beforeId)}}(a,i,t),n.current=t,null}an.propTypes=nn;var sn=an,cn={captureScroll:!1,captureDrag:!0,captureClick:!0,captureDoubleClick:!0,capturePointerMove:!1},un={captureScroll:a.bool,captureDrag:a.bool,captureClick:a.bool,captureDoubleClick:a.bool,capturePointerMove:a.bool};function ln(t){void 0===t&&(t={});var e=Object(o.useContext)(lt),n=Object(o.useRef)(null),r=Object(o.useRef)({props:t,state:{},context:e,containerRef:n}).current;return r.props=t,r.context=e,Object(o.useEffect)((function(){return function(t){var e=t.containerRef.current,n=t.context.eventManager;if(e&&n){var r={wheel:function(e){var n=t.props;n.captureScroll&&e.stopPropagation(),n.onScroll&&n.onScroll(e,t)},panstart:function(e){var n=t.props;n.captureDrag&&e.stopPropagation(),n.onDragStart&&n.onDragStart(e,t)},anyclick:function(e){var n=t.props;n.captureClick&&e.stopPropagation(),n.onNativeClick&&n.onNativeClick(e,t)},click:function(e){var n=t.props;n.captureClick&&e.stopPropagation(),n.onClick&&n.onClick(e,t)},dblclick:function(e){var n=t.props;n.captureDoubleClick&&e.stopPropagation(),n.onDoubleClick&&n.onDoubleClick(e,t)},pointermove:function(e){var n=t.props;n.capturePointerMove&&e.stopPropagation(),n.onPointerMove&&n.onPointerMove(e,t)}};return n.watch(r,e),function(){n.off(r)}}}(r)}),[e.eventManager]),r}function hn(t){var e=t.instance,n=ln(t),r=n.context,i=n.containerRef;return e._context=r,e._containerRef=i,e._render()}var pn=function(t){function e(){for(var e,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return(e=t.call.apply(t,[this].concat(r))||this)._context={},e._containerRef=Object(o.createRef)(),e._onScroll=function(t){},e._onDragStart=function(t){},e._onDblClick=function(t){},e._onClick=function(t){},e._onPointerMove=function(t){},e}Object(Pt.a)(e,t);var n=e.prototype;return n._render=function(){throw new Error("_render() not implemented")},n.render=function(){return o.createElement(hn,Object.assign({instance:this},this.props,{onScroll:this._onScroll,onDragStart:this._onDragStart,onDblClick:this._onDblClick,onClick:this._onClick,onPointerMove:this._onPointerMove}))},e}(o.PureComponent);function fn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function dn(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?fn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):fn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}pn.defaultProps=cn;Object.assign({},un,{draggable:a.bool,onDrag:a.func,onDragEnd:a.func,onDragStart:a.func,offsetLeft:a.number,offsetTop:a.number});var vn=Object.assign({},cn,{draggable:!1,offsetLeft:0,offsetTop:0});function gn(t){var e=t.offsetCenter;return[e.x,e.y]}function mn(t,e,n,r){var i=t[0]+e[0]-n.offsetLeft,o=t[1]+e[1]-n.offsetTop;return r.viewport.unproject([i,o])}function bn(t,e){var n=e.props,r=e.callbacks,i=e.state,o=e.context,a=e.containerRef;if(n.draggable){t.stopPropagation();var s=gn(t),c=function(t,e){var n=t.center,r=n.x,i=n.y;if(e){var o=e.getBoundingClientRect();return[o.left-r,o.top-i]}return null}(t,a.current);if(i.setDragPos(s),i.setDragOffset(c),r.onDragStart&&c){var u=Object.assign({},t);u.lngLat=mn(s,c,n,o),r.onDragStart(u)}}}function yn(t){var e=t.context.eventManager;if(e&&t.state.dragPos){var n={panmove:function(e){return function(t,e){var n=e.props,r=e.callbacks,i=e.state,o=e.context;t.stopPropagation();var a=gn(t);i.setDragPos(a);var s=i.dragOffset;if(r.onDrag&&s){var c=Object.assign({},t);c.lngLat=mn(a,s,n,o),r.onDrag(c)}}(e,t)},panend:function(e){return function(t,e){var n=e.props,r=e.callbacks,i=e.state,o=e.context;t.stopPropagation();var a=i.dragPos,s=i.dragOffset;if(i.setDragPos(null),i.setDragOffset(null),r.onDragEnd&&a&&s){var c=Object.assign({},t);c.lngLat=mn(a,s,n,o),r.onDragEnd(c)}}(e,t)},pancancel:function(e){return n=e,r=t.state,n.stopPropagation(),r.setDragPos(null),void r.setDragOffset(null);var n,r}};return e.watch(n),function(){e.off(n)}}}var On="undefined"!=typeof window&&window.devicePixelRatio||1,wn=function(t){return Math.round(t*On)/On},jn=function(t,e,n){if(void 0===n&&(n="x"),null===t)return e;var r="x"===n?t.offsetWidth:t.offsetHeight;return wn(e/100*r)/r*100},En=Object.assign({},vn,{className:""});function _n(t){var e=function(t){var e=Object(o.useState)(null),n=e[0],r=e[1],i=Object(o.useState)(null),a=i[0],s=i[1],c=ln(dn(dn({},t),{},{onDragStart:bn}));return c.callbacks=t,c.state.dragPos=n,c.state.setDragPos=r,c.state.dragOffset=a,c.state.setDragOffset=s,Object(o.useEffect)((function(){return yn(c)}),[c.context.eventManager,Boolean(n)]),c}(t),n=e.state,r=e.containerRef,i=t.children,a=t.className,s=t.draggable,c=n.dragPos,u=function(t){var e=t.props,n=t.state,r=t.context,i=e.longitude,o=e.latitude,a=e.offsetLeft,s=e.offsetTop,c=n.dragPos,u=n.dragOffset,l=r.viewport,h=r.map;if(c&&u)return[c[0]+u[0],c[1]+u[1]];var p=pt(h,{longitude:i,latitude:o}),f=l.project([i,o,p]),d=f[0],v=f[1];return[d+=a,v+=s]}(e),l=u[0],h=u[1],p="translate("+wn(l)+"px, "+wn(h)+"px)",f=s?c?"grabbing":"grab":"auto",d=Object(o.useMemo)((function(){var t={position:"absolute",left:0,top:0,transform:p,cursor:f};return o.createElement("div",{className:"mapboxgl-marker "+a,ref:e.containerRef,style:t},i)}),[i,a]),v=r.current;return v&&(v.style.transform=p,v.style.cursor=f),d}_n.defaultProps=En;var Pn=o.memo(_n),Mn={top:{x:.5,y:0},"top-left":{x:0,y:0},"top-right":{x:1,y:0},bottom:{x:.5,y:1},"bottom-left":{x:0,y:1},"bottom-right":{x:1,y:1},left:{x:0,y:.5},right:{x:1,y:.5}},Sn=Object.keys(Mn);var xn=Object.assign({},cn,{className:"",offsetLeft:0,offsetTop:0,tipSize:10,anchor:"bottom",dynamicPosition:!0,sortByDepth:!1,closeButton:!0,closeOnClick:!0,onClose:function(){}});function Tn(t,e,n,r){var i=r[0],o=r[1],a=t.anchor,s=t.dynamicPosition,c=t.tipSize;return n&&s?function(t){var e=t.x,n=t.y,r=t.width,i=t.height,o=t.selfWidth,a=t.selfHeight,s=t.anchor,c=t.padding,u=void 0===c?0:c,l=Mn[s],h=l.x,p=l.y,f=n-p*a,d=f+a,v=Math.max(0,u-f)+Math.max(0,d-i+u);if(v>0){var g=p,m=v;for(p=0;p<=1;p+=.5)d=(f=n-p*a)+a,(v=Math.max(0,u-f)+Math.max(0,d-i+u))<m&&(m=v,g=p);p=g}var b=.5;.5===p&&(h=Math.floor(h),b=1);var y=e-h*o,O=y+o,w=Math.max(0,u-y)+Math.max(0,O-r+u);if(w>0){var j=h,E=w;for(h=0;h<=1;h+=b)O=(y=e-h*o)+o,(w=Math.max(0,u-y)+Math.max(0,O-r+u))<E&&(E=w,j=h);h=j}return Sn.find((function(t){var e=Mn[t];return e.x===h&&e.y===p}))||s}({x:i,y:o,anchor:a,padding:c,width:e.width,height:e.height,selfWidth:n.clientWidth,selfHeight:n.clientHeight}):a}function kn(t){var e=Object(o.useRef)(null),n=ln(t),r=n.context,i=n.containerRef,a=Object(o.useState)(!1)[1];Object(o.useEffect)((function(){a(!0)}),[e.current]),Object(o.useEffect)((function(){if(r.eventManager&&t.closeOnClick){var e=function(){return n.props.onClose()};return r.eventManager.on("anyclick",e),function(){r.eventManager.off("anyclick",e)}}}),[r.eventManager,t.closeOnClick]);var s=r.viewport,c=r.map,u=t.className,l=t.longitude,h=t.latitude,p=t.tipSize,f=t.closeButton,d=t.children,v=t.altitude;void 0===v&&(v=pt(c,{longitude:l,latitude:h}));var g=s.project([l,h,v]),m=Tn(t,s,e.current,g),b=function(t,e,n,r,i){var o=r[0],a=r[1],s=r[2],c=t.offsetLeft,u=t.offsetTop,l=t.sortByDepth,h=Mn[i],p=o+c,f=a+u,d={position:"absolute",transform:"\n      translate("+jn(n,100*-h.x)+"%, "+jn(n,100*-h.y,"y")+"%)\n      translate("+wn(p)+"px, "+wn(f)+"px)\n    ",display:void 0,zIndex:void 0};return l?(s>1||s<-1||o<0||o>e.width||a<0||a>e.height?d.display="none":d.zIndex=Math.floor((1-s)/2*1e5),d):d}(t,s,i.current,g,m),y=Object(o.useCallback)((function(t){n.props.onClose();var e=n.context.eventManager;e&&e.once("click",(function(t){return t.stopPropagation()}),t.target)}),[]);return o.createElement("div",{className:"mapboxgl-popup mapboxgl-popup-anchor-"+m+" "+u,style:b,ref:i},o.createElement("div",{key:"tip",className:"mapboxgl-popup-tip",style:{borderWidth:p}}),o.createElement("div",{key:"content",ref:e,className:"mapboxgl-popup-content"},f&&o.createElement("button",{key:"close-button",className:"mapboxgl-popup-close-button",type:"button",onClick:y},"×"),d))}kn.defaultProps=xn;var Dn=o.memo(kn);function Cn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var In=Object.assign({},cn,{className:"",toggleLabel:"Toggle Attribution"});function Rn(t){var e=ln(t),n=e.context,r=e.containerRef,a=Object(o.useRef)(null),s=Object(o.useState)(!1),c=s[0],u=s[1];Object(o.useEffect)((function(){var e;return n.map&&(e=function(t,e,n,r){var i=new X.a.AttributionControl(t);return i._map=e,i._container=n,i._innerContainer=r,i._updateAttributions(),i._updateEditLink(),e.on("styledata",i._updateData),e.on("sourcedata",i._updateData),i}({customAttribution:t.customAttribution},n.map,r.current,a.current)),function(){return e&&function(t){t._map.off("styledata",t._updateData),t._map.off("sourcedata",t._updateData)}(e)}}),[n.map]);var l=void 0===t.compact?n.viewport.width<=640:t.compact;Object(o.useEffect)((function(){!l&&c&&u(!1)}),[l]);var h=Object(o.useCallback)((function(){return u((function(t){return!t}))}),[]),p=Object(o.useMemo)((function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Cn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Cn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute"},t.style)}),[t.style]);return o.createElement("div",{style:p,className:t.className},o.createElement("div",{ref:r,"aria-pressed":c,className:"mapboxgl-ctrl mapboxgl-ctrl-attrib "+(l?"mapboxgl-compact":"")+" "+(c?"mapboxgl-compact-show":"")},o.createElement("button",{type:"button",className:"mapboxgl-ctrl-attrib-button",title:t.toggleLabel,onClick:h}),o.createElement("div",{ref:a,className:"mapboxgl-ctrl-attrib-inner",role:"list"})))}Rn.defaultProps=In;var An=o.memo(Rn),Ln=n("Zs1x");function zn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var Nn=Object.assign({},cn,{className:"",container:null,label:"Toggle fullscreen"});function Fn(t){var e=ln(t),n=e.context,r=e.containerRef,a=Object(o.useState)(!1),s=a[0],c=a[1],u=Object(o.useState)(!1),l=u[0],h=u[1],p=Object(o.useState)(null),f=p[0],d=p[1];Object(o.useEffect)((function(){var t=new X.a.FullscreenControl;d(t),h(t._checkFullscreenSupport());var e=function(){var e=!t._fullscreen;t._fullscreen=e,c(e)};return Ln.a.addEventListener(t._fullscreenchange,e),function(){Ln.a.removeEventListener(t._fullscreenchange,e)}}),[]);var v=Object(o.useMemo)((function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?zn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):zn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute"},t.style)}),[t.style]);if(!l)return null;var g=t.className,m=t.label,b=s?"shrink":"fullscreen";return o.createElement("div",{style:v,className:g},o.createElement("div",{className:"mapboxgl-ctrl mapboxgl-ctrl-group",ref:r},o.createElement("button",{key:b,className:"mapboxgl-ctrl-icon mapboxgl-ctrl-"+b,type:"button",title:m,onClick:function(){f&&(f._container=t.container||n.container,f._onClickFullscreen())}},o.createElement("span",{className:"mapboxgl-ctrl-icon","aria-hidden":"true"}))))}Fn.defaultProps=Nn;var Zn,Vn=o.memo(Fn);function Bn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var Un=function(){},qn=Object.assign({},cn,{className:"",label:"Find My Location",disabledLabel:"Location Not Available",auto:!1,positionOptions:{enableHighAccuracy:!1,timeout:6e3},fitBoundsOptions:{maxZoom:15},trackUserLocation:!1,showUserLocation:!0,showAccuracyCircle:!0,onGeolocate:function(){}});function Wn(t,e){var n=e.context,r=e.props,i=function(t){var e=new X.a.LngLat(t.coords.longitude,t.coords.latitude),n=t.coords.accuracy,r=e.toBounds(n);return[[r._ne.lng,r._ne.lat],[r._sw.lng,r._sw.lat]]}(t),o=n.viewport.fitBounds(i,r.fitBoundsOptions),a=o.longitude,s=o.latitude,c=o.zoom,u=Object.assign({},n.viewport,{longitude:a,latitude:s,zoom:c}),l=new ot(u),h=Object.assign({},l.getViewportProps(),Me),p=r.onViewportChange||n.onViewportChange||Un;(r.onViewStateChange||n.onViewStateChange||Un)({viewState:h}),p(h)}function Hn(t){var e=ln(t),n=e.context,r=e.containerRef,a=Object(o.useRef)(null),s=Object(o.useState)(null),c=s[0],u=s[1],l=Object(o.useState)(!1),h=l[0],p=l[1];Object(o.useEffect)((function(){var r;return n.map&&(void 0!==Zn?Promise.resolve(Zn):void 0!==window.navigator.permissions?window.navigator.permissions.query({name:"geolocation"}).then((function(t){return Zn="denied"!==t.state})):(Zn=Boolean(window.navigator.geolocation),Promise.resolve(Zn))).then((function(i){p(i),a.current&&((r=function(t,e,n){var r=new X.a.GeolocateControl(e);r._container=Ln.a.createElement("div"),r._map={on:function(){},_getUIString:function(){return""}},r._setupUI(!0),r._map=t.map,r._geolocateButton=n;var i=t.eventManager;return r.options.trackUserLocation&&i&&i.on("panstart",(function(){"ACTIVE_LOCK"===r._watchState&&(r._watchState="BACKGROUND",n.classList.add("mapboxgl-ctrl-geolocate-background"),n.classList.remove("mapboxgl-ctrl-geolocate-active"))})),r.on("geolocate",e.onGeolocate),r}(n,t,a.current))._updateCamera=function(t){return Wn(t,e)},u(r))})),function(){r&&r._clearWatch()}}),[n.map]);var f=Object(o.useCallback)((function(){c&&(c.options=e.props,c.trigger())}),[c]);Object(o.useEffect)((function(){t.auto&&f()}),[c,t.auto]),Object(o.useEffect)((function(){c&&c._onZoom()}),[n.viewport.zoom]);var d=t.className,v=t.label,g=t.disabledLabel,m=t.trackUserLocation,b=Object(o.useMemo)((function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Bn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Bn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute"},t.style)}),[t.style]);return o.createElement("div",{style:b,className:d},o.createElement("div",{key:"geolocate-control",className:"mapboxgl-ctrl mapboxgl-ctrl-group",ref:r},o.createElement("button",{key:"geolocate",className:"mapboxgl-ctrl-icon mapboxgl-ctrl-geolocate",ref:a,disabled:!h,"aria-pressed":!m,type:"button",title:h?v:g,"aria-label":h?v:g,onClick:f},o.createElement("span",{className:"mapboxgl-ctrl-icon","aria-hidden":"true"}))))}Hn.defaultProps=qn;var Xn=o.memo(Hn);function Yn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var Gn=function(){},Kn=Object.assign({},cn,{className:"",showCompass:!0,showZoom:!0,zoomInLabel:"Zoom In",zoomOutLabel:"Zoom Out",compassLabel:"Reset North"});function Qn(t){return function(t,e){for(var n=(t||"").split(".").map(Number),r=(e||"").split(".").map(Number),i=0;i<3;i++){var o=n[i]||0,a=r[i]||0;if(o<a)return-1;if(o>a)return 1}return 0}(t,"1.6.0")>=0?2:1}function Jn(t,e,n){var r=t.viewport,i=new ot(Object.assign({},r,n)),o=Object.assign({},i.getViewportProps(),Me),a=e.onViewportChange||t.onViewportChange||Gn;(e.onViewStateChange||t.onViewStateChange||Gn)({viewState:o}),a(o)}function $n(t,e,n,r){return o.createElement("button",{key:t,className:"mapboxgl-ctrl-icon mapboxgl-ctrl-"+t,type:"button",title:e,onClick:n},r||o.createElement("span",{className:"mapboxgl-ctrl-icon","aria-hidden":"true"}))}function tr(t){var e=ln(t),n=e.context,r=e.containerRef,a=t.className,s=t.showCompass,c=t.showZoom,u=t.zoomInLabel,l=t.zoomOutLabel,h=t.compassLabel,p=Object(o.useMemo)((function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Yn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Yn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute"},t.style)}),[t.style]);return o.createElement("div",{style:p,className:a},o.createElement("div",{className:"mapboxgl-ctrl mapboxgl-ctrl-group",ref:r},c&&$n("zoom-in",u,(function(){Jn(n,t,{zoom:n.viewport.zoom+1})})),c&&$n("zoom-out",l,(function(){Jn(n,t,{zoom:n.viewport.zoom-1})})),s&&$n("compass",h,(function(){Jn(n,t,{bearing:0,pitch:0})}),function(t){var e=Object(o.useMemo)((function(){return t.map?Qn(t.map.version):2}),[t.map]),n={transform:"rotate("+-t.viewport.bearing+"deg)"};return 2===e?o.createElement("span",{className:"mapboxgl-ctrl-icon","aria-hidden":"true",style:n}):o.createElement("span",{className:"mapboxgl-ctrl-compass-arrow",style:n})}(n))))}tr.defaultProps=Kn;var er=o.memo(tr);function nr(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var rr=Object.assign({},cn,{className:"",maxWidth:100,unit:"metric"});function ir(t){var e=ln(t),n=e.context,r=e.containerRef,a=Object(o.useState)(null),s=a[0],c=a[1];Object(o.useEffect)((function(){if(n.map){var t=new X.a.ScaleControl;t._map=n.map,t._container=r.current,c(t)}}),[n.map]),s&&(s.options=t,s._onMove());var u=Object(o.useMemo)((function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?nr(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):nr(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute"},t.style)}),[t.style]);return o.createElement("div",{style:u,className:t.className},o.createElement("div",{ref:r,className:"mapboxgl-ctrl mapboxgl-ctrl-scale"}))}ir.defaultProps=rr;var or=o.memo(ir),ar="undefined"!=typeof window&&window.devicePixelRatio||1;function sr(t){var e=ln(t),n=e.context,r=e.containerRef,i=Object(o.useState)(null),a=i[0],s=i[1];Object(o.useEffect)((function(){s(r.current.getContext("2d"))}),[]);var c=n.viewport,u=n.isDragging;return a&&(a.save(),a.scale(ar,ar),t.redraw({width:c.width,height:c.height,ctx:a,isDragging:u,project:c.project,unproject:c.unproject}),a.restore()),o.createElement("canvas",{ref:r,width:c.width*ar,height:c.height*ar,style:{width:c.width+"px",height:c.height+"px",position:"absolute",left:0,top:0}})}sr.defaultProps={captureScroll:!1,captureDrag:!1,captureClick:!1,captureDoubleClick:!1,capturePointerMove:!1};var cr=sr;function ur(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function lr(t){var e=ln(t),n=e.context,r=e.containerRef,a=n.viewport,s=n.isDragging,c=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?ur(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ur(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute",left:0,top:0,width:a.width,height:a.height},t.style);return o.createElement("div",{ref:r,style:c},t.redraw({width:a.width,height:a.height,isDragging:s,project:a.project,unproject:a.unproject}))}lr.defaultProps={captureScroll:!1,captureDrag:!1,captureClick:!1,captureDoubleClick:!1,capturePointerMove:!1};var hr=lr;function pr(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function fr(t){var e=ln(t),n=e.context,r=e.containerRef,a=n.viewport,s=n.isDragging,c=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?pr(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):pr(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute",left:0,top:0},t.style);return o.createElement("svg",{width:a.width,height:a.height,ref:r,style:c},t.redraw({width:a.width,height:a.height,isDragging:s,project:a.project,unproject:a.unproject}))}fr.defaultProps={captureScroll:!1,captureDrag:!1,captureClick:!1,captureDoubleClick:!1,capturePointerMove:!1};var dr=fr,vr=X.a?X.a.setRTLTextPlugin:function(){}},uR8M:function(t,e,n){"use strict";n.d(e,"a",(function(){return u}));var r=n("rePB");function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function o(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?i(Object(n),!0).forEach((function(e){Object(r.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function a(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return s(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return s(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var c=["type","source","source-layer","minzoom","maxzoom","filter","layout"];function u(t){if(!t)return null;if("string"==typeof t)return t;t.toJS&&(t=t.toJS());for(var e,n={},r=a(t.layers);!(e=r()).done;){var i=e.value;n[i.id]=i}var s=t.layers.map((function(t){var e=n[t.ref],r=null;if("interactive"in t&&delete(r=o({},t)).interactive,e){delete(r=r||o({},t)).ref;for(var i,s=a(c);!(i=s()).done;){var u=i.value;u in e&&(r[u]=e[u])}}return r||t}));return o(o({},t),{},{layers:s})}},yU0y:function(t,e,n){"use strict";n.d(e,"b",(function(){return r})),n.d(e,"a",(function(){return i})),n.d(e,"c",(function(){return o}));n("QFcT");var r=1e-6,i="undefined"!=typeof Float32Array?Float32Array:Array,o=Math.random;Math.PI;Math.hypot||(Math.hypot=function(){for(var t=0,e=arguments.length;e--;)t+=arguments[e]*arguments[e];return Math.sqrt(t)})},zLVn:function(t,e,n){"use strict";function r(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)n=o[r],e.indexOf(n)>=0||(i[n]=t[n]);return i}n.d(e,"a",(function(){return r}))}}]);
\ No newline at end of file
+/*! For license information please see 73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{ExcP:function(t,e,n){"use strict";(function(t){n.d(e,"b",(function(){return r})),n.d(e,"c",(function(){return i})),n.d(e,"a",(function(){return o}));var r="undefined"!=typeof navigator&&navigator.userAgent?navigator.userAgent.toLowerCase():"",i="undefined"!=typeof window?window:t,o=(void 0!==t||window,"undefined"!=typeof document&&document,!1);try{var a={get passive(){return o=!0,!0}};i.addEventListener("test",a,a),i.removeEventListener("test",a,a)}catch(s){}}).call(this,n("yLpj"))},ODXe:function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));var r=n("BsWD");function i(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t)){var n=[],r=!0,i=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!e||n.length!==e);r=!0);}catch(c){i=!0,o=c}finally{try{r||null==s.return||s.return()}finally{if(i)throw o}}return n}}(t,e)||Object(r.a)(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},QFcT:function(t,e,n){var r=n("I+eb"),i=Math.hypot,o=Math.abs,a=Math.sqrt;r({target:"Math",stat:!0,forced:!!i&&i(1/0,NaN)!==1/0},{hypot:function(t,e){for(var n,r,i=0,s=0,c=arguments.length,u=0;s<c;)u<(n=o(arguments[s++]))?(i=i*(r=u/n)*r+1,u=n):i+=n>0?(r=n/u)*r:n;return u===1/0?1/0:u*a(i)}})},QFtD:function(t,e,n){var r;!function(i,o,a,s){"use strict";var c,u=["","webkit","Moz","MS","ms","o"],l=o.createElement("div"),h=Math.round,p=Math.abs,f=Date.now;function d(t,e,n){return setTimeout(w(t,n),e)}function v(t,e,n){return!!Array.isArray(t)&&(g(t,n[e],n),!0)}function g(t,e,n){var r;if(t)if(t.forEach)t.forEach(e,n);else if(void 0!==t.length)for(r=0;r<t.length;)e.call(n,t[r],r,t),r++;else for(r in t)t.hasOwnProperty(r)&&e.call(n,t[r],r,t)}function m(t,e,n){var r="DEPRECATED METHOD: "+e+"\n"+n+" AT \n";return function(){var e=new Error("get-stack-trace"),n=e&&e.stack?e.stack.replace(/^[^\(]+?[\n$]/gm,"").replace(/^\s+at\s+/gm,"").replace(/^Object.<anonymous>\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",o=i.console&&(i.console.warn||i.console.log);return o&&o.call(i.console,r,n),t.apply(this,arguments)}}c="function"!=typeof Object.assign?function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),n=1;n<arguments.length;n++){var r=arguments[n];if(null!=r)for(var i in r)r.hasOwnProperty(i)&&(e[i]=r[i])}return e}:Object.assign;var b=m((function(t,e,n){for(var r=Object.keys(e),i=0;i<r.length;)(!n||n&&void 0===t[r[i]])&&(t[r[i]]=e[r[i]]),i++;return t}),"extend","Use `assign`."),y=m((function(t,e){return b(t,e,!0)}),"merge","Use `assign`.");function O(t,e,n){var r,i=e.prototype;(r=t.prototype=Object.create(i)).constructor=t,r._super=i,n&&c(r,n)}function w(t,e){return function(){return t.apply(e,arguments)}}function j(t,e){return"function"==typeof t?t.apply(e&&e[0]||void 0,e):t}function E(t,e){return void 0===t?e:t}function _(t,e,n){g(x(e),(function(e){t.addEventListener(e,n,!1)}))}function P(t,e,n){g(x(e),(function(e){t.removeEventListener(e,n,!1)}))}function M(t,e){for(;t;){if(t==e)return!0;t=t.parentNode}return!1}function S(t,e){return t.indexOf(e)>-1}function x(t){return t.trim().split(/\s+/g)}function T(t,e,n){if(t.indexOf&&!n)return t.indexOf(e);for(var r=0;r<t.length;){if(n&&t[r][n]==e||!n&&t[r]===e)return r;r++}return-1}function k(t){return Array.prototype.slice.call(t,0)}function D(t,e,n){for(var r=[],i=[],o=0;o<t.length;){var a=e?t[o][e]:t[o];T(i,a)<0&&r.push(t[o]),i[o]=a,o++}return n&&(r=e?r.sort((function(t,n){return t[e]>n[e]})):r.sort()),r}function C(t,e){for(var n,r,i=e[0].toUpperCase()+e.slice(1),o=0;o<u.length;){if((r=(n=u[o])?n+i:e)in t)return r;o++}}var I=1;function R(t){var e=t.ownerDocument||t;return e.defaultView||e.parentWindow||i}var A="ontouchstart"in i,L=void 0!==C(i,"PointerEvent"),z=A&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent),N=["x","y"],F=["clientX","clientY"];function Z(t,e){var n=this;this.manager=t,this.callback=e,this.element=t.element,this.target=t.options.inputTarget,this.domHandler=function(e){j(t.options.enable,[t])&&n.handler(e)},this.init()}function V(t,e,n){var r=n.pointers.length,i=n.changedPointers.length,o=1&e&&r-i==0,a=12&e&&r-i==0;n.isFirst=!!o,n.isFinal=!!a,o&&(t.session={}),n.eventType=e,function(t,e){var n=t.session,r=e.pointers,i=r.length;n.firstInput||(n.firstInput=B(e));i>1&&!n.firstMultiple?n.firstMultiple=B(e):1===i&&(n.firstMultiple=!1);var o=n.firstInput,a=n.firstMultiple,s=a?a.center:o.center,c=e.center=U(r);e.timeStamp=f(),e.deltaTime=e.timeStamp-o.timeStamp,e.angle=X(s,c),e.distance=H(s,c),function(t,e){var n=e.center,r=t.offsetDelta||{},i=t.prevDelta||{},o=t.prevInput||{};1!==e.eventType&&4!==o.eventType||(i=t.prevDelta={x:o.deltaX||0,y:o.deltaY||0},r=t.offsetDelta={x:n.x,y:n.y});e.deltaX=i.x+(n.x-r.x),e.deltaY=i.y+(n.y-r.y)}(n,e),e.offsetDirection=W(e.deltaX,e.deltaY);var u=q(e.deltaTime,e.deltaX,e.deltaY);e.overallVelocityX=u.x,e.overallVelocityY=u.y,e.overallVelocity=p(u.x)>p(u.y)?u.x:u.y,e.scale=a?(l=a.pointers,h=r,H(h[0],h[1],F)/H(l[0],l[1],F)):1,e.rotation=a?function(t,e){return X(e[1],e[0],F)+X(t[1],t[0],F)}(a.pointers,r):0,e.maxPointers=n.prevInput?e.pointers.length>n.prevInput.maxPointers?e.pointers.length:n.prevInput.maxPointers:e.pointers.length,function(t,e){var n,r,i,o,a=t.lastInterval||e,s=e.timeStamp-a.timeStamp;if(8!=e.eventType&&(s>25||void 0===a.velocity)){var c=e.deltaX-a.deltaX,u=e.deltaY-a.deltaY,l=q(s,c,u);r=l.x,i=l.y,n=p(l.x)>p(l.y)?l.x:l.y,o=W(c,u),t.lastInterval=e}else n=a.velocity,r=a.velocityX,i=a.velocityY,o=a.direction;e.velocity=n,e.velocityX=r,e.velocityY=i,e.direction=o}(n,e);var l,h;var d=t.element;M(e.srcEvent.target,d)&&(d=e.srcEvent.target);e.target=d}(t,n),t.emit("hammer.input",n),t.recognize(n),t.session.prevInput=n}function B(t){for(var e=[],n=0;n<t.pointers.length;)e[n]={clientX:h(t.pointers[n].clientX),clientY:h(t.pointers[n].clientY)},n++;return{timeStamp:f(),pointers:e,center:U(e),deltaX:t.deltaX,deltaY:t.deltaY}}function U(t){var e=t.length;if(1===e)return{x:h(t[0].clientX),y:h(t[0].clientY)};for(var n=0,r=0,i=0;i<e;)n+=t[i].clientX,r+=t[i].clientY,i++;return{x:h(n/e),y:h(r/e)}}function q(t,e,n){return{x:e/t||0,y:n/t||0}}function W(t,e){return t===e?1:p(t)>=p(e)?t<0?2:4:e<0?8:16}function H(t,e,n){n||(n=N);var r=e[n[0]]-t[n[0]],i=e[n[1]]-t[n[1]];return Math.sqrt(r*r+i*i)}function X(t,e,n){n||(n=N);var r=e[n[0]]-t[n[0]],i=e[n[1]]-t[n[1]];return 180*Math.atan2(i,r)/Math.PI}Z.prototype={handler:function(){},init:function(){this.evEl&&_(this.element,this.evEl,this.domHandler),this.evTarget&&_(this.target,this.evTarget,this.domHandler),this.evWin&&_(R(this.element),this.evWin,this.domHandler)},destroy:function(){this.evEl&&P(this.element,this.evEl,this.domHandler),this.evTarget&&P(this.target,this.evTarget,this.domHandler),this.evWin&&P(R(this.element),this.evWin,this.domHandler)}};var Y={mousedown:1,mousemove:2,mouseup:4};function G(){this.evEl="mousedown",this.evWin="mousemove mouseup",this.pressed=!1,Z.apply(this,arguments)}O(G,Z,{handler:function(t){var e=Y[t.type];1&e&&0===t.button&&(this.pressed=!0),2&e&&1!==t.which&&(e=4),this.pressed&&(4&e&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:"mouse",srcEvent:t}))}});var K={pointerdown:1,pointermove:2,pointerup:4,pointercancel:8,pointerout:8},Q={2:"touch",3:"pen",4:"mouse",5:"kinect"},J="pointerdown",$="pointermove pointerup pointercancel";function tt(){this.evEl=J,this.evWin=$,Z.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}i.MSPointerEvent&&!i.PointerEvent&&(J="MSPointerDown",$="MSPointerMove MSPointerUp MSPointerCancel"),O(tt,Z,{handler:function(t){var e=this.store,n=!1,r=t.type.toLowerCase().replace("ms",""),i=K[r],o=Q[t.pointerType]||t.pointerType,a="touch"==o,s=T(e,t.pointerId,"pointerId");1&i&&(0===t.button||a)?s<0&&(e.push(t),s=e.length-1):12&i&&(n=!0),s<0||(e[s]=t,this.callback(this.manager,i,{pointers:e,changedPointers:[t],pointerType:o,srcEvent:t}),n&&e.splice(s,1))}});var et={touchstart:1,touchmove:2,touchend:4,touchcancel:8};function nt(){this.evTarget="touchstart",this.evWin="touchstart touchmove touchend touchcancel",this.started=!1,Z.apply(this,arguments)}function rt(t,e){var n=k(t.touches),r=k(t.changedTouches);return 12&e&&(n=D(n.concat(r),"identifier",!0)),[n,r]}O(nt,Z,{handler:function(t){var e=et[t.type];if(1===e&&(this.started=!0),this.started){var n=rt.call(this,t,e);12&e&&n[0].length-n[1].length==0&&(this.started=!1),this.callback(this.manager,e,{pointers:n[0],changedPointers:n[1],pointerType:"touch",srcEvent:t})}}});var it={touchstart:1,touchmove:2,touchend:4,touchcancel:8};function ot(){this.evTarget="touchstart touchmove touchend touchcancel",this.targetIds={},Z.apply(this,arguments)}function at(t,e){var n=k(t.touches),r=this.targetIds;if(3&e&&1===n.length)return r[n[0].identifier]=!0,[n,n];var i,o,a=k(t.changedTouches),s=[],c=this.target;if(o=n.filter((function(t){return M(t.target,c)})),1===e)for(i=0;i<o.length;)r[o[i].identifier]=!0,i++;for(i=0;i<a.length;)r[a[i].identifier]&&s.push(a[i]),12&e&&delete r[a[i].identifier],i++;return s.length?[D(o.concat(s),"identifier",!0),s]:void 0}O(ot,Z,{handler:function(t){var e=it[t.type],n=at.call(this,t,e);n&&this.callback(this.manager,e,{pointers:n[0],changedPointers:n[1],pointerType:"touch",srcEvent:t})}});function st(){Z.apply(this,arguments);var t=w(this.handler,this);this.touch=new ot(this.manager,t),this.mouse=new G(this.manager,t),this.primaryTouch=null,this.lastTouches=[]}function ct(t,e){1&t?(this.primaryTouch=e.changedPointers[0].identifier,ut.call(this,e)):12&t&&ut.call(this,e)}function ut(t){var e=t.changedPointers[0];if(e.identifier===this.primaryTouch){var n={x:e.clientX,y:e.clientY};this.lastTouches.push(n);var r=this.lastTouches;setTimeout((function(){var t=r.indexOf(n);t>-1&&r.splice(t,1)}),2500)}}function lt(t){for(var e=t.srcEvent.clientX,n=t.srcEvent.clientY,r=0;r<this.lastTouches.length;r++){var i=this.lastTouches[r],o=Math.abs(e-i.x),a=Math.abs(n-i.y);if(o<=25&&a<=25)return!0}return!1}O(st,Z,{handler:function(t,e,n){var r="touch"==n.pointerType,i="mouse"==n.pointerType;if(!(i&&n.sourceCapabilities&&n.sourceCapabilities.firesTouchEvents)){if(r)ct.call(this,e,n);else if(i&&lt.call(this,n))return;this.callback(t,e,n)}},destroy:function(){this.touch.destroy(),this.mouse.destroy()}});var ht=C(l.style,"touchAction"),pt=void 0!==ht,ft=function(){if(!pt)return!1;var t={},e=i.CSS&&i.CSS.supports;return["auto","manipulation","pan-y","pan-x","pan-x pan-y","none"].forEach((function(n){t[n]=!e||i.CSS.supports("touch-action",n)})),t}();function dt(t,e){this.manager=t,this.set(e)}dt.prototype={set:function(t){"compute"==t&&(t=this.compute()),pt&&this.manager.element.style&&ft[t]&&(this.manager.element.style[ht]=t),this.actions=t.toLowerCase().trim()},update:function(){this.set(this.manager.options.touchAction)},compute:function(){var t=[];return g(this.manager.recognizers,(function(e){j(e.options.enable,[e])&&(t=t.concat(e.getTouchAction()))})),function(t){if(S(t,"none"))return"none";var e=S(t,"pan-x"),n=S(t,"pan-y");if(e&&n)return"none";if(e||n)return e?"pan-x":"pan-y";if(S(t,"manipulation"))return"manipulation";return"auto"}(t.join(" "))},preventDefaults:function(t){var e=t.srcEvent,n=t.offsetDirection;if(this.manager.session.prevented)e.preventDefault();else{var r=this.actions,i=S(r,"none")&&!ft.none,o=S(r,"pan-y")&&!ft["pan-y"],a=S(r,"pan-x")&&!ft["pan-x"];if(i){var s=1===t.pointers.length,c=t.distance<2,u=t.deltaTime<250;if(s&&c&&u)return}if(!a||!o)return i||o&&6&n||a&&24&n?this.preventSrc(e):void 0}},preventSrc:function(t){this.manager.session.prevented=!0,t.preventDefault()}};function vt(t){this.options=c({},this.defaults,t||{}),this.id=I++,this.manager=null,this.options.enable=E(this.options.enable,!0),this.state=1,this.simultaneous={},this.requireFail=[]}function gt(t){return 16&t?"cancel":8&t?"end":4&t?"move":2&t?"start":""}function mt(t){return 16==t?"down":8==t?"up":2==t?"left":4==t?"right":""}function bt(t,e){var n=e.manager;return n?n.get(t):t}function yt(){vt.apply(this,arguments)}function Ot(){yt.apply(this,arguments),this.pX=null,this.pY=null}function wt(){yt.apply(this,arguments)}function jt(){vt.apply(this,arguments),this._timer=null,this._input=null}function Et(){yt.apply(this,arguments)}function _t(){yt.apply(this,arguments)}function Pt(){vt.apply(this,arguments),this.pTime=!1,this.pCenter=!1,this._timer=null,this._input=null,this.count=0}function Mt(t,e){return(e=e||{}).recognizers=E(e.recognizers,Mt.defaults.preset),new St(t,e)}vt.prototype={defaults:{},set:function(t){return c(this.options,t),this.manager&&this.manager.touchAction.update(),this},recognizeWith:function(t){if(v(t,"recognizeWith",this))return this;var e=this.simultaneous;return e[(t=bt(t,this)).id]||(e[t.id]=t,t.recognizeWith(this)),this},dropRecognizeWith:function(t){return v(t,"dropRecognizeWith",this)||(t=bt(t,this),delete this.simultaneous[t.id]),this},requireFailure:function(t){if(v(t,"requireFailure",this))return this;var e=this.requireFail;return-1===T(e,t=bt(t,this))&&(e.push(t),t.requireFailure(this)),this},dropRequireFailure:function(t){if(v(t,"dropRequireFailure",this))return this;t=bt(t,this);var e=T(this.requireFail,t);return e>-1&&this.requireFail.splice(e,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(t){return!!this.simultaneous[t.id]},emit:function(t){var e=this,n=this.state;function r(n){e.manager.emit(n,t)}n<8&&r(e.options.event+gt(n)),r(e.options.event),t.additionalEvent&&r(t.additionalEvent),n>=8&&r(e.options.event+gt(n))},tryEmit:function(t){if(this.canEmit())return this.emit(t);this.state=32},canEmit:function(){for(var t=0;t<this.requireFail.length;){if(!(33&this.requireFail[t].state))return!1;t++}return!0},recognize:function(t){var e=c({},t);if(!j(this.options.enable,[this,e]))return this.reset(),void(this.state=32);56&this.state&&(this.state=1),this.state=this.process(e),30&this.state&&this.tryEmit(e)},process:function(t){},getTouchAction:function(){},reset:function(){}},O(yt,vt,{defaults:{pointers:1},attrTest:function(t){var e=this.options.pointers;return 0===e||t.pointers.length===e},process:function(t){var e=this.state,n=t.eventType,r=6&e,i=this.attrTest(t);return r&&(8&n||!i)?16|e:r||i?4&n?8|e:2&e?4|e:2:32}}),O(Ot,yt,{defaults:{event:"pan",threshold:10,pointers:1,direction:30},getTouchAction:function(){var t=this.options.direction,e=[];return 6&t&&e.push("pan-y"),24&t&&e.push("pan-x"),e},directionTest:function(t){var e=this.options,n=!0,r=t.distance,i=t.direction,o=t.deltaX,a=t.deltaY;return i&e.direction||(6&e.direction?(i=0===o?1:o<0?2:4,n=o!=this.pX,r=Math.abs(t.deltaX)):(i=0===a?1:a<0?8:16,n=a!=this.pY,r=Math.abs(t.deltaY))),t.direction=i,n&&r>e.threshold&&i&e.direction},attrTest:function(t){return yt.prototype.attrTest.call(this,t)&&(2&this.state||!(2&this.state)&&this.directionTest(t))},emit:function(t){this.pX=t.deltaX,this.pY=t.deltaY;var e=mt(t.direction);e&&(t.additionalEvent=this.options.event+e),this._super.emit.call(this,t)}}),O(wt,yt,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return["none"]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.scale-1)>this.options.threshold||2&this.state)},emit:function(t){if(1!==t.scale){var e=t.scale<1?"in":"out";t.additionalEvent=this.options.event+e}this._super.emit.call(this,t)}}),O(jt,vt,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return["auto"]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,r=t.distance<e.threshold,i=t.deltaTime>e.time;if(this._input=t,!r||!n||12&t.eventType&&!i)this.reset();else if(1&t.eventType)this.reset(),this._timer=d((function(){this.state=8,this.tryEmit()}),e.time,this);else if(4&t.eventType)return 8;return 32},reset:function(){clearTimeout(this._timer)},emit:function(t){8===this.state&&(t&&4&t.eventType?this.manager.emit(this.options.event+"up",t):(this._input.timeStamp=f(),this.manager.emit(this.options.event,this._input)))}}),O(Et,yt,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return["none"]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.rotation)>this.options.threshold||2&this.state)}}),O(_t,yt,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:30,pointers:1},getTouchAction:function(){return Ot.prototype.getTouchAction.call(this)},attrTest:function(t){var e,n=this.options.direction;return 30&n?e=t.overallVelocity:6&n?e=t.overallVelocityX:24&n&&(e=t.overallVelocityY),this._super.attrTest.call(this,t)&&n&t.offsetDirection&&t.distance>this.options.threshold&&t.maxPointers==this.options.pointers&&p(e)>this.options.velocity&&4&t.eventType},emit:function(t){var e=mt(t.offsetDirection);e&&this.manager.emit(this.options.event+e,t),this.manager.emit(this.options.event,t)}}),O(Pt,vt,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return["manipulation"]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,r=t.distance<e.threshold,i=t.deltaTime<e.time;if(this.reset(),1&t.eventType&&0===this.count)return this.failTimeout();if(r&&i&&n){if(4!=t.eventType)return this.failTimeout();var o=!this.pTime||t.timeStamp-this.pTime<e.interval,a=!this.pCenter||H(this.pCenter,t.center)<e.posThreshold;if(this.pTime=t.timeStamp,this.pCenter=t.center,a&&o?this.count+=1:this.count=1,this._input=t,0===this.count%e.taps)return this.hasRequireFailures()?(this._timer=d((function(){this.state=8,this.tryEmit()}),e.interval,this),2):8}return 32},failTimeout:function(){return this._timer=d((function(){this.state=32}),this.options.interval,this),32},reset:function(){clearTimeout(this._timer)},emit:function(){8==this.state&&(this._input.tapCount=this.count,this.manager.emit(this.options.event,this._input))}}),Mt.VERSION="2.0.7",Mt.defaults={domEvents:!1,touchAction:"compute",enable:!0,inputTarget:null,inputClass:null,preset:[[Et,{enable:!1}],[wt,{enable:!1},["rotate"]],[_t,{direction:6}],[Ot,{direction:6},["swipe"]],[Pt],[Pt,{event:"doubletap",taps:2},["tap"]],[jt]],cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}};function St(t,e){var n;this.options=c({},Mt.defaults,e||{}),this.options.inputTarget=this.options.inputTarget||t,this.handlers={},this.session={},this.recognizers=[],this.oldCssProps={},this.element=t,this.input=new((n=this).options.inputClass||(L?tt:z?ot:A?st:G))(n,V),this.touchAction=new dt(this,this.options.touchAction),xt(this,!0),g(this.options.recognizers,(function(t){var e=this.add(new t[0](t[1]));t[2]&&e.recognizeWith(t[2]),t[3]&&e.requireFailure(t[3])}),this)}function xt(t,e){var n,r=t.element;r.style&&(g(t.options.cssProps,(function(i,o){n=C(r.style,o),e?(t.oldCssProps[n]=r.style[n],r.style[n]=i):r.style[n]=t.oldCssProps[n]||""})),e||(t.oldCssProps={}))}St.prototype={set:function(t){return c(this.options,t),t.touchAction&&this.touchAction.update(),t.inputTarget&&(this.input.destroy(),this.input.target=t.inputTarget,this.input.init()),this},stop:function(t){this.session.stopped=t?2:1},recognize:function(t){var e=this.session;if(!e.stopped){var n;this.touchAction.preventDefaults(t);var r=this.recognizers,i=e.curRecognizer;(!i||i&&8&i.state)&&(i=e.curRecognizer=null);for(var o=0;o<r.length;)n=r[o],2===e.stopped||i&&n!=i&&!n.canRecognizeWith(i)?n.reset():n.recognize(t),!i&&14&n.state&&(i=e.curRecognizer=n),o++}},get:function(t){if(t instanceof vt)return t;for(var e=this.recognizers,n=0;n<e.length;n++)if(e[n].options.event==t)return e[n];return null},add:function(t){if(v(t,"add",this))return this;var e=this.get(t.options.event);return e&&this.remove(e),this.recognizers.push(t),t.manager=this,this.touchAction.update(),t},remove:function(t){if(v(t,"remove",this))return this;if(t=this.get(t)){var e=this.recognizers,n=T(e,t);-1!==n&&(e.splice(n,1),this.touchAction.update())}return this},on:function(t,e){if(void 0!==t&&void 0!==e){var n=this.handlers;return g(x(t),(function(t){n[t]=n[t]||[],n[t].push(e)})),this}},off:function(t,e){if(void 0!==t){var n=this.handlers;return g(x(t),(function(t){e?n[t]&&n[t].splice(T(n[t],e),1):delete n[t]})),this}},emit:function(t,e){this.options.domEvents&&function(t,e){var n=o.createEvent("Event");n.initEvent(t,!0,!0),n.gesture=e,e.target.dispatchEvent(n)}(t,e);var n=this.handlers[t]&&this.handlers[t].slice();if(n&&n.length){e.type=t,e.preventDefault=function(){e.srcEvent.preventDefault()};for(var r=0;r<n.length;)n[r](e),r++}},destroy:function(){this.element&&xt(this,!1),this.handlers={},this.session={},this.input.destroy(),this.element=null}},c(Mt,{INPUT_START:1,INPUT_MOVE:2,INPUT_END:4,INPUT_CANCEL:8,STATE_POSSIBLE:1,STATE_BEGAN:2,STATE_CHANGED:4,STATE_ENDED:8,STATE_RECOGNIZED:8,STATE_CANCELLED:16,STATE_FAILED:32,DIRECTION_NONE:1,DIRECTION_LEFT:2,DIRECTION_RIGHT:4,DIRECTION_UP:8,DIRECTION_DOWN:16,DIRECTION_HORIZONTAL:6,DIRECTION_VERTICAL:24,DIRECTION_ALL:30,Manager:St,Input:Z,TouchAction:dt,TouchInput:ot,MouseInput:G,PointerEventInput:tt,TouchMouseInput:st,SingleTouchInput:nt,Recognizer:vt,AttrRecognizer:yt,Tap:Pt,Pan:Ot,Swipe:_t,Pinch:wt,Rotate:Et,Press:jt,on:_,off:P,each:g,merge:y,extend:b,assign:c,inherit:O,bindFn:w,prefixed:C}),(void 0!==i?i:"undefined"!=typeof self?self:{}).Hammer=Mt,void 0===(r=function(){return Mt}.call(e,n,e,t))||(t.exports=r)}(window,document)},Z2JM:function(t,e,n){"use strict";(function(t){n.d(e,"a",(function(){return u}));var r=n("W0B4"),i=n("Zs1x"),o=n("uR8M");var a={container:r.object,gl:r.object,mapboxApiAccessToken:r.string,mapboxApiUrl:r.string,attributionControl:r.bool,preserveDrawingBuffer:r.bool,reuseMaps:r.bool,transformRequest:r.func,mapOptions:r.object,mapStyle:r.oneOfType([r.string,r.object]),preventStyleDiffing:r.bool,visible:r.bool,asyncRender:r.bool,onLoad:r.func,onError:r.func,width:r.number,height:r.number,viewState:r.object,longitude:r.number,latitude:r.number,zoom:r.number,bearing:r.number,pitch:r.number,altitude:r.number},s={container:i.a.body,mapboxApiAccessToken:function(){var e=null;if("undefined"!=typeof window&&window.location){var n=window.location.search.match(/access_token=([^&\/]*)/);e=n&&n[1]}e||void 0===t||(e=e||"pk.eyJ1IjoidWNmLW1hcGJveCIsImEiOiJja2tyNHQzdnIzYmNnMndwZGI3djNzdjVyIn0.xgCXV9mLZ47q7easx6WLCQ");return e||"no-token"}(),mapboxApiUrl:"https://api.mapbox.com",preserveDrawingBuffer:!1,attributionControl:!0,reuseMaps:!1,mapOptions:{},mapStyle:"mapbox://styles/mapbox/light-v8",preventStyleDiffing:!1,visible:!0,asyncRender:!1,onLoad:function(){},onError:function(t){t&&console.error(t.error)},width:0,height:0,longitude:0,latitude:0,zoom:0,bearing:0,pitch:0,altitude:1.5};function c(t,e){void 0===e&&(e="component"),t.debug&&r.checkPropTypes(a,t,"prop",e)}var u=function(){function t(e){var n=this;if(this.props=s,this.width=0,this.height=0,this._fireLoadEvent=function(){n.props.onLoad({type:"load",target:n._map})},this._handleError=function(t){n.props.onError(t)},!e.mapboxgl)throw new Error("Mapbox not available");this.mapboxgl=e.mapboxgl,t.initialized||(t.initialized=!0,this._checkStyleSheet(this.mapboxgl.version)),this._initialize(e)}var e=t.prototype;return e.finalize=function(){return this._destroy(),this},e.setProps=function(t){return this._update(this.props,t),this},e.redraw=function(){var t=this._map;t.style&&(t._frame&&(t._frame.cancel(),t._frame=null),t._render())},e.getMap=function(){return this._map},e._reuse=function(e){this._map=t.savedMap;var n=this._map.getContainer(),r=e.container;for(r.classList.add("mapboxgl-map");n.childNodes.length>0;)r.appendChild(n.childNodes[0]);this._map._container=r,t.savedMap=null,e.mapStyle&&this._map.setStyle(Object(o.a)(e.mapStyle),{diff:!1}),this._map.isStyleLoaded()?this._fireLoadEvent():this._map.once("styledata",this._fireLoadEvent)},e._create=function(e){if(e.reuseMaps&&t.savedMap)this._reuse(e);else{if(e.gl){var n=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(){return HTMLCanvasElement.prototype.getContext=n,e.gl}}var r={container:e.container,center:[0,0],zoom:8,pitch:0,bearing:0,maxZoom:24,style:Object(o.a)(e.mapStyle),interactive:!1,trackResize:!1,attributionControl:e.attributionControl,preserveDrawingBuffer:e.preserveDrawingBuffer};e.transformRequest&&(r.transformRequest=e.transformRequest),this._map=new this.mapboxgl.Map(Object.assign({},r,e.mapOptions)),this._map.once("load",this._fireLoadEvent),this._map.on("error",this._handleError)}return this},e._destroy=function(){this._map&&(this.props.reuseMaps&&!t.savedMap?(t.savedMap=this._map,this._map.off("load",this._fireLoadEvent),this._map.off("error",this._handleError),this._map.off("styledata",this._fireLoadEvent)):this._map.remove(),this._map=null)},e._initialize=function(t){var e=this;c(t=Object.assign({},s,t),"Mapbox"),this.mapboxgl.accessToken=t.mapboxApiAccessToken||s.mapboxApiAccessToken,this.mapboxgl.baseApiUrl=t.mapboxApiUrl,this._create(t);var n=t.container;Object.defineProperty(n,"offsetWidth",{get:function(){return e.width}}),Object.defineProperty(n,"clientWidth",{get:function(){return e.width}}),Object.defineProperty(n,"offsetHeight",{get:function(){return e.height}}),Object.defineProperty(n,"clientHeight",{get:function(){return e.height}});var r=this._map.getCanvas();r&&(r.style.outline="none"),this._updateMapViewport({},t),this._updateMapSize({},t),this.props=t},e._update=function(t,e){if(this._map){c(e=Object.assign({},this.props,e),"Mapbox");var n=this._updateMapViewport(t,e),r=this._updateMapSize(t,e);this._updateMapStyle(t,e),e.asyncRender||!n&&!r||this.redraw(),this.props=e}},e._updateMapStyle=function(t,e){t.mapStyle!==e.mapStyle&&this._map.setStyle(Object(o.a)(e.mapStyle),{diff:!e.preventStyleDiffing})},e._updateMapSize=function(t,e){var n=t.width!==e.width||t.height!==e.height;return n&&(this.width=e.width,this.height=e.height,this._map.resize()),n},e._updateMapViewport=function(t,e){var n=this._getViewState(t),r=this._getViewState(e),i=r.latitude!==n.latitude||r.longitude!==n.longitude||r.zoom!==n.zoom||r.pitch!==n.pitch||r.bearing!==n.bearing||r.altitude!==n.altitude;return i&&(this._map.jumpTo(this._viewStateToMapboxProps(r)),r.altitude!==n.altitude&&(this._map.transform.altitude=r.altitude)),i},e._getViewState=function(t){var e=t.viewState||t,n=e.longitude,r=e.latitude,i=e.zoom,o=e.pitch,a=void 0===o?0:o,s=e.bearing,c=void 0===s?0:s,u=e.altitude;return{longitude:n,latitude:r,zoom:i,pitch:a,bearing:c,altitude:void 0===u?1.5:u}},e._checkStyleSheet=function(t){if(void 0===t&&(t="0.47.0"),void 0!==i.a)try{var e=i.a.createElement("div");if(e.className="mapboxgl-map",e.style.display="none",i.a.body.appendChild(e),!("static"!==window.getComputedStyle(e).position)){var n=i.a.createElement("link");n.setAttribute("rel","stylesheet"),n.setAttribute("type","text/css"),n.setAttribute("href","https://api.tiles.mapbox.com/mapbox-gl-js/v"+t+"/mapbox-gl.css"),i.a.head.appendChild(n)}}catch(r){}},e._viewStateToMapboxProps=function(t){return{center:[t.longitude,t.latitude],zoom:t.zoom,bearing:t.bearing,pitch:t.pitch}},t}();u.initialized=!1,u.propTypes=a,u.defaultProps=s,u.savedMap=null}).call(this,n("8oxB"))},ZaHm:function(t,e,n){"use strict";n.d(e,"b",(function(){return i})),n.d(e,"c",(function(){return o})),n.d(e,"h",(function(){return a})),n.d(e,"g",(function(){return s})),n.d(e,"e",(function(){return c})),n.d(e,"f",(function(){return u})),n.d(e,"d",(function(){return l})),n.d(e,"a",(function(){return h}));n("QFcT");var r=n("yU0y");function i(t,e){var n=e[0],r=e[1],i=e[2],o=e[3],a=e[4],s=e[5],c=e[6],u=e[7],l=e[8],h=e[9],p=e[10],f=e[11],d=e[12],v=e[13],g=e[14],m=e[15],b=n*s-r*a,y=n*c-i*a,O=n*u-o*a,w=r*c-i*s,j=r*u-o*s,E=i*u-o*c,_=l*v-h*d,P=l*g-p*d,M=l*m-f*d,S=h*g-p*v,x=h*m-f*v,T=p*m-f*g,k=b*T-y*x+O*S+w*M-j*P+E*_;return k?(k=1/k,t[0]=(s*T-c*x+u*S)*k,t[1]=(i*x-r*T-o*S)*k,t[2]=(v*E-g*j+m*w)*k,t[3]=(p*j-h*E-f*w)*k,t[4]=(c*M-a*T-u*P)*k,t[5]=(n*T-i*M+o*P)*k,t[6]=(g*O-d*E-m*y)*k,t[7]=(l*E-p*O+f*y)*k,t[8]=(a*x-s*M+u*_)*k,t[9]=(r*M-n*x-o*_)*k,t[10]=(d*j-v*O+m*b)*k,t[11]=(h*O-l*j-f*b)*k,t[12]=(s*P-a*S-c*_)*k,t[13]=(n*S-r*P+i*_)*k,t[14]=(v*y-d*w-g*b)*k,t[15]=(l*w-h*y+p*b)*k,t):null}function o(t,e,n){var r=e[0],i=e[1],o=e[2],a=e[3],s=e[4],c=e[5],u=e[6],l=e[7],h=e[8],p=e[9],f=e[10],d=e[11],v=e[12],g=e[13],m=e[14],b=e[15],y=n[0],O=n[1],w=n[2],j=n[3];return t[0]=y*r+O*s+w*h+j*v,t[1]=y*i+O*c+w*p+j*g,t[2]=y*o+O*u+w*f+j*m,t[3]=y*a+O*l+w*d+j*b,y=n[4],O=n[5],w=n[6],j=n[7],t[4]=y*r+O*s+w*h+j*v,t[5]=y*i+O*c+w*p+j*g,t[6]=y*o+O*u+w*f+j*m,t[7]=y*a+O*l+w*d+j*b,y=n[8],O=n[9],w=n[10],j=n[11],t[8]=y*r+O*s+w*h+j*v,t[9]=y*i+O*c+w*p+j*g,t[10]=y*o+O*u+w*f+j*m,t[11]=y*a+O*l+w*d+j*b,y=n[12],O=n[13],w=n[14],j=n[15],t[12]=y*r+O*s+w*h+j*v,t[13]=y*i+O*c+w*p+j*g,t[14]=y*o+O*u+w*f+j*m,t[15]=y*a+O*l+w*d+j*b,t}function a(t,e,n){var r,i,o,a,s,c,u,l,h,p,f,d,v=n[0],g=n[1],m=n[2];return e===t?(t[12]=e[0]*v+e[4]*g+e[8]*m+e[12],t[13]=e[1]*v+e[5]*g+e[9]*m+e[13],t[14]=e[2]*v+e[6]*g+e[10]*m+e[14],t[15]=e[3]*v+e[7]*g+e[11]*m+e[15]):(r=e[0],i=e[1],o=e[2],a=e[3],s=e[4],c=e[5],u=e[6],l=e[7],h=e[8],p=e[9],f=e[10],d=e[11],t[0]=r,t[1]=i,t[2]=o,t[3]=a,t[4]=s,t[5]=c,t[6]=u,t[7]=l,t[8]=h,t[9]=p,t[10]=f,t[11]=d,t[12]=r*v+s*g+h*m+e[12],t[13]=i*v+c*g+p*m+e[13],t[14]=o*v+u*g+f*m+e[14],t[15]=a*v+l*g+d*m+e[15]),t}function s(t,e,n){var r=n[0],i=n[1],o=n[2];return t[0]=e[0]*r,t[1]=e[1]*r,t[2]=e[2]*r,t[3]=e[3]*r,t[4]=e[4]*i,t[5]=e[5]*i,t[6]=e[6]*i,t[7]=e[7]*i,t[8]=e[8]*o,t[9]=e[9]*o,t[10]=e[10]*o,t[11]=e[11]*o,t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15],t}function c(t,e,n){var r=Math.sin(n),i=Math.cos(n),o=e[4],a=e[5],s=e[6],c=e[7],u=e[8],l=e[9],h=e[10],p=e[11];return e!==t&&(t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15]),t[4]=o*i+u*r,t[5]=a*i+l*r,t[6]=s*i+h*r,t[7]=c*i+p*r,t[8]=u*i-o*r,t[9]=l*i-a*r,t[10]=h*i-s*r,t[11]=p*i-c*r,t}function u(t,e,n){var r=Math.sin(n),i=Math.cos(n),o=e[0],a=e[1],s=e[2],c=e[3],u=e[4],l=e[5],h=e[6],p=e[7];return e!==t&&(t[8]=e[8],t[9]=e[9],t[10]=e[10],t[11]=e[11],t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15]),t[0]=o*i+u*r,t[1]=a*i+l*r,t[2]=s*i+h*r,t[3]=c*i+p*r,t[4]=u*i-o*r,t[5]=l*i-a*r,t[6]=h*i-s*r,t[7]=p*i-c*r,t}function l(t,e,n,r,i){var o,a=1/Math.tan(e/2);return t[0]=a/n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=a,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[11]=-1,t[12]=0,t[13]=0,t[15]=0,null!=i&&i!==1/0?(o=1/(r-i),t[10]=(i+r)*o,t[14]=2*i*r*o):(t[10]=-1,t[14]=-2*r),t}function h(t,e){var n=t[0],i=t[1],o=t[2],a=t[3],s=t[4],c=t[5],u=t[6],l=t[7],h=t[8],p=t[9],f=t[10],d=t[11],v=t[12],g=t[13],m=t[14],b=t[15],y=e[0],O=e[1],w=e[2],j=e[3],E=e[4],_=e[5],P=e[6],M=e[7],S=e[8],x=e[9],T=e[10],k=e[11],D=e[12],C=e[13],I=e[14],R=e[15];return Math.abs(n-y)<=r.b*Math.max(1,Math.abs(n),Math.abs(y))&&Math.abs(i-O)<=r.b*Math.max(1,Math.abs(i),Math.abs(O))&&Math.abs(o-w)<=r.b*Math.max(1,Math.abs(o),Math.abs(w))&&Math.abs(a-j)<=r.b*Math.max(1,Math.abs(a),Math.abs(j))&&Math.abs(s-E)<=r.b*Math.max(1,Math.abs(s),Math.abs(E))&&Math.abs(c-_)<=r.b*Math.max(1,Math.abs(c),Math.abs(_))&&Math.abs(u-P)<=r.b*Math.max(1,Math.abs(u),Math.abs(P))&&Math.abs(l-M)<=r.b*Math.max(1,Math.abs(l),Math.abs(M))&&Math.abs(h-S)<=r.b*Math.max(1,Math.abs(h),Math.abs(S))&&Math.abs(p-x)<=r.b*Math.max(1,Math.abs(p),Math.abs(x))&&Math.abs(f-T)<=r.b*Math.max(1,Math.abs(f),Math.abs(T))&&Math.abs(d-k)<=r.b*Math.max(1,Math.abs(d),Math.abs(k))&&Math.abs(v-D)<=r.b*Math.max(1,Math.abs(v),Math.abs(D))&&Math.abs(g-C)<=r.b*Math.max(1,Math.abs(g),Math.abs(C))&&Math.abs(m-I)<=r.b*Math.max(1,Math.abs(m),Math.abs(I))&&Math.abs(b-R)<=r.b*Math.max(1,Math.abs(b),Math.abs(R))}},Zs1x:function(t,e,n){"use strict";(function(t){n.d(e,"a",(function(){return r}));"undefined"!=typeof window&&window,void 0!==t||window;var r="undefined"!=typeof document?document:{}}).call(this,n("yLpj"))},ZxFD:function(t,e,n){"use strict";n.d(e,"a",(function(){return i})),n.d(e,"e",(function(){return o})),n.d(e,"b",(function(){return a})),n.d(e,"d",(function(){return s})),n.d(e,"c",(function(){return c})),n.d(e,"f",(function(){return h}));n("QFcT");var r=n("yU0y");function i(t,e,n){return t[0]=e[0]+n[0],t[1]=e[1]+n[1],t}function o(t,e,n){return t[0]=e[0]*n,t[1]=e[1]*n,t}function a(t){var e=t[0],n=t[1];return Math.hypot(e,n)}function s(t,e){return t[0]=-e[0],t[1]=-e[1],t}function c(t,e,n,r){var i=e[0],o=e[1];return t[0]=i+r*(n[0]-i),t[1]=o+r*(n[1]-o),t}var u,l,h=function(t,e,n){return t[0]=e[0]-n[0],t[1]=e[1]-n[1],t};u=new r.a(2),r.a!=Float32Array&&(u[0]=0,u[1]=0),l=u},bl9R:function(t,e,n){"use strict";n.d(e,"a",(function(){return i})),n.d(e,"b",(function(){return o}));n("QFcT");var r=n("yU0y");function i(t,e,n){return t[0]=e[0]*n,t[1]=e[1]*n,t[2]=e[2]*n,t[3]=e[3]*n,t}function o(t,e,n){var r=e[0],i=e[1],o=e[2],a=e[3];return t[0]=n[0]*r+n[4]*i+n[8]*o+n[12]*a,t[1]=n[1]*r+n[5]*i+n[9]*o+n[13]*a,t[2]=n[2]*r+n[6]*i+n[10]*o+n[14]*a,t[3]=n[3]*r+n[7]*i+n[11]*o+n[15]*a,t}var a,s;a=new r.a(4),r.a!=Float32Array&&(a[0]=0,a[1]=0,a[2]=0,a[3]=0),s=a},iXzu:function(t,e,n){"use strict";(function(t){n("E9XD");var r=function(){if("undefined"!=typeof Map)return Map;function t(t,e){var n=-1;return t.some((function(t,r){return t[0]===e&&(n=r,!0)})),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var n=t(this.__entries__,e),r=this.__entries__[n];return r&&r[1]},e.prototype.set=function(e,n){var r=t(this.__entries__,e);~r?this.__entries__[r][1]=n:this.__entries__.push([e,n])},e.prototype.delete=function(e){var n=this.__entries__,r=t(n,e);~r&&n.splice(r,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(t,e){void 0===e&&(e=null);for(var n=0,r=this.__entries__;n<r.length;n++){var i=r[n];t.call(e,i[1],i[0])}},e}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,o=void 0!==t&&t.Math===Math?t:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),a="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(o):function(t){return setTimeout((function(){return t(Date.now())}),1e3/60)};var s=["top","right","bottom","left","width","height","size","weight"],c="undefined"!=typeof MutationObserver,u=function(){function t(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t,e){var n=!1,r=!1,i=0;function o(){n&&(n=!1,t()),r&&c()}function s(){a(o)}function c(){var t=Date.now();if(n){if(t-i<2)return;r=!0}else n=!0,r=!1,setTimeout(s,e);i=t}return c}(this.refresh.bind(this),20)}return t.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},t.prototype.removeObserver=function(t){var e=this.observers_,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this.connected_&&this.disconnect_()},t.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},t.prototype.updateObservers_=function(){var t=this.observers_.filter((function(t){return t.gatherActive(),t.hasActive()}));return t.forEach((function(t){return t.broadcastActive()})),t.length>0},t.prototype.connect_=function(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),c?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){i&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,n=void 0===e?"":e;s.some((function(t){return!!~n.indexOf(t)}))&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),l=function(t,e){for(var n=0,r=Object.keys(e);n<r.length;n++){var i=r[n];Object.defineProperty(t,i,{value:e[i],enumerable:!1,writable:!1,configurable:!0})}return t},h=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||o},p=b(0,0,0,0);function f(t){return parseFloat(t)||0}function d(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return e.reduce((function(e,n){return e+f(t["border-"+n+"-width"])}),0)}function v(t){var e=t.clientWidth,n=t.clientHeight;if(!e&&!n)return p;var r=h(t).getComputedStyle(t),i=function(t){for(var e={},n=0,r=["top","right","bottom","left"];n<r.length;n++){var i=r[n],o=t["padding-"+i];e[i]=f(o)}return e}(r),o=i.left+i.right,a=i.top+i.bottom,s=f(r.width),c=f(r.height);if("border-box"===r.boxSizing&&(Math.round(s+o)!==e&&(s-=d(r,"left","right")+o),Math.round(c+a)!==n&&(c-=d(r,"top","bottom")+a)),!function(t){return t===h(t).document.documentElement}(t)){var u=Math.round(s+o)-e,l=Math.round(c+a)-n;1!==Math.abs(u)&&(s-=u),1!==Math.abs(l)&&(c-=l)}return b(i.left,i.top,s,c)}var g="undefined"!=typeof SVGGraphicsElement?function(t){return t instanceof h(t).SVGGraphicsElement}:function(t){return t instanceof h(t).SVGElement&&"function"==typeof t.getBBox};function m(t){return i?g(t)?function(t){var e=t.getBBox();return b(0,0,e.width,e.height)}(t):v(t):p}function b(t,e,n,r){return{x:t,y:e,width:n,height:r}}var y=function(){function t(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=b(0,0,0,0),this.target=t}return t.prototype.isActive=function(){var t=m(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t.prototype.broadcastRect=function(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t}(),O=function(t,e){var n,r,i,o,a,s,c,u=(r=(n=e).x,i=n.y,o=n.width,a=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,c=Object.create(s.prototype),l(c,{x:r,y:i,width:o,height:a,top:i,right:r+o,bottom:a+i,left:r}),c);l(this,{target:t,contentRect:u})},w=function(){function t(t,e,n){if(this.activeObservations_=[],this.observations_=new r,"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=t,this.controller_=e,this.callbackCtx_=n}return t.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof h(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)||(e.set(t,new y(t)),this.controller_.addObserver(this),this.controller_.refresh())}},t.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof h(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)&&(e.delete(t),e.size||this.controller_.removeObserver(this))}},t.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},t.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach((function(e){e.isActive()&&t.activeObservations_.push(e)}))},t.prototype.broadcastActive=function(){if(this.hasActive()){var t=this.callbackCtx_,e=this.activeObservations_.map((function(t){return new O(t.target,t.broadcastRect())}));this.callback_.call(t,e,t),this.clearActive()}},t.prototype.clearActive=function(){this.activeObservations_.splice(0)},t.prototype.hasActive=function(){return this.activeObservations_.length>0},t}(),j="undefined"!=typeof WeakMap?new WeakMap:new r,E=function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=u.getInstance(),r=new w(e,n,this);j.set(this,r)};["observe","unobserve","disconnect"].forEach((function(t){E.prototype[t]=function(){var e;return(e=j.get(this))[t].apply(e,arguments)}}));var _=void 0!==o.ResizeObserver?o.ResizeObserver:E;e.a=_}).call(this,n("yLpj"))},"n+fv":function(t,e,n){"use strict";n.d(e,"a",(function(){return i})),n.d(e,"c",(function(){return o})),n.d(e,"b",(function(){return c}));n("QFcT");var r=n("yU0y");function i(t,e,n){return t[0]=e[0]+n[0],t[1]=e[1]+n[1],t[2]=e[2]+n[2],t}function o(t,e){return t[0]=-e[0],t[1]=-e[1],t[2]=-e[2],t}var a,s,c=function(t,e,n){return t[0]=e[0]*n[0],t[1]=e[1]*n[1],t[2]=e[2]*n[2],t};a=new r.a(3),r.a!=Float32Array&&(a[0]=0,a[1]=0,a[2]=0),s=a},oXiK:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return Xe})),n.d(e,"InteractiveMap",(function(){return Xe})),n.d(e,"StaticMap",(function(){return wt})),n.d(e,"Source",(function(){return Je})),n.d(e,"Layer",(function(){return sn})),n.d(e,"BaseControl",(function(){return pn})),n.d(e,"Marker",(function(){return Pn})),n.d(e,"Popup",(function(){return Dn})),n.d(e,"AttributionControl",(function(){return An})),n.d(e,"FullscreenControl",(function(){return Vn})),n.d(e,"GeolocateControl",(function(){return Xn})),n.d(e,"NavigationControl",(function(){return er})),n.d(e,"ScaleControl",(function(){return or})),n.d(e,"CanvasOverlay",(function(){return cr})),n.d(e,"HTMLOverlay",(function(){return hr})),n.d(e,"SVGOverlay",(function(){return dr})),n.d(e,"TRANSITION_EVENTS",(function(){return Vt})),n.d(e,"TransitionInterpolator",(function(){return _t})),n.d(e,"LinearInterpolator",(function(){return Ft})),n.d(e,"FlyToInterpolator",(function(){return At})),n.d(e,"MapController",(function(){return Re})),n.d(e,"WebMercatorViewport",(function(){return N})),n.d(e,"setRTLTextPlugin",(function(){return vr})),n.d(e,"MapContext",(function(){return lt})),n.d(e,"_useMapControl",(function(){return ln})),n.d(e,"_MapContext",(function(){return lt}));var r=n("KQm4"),i=n("rePB"),o=n("q1tI"),a=n("W0B4"),s=n("ODXe"),c=n("1OyB"),u=n("vuIU"),l=n("bl9R");function h(t,e){var n=l.b([],e,t);return l.a(n,n,1/n[3]),n}function p(t,e){var n=t%e;return n<0?e+n:n}function f(t,e,n){return n*e+(1-n)*t}var d=Math.log2||function(t){return Math.log(t)*Math.LOG2E},v=n("ZaHm"),g=n("ZxFD"),m=n("n+fv");function b(t,e){if(!t)throw new Error(e||"@math.gl/web-mercator: assertion failed.")}var y=Math.PI,O=y/4,w=y/180,j=180/y;function E(t){return Math.pow(2,t)}function _(t){return d(t)}function P(t){var e=Object(s.a)(t,2),n=e[0],r=e[1];b(Number.isFinite(n)),b(Number.isFinite(r)&&r>=-90&&r<=90,"invalid latitude");var i=r*w;return[512*(n*w+y)/(2*y),512*(y+Math.log(Math.tan(O+.5*i)))/(2*y)]}function M(t){var e=Object(s.a)(t,2),n=e[0],r=e[1],i=n/512*(2*y)-y,o=2*(Math.atan(Math.exp(r/512*(2*y)-y))-O);return[i*j,o*j]}function S(t){var e=t.latitude,n=t.longitude,r=t.highPrecision,i=void 0!==r&&r;b(Number.isFinite(e)&&Number.isFinite(n));var o={},a=Math.cos(e*w),s=512/360/a,c=512/4003e4/a;if(o.unitsPerMeter=[c,c,c],o.metersPerUnit=[1/c,1/c,1/c],o.unitsPerDegree=[512/360,s,c],o.degreesPerUnit=[.703125,1/s,1/c],i){var u=w*Math.tan(e*w)/a,l=512/360*u/2,h=512/4003e4*u,p=h/s*c;o.unitsPerDegree2=[0,l,h],o.unitsPerMeter2=[p,0,p]}return o}function x(t){var e=t.height,n=t.pitch,r=t.bearing,i=t.altitude,o=t.scale,a=t.center,s=void 0===a?null:a,c=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];return v.h(c,c,[0,0,-i]),v.e(c,c,-n*w),v.f(c,c,r*w),o/=e,v.g(c,c,[o,o,o]),s&&v.h(c,c,m.c([],s)),c}function T(t){var e=t.width,n=t.height,r=t.pitch,i=function(t){var e=t.width,n=t.height,r=t.fovy,i=void 0===r?k(1.5):r,o=t.altitude,a=t.pitch,s=void 0===a?0:a,c=t.nearZMultiplier,u=void 0===c?1:c,l=t.farZMultiplier,h=void 0===l?1:l;void 0!==o&&(i=k(o));var p=.5*i*w,f=D(i),d=s*w,v=Math.sin(p)*f/Math.sin(Math.min(Math.max(Math.PI/2-d-p,.01),Math.PI-.01));return{fov:2*p,aspect:e/n,focalDistance:f,near:u,far:(Math.sin(d)*v+f)*h}}({width:e,height:n,altitude:t.altitude,fovy:t.fovy,pitch:r,nearZMultiplier:t.nearZMultiplier,farZMultiplier:t.farZMultiplier}),o=i.fov,a=i.aspect,s=i.near,c=i.far;return v.d([],o,a,s,c)}function k(t){return 2*Math.atan(.5/t)*j}function D(t){return.5/Math.tan(.5*t*w)}function C(t,e){var n=Object(s.a)(t,3),r=n[0],i=n[1],o=n[2],a=void 0===o?0:o;return b(Number.isFinite(r)&&Number.isFinite(i)&&Number.isFinite(a)),h(e,[r,i,a,1])}function I(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=Object(s.a)(t,3),i=r[0],o=r[1],a=r[2];if(b(Number.isFinite(i)&&Number.isFinite(o),"invalid pixel coordinate"),Number.isFinite(a)){var c=h(e,[i,o,a,1]);return c}var u=h(e,[i,o,0,1]),l=h(e,[i,o,1,1]),p=u[2],f=l[2],d=p===f?0:((n||0)-p)/(f-p);return g.c([],u,l,d)}function R(t){var e=t.width,n=t.height,r=t.bounds,i=t.minExtent,o=void 0===i?0:i,a=t.maxZoom,c=void 0===a?24:a,u=t.padding,l=void 0===u?0:u,h=t.offset,p=void 0===h?[0,0]:h,f=Object(s.a)(r,2),v=Object(s.a)(f[0],2),g=v[0],m=v[1],y=Object(s.a)(f[1],2),O=y[0],w=y[1];if(Number.isFinite(l)){l={top:l,bottom:l,left:l,right:l}}else b(Number.isFinite(l.top)&&Number.isFinite(l.bottom)&&Number.isFinite(l.left)&&Number.isFinite(l.right));var j=new N({width:e,height:n,longitude:0,latitude:0,zoom:0}),E=j.project([g,w]),_=j.project([O,m]),P=[Math.max(Math.abs(_[0]-E[0]),o),Math.max(Math.abs(_[1]-E[1]),o)],M=[e-l.left-l.right-2*Math.abs(p[0]),n-l.top-l.bottom-2*Math.abs(p[1])];b(M[0]>0&&M[1]>0);var S=M[0]/P[0],x=M[1]/P[1],T=(l.right-l.left)/2/S,k=(l.bottom-l.top)/2/x,D=[(_[0]+E[0])/2+T,(_[1]+E[1])/2+k],C=j.unproject(D),I=Math.min(c,j.zoom+d(Math.abs(Math.min(S,x))));return b(Number.isFinite(I)),{longitude:C[0],latitude:C[1],zoom:I}}var A=Math.PI/180;function L(t){var e,n,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=t.width,o=t.height,a=t.unproject,s={targetZ:r},c=a([0,o],s),u=a([i,o],s),l=t.fovy?.5*t.fovy*A:Math.atan(.5/t.altitude),h=(90-t.pitch)*A;return l>h-.01?(e=z(t,0,r),n=z(t,i,r)):(e=a([0,0],s),n=a([i,0],s)),[c,u,n,e]}function z(t,e,n){var r=t.pixelUnprojectionMatrix,i=h(r,[e,0,1,1]),o=h(r,[e,t.height,1,1]),a=(n*t.distanceScales.unitsPerMeter[2]-i[2])/(o[2]-i[2]),s=M(g.c([],i,o,a));return s[2]=n,s}var N=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{width:1,height:1},n=e.width,r=e.height,i=e.latitude,o=void 0===i?0:i,a=e.longitude,s=void 0===a?0:a,u=e.zoom,l=void 0===u?0:u,h=e.pitch,p=void 0===h?0:h,f=e.bearing,d=void 0===f?0:f,v=e.altitude,g=void 0===v?null:v,b=e.fovy,y=void 0===b?null:b,O=e.position,w=void 0===O?null:O,j=e.nearZMultiplier,_=void 0===j?.02:j,M=e.farZMultiplier,C=void 0===M?1.01:M;Object(c.a)(this,t),n=n||1,r=r||1,null===y&&null===g?y=k(g=1.5):null===y?y=k(g):null===g&&(g=D(y));var I=E(l);g=Math.max(.75,g);var R=S({longitude:s,latitude:o}),A=P([s,o]);A[2]=0,w&&m.a(A,A,m.b([],w,R.unitsPerMeter)),this.projectionMatrix=T({width:n,height:r,pitch:p,fovy:y,nearZMultiplier:_,farZMultiplier:C}),this.viewMatrix=x({height:r,scale:I,center:A,pitch:p,bearing:d,altitude:g}),this.width=n,this.height=r,this.scale=I,this.latitude=o,this.longitude=s,this.zoom=l,this.pitch=p,this.bearing=d,this.altitude=g,this.fovy=y,this.center=A,this.meterOffset=w||[0,0,0],this.distanceScales=R,this._initMatrices(),this.equals=this.equals.bind(this),this.project=this.project.bind(this),this.unproject=this.unproject.bind(this),this.projectPosition=this.projectPosition.bind(this),this.unprojectPosition=this.unprojectPosition.bind(this),Object.freeze(this)}return Object(u.a)(t,[{key:"_initMatrices",value:function(){var t=this.width,e=this.height,n=this.projectionMatrix,r=this.viewMatrix,i=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];v.c(i,i,n),v.c(i,i,r),this.viewProjectionMatrix=i;var o=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];v.g(o,o,[t/2,-e/2,1]),v.h(o,o,[1,-1,0]),v.c(o,o,i);var a=v.b([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],o);if(!a)throw new Error("Pixel project matrix not invertible");this.pixelProjectionMatrix=o,this.pixelUnprojectionMatrix=a}},{key:"equals",value:function(e){return e instanceof t&&(e.width===this.width&&e.height===this.height&&v.a(e.projectionMatrix,this.projectionMatrix)&&v.a(e.viewMatrix,this.viewMatrix))}},{key:"project",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.topLeft,r=void 0===n||n,i=this.projectPosition(t),o=C(i,this.pixelProjectionMatrix),a=Object(s.a)(o,2),c=a[0],u=a[1],l=r?u:this.height-u;return 2===t.length?[c,l]:[c,l,o[2]]}},{key:"unproject",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.topLeft,r=void 0===n||n,i=e.targetZ,o=void 0===i?void 0:i,a=Object(s.a)(t,3),c=a[0],u=a[1],l=a[2],h=r?u:this.height-u,p=o&&o*this.distanceScales.unitsPerMeter[2],f=I([c,h,l],this.pixelUnprojectionMatrix,p),d=this.unprojectPosition(f),v=Object(s.a)(d,3),g=v[0],m=v[1],b=v[2];return Number.isFinite(l)?[g,m,b]:Number.isFinite(o)?[g,m,o]:[g,m]}},{key:"projectPosition",value:function(t){var e=P(t),n=Object(s.a)(e,2);return[n[0],n[1],(t[2]||0)*this.distanceScales.unitsPerMeter[2]]}},{key:"unprojectPosition",value:function(t){var e=M(t),n=Object(s.a)(e,2);return[n[0],n[1],(t[2]||0)*this.distanceScales.metersPerUnit[2]]}},{key:"projectFlat",value:function(t){return P(t)}},{key:"unprojectFlat",value:function(t){return M(t)}},{key:"getMapCenterByLngLatPosition",value:function(t){var e=t.lngLat,n=I(t.pos,this.pixelUnprojectionMatrix),r=P(e),i=g.a([],r,g.d([],n));return M(g.a([],this.center,i))}},{key:"getLocationAtPoint",value:function(t){var e=t.lngLat,n=t.pos;return this.getMapCenterByLngLatPosition({lngLat:e,pos:n})}},{key:"fitBounds",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=this.width,i=this.height,o=R(Object.assign({width:r,height:i,bounds:e},n)),a=o.longitude,s=o.latitude,c=o.zoom;return new t({width:r,height:i,longitude:a,latitude:s,zoom:c})}},{key:"getBounds",value:function(t){var e=this.getBoundingRegion(t),n=Math.min.apply(Math,Object(r.a)(e.map((function(t){return t[0]})))),i=Math.max.apply(Math,Object(r.a)(e.map((function(t){return t[0]}))));return[[n,Math.min.apply(Math,Object(r.a)(e.map((function(t){return t[1]}))))],[i,Math.max.apply(Math,Object(r.a)(e.map((function(t){return t[1]}))))]]}},{key:"getBoundingRegion",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return L(this,t.z||0)}}]),t}();function F(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return Z(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Z(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,i=function(){};return{s:i,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,s=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return a=t.done,t},e:function(t){s=!0,o=t},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw o}}}}function Z(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var V=["longitude","latitude","zoom"],B={curve:1.414,speed:1.2};function U(t,e,n){var r=(n=Object.assign({},B,n)).curve,i=t.zoom,o=[t.longitude,t.latitude],a=E(i),s=e.zoom,c=[e.longitude,e.latitude],u=E(s-i),l=P(o),h=P(c),p=g.f([],h,l),f=Math.max(t.width,t.height),d=f/u,v=g.b(p)*a,m=Math.max(v,.01),b=r*r,y=(d*d-f*f+b*b*m*m)/(2*f*b*m),O=(d*d-f*f-b*b*m*m)/(2*d*b*m),w=Math.log(Math.sqrt(y*y+1)-y),j=Math.log(Math.sqrt(O*O+1)-O);return{startZoom:i,startCenterXY:l,uDelta:p,w0:f,u1:v,S:(j-w)/r,rho:r,rho2:b,r0:w,r1:j}}var q=n("iXzu"),W=n("Z2JM"),H=n("bhPm"),X=n.n(H);function Y(t){return Array.isArray(t)||ArrayBuffer.isView(t)}function G(t,e){if(t===e)return!0;if(Y(t)&&Y(e)){if(t.length!==e.length)return!1;for(var n=0;n<t.length;++n)if(!G(t[n],e[n]))return!1;return!0}return Math.abs(t-e)<=1e-7}function K(t,e,n){return Math.max(e,Math.min(n,t))}function Q(t,e,n){return Y(t)?t.map((function(t,r){return Q(t,e[r],n)})):n*e+(1-n)*t}function J(t,e){if(!t)throw new Error(e||"react-map-gl: assertion failed.")}function $(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function tt(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?$(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):$(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var et={minZoom:0,maxZoom:24,minPitch:0,maxPitch:85},nt=0,rt=0,it=1.5,ot=function(){function t(t){var e=t.width,n=t.height,r=t.latitude,i=t.longitude,o=t.zoom,a=t.bearing,s=void 0===a?rt:a,c=t.pitch,u=void 0===c?nt:c,l=t.altitude,h=void 0===l?it:l,p=t.maxZoom,f=void 0===p?et.maxZoom:p,d=t.minZoom,v=void 0===d?et.minZoom:d,g=t.maxPitch,m=void 0===g?et.maxPitch:g,b=t.minPitch,y=void 0===b?et.minPitch:b,O=t.transitionDuration,w=t.transitionEasing,j=t.transitionInterpolator,E=t.transitionInterruption,_=t.startPanLngLat,P=t.startZoomLngLat,M=t.startRotatePos,S=t.startBearing,x=t.startPitch,T=t.startZoom;J(Number.isFinite(e),"`width` must be supplied"),J(Number.isFinite(n),"`height` must be supplied"),J(Number.isFinite(i),"`longitude` must be supplied"),J(Number.isFinite(r),"`latitude` must be supplied"),J(Number.isFinite(o),"`zoom` must be supplied"),this._viewportProps=this._applyConstraints({width:e,height:n,latitude:r,longitude:i,zoom:o,bearing:s,pitch:u,altitude:h,maxZoom:f,minZoom:v,maxPitch:m,minPitch:y,transitionDuration:O,transitionEasing:w,transitionInterpolator:j,transitionInterruption:E}),this._state={startPanLngLat:_,startZoomLngLat:P,startRotatePos:M,startBearing:S,startPitch:x,startZoom:T}}var e=t.prototype;return e.getViewportProps=function(){return this._viewportProps},e.getState=function(){return this._state},e.panStart=function(t){var e=t.pos;return this._getUpdatedMapState({startPanLngLat:this._unproject(e)})},e.pan=function(t){var e=t.pos,n=t.startPos,r=this._state.startPanLngLat||this._unproject(n);if(!r)return this;var i=this._calculateNewLngLat({startPanLngLat:r,pos:e}),o=i[0],a=i[1];return this._getUpdatedMapState({longitude:o,latitude:a})},e.panEnd=function(){return this._getUpdatedMapState({startPanLngLat:null})},e.rotateStart=function(t){var e=t.pos;return this._getUpdatedMapState({startRotatePos:e,startBearing:this._viewportProps.bearing,startPitch:this._viewportProps.pitch})},e.rotate=function(t){var e,n=t.pos,r=t.deltaAngleX,i=void 0===r?0:r,o=t.deltaAngleY,a=void 0===o?0:o,s=this._state,c=s.startRotatePos,u=s.startBearing,l=s.startPitch;return Number.isFinite(u)&&Number.isFinite(l)?(e=n?this._calculateNewPitchAndBearing(tt(tt({},this._getRotationParams(n,c)),{},{startBearing:u,startPitch:l})):{bearing:u+i,pitch:l+a},this._getUpdatedMapState(e)):this},e.rotateEnd=function(){return this._getUpdatedMapState({startBearing:null,startPitch:null})},e.zoomStart=function(t){var e=t.pos;return this._getUpdatedMapState({startZoomLngLat:this._unproject(e),startZoom:this._viewportProps.zoom})},e.zoom=function(t){var e=t.pos,n=t.startPos,r=t.scale;J(r>0,"`scale` must be a positive number");var i=this._state,o=i.startZoom,a=i.startZoomLngLat;Number.isFinite(o)||(o=this._viewportProps.zoom,a=this._unproject(n)||this._unproject(e)),J(a,"`startZoomLngLat` prop is required for zoom behavior to calculate where to position the map.");var s=this._calculateNewZoom({scale:r,startZoom:o||0}),c=new N(Object.assign({},this._viewportProps,{zoom:s})).getMapCenterByLngLatPosition({lngLat:a,pos:e}),u=c[0],l=c[1];return this._getUpdatedMapState({zoom:s,longitude:u,latitude:l})},e.zoomEnd=function(){return this._getUpdatedMapState({startZoomLngLat:null,startZoom:null})},e._getUpdatedMapState=function(e){return new t(Object.assign({},this._viewportProps,this._state,e))},e._applyConstraints=function(t){var e=t.maxZoom,n=t.minZoom,r=t.zoom;t.zoom=K(r,n,e);var i=t.maxPitch,o=t.minPitch,a=t.pitch;return t.pitch=K(a,o,i),Object.assign(t,function(t){var e=t.width,n=t.height,r=t.longitude,i=t.latitude,o=t.zoom,a=t.pitch,s=void 0===a?0:a,c=t.bearing,u=void 0===c?0:c;(r<-180||r>180)&&(r=p(r+180,360)-180),(u<-180||u>180)&&(u=p(u+180,360)-180);var l=d(n/512);if(o<=l)o=l,i=0;else{var h=n/2/Math.pow(2,o),f=M([0,h])[1];if(i<f)i=f;else{var v=M([0,512-h])[1];i>v&&(i=v)}}return{width:e,height:n,longitude:r,latitude:i,zoom:o,pitch:s,bearing:u}}(t)),t},e._unproject=function(t){var e=new N(this._viewportProps);return t&&e.unproject(t)},e._calculateNewLngLat=function(t){var e=t.startPanLngLat,n=t.pos;return new N(this._viewportProps).getMapCenterByLngLatPosition({lngLat:e,pos:n})},e._calculateNewZoom=function(t){var e=t.scale,n=t.startZoom,r=this._viewportProps,i=r.maxZoom,o=r.minZoom;return K(n+Math.log2(e),o,i)},e._calculateNewPitchAndBearing=function(t){var e=t.deltaScaleX,n=t.deltaScaleY,r=t.startBearing,i=t.startPitch;n=K(n,-1,1);var o=this._viewportProps,a=o.minPitch,s=o.maxPitch,c=i;return n>0?c=i+n*(s-i):n<0&&(c=i-n*(a-i)),{pitch:c,bearing:r+180*e}},e._getRotationParams=function(t,e){var n=t[0]-e[0],r=t[1]-e[1],i=t[1],o=e[1],a=this._viewportProps,s=a.width,c=a.height,u=n/s,l=0;return r>0?Math.abs(c-o)>5&&(l=r/(o-c)*1.2):r<0&&o>5&&(l=1-i/o),{deltaScaleX:u,deltaScaleY:l=Math.min(1,Math.max(-1,l))}},t}();function at(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function st(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?at(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):at(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var ct=Object(o.createContext)({viewport:null,map:null,container:null,onViewportChange:null,onViewStateChange:null,eventManager:null}),ut=ct.Provider;ct.Provider=function(t){var e=t.value,n=t.children,r=Object(o.useState)(null),i=r[0],a=r[1],s=Object(o.useContext)(ct);return e=st(st({setMap:a},s),{},{map:s&&s.map||i},e),o.createElement(ut,{value:e},n)};var lt=ct,ht="undefined"!=typeof window?o.useLayoutEffect:o.useEffect;function pt(t,e){var n=e.longitude,r=e.latitude;return t&&t.queryTerrainElevation&&t.queryTerrainElevation([n,r])||0}function ft(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function dt(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?ft(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ft(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var vt="A valid API access token is required to use Mapbox data";function gt(t){var e=t.map,n=t.props,r=t.width,i=t.height,o=dt(dt(dt({},n),n.viewState),{},{width:r,height:i});return o.position=[0,0,pt(e,o)],new N(o)}var mt={position:"absolute",width:"100%",height:"100%",overflow:"hidden"},bt=Object.assign({},W.a.defaultProps,{disableTokenWarning:!1,visible:!0,onResize:function(){},className:"",style:null,visibilityConstraints:et});function yt(){return o.createElement("div",{key:"warning",id:"no-token-warning",style:{position:"absolute",left:0,top:0}},o.createElement("h3",{key:"header"},vt),o.createElement("div",{key:"text"},"For information on setting up your basemap, read"),o.createElement("a",{key:"link",href:"https://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens"},"Note on Map Tokens"))}var Ot=Object(o.forwardRef)((function(t,e){var n=Object(o.useState)(!0),r=n[0],i=n[1],a=Object(o.useState)({width:0,height:0}),s=a[0],c=a[1],u=Object(o.useRef)(null),l=Object(o.useRef)(null),h=Object(o.useRef)(null),p=Object(o.useRef)(null),f=Object(o.useContext)(lt);ht((function(){if(Ot.supported()){var e=new W.a(dt(dt(dt({},t),s),{},{mapboxgl:X.a,container:l.current,onError:function(e){401===(e.error&&e.error.status||e.status)&&r&&(console.error(vt),i(!1)),t.onError(e)}}));u.current=e,f&&f.setMap&&f.setMap(e.getMap());var n=new q.a((function(e){if(e[0].contentRect){var n=e[0].contentRect,r=n.width,i=n.height;c({width:r,height:i}),t.onResize({width:r,height:i})}}));return n.observe(h.current),function(){e.finalize(),u.current=null,n.disconnect()}}}),[]),ht((function(){u.current&&u.current.setProps(dt(dt({},t),s))}));var d=u.current&&u.current.getMap();Object(o.useImperativeHandle)(e,(function(){return function(t){return{getMap:function(){return t.current&&t.current.getMap()},queryRenderedFeatures:function(e,n){void 0===n&&(n={});var r=t.current&&t.current.getMap();return r&&r.queryRenderedFeatures(e,n)}}}(u)}),[]);var v=Object(o.useCallback)((function(t){var e=t.target;e===p.current&&e.scrollTo(0,0)}),[]),g=d&&o.createElement(ut,{value:dt(dt({},f),{},{viewport:f.viewport||gt(dt({map:d,props:t},s)),map:d,container:f.container||h.current})},o.createElement("div",{key:"map-overlays",className:"overlays",ref:p,style:mt,onScroll:v},t.children)),m=t.className,b=t.width,y=t.height,O=t.style,w=t.visibilityConstraints,j=Object.assign({position:"relative"},O,{width:b,height:y}),E=t.visible&&function(t,e){for(var n in void 0===e&&(e=et),e){var r=n.slice(0,3),i=(o=n.slice(3))[0].toLowerCase()+o.slice(1);if("min"===r&&t[i]<e[n])return!1;if("max"===r&&t[i]>e[n])return!1}var o;return!0}(t.viewState||t,w),_=Object.assign({},mt,{visibility:E?"inherit":"hidden"});return o.createElement("div",{key:"map-container",ref:h,style:j},o.createElement("div",{key:"map-mapbox",ref:l,style:_,className:m}),g,!r&&!t.disableTokenWarning&&o.createElement(yt,null))}));Ot.supported=function(){return X.a&&X.a.supported()},Ot.defaultProps=bt;var wt=Ot;function jt(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return Et(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Et(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function Et(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var _t=function(){function t(){this.propNames=[]}var e=t.prototype;return e.arePropsEqual=function(t,e){for(var n,r=jt(this.propNames||[]);!(n=r()).done;){var i=n.value;if(!G(t[i],e[i]))return!1}return!0},e.initializeProps=function(t,e){return{start:t,end:e}},e.interpolateProps=function(t,e,n){J(!1,"interpolateProps is not implemented")},e.getDuration=function(t,e){return e.transitionDuration},t}(),Pt=n("dI71"),Mt={longitude:1,bearing:1};function St(t){return Number.isFinite(t)||Array.isArray(t)}function xt(t,e,n){return function(t){return t in Mt}(t)&&Math.abs(n-e)>180&&(n=n<0?n+360:n-360),n}function Tt(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return kt(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return kt(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function kt(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var Dt=["longitude","latitude","zoom","bearing","pitch"],Ct=["latitude","longitude","zoom","width","height"],It=["bearing","pitch"],Rt={speed:1.2,curve:1.414},At=function(t){function e(e){var n;return void 0===e&&(e={}),(n=t.call(this)||this).propNames=Dt,n.props=Object.assign({},Rt,e),n}Object(Pt.a)(e,t);var n=e.prototype;return n.initializeProps=function(t,e){for(var n,r={},i={},o=Tt(Ct);!(n=o()).done;){var a=n.value,s=t[a],c=e[a];J(St(s)&&St(c),a+" must be supplied for transition"),r[a]=s,i[a]=xt(a,s,c)}for(var u,l=Tt(It);!(u=l()).done;){var h=u.value,p=t[h]||0,f=e[h]||0;r[h]=p,i[h]=xt(h,p,f)}return{start:r,end:i}},n.interpolateProps=function(t,e,n){for(var r,i=function(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},i={},o=U(t,e,r),a=o.startZoom,s=o.startCenterXY,c=o.uDelta,u=o.w0,l=o.u1,h=o.S,p=o.rho,d=o.rho2,v=o.r0;if(l<.01){var m,b=F(V);try{for(b.s();!(m=b.n()).done;){var y=m.value,O=t[y],w=e[y];i[y]=f(O,w,n)}}catch(D){b.e(D)}finally{b.f()}return i}var j=n*h,E=Math.cosh(v)/Math.cosh(v+p*j),P=u*((Math.cosh(v)*Math.tanh(v+p*j)-Math.sinh(v))/d)/l,S=1/E,x=a+_(S),T=g.e([],c,P);g.a(T,T,s);var k=M(T);return i.longitude=k[0],i.latitude=k[1],i.zoom=x,i}(t,e,n,this.props),o=Tt(It);!(r=o()).done;){var a=r.value;i[a]=Q(t[a],e[a],n)}return i},n.getDuration=function(t,e){var n=e.transitionDuration;return"auto"===n&&(n=function(t,e){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r=Object.assign({},B,r),o=i.screenSpeed,a=i.speed,s=i.maxDuration,c=U(t,e,r),u=c.S,l=c.rho,h=1e3*u;return n=Number.isFinite(o)?h/(o/l):h/a,Number.isFinite(s)&&n>s?0:n}(t,e,this.props)),n},e}(_t);function Lt(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return zt(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return zt(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function zt(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var Nt=["longitude","latitude","zoom","bearing","pitch"],Ft=function(t){function e(e){var n;return void 0===e&&(e={}),n=t.call(this)||this,Array.isArray(e)&&(e={transitionProps:e}),n.propNames=e.transitionProps||Nt,e.around&&(n.around=e.around),n}Object(Pt.a)(e,t);var n=e.prototype;return n.initializeProps=function(t,e){var n={},r={};if(this.around){n.around=this.around;var i=new N(t).unproject(this.around);Object.assign(r,e,{around:new N(e).project(i),aroundLngLat:i})}for(var o,a=Lt(this.propNames);!(o=a()).done;){var s=o.value,c=t[s],u=e[s];J(St(c)&&St(u),s+" must be supplied for transition"),n[s]=c,r[s]=xt(s,c,u)}return{start:n,end:r}},n.interpolateProps=function(t,e,n){for(var r,i={},o=Lt(this.propNames);!(r=o()).done;){var a=r.value;i[a]=Q(t[a],e[a],n)}if(e.around){var s=new N(Object.assign({},e,i)).getMapCenterByLngLatPosition({lngLat:e.aroundLngLat,pos:Q(t.around,e.around,n)}),c=s[0],u=s[1];i.longitude=c,i.latitude=u}return i},e}(_t),Zt=function(){};var Vt={BREAK:1,SNAP_TO_END:2,IGNORE:3,UPDATE:4},Bt={transitionDuration:0,transitionEasing:function(t){return t},transitionInterpolator:new Ft,transitionInterruption:Vt.BREAK,onTransitionStart:Zt,onTransitionInterrupt:Zt,onTransitionEnd:Zt},Ut=function(){function t(t){var e=this;void 0===t&&(t={}),this._animationFrame=null,this._onTransitionFrame=function(){e._animationFrame=requestAnimationFrame(e._onTransitionFrame),e._updateViewport()},this.props=null,this.onViewportChange=t.onViewportChange||Zt,this.onStateChange=t.onStateChange||Zt,this.time=t.getTime||Date.now}var e=t.prototype;return e.getViewportInTransition=function(){return this._animationFrame?this.state.propsInTransition:null},e.processViewportChange=function(t){var e=this.props;if(this.props=t,!e||this._shouldIgnoreViewportChange(e,t))return!1;if(this._isTransitionEnabled(t)){var n=Object.assign({},e),r=Object.assign({},t);if(this._isTransitionInProgress()&&(e.onTransitionInterrupt(),this.state.interruption===Vt.SNAP_TO_END?Object.assign(n,this.state.endProps):Object.assign(n,this.state.propsInTransition),this.state.interruption===Vt.UPDATE)){var i=this.time(),o=(i-this.state.startTime)/this.state.duration;r.transitionDuration=this.state.duration-(i-this.state.startTime),r.transitionEasing=function(t,e){var n=t(e);return function(r){return 1/(1-n)*(t(r*(1-e)+e)-n)}}(this.state.easing,o),r.transitionInterpolator=n.transitionInterpolator}return r.onTransitionStart(),this._triggerTransition(n,r),!0}return this._isTransitionInProgress()&&(e.onTransitionInterrupt(),this._endTransition()),!1},e._isTransitionInProgress=function(){return Boolean(this._animationFrame)},e._isTransitionEnabled=function(t){var e=t.transitionDuration,n=t.transitionInterpolator;return(e>0||"auto"===e)&&Boolean(n)},e._isUpdateDueToCurrentTransition=function(t){return!!this.state.propsInTransition&&this.state.interpolator.arePropsEqual(t,this.state.propsInTransition)},e._shouldIgnoreViewportChange=function(t,e){return!t||(this._isTransitionInProgress()?this.state.interruption===Vt.IGNORE||this._isUpdateDueToCurrentTransition(e):!this._isTransitionEnabled(e)||e.transitionInterpolator.arePropsEqual(t,e))},e._triggerTransition=function(t,e){J(this._isTransitionEnabled(e)),this._animationFrame&&cancelAnimationFrame(this._animationFrame);var n=e.transitionInterpolator,r=n.getDuration?n.getDuration(t,e):e.transitionDuration;if(0!==r){var i=e.transitionInterpolator.initializeProps(t,e),o={inTransition:!0,isZooming:t.zoom!==e.zoom,isPanning:t.longitude!==e.longitude||t.latitude!==e.latitude,isRotating:t.bearing!==e.bearing||t.pitch!==e.pitch};this.state={duration:r,easing:e.transitionEasing,interpolator:e.transitionInterpolator,interruption:e.transitionInterruption,startTime:this.time(),startProps:i.start,endProps:i.end,animation:null,propsInTransition:{}},this._onTransitionFrame(),this.onStateChange(o)}},e._endTransition=function(){this._animationFrame&&(cancelAnimationFrame(this._animationFrame),this._animationFrame=null),this.onStateChange({inTransition:!1,isZooming:!1,isPanning:!1,isRotating:!1})},e._updateViewport=function(){var t=this.time(),e=this.state,n=e.startTime,r=e.duration,i=e.easing,o=e.interpolator,a=e.startProps,s=e.endProps,c=!1,u=(t-n)/r;u>=1&&(u=1,c=!0),u=i(u);var l=o.interpolateProps(a,s,u),h=new ot(Object.assign({},this.props,l));this.state.propsInTransition=h.getViewportProps(),this.onViewportChange(this.state.propsInTransition,this.props),c&&(this._endTransition(),this.props.onTransitionEnd())},t}();Ut.defaultProps=Bt;var qt,Wt,Ht=n("QFtD"),Xt=n.n(Ht),Yt={mousedown:1,mousemove:2,mouseup:4};qt=Xt.a.PointerEventInput,Wt=qt.prototype.handler,qt.prototype.handler=function(t){var e=this.store;t.button>0&&(function(t,e){for(var n=0;n<t.length;n++)if(e(t[n]))return!0;return!1}(e,(function(e){return e.pointerId===t.pointerId}))||e.push(t)),Wt.call(this,t)},Xt.a.MouseInput.prototype.handler=function(t){var e=Yt[t.type];1&e&&t.button>=0&&(this.pressed=!0),2&e&&0===t.which&&(e=4),this.pressed&&(4&e&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:"mouse",srcEvent:t}))};var Gt=Xt.a.Manager,Kt=Xt.a,Qt=Kt?[[Kt.Pan,{event:"tripan",pointers:3,threshold:0,enable:!1}],[Kt.Rotate,{enable:!1}],[Kt.Pinch,{enable:!1}],[Kt.Swipe,{enable:!1}],[Kt.Pan,{threshold:0,enable:!1}],[Kt.Press,{enable:!1}],[Kt.Tap,{event:"doubletap",taps:2,enable:!1}],[Kt.Tap,{event:"anytap",enable:!1}],[Kt.Tap,{enable:!1}]]:null,Jt={tripan:["rotate","pinch","pan"],rotate:["pinch"],pinch:["pan"],pan:["press","doubletap","anytap","tap"],doubletap:["anytap"],anytap:["tap"]},$t={doubletap:["tap"]},te={pointerdown:"pointerdown",pointermove:"pointermove",pointerup:"pointerup",touchstart:"pointerdown",touchmove:"pointermove",touchend:"pointerup",mousedown:"pointerdown",mousemove:"pointermove",mouseup:"pointerup"},ee=["keydown","keyup"],ne=["mousedown","mousemove","mouseup","mouseover","mouseout","mouseleave"],re=["wheel","mousewheel","DOMMouseScroll"],ie={tap:"tap",anytap:"anytap",doubletap:"doubletap",press:"press",pinch:"pinch",pinchin:"pinch",pinchout:"pinch",pinchstart:"pinch",pinchmove:"pinch",pinchend:"pinch",pinchcancel:"pinch",rotate:"rotate",rotatestart:"rotate",rotatemove:"rotate",rotateend:"rotate",rotatecancel:"rotate",tripan:"tripan",tripanstart:"tripan",tripanmove:"tripan",tripanup:"tripan",tripandown:"tripan",tripanleft:"tripan",tripanright:"tripan",tripanend:"tripan",tripancancel:"tripan",pan:"pan",panstart:"pan",panmove:"pan",panup:"pan",pandown:"pan",panleft:"pan",panright:"pan",panend:"pan",pancancel:"pan",swipe:"swipe",swipeleft:"swipe",swiperight:"swipe",swipeup:"swipe",swipedown:"swipe"},oe={click:"tap",anyclick:"anytap",dblclick:"doubletap",mousedown:"pointerdown",mousemove:"pointermove",mouseup:"pointerup",mouseover:"pointerover",mouseout:"pointerout",mouseleave:"pointerleave"},ae=n("ExcP"),se=-1!==ae.b.indexOf("firefox"),ce=re,ue=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},i),this.events=ce.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent,!!ae.a&&{passive:!1})}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"wheel"===t&&(this.options.enable=e)}},{key:"handleEvent",value:function(t){if(this.options.enable){var e=t.deltaY;ae.c.WheelEvent&&(se&&t.deltaMode===ae.c.WheelEvent.DOM_DELTA_PIXEL&&(e/=ae.c.devicePixelRatio),t.deltaMode===ae.c.WheelEvent.DOM_DELTA_LINE&&(e*=40));var n={x:t.clientX,y:t.clientY};0!==e&&e%4.000244140625==0&&(e=Math.floor(e/4.000244140625)),t.shiftKey&&e&&(e*=.25),this._onWheel(t,-e,n)}}},{key:"_onWheel",value:function(t,e,n){this.callback({type:"wheel",center:n,delta:e,srcEvent:t,pointerType:"mouse",target:t.target})}}]),t}(),le=ne,he=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.pressed=!1,this.options=Object.assign({enable:!0},i),this.enableMoveEvent=this.options.enable,this.enableLeaveEvent=this.options.enable,this.enableOutEvent=this.options.enable,this.enableOverEvent=this.options.enable,this.events=le.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent)}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"pointermove"===t&&(this.enableMoveEvent=e),"pointerover"===t&&(this.enableOverEvent=e),"pointerout"===t&&(this.enableOutEvent=e),"pointerleave"===t&&(this.enableLeaveEvent=e)}},{key:"handleEvent",value:function(t){this.handleOverEvent(t),this.handleOutEvent(t),this.handleLeaveEvent(t),this.handleMoveEvent(t)}},{key:"handleOverEvent",value:function(t){this.enableOverEvent&&"mouseover"===t.type&&this.callback({type:"pointerover",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleOutEvent",value:function(t){this.enableOutEvent&&"mouseout"===t.type&&this.callback({type:"pointerout",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleLeaveEvent",value:function(t){this.enableLeaveEvent&&"mouseleave"===t.type&&this.callback({type:"pointerleave",srcEvent:t,pointerType:"mouse",target:t.target})}},{key:"handleMoveEvent",value:function(t){if(this.enableMoveEvent)switch(t.type){case"mousedown":t.button>=0&&(this.pressed=!0);break;case"mousemove":0===t.which&&(this.pressed=!1),this.pressed||this.callback({type:"pointermove",srcEvent:t,pointerType:"mouse",target:t.target});break;case"mouseup":this.pressed=!1}}}]),t}(),pe=ee,fe=function(){function t(e,n){var r=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},i),this.enableDownEvent=this.options.enable,this.enableUpEvent=this.options.enable,this.events=pe.concat(i.events||[]),this.handleEvent=this.handleEvent.bind(this),e.tabIndex=i.tabIndex||0,e.style.outline="none",this.events.forEach((function(t){return e.addEventListener(t,r.handleEvent)}))}return Object(u.a)(t,[{key:"destroy",value:function(){var t=this;this.events.forEach((function(e){return t.element.removeEventListener(e,t.handleEvent)}))}},{key:"enableEventType",value:function(t,e){"keydown"===t&&(this.enableDownEvent=e),"keyup"===t&&(this.enableUpEvent=e)}},{key:"handleEvent",value:function(t){var e=t.target||t.srcElement;"INPUT"===e.tagName&&"text"===e.type||"TEXTAREA"===e.tagName||(this.enableDownEvent&&"keydown"===t.type&&this.callback({type:"keydown",srcEvent:t,key:t.key,target:t.target}),this.enableUpEvent&&"keyup"===t.type&&this.callback({type:"keyup",srcEvent:t,key:t.key,target:t.target}))}}]),t}(),de=function(){function t(e,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};Object(c.a)(this,t),this.element=e,this.callback=n,this.options=Object.assign({enable:!0},r),this.handleEvent=this.handleEvent.bind(this),e.addEventListener("contextmenu",this.handleEvent)}return Object(u.a)(t,[{key:"destroy",value:function(){this.element.removeEventListener("contextmenu",this.handleEvent)}},{key:"enableEventType",value:function(t,e){"contextmenu"===t&&(this.options.enable=e)}},{key:"handleEvent",value:function(t){this.options.enable&&this.callback({type:"contextmenu",center:{x:t.clientX,y:t.clientY},srcEvent:t,pointerType:"mouse",target:t.target})}}]),t}(),ve=n("U8pU"),ge={pointerdown:1,pointermove:2,pointerup:4,mousedown:1,mousemove:2,mouseup:4};var me={srcElement:"root",priority:0},be=function(){function t(e){Object(c.a)(this,t),this.eventManager=e,this.handlers=[],this.handlersByElement=new Map,this.handleEvent=this.handleEvent.bind(this),this._active=!1}return Object(u.a)(t,[{key:"isEmpty",value:function(){return!this._active}},{key:"add",value:function(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=arguments.length>4&&void 0!==arguments[4]&&arguments[4],o=this.handlers,a=this.handlersByElement;n&&("object"!==Object(ve.a)(n)||n.addEventListener)&&(n={srcElement:n}),n=n?Object.assign({},me,n):me;var s=a.get(n.srcElement);s||(s=[],a.set(n.srcElement,s));var c={type:t,handler:e,srcElement:n.srcElement,priority:n.priority};r&&(c.once=!0),i&&(c.passive=!0),o.push(c),this._active=this._active||!c.passive;for(var u=s.length-1;u>=0&&!(s[u].priority>=c.priority);)u--;s.splice(u+1,0,c)}},{key:"remove",value:function(t,e){for(var n=this.handlers,r=this.handlersByElement,i=n.length-1;i>=0;i--){var o=n[i];if(o.type===t&&o.handler===e){n.splice(i,1);var a=r.get(o.srcElement);a.splice(a.indexOf(o),1),0===a.length&&r.delete(o.srcElement)}}this._active=n.some((function(t){return!t.passive}))}},{key:"handleEvent",value:function(t){if(!this.isEmpty()){for(var e=this._normalizeEvent(t),n=t.srcEvent.target;n&&n!==e.rootElement;){if(this._emit(e,n),e.handled)return;n=n.parentNode}this._emit(e,"root")}}},{key:"_emit",value:function(t,e){var n=this.handlersByElement.get(e);if(n){for(var r=!1,i=function(){t.handled=!0},o=function(){t.handled=!0,r=!0},a=[],s=0;s<n.length;s++){var c=n[s],u=c.type,l=c.handler,h=c.once;if(l(Object.assign({},t,{type:u,stopPropagation:i,stopImmediatePropagation:o})),h&&a.push(n[s]),r)break}for(var p=0;p<a.length;p++){var f=a[p],d=f.type,v=f.handler;this.remove(d,v)}}}},{key:"_normalizeEvent",value:function(t){var e=this.eventManager.element;return Object.assign({},t,function(t){var e=ge[t.srcEvent.type];if(!e)return null;var n=t.srcEvent,r=n.buttons,i=n.button,o=n.which,a=!1,s=!1,c=!1;return 4===e||2===e&&!Number.isFinite(r)?(a=1===o,s=2===o,c=3===o):2===e?(a=Boolean(1&r),s=Boolean(4&r),c=Boolean(2&r)):1===e&&(a=0===i,s=1===i,c=2===i),{leftButton:a,middleButton:s,rightButton:c}}(t),function(t,e){var n=t.srcEvent;if(!t.center&&!Number.isFinite(n.clientX))return null;var r=t.center||{x:n.clientX,y:n.clientY},i=e.getBoundingClientRect(),o=i.width/e.offsetWidth,a=i.height/e.offsetHeight;return{center:r,offsetCenter:{x:(r.x-i.left-e.clientLeft)/o,y:(r.y-i.top-e.clientTop)/a}}}(t,e),{handled:!1,rootElement:e})}}]),t}();function ye(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return Oe(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Oe(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,i=function(){};return{s:i,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,s=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return a=t.done,t},e:function(t){s=!0,o=t},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw o}}}}function Oe(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var we={events:null,recognizers:null,recognizerOptions:{},Manager:Gt,touchAction:"none",tabIndex:0},je=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Object(c.a)(this,t),this.options=Object.assign({},we,n),this.events=new Map,this._onBasicInput=this._onBasicInput.bind(this),this._onOtherEvent=this._onOtherEvent.bind(this),this.setElement(e);var r=n.events;r&&this.on(r)}return Object(u.a)(t,[{key:"setElement",value:function(t){var e=this;if(this.element&&this.destroy(),this.element=t,t){var n=this.options,r=n.Manager;for(var i in this.manager=new r(t,{touchAction:n.touchAction,recognizers:n.recognizers||Qt}).on("hammer.input",this._onBasicInput),n.recognizers||Object.keys(Jt).forEach((function(t){var n=e.manager.get(t);n&&Jt[t].forEach((function(t){n.recognizeWith(t)}))})),n.recognizerOptions){var o=this.manager.get(i);if(o){var a=n.recognizerOptions[i];delete a.enable,o.set(a)}}this.wheelInput=new ue(t,this._onOtherEvent,{enable:!1}),this.moveInput=new he(t,this._onOtherEvent,{enable:!1}),this.keyInput=new fe(t,this._onOtherEvent,{enable:!1,tabIndex:n.tabIndex}),this.contextmenuInput=new de(t,this._onOtherEvent,{enable:!1});var c,u=ye(this.events);try{for(u.s();!(c=u.n()).done;){var l=Object(s.a)(c.value,2),h=l[0],p=l[1];p.isEmpty()||(this._toggleRecognizer(p.recognizerName,!0),this.manager.on(h,p.handleEvent))}}catch(f){u.e(f)}finally{u.f()}}}},{key:"destroy",value:function(){this.element&&(this.wheelInput.destroy(),this.moveInput.destroy(),this.keyInput.destroy(),this.contextmenuInput.destroy(),this.manager.destroy(),this.wheelInput=null,this.moveInput=null,this.keyInput=null,this.contextmenuInput=null,this.manager=null,this.element=null)}},{key:"on",value:function(t,e,n){this._addEventHandler(t,e,n,!1)}},{key:"once",value:function(t,e,n){this._addEventHandler(t,e,n,!0)}},{key:"watch",value:function(t,e,n){this._addEventHandler(t,e,n,!1,!0)}},{key:"off",value:function(t,e){this._removeEventHandler(t,e)}},{key:"_toggleRecognizer",value:function(t,e){var n=this.manager;if(n){var r=n.get(t);if(r&&r.options.enable!==e){r.set({enable:e});var i=$t[t];i&&!this.options.recognizers&&i.forEach((function(i){var o=n.get(i);e?(o.requireFailure(t),r.dropRequireFailure(i)):o.dropRequireFailure(t)}))}this.wheelInput.enableEventType(t,e),this.moveInput.enableEventType(t,e),this.keyInput.enableEventType(t,e),this.contextmenuInput.enableEventType(t,e)}}},{key:"_addEventHandler",value:function(t,e,n,r,i){if("string"==typeof t){var o=this.manager,a=this.events,s=oe[t]||t,c=a.get(s);c||(c=new be(this),a.set(s,c),c.recognizerName=ie[s]||s,o&&o.on(s,c.handleEvent)),c.add(t,e,n,r,i),c.isEmpty()||this._toggleRecognizer(c.recognizerName,!0)}else for(var u in n=e,t)this._addEventHandler(u,t[u],n,r,i)}},{key:"_removeEventHandler",value:function(t,e){if("string"==typeof t){var n=this.events,r=oe[t]||t,i=n.get(r);if(i&&(i.remove(t,e),i.isEmpty())){var o,a=i.recognizerName,s=!1,c=ye(n.values());try{for(c.s();!(o=c.n()).done;){var u=o.value;if(u.recognizerName===a&&!u.isEmpty()){s=!0;break}}}catch(h){c.e(h)}finally{c.f()}s||this._toggleRecognizer(a,!1)}}else for(var l in t)this._removeEventHandler(l,t[l])}},{key:"_onBasicInput",value:function(t){var e=t.srcEvent,n=te[e.type];n&&this.manager.emit(n,t)}},{key:"_onOtherEvent",value:function(t){this.manager.emit(t.type,t)}}]),t}();function Ee(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function _e(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Ee(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Ee(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var Pe={transitionDuration:0},Me={transitionDuration:300,transitionEasing:function(t){return t},transitionInterpolator:new Ft,transitionInterruption:Vt.BREAK},Se=function(t){return 1-(1-t)*(1-t)},xe=["wheel"],Te=["panstart","panmove","panend"],ke=["pinchstart","pinchmove","pinchend"],De=["tripanstart","tripanmove","tripanend"],Ce=["doubletap"],Ie=["keydown"],Re=function(){function t(){var t=this;this.events=[],this.scrollZoom=!0,this.dragPan=!0,this.dragRotate=!0,this.doubleClickZoom=!0,this.touchZoom=!0,this.touchRotate=!1,this.keyboard=!0,this._interactionState={isDragging:!1},this._events={},this._setInteractionState=function(e){Object.assign(t._interactionState,e),t.onStateChange&&t.onStateChange(t._interactionState)},this._onTransition=function(e,n){t.onViewportChange(e,t._interactionState,n)},this.handleEvent=this.handleEvent.bind(this),this._transitionManager=new Ut({onViewportChange:this._onTransition,onStateChange:this._setInteractionState})}var e=t.prototype;return e.handleEvent=function(t){this.mapState=this.getMapState();var e=this._eventStartBlocked;switch(t.type){case"panstart":return!e&&this._onPanStart(t);case"panmove":return this._onPan(t);case"panend":return this._onPanEnd(t);case"pinchstart":return!e&&this._onPinchStart(t);case"pinchmove":return this._onPinch(t);case"pinchend":return this._onPinchEnd(t);case"tripanstart":return!e&&this._onTriplePanStart(t);case"tripanmove":return this._onTriplePan(t);case"tripanend":return this._onTriplePanEnd(t);case"doubletap":return this._onDoubleTap(t);case"wheel":return this._onWheel(t);case"keydown":return this._onKeyDown(t);default:return!1}},e.getCenter=function(t){var e=t.offsetCenter;return[e.x,e.y]},e.isFunctionKeyPressed=function(t){var e=t.srcEvent;return Boolean(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)},e.blockEvents=function(t){var e=this,n=setTimeout((function(){e._eventStartBlocked===n&&(e._eventStartBlocked=null)}),t);this._eventStartBlocked=n},e.updateViewport=function(t,e,n){var r=this.mapState instanceof ot?this.mapState.getViewportProps():this.mapState,i=_e(_e({},t.getViewportProps()),e),o=Object.keys(i).some((function(t){return r[t]!==i[t]}));this._state=t.getState(),this._setInteractionState(n),o&&this.onViewportChange(i,this._interactionState,r)},e.getMapState=function(t){return new ot(_e(_e(_e({},this.mapStateProps),this._state),t))},e.isDragging=function(){return this._interactionState.isDragging},e.setOptions=function(t){var e=t.onViewportChange,n=t.onStateChange,r=t.eventManager,i=void 0===r?this.eventManager:r,o=t.isInteractive,a=void 0===o||o,s=t.scrollZoom,c=void 0===s?this.scrollZoom:s,u=t.dragPan,l=void 0===u?this.dragPan:u,h=t.dragRotate,p=void 0===h?this.dragRotate:h,f=t.doubleClickZoom,d=void 0===f?this.doubleClickZoom:f,v=t.touchZoom,g=void 0===v?this.touchZoom:v,m=t.touchRotate,b=void 0===m?this.touchRotate:m,y=t.keyboard,O=void 0===y?this.keyboard:y;this.onViewportChange=e,this.onStateChange=n;var w=this.mapStateProps||{},j=w.height!==t.height||w.width!==t.width;this.mapStateProps=t,j&&(this.mapState=w,this.updateViewport(new ot(t))),this._transitionManager.processViewportChange(t),this.eventManager!==i&&(this.eventManager=i,this._events={},this.toggleEvents(this.events,!0)),this.toggleEvents(xe,a&&Boolean(c)),this.toggleEvents(Te,a&&Boolean(l||p)),this.toggleEvents(ke,a&&Boolean(g||b)),this.toggleEvents(De,a&&Boolean(b)),this.toggleEvents(Ce,a&&Boolean(d)),this.toggleEvents(Ie,a&&Boolean(O)),this.scrollZoom=c,this.dragPan=l,this.dragRotate=p,this.doubleClickZoom=d,this.touchZoom=g,this.touchRotate=b,this.keyboard=O},e.toggleEvents=function(t,e){var n=this;this.eventManager&&t.forEach((function(t){n._events[t]!==e&&(n._events[t]=e,e?n.eventManager.on(t,n.handleEvent):n.eventManager.off(t,n.handleEvent))}))},e._onPanStart=function(t){var e=this.getCenter(t);this._panRotate=this.isFunctionKeyPressed(t)||t.rightButton;var n=this._panRotate?this.mapState.rotateStart({pos:e}):this.mapState.panStart({pos:e});return this.updateViewport(n,Pe,{isDragging:!0}),!0},e._onPan=function(t){return!!this.isDragging()&&(this._panRotate?this._onPanRotate(t):this._onPanMove(t))},e._onPanEnd=function(t){return!!this.isDragging()&&(this._panRotate?this._onPanRotateEnd(t):this._onPanMoveEnd(t))},e._onPanMove=function(t){if(!this.dragPan)return!1;var e=this.getCenter(t),n=this.mapState.pan({pos:e});return this.updateViewport(n,Pe,{isPanning:!0}),!0},e._onPanMoveEnd=function(t){if(this.dragPan){var e=this.dragPan.inertia,n=void 0===e?300:e;if(n&&t.velocity){var r=this.getCenter(t),i=[r[0]+t.velocityX*n/2,r[1]+t.velocityY*n/2],o=this.mapState.pan({pos:i}).panEnd();return this.updateViewport(o,_e(_e({},Me),{},{transitionDuration:n,transitionEasing:Se}),{isDragging:!1,isPanning:!0}),!0}}var a=this.mapState.panEnd();return this.updateViewport(a,null,{isDragging:!1,isPanning:!1}),!0},e._onPanRotate=function(t){if(!this.dragRotate)return!1;var e=this.getCenter(t),n=this.mapState.rotate({pos:e});return this.updateViewport(n,Pe,{isRotating:!0}),!0},e._onPanRotateEnd=function(t){if(this.dragRotate){var e=this.dragRotate.inertia,n=void 0===e?300:e;if(n&&t.velocity){var r=this.getCenter(t),i=[r[0]+t.velocityX*n/2,r[1]+t.velocityY*n/2],o=this.mapState.rotate({pos:i}).rotateEnd();return this.updateViewport(o,_e(_e({},Me),{},{transitionDuration:n,transitionEasing:Se}),{isDragging:!1,isRotating:!0}),!0}}var a=this.mapState.panEnd();return this.updateViewport(a,null,{isDragging:!1,isRotating:!1}),!0},e._onWheel=function(t){if(!this.scrollZoom)return!1;var e=this.scrollZoom,n=e.speed,r=void 0===n?.01:n,i=e.smooth,o=void 0!==i&&i;t.preventDefault();var a=this.getCenter(t),s=t.delta,c=2/(1+Math.exp(-Math.abs(s*r)));s<0&&0!==c&&(c=1/c);var u=this.mapState.zoom({pos:a,scale:c});return u.getViewportProps().zoom!==this.mapStateProps.zoom&&(this.updateViewport(u,_e(_e({},Me),{},{transitionInterpolator:new Ft({around:a}),transitionDuration:o?250:1}),{isPanning:!0,isZooming:!0}),!0)},e._onPinchStart=function(t){var e=this.getCenter(t),n=this.mapState.zoomStart({pos:e}).rotateStart({pos:e});return this._startPinchRotation=t.rotation,this._lastPinchEvent=t,this.updateViewport(n,Pe,{isDragging:!0}),!0},e._onPinch=function(t){if(!this.isDragging())return!1;if(!this.touchZoom&&!this.touchRotate)return!1;var e=this.mapState;if(this.touchZoom){var n=t.scale,r=this.getCenter(t);e=e.zoom({pos:r,scale:n})}if(this.touchRotate){var i=t.rotation;e=e.rotate({deltaAngleX:this._startPinchRotation-i})}return this.updateViewport(e,Pe,{isDragging:!0,isPanning:Boolean(this.touchZoom),isZooming:Boolean(this.touchZoom),isRotating:Boolean(this.touchRotate)}),this._lastPinchEvent=t,!0},e._onPinchEnd=function(t){if(!this.isDragging())return!1;if(this.touchZoom){var e=this.touchZoom.inertia,n=void 0===e?300:e,r=this._lastPinchEvent;if(n&&r&&t.scale!==r.scale){var i=this.getCenter(t),o=this.mapState.rotateEnd(),a=Math.log2(t.scale),s=(a-Math.log2(r.scale))/(t.deltaTime-r.deltaTime),c=Math.pow(2,a+s*n/2);return o=o.zoom({pos:i,scale:c}).zoomEnd(),this.updateViewport(o,_e(_e({},Me),{},{transitionInterpolator:new Ft({around:i}),transitionDuration:n,transitionEasing:Se}),{isDragging:!1,isPanning:Boolean(this.touchZoom),isZooming:Boolean(this.touchZoom),isRotating:!1}),this.blockEvents(n),!0}}var u=this.mapState.zoomEnd().rotateEnd();return this._state.startPinchRotation=0,this.updateViewport(u,null,{isDragging:!1,isPanning:!1,isZooming:!1,isRotating:!1}),this._startPinchRotation=null,this._lastPinchEvent=null,!0},e._onTriplePanStart=function(t){var e=this.getCenter(t),n=this.mapState.rotateStart({pos:e});return this.updateViewport(n,Pe,{isDragging:!0}),!0},e._onTriplePan=function(t){if(!this.isDragging())return!1;if(!this.touchRotate)return!1;var e=this.getCenter(t);e[0]-=t.deltaX;var n=this.mapState.rotate({pos:e});return this.updateViewport(n,Pe,{isRotating:!0}),!0},e._onTriplePanEnd=function(t){if(!this.isDragging())return!1;if(this.touchRotate){var e=this.touchRotate.inertia,n=void 0===e?300:e;if(n&&t.velocityY){var r=this.getCenter(t),i=[r[0],r[1]+=t.velocityY*n/2],o=this.mapState.rotate({pos:i});return this.updateViewport(o,_e(_e({},Me),{},{transitionDuration:n,transitionEasing:Se}),{isDragging:!1,isRotating:!0}),this.blockEvents(n),!1}}var a=this.mapState.rotateEnd();return this.updateViewport(a,null,{isDragging:!1,isRotating:!1}),!0},e._onDoubleTap=function(t){if(!this.doubleClickZoom)return!1;var e=this.getCenter(t),n=this.isFunctionKeyPressed(t),r=this.mapState.zoom({pos:e,scale:n?.5:2});return this.updateViewport(r,Object.assign({},Me,{transitionInterpolator:new Ft({around:e})}),{isZooming:!0}),!0},e._onKeyDown=function(t){if(!this.keyboard)return!1;var e,n=this.isFunctionKeyPressed(t),r=this.keyboard,i=r.zoomSpeed,o=void 0===i?2:i,a=r.moveSpeed,s=void 0===a?100:a,c=r.rotateSpeedX,u=void 0===c?15:c,l=r.rotateSpeedY,h=void 0===l?10:l,p=this.mapStateProps;switch(t.srcEvent.keyCode){case 189:e=n?this.getMapState({zoom:p.zoom-Math.log2(o)-1}):this.getMapState({zoom:p.zoom-Math.log2(o)});break;case 187:e=n?this.getMapState({zoom:p.zoom+Math.log2(o)+1}):this.getMapState({zoom:p.zoom+Math.log2(o)});break;case 37:e=n?this.getMapState({bearing:p.bearing-u}):this.mapState.pan({pos:[s,0],startPos:[0,0]});break;case 39:e=n?this.getMapState({bearing:p.bearing+u}):this.mapState.pan({pos:[-s,0],startPos:[0,0]});break;case 38:e=n?this.getMapState({pitch:p.pitch+h}):this.mapState.pan({pos:[0,s],startPos:[0,0]});break;case 40:e=n?this.getMapState({pitch:p.pitch-h}):this.mapState.pan({pos:[0,-s],startPos:[0,0]});break;default:return!1}return this.updateViewport(e,Me)},t}();function Ae(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function Le(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Ae(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Ae(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var ze=Object.assign({},wt.propTypes,{maxZoom:a.number,minZoom:a.number,maxPitch:a.number,minPitch:a.number,onViewStateChange:a.func,onViewportChange:a.func,onInteractionStateChange:a.func,transitionDuration:a.oneOfType([a.number,a.string]),transitionInterpolator:a.object,transitionInterruption:a.number,transitionEasing:a.func,onTransitionStart:a.func,onTransitionInterrupt:a.func,onTransitionEnd:a.func,scrollZoom:a.oneOfType([a.bool,a.object]),dragPan:a.oneOfType([a.bool,a.object]),dragRotate:a.oneOfType([a.bool,a.object]),doubleClickZoom:a.bool,touchZoom:a.oneOfType([a.bool,a.object]),touchRotate:a.oneOfType([a.bool,a.object]),keyboard:a.oneOfType([a.bool,a.object]),onHover:a.func,onClick:a.func,onDblClick:a.func,onContextMenu:a.func,onMouseDown:a.func,onMouseMove:a.func,onMouseUp:a.func,onTouchStart:a.func,onTouchMove:a.func,onTouchEnd:a.func,onMouseEnter:a.func,onMouseLeave:a.func,onMouseOut:a.func,onWheel:a.func,touchAction:a.string,eventRecognizerOptions:a.object,clickRadius:a.number,interactiveLayerIds:a.array,getCursor:a.func,controller:a.instanceOf(Re)}),Ne=Object.assign({},wt.defaultProps,et,Ut.defaultProps,{onViewStateChange:null,onViewportChange:null,onClick:null,onNativeClick:null,onHover:null,onContextMenu:function(t){return t.preventDefault()},scrollZoom:!0,dragPan:!0,dragRotate:!0,doubleClickZoom:!0,touchZoom:!0,touchRotate:!1,keyboard:!0,touchAction:"none",eventRecognizerOptions:{},clickRadius:0,getCursor:function(t){var e=t.isDragging,n=t.isHovering;return e?"grabbing":n?"pointer":"grab"}});function Fe(t){if(t.lngLat||!t.offsetCenter)return t;var e=t.offsetCenter,n=e.x,r=e.y;if(!Number.isFinite(n)||!Number.isFinite(r))return t;var i=[n,r];if(t.point=i,this.map){var o=this.map.unproject(i);t.lngLat=[o.lng,o.lat]}return t}function Ze(t){var e=this.map;if(!e||!t)return null;var n={},r=this.props.clickRadius;this.props.interactiveLayerIds&&(n.layers=this.props.interactiveLayerIds);try{return e.queryRenderedFeatures(r?[[t[0]-r,t[1]+r],[t[0]+r,t[1]-r]]:t,n)}catch(i){return null}}function Ve(t,e){var n=this.props[t];n&&n(Fe.call(this,e))}function Be(t){Ve.call(this,"touch"===t.pointerType?"onTouchStart":"onMouseDown",t)}function Ue(t){Ve.call(this,"touch"===t.pointerType?"onTouchEnd":"onMouseUp",t)}function qe(t){if(Ve.call(this,"touch"===t.pointerType?"onTouchMove":"onMouseMove",t),!this.state.isDragging){var e,n=this.props,r=n.onHover,i=n.interactiveLayerIds;t=Fe.call(this,t),(i||r)&&(e=Ze.call(this,t.point));var o=Boolean(i&&e&&e.length>0),a=o&&!this.state.isHovering,s=!o&&this.state.isHovering;(r||a)&&(t.features=e,r&&r(t)),a&&Ve.call(this,"onMouseEnter",t),s&&Ve.call(this,"onMouseLeave",t),(a||s)&&this.setState({isHovering:o})}}function We(t){var e=this.props,n=e.onClick,r=e.onNativeClick,i=e.onDblClick,o=e.doubleClickZoom,a=[],s=i||o;switch(t.type){case"anyclick":a.push(r),s||a.push(n);break;case"click":s&&a.push(n)}(a=a.filter(Boolean)).length&&((t=Fe.call(this,t)).features=Ze.call(this,t.point),a.forEach((function(e){return e(t)})))}var He=Object(o.forwardRef)((function(t,e){var n=Object(o.useContext)(lt),i=Object(o.useMemo)((function(){return t.controller||new Re}),[]),a=Object(o.useMemo)((function(){return new je(null,{touchAction:t.touchAction,recognizerOptions:t.eventRecognizerOptions})}),[]),s=Object(o.useRef)(null),c=Object(o.useRef)(null),u=Object(o.useRef)({width:0,height:0,state:{isHovering:!1,isDragging:!1}}).current;u.props=t,u.map=c.current&&c.current.getMap(),u.setState=function(e){u.state=Le(Le({},u.state),e),s.current.style.cursor=t.getCursor(u.state)};var l,h,p=!0,f=function(t,e,n){if(p)l=[t,e,n];else{var r=u.props,i=r.onViewStateChange,o=r.onViewportChange;Object.defineProperty(t,"position",{get:function(){return[0,0,pt(u.map,t)]}}),i&&i({viewState:t,interactionState:e,oldViewState:n}),o&&o(t,e,n)}};Object(o.useImperativeHandle)(e,(function(){return function(t){return{getMap:t.current&&t.current.getMap,queryRenderedFeatures:t.current&&t.current.queryRenderedFeatures}}(c)}),[]);var d=Object(o.useMemo)((function(){return Le(Le({},n),{},{eventManager:a,container:n.container||s.current})}),[n,s.current]);d.onViewportChange=f,d.viewport=n.viewport||gt(u),u.viewport=d.viewport;var v=function(t){var e=t.isDragging,n=void 0!==e&&e;if(n!==u.state.isDragging&&u.setState({isDragging:n}),p)h=t;else{var r=u.props.onInteractionStateChange;r&&r(t)}},g=function(){u.width&&u.height&&i.setOptions(Le(Le(Le({},u.props),u.props.viewState),{},{isInteractive:Boolean(u.props.onViewStateChange||u.props.onViewportChange),onViewportChange:f,onStateChange:v,eventManager:a,width:u.width,height:u.height}))};Object(o.useEffect)((function(){return a.setElement(s.current),a.on({pointerdown:Be.bind(u),pointermove:qe.bind(u),pointerup:Ue.bind(u),pointerleave:Ve.bind(u,"onMouseOut"),click:We.bind(u),anyclick:We.bind(u),dblclick:Ve.bind(u,"onDblClick"),wheel:Ve.bind(u,"onWheel"),contextmenu:Ve.bind(u,"onContextMenu")}),function(){a.destroy()}}),[]),ht((function(){l&&f.apply(void 0,Object(r.a)(l)),h&&v(h)})),g();var m=t.width,b=t.height,y=t.style,O=t.getCursor,w=Object(o.useMemo)((function(){return Le(Le({position:"relative"},y),{},{width:m,height:b,cursor:O(u.state)})}),[y,m,b,O,u.state]);return l&&u._child||(u._child=o.createElement(ut,{value:d},o.createElement("div",{key:"event-canvas",ref:s,style:w},o.createElement(wt,Object.assign({},t,{width:"100%",height:"100%",style:null,onResize:function(t){var e=t.width,n=t.height;u.width=e,u.height=n,g(),u.props.onResize({width:e,height:n})},ref:c}))))),p=!1,u._child}));He.supported=wt.supported,He.propTypes=ze,He.defaultProps=Ne;var Xe=He;function Ye(t,e){if(t===e)return!0;if(!t||!e)return!1;if(Array.isArray(t)){if(!Array.isArray(e)||t.length!==e.length)return!1;for(var n=0;n<t.length;n++)if(!Ye(t[n],e[n]))return!1;return!0}if(Array.isArray(e))return!1;if("object"==typeof t&&"object"==typeof e){var r=Object.keys(t),i=Object.keys(e);if(r.length!==i.length)return!1;for(var o=0,a=r;o<a.length;o++){var s=a[o];if(!e.hasOwnProperty(s))return!1;if(!Ye(t[s],e[s]))return!1}return!0}return!1}function Ge(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var Ke=0;function Qe(t,e,n){if(t.style&&t.style._loaded){var r=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Ge(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Ge(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},n);return delete r.id,delete r.children,t.addSource(e,r),t.getSource(e)}return null}var Je=function(t){var e=Object(o.useContext)(lt),n=Object(o.useRef)({id:t.id,type:t.type}),r=Object(o.useState)(0)[1],i=Object(o.useMemo)((function(){return t.id||"jsx-source-"+Ke++}),[]),a=e.map;Object(o.useEffect)((function(){if(a){var t=function(){return r((function(t){return t+1}))};return a.on("styledata",t),function(){a.off("styledata",t),requestAnimationFrame((function(){a.style&&a.style._loaded&&a.getSource(i)&&a.removeSource(i)}))}}}),[a,i]);var s=a&&a.style&&a.getSource(i);return s?function(t,e,n){J(e.id===n.id,"source id changed"),J(e.type===n.type,"source type changed");var r="",i=0;for(var o in e)"children"===o||"id"===o||Ye(n[o],e[o])||(r=o,i++);if(i){var a=e.type;if("geojson"===a)t.setData(e.data);else if("image"===a)t.updateImage({url:e.url,coordinates:e.coordinates});else if("canvas"!==a&&"video"!==a||1!==i||"coordinates"!==r)if("vector"===a&&t.setUrl)switch(r){case"url":t.setUrl(e.url);break;case"tiles":t.setTiles(e.tiles)}else console.warn("Unable to update <Source> prop: "+r);else t.setCoordinates(e.coordinates)}}(s,t,n.current):s=Qe(a,i,t),n.current=t,s&&o.Children.map(t.children,(function(t){return t&&Object(o.cloneElement)(t,{source:i})}))||null},$e=n("zLVn");function tn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function en(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?tn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):tn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var nn={type:a.oneOf(["fill","line","symbol","circle","fill-extrusion","raster","background","heatmap","hillshade","sky"]).isRequired,id:a.string,source:a.string,beforeId:a.string};function rn(t,e,n,r){J(n.id===r.id,"layer id changed"),J(n.type===r.type,"layer type changed");try{!function(t,e,n,r){var i=n.layout,o=void 0===i?{}:i,a=n.paint,s=void 0===a?{}:a,c=n.filter,u=n.minzoom,l=n.maxzoom,h=n.beforeId,p=Object($e.a)(n,["layout","paint","filter","minzoom","maxzoom","beforeId"]);if(h!==r.beforeId&&t.moveLayer(e,h),o!==r.layout){var f=r.layout||{};for(var d in o)Ye(o[d],f[d])||t.setLayoutProperty(e,d,o[d]);for(var v in f)o.hasOwnProperty(v)||t.setLayoutProperty(e,v,void 0)}if(s!==r.paint){var g=r.paint||{};for(var m in s)Ye(s[m],g[m])||t.setPaintProperty(e,m,s[m]);for(var b in g)s.hasOwnProperty(b)||t.setPaintProperty(e,b,void 0)}for(var y in Ye(c,r.filter)||t.setFilter(e,c),u===r.minzoom&&l===r.maxzoom||t.setLayerZoomRange(e,u,l),p)Ye(p[y],r[y])||t.setLayerProperty(e,y,p[y])}(t,e,n,r)}catch(i){console.warn(i)}}var on=0;function an(t){var e=Object(o.useContext)(lt),n=Object(o.useRef)({id:t.id,type:t.type}),r=Object(o.useState)(0)[1],i=Object(o.useMemo)((function(){return t.id||"jsx-layer-"+on++}),[]),a=e.map;return Object(o.useEffect)((function(){if(a){var t=function(){return r((function(t){return t+1}))};return a.on("styledata",t),function(){a.off("styledata",t),a.style&&a.style._loaded&&a.removeLayer(i)}}}),[a]),a&&a.style&&a.getLayer(i)?rn(a,i,t,n.current):function(t,e,n){if(t.style&&t.style._loaded){var r=en(en({},n),{},{id:e});delete r.beforeId,t.addLayer(r,n.beforeId)}}(a,i,t),n.current=t,null}an.propTypes=nn;var sn=an,cn={captureScroll:!1,captureDrag:!0,captureClick:!0,captureDoubleClick:!0,capturePointerMove:!1},un={captureScroll:a.bool,captureDrag:a.bool,captureClick:a.bool,captureDoubleClick:a.bool,capturePointerMove:a.bool};function ln(t){void 0===t&&(t={});var e=Object(o.useContext)(lt),n=Object(o.useRef)(null),r=Object(o.useRef)({props:t,state:{},context:e,containerRef:n}).current;return r.props=t,r.context=e,Object(o.useEffect)((function(){return function(t){var e=t.containerRef.current,n=t.context.eventManager;if(e&&n){var r={wheel:function(e){var n=t.props;n.captureScroll&&e.stopPropagation(),n.onScroll&&n.onScroll(e,t)},panstart:function(e){var n=t.props;n.captureDrag&&e.stopPropagation(),n.onDragStart&&n.onDragStart(e,t)},anyclick:function(e){var n=t.props;n.captureClick&&e.stopPropagation(),n.onNativeClick&&n.onNativeClick(e,t)},click:function(e){var n=t.props;n.captureClick&&e.stopPropagation(),n.onClick&&n.onClick(e,t)},dblclick:function(e){var n=t.props;n.captureDoubleClick&&e.stopPropagation(),n.onDoubleClick&&n.onDoubleClick(e,t)},pointermove:function(e){var n=t.props;n.capturePointerMove&&e.stopPropagation(),n.onPointerMove&&n.onPointerMove(e,t)}};return n.watch(r,e),function(){n.off(r)}}}(r)}),[e.eventManager]),r}function hn(t){var e=t.instance,n=ln(t),r=n.context,i=n.containerRef;return e._context=r,e._containerRef=i,e._render()}var pn=function(t){function e(){for(var e,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return(e=t.call.apply(t,[this].concat(r))||this)._context={},e._containerRef=Object(o.createRef)(),e._onScroll=function(t){},e._onDragStart=function(t){},e._onDblClick=function(t){},e._onClick=function(t){},e._onPointerMove=function(t){},e}Object(Pt.a)(e,t);var n=e.prototype;return n._render=function(){throw new Error("_render() not implemented")},n.render=function(){return o.createElement(hn,Object.assign({instance:this},this.props,{onScroll:this._onScroll,onDragStart:this._onDragStart,onDblClick:this._onDblClick,onClick:this._onClick,onPointerMove:this._onPointerMove}))},e}(o.PureComponent);function fn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function dn(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?fn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):fn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}pn.defaultProps=cn;Object.assign({},un,{draggable:a.bool,onDrag:a.func,onDragEnd:a.func,onDragStart:a.func,offsetLeft:a.number,offsetTop:a.number});var vn=Object.assign({},cn,{draggable:!1,offsetLeft:0,offsetTop:0});function gn(t){var e=t.offsetCenter;return[e.x,e.y]}function mn(t,e,n,r){var i=t[0]+e[0]-n.offsetLeft,o=t[1]+e[1]-n.offsetTop;return r.viewport.unproject([i,o])}function bn(t,e){var n=e.props,r=e.callbacks,i=e.state,o=e.context,a=e.containerRef;if(n.draggable){t.stopPropagation();var s=gn(t),c=function(t,e){var n=t.center,r=n.x,i=n.y;if(e){var o=e.getBoundingClientRect();return[o.left-r,o.top-i]}return null}(t,a.current);if(i.setDragPos(s),i.setDragOffset(c),r.onDragStart&&c){var u=Object.assign({},t);u.lngLat=mn(s,c,n,o),r.onDragStart(u)}}}function yn(t){var e=t.context.eventManager;if(e&&t.state.dragPos){var n={panmove:function(e){return function(t,e){var n=e.props,r=e.callbacks,i=e.state,o=e.context;t.stopPropagation();var a=gn(t);i.setDragPos(a);var s=i.dragOffset;if(r.onDrag&&s){var c=Object.assign({},t);c.lngLat=mn(a,s,n,o),r.onDrag(c)}}(e,t)},panend:function(e){return function(t,e){var n=e.props,r=e.callbacks,i=e.state,o=e.context;t.stopPropagation();var a=i.dragPos,s=i.dragOffset;if(i.setDragPos(null),i.setDragOffset(null),r.onDragEnd&&a&&s){var c=Object.assign({},t);c.lngLat=mn(a,s,n,o),r.onDragEnd(c)}}(e,t)},pancancel:function(e){return n=e,r=t.state,n.stopPropagation(),r.setDragPos(null),void r.setDragOffset(null);var n,r}};return e.watch(n),function(){e.off(n)}}}var On="undefined"!=typeof window&&window.devicePixelRatio||1,wn=function(t){return Math.round(t*On)/On},jn=function(t,e,n){if(void 0===n&&(n="x"),null===t)return e;var r="x"===n?t.offsetWidth:t.offsetHeight;return wn(e/100*r)/r*100},En=Object.assign({},vn,{className:""});function _n(t){var e=function(t){var e=Object(o.useState)(null),n=e[0],r=e[1],i=Object(o.useState)(null),a=i[0],s=i[1],c=ln(dn(dn({},t),{},{onDragStart:bn}));return c.callbacks=t,c.state.dragPos=n,c.state.setDragPos=r,c.state.dragOffset=a,c.state.setDragOffset=s,Object(o.useEffect)((function(){return yn(c)}),[c.context.eventManager,Boolean(n)]),c}(t),n=e.state,r=e.containerRef,i=t.children,a=t.className,s=t.draggable,c=n.dragPos,u=function(t){var e=t.props,n=t.state,r=t.context,i=e.longitude,o=e.latitude,a=e.offsetLeft,s=e.offsetTop,c=n.dragPos,u=n.dragOffset,l=r.viewport,h=r.map;if(c&&u)return[c[0]+u[0],c[1]+u[1]];var p=pt(h,{longitude:i,latitude:o}),f=l.project([i,o,p]),d=f[0],v=f[1];return[d+=a,v+=s]}(e),l=u[0],h=u[1],p="translate("+wn(l)+"px, "+wn(h)+"px)",f=s?c?"grabbing":"grab":"auto",d=Object(o.useMemo)((function(){var t={position:"absolute",left:0,top:0,transform:p,cursor:f};return o.createElement("div",{className:"mapboxgl-marker "+a,ref:e.containerRef,style:t},i)}),[i,a]),v=r.current;return v&&(v.style.transform=p,v.style.cursor=f),d}_n.defaultProps=En;var Pn=o.memo(_n),Mn={top:{x:.5,y:0},"top-left":{x:0,y:0},"top-right":{x:1,y:0},bottom:{x:.5,y:1},"bottom-left":{x:0,y:1},"bottom-right":{x:1,y:1},left:{x:0,y:.5},right:{x:1,y:.5}},Sn=Object.keys(Mn);var xn=Object.assign({},cn,{className:"",offsetLeft:0,offsetTop:0,tipSize:10,anchor:"bottom",dynamicPosition:!0,sortByDepth:!1,closeButton:!0,closeOnClick:!0,onClose:function(){}});function Tn(t,e,n,r){var i=r[0],o=r[1],a=t.anchor,s=t.dynamicPosition,c=t.tipSize;return n&&s?function(t){var e=t.x,n=t.y,r=t.width,i=t.height,o=t.selfWidth,a=t.selfHeight,s=t.anchor,c=t.padding,u=void 0===c?0:c,l=Mn[s],h=l.x,p=l.y,f=n-p*a,d=f+a,v=Math.max(0,u-f)+Math.max(0,d-i+u);if(v>0){var g=p,m=v;for(p=0;p<=1;p+=.5)d=(f=n-p*a)+a,(v=Math.max(0,u-f)+Math.max(0,d-i+u))<m&&(m=v,g=p);p=g}var b=.5;.5===p&&(h=Math.floor(h),b=1);var y=e-h*o,O=y+o,w=Math.max(0,u-y)+Math.max(0,O-r+u);if(w>0){var j=h,E=w;for(h=0;h<=1;h+=b)O=(y=e-h*o)+o,(w=Math.max(0,u-y)+Math.max(0,O-r+u))<E&&(E=w,j=h);h=j}return Sn.find((function(t){var e=Mn[t];return e.x===h&&e.y===p}))||s}({x:i,y:o,anchor:a,padding:c,width:e.width,height:e.height,selfWidth:n.clientWidth,selfHeight:n.clientHeight}):a}function kn(t){var e=Object(o.useRef)(null),n=ln(t),r=n.context,i=n.containerRef,a=Object(o.useState)(!1)[1];Object(o.useEffect)((function(){a(!0)}),[e.current]),Object(o.useEffect)((function(){if(r.eventManager&&t.closeOnClick){var e=function(){return n.props.onClose()};return r.eventManager.on("anyclick",e),function(){r.eventManager.off("anyclick",e)}}}),[r.eventManager,t.closeOnClick]);var s=r.viewport,c=r.map,u=t.className,l=t.longitude,h=t.latitude,p=t.tipSize,f=t.closeButton,d=t.children,v=t.altitude;void 0===v&&(v=pt(c,{longitude:l,latitude:h}));var g=s.project([l,h,v]),m=Tn(t,s,e.current,g),b=function(t,e,n,r,i){var o=r[0],a=r[1],s=r[2],c=t.offsetLeft,u=t.offsetTop,l=t.sortByDepth,h=Mn[i],p=o+c,f=a+u,d={position:"absolute",transform:"\n      translate("+jn(n,100*-h.x)+"%, "+jn(n,100*-h.y,"y")+"%)\n      translate("+wn(p)+"px, "+wn(f)+"px)\n    ",display:void 0,zIndex:void 0};return l?(s>1||s<-1||o<0||o>e.width||a<0||a>e.height?d.display="none":d.zIndex=Math.floor((1-s)/2*1e5),d):d}(t,s,i.current,g,m),y=Object(o.useCallback)((function(t){n.props.onClose();var e=n.context.eventManager;e&&e.once("click",(function(t){return t.stopPropagation()}),t.target)}),[]);return o.createElement("div",{className:"mapboxgl-popup mapboxgl-popup-anchor-"+m+" "+u,style:b,ref:i},o.createElement("div",{key:"tip",className:"mapboxgl-popup-tip",style:{borderWidth:p}}),o.createElement("div",{key:"content",ref:e,className:"mapboxgl-popup-content"},f&&o.createElement("button",{key:"close-button",className:"mapboxgl-popup-close-button",type:"button",onClick:y},"×"),d))}kn.defaultProps=xn;var Dn=o.memo(kn);function Cn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var In=Object.assign({},cn,{className:"",toggleLabel:"Toggle Attribution"});function Rn(t){var e=ln(t),n=e.context,r=e.containerRef,a=Object(o.useRef)(null),s=Object(o.useState)(!1),c=s[0],u=s[1];Object(o.useEffect)((function(){var e;return n.map&&(e=function(t,e,n,r){var i=new X.a.AttributionControl(t);return i._map=e,i._container=n,i._innerContainer=r,i._updateAttributions(),i._updateEditLink(),e.on("styledata",i._updateData),e.on("sourcedata",i._updateData),i}({customAttribution:t.customAttribution},n.map,r.current,a.current)),function(){return e&&function(t){t._map.off("styledata",t._updateData),t._map.off("sourcedata",t._updateData)}(e)}}),[n.map]);var l=void 0===t.compact?n.viewport.width<=640:t.compact;Object(o.useEffect)((function(){!l&&c&&u(!1)}),[l]);var h=Object(o.useCallback)((function(){return u((function(t){return!t}))}),[]),p=Object(o.useMemo)((function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Cn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Cn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute"},t.style)}),[t.style]);return o.createElement("div",{style:p,className:t.className},o.createElement("div",{ref:r,"aria-pressed":c,className:"mapboxgl-ctrl mapboxgl-ctrl-attrib "+(l?"mapboxgl-compact":"")+" "+(c?"mapboxgl-compact-show":"")},o.createElement("button",{type:"button",className:"mapboxgl-ctrl-attrib-button",title:t.toggleLabel,onClick:h}),o.createElement("div",{ref:a,className:"mapboxgl-ctrl-attrib-inner",role:"list"})))}Rn.defaultProps=In;var An=o.memo(Rn),Ln=n("Zs1x");function zn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var Nn=Object.assign({},cn,{className:"",container:null,label:"Toggle fullscreen"});function Fn(t){var e=ln(t),n=e.context,r=e.containerRef,a=Object(o.useState)(!1),s=a[0],c=a[1],u=Object(o.useState)(!1),l=u[0],h=u[1],p=Object(o.useState)(null),f=p[0],d=p[1];Object(o.useEffect)((function(){var t=new X.a.FullscreenControl;d(t),h(t._checkFullscreenSupport());var e=function(){var e=!t._fullscreen;t._fullscreen=e,c(e)};return Ln.a.addEventListener(t._fullscreenchange,e),function(){Ln.a.removeEventListener(t._fullscreenchange,e)}}),[]);var v=Object(o.useMemo)((function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?zn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):zn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute"},t.style)}),[t.style]);if(!l)return null;var g=t.className,m=t.label,b=s?"shrink":"fullscreen";return o.createElement("div",{style:v,className:g},o.createElement("div",{className:"mapboxgl-ctrl mapboxgl-ctrl-group",ref:r},o.createElement("button",{key:b,className:"mapboxgl-ctrl-icon mapboxgl-ctrl-"+b,type:"button",title:m,onClick:function(){f&&(f._container=t.container||n.container,f._onClickFullscreen())}},o.createElement("span",{className:"mapboxgl-ctrl-icon","aria-hidden":"true"}))))}Fn.defaultProps=Nn;var Zn,Vn=o.memo(Fn);function Bn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var Un=function(){},qn=Object.assign({},cn,{className:"",label:"Find My Location",disabledLabel:"Location Not Available",auto:!1,positionOptions:{enableHighAccuracy:!1,timeout:6e3},fitBoundsOptions:{maxZoom:15},trackUserLocation:!1,showUserLocation:!0,showUserHeading:!1,showAccuracyCircle:!0,onGeolocate:function(){}});function Wn(t,e){var n=e.context,r=e.props,i=function(t){var e=new X.a.LngLat(t.coords.longitude,t.coords.latitude),n=t.coords.accuracy,r=e.toBounds(n);return[[r._ne.lng,r._ne.lat],[r._sw.lng,r._sw.lat]]}(t),o=n.viewport.fitBounds(i,r.fitBoundsOptions),a=o.longitude,s=o.latitude,c=o.zoom,u=Object.assign({},n.viewport,{longitude:a,latitude:s,zoom:c}),l=new ot(u),h=Object.assign({},l.getViewportProps(),Me),p=r.onViewportChange||n.onViewportChange||Un;(r.onViewStateChange||n.onViewStateChange||Un)({viewState:h}),p(h)}function Hn(t){var e=ln(t),n=e.context,r=e.containerRef,a=Object(o.useRef)(null),s=Object(o.useState)(null),c=s[0],u=s[1],l=Object(o.useState)(!1),h=l[0],p=l[1];Object(o.useEffect)((function(){var r;return n.map&&(void 0!==Zn?Promise.resolve(Zn):void 0!==window.navigator.permissions?window.navigator.permissions.query({name:"geolocation"}).then((function(t){return Zn="denied"!==t.state})):(Zn=Boolean(window.navigator.geolocation),Promise.resolve(Zn))).then((function(i){p(i),a.current&&((r=function(t,e,n){var r=new X.a.GeolocateControl(e);r._container=Ln.a.createElement("div"),r._map={on:function(){},_getUIString:function(){return""}},r._setupUI(!0),r._map=t.map,r._geolocateButton=n;var i=t.eventManager;return r.options.trackUserLocation&&i&&i.on("panstart",(function(){"ACTIVE_LOCK"===r._watchState&&(r._watchState="BACKGROUND",n.classList.add("mapboxgl-ctrl-geolocate-background"),n.classList.remove("mapboxgl-ctrl-geolocate-active"))})),r.on("geolocate",e.onGeolocate),r}(n,t,a.current))._updateCamera=function(t){return Wn(t,e)},u(r))})),function(){r&&r._clearWatch()}}),[n.map]);var f=Object(o.useCallback)((function(){c&&(c.options=e.props,c.trigger())}),[c]);Object(o.useEffect)((function(){t.auto&&f()}),[c,t.auto]),Object(o.useEffect)((function(){c&&c._onZoom()}),[n.viewport.zoom]);var d=t.className,v=t.label,g=t.disabledLabel,m=t.trackUserLocation,b=Object(o.useMemo)((function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Bn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Bn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute"},t.style)}),[t.style]);return o.createElement("div",{style:b,className:d},o.createElement("div",{key:"geolocate-control",className:"mapboxgl-ctrl mapboxgl-ctrl-group",ref:r},o.createElement("button",{key:"geolocate",className:"mapboxgl-ctrl-icon mapboxgl-ctrl-geolocate",ref:a,disabled:!h,"aria-pressed":!m,type:"button",title:h?v:g,"aria-label":h?v:g,onClick:f},o.createElement("span",{className:"mapboxgl-ctrl-icon","aria-hidden":"true"}))))}Hn.defaultProps=qn;var Xn=o.memo(Hn);function Yn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var Gn=function(){},Kn=Object.assign({},cn,{className:"",showCompass:!0,showZoom:!0,zoomInLabel:"Zoom In",zoomOutLabel:"Zoom Out",compassLabel:"Reset North"});function Qn(t){return function(t,e){for(var n=(t||"").split(".").map(Number),r=(e||"").split(".").map(Number),i=0;i<3;i++){var o=n[i]||0,a=r[i]||0;if(o<a)return-1;if(o>a)return 1}return 0}(t,"1.6.0")>=0?2:1}function Jn(t,e,n){var r=t.viewport,i=new ot(Object.assign({},r,n)),o=Object.assign({},i.getViewportProps(),Me),a=e.onViewportChange||t.onViewportChange||Gn;(e.onViewStateChange||t.onViewStateChange||Gn)({viewState:o}),a(o)}function $n(t,e,n,r){return o.createElement("button",{key:t,className:"mapboxgl-ctrl-icon mapboxgl-ctrl-"+t,type:"button",title:e,onClick:n},r||o.createElement("span",{className:"mapboxgl-ctrl-icon","aria-hidden":"true"}))}function tr(t){var e=ln(t),n=e.context,r=e.containerRef,a=t.className,s=t.showCompass,c=t.showZoom,u=t.zoomInLabel,l=t.zoomOutLabel,h=t.compassLabel,p=Object(o.useMemo)((function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Yn(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Yn(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute"},t.style)}),[t.style]);return o.createElement("div",{style:p,className:a},o.createElement("div",{className:"mapboxgl-ctrl mapboxgl-ctrl-group",ref:r},c&&$n("zoom-in",u,(function(){Jn(n,t,{zoom:n.viewport.zoom+1})})),c&&$n("zoom-out",l,(function(){Jn(n,t,{zoom:n.viewport.zoom-1})})),s&&$n("compass",h,(function(){Jn(n,t,{bearing:0,pitch:0})}),function(t){var e=Object(o.useMemo)((function(){return t.map?Qn(t.map.version):2}),[t.map]),n={transform:"rotate("+-t.viewport.bearing+"deg)"};return 2===e?o.createElement("span",{className:"mapboxgl-ctrl-icon","aria-hidden":"true",style:n}):o.createElement("span",{className:"mapboxgl-ctrl-compass-arrow",style:n})}(n))))}tr.defaultProps=Kn;var er=o.memo(tr);function nr(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var rr=Object.assign({},cn,{className:"",maxWidth:100,unit:"metric"});function ir(t){var e=ln(t),n=e.context,r=e.containerRef,a=Object(o.useState)(null),s=a[0],c=a[1];Object(o.useEffect)((function(){if(n.map){var t=new X.a.ScaleControl;t._map=n.map,t._container=r.current,c(t)}}),[n.map]),s&&(s.options=t,s._onMove());var u=Object(o.useMemo)((function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?nr(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):nr(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute"},t.style)}),[t.style]);return o.createElement("div",{style:u,className:t.className},o.createElement("div",{ref:r,className:"mapboxgl-ctrl mapboxgl-ctrl-scale"}))}ir.defaultProps=rr;var or=o.memo(ir),ar="undefined"!=typeof window&&window.devicePixelRatio||1;function sr(t){var e=ln(t),n=e.context,r=e.containerRef,i=Object(o.useState)(null),a=i[0],s=i[1];Object(o.useEffect)((function(){s(r.current.getContext("2d"))}),[]);var c=n.viewport,u=n.isDragging;return a&&(a.save(),a.scale(ar,ar),t.redraw({width:c.width,height:c.height,ctx:a,isDragging:u,project:c.project,unproject:c.unproject}),a.restore()),o.createElement("canvas",{ref:r,width:c.width*ar,height:c.height*ar,style:{width:c.width+"px",height:c.height+"px",position:"absolute",left:0,top:0}})}sr.defaultProps={captureScroll:!1,captureDrag:!1,captureClick:!1,captureDoubleClick:!1,capturePointerMove:!1};var cr=sr;function ur(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function lr(t){var e=ln(t),n=e.context,r=e.containerRef,a=n.viewport,s=n.isDragging,c=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?ur(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ur(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute",left:0,top:0,width:a.width,height:a.height},t.style);return o.createElement("div",{ref:r,style:c},t.redraw({width:a.width,height:a.height,isDragging:s,project:a.project,unproject:a.unproject}))}lr.defaultProps={captureScroll:!1,captureDrag:!1,captureClick:!1,captureDoubleClick:!1,capturePointerMove:!1};var hr=lr;function pr(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function fr(t){var e=ln(t),n=e.context,r=e.containerRef,a=n.viewport,s=n.isDragging,c=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?pr(Object(n),!0).forEach((function(e){Object(i.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):pr(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({position:"absolute",left:0,top:0},t.style);return o.createElement("svg",{width:a.width,height:a.height,ref:r,style:c},t.redraw({width:a.width,height:a.height,isDragging:s,project:a.project,unproject:a.unproject}))}fr.defaultProps={captureScroll:!1,captureDrag:!1,captureClick:!1,captureDoubleClick:!1,capturePointerMove:!1};var dr=fr,vr=X.a?X.a.setRTLTextPlugin:function(){}},uR8M:function(t,e,n){"use strict";n.d(e,"a",(function(){return u}));var r=n("rePB");function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function o(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?i(Object(n),!0).forEach((function(e){Object(r.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function a(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return s(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return s(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0;return function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=t[Symbol.iterator]()).next.bind(n)}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var c=["type","source","source-layer","minzoom","maxzoom","filter","layout"];function u(t){if(!t)return null;if("string"==typeof t)return t;t.toJS&&(t=t.toJS());for(var e,n={},r=a(t.layers);!(e=r()).done;){var i=e.value;n[i.id]=i}var s=t.layers.map((function(t){var e=n[t.ref],r=null;if("interactive"in t&&delete(r=o({},t)).interactive,e){delete(r=r||o({},t)).ref;for(var i,s=a(c);!(i=s()).done;){var u=i.value;u in e&&(r[u]=e[u])}}return r||t}));return o(o({},t),{},{layers:s})}},yU0y:function(t,e,n){"use strict";n.d(e,"b",(function(){return r})),n.d(e,"a",(function(){return i})),n.d(e,"c",(function(){return o}));n("QFcT");var r=1e-6,i="undefined"!=typeof Float32Array?Float32Array:Array,o=Math.random;Math.PI;Math.hypot||(Math.hypot=function(){for(var t=0,e=arguments.length;e--;)t+=arguments[e]*arguments[e];return Math.sqrt(t)})},zLVn:function(t,e,n){"use strict";function r(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)n=o[r],e.indexOf(n)>=0||(i[n]=t[n]);return i}n.d(e,"a",(function(){return r}))}}]);
\ No newline at end of file
diff --git a/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js.LICENSE.txt b/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js.LICENSE.txt
similarity index 100%
rename from 73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js.LICENSE.txt
rename to 73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js.LICENSE.txt
diff --git a/docs/advanced/custom-components/index.html b/docs/advanced/custom-components/index.html
index bebea604..a1b91f34 100644
--- a/docs/advanced/custom-components/index.html
+++ b/docs/advanced/custom-components/index.html
@@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/advanced/custom-components/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Custom Components" class="" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="custom-components" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#custom-components" aria-label="custom components permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Custom Components</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">You may create your own map control components by consuming <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/map-context">MapContext</a>.</p><h2 style="position:relative" id="using-the-mapcontext" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#using-the-mapcontext" aria-label="using the mapcontext permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using the MapContext</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">The following component renders a label &quot;(longitude, latitude)&quot; at the given coordinate:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/advanced/custom-components/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Custom Components" class="" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="custom-components" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#custom-components" aria-label="custom components permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Custom Components</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">You may create your own map control components by consuming <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/map-context">MapContext</a>.</p><h2 style="position:relative" id="using-the-mapcontext" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#using-the-mapcontext" aria-label="using the mapcontext permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using the MapContext</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">The following component renders a label &quot;(longitude, latitude)&quot; at the given coordinate:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> MapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>MapContext<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token keyword">function</span> <span class="token function">CustomMarker</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@@ -148,4 +148,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <span class="token operator">&lt;</span>CustomControl <span class="token operator">/</span><span class="token operator">&gt;</span>
     <span class="token operator">&lt;</span><span class="token operator">/</span>MapGL<span class="token operator">&gt;</span>
   <span class="token punctuation">)</span>
-<span class="token punctuation">}</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Calling <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">useMapControl(opts)</code> returns an object containing the following fields:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">context</code> (MapContext) - the current context value</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">containerRef</code> (RefObject) - this should be assigned to the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ref</code> prop of the DOM element that the event listeners should attach to.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">This hook supports the following options:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onScroll</code> (Function) - called on mouse wheel event. Can be used to stop map from zooming when this component is scrolled.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragStart</code> (Function) - called on dragstart event. Can be used to stop map from panning when this component is dragged.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> (Function) - called on click event. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDoubleClick</code> (Function) - called on double click event. Can be used to stop map from zooming when this component is double clicked.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onPointerMove</code> (Function) - called on pointermove event. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</li></ul></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/advanced/custom-components";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token punctuation">}</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Calling <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">useMapControl(opts)</code> returns an object containing the following fields:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">context</code> (MapContext) - the current context value</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">containerRef</code> (RefObject) - this should be assigned to the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ref</code> prop of the DOM element that the event listeners should attach to.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">This hook supports the following options:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onScroll</code> (Function) - called on mouse wheel event. Can be used to stop map from zooming when this component is scrolled.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragStart</code> (Function) - called on dragstart event. Can be used to stop map from panning when this component is dragged.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> (Function) - called on click event. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDoubleClick</code> (Function) - called on double click event. Can be used to stop map from zooming when this component is double clicked.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onPointerMove</code> (Function) - called on pointermove event. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</li></ul></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/advanced/custom-components";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/advanced/custom-map-controller/index.html b/docs/advanced/custom-map-controller/index.html
index 111641e7..b56b963a 100644
--- a/docs/advanced/custom-map-controller/index.html
+++ b/docs/advanced/custom-map-controller/index.html
@@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/advanced/custom-map-controller/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Custom Map Controller" class="" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="custom-map-controller" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#custom-map-controller" aria-label="custom map controller permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Custom Map Controller</h1><h2 style="position:relative" id="overriding-the-default-map-controller" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#overriding-the-default-map-controller" aria-label="overriding the default map controller permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Overriding The Default Map Controller</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">To change the default behavior of map interaction, you can provide a custom map control to the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">controller</code> prop of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">This custom map control must offer the following interface:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">setOptions(options)</code> - called by <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> when props change.</li></ul><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx">  <span class="token keyword">const</span> mapController <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MyMapController</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/advanced/custom-map-controller/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Custom Map Controller" class="" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="custom-map-controller" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#custom-map-controller" aria-label="custom map controller permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Custom Map Controller</h1><h2 style="position:relative" id="overriding-the-default-map-controller" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#overriding-the-default-map-controller" aria-label="overriding the default map controller permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Overriding The Default Map Controller</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">To change the default behavior of map interaction, you can provide a custom map control to the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">controller</code> prop of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">This custom map control must offer the following interface:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">setOptions(options)</code> - called by <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> when props change.</li></ul><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx">  <span class="token keyword">const</span> mapController <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MyMapController</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
   <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ReactMapGL</span></span> <span class="token attr-name">controller</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>mapController<span class="token punctuation">}</span></span> <span class="token attr-name">...</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
@@ -150,4 +150,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">_onPanRotate</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onRotate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span></code></pre></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/advanced/custom-map-controller";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  <span class="token punctuation">}</span></code></pre></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/advanced/custom-map-controller";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/advanced/viewport-transition/index.html b/docs/advanced/viewport-transition/index.html
index d490f316..94b561df 100644
--- a/docs/advanced/viewport-transition/index.html
+++ b/docs/advanced/viewport-transition/index.html
@@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/advanced/viewport-transition/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Viewport Transition" class="" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="viewport-transition" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#viewport-transition" aria-label="viewport transition permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Viewport Transition</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl</code> does not expose the transition API from <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapbox-gl-js</code> since it is designed to be a stateless component, and needs to synchronize with separate overlay systems such as deck.gl.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Instead, transitions can be defined using <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>&#x27;s transition props.</p><h2 style="position:relative" id="example-fly-to-a-new-location" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#example-fly-to-a-new-location" aria-label="example fly to a new location permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example: Fly to a New Location</h2><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/advanced/viewport-transition/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Viewport Transition" class="" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="viewport-transition" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#viewport-transition" aria-label="viewport transition permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Viewport Transition</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl</code> does not expose the transition API from <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapbox-gl-js</code> since it is designed to be a stateless component, and needs to synchronize with separate overlay systems such as deck.gl.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Instead, transitions can be defined using <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>&#x27;s transition props.</p><h2 style="position:relative" id="example-fly-to-a-new-location" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#example-fly-to-a-new-location" aria-label="example fly to a new location permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example: Fly to a New Location</h2><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>FlyToInterpolator<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 <span class="token comment">// 3rd-party easing functions</span>
 <span class="token keyword">import</span> d3 <span class="token keyword">from</span> <span class="token string">&#x27;d3-ease&#x27;</span><span class="token punctuation">;</span>
@@ -137,4 +137,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       transitionInterpolator<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">FlyToInterpolator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
       transitionEasing<span class="token operator">:</span> d3<span class="token punctuation">.</span>easeCubic
     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://visgl.github.io/react-map-gl/docs/api-reference/web-mercator-viewport" class="typography__A-sc-1pmaksm-0 dvhuEd">Documentation of WebMercatorViewport</a></p><h2 style="position:relative" id="controlling-map-transitions" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#controlling-map-transitions" aria-label="controlling map transitions permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Controlling Map Transitions</h2><h3 style="position:relative" id="interactivemaps-transition-props" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#interactivemaps-transition-props" aria-label="interactivemaps transition props permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>InteractiveMap&#x27;s Transition Props</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">See properties of <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map#transitions">InteractiveMap</a>.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code> (Number)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code> (Object)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code> (Function)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterruption</code> (Number)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionStart</code> (Function)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionInterrupt</code> (Function)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionEnd</code> (Function)</li></ul><h3 style="position:relative" id="transition-and-the-onviewportchange-callback" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#transition-and-the-onviewportchange-callback" aria-label="transition and the onviewportchange callback permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Transition and the onViewportChange Callback</h3><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> is designed to be a stateless component. For transitions to work, the application must update the viewport props returned by the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> callback:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token operator">&lt;</span>ReactMapGL <span class="token punctuation">{</span><span class="token operator">...</span>viewport<span class="token punctuation">}</span> onViewportChange<span class="token operator">=</span><span class="token punctuation">{</span>setViewport<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Remarks:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">The props returned by the callback may contain transition properties. For example, during panning and rotating, the callback is invoked with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration: 0</code>, meaning that the map movement instantly matches the change of the pointer. When panning or zooming with keyboard, the callback is invoked with a 300ms linear transition.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">It is recommended that when programatically triggering a transition, always explicitly set the transition properties (interpolator, easing and duration).</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">&quot;Set and forget&quot;: the values of the following props at the start of a transition carry through the entire duration of the transition:<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterruption</code></li></ul></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">The default interaction/transition behavior can always be intercepted and overwritten in the handler for <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code>. However, if a transition is in progress, the properties that are being transitioned (e.g. longitude and latitude) should not be manipulated, otherwise the change will be interpreted as an interruption of the transition.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">When using <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">FlyToInterpolator</code> for <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code> can be set to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;auto&#x27;</code> where actual duration is auto calculated based on start and end viewports and is linear to the distance between them. This duration can be further customized using <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">speed</code> parameter to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">FlyToInterpolator</code> constructor.</li></ul><h3 style="position:relative" id="transition-interpolators" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#transition-interpolators" aria-label="transition interpolators permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Transition Interpolators</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">A <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TransitionInterpolator</code> instance must be supplied to the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code> prop. It contains the following methods:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">arePropsEqual(currentProps, nextProps)</code> - called to determine if transition should be triggered when viewport props update.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">initiateProps(startProps, endProps)</code> - called before transition starts to pre-process the start and end viewport props.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interpolateProps(startProps, endProps, t)</code> - called to get viewport props in transition. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">t</code> is a time factor between <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[0, 1]</code>.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl offers two built-in interpolator classes:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></li></ul></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/advanced/viewport-transition";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://visgl.github.io/react-map-gl/docs/api-reference/web-mercator-viewport" class="typography__A-sc-1pmaksm-0 dvhuEd">Documentation of WebMercatorViewport</a></p><h2 style="position:relative" id="controlling-map-transitions" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#controlling-map-transitions" aria-label="controlling map transitions permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Controlling Map Transitions</h2><h3 style="position:relative" id="interactivemaps-transition-props" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#interactivemaps-transition-props" aria-label="interactivemaps transition props permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>InteractiveMap&#x27;s Transition Props</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">See properties of <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map#transitions">InteractiveMap</a>.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code> (Number)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code> (Object)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code> (Function)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterruption</code> (Number)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionStart</code> (Function)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionInterrupt</code> (Function)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionEnd</code> (Function)</li></ul><h3 style="position:relative" id="transition-and-the-onviewportchange-callback" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#transition-and-the-onviewportchange-callback" aria-label="transition and the onviewportchange callback permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Transition and the onViewportChange Callback</h3><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> is designed to be a stateless component. For transitions to work, the application must update the viewport props returned by the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> callback:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token operator">&lt;</span>ReactMapGL <span class="token punctuation">{</span><span class="token operator">...</span>viewport<span class="token punctuation">}</span> onViewportChange<span class="token operator">=</span><span class="token punctuation">{</span>setViewport<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Remarks:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">The props returned by the callback may contain transition properties. For example, during panning and rotating, the callback is invoked with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration: 0</code>, meaning that the map movement instantly matches the change of the pointer. When panning or zooming with keyboard, the callback is invoked with a 300ms linear transition.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">It is recommended that when programatically triggering a transition, always explicitly set the transition properties (interpolator, easing and duration).</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">&quot;Set and forget&quot;: the values of the following props at the start of a transition carry through the entire duration of the transition:<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterruption</code></li></ul></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">The default interaction/transition behavior can always be intercepted and overwritten in the handler for <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code>. However, if a transition is in progress, the properties that are being transitioned (e.g. longitude and latitude) should not be manipulated, otherwise the change will be interpreted as an interruption of the transition.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">When using <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">FlyToInterpolator</code> for <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code> can be set to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;auto&#x27;</code> where actual duration is auto calculated based on start and end viewports and is linear to the distance between them. This duration can be further customized using <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">speed</code> parameter to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">FlyToInterpolator</code> constructor.</li></ul><h3 style="position:relative" id="transition-interpolators" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#transition-interpolators" aria-label="transition interpolators permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Transition Interpolators</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">A <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TransitionInterpolator</code> instance must be supplied to the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code> prop. It contains the following methods:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">arePropsEqual(currentProps, nextProps)</code> - called to determine if transition should be triggered when viewport props update.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">initiateProps(startProps, endProps)</code> - called before transition starts to pre-process the start and end viewport props.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interpolateProps(startProps, endProps, t)</code> - called to get viewport props in transition. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">t</code> is a time factor between <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[0, 1]</code>.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl offers two built-in interpolator classes:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></li></ul></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/advanced/viewport-transition";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/attribution-control/index.html b/docs/api-reference/attribution-control/index.html
index 327ee96e..69e0370a 100644
--- a/docs/api-reference/attribution-control/index.html
+++ b/docs/api-reference/attribution-control/index.html
@@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/attribution-control/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="AttributionControl" class="" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="attributioncontrol" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#attributioncontrol" aria-label="attributioncontrol permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>AttributionControl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.3-green" alt="Since v5.3" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://docs.mapbox.com/mapbox-gl-js/api/#attributioncontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">AttributionControl</a>.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/attribution-control/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="AttributionControl" class="" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="attributioncontrol" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#attributioncontrol" aria-label="attributioncontrol permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>AttributionControl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.3-green" alt="Since v5.3" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://docs.mapbox.com/mapbox-gl-js/api/#attributioncontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">AttributionControl</a>.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>AttributionControl<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token keyword">const</span> attributionStyle<span class="token operator">=</span> <span class="token punctuation">{</span>
@@ -110,4 +110,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <span class="token operator">&lt;</span>AttributionControl compact<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span>attributionStyle<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
     <span class="token operator">&lt;</span><span class="token operator">/</span>ReactMapGL<span class="token operator">&gt;</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="togglelabel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#togglelabel" aria-label="code classlanguage texttogglelabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">toggleLabel</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;Toggle Attribution&#x27;</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the toggle button.</p><h5 style="position:relative" id="compact" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#compact" aria-label="code classlanguage textcompactcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">compact</code> (Boolean)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, force a compact attribution that shows the full attribution on mouse hover. If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, force the full attribution control. When undefined, shows a responsive attribution that collapses when the map is less than 640 pixels wide.</p><h5 style="position:relative" id="customattribution" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#customattribution" aria-label="code classlanguage textcustomattributioncode stringstring permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">customAttribution</code> (String|<!-- -->[String]<!-- -->)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">String or strings to show in addition to any other attributions.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: &#x27;absolute&#x27;}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 dvhuEd">React style</a> object applied to this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/attribution-control.js" class="typography__A-sc-1pmaksm-0 dvhuEd">attribution-control.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/attribution-control";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="togglelabel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#togglelabel" aria-label="code classlanguage texttogglelabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">toggleLabel</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;Toggle Attribution&#x27;</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the toggle button.</p><h5 style="position:relative" id="compact" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#compact" aria-label="code classlanguage textcompactcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">compact</code> (Boolean)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, force a compact attribution that shows the full attribution on mouse hover. If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, force the full attribution control. When undefined, shows a responsive attribution that collapses when the map is less than 640 pixels wide.</p><h5 style="position:relative" id="customattribution" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#customattribution" aria-label="code classlanguage textcustomattributioncode stringstring permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">customAttribution</code> (String|<!-- -->[String]<!-- -->)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">String or strings to show in addition to any other attributions.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: &#x27;absolute&#x27;}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 dvhuEd">React style</a> object applied to this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/attribution-control.js" class="typography__A-sc-1pmaksm-0 dvhuEd">attribution-control.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/attribution-control";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/canvas-overlay/index.html b/docs/api-reference/canvas-overlay/index.html
index 4e7d0350..cb2effeb 100644
--- a/docs/api-reference/canvas-overlay/index.html
+++ b/docs/api-reference/canvas-overlay/index.html
@@ -86,4 +86,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/canvas-overlay/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="CanvasOverlay" class="" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="canvasoverlay" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#canvasoverlay" aria-label="canvasoverlay permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CanvasOverlay</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">Allows applications to overlay data on top of maps using a canvas.</p><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="redraw" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#redraw" aria-label="code classlanguage textredrawcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">redraw</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called every time the map updates.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ctx</code> {CanvasRenderingContext2D} - rendering context of the canvas</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> {Number} - width of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> {Number} - height of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">project</code> {Function} - get screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> from geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unproject</code> {Function} - get geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code> from screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code></li></ul><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/overlays/canvas-overlay.js" class="typography__A-sc-1pmaksm-0 dvhuEd">canvas-overlay.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/canvas-overlay";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/canvas-overlay/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="CanvasOverlay" class="" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="canvasoverlay" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#canvasoverlay" aria-label="canvasoverlay permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CanvasOverlay</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">Allows applications to overlay data on top of maps using a canvas.</p><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="redraw" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#redraw" aria-label="code classlanguage textredrawcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">redraw</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called every time the map updates.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ctx</code> {CanvasRenderingContext2D} - rendering context of the canvas</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> {Number} - width of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> {Number} - height of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">project</code> {Function} - get screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> from geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unproject</code> {Function} - get geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code> from screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code></li></ul><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/overlays/canvas-overlay.js" class="typography__A-sc-1pmaksm-0 dvhuEd">canvas-overlay.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/canvas-overlay";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/fly-to-interpolator/index.html b/docs/api-reference/fly-to-interpolator/index.html
index 29baad12..ae05353e 100644
--- a/docs/api-reference/fly-to-interpolator/index.html
+++ b/docs/api-reference/fly-to-interpolator/index.html
@@ -90,9 +90,9 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/fly-to-interpolator/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="FlyToInterpolator" class="" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="flytointerpolator" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#flytointerpolator" aria-label="flytointerpolator permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>FlyToInterpolator</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.2-green" alt="Since v3.2" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Implements the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TransitionInterpolator</code> interface. Designed to use with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code> prop of <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">This interpolator offers similar behavior to Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">flyTo</code> method.</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>FlyToInterpolator<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/fly-to-interpolator/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="FlyToInterpolator" class="" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="flytointerpolator" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#flytointerpolator" aria-label="flytointerpolator permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>FlyToInterpolator</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.2-green" alt="Since v3.2" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Implements the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TransitionInterpolator</code> interface. Designed to use with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code> prop of <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">This interpolator offers similar behavior to Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">flyTo</code> method.</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>FlyToInterpolator<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ReactMapGL</span></span>
     <span class="token attr-name">...</span>
     <span class="token attr-name">transitionDuration</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1000</span><span class="token punctuation">}</span></span>
-    <span class="token attr-name">transitionInterpolator</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">FlyToInterpolator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span></code></pre></div><h2 style="position:relative" id="constructor-1" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#constructor-1" aria-label="constructor permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Constructor</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">new FlyToInterpolator([options])</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options</code> {Object} (optional)<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">curve</code> (Number, optional, default: 1.414) - The zooming &quot;curve&quot; that will occur along the flight path.</li></ul><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">speed</code> (Number, optional, default: 1.2) - The average speed of the animation defined in relation to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.curve</code>, it linearly affects the duration, higher speed returns smaller durations and vice versa.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">screenSpeed</code> (Number, optional) - The average speed of the animation measured in screenfuls per second. Similar to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">opts.speed</code> it linearly affects the duration,  when specified <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">opts.speed</code> is ignored.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxDuration</code> (Number, optional) - Maximum duration in milliseconds, if calculated duration exceeds this value, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code> is returned.</li></ul></li></ul><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/utils/transition/viewport-fly-to-interpolator.js" class="typography__A-sc-1pmaksm-0 dvhuEd">viewport-fly-to-interpolator.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/fly-to-interpolator";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+    <span class="token attr-name">transitionInterpolator</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">FlyToInterpolator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span></code></pre></div><h2 style="position:relative" id="constructor-1" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#constructor-1" aria-label="constructor permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Constructor</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">new FlyToInterpolator([options])</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options</code> {Object} (optional)<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">curve</code> (Number, optional, default: 1.414) - The zooming &quot;curve&quot; that will occur along the flight path.</li></ul><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">speed</code> (Number, optional, default: 1.2) - The average speed of the animation defined in relation to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.curve</code>, it linearly affects the duration, higher speed returns smaller durations and vice versa.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">screenSpeed</code> (Number, optional) - The average speed of the animation measured in screenfuls per second. Similar to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">opts.speed</code> it linearly affects the duration,  when specified <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">opts.speed</code> is ignored.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxDuration</code> (Number, optional) - Maximum duration in milliseconds, if calculated duration exceeds this value, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code> is returned.</li></ul></li></ul><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/utils/transition/viewport-fly-to-interpolator.js" class="typography__A-sc-1pmaksm-0 dvhuEd">viewport-fly-to-interpolator.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/fly-to-interpolator";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/fullscreen-control/index.html b/docs/api-reference/fullscreen-control/index.html
index 1be86f69..44392b80 100644
--- a/docs/api-reference/fullscreen-control/index.html
+++ b/docs/api-reference/fullscreen-control/index.html
@@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/fullscreen-control/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="FullscreenControl" class="" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="fullscreencontrol" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#fullscreencontrol" aria-label="fullscreencontrol permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>FullscreenControl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v4.1-green" alt="Since v4.1" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://www.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">FullscreenControl</a>.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/fullscreen-control/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="FullscreenControl" class="" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="fullscreencontrol" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#fullscreencontrol" aria-label="fullscreencontrol permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>FullscreenControl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v4.1-green" alt="Since v4.1" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://www.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">FullscreenControl</a>.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>FullscreenControl<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token keyword">const</span> fullscreenControlStyle<span class="token operator">=</span> <span class="token punctuation">{</span>
@@ -109,4 +109,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <span class="token operator">&lt;</span>FullscreenControl style<span class="token operator">=</span><span class="token punctuation">{</span>fullscreenControlStyle<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
     <span class="token operator">&lt;</span><span class="token operator">/</span>ReactMapGL<span class="token operator">&gt;</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="container" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#container" aria-label="code classlanguage textcontainercode htmlelement permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">container</code> (HTMLElement)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">container</code> is the compatible DOM element which should be made full screen. By default, the map container element will be made full screen.</p><h5 style="position:relative" id="label" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#label" aria-label="code classlanguage textlabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">label</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Toggle fullscreen</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the fullscreen control button.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: &#x27;absolute&#x27;}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 dvhuEd">React style</a> object applied to this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/fullscreen-control.js" class="typography__A-sc-1pmaksm-0 dvhuEd">fullscreen-control.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/fullscreen-control";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="container" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#container" aria-label="code classlanguage textcontainercode htmlelement permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">container</code> (HTMLElement)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">container</code> is the compatible DOM element which should be made full screen. By default, the map container element will be made full screen.</p><h5 style="position:relative" id="label" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#label" aria-label="code classlanguage textlabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">label</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Toggle fullscreen</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the fullscreen control button.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: &#x27;absolute&#x27;}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 dvhuEd">React style</a> object applied to this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/fullscreen-control.js" class="typography__A-sc-1pmaksm-0 dvhuEd">fullscreen-control.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/fullscreen-control";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/geolocate-control/index.html b/docs/api-reference/geolocate-control/index.html
index 79f267ad..6ca6562d 100644
--- a/docs/api-reference/geolocate-control/index.html
+++ b/docs/api-reference/geolocate-control/index.html
@@ -92,10 +92,10 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/geolocate-control/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="GeolocateControl" class="" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="geolocatecontrol" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#geolocatecontrol" aria-label="geolocatecontrol permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>GeolocateControl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v4.1-green" alt="Since v4.1" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">GeolocateControl</a>.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
-<span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>GeolocateControl<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;react-map-gl&quot;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/geolocate-control/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="GeolocateControl" class="" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="geolocatecontrol" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#geolocatecontrol" aria-label="geolocatecontrol permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>GeolocateControl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v4.1-green" alt="Since v4.1" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">GeolocateControl</a>.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>GeolocateControl<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
-<span class="token keyword">const</span> geolocateControlStyle<span class="token operator">=</span> <span class="token punctuation">{</span>
+<span class="token keyword">const</span> geolocateControlStyle <span class="token operator">=</span> <span class="token punctuation">{</span>
   right<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
   top<span class="token operator">:</span> <span class="token number">10</span>
 <span class="token punctuation">}</span><span class="token punctuation">;</span>
@@ -116,4 +116,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <span class="token operator">/</span><span class="token operator">&gt;</span>
     <span class="token operator">&lt;</span><span class="token operator">/</span>ReactMapGL<span class="token operator">&gt;</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Accepts all the options of <a href="https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox GeolocateControl</a>.</p><h5 style="position:relative" id="onviewportchange" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onviewportchange" aria-label="code classlanguage textonviewportchangecode function optional permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> (Function, optional)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code>.</p><h5 style="position:relative" id="ongeolocate" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ongeolocate" aria-label="code classlanguage textongeolocatecode function optional permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onGeolocate</code> (Function, optional)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when Geolocation API position updates. It is called with a Geolocation API <a href="https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions" class="typography__A-sc-1pmaksm-0 dvhuEd">PositionOptions</a> object.</p><h5 style="position:relative" id="positionoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#positionoptions" aria-label="code classlanguage textpositionoptionscode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">positionOptions</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{enableHighAccuracy: false, timeout: 6000}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A Geolocation API <a href="https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions" class="typography__A-sc-1pmaksm-0 dvhuEd">PositionOptions</a> object.</p><h5 style="position:relative" id="fitboundsoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#fitboundsoptions" aria-label="code classlanguage textfitboundsoptionscode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fitBoundsOptions</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{maxZoom: 15}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/web-mercator-viewport#fitboundsbounds-options-object">fitBounds</a> options object to use when the map is panned and zoomed to the user&#x27;s location. The default is to use a  maxZoom of 15 to limit how far the map will zoom in for very accurate locations.</p><h5 style="position:relative" id="trackuserlocation" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#trackuserlocation" aria-label="code classlanguage texttrackuserlocationcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">trackUserLocation</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user&#x27;s location as it changes.</p><h5 style="position:relative" id="showuserlocation" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#showuserlocation" aria-label="code classlanguage textshowuserlocationcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">showUserLocation</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">By default a dot will be shown on the map at the user&#x27;s location. Set to false to disable.</p><h5 style="position:relative" id="showaccuracycircle" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#showaccuracycircle" aria-label="code classlanguage textshowaccuracycirclecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">showAccuracyCircle</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">By default, if showUserLocation is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code> , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user&#x27;s location. Set to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code> to disable. Always disabled when showUserLocation is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: &#x27;absolute&#x27;}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 dvhuEd">React style</a> object applied to this control.</p><h5 style="position:relative" id="label" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#label" aria-label="code classlanguage textlabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">label</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;Find My Location&#x27;</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the Geolocate control button.</p><h5 style="position:relative" id="disabledlabel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#disabledlabel" aria-label="code classlanguage textdisabledlabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">disabledLabel</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;Location Not Available&#x27;</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the Geolocate control button if geolocation is disabled by the user.</p><h5 style="position:relative" id="auto" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#auto" aria-label="code classlanguage textautocode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">auto</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Programmatically triggers geolocate when set to true. Initializing the component with true triggers inside <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">componentDidMount</code> where as changing to true at a later point triggers inside <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">componentDidUpdate</code>. Initally setting as or changing to false has no effect.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/geolocate-control.js" class="typography__A-sc-1pmaksm-0 dvhuEd">geolocate-control.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/geolocate-control";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Accepts all the options of <a href="https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox GeolocateControl</a>.</p><h5 style="position:relative" id="onviewportchange" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onviewportchange" aria-label="code classlanguage textonviewportchangecode function optional permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> (Function, optional)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code>.</p><h5 style="position:relative" id="ongeolocate" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ongeolocate" aria-label="code classlanguage textongeolocatecode function optional permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onGeolocate</code> (Function, optional)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when Geolocation API position updates. It is called with a Geolocation API <a href="https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions" class="typography__A-sc-1pmaksm-0 dvhuEd">PositionOptions</a> object.</p><h5 style="position:relative" id="positionoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#positionoptions" aria-label="code classlanguage textpositionoptionscode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">positionOptions</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{enableHighAccuracy: false, timeout: 6000}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A Geolocation API <a href="https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions" class="typography__A-sc-1pmaksm-0 dvhuEd">PositionOptions</a> object.</p><h5 style="position:relative" id="fitboundsoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#fitboundsoptions" aria-label="code classlanguage textfitboundsoptionscode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fitBoundsOptions</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{maxZoom: 15}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/web-mercator-viewport#fitboundsbounds-options-object">fitBounds</a> options object to use when the map is panned and zoomed to the user&#x27;s location. The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations.</p><h5 style="position:relative" id="trackuserlocation" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#trackuserlocation" aria-label="code classlanguage texttrackuserlocationcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">trackUserLocation</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user&#x27;s location as it changes.</p><h5 style="position:relative" id="showuserlocation" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#showuserlocation" aria-label="code classlanguage textshowuserlocationcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">showUserLocation</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">By default a dot will be shown on the map at the user&#x27;s location. Set to false to disable.</p><h5 style="position:relative" id="showuserheading-boolean" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#showuserheading-boolean" aria-label="showuserheading boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>showUserHeading (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If true a heading indicator will be shown on the map at the user&#x27;s location.</p><h5 style="position:relative" id="showaccuracycircle" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#showaccuracycircle" aria-label="code classlanguage textshowaccuracycirclecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">showAccuracyCircle</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">By default, if showUserLocation is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code> , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user&#x27;s location. Set to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code> to disable. Always disabled when showUserLocation is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: &#x27;absolute&#x27;}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 dvhuEd">React style</a> object applied to this control.</p><h5 style="position:relative" id="label" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#label" aria-label="code classlanguage textlabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">label</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;Find My Location&#x27;</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the Geolocate control button.</p><h5 style="position:relative" id="disabledlabel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#disabledlabel" aria-label="code classlanguage textdisabledlabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">disabledLabel</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;Location Not Available&#x27;</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the Geolocate control button if geolocation is disabled by the user.</p><h5 style="position:relative" id="auto" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#auto" aria-label="code classlanguage textautocode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">auto</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Programmatically triggers geolocate when set to true. Initializing the component with true triggers inside <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">componentDidMount</code> where as changing to true at a later point triggers inside <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">componentDidUpdate</code>. Initally setting as or changing to false has no effect.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/geolocate-control.js" class="typography__A-sc-1pmaksm-0 dvhuEd">geolocate-control.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/geolocate-control";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/html-overlay/index.html b/docs/api-reference/html-overlay/index.html
index 16a2729e..6b253dfe 100644
--- a/docs/api-reference/html-overlay/index.html
+++ b/docs/api-reference/html-overlay/index.html
@@ -86,4 +86,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/html-overlay/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="HTMLOverlay" class="" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="htmloverlay" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#htmloverlay" aria-label="htmloverlay permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>HTMLOverlay</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">Allows applications to overlay data on top of maps using a HTML container.</p><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="redraw" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#redraw" aria-label="code classlanguage textredrawcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">redraw</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called every time the map updates.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> {Number} - width of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> {Number} - height of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">project</code> {Function} - get screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> from geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unproject</code> {Function} - get geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code> from screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code></li></ul><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Additional css styles of the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">div</code> container.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/overlays/html-overlay.js" class="typography__A-sc-1pmaksm-0 dvhuEd">html-overlay.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/html-overlay";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/html-overlay/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="HTMLOverlay" class="" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="htmloverlay" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#htmloverlay" aria-label="htmloverlay permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>HTMLOverlay</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">Allows applications to overlay data on top of maps using a HTML container.</p><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="redraw" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#redraw" aria-label="code classlanguage textredrawcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">redraw</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called every time the map updates.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> {Number} - width of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> {Number} - height of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">project</code> {Function} - get screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> from geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unproject</code> {Function} - get geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code> from screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code></li></ul><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Additional css styles of the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">div</code> container.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/overlays/html-overlay.js" class="typography__A-sc-1pmaksm-0 dvhuEd">html-overlay.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/html-overlay";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/interactive-map/index.html b/docs/api-reference/interactive-map/index.html
index abd32cb5..4ae4a5b0 100644
--- a/docs/api-reference/interactive-map/index.html
+++ b/docs/api-reference/interactive-map/index.html
@@ -94,7 +94,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/interactive-map/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="default (InteractiveMap)" class="" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="default-interactivemap" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#default-interactivemap" aria-label="default interactivemap permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>default (InteractiveMap)</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This component renders <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code> and provides full interactivity support.
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/interactive-map/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="default (InteractiveMap)" class="" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="default-interactivemap" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#default-interactivemap" aria-label="default interactivemap permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>default (InteractiveMap)</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This component renders <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code> and provides full interactivity support.
 It uses <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code> underneath to render the final map component.
 This is the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">default</code> exported component from <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl</code>.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
@@ -117,4 +117,4 @@ This is the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-te
   <span class="token attr-name">eventRecognizerOptions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>eventRecognizerOptions<span class="token punctuation">}</span></span>
 <span class="token punctuation">/&gt;</span></span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Note that the value of this prop is used once when the component mounts. Subsequent changes will be ignored.</p><h5 style="position:relative" id="clickradius" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#clickradius" aria-label="code classlanguage textclickradiuscode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">clickRadius</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Radius to detect features around a clicked point.</p><h5 style="position:relative" id="controller" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#controller" aria-label="code classlanguage textcontrollercode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">controller</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">A map controller instance to replace the default map controller.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">This object must implement the following interface:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">events</code> - An array of subscribed events</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">handleEvent(event, context)</code> - A method that handles interactive events</li></ul><h5 style="position:relative" id="interactivelayerids" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#interactivelayerids" aria-label="code classlanguage textinteractivelayeridscode array permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> (Array)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A list of layer ids that are interactive. If specified:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Pointer event callbacks will only query the features under the pointer of these layers.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">The <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getCursor</code> callback will receive <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isHovering: true</code> when hover over features of these layers.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If not specified:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Pointer event callbacks will query the features under the pointer of all layers.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">The <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getCursor</code> callback will always receive <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isHovering: false</code>.</li></ul><h3 style="position:relative" id="transitions" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#transitions" aria-label="transitions permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Transitions</h3><h5 style="position:relative" id="transitionduration" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#transitionduration" aria-label="code classlanguage texttransitiondurationcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Duration of transition in milliseconds. If specified, the map&#x27;s viewport will smoothly move from the previous props to the current one.</p><h5 style="position:relative" id="transitioninterpolator" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#transitioninterpolator" aria-label="code classlanguage texttransitioninterpolatorcode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">new LinearInterpolator()</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">An interpolator object that defines the transition behavior between two map states. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl</code> offers two interpolators:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">LinearInterpolator</code> - similar to Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">easeTo</code> behavior.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">FlyToInterpolator</code> - similar to Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">flyTo</code> behavior.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">You may import them as follows:</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>LinearInterpolator<span class="token punctuation">,</span> FlyToInterpolator<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ReactMapGL</span></span> <span class="token attr-name">transitionDuration</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1000</span><span class="token punctuation">}</span></span> <span class="token attr-name">transitionInterpolator</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">FlyToInterpolator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">For details about using transition interpolators, see <a href="/react-map-gl/docs/advanced/viewport-transitions.md" class="typography__A-sc-1pmaksm-0 dvhuEd">transitions</a>.</p><h5 style="position:relative" id="transitioneasing" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#transitioneasing" aria-label="code classlanguage texttransitioneasingcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">t =&gt; t</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Easing function that maps a value from <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[0, 1]</code> to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[0, 1]</code>. Check out <a href="http://easings.net/" class="typography__A-sc-1pmaksm-0 dvhuEd">http://easings.net/</a> for common easing curves.</p><h5 style="position:relative" id="transitioninterruption" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#transitioninterruption" aria-label="code classlanguage texttransitioninterruptioncode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterruption</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TRANSITION_EVENTS.BREAK</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">What to do if an ongoing transition is interrupted by another transition. There are 4 options:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TRANSITION_EVENTS.BREAK</code> - Start new transition from the current view.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TRANSITION_EVENTS.SNAP_TO_END</code> - Jump to the end of the previous transition before starting the new transition.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TRANSITION_EVENTS.IGNORE</code> - Complete the previous transition and ignore the new viewport change.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TRANSITION_EVENTS.UPDATE</code> - Continue the ongoing transition but change its destination to the new viewport.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">You may import the constants as follows:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span><span class="token constant">TRANSITION_EVENTS</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span></code></pre></div><h3 style="position:relative" id="callbacks" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#callbacks" aria-label="callbacks permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Callbacks</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">Inherit the following props from <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a>:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onLoad</code> (Function)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onResize</code> (Function)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onError</code> (Function)</li></ul><h5 style="position:relative" id="onviewportchange" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onviewportchange" aria-label="code classlanguage textonviewportchangecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback that is fired when the map&#x27;s viewport properties should be updated. If not supplied, the map is not interactive.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token function">onViewportChange</span><span class="token punctuation">(</span>viewState<span class="token punctuation">,</span> interactionState<span class="token punctuation">,</span> oldViewState<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Arguments:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> (Object) The next viewport properties, including: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minZoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxPitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minPitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterruption</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState</code> (Object) The current interaction that caused this viewport change. See <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onInteractionStateChange</code> for possible fields.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">oldViewState</code> (Object) The current viewport properties.</li></ul><h5 style="position:relative" id="onviewstatechange" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onviewstatechange" aria-label="code classlanguage textonviewstatechangecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewStateChange</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">A newer version of the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> callback. Both are supported and provide equivalent functionality.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token function">onViewStateChange</span><span class="token punctuation">(</span><span class="token punctuation">{</span>viewState<span class="token punctuation">,</span> interactionState<span class="token punctuation">,</span> oldViewState<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><h5 style="position:relative" id="oninteractionstatechange" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#oninteractionstatechange" aria-label="code classlanguage textoninteractionstatechangecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onInteractionStateChange</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback that is fired when the user interacted with the map.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token function">onInteractionStateChange</span><span class="token punctuation">(</span>interactionState<span class="token punctuation">)</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Possible fields include:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState.inTransition</code> (Boolean)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState.isDragging</code> (Boolean)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState.isPanning</code> (Boolean)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState.isRotating</code> (Boolean)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState.isZooming</code> (Boolean)</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Note:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onInteractionStateChange</code> may be fired without <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code>. For example, when the pointer is released at the end of a drag-pan, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isDragging</code> are reset to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, without the viewport&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> changing.</li></ul><h5 style="position:relative" id="onhover" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onhover" aria-label="code classlanguage textonhovercode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onHover</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the mouse moves over the map (without button pressed). Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onclick" aria-label="code classlanguage textonclickcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the map is single clicked. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object. This event is not fired on double click therefore there may be a delay between pointer up and the event.</p><h5 style="position:relative" id="onnativeclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onnativeclick" aria-label="code classlanguage textonnativeclickcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onNativeClick</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the map is clicked. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object. This event is fired twice on double click.</p><h5 style="position:relative" id="ondblclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ondblclick" aria-label="code classlanguage textondblclickcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDblClick</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the map is double clicked. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmousedown" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmousedown" aria-label="code classlanguage textonmousedowncode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseDown</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is pressed within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmousemove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmousemove" aria-label="code classlanguage textonmousemovecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is moved within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmouseup" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmouseup" aria-label="code classlanguage textonmouseupcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseUp</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is released within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="ontouchstart" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontouchstart" aria-label="code classlanguage textontouchstartcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchStart</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchstart</code> event occurs within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="ontouchmove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontouchmove" aria-label="code classlanguage textontouchmovecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchmove</code> event occurs within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="ontouchend" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontouchend" aria-label="code classlanguage textontouchendcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchEnd</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchend</code> event occurs within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmouseenter" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmouseenter" aria-label="code classlanguage textonmouseentercode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseEnter</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) enters a visible portion of one of the interactive layers, defined by the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> prop. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmouseleave" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmouseleave" aria-label="code classlanguage textonmouseleavecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseLeave</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) leaves a visible portion of one of the interactive layers, defined by the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> prop. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onwheel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onwheel" aria-label="code classlanguage textonwheelcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onWheel</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">wheel</code> event occurs within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmouseout" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmouseout" aria-label="code classlanguage textonmouseoutcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseOut</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a point device (usually a mouse) leaves the map&#x27;s canvas. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="oncontextmenu" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#oncontextmenu" aria-label="code classlanguage textoncontextmenucode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onContextMenu</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the context menu is activated. Prevent default here to enable right button interaction.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event =&gt; event.preventDefault()</code></p><h5 style="position:relative" id="ontransitionstart" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontransitionstart" aria-label="code classlanguage textontransitionstartcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionStart</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback that is fired when a transition is triggered.</p><h5 style="position:relative" id="ontransitioninterrupt" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontransitioninterrupt" aria-label="code classlanguage textontransitioninterruptcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionInterrupt</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback that is fired when an ongoing transition is interrupted by another transition.</p><h5 style="position:relative" id="ontransitionend" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontransitionend" aria-label="code classlanguage textontransitionendcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionEnd</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback that is fired when a transition is complete.</p><h2 style="position:relative" id="methods" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#methods" aria-label="methods permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Inherit the following methods from <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a>:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap()</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">queryRenderedFeatures(geometry, parameters)</code></li></ul><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/interactive-map.js" class="typography__A-sc-1pmaksm-0 dvhuEd">interactive-map.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/interactive-map";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ReactMapGL</span></span> <span class="token attr-name">transitionDuration</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1000</span><span class="token punctuation">}</span></span> <span class="token attr-name">transitionInterpolator</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">FlyToInterpolator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">For details about using transition interpolators, see <a href="/react-map-gl/docs/advanced/viewport-transitions.md" class="typography__A-sc-1pmaksm-0 dvhuEd">transitions</a>.</p><h5 style="position:relative" id="transitioneasing" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#transitioneasing" aria-label="code classlanguage texttransitioneasingcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">t =&gt; t</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Easing function that maps a value from <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[0, 1]</code> to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[0, 1]</code>. Check out <a href="http://easings.net/" class="typography__A-sc-1pmaksm-0 dvhuEd">http://easings.net/</a> for common easing curves.</p><h5 style="position:relative" id="transitioninterruption" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#transitioninterruption" aria-label="code classlanguage texttransitioninterruptioncode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterruption</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TRANSITION_EVENTS.BREAK</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">What to do if an ongoing transition is interrupted by another transition. There are 4 options:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TRANSITION_EVENTS.BREAK</code> - Start new transition from the current view.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TRANSITION_EVENTS.SNAP_TO_END</code> - Jump to the end of the previous transition before starting the new transition.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TRANSITION_EVENTS.IGNORE</code> - Complete the previous transition and ignore the new viewport change.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TRANSITION_EVENTS.UPDATE</code> - Continue the ongoing transition but change its destination to the new viewport.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">You may import the constants as follows:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span><span class="token constant">TRANSITION_EVENTS</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span></code></pre></div><h3 style="position:relative" id="callbacks" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#callbacks" aria-label="callbacks permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Callbacks</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">Inherit the following props from <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a>:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onLoad</code> (Function)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onResize</code> (Function)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onError</code> (Function)</li></ul><h5 style="position:relative" id="onviewportchange" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onviewportchange" aria-label="code classlanguage textonviewportchangecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback that is fired when the map&#x27;s viewport properties should be updated. If not supplied, the map is not interactive.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token function">onViewportChange</span><span class="token punctuation">(</span>viewState<span class="token punctuation">,</span> interactionState<span class="token punctuation">,</span> oldViewState<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Arguments:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> (Object) The next viewport properties, including: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minZoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxPitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minPitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterruption</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState</code> (Object) The current interaction that caused this viewport change. See <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onInteractionStateChange</code> for possible fields.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">oldViewState</code> (Object) The current viewport properties.</li></ul><h5 style="position:relative" id="onviewstatechange" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onviewstatechange" aria-label="code classlanguage textonviewstatechangecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewStateChange</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">A newer version of the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> callback. Both are supported and provide equivalent functionality.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token function">onViewStateChange</span><span class="token punctuation">(</span><span class="token punctuation">{</span>viewState<span class="token punctuation">,</span> interactionState<span class="token punctuation">,</span> oldViewState<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><h5 style="position:relative" id="oninteractionstatechange" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#oninteractionstatechange" aria-label="code classlanguage textoninteractionstatechangecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onInteractionStateChange</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback that is fired when the user interacted with the map.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token function">onInteractionStateChange</span><span class="token punctuation">(</span>interactionState<span class="token punctuation">)</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Possible fields include:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState.inTransition</code> (Boolean)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState.isDragging</code> (Boolean)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState.isPanning</code> (Boolean)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState.isRotating</code> (Boolean)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactionState.isZooming</code> (Boolean)</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Note:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onInteractionStateChange</code> may be fired without <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code>. For example, when the pointer is released at the end of a drag-pan, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isDragging</code> are reset to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, without the viewport&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> changing.</li></ul><h5 style="position:relative" id="onhover" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onhover" aria-label="code classlanguage textonhovercode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onHover</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the mouse moves over the map (without button pressed). Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onclick" aria-label="code classlanguage textonclickcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the map is single clicked. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object. This event is not fired on double click therefore there may be a delay between pointer up and the event.</p><h5 style="position:relative" id="onnativeclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onnativeclick" aria-label="code classlanguage textonnativeclickcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onNativeClick</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the map is clicked. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object. This event is fired twice on double click.</p><h5 style="position:relative" id="ondblclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ondblclick" aria-label="code classlanguage textondblclickcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDblClick</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the map is double clicked. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmousedown" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmousedown" aria-label="code classlanguage textonmousedowncode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseDown</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is pressed within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmousemove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmousemove" aria-label="code classlanguage textonmousemovecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is moved within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmouseup" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmouseup" aria-label="code classlanguage textonmouseupcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseUp</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) is released within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="ontouchstart" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontouchstart" aria-label="code classlanguage textontouchstartcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchStart</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchstart</code> event occurs within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="ontouchmove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontouchmove" aria-label="code classlanguage textontouchmovecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchmove</code> event occurs within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="ontouchend" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontouchend" aria-label="code classlanguage textontouchendcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchEnd</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchend</code> event occurs within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmouseenter" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmouseenter" aria-label="code classlanguage textonmouseentercode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseEnter</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) enters a visible portion of one of the interactive layers, defined by the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> prop. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmouseleave" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmouseleave" aria-label="code classlanguage textonmouseleavecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseLeave</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a pointing device (usually a mouse) leaves a visible portion of one of the interactive layers, defined by the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> prop. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onwheel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onwheel" aria-label="code classlanguage textonwheelcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onWheel</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">wheel</code> event occurs within the map. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="onmouseout" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onmouseout" aria-label="code classlanguage textonmouseoutcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseOut</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a point device (usually a mouse) leaves the map&#x27;s canvas. Receives a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a> object.</p><h5 style="position:relative" id="oncontextmenu" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#oncontextmenu" aria-label="code classlanguage textoncontextmenucode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onContextMenu</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when the context menu is activated. Prevent default here to enable right button interaction.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event =&gt; event.preventDefault()</code></p><h5 style="position:relative" id="ontransitionstart" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontransitionstart" aria-label="code classlanguage textontransitionstartcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionStart</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback that is fired when a transition is triggered.</p><h5 style="position:relative" id="ontransitioninterrupt" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontransitioninterrupt" aria-label="code classlanguage textontransitioninterruptcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionInterrupt</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback that is fired when an ongoing transition is interrupted by another transition.</p><h5 style="position:relative" id="ontransitionend" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ontransitionend" aria-label="code classlanguage textontransitionendcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionEnd</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback that is fired when a transition is complete.</p><h2 style="position:relative" id="methods" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#methods" aria-label="methods permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Inherit the following methods from <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a>:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap()</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">queryRenderedFeatures(geometry, parameters)</code></li></ul><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/interactive-map.js" class="typography__A-sc-1pmaksm-0 dvhuEd">interactive-map.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/interactive-map";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/layer/index.html b/docs/api-reference/layer/index.html
index 5ee96b7b..ac04d925 100644
--- a/docs/api-reference/layer/index.html
+++ b/docs/api-reference/layer/index.html
@@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/layer/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Layer" class="" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="layer" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#layer" aria-label="layer permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Layer</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.1-green" alt="Since v5.1" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This component allows apps to create a <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers" class="typography__A-sc-1pmaksm-0 dvhuEd">map layer</a> using React.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/layer/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Layer" class="" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="layer" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#layer" aria-label="layer permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Layer</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.1-green" alt="Since v5.1" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This component allows apps to create a <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers" class="typography__A-sc-1pmaksm-0 dvhuEd">map layer</a> using React.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>Layer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token keyword">const</span> parkLayer <span class="token operator">=</span> <span class="token punctuation">{</span>
@@ -114,4 +114,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <span class="token operator">&lt;</span>Layer <span class="token punctuation">{</span><span class="token operator">...</span>parkLayer<span class="token punctuation">}</span> paint<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token string">&#x27;fill-color&#x27;</span><span class="token operator">:</span> parkColor<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
     <span class="token operator">&lt;</span><span class="token operator">/</span>ReactMapGL<span class="token operator">&gt;</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">The props provided to this component should be conforming to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox layer specification</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">When props change <em>shallowly</em>, the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance.</p><h3 style="position:relative" id="identity-properties" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#identity-properties" aria-label="identity properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Identity Properties</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">Once a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&lt;Layer&gt;</code> is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React&#x27;s <a href="https://reactjs.org/docs/lists-and-keys.html#keys" class="typography__A-sc-1pmaksm-0 dvhuEd">key prop</a> to give each element a stable identity.</p><h5 style="position:relative" id="id" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#id" aria-label="code classlanguage textidcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">id</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Unique identifier of the layer. If not provided, a default id will be assigned.</p><h5 style="position:relative" id="type" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#type" aria-label="code classlanguage texttypecode string required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">type</code> (String, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Type of the layer.</p><h3 style="position:relative" id="options" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#options" aria-label="options permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Options</h3><h5 style="position:relative" id="beforeid" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#beforeid" aria-label="code classlanguage textbeforeidcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">beforeId</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Note that layers are added by the order that they mount. They are <em>NOT</em> reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">beforeId</code> for consistent behavior.</p><h5 style="position:relative" id="source" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#source" aria-label="code classlanguage textsourcecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">source</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">source</code> is required by some layer types in the Mapbox style specification. If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&lt;Layer&gt;</code> is used as the child of a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/source">Source</a> component, this prop will be overwritten by the id of the parent source.</p><h2 style="position:relative" id="source-1" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source-1" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/layer.js" class="typography__A-sc-1pmaksm-0 dvhuEd">layer.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/layer";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">The props provided to this component should be conforming to the <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox layer specification</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">When props change <em>shallowly</em>, the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance.</p><h3 style="position:relative" id="identity-properties" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#identity-properties" aria-label="identity properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Identity Properties</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">Once a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&lt;Layer&gt;</code> is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React&#x27;s <a href="https://reactjs.org/docs/lists-and-keys.html#keys" class="typography__A-sc-1pmaksm-0 dvhuEd">key prop</a> to give each element a stable identity.</p><h5 style="position:relative" id="id" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#id" aria-label="code classlanguage textidcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">id</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Unique identifier of the layer. If not provided, a default id will be assigned.</p><h5 style="position:relative" id="type" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#type" aria-label="code classlanguage texttypecode string required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">type</code> (String, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Type of the layer.</p><h3 style="position:relative" id="options" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#options" aria-label="options permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Options</h3><h5 style="position:relative" id="beforeid" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#beforeid" aria-label="code classlanguage textbeforeidcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">beforeId</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Note that layers are added by the order that they mount. They are <em>NOT</em> reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">beforeId</code> for consistent behavior.</p><h5 style="position:relative" id="source" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#source" aria-label="code classlanguage textsourcecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">source</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">source</code> is required by some layer types in the Mapbox style specification. If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&lt;Layer&gt;</code> is used as the child of a <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/source">Source</a> component, this prop will be overwritten by the id of the parent source.</p><h2 style="position:relative" id="source-1" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source-1" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/layer.js" class="typography__A-sc-1pmaksm-0 dvhuEd">layer.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/layer";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/linear-interpolator/index.html b/docs/api-reference/linear-interpolator/index.html
index 10f4d423..d4690b64 100644
--- a/docs/api-reference/linear-interpolator/index.html
+++ b/docs/api-reference/linear-interpolator/index.html
@@ -90,9 +90,9 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/linear-interpolator/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="LinearInterpolator" class="" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="linearinterpolator" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#linearinterpolator" aria-label="linearinterpolator permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>LinearInterpolator</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.2-green" alt="Since v3.2" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Implements the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TransitionInterpolator</code> interface. Designed to use with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code> prop of <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Interpolates all viewport props linearly. This interpolator offers similar behavior to Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">easeTo</code> when combined with a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code> function. You may optionally limit the transition to selected viewport props, for example <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">new LinearInterpolator([&#x27;pitch&#x27;, &#x27;bearing&#x27;])</code> animates pitch and bearing while the user is still allowed to pan and zoom.</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>LinearInterpolator<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/linear-interpolator/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="LinearInterpolator" class="" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="linearinterpolator" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#linearinterpolator" aria-label="linearinterpolator permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>LinearInterpolator</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.2-green" alt="Since v3.2" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Implements the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">TransitionInterpolator</code> interface. Designed to use with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code> prop of <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Interpolates all viewport props linearly. This interpolator offers similar behavior to Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">easeTo</code> when combined with a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code> function. You may optionally limit the transition to selected viewport props, for example <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">new LinearInterpolator([&#x27;pitch&#x27;, &#x27;bearing&#x27;])</code> animates pitch and bearing while the user is still allowed to pan and zoom.</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>LinearInterpolator<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ReactMapGL</span></span>
     <span class="token attr-name">...</span>
     <span class="token attr-name">transitionDuration</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1000</span><span class="token punctuation">}</span></span>
-    <span class="token attr-name">transitionInterpolator</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">LinearInterpolator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span></code></pre></div><h2 style="position:relative" id="constructor-1" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#constructor-1" aria-label="constructor permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Constructor</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">new LinearInterpolator([options])</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options</code> {Object} (optional)<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionProps</code> {Array} (optional) - list of prop names to interpolate. Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;longitude&#x27;, &#x27;latitude&#x27;, &#x27;zoom&#x27;, &#x27;pitch&#x27;, &#x27;bearing&#x27;]</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">around</code> {Array} (optional) - a point to zoom/rotate the map around, as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> in screen position.</li></ul></li></ul><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/utils/transition/linear-interpolator.js" class="typography__A-sc-1pmaksm-0 dvhuEd">linear-interpolator.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/linear-interpolator";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+    <span class="token attr-name">transitionInterpolator</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">LinearInterpolator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span></code></pre></div><h2 style="position:relative" id="constructor-1" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#constructor-1" aria-label="constructor permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Constructor</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">new LinearInterpolator([options])</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options</code> {Object} (optional)<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionProps</code> {Array} (optional) - list of prop names to interpolate. Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;longitude&#x27;, &#x27;latitude&#x27;, &#x27;zoom&#x27;, &#x27;pitch&#x27;, &#x27;bearing&#x27;]</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">around</code> {Array} (optional) - a point to zoom/rotate the map around, as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> in screen position.</li></ul></li></ul><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/utils/transition/linear-interpolator.js" class="typography__A-sc-1pmaksm-0 dvhuEd">linear-interpolator.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/linear-interpolator";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/map-context/index.html b/docs/api-reference/map-context/index.html
index 96158d41..d5c29a08 100644
--- a/docs/api-reference/map-context/index.html
+++ b/docs/api-reference/map-context/index.html
@@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/map-context/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="MapContext" class="" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="mapcontext" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#mapcontext" aria-label="mapcontext permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>MapContext</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.3-green" alt="Since v5.3" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapContext</code> allows components to interact with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code> via React&#x27;s <a href="https://reactjs.org/docs/context.html" class="typography__A-sc-1pmaksm-0 dvhuEd">context</a> API.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/map-context/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="MapContext" class="" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="mapcontext" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#mapcontext" aria-label="mapcontext permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>MapContext</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.3-green" alt="Since v5.3" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapContext</code> allows components to interact with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code> via React&#x27;s <a href="https://reactjs.org/docs/context.html" class="typography__A-sc-1pmaksm-0 dvhuEd">context</a> API.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> MapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>MapContext<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token keyword">function</span> <span class="token function">CurrentZoomLevel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@@ -133,4 +133,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
     <span class="token operator">&lt;</span><span class="token operator">/</span>MapContext<span class="token punctuation">.</span>Provider<span class="token operator">&gt;</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="fields" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#fields" aria-label="fields permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Fields</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">The context value object may contain the following fields:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">map</code> (Map) - the mapbox-gl <a href="(https://www.mapbox.com/mapbox-gl-js/api/#map)" class="typography__A-sc-1pmaksm-0 dvhuEd">Map</a> instance</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewport</code> (WebMercatorViewport) - the current viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">container</code> (HTMLDivElement) - the outer container of the map component</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> (Function) - a callback invoked when a map control requests a viewport change, with the signature <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange(viewState, interactionState, oldViewState)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewStateChange</code> (Function) - an alternative callback invoked when a map control requests a viewport change, with the signature <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewStateChange({viewState, interactionState, oldViewState})</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">eventManager</code> (EventManager) - an <a href="https://uber-web.github.io/mjolnir.js/docs/api-reference/event-manager" class="typography__A-sc-1pmaksm-0 dvhuEd">EventManager</a> instance used to register all interactive events</li></ul><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/map-context.js" class="typography__A-sc-1pmaksm-0 dvhuEd">map-context.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/map-context";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="fields" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#fields" aria-label="fields permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Fields</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">The context value object may contain the following fields:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">map</code> (Map) - the mapbox-gl <a href="(https://www.mapbox.com/mapbox-gl-js/api/#map)" class="typography__A-sc-1pmaksm-0 dvhuEd">Map</a> instance</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewport</code> (WebMercatorViewport) - the current viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">container</code> (HTMLDivElement) - the outer container of the map component</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> (Function) - a callback invoked when a map control requests a viewport change, with the signature <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange(viewState, interactionState, oldViewState)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewStateChange</code> (Function) - an alternative callback invoked when a map control requests a viewport change, with the signature <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewStateChange({viewState, interactionState, oldViewState})</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">eventManager</code> (EventManager) - an <a href="https://uber-web.github.io/mjolnir.js/docs/api-reference/event-manager" class="typography__A-sc-1pmaksm-0 dvhuEd">EventManager</a> instance used to register all interactive events</li></ul><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/map-context.js" class="typography__A-sc-1pmaksm-0 dvhuEd">map-context.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/map-context";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/map-controller/index.html b/docs/api-reference/map-controller/index.html
index d000c88b..ae5c65c6 100644
--- a/docs/api-reference/map-controller/index.html
+++ b/docs/api-reference/map-controller/index.html
@@ -88,4 +88,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/map-controller/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="MapController" class="" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="mapcontroller" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#mapcontroller" aria-label="mapcontroller permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>MapController</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v4.0-green" alt="Since v4.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The easiest way to create a custom map control is to extend the default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapController</code> class.</p><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="events" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#events" aria-label="code classlanguage texteventscode array permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">events</code> (Array)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">A list of additional event names that this control subscribes to.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Available events: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">click</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dblclick</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">tap</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">doubletap</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">press</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchin</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchout</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchstart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchmove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchend</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchcancel</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rotate</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rotatestart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rotatemove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rotateend</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rotatecancel</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pan</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panstart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panmove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panup</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pandown</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panleft</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panright</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panend</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pancancel</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">swipe</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">swipeleft</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">swiperight</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">swipeup</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">swipedown</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pointerdown</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pointermove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pointerup</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">keydown</code>, and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">keyup</code>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The following events are toggled on/off by InteractiveMap props: </p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">scrollZoom</code> - <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;wheel&#x27;]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dragPan</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dragRotate</code> - <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;panstart&#x27;, &#x27;panmove&#x27;, &#x27;panend&#x27;]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchZoomRotate</code> - <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;pinchstart&#x27;, &#x27;pinchmove&#x27;, &#x27;pinchend&#x27;]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">doubleClickZoom</code> - <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;doubletap&#x27;]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">keyboard</code> - <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;keydown&#x27;]</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Event object is generated by <a href="https://github.com/uber-web/mjolnir.js" class="typography__A-sc-1pmaksm-0 dvhuEd">mjolnir.js</a>. It always has the following properties:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">type</code> (string) -  The event type to which the event handler is subscribed, e.g. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;click&#x27;</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;pointermove&#x27;</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">center</code> (Object <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{x, y}</code>) - The center of the event location (e.g. the centroid of a touch) relative to the viewport (basically, <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX" class="typography__A-sc-1pmaksm-0 dvhuEd"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">clientX/Y</code></a>)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">offsetCenter</code> (Object <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{x, y}</code>) - The center of the event location relative to the map.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">target</code> (Object) - The target of the event, as specified by the original <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">srcEvent</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">srcEvent</code> (Object) - The original event object dispatched by the browser to the JS runtime</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Additionally, event objects for different event types contain a subset of the following properties:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">key</code> (number) - The keycode of the keyboard event</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">leftButton</code> (boolean) - Flag indicating whether the left button is involved during the event</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">middleButton</code> (boolean) - Flag indicating whether the middle button is involved during the event</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rightButton</code> (boolean) - Flag indicating whether the right button is involved during the event</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pointerType</code> (string) - A string indicating the type of input (e.g. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;mouse&#x27;</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;touch&#x27;</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;pointer&#x27;</code>)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">delta</code> (number) - The scroll magnitude/distance of a wheel event</li></ul><h2 style="position:relative" id="methods" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#methods" aria-label="methods permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2><h5 style="position:relative" id="handleevent" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#handleevent" aria-label="code classlanguage texthandleeventcode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">handleEvent</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">handleEvent(event)</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Called by the event manager to handle pointer events. This method delegate to the following methods to handle the default events:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPanStart(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPan(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPanEnd(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPinchStart(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPinch(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPinchEnd(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onDoubleTap(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onWheel(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onKeyDown(event)</code></li></ul><h5 style="position:relative" id="getmapstate" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getmapstate" aria-label="code classlanguage textgetmapstatecode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMapState</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMapState(overrides)</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Get a new descriptor object of the map state. If specified, props in the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">overrides</code> object override the current map props.</p><h5 style="position:relative" id="setoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#setoptions" aria-label="code classlanguage textsetoptionscode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">setOptions</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">setOptions(options)</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Add/remove event listeners based on the latest <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> props.</p><h5 style="position:relative" id="updateviewport" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#updateviewport" aria-label="code classlanguage textupdateviewportcode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">updateViewport</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">updateViewport(newMapState, extraProps, interactionState)</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Invoke <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> callback with a new map state.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/utils/map-controller.js" class="typography__A-sc-1pmaksm-0 dvhuEd">map-controller.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/map-controller";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/map-controller/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="MapController" class="" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="mapcontroller" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#mapcontroller" aria-label="mapcontroller permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>MapController</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v4.0-green" alt="Since v4.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The easiest way to create a custom map control is to extend the default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapController</code> class.</p><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="events" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#events" aria-label="code classlanguage texteventscode array permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">events</code> (Array)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">A list of additional event names that this control subscribes to.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Available events: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">click</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dblclick</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">tap</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">doubletap</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">press</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchin</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchout</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchstart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchmove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchend</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pinchcancel</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rotate</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rotatestart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rotatemove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rotateend</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rotatecancel</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pan</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panstart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panmove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panup</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pandown</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panleft</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panright</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">panend</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pancancel</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">swipe</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">swipeleft</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">swiperight</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">swipeup</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">swipedown</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pointerdown</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pointermove</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pointerup</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">keydown</code>, and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">keyup</code>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The following events are toggled on/off by InteractiveMap props: </p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">scrollZoom</code> - <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;wheel&#x27;]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dragPan</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dragRotate</code> - <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;panstart&#x27;, &#x27;panmove&#x27;, &#x27;panend&#x27;]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchZoomRotate</code> - <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;pinchstart&#x27;, &#x27;pinchmove&#x27;, &#x27;pinchend&#x27;]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">doubleClickZoom</code> - <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;doubletap&#x27;]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">keyboard</code> - <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[&#x27;keydown&#x27;]</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Event object is generated by <a href="https://github.com/uber-web/mjolnir.js" class="typography__A-sc-1pmaksm-0 dvhuEd">mjolnir.js</a>. It always has the following properties:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">type</code> (string) -  The event type to which the event handler is subscribed, e.g. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;click&#x27;</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;pointermove&#x27;</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">center</code> (Object <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{x, y}</code>) - The center of the event location (e.g. the centroid of a touch) relative to the viewport (basically, <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX" class="typography__A-sc-1pmaksm-0 dvhuEd"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">clientX/Y</code></a>)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">offsetCenter</code> (Object <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{x, y}</code>) - The center of the event location relative to the map.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">target</code> (Object) - The target of the event, as specified by the original <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">srcEvent</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">srcEvent</code> (Object) - The original event object dispatched by the browser to the JS runtime</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Additionally, event objects for different event types contain a subset of the following properties:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">key</code> (number) - The keycode of the keyboard event</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">leftButton</code> (boolean) - Flag indicating whether the left button is involved during the event</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">middleButton</code> (boolean) - Flag indicating whether the middle button is involved during the event</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">rightButton</code> (boolean) - Flag indicating whether the right button is involved during the event</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pointerType</code> (string) - A string indicating the type of input (e.g. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;mouse&#x27;</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;touch&#x27;</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;pointer&#x27;</code>)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">delta</code> (number) - The scroll magnitude/distance of a wheel event</li></ul><h2 style="position:relative" id="methods" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#methods" aria-label="methods permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2><h5 style="position:relative" id="handleevent" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#handleevent" aria-label="code classlanguage texthandleeventcode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">handleEvent</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">handleEvent(event)</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Called by the event manager to handle pointer events. This method delegate to the following methods to handle the default events:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPanStart(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPan(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPanEnd(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPinchStart(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPinch(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onPinchEnd(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onDoubleTap(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onWheel(event)</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_onKeyDown(event)</code></li></ul><h5 style="position:relative" id="getmapstate" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getmapstate" aria-label="code classlanguage textgetmapstatecode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMapState</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMapState(overrides)</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Get a new descriptor object of the map state. If specified, props in the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">overrides</code> object override the current map props.</p><h5 style="position:relative" id="setoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#setoptions" aria-label="code classlanguage textsetoptionscode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">setOptions</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">setOptions(options)</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Add/remove event listeners based on the latest <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> props.</p><h5 style="position:relative" id="updateviewport" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#updateviewport" aria-label="code classlanguage textupdateviewportcode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">updateViewport</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">updateViewport(newMapState, extraProps, interactionState)</code></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Invoke <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> callback with a new map state.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/utils/map-controller.js" class="typography__A-sc-1pmaksm-0 dvhuEd">map-controller.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/map-controller";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/marker/index.html b/docs/api-reference/marker/index.html
index 4ac8c7d1..94646d26 100644
--- a/docs/api-reference/marker/index.html
+++ b/docs/api-reference/marker/index.html
@@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/marker/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Marker" class="" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="marker" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#marker" aria-label="marker permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Marker</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/marker/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Marker" class="" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="marker" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#marker" aria-label="marker permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Marker</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s
 <a href="https://www.mapbox.com/mapbox-gl-js/api/#marker" class="typography__A-sc-1pmaksm-0 dvhuEd">Marker Control</a>, which can
 be used to render custom icons at specific locations on the map.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>Marker<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
@@ -132,4 +132,4 @@ be used to render custom icons at specific locations on the map.</p><div class="
       <span class="token punctuation">{</span>markers<span class="token punctuation">}</span>
     <span class="token operator">&lt;</span><span class="token operator">/</span>ReactMapGL<span class="token operator">&gt;</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="latitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#latitude" aria-label="code classlanguage textlatitudecode number required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> (Number, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Latitude of the marker.</p><h5 style="position:relative" id="longitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#longitude" aria-label="code classlanguage textlongitudecode number required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> (Number, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Longitude of the marker.</p><h5 style="position:relative" id="offsetleft" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#offsetleft" aria-label="code classlanguage textoffsetleftcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">offsetLeft</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Offset of the marker from the left in pixels, negative number indicates left.</p><h5 style="position:relative" id="offsettop" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#offsettop" aria-label="code classlanguage textoffsettopcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">offsetTop</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Offset of the marker from the top in pixels, negative number indicates up.</p><h5 style="position:relative" id="draggable" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#draggable" aria-label="code classlanguage textdraggablecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">draggable</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Allows this marker component to be dragged around the map. (Use <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragEnd</code> to capture the final position and update <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>).</p><h5 style="position:relative" id="ondragstart" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ondragstart" aria-label="code classlanguage textondragstartcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragStart</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a draggable marker starts being dragged.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event</code> - The pointer event.<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.lngLat</code> - The geo coordinates where the drag started, as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code>.</li></ul></li></ul><h5 style="position:relative" id="ondrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ondrag" aria-label="code classlanguage textondragcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDrag</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Continuously called while a draggable marker is being dragged.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event</code> - The pointer event.<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.lngLat</code> - The geo coordinates of the drag event, as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code>.</li></ul></li></ul><h5 style="position:relative" id="ondragend" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ondragend" aria-label="code classlanguage textondragendcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragEnd</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a draggable marker is released at its final position. This is usually a good time to capture <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.lngLat</code> and update the marker&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> props.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event</code> - The pointer event.<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.lngLat</code> - The geo coordinates where the drag ended, as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code>.</li></ul></li></ul><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/marker.js" class="typography__A-sc-1pmaksm-0 dvhuEd">marker.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/marker";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="latitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#latitude" aria-label="code classlanguage textlatitudecode number required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> (Number, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Latitude of the marker.</p><h5 style="position:relative" id="longitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#longitude" aria-label="code classlanguage textlongitudecode number required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> (Number, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Longitude of the marker.</p><h5 style="position:relative" id="offsetleft" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#offsetleft" aria-label="code classlanguage textoffsetleftcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">offsetLeft</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Offset of the marker from the left in pixels, negative number indicates left.</p><h5 style="position:relative" id="offsettop" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#offsettop" aria-label="code classlanguage textoffsettopcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">offsetTop</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Offset of the marker from the top in pixels, negative number indicates up.</p><h5 style="position:relative" id="draggable" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#draggable" aria-label="code classlanguage textdraggablecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">draggable</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Allows this marker component to be dragged around the map. (Use <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragEnd</code> to capture the final position and update <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>).</p><h5 style="position:relative" id="ondragstart" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ondragstart" aria-label="code classlanguage textondragstartcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragStart</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a draggable marker starts being dragged.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event</code> - The pointer event.<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.lngLat</code> - The geo coordinates where the drag started, as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code>.</li></ul></li></ul><h5 style="position:relative" id="ondrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ondrag" aria-label="code classlanguage textondragcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDrag</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Continuously called while a draggable marker is being dragged.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event</code> - The pointer event.<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.lngLat</code> - The geo coordinates of the drag event, as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code>.</li></ul></li></ul><h5 style="position:relative" id="ondragend" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#ondragend" aria-label="code classlanguage textondragendcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragEnd</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called when a draggable marker is released at its final position. This is usually a good time to capture <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.lngLat</code> and update the marker&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> props.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event</code> - The pointer event.<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">event.lngLat</code> - The geo coordinates where the drag ended, as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code>.</li></ul></li></ul><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/marker.js" class="typography__A-sc-1pmaksm-0 dvhuEd">marker.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/marker";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/navigation-control/index.html b/docs/api-reference/navigation-control/index.html
index bc90ccda..356f77c6 100644
--- a/docs/api-reference/navigation-control/index.html
+++ b/docs/api-reference/navigation-control/index.html
@@ -92,7 +92,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/navigation-control/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="NavigationControl" class="" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="navigationcontrol" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#navigationcontrol" aria-label="navigationcontrol permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>NavigationControl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://www.mapbox.com/mapbox-gl-js/api/#navigationcontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">NavigationControl</a>,
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/navigation-control/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="NavigationControl" class="" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="navigationcontrol" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#navigationcontrol" aria-label="navigationcontrol permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>NavigationControl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://www.mapbox.com/mapbox-gl-js/api/#navigationcontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">NavigationControl</a>,
 which provides zoom buttons and a compass button.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>NavigationControl<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
@@ -112,4 +112,4 @@ which provides zoom buttons and a compass button.</p><div class="gatsby-highligh
       <span class="token operator">&lt;</span>NavigationControl style<span class="token operator">=</span><span class="token punctuation">{</span>navControlStyle<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
     <span class="token operator">&lt;</span><span class="token operator">/</span>ReactMapGL<span class="token operator">&gt;</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="onviewportchange" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onviewportchange" aria-label="code classlanguage textonviewportchangecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code>.</p><h5 style="position:relative" id="showcompass" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#showcompass" aria-label="code classlanguage textshowcompasscode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">showCompass</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Show or hide the compass button</p><h5 style="position:relative" id="showzoom" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#showzoom" aria-label="code classlanguage textshowzoomcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">showZoom</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Show or hide the zoom buttons</p><h5 style="position:relative" id="zoominlabel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#zoominlabel" aria-label="code classlanguage textzoominlabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoomInLabel</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Zoom In</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the zoom in control button.</p><h5 style="position:relative" id="zoomoutlabel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#zoomoutlabel" aria-label="code classlanguage textzoomoutlabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoomOutLabel</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Zoom Out</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the zoom out control button.</p><h5 style="position:relative" id="compasslabel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#compasslabel" aria-label="code classlanguage textcompasslabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">compassLabel</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Reset North</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the compass control button.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: &#x27;absolute&#x27;}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 dvhuEd">React style</a> object applied to this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/navigation-control.js" class="typography__A-sc-1pmaksm-0 dvhuEd">navigation-control.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/navigation-control";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="onviewportchange" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onviewportchange" aria-label="code classlanguage textonviewportchangecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code>.</p><h5 style="position:relative" id="showcompass" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#showcompass" aria-label="code classlanguage textshowcompasscode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">showCompass</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Show or hide the compass button</p><h5 style="position:relative" id="showzoom" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#showzoom" aria-label="code classlanguage textshowzoomcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">showZoom</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Show or hide the zoom buttons</p><h5 style="position:relative" id="zoominlabel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#zoominlabel" aria-label="code classlanguage textzoominlabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoomInLabel</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Zoom In</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the zoom in control button.</p><h5 style="position:relative" id="zoomoutlabel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#zoomoutlabel" aria-label="code classlanguage textzoomoutlabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoomOutLabel</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Zoom Out</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the zoom out control button.</p><h5 style="position:relative" id="compasslabel" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#compasslabel" aria-label="code classlanguage textcompasslabelcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">compassLabel</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Reset North</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Label applied to the compass control button.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: &#x27;absolute&#x27;}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 dvhuEd">React style</a> object applied to this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/navigation-control.js" class="typography__A-sc-1pmaksm-0 dvhuEd">navigation-control.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/navigation-control";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/pointer-event/index.html b/docs/api-reference/pointer-event/index.html
index d27cf82e..2437f79f 100644
--- a/docs/api-reference/pointer-event/index.html
+++ b/docs/api-reference/pointer-event/index.html
@@ -84,4 +84,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/pointer-event/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="PointerEvent" class="" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="pointerevent" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#pointerevent" aria-label="pointerevent permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>PointerEvent</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">Event object passed to some of <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>&#x27;s callback props.</p><h2 style="position:relative" id="members" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#members" aria-label="members permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Members</h2><h5 style="position:relative" id="type" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#type" aria-label="code classlanguage texttypecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">type</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The name of the event.</p><h5 style="position:relative" id="point" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#point" aria-label="code classlanguage textpointcode array permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">point</code> (Array)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The screen coordinates that is being clicked.</p><h5 style="position:relative" id="lnglat" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#lnglat" aria-label="code classlanguage textlnglatcode array permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">lngLat</code> (Array)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The geo coordinates that is being clicked.</p><h5 style="position:relative" id="target" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#target" aria-label="code classlanguage texttargetcode element permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">target</code> (Element)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The target element of the pointer event.</p><h5 style="position:relative" id="srcevent" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#srcevent" aria-label="code classlanguage textsrceventcode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">srcEvent</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The original browser event.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/pointer-event";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/pointer-event/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="PointerEvent" class="" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="pointerevent" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#pointerevent" aria-label="pointerevent permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>PointerEvent</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">Event object passed to some of <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>&#x27;s callback props.</p><h2 style="position:relative" id="members" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#members" aria-label="members permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Members</h2><h5 style="position:relative" id="type" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#type" aria-label="code classlanguage texttypecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">type</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The name of the event.</p><h5 style="position:relative" id="point" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#point" aria-label="code classlanguage textpointcode array permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">point</code> (Array)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The screen coordinates that is being clicked.</p><h5 style="position:relative" id="lnglat" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#lnglat" aria-label="code classlanguage textlnglatcode array permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">lngLat</code> (Array)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The geo coordinates that is being clicked.</p><h5 style="position:relative" id="target" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#target" aria-label="code classlanguage texttargetcode element permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">target</code> (Element)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The target element of the pointer event.</p><h5 style="position:relative" id="srcevent" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#srcevent" aria-label="code classlanguage textsrceventcode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">srcEvent</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The original browser event.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/pointer-event";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/popup/index.html b/docs/api-reference/popup/index.html
index ad99b0aa..8efeeb13 100644
--- a/docs/api-reference/popup/index.html
+++ b/docs/api-reference/popup/index.html
@@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/popup/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Popup" class="" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="popup" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#popup" aria-label="popup permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Popup</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://www.mapbox.com/mapbox-gl-js/api/#popup" class="typography__A-sc-1pmaksm-0 dvhuEd">Popup Control</a>, which can be used to
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/popup/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Popup" class="" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="popup" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#popup" aria-label="popup permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Popup</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://www.mapbox.com/mapbox-gl-js/api/#popup" class="typography__A-sc-1pmaksm-0 dvhuEd">Popup Control</a>, which can be used to
 show tooltip popups with custom HTML content at specific locations on the map.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>Popup<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
@@ -116,4 +116,4 @@ show tooltip popups with custom HTML content at specific locations on the map.</
     <span class="token operator">&lt;</span><span class="token operator">/</span>ReactMapGL<span class="token operator">&gt;</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="latitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#latitude" aria-label="code classlanguage textlatitudecode number required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> (Number, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Latitude of the anchor.</p><h5 style="position:relative" id="longitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#longitude" aria-label="code classlanguage textlongitudecode number required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> (Number, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Longitude of the anchor.</p><h5 style="position:relative" id="altitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#altitude" aria-label="code classlanguage textaltitudecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Altitude of the anchor.</p><h5 style="position:relative" id="offsetleft" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#offsetleft" aria-label="code classlanguage textoffsetleftcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">offsetLeft</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Offset of the anchor from the left in pixels, negative number indicates left.</p><h5 style="position:relative" id="offsettop" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#offsettop" aria-label="code classlanguage textoffsettopcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">offsetTop</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Offset of the anchor from the top in pixels, negative number indicates up.</p><h5 style="position:relative" id="closebutton" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#closebutton" aria-label="code classlanguage textclosebuttoncode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">closeButton</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, a close button will appear in the top right corner of the popup.</p><h5 style="position:relative" id="closeonclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#closeonclick" aria-label="code classlanguage textcloseonclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">closeOnClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the popup will be closed when the map is clicked.</p><h5 style="position:relative" id="tipsize" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#tipsize" aria-label="code classlanguage texttipsizecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">tipSize</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">10</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Size of the tip pointing to the coordinate.</p><h5 style="position:relative" id="anchor" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#anchor" aria-label="code classlanguage textanchorcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">anchor</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bottom</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A string indicating the popup&#x27;s position relative to the coordinate.
-Options are <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">top</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bottom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">left</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">right</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">top-left</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">top-right</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bottom-left</code>, and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bottom-right</code>.</p><h5 style="position:relative" id="dynamicposition" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#dynamicposition" aria-label="code classlanguage textdynamicpositioncode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dynamicPosition</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the anchor will be dynamically adjusted to ensure the popup falls within the map container.</p><h5 style="position:relative" id="sortbydepth" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#sortbydepth" aria-label="code classlanguage textsortbydepthcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">sortByDepth</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the order of the popups will be dynamically rearranged to ensure that the ones anchored closer to the camera are rendered on top. Useful when showing multiple popups in a tilted map.</p><h5 style="position:relative" id="onclose" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onclose" aria-label="code classlanguage textonclosecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClose</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when the user closes the popup.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/popup.js" class="typography__A-sc-1pmaksm-0 dvhuEd">popup.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/popup";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+Options are <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">top</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bottom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">left</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">right</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">top-left</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">top-right</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bottom-left</code>, and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bottom-right</code>.</p><h5 style="position:relative" id="dynamicposition" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#dynamicposition" aria-label="code classlanguage textdynamicpositioncode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dynamicPosition</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the anchor will be dynamically adjusted to ensure the popup falls within the map container.</p><h5 style="position:relative" id="sortbydepth" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#sortbydepth" aria-label="code classlanguage textsortbydepthcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">sortByDepth</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, the order of the popups will be dynamically rearranged to ensure that the ones anchored closer to the camera are rendered on top. Useful when showing multiple popups in a tilted map.</p><h5 style="position:relative" id="onclose" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onclose" aria-label="code classlanguage textonclosecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClose</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Callback when the user closes the popup.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/popup.js" class="typography__A-sc-1pmaksm-0 dvhuEd">popup.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/popup";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/scale-control/index.html b/docs/api-reference/scale-control/index.html
index 310b982d..3f7c2a79 100644
--- a/docs/api-reference/scale-control/index.html
+++ b/docs/api-reference/scale-control/index.html
@@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/scale-control/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="ScaleControl" class="" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="scalecontrol" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#scalecontrol" aria-label="scalecontrol permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ScaleControl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.2-green" alt="Since v5.2" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">ScaleControl</a>.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/scale-control/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="ScaleControl" class="" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="scalecontrol" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#scalecontrol" aria-label="scalecontrol permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ScaleControl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.2-green" alt="Since v5.2" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a React equivalent of Mapbox&#x27;s <a href="https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" class="typography__A-sc-1pmaksm-0 dvhuEd">ScaleControl</a>.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>ScaleControl<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token keyword">const</span> scaleControlStyle<span class="token operator">=</span> <span class="token punctuation">{</span>
@@ -109,4 +109,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
       <span class="token operator">&lt;</span>ScaleControl maxWidth<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span> unit<span class="token operator">=</span><span class="token string">&quot;metric&quot;</span> style<span class="token operator">=</span><span class="token punctuation">{</span>scaleControlStyle<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
     <span class="token operator">&lt;</span><span class="token operator">/</span>ReactMapGL<span class="token operator">&gt;</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="maxwidth" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#maxwidth" aria-label="code classlanguage textmaxwidthcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxWidth</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">100</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">The maximum length of the scale control in pixels.</p><h5 style="position:relative" id="unit" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#unit" aria-label="code classlanguage textunitcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unit</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;metric&#x27;</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Unit of the distance, one of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;imperial&#x27;</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;metric&#x27;</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;nautical&#x27;</code>.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: &#x27;absolute&#x27;}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 dvhuEd">React style</a> object applied to this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/scale-control.js" class="typography__A-sc-1pmaksm-0 dvhuEd">scale-control.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/scale-control";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="maxwidth" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#maxwidth" aria-label="code classlanguage textmaxwidthcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxWidth</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">100</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">The maximum length of the scale control in pixels.</p><h5 style="position:relative" id="unit" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#unit" aria-label="code classlanguage textunitcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unit</code> (String)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;metric&#x27;</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Unit of the distance, one of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;imperial&#x27;</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;metric&#x27;</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;nautical&#x27;</code>.</p><h5 style="position:relative" id="classname" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#classname" aria-label="code classlanguage textclassnamecode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">className</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Assign a custom class name to the container of this control.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{position: &#x27;absolute&#x27;}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A <a href="https://reactjs.org/docs/dom-elements.html#style" class="typography__A-sc-1pmaksm-0 dvhuEd">React style</a> object applied to this control.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="styling" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#styling" aria-label="styling permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styling</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/scale-control.js" class="typography__A-sc-1pmaksm-0 dvhuEd">scale-control.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/scale-control";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/source/index.html b/docs/api-reference/source/index.html
index aba22fbc..81b5a521 100644
--- a/docs/api-reference/source/index.html
+++ b/docs/api-reference/source/index.html
@@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/source/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Source" class="" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="source" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.1-green" alt="Since v5.1" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This component allows apps to create a <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources" class="typography__A-sc-1pmaksm-0 dvhuEd">map source</a> using React. It may contain <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/layer">Layer</a> components as children.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/source/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Source" class="" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="source" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.1-green" alt="Since v5.1" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">This component allows apps to create a <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources" class="typography__A-sc-1pmaksm-0 dvhuEd">map source</a> using React. It may contain <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/layer">Layer</a> components as children.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>Source<span class="token punctuation">,</span> Layer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token keyword">const</span> geojson <span class="token operator">=</span> <span class="token punctuation">{</span>
@@ -126,4 +126,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
   layers<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
 <span class="token punctuation">}</span><span class="token punctuation">;</span>
 
-<span class="token operator">&lt;</span>ReactMapGL <span class="token operator">...</span> mapStyle<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">EMPTY_STYLE</span><span class="token punctuation">}</span><span class="token operator">&gt;</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">When props change <em>shallowly</em>, the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Once a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&lt;Source&gt;</code> is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React&#x27;s <a href="https://reactjs.org/docs/lists-and-keys.html#keys" class="typography__A-sc-1pmaksm-0 dvhuEd">key prop</a> to give each element a stable identity.</p><h5 style="position:relative" id="id" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#id" aria-label="code classlanguage textidcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">id</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Unique identifier of the source. If not provided, a default id will be assigned.</p><h5 style="position:relative" id="type" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#type" aria-label="code classlanguage texttypecode string required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">type</code> (String, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Type of the source.</p><h2 style="position:relative" id="source-1" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source-1" aria-label="source 1 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/source.js" class="typography__A-sc-1pmaksm-0 dvhuEd">source.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/source";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token operator">&lt;</span>ReactMapGL <span class="token operator">...</span> mapStyle<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">EMPTY_STYLE</span><span class="token punctuation">}</span><span class="token operator">&gt;</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">When props change <em>shallowly</em>, the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Once a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&lt;Source&gt;</code> is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React&#x27;s <a href="https://reactjs.org/docs/lists-and-keys.html#keys" class="typography__A-sc-1pmaksm-0 dvhuEd">key prop</a> to give each element a stable identity.</p><h5 style="position:relative" id="id" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#id" aria-label="code classlanguage textidcode string permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">id</code> (String)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Unique identifier of the source. If not provided, a default id will be assigned.</p><h5 style="position:relative" id="type" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#type" aria-label="code classlanguage texttypecode string required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">type</code> (String, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Type of the source.</p><h2 style="position:relative" id="source-1" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source-1" aria-label="source 1 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/source.js" class="typography__A-sc-1pmaksm-0 dvhuEd">source.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/source";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/static-map/index.html b/docs/api-reference/static-map/index.html
index afb75c42..f96a7fc9 100644
--- a/docs/api-reference/static-map/index.html
+++ b/docs/api-reference/static-map/index.html
@@ -96,7 +96,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/static-map/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="StaticMap" class="" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="staticmap" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#staticmap" aria-label="staticmap permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>StaticMap</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The simplest <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">React</code> wrapper around <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code>. This is designed to be completely
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/static-map/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="StaticMap" class="" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="staticmap" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#staticmap" aria-label="staticmap permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>StaticMap</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v3.0-green" alt="Since v3.0" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><p class="typography__P-sc-1pmaksm-8 cncNYa">The simplest <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">React</code> wrapper around <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code>. This is designed to be completely
 static, and should be used to render a map with no interactivity. For a component
 that supports full user interactivity, see <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>.</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> <span class="token punctuation">{</span>StaticMap<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
@@ -116,4 +116,4 @@ will take precedence over those same options if set via props.</p><h5 style="pos
 This allows apps to update data sources and layer styles efficiently. In use cases such as animation or dynamic showing/hiding layers, style diffing prevents the map from reloading and flickering when the map style changes.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">There are known issues with style diffing. As stopgap, use this option to prevent style diffing.</p><h5 style="position:relative" id="reusemaps" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#reusemaps" aria-label="code classlanguage textreusemapscode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">reuseMaps</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><blockquote class="typography__BlockQuote-sc-1pmaksm-16 hAWDlt"><p class="typography__P-sc-1pmaksm-8 cncNYa">This prop is experimental.</p></blockquote><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, when the map component is unmounted, instead of calling <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">remove</code> on the Mapbox map instance, save it for later reuse. This will avoid repeatedly creating new Mapbox map instances if possible.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Applications that frequently mount and unmount maps may try this prop to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.</p><h5 style="position:relative" id="transformrequest" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#transformrequest" aria-label="code classlanguage texttransformrequestcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transformRequest</code> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.
 Expected to return an object with a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">url</code> property and optionally <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">headers</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">credentials</code> properties.  Equivalent to Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transformRequest</code> <a href="https://www.mapbox.com/mapbox-gl-js/api#map" class="typography__A-sc-1pmaksm-0 dvhuEd">map option</a>.</p><h3 style="position:relative" id="map-state" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#map-state" aria-label="map state permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Map State</h3><h5 style="position:relative" id="mapstyle" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#mapstyle" aria-label="code classlanguage textmapstylecode string  object  immutablemap permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> (String | Object | Immutable.Map)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;mapbox://styles/mapbox/light-v8&#x27;</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">The Mapbox style. A string url or a
 <a href="https://www.mapbox.com/mapbox-gl-style-spec/#layer-interactive" class="typography__A-sc-1pmaksm-0 dvhuEd">MapboxGL style</a>
-object (regular JS object or Immutable.Map).</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Whenever the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> prop changes, the component will attempt to update the style of the underlying Mapbox map. The behavior can be further customized with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">preventStyleDiffing</code> prop.</p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> is ignored when explicitly set to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code>.</p><h5 style="position:relative" id="width" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#width" aria-label="code classlanguage textwidthcode number  string required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> (Number | String, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The width of the map. Can be either a number in pixels, or a valid CSS string.</p><h5 style="position:relative" id="height" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#height" aria-label="code classlanguage textheightcode number  string required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> (Number | String, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The height of the map. Can be either a number in pixels, or a valid CSS string.</p><h5 style="position:relative" id="latitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#latitude" aria-label="code classlanguage textlatitudecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> (Number)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The latitude of the center of the map, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><h5 style="position:relative" id="longitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#longitude" aria-label="code classlanguage textlongitudecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> (Number)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The longitude of the center of the map, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><h5 style="position:relative" id="zoom" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#zoom" aria-label="code classlanguage textzoomcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> (Number)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The tile zoom level of the map, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Bounded implicitly by default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minZoom</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code> of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code></p><h5 style="position:relative" id="bearing" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#bearing" aria-label="code classlanguage textbearingcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Specify the bearing of the viewport, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><h5 style="position:relative" id="pitch" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#pitch" aria-label="code classlanguage textpitchcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Specify the pitch of the viewport, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied..</p><h5 style="position:relative" id="altitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#altitude" aria-label="code classlanguage textaltitudecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1.5</code></li></ul><blockquote class="typography__BlockQuote-sc-1pmaksm-16 hAWDlt"><p class="typography__P-sc-1pmaksm-8 cncNYa">Non-public API, see <a href="https://github.com/mapbox/mapbox-gl-js/issues/1137" class="typography__A-sc-1pmaksm-0 dvhuEd">https://github.com/mapbox/mapbox-gl-js/issues/1137</a>.</p></blockquote><p class="typography__P-sc-1pmaksm-8 cncNYa">Altitude of the viewport camera, relative to screen height.</p><h5 style="position:relative" id="viewstate" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#viewstate" aria-label="code classlanguage textviewstatecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">An object containing the view state of the map specified by the following fields:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> (Number) - The latitude of the center of the map.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> (Number) - The longitude of the center of the map.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> (Number) - The tile zoom level of the map. Bounded implicitly by default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minZoom</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code> of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code> - The bearing of the viewport.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code> - The pitch of the viewport.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1.5 screen heights</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Note: Either the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code>, or the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> properties need to be specified.</p><h3 style="position:relative" id="render-options" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#render-options" aria-label="render options permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Render Options</h3><h5 style="position:relative" id="asyncrender" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#asyncrender" aria-label="code classlanguage textasyncrendercode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">asyncRender</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, let Mapbox manage its own render cycle. This is the behavior prior to v4.1.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, force Mapbox canvas to redraw with DOM updates. This will make the map synchronize better with other controls during prop-driven viewport changes.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The CSS style of the map container.</p><h5 style="position:relative" id="visible" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#visible" aria-label="code classlanguage textvisiblecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">visible</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Whether the map is visible. Unmounting and re-mounting a Mapbox instance is known to be costly. This option offers a way to hide a map using CSS style.</p><h5 style="position:relative" id="visibilityconstraints" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#visibilityconstraints" aria-label="code classlanguage textvisibilityconstraintscode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">visibilityConstraints</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">An object that specifies bounds for viewport props with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">min*</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">max*</code> keys. If the viewport props are outside of these constraints, the Mapbox map is automatically hidden.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{ minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 }</code></p><h3 style="position:relative" id="callbacks" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#callbacks" aria-label="callbacks permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Callbacks</h3><h5 style="position:relative" id="onload" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onload" aria-label="code classlanguage textonloadcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onLoad</code> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">() =&gt; {}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run when the map emits a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">load</code> event. <a href="https://www.mapbox.com/mapbox-gl-js/api#map.event:load" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox docs</a></p><h5 style="position:relative" id="onresize" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onresize" aria-label="code classlanguage textonresizecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onResize</code> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">() =&gt; {}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run when the map size has changed.</p><h5 style="position:relative" id="onerror" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onerror" aria-label="code classlanguage textonerrorcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onError</code> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">console.error</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run when the map emits an <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">error</code> event. <a href="https://www.mapbox.com/mapbox-gl-js/api#map.event:error" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox docs</a></p><h2 style="position:relative" id="methods" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#methods" aria-label="methods permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2><h5 style="position:relative" id="getmap" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getmap" aria-label="code classlanguage textgetmapcode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns the Mapbox instance if initialized. The <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> instance will have full access to <a href="https://www.mapbox.com/mapbox-gl-js/api/#map" class="typography__A-sc-1pmaksm-0 dvhuEd">MapboxGL&#x27;s API</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap()</code></p><h5 style="position:relative" id="queryrenderedfeatures" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#queryrenderedfeatures" aria-label="code classlanguage textqueryrenderedfeaturescode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">queryRenderedFeatures</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Use Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">queryRenderedFeatures</code> API to find features at point or in a bounding box. If the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">parameters</code> argument is not specified, only queries the layers with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactive</code> property in the layer style.</p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">queryRenderedFeatures(geometry, parameters)</code></p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">geometry</code> {<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[Number, Number</code> | <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[[Number, Number, [Number, Number</code> - Point or an array of two points defining the bounding box. Coordinates in pixels.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">parameters</code> - Query options. For more details, see <a href="https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox API documentation</a>.</li></ul><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/static-map.js" class="typography__A-sc-1pmaksm-0 dvhuEd">static-map.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/static-map";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+object (regular JS object or Immutable.Map).</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Whenever the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> prop changes, the component will attempt to update the style of the underlying Mapbox map. The behavior can be further customized with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">preventStyleDiffing</code> prop.</p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> is ignored when explicitly set to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code>.</p><h5 style="position:relative" id="width" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#width" aria-label="code classlanguage textwidthcode number  string required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> (Number | String, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The width of the map. Can be either a number in pixels, or a valid CSS string.</p><h5 style="position:relative" id="height" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#height" aria-label="code classlanguage textheightcode number  string required permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> (Number | String, required)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The height of the map. Can be either a number in pixels, or a valid CSS string.</p><h5 style="position:relative" id="latitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#latitude" aria-label="code classlanguage textlatitudecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> (Number)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The latitude of the center of the map, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><h5 style="position:relative" id="longitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#longitude" aria-label="code classlanguage textlongitudecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> (Number)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The longitude of the center of the map, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><h5 style="position:relative" id="zoom" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#zoom" aria-label="code classlanguage textzoomcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> (Number)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The tile zoom level of the map, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Bounded implicitly by default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minZoom</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code> of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code></p><h5 style="position:relative" id="bearing" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#bearing" aria-label="code classlanguage textbearingcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Specify the bearing of the viewport, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied.</p><h5 style="position:relative" id="pitch" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#pitch" aria-label="code classlanguage textpitchcode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Specify the pitch of the viewport, as a top level prop. Only used if <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> is not supplied..</p><h5 style="position:relative" id="altitude" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#altitude" aria-label="code classlanguage textaltitudecode number permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code> (Number)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1.5</code></li></ul><blockquote class="typography__BlockQuote-sc-1pmaksm-16 hAWDlt"><p class="typography__P-sc-1pmaksm-8 cncNYa">Non-public API, see <a href="https://github.com/mapbox/mapbox-gl-js/issues/1137" class="typography__A-sc-1pmaksm-0 dvhuEd">https://github.com/mapbox/mapbox-gl-js/issues/1137</a>.</p></blockquote><p class="typography__P-sc-1pmaksm-8 cncNYa">Altitude of the viewport camera, relative to screen height.</p><h5 style="position:relative" id="viewstate" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#viewstate" aria-label="code classlanguage textviewstatecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">An object containing the view state of the map specified by the following fields:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> (Number) - The latitude of the center of the map.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> (Number) - The longitude of the center of the map.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> (Number) - The tile zoom level of the map. Bounded implicitly by default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minZoom</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code> of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxGL</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code> - The bearing of the viewport.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code> - The pitch of the viewport.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code> (Number) - default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1.5 screen heights</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Note: Either the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code>, or the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> properties need to be specified.</p><h3 style="position:relative" id="render-options" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#render-options" aria-label="render options permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Render Options</h3><h5 style="position:relative" id="asyncrender" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#asyncrender" aria-label="code classlanguage textasyncrendercode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">asyncRender</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code>, let Mapbox manage its own render cycle. This is the behavior prior to v4.1.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code>, force Mapbox canvas to redraw with DOM updates. This will make the map synchronize better with other controls during prop-driven viewport changes.</p><h5 style="position:relative" id="style" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">The CSS style of the map container.</p><h5 style="position:relative" id="visible" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#visible" aria-label="code classlanguage textvisiblecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">visible</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Whether the map is visible. Unmounting and re-mounting a Mapbox instance is known to be costly. This option offers a way to hide a map using CSS style.</p><h5 style="position:relative" id="visibilityconstraints" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#visibilityconstraints" aria-label="code classlanguage textvisibilityconstraintscode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">visibilityConstraints</code> (Object)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">An object that specifies bounds for viewport props with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">min*</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">max*</code> keys. If the viewport props are outside of these constraints, the Mapbox map is automatically hidden.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{ minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 }</code></p><h3 style="position:relative" id="callbacks" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#callbacks" aria-label="callbacks permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Callbacks</h3><h5 style="position:relative" id="onload" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onload" aria-label="code classlanguage textonloadcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onLoad</code> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">() =&gt; {}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run when the map emits a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">load</code> event. <a href="https://www.mapbox.com/mapbox-gl-js/api#map.event:load" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox docs</a></p><h5 style="position:relative" id="onresize" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onresize" aria-label="code classlanguage textonresizecode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onResize</code> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">() =&gt; {}</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run when the map size has changed.</p><h5 style="position:relative" id="onerror" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#onerror" aria-label="code classlanguage textonerrorcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onError</code> (Function)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">console.error</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">A callback run when the map emits an <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">error</code> event. <a href="https://www.mapbox.com/mapbox-gl-js/api#map.event:error" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox docs</a></p><h2 style="position:relative" id="methods" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#methods" aria-label="methods permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2><h5 style="position:relative" id="getmap" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getmap" aria-label="code classlanguage textgetmapcode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns the Mapbox instance if initialized. The <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Map</code> instance will have full access to <a href="https://www.mapbox.com/mapbox-gl-js/api/#map" class="typography__A-sc-1pmaksm-0 dvhuEd">MapboxGL&#x27;s API</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap()</code></p><h5 style="position:relative" id="queryrenderedfeatures" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#queryrenderedfeatures" aria-label="code classlanguage textqueryrenderedfeaturescode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">queryRenderedFeatures</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Use Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">queryRenderedFeatures</code> API to find features at point or in a bounding box. If the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">parameters</code> argument is not specified, only queries the layers with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactive</code> property in the layer style.</p><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">queryRenderedFeatures(geometry, parameters)</code></p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">geometry</code> {<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[Number, Number</code> | <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[[Number, Number, [Number, Number</code> - Point or an array of two points defining the bounding box. Coordinates in pixels.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">parameters</code> - Query options. For more details, see <a href="https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox API documentation</a>.</li></ul><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/static-map.js" class="typography__A-sc-1pmaksm-0 dvhuEd">static-map.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/static-map";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/svg-overlay/index.html b/docs/api-reference/svg-overlay/index.html
index b8b513a6..76be7607 100644
--- a/docs/api-reference/svg-overlay/index.html
+++ b/docs/api-reference/svg-overlay/index.html
@@ -88,4 +88,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/svg-overlay/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="SVGOverlay" class="" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="svgoverlay" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#svgoverlay" aria-label="svgoverlay permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>SVGOverlay</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">Allows applications to overlay data on top of maps using a SVG container.</p><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="redraw" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#redraw" aria-label="code classlanguage textredrawcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">redraw</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called every time the map updates.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> (Number) - width of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> (Number) - height of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">project</code> (Function) - get screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> from geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unproject</code> (Function) - get geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code> from screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code></li></ul><h3 style="position:relative" id="style" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">Additional css styles of the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">svg</code> container.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/overlays/svg-overlay.js" class="typography__A-sc-1pmaksm-0 dvhuEd">svg-overlay.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/svg-overlay";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/svg-overlay/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="SVGOverlay" class="" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="svgoverlay" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#svgoverlay" aria-label="svgoverlay permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>SVGOverlay</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">Allows applications to overlay data on top of maps using a SVG container.</p><h2 style="position:relative" id="properties" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#properties" aria-label="properties permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2><h5 style="position:relative" id="redraw" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#redraw" aria-label="code classlanguage textredrawcode function permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">redraw</code> (Function)</h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Called every time the map updates.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> (Number) - width of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> (Number) - height of the viewport</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">project</code> (Function) - get screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> from geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unproject</code> (Function) - get geo coordinates <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code> from screen position <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code></li></ul><h3 style="position:relative" id="style" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#style" aria-label="code classlanguage textstylecode object permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> (Object)</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">Additional css styles of the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">svg</code> container.</p><h5 style="position:relative" id="capturescroll" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturescroll" aria-label="code classlanguage textcapturescrollcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureScroll</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.</p><h5 style="position:relative" id="capturedrag" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedrag" aria-label="code classlanguage textcapturedragcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDrag</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.</p><h5 style="position:relative" id="captureclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#captureclick" aria-label="code classlanguage textcaptureclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of click event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> callback when this component is clicked.</p><h5 style="position:relative" id="capturedoubleclick" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturedoubleclick" aria-label="code classlanguage textcapturedoubleclickcode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">captureDoubleClick</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.</p><h5 style="position:relative" id="capturepointermove" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#capturepointermove" aria-label="code classlanguage textcapturepointermovecode boolean permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">capturePointerMove</code> (Boolean)</h5><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">default: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">false</code></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Stop propagation of pointermove event to the map component. Can be used to stop map from calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code> callback when this component is hovered.</p><h2 style="position:relative" id="source" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#source" aria-label="source permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/overlays/svg-overlay.js" class="typography__A-sc-1pmaksm-0 dvhuEd">svg-overlay.js</a></p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/svg-overlay";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/api-reference/web-mercator-viewport/index.html b/docs/api-reference/web-mercator-viewport/index.html
index c976a711..0bea0d63 100644
--- a/docs/api-reference/web-mercator-viewport/index.html
+++ b/docs/api-reference/web-mercator-viewport/index.html
@@ -94,7 +94,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/web-mercator-viewport/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="WebMercatorViewport" class="" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="webmercatorviewport" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#webmercatorviewport" aria-label="webmercatorviewport permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>WebMercatorViewport</h1><p class="typography__P-sc-1pmaksm-8 cncNYa badges">
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/web-mercator-viewport/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="WebMercatorViewport" class="" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="webmercatorviewport" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#webmercatorviewport" aria-label="webmercatorviewport permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>WebMercatorViewport</h1><p class="typography__P-sc-1pmaksm-8 cncNYa badges">
   <img src="https://img.shields.io/badge/From-v3.1-blue.svg?style=flat-square" alt="From-v3.1" class="typography__Img-sc-1pmaksm-15 hBeZII"/>
 </p><p class="typography__P-sc-1pmaksm-8 cncNYa">The <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">WebMercatorViewport</code> class takes map camera states (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> etc.),
 and performs projections between world and screen coordinates.</p><h2 style="position:relative" id="constructor-1" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#constructor-1" aria-label="constructor permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Constructor</h2><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Parameter</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Type</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Default</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Width of viewport</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Height of viewport</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Latitude of viewport center</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Longitude of viewport center</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">11</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Map zoom (scale is calculated as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">2^zoom</code>)</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">The pitch (tilt) of the map from the screen, in degrees (0 is straight down)</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">The bearing (rotation) of the map from north, in degrees counter-clockwise (0 means north is up)</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fovy</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">see below</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Field of view of camera in degrees</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">see below</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Altitude of camera in screen units</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">position</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number[]</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">null</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Offset of the camera, in meters</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">Remarks:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If either <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fovy</code> is not provided, the missing value is computed from the other using <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitudeToFovy()</code>/<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fovyToAltitude()</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Altitude has a default value that matches assumptions in mapbox-gl. It is only used if both <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fovy</code> are not supplied.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Field of view is independent from altitude, provide <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitudeToFovy(1.5)</code> (default value) to match assumptions in mapbox-gl</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> are forced to 1 if supplied as 0, to avoid
@@ -104,4 +104,4 @@ latitudes are specified as degrees.</li></ul><h2 style="position:relative" id="m
 rendering.</li></ul><h5 style="position:relative" id="unprojectxyz-options" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#unprojectxyz-options" aria-label="code classlanguage textunprojectxyz optionscode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unproject(xyz, options)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Unproject pixel coordinates on screen to longitude and latitude on map.</p><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Parameter</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Type</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Default</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">xyz</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Array</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">(required)</td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">pixel coordinates, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y, z]</code> where <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">z</code> is pixel depth</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Object</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{}</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">named options</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.topLeft</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Boolean</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code> projected coords are top left, otherwise bottom left</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.targetZ</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">If pixel depth <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">z</code> is not specified in <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">xyz</code>, use <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.targetZ</code> as the desired elevation</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[longitude, lat, Z]</code> in map coordinates. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Z</code> is elevation in meters.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If input is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> without specifying <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.targetZ</code>: returns <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If input is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.targetZ</code>: returns <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat, targetZ]</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If input is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y, z]</code>: returns <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat, Z]</code>.</li></ul><h5 style="position:relative" id="projectflatlnglat-scale" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#projectflatlnglat-scale" aria-label="code classlanguage textprojectflatlnglat scalecode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">projectFlat(lngLat, scale)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Project longitude and latitude onto Web Mercator coordinates.</p><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Parameter</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Type</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Default</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">lngLat</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Array</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">(required)</td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">map coordinates, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code></td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">scale</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">this.scale</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Web Mercator scale</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code>, representing Web Mercator coordinates.</li></ul><h5 style="position:relative" id="unprojectflatxy-scale" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#unprojectflatxy-scale" aria-label="code classlanguage textunprojectflatxy scalecode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unprojectFlat(xy, scale)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Unprojects a Web Mercator coordinate to longitude and latitude.</p><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Parameter</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Type</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Default</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">xy</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Array</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">(required)</td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Web Mercator coordinates, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code></td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">scale</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">this.scale</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Web Mercator scale</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[longitude, latitude]</code></li></ul><h5 style="position:relative" id="getboundsoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getboundsoptions" aria-label="code classlanguage textgetboundsoptionscode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getBounds(options)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Get the axis-aligned bounding box of the current visible area.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.z</code> (number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding box at a specific elevation. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code>.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[[lon, lat], [lon, lat]]</code> as the south west and north east corners of the smallest orthogonal bounds that encompasses the visible region.</li></ul><h5 style="position:relative" id="getboundingregionoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getboundingregionoptions" aria-label="code classlanguage textgetboundingregionoptionscode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getBoundingRegion(options)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Get the vertices of the current visible region.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.z</code> (number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding region at a specific elevation. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code>.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">An array of 4 corners in <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[longitude, latitude, altitude]</code> that define the visible region.</li></ul><h5 style="position:relative" id="fitboundsbounds-options-object" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#fitboundsbounds-options-object" aria-label="code classlanguage textfitboundsbounds options objectcode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fitBounds(bounds, options: object)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Get a new flat viewport that fits around the given bounding box.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bounds</code> ([<!-- -->[number,number]<!-- -->,<!-- -->[number,number]<!-- -->]) - an array of two opposite corners of
 the bounding box. Each corner is specified in <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lon, lat]</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.padding</code> (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.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.offset</code> (<!-- -->[number,number]<!-- -->, optional) - The center of the given bounds relative to the viewport&#x27;s center, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> measured in pixels.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">opts.minExtent</code> (number, optional) - If supplied, the bounds used to calculate the new map settings will be expanded if the delta width or height of the supplied <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bounds</code> is smaller than this value.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">opts.maxZoom</code>=<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">24</code> (number, optional) - The returned zoom value will be capped to this value. Avoids returning infinite <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> when the supplied <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bounds</code> have zero width or height deltas.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">A new <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">WebMercatorViewport</code> instance</li></ul><h5 style="position:relative" id="getmapcenterbylnglatpositionoptions-object-number-number" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getmapcenterbylnglatpositionoptions-object-number-number" aria-label="code classlanguage textgetmapcenterbylnglatpositionoptions object number numbercode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMapCenterByLngLatPosition(options: object): [number, number]</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Get the map center that place a given <!-- -->[lng, lat]<!-- --> coordinate at screen point <!-- -->[x, y]<!-- -->.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.lngLat</code> (Array, required) - <!-- -->[lng,lat]<!-- --> coordinates of a location on the sphere.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.pos</code> (Array, required) - <!-- -->[x,y]<!-- --> coordinates of a pixel on screen.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[longitude, latitude]</code> as the new map center</li></ul></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/web-mercator-viewport";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+required.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.offset</code> (<!-- -->[number,number]<!-- -->, optional) - The center of the given bounds relative to the viewport&#x27;s center, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> measured in pixels.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">opts.minExtent</code> (number, optional) - If supplied, the bounds used to calculate the new map settings will be expanded if the delta width or height of the supplied <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bounds</code> is smaller than this value.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">opts.maxZoom</code>=<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">24</code> (number, optional) - The returned zoom value will be capped to this value. Avoids returning infinite <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> when the supplied <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bounds</code> have zero width or height deltas.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">A new <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">WebMercatorViewport</code> instance</li></ul><h5 style="position:relative" id="getmapcenterbylnglatpositionoptions-object-number-number" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getmapcenterbylnglatpositionoptions-object-number-number" aria-label="code classlanguage textgetmapcenterbylnglatpositionoptions object number numbercode permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMapCenterByLngLatPosition(options: object): [number, number]</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Get the map center that place a given <!-- -->[lng, lat]<!-- --> coordinate at screen point <!-- -->[x, y]<!-- -->.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.lngLat</code> (Array, required) - <!-- -->[lng,lat]<!-- --> coordinates of a location on the sphere.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.pos</code> (Array, required) - <!-- -->[x,y]<!-- --> coordinates of a pixel on screen.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[longitude, latitude]</code> as the new map center</li></ul></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/api-reference/web-mercator-viewport";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/contributing/index.html b/docs/contributing/index.html
index a9235625..80ac7a0e 100644
--- a/docs/contributing/index.html
+++ b/docs/contributing/index.html
@@ -88,8 +88,8 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/contributing/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Contributing to react-map-gl" class="" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="contributing-to-react-map-gl" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#contributing-to-react-map-gl" aria-label="contributing to react map gl permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Contributing to react-map-gl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><strong>Thanks for taking the time to contribute!</strong></p><p class="typography__P-sc-1pmaksm-8 cncNYa">PRs and bug reports are welcome, and we are actively looking for new maintainers.</p><h2 style="position:relative" id="setting-up-dev-environment" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#setting-up-dev-environment" aria-label="setting up dev environment permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Setting Up Dev Environment</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">The <strong>master</strong> branch is the active development branch.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Building react-map-gl locally from the source requires node.js <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&gt;=8</code>.
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/contributing/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Contributing to react-map-gl" class="" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="contributing-to-react-map-gl" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#contributing-to-react-map-gl" aria-label="contributing to react map gl permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Contributing to react-map-gl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><strong>Thanks for taking the time to contribute!</strong></p><p class="typography__P-sc-1pmaksm-8 cncNYa">PRs and bug reports are welcome, and we are actively looking for new maintainers.</p><h2 style="position:relative" id="setting-up-dev-environment" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#setting-up-dev-environment" aria-label="setting up dev environment permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Setting Up Dev Environment</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">The <strong>master</strong> branch is the active development branch.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Building react-map-gl locally from the source requires node.js <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&gt;=8</code>.
 We use <a href="https://yarnpkg.com/en/docs/install" class="typography__A-sc-1pmaksm-0 dvhuEd">yarn</a> to manage the dependencies.</p><div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-bash"><span class="token function">git</span> checkout master
 <span class="token function">yarn</span> bootstrap
 <span class="token function">yarn</span> <span class="token builtin class-name">test</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Test:</p><div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-bash">$ <span class="token function">npm</span> run <span class="token builtin class-name">test</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Test in Node:</p><div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-bash">$ <span class="token function">npm</span> run <span class="token builtin class-name">test</span> node</code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Test in browser (can use Chrome dev tools for debugging):</p><div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-bash">$ <span class="token function">npm</span> run <span class="token builtin class-name">test</span> browser</code></pre></div><h2 style="position:relative" id="pull-requests" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#pull-requests" aria-label="pull requests permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Pull Requests</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Any intended change to the code base must open a <a href="https://help.github.com/articles/creating-a-pull-request/" class="typography__A-sc-1pmaksm-0 dvhuEd">pull request</a> and be approved. </p><p class="typography__P-sc-1pmaksm-8 cncNYa">Generally speaking, all PRs are open against the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">master</code> branch, unless the feature being affected no longer exists on master.</p><h3 style="position:relative" id="pr-checklist" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#pr-checklist" aria-label="pr checklist permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>PR Checklist</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe contains-task-list"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item"><input type="checkbox" disabled=""/> <!-- -->Tests<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">npm run test</code> must be successful.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">New code should be covered by unit tests whenever possible.</li></ul></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item"><input type="checkbox" disabled=""/> <!-- -->Documentation<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If public APIs are added/modified, update component documentation in <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">docs/api-reference</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Breaking changes and deprecations must be added to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">docs/upgrade-guide.md</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Noteworthy new features should be added to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">docs/whats-new.md</code>.</li></ul></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item"><input type="checkbox" disabled=""/> <!-- -->Description on GitHub<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Link to relevant issue.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Label with a milestone (latest release or vNext).</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If public APIs are added/modified, describe the intended behavior.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If visual/interaction is affected, consider attaching a screenshot/GIF.</li></ul></li></ul><h2 style="position:relative" id="release" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#release" aria-label="release permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Release</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl follows the <a href="https://semver.org/" class="typography__A-sc-1pmaksm-0 dvhuEd">Semantic Versioning</a> guidelines. Steps for publishing releases can be found <a href="https://www.github.com/visgl/tsc/tree/master/developer-process" class="typography__A-sc-1pmaksm-0 dvhuEd">here</a>.</p><h2 style="position:relative" id="community-governance" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#community-governance" aria-label="community governance permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Community Governance</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">vis.gl is part of the <a href="https://uc.foundation/" class="typography__A-sc-1pmaksm-0 dvhuEd">Urban Computing Foundation</a>. See the organization&#x27;s <a href="https://github.com/visgl/tsc/blob/master/Technical%20Charter.md" class="typography__A-sc-1pmaksm-0 dvhuEd">Technical Charter</a>.</p><h3 style="position:relative" id="technical-steering-committee" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#technical-steering-committee" aria-label="technical steering committee permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Technical Steering Committee</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl development is governed by the vis.gl Technical Steering Committee (TSC).</p><h3 style="position:relative" id="maintainers" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#maintainers" aria-label="maintainers permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Maintainers</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://github.com/Pessimistress" class="typography__A-sc-1pmaksm-0 dvhuEd">Xiaoji Chen</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://github.com/xintongxia" class="typography__A-sc-1pmaksm-0 dvhuEd">Xintong Xia</a></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Maintainers of react-map-gl have commit access to this GitHub repository, and take part in the decision making process.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If you are interested in becoming a maintainer, read the <a href="https://github.com/visgl/tsc/blob/master/governance.md" class="typography__A-sc-1pmaksm-0 dvhuEd">governance guidelines</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The vis.gl TSC meets monthly and publishes meeting notes via a <a href="https://lists.uc.foundation/g/visgl" class="typography__A-sc-1pmaksm-0 dvhuEd">mailing list</a>.
-This mailing list can also be utilized to reach out to the TSC.</p><h2 style="position:relative" id="code-of-conduct" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#code-of-conduct" aria-label="code of conduct permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Code of Conduct</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Please be mindful of and adhere to the Linux Foundation&#x27;s <a href="https://lfprojects.org/policies/code-of-conduct/" class="typography__A-sc-1pmaksm-0 dvhuEd">Code of Conduct</a> when contributing to react-map-gl.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/contributing";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+This mailing list can also be utilized to reach out to the TSC.</p><h2 style="position:relative" id="code-of-conduct" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#code-of-conduct" aria-label="code of conduct permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Code of Conduct</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Please be mindful of and adhere to the Linux Foundation&#x27;s <a href="https://lfprojects.org/policies/code-of-conduct/" class="typography__A-sc-1pmaksm-0 dvhuEd">Code of Conduct</a> when contributing to react-map-gl.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/contributing";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/get-started/adding-custom-data/index.html b/docs/get-started/adding-custom-data/index.html
index ab467589..ec0107f7 100644
--- a/docs/get-started/adding-custom-data/index.html
+++ b/docs/get-started/adding-custom-data/index.html
@@ -90,7 +90,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/adding-custom-data/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Adding Custom Data" class="" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="adding-custom-data" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#adding-custom-data" aria-label="adding custom data permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding Custom Data</h1><h2 style="position:relative" id="native-mapbox-layers" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#native-mapbox-layers" aria-label="native mapbox layers permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native Mapbox Layers</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">You can inject data and mapbox native layers using the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/source">Source</a> and <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/layer">Layer</a> components:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/adding-custom-data/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Adding Custom Data" class="" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="adding-custom-data" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#adding-custom-data" aria-label="adding custom data permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding Custom Data</h1><h2 style="position:relative" id="native-mapbox-layers" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#native-mapbox-layers" aria-label="native mapbox layers permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native Mapbox Layers</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">You can inject data and mapbox native layers using the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/source">Source</a> and <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/layer">Layer</a> components:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL<span class="token punctuation">,</span> <span class="token punctuation">{</span>Source<span class="token punctuation">,</span> Layer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token keyword">const</span> geojson <span class="token operator">=</span> <span class="token punctuation">{</span>
@@ -132,4 +132,4 @@ They are great for creating light-weight custom drawings.</p><h3 style="position
 
 <span class="token operator">&lt;</span>MapGL <span class="token punctuation">{</span><span class="token operator">...</span>viewport<span class="token punctuation">}</span><span class="token operator">&gt;</span>
   <span class="token operator">&lt;</span>SVGOverlay redraw<span class="token operator">=</span><span class="token punctuation">{</span>redraw<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>MapGL<span class="token operator">&gt;</span></code></pre></div><h3 style="position:relative" id="built-in-overlays" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#built-in-overlays" aria-label="built in overlays permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Built-in Overlays</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></li></ul><h3 style="position:relative" id="example-overlays" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#example-overlays" aria-label="example overlays permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example Overlays</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">There are a couple of <a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/additional-overlays" class="typography__A-sc-1pmaksm-0 dvhuEd">additional overlays</a> in the examples folder that can be copied into applications <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ScatterplotOverlay</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ChoroplethOverlay</code>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Third-party overlays are also available. For example, the <a href="https://github.com/vicapow/react-map-gl-heatmap-overlay" class="typography__A-sc-1pmaksm-0 dvhuEd">heatmap-overlay</a> module uses <a href="https://github.com/vicapow/webgl-heatmap" class="typography__A-sc-1pmaksm-0 dvhuEd">webgl-heatmap</a> to create geographic heatmaps.</p><h2 style="position:relative" id="other-visgl-libraries" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#other-visgl-libraries" aria-label="other visgl libraries permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other vis.gl Libraries</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the <a href="https://www.github.com/visgl" class="typography__A-sc-1pmaksm-0 dvhuEd">vis.gl</a> ecosystem, a suite of high-performance data visualization tools for the Web.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://deck.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">deck.gl</a> - WebGL-powered framework for the visualization of large datasets.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://loaders.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">loaders.gl</a> - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://nebula.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">nebula.gl</a> - 3D-enabled GeoJSON editing based on deck.gl and React.</li></ul></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/adding-custom-data";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token operator">&lt;</span><span class="token operator">/</span>MapGL<span class="token operator">&gt;</span></code></pre></div><h3 style="position:relative" id="built-in-overlays" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#built-in-overlays" aria-label="built in overlays permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Built-in Overlays</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></li></ul><h3 style="position:relative" id="example-overlays" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#example-overlays" aria-label="example overlays permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example Overlays</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">There are a couple of <a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/additional-overlays" class="typography__A-sc-1pmaksm-0 dvhuEd">additional overlays</a> in the examples folder that can be copied into applications <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ScatterplotOverlay</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ChoroplethOverlay</code>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Third-party overlays are also available. For example, the <a href="https://github.com/vicapow/react-map-gl-heatmap-overlay" class="typography__A-sc-1pmaksm-0 dvhuEd">heatmap-overlay</a> module uses <a href="https://github.com/vicapow/webgl-heatmap" class="typography__A-sc-1pmaksm-0 dvhuEd">webgl-heatmap</a> to create geographic heatmaps.</p><h2 style="position:relative" id="other-visgl-libraries" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#other-visgl-libraries" aria-label="other visgl libraries permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other vis.gl Libraries</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the <a href="https://www.github.com/visgl" class="typography__A-sc-1pmaksm-0 dvhuEd">vis.gl</a> ecosystem, a suite of high-performance data visualization tools for the Web.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://deck.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">deck.gl</a> - WebGL-powered framework for the visualization of large datasets.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://loaders.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">loaders.gl</a> - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://nebula.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">nebula.gl</a> - 3D-enabled GeoJSON editing based on deck.gl and React.</li></ul></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/adding-custom-data";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/get-started/faq/index.html b/docs/get-started/faq/index.html
index eca6a178..88a98eea 100644
--- a/docs/get-started/faq/index.html
+++ b/docs/get-started/faq/index.html
@@ -86,7 +86,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/faq/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="FAQ" class="" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="faq" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#faq" aria-label="faq permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>FAQ</h1><h2 style="position:relative" id="enable-right-to-left-language-support" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#enable-right-to-left-language-support" aria-label="enable right to left language support permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Enable Right-to-Left Language Support</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.2.2-green" alt="Since v5.2.2" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>setRTLTextPlugin<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/faq/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="FAQ" class="" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="faq" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#faq" aria-label="faq permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>FAQ</h1><h2 style="position:relative" id="enable-right-to-left-language-support" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#enable-right-to-left-language-support" aria-label="enable right to left language support permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Enable Right-to-Left Language Support</h2><p class="typography__P-sc-1pmaksm-8 cncNYa"><img src="https://img.shields.io/badge/since-v5.2.2-green" alt="Since v5.2.2" class="typography__Img-sc-1pmaksm-15 hBeZII"/></p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>setRTLTextPlugin<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
 <span class="token function">setRTLTextPlugin</span><span class="token punctuation">(</span>
   <span class="token comment">// find out the latest version at https://www.npmjs.com/package/@mapbox/mapbox-gl-rtl-text</span>
@@ -109,4 +109,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
     pitch: 0,
     bearing: 0,
     ...
- */</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="docs/api-reference/web-mercator-viewport.md" class="typography__A-sc-1pmaksm-0 dvhuEd">Documentation of WebMercatorViewport</a></p><h2 style="position:relative" id="i-called-flytopanto-and-all-controls-went-out-of-sync" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#i-called-flytopanto-and-all-controls-went-out-of-sync" aria-label="i called flytopanto and all controls went out of sync permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I called flyTo/panTo and all controls went out of sync</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">You cannot manipulate the map camera via <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap()</code> and the native mapbox-gl API. To conform to the reactive programming paradigm, all camera changes should be driven by prop changes on the React component. Circumventing this will break the binding between React components and the underlying map instance.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Instead, use the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>&#x27;s transition props. See <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/advanced/viewport-transition">viewport transition</a> for examples.</p><h2 style="position:relative" id="mapbox-gl-draw-does-not-work-with-react-map-gl" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#mapbox-gl-draw-does-not-work-with-react-map-gl" aria-label="mapbox gl draw does not work with react map gl permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>mapbox-gl-draw does not work with react-map-gl</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Unfortunately, react-map-gl implements its own interative logic and disables the native event handling of mapbox-gl.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Short explanation: mapbox-gl is not designed to support React.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Long explanation: When using react-map-gl, we have two asynchronous rendering loops, React and Mapbox. Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">move</code> events are only fired after the camera changes and there is no way to control how and when the map rerenders. If we update React states upon the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">move</code> events, all React controls/overlays may only get updated one animation frame after the map rerender. You can find discussions <a href="https://github.com/visgl/react-map-gl/issues/569" class="typography__A-sc-1pmaksm-0 dvhuEd">here</a> and <a href="https://github.com/mapbox/mapbox-gl-js/issues/3746" class="typography__A-sc-1pmaksm-0 dvhuEd">here</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Because of this, any mapbox-gl control that listens to the native map events will not work. An equivelant to mapbox-gl-draw is <a href="https://www.npmjs.com/package/react-map-gl-draw" class="typography__A-sc-1pmaksm-0 dvhuEd">react-map-gl-draw</a>. You can find an example <a href="http://visgl.github.io/react-map-gl/examples/draw-polygon" class="typography__A-sc-1pmaksm-0 dvhuEd">here</a>.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/faq";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+ */</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="docs/api-reference/web-mercator-viewport.md" class="typography__A-sc-1pmaksm-0 dvhuEd">Documentation of WebMercatorViewport</a></p><h2 style="position:relative" id="i-called-flytopanto-and-all-controls-went-out-of-sync" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#i-called-flytopanto-and-all-controls-went-out-of-sync" aria-label="i called flytopanto and all controls went out of sync permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I called flyTo/panTo and all controls went out of sync</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">You cannot manipulate the map camera via <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMap()</code> and the native mapbox-gl API. To conform to the reactive programming paradigm, all camera changes should be driven by prop changes on the React component. Circumventing this will break the binding between React components and the underlying map instance.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Instead, use the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a>&#x27;s transition props. See <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/advanced/viewport-transition">viewport transition</a> for examples.</p><h2 style="position:relative" id="mapbox-gl-draw-does-not-work-with-react-map-gl" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#mapbox-gl-draw-does-not-work-with-react-map-gl" aria-label="mapbox gl draw does not work with react map gl permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>mapbox-gl-draw does not work with react-map-gl</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Unfortunately, react-map-gl implements its own interative logic and disables the native event handling of mapbox-gl.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Short explanation: mapbox-gl is not designed to support React.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Long explanation: When using react-map-gl, we have two asynchronous rendering loops, React and Mapbox. Mapbox&#x27;s <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">move</code> events are only fired after the camera changes and there is no way to control how and when the map rerenders. If we update React states upon the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">move</code> events, all React controls/overlays may only get updated one animation frame after the map rerender. You can find discussions <a href="https://github.com/visgl/react-map-gl/issues/569" class="typography__A-sc-1pmaksm-0 dvhuEd">here</a> and <a href="https://github.com/mapbox/mapbox-gl-js/issues/3746" class="typography__A-sc-1pmaksm-0 dvhuEd">here</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Because of this, any mapbox-gl control that listens to the native map events will not work. An equivelant to mapbox-gl-draw is <a href="https://www.npmjs.com/package/react-map-gl-draw" class="typography__A-sc-1pmaksm-0 dvhuEd">react-map-gl-draw</a>. You can find an example <a href="http://visgl.github.io/react-map-gl/examples/draw-polygon" class="typography__A-sc-1pmaksm-0 dvhuEd">here</a>.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/faq";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/get-started/get-started/index.html b/docs/get-started/get-started/index.html
index 9c714c6c..04cd63dc 100644
--- a/docs/get-started/get-started/index.html
+++ b/docs/get-started/get-started/index.html
@@ -86,7 +86,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/get-started/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Get Started" class="" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="get-started" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#get-started" aria-label="get started permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Get Started</h1><h2 style="position:relative" id="installation" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#installation" aria-label="installation permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Installation</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Using <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl</code> requires <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">node &gt;= v4</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react &gt;= 16.3</code>.</p><div class="gatsby-highlight" data-language="sh"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-sh"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-sh">npm install --save react-map-gl</code></pre></div><h2 style="position:relative" id="example" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#example" aria-label="example permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/get-started/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Get Started" class="" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="get-started" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#get-started" aria-label="get started permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Get Started</h1><h2 style="position:relative" id="installation" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#installation" aria-label="installation permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Installation</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Using <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl</code> requires <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">node &gt;= v4</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react &gt;= 16.3</code>.</p><div class="gatsby-highlight" data-language="sh"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-sh"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-sh">npm install --save react-map-gl</code></pre></div><h2 style="position:relative" id="example" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#example" aria-label="example permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 <span class="token keyword">import</span> ReactMapGL <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
 
@@ -128,4 +128,14 @@ module<span class="token punctuation">.</span>exports <span class="token operato
       <span class="token punctuation">]</span>
     <span class="token punctuation">}</span><span class="token punctuation">)</span>
   <span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/get-started";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">In Next.js:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token comment">// next.config.js</span>
+<span class="token keyword">const</span> nextConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token function-variable function">webpack</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    config<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias <span class="token operator">=</span> <span class="token punctuation">{</span>
+      <span class="token operator">...</span>config<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias<span class="token punctuation">,</span>
+      <span class="token string">&#x27;mapbox-gl&#x27;</span><span class="token operator">:</span> <span class="token string">&#x27;maplibre-gl&#x27;</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+  <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/get-started";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/get-started/mapbox-tokens/index.html b/docs/get-started/mapbox-tokens/index.html
index 3cc6cacc..c4efb8d5 100644
--- a/docs/get-started/mapbox-tokens/index.html
+++ b/docs/get-started/mapbox-tokens/index.html
@@ -88,7 +88,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/mapbox-tokens/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="About Mapbox Tokens" class="" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="about-mapbox-tokens" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#about-mapbox-tokens" aria-label="about mapbox tokens permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>About Mapbox Tokens</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl</code> itself is open source and free. It provides a React wrapper for <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapbox-gl</code> or derived projects.
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/mapbox-tokens/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="About Mapbox Tokens" class="" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="about-mapbox-tokens" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#about-mapbox-tokens" aria-label="about mapbox tokens permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>About Mapbox Tokens</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl</code> itself is open source and free. It provides a React wrapper for <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapbox-gl</code> or derived projects.
 Depending on which Mapbox GL JS version (or fork) you use, you may need a Mapbox token. You will need a Mapbox token if you use:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl@&gt;=6.0.0</code>, depending on <a href="https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0" class="typography__A-sc-1pmaksm-0 dvhuEd">mapbox-gl@&gt;=2.0.0</a> and above - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl@5.x</code>, depending on <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapbox-gl@1.x</code> - requires an access token only if you load the map styles and tiles from Mapbox&#x27;s data service. See &quot;Display Maps Without A Mapbox Token&quot; section below for using non-Mapbox tiles.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">To get a Mapbox token, you will need to register on <a href="https://www.mapbox.com" class="typography__A-sc-1pmaksm-0 dvhuEd">their website</a>. The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">There are several ways to provide a token to your app, as showcased in some of the example folders:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Provide a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapboxApiAccessToken</code> prop to the map component</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Set the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapboxAccessToken</code> environment variable (or set <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">REACT_APP_MAPBOX_ACCESS_TOKEN</code> if you are using Create React App)</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Provide it in the URL, e.g <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">?access_token=TOKEN</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Provide <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapboxApiUrl</code> prop to the map component to override the default mapbox API URL</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">But we would recommend using something like <a href="https://github.com/motdotla/dotenv" class="typography__A-sc-1pmaksm-0 dvhuEd">dotenv</a> and put your key in an untracked <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">.env</code> file, that will then expose it as a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">process.env</code> variable, with much less leaking risks.</p><h2 style="position:relative" id="display-maps-without-a-mapbox-token" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#display-maps-without-a-mapbox-token" aria-label="display maps without a mapbox token permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Display Maps Without A Mapbox Token</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using mapbox-gl v2.0 and above. The options are:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Stay on <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl@5.x</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapbox-gl@1.x</code>. react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Use a community fork of mapbox-gl, for example <a href="https://www.npmjs.com/package/maplibre-gl" class="typography__A-sc-1pmaksm-0 dvhuEd">maplibre-gl</a>. See <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/get-started#using-with-a-mapbox-gl-fork">using with a mapbox-gl fork</a> for how to configure your project.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">To use your own map service, you will need a custom Mapbox GL style that points to your own <a href="https://www.mapbox.com/mapbox-gl-js/style-spec/" class="typography__A-sc-1pmaksm-0 dvhuEd">vector tile source</a>, and pass it to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ReactMapGL</code> using the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapStyle</code> prop. This custom style must match the schema of your tile source.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Open source tile schemas include:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://tilezen.readthedocs.io/en/latest/layers/" class="typography__A-sc-1pmaksm-0 dvhuEd">TileZen schema</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://openmaptiles.org/schema/" class="typography__A-sc-1pmaksm-0 dvhuEd">OpenMapTiles schema </a></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Some useful resources for creating your own map service:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://www.mapbox.com/developers/vector-tiles/" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox Vector Tile Spec</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://github.com/mapbox/awesome-vector-tiles" class="typography__A-sc-1pmaksm-0 dvhuEd">Open source tools</a></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ReactMapGL</code> using the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transformRequest</code> prop.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">An example function:</p><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">const</span> <span class="token function-variable function">transformRequest</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> resourceType</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
         <span class="token keyword">if</span> <span class="token punctuation">(</span>resourceType <span class="token operator">===</span> <span class="token string">&#x27;Tile&#x27;</span> <span class="token operator">&amp;&amp;</span> url<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token string">&#x27;yourTileSource.com&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
             <span class="token keyword">return</span> <span class="token punctuation">{</span>
@@ -96,4 +96,4 @@ Depending on which Mapbox GL JS version (or fork) you use, you may need a Mapbox
                 headers<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">&#x27;Authorization&#x27;</span><span class="token operator">:</span> <span class="token string">&#x27;Bearer &#x27;</span> <span class="token operator">+</span> yourAuthToken <span class="token punctuation">}</span>
             <span class="token punctuation">}</span>
         <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span></code></pre></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/mapbox-tokens";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+    <span class="token punctuation">}</span></code></pre></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/mapbox-tokens";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/get-started/state-management/index.html b/docs/get-started/state-management/index.html
index 855a6e60..62084724 100644
--- a/docs/get-started/state-management/index.html
+++ b/docs/get-started/state-management/index.html
@@ -82,7 +82,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/state-management/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="State Management" class="" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="state-management" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#state-management" aria-label="state management permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>State Management</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> is designed to be a stateless component. Its appearance is entirely controlled by the properties that are passed in from its parent. In this architecture, transition works the same way as interaction: the component shall notify the application of &quot;user intent&quot; by calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> callback, but ultimately the application needs to decide what to do with it.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The most simple handling of this intent is to save it and pass it back to the component:</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ReactMapGL</span></span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/get-started/state-management/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 iZLwPt"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="State Management" class="" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="state-management" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#state-management" aria-label="state management permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>State Management</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> is designed to be a stateless component. Its appearance is entirely controlled by the properties that are passed in from its parent. In this architecture, transition works the same way as interaction: the component shall notify the application of &quot;user intent&quot; by calling the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> callback, but ultimately the application needs to decide what to do with it.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The most simple handling of this intent is to save it and pass it back to the component:</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ReactMapGL</span></span>
     <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">state</span><span class="token punctuation">.</span><span class="token attr-value">viewport</span><span class="token punctuation">}</span></span>
     <span class="token attr-name">onViewportChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">viewport</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>viewport<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">User interaction and transition will not work without a valid <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> handler.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The advantage of this practice is that it ensures a single source of truth regarding the viewport state (in the example above, saved in the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">state</code> of the container component). When you use this viewport state to direct the rendering of other components, it is guaranteed that they will always be synced with the map.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">You may apply additional constraints to the viewport:</p><div class="gatsby-highlight" data-language="jsx"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-jsx"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-jsx"><span class="token function-variable function">_onViewportChange</span> <span class="token operator">=</span> <span class="token parameter">viewport</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
     <span class="token keyword">if</span> <span class="token punctuation">(</span>viewport<span class="token punctuation">.</span>longitude <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@@ -107,4 +107,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
     <span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span></code></pre></div><h2 style="position:relative" id="using-with-redux" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#using-with-redux" aria-label="using with redux permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using with Redux</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">If you&#x27;re using redux, it is very easy to hook this component up to store state in the redux state tree.
 The simplest way is to take all properties passed to the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> function property and add them
-directly into the store. This state can then be passed back to the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&lt;ReactMapGL&gt;</code> component without any transformation.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/state-management";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+directly into the store. This state can then be passed back to the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&lt;ReactMapGL&gt;</code> component without any transformation.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/get-started/state-management";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 656a2438..e8110bbf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -90,5 +90,5 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Introduction" class="" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="introduction" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#introduction" aria-label="introduction permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Introduction</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl is a suite of <a href="http://facebook.github.io/react/" class="typography__A-sc-1pmaksm-0 dvhuEd">React</a> components for
-Mapbox GL JS-compatible libraries.</p><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Library</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><a href="https://github.com/MapLibre/maplibre-gl-js" class="typography__A-sc-1pmaksm-0 dvhuEd">MapLibre</a></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">An open fork of mapbox-gl v1, that can be used without a mapbox token.</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><a href="https://github.com/mapbox/mapbox-gl-js" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox GL JS v1</a></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">The previous version of mapbox GL JS. This version is free open source and can be used with non-mapbox basemaps without a mapbox token.</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><a href="https://github.com/mapbox/mapbox-gl-js" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox GL JS v2</a></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">The latest version of Mapbox GL JS. Note that version 2 is not free open source, and a mapbox token is required and billable events are generated even if you do not use mapbox hosted basemaps.</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Other mapbox-gl forks</td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">It may be possible to use react-map-gl with other mapbox forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted.</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">For basemaps:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">You can load map data from Mapbox&#x27;s own service.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">You can create and host your own map data using one of the many <a href="https://github.com/mapbox/awesome-vector-tiles" class="typography__A-sc-1pmaksm-0 dvhuEd">open source tools</a>.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">New to react-map-gl? <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/get-started">Get Started</a></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Want to contribute? See our <a href="/react-map-gl/docs/developer-guide.md" class="typography__A-sc-1pmaksm-0 dvhuEd">Developer Guide</a></p><h2 style="position:relative" id="design-philosophy" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#design-philosophy" aria-label="design philosophy permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Design Philosophy</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">At Uber, we make powerful web tools that contain maps. To manage the complexity of our applications, we fully embrace React and reactive programming.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The stock mapbox-gl APIs are <a href="https://en.wikipedia.org/wiki/Imperative_programming" class="typography__A-sc-1pmaksm-0 dvhuEd">imperative</a>. That is, you instruct the map to do something (for example, <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#flyto" class="typography__A-sc-1pmaksm-0 dvhuEd">map.flyTo</a>), and it will execute the command at its own pace.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">This does not scale when we have many components that need to synchronize with each other. One use case we have is to render two maps side by side, and when the user interacts with one, update both cameras. We draw UI on top of the map using React, pinned to a given geolocation. We also render visualization layers on top of the map using WebGL, most notably with <a href="https://deck.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">deck.gl</a>. The mapbox maps, the deck.gl canvas, and React controls&#x27; render cycles are all asynchronous. If we listen to the <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map.event:move" class="typography__A-sc-1pmaksm-0 dvhuEd">move</a> event in the map and tell the other components to update, the other components would always be one frame behind.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Ultimately, in the spirit of the <a href="https://en.wikipedia.org/wiki/Reactive_programming" class="typography__A-sc-1pmaksm-0 dvhuEd">reactive programming paradigm</a>, data always flows <strong>down</strong>. In a complex application, any user input or data fetch can affect the rendering of many components. We might store the <strong>source of truth</strong> in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl creates a fully reactive wrapper for mapbox-gl. The <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a> component is stateless. To move the map camera in anyway, the application must update the component&#x27;s props. The application can also be confident that the map&#x27;s camera would never deviate from the props that it&#x27;s assigned. At first glance, its API may seem verbose to those who come from the imperative world of mapbox-gl. However, it is essential for the correctness of large applications.</p><h2 style="position:relative" id="limitations" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#limitations" aria-label="limitations permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Limitations</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map. Because most of the functionality of Mapbox&#x27;s JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Mapbox GL JS&#x27;s Map class. You may access the native Mapbox API exposed by the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/static-map#getmap">getMap()</a> function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Examples of replacing common native API calls with their React equivalents can be found on the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/faq">FAQ</a> page.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Introduction" class="" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="introduction" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#introduction" aria-label="introduction permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Introduction</h1><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl is a suite of <a href="http://facebook.github.io/react/" class="typography__A-sc-1pmaksm-0 dvhuEd">React</a> components for
+Mapbox GL JS-compatible libraries.</p><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Library</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><a href="https://github.com/MapLibre/maplibre-gl-js" class="typography__A-sc-1pmaksm-0 dvhuEd">MapLibre</a></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">An open fork of mapbox-gl v1, that can be used without a mapbox token.</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><a href="https://github.com/mapbox/mapbox-gl-js" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox GL JS v1</a></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">The previous version of mapbox GL JS. This version is free open source and can be used with non-mapbox basemaps without a mapbox token.</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><a href="https://github.com/mapbox/mapbox-gl-js" class="typography__A-sc-1pmaksm-0 dvhuEd">Mapbox GL JS v2</a></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">The latest version of Mapbox GL JS. Note that version 2 is not free open source, and a mapbox token is required and billable events are generated even if you do not use mapbox hosted basemaps.</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Other mapbox-gl forks</td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">It may be possible to use react-map-gl with other mapbox forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted.</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">For basemaps:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">You can load map data from Mapbox&#x27;s own service.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">You can create and host your own map data using one of the many <a href="https://github.com/mapbox/awesome-vector-tiles" class="typography__A-sc-1pmaksm-0 dvhuEd">open source tools</a>.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">New to react-map-gl? <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/get-started">Get Started</a></p><p class="typography__P-sc-1pmaksm-8 cncNYa">Want to contribute? See our <a href="/react-map-gl/docs/developer-guide.md" class="typography__A-sc-1pmaksm-0 dvhuEd">Developer Guide</a></p><h2 style="position:relative" id="design-philosophy" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#design-philosophy" aria-label="design philosophy permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Design Philosophy</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">At Uber, we make powerful web tools that contain maps. To manage the complexity of our applications, we fully embrace React and reactive programming.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The stock mapbox-gl APIs are <a href="https://en.wikipedia.org/wiki/Imperative_programming" class="typography__A-sc-1pmaksm-0 dvhuEd">imperative</a>. That is, you instruct the map to do something (for example, <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#flyto" class="typography__A-sc-1pmaksm-0 dvhuEd">map.flyTo</a>), and it will execute the command at its own pace.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">This does not scale when we have many components that need to synchronize with each other. One use case we have is to render two maps side by side, and when the user interacts with one, update both cameras. We draw UI on top of the map using React, pinned to a given geolocation. We also render visualization layers on top of the map using WebGL, most notably with <a href="https://deck.gl" class="typography__A-sc-1pmaksm-0 dvhuEd">deck.gl</a>. The mapbox maps, the deck.gl canvas, and React controls&#x27; render cycles are all asynchronous. If we listen to the <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map.event:move" class="typography__A-sc-1pmaksm-0 dvhuEd">move</a> event in the map and tell the other components to update, the other components would always be one frame behind.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Ultimately, in the spirit of the <a href="https://en.wikipedia.org/wiki/Reactive_programming" class="typography__A-sc-1pmaksm-0 dvhuEd">reactive programming paradigm</a>, data always flows <strong>down</strong>. In a complex application, any user input or data fetch can affect the rendering of many components. We might store the <strong>source of truth</strong> in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl creates a fully reactive wrapper for mapbox-gl. The <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a> component is stateless. To move the map camera in anyway, the application must update the component&#x27;s props. The application can also be confident that the map&#x27;s camera would never deviate from the props that it&#x27;s assigned. At first glance, its API may seem verbose to those who come from the imperative world of mapbox-gl. However, it is essential for the correctness of large applications.</p><h2 style="position:relative" id="limitations" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#limitations" aria-label="limitations permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Limitations</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map. Because most of the functionality of Mapbox&#x27;s JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Mapbox GL JS&#x27;s Map class. You may access the native Mapbox API exposed by the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/static-map#getmap">getMap()</a> function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Examples of replacing common native API calls with their React equivalents can be found on the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/faq">FAQ</a> page.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/upgrade-guide/index.html b/docs/upgrade-guide/index.html
index 4377c4a9..46a8a271 100644
--- a/docs/upgrade-guide/index.html
+++ b/docs/upgrade-guide/index.html
@@ -98,7 +98,7 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/upgrade-guide/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Upgrade Guide" class="" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="upgrade-guide" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#upgrade-guide" aria-label="upgrade guide permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Guide</h1><h2 style="position:relative" id="upgrading-to-v53v61" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#upgrading-to-v53v61" aria-label="upgrading to v53v61 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrading to v5.3/v6.1</h2><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapContext</code> is now an official API. The experimental <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_MapContext</code> export will be removed in a future release.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-virtualized-auto-sizer</code> is no longer a dependency.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map#interaction-options">interaction options</a>:</li></ul><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">const</span> <span class="token constant">CONTROLLER_OPTS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/upgrade-guide/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Upgrade Guide" class="" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="upgrade-guide" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#upgrade-guide" aria-label="upgrade guide permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Guide</h1><h2 style="position:relative" id="upgrading-to-v53v61" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#upgrading-to-v53v61" aria-label="upgrading to v53v61 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrading to v5.3/v6.1</h2><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapContext</code> is now an official API. The experimental <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">_MapContext</code> export will be removed in a future release.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-virtualized-auto-sizer</code> is no longer a dependency.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map#interaction-options">interaction options</a>:</li></ul><div class="gatsby-highlight" data-language="js"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-js"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-js"><span class="token keyword">const</span> <span class="token constant">CONTROLLER_OPTS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
   dragPan<span class="token operator">:</span> <span class="token punctuation">{</span>inertia<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
   dragRotate<span class="token operator">:</span> <span class="token punctuation">{</span>inertia<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
   touchZoom<span class="token operator">:</span> <span class="token punctuation">{</span>inertia<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span>
@@ -119,4 +119,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
 
 <span class="token comment">// v0.6</span>
 <span class="token keyword">import</span> MapGL <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl&#x27;</span><span class="token punctuation">;</span>
-<span class="token keyword">import</span> SVGOverlay <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl/src/api-reference/svg-overlay&#x27;</span><span class="token punctuation">;</span><span class="token punctuation">.</span></code></pre></div><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Map State</strong> - The map state reported by <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChanged</code> will now contain additional state fields (tracking not only <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> needed for perspective mode, but also transient information about how the projection is being changed by the user).<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">This information must be passed back to the react-map-gl component in the next render.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">To simplify and future proof applications, it is recommended to simply save the entire <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapState</code> in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code>).</li></ul></li></ul></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/upgrade-guide";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+<span class="token keyword">import</span> SVGOverlay <span class="token keyword">from</span> <span class="token string">&#x27;react-map-gl/src/api-reference/svg-overlay&#x27;</span><span class="token punctuation">;</span><span class="token punctuation">.</span></code></pre></div><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Map State</strong> - The map state reported by <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChanged</code> will now contain additional state fields (tracking not only <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> needed for perspective mode, but also transient information about how the projection is being changed by the user).<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">This information must be passed back to the react-map-gl component in the next render.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">To simplify and future proof applications, it is recommended to simply save the entire <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapState</code> in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code>).</li></ul></li></ul></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/upgrade-guide";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/docs/whats-new/index.html b/docs/whats-new/index.html
index ee0fd73c..72184f59 100644
--- a/docs/whats-new/index.html
+++ b/docs/whats-new/index.html
@@ -90,6 +90,6 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/whats-new/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="What&#x27;s new" class="" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="whats-new" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#whats-new" aria-label="whats new permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What&#x27;s new</h1><h2 style="position:relative" id="react-map-gl-v53v61" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v53v61" aria-label="react map gl v53v61 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v5.3/v6.1</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Jan 27, 2020</p><h3 style="position:relative" id="highlights" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights" aria-label="highlights permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>TypeScript and Flow typings</strong> are now published with the library</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>More controller customizations.</strong> Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map#interaction-options">interaction options</a> for details.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">A new <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map#eventrecognizeroptions">eventRecognizerOptions</a> prop is added for fine-tuning the interaction experience.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">New component: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Promoted to official API: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Resolved React error over attempted state update during render</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">GeolocateControl</code> added supports for <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">showAccuracyCircle</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">All controls now support inline styling with a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> prop</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">All components and examples have been rewritten as functional components</li></ul><h2 style="position:relative" id="react-map-gl-v60" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v60" aria-label="react map gl v60 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v6.0</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Dec 16, 2020</p><h3 style="position:relative" id="whats-changed" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#whats-changed" aria-label="whats changed permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What&#x27;s Changed</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are <a href="https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0" class="typography__A-sc-1pmaksm-0 dvhuEd">important changes</a> to mapbox-gl&#x27;s license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do <strong>NOT</strong> upgrade to this version, and consider your options discussed in <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/mapbox-tokens">this document</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">See <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/upgrade-guide">upgrade guide</a> for a complete list of breaking changes.</p><h2 style="position:relative" id="react-map-gl-v52" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v52" aria-label="react map gl v52 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v5.2</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Jan 6, 2020</p><h3 style="position:relative" id="highlights-1" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-1" aria-label="highlights 1 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Components</strong>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/scale-control"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ScaleControl</code></a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>NavigationControl</strong>: new <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">label</code> prop</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>GeolocateControl</strong>: new <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">label</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onGeolocate</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">auto</code> props</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Export</strong>: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">WebMercatorViewport</code> is re-exported from the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewport-mercator-project</code> library for ease of use. It&#x27;s recommended to import it from <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl</code> instead to avoid future dependency change.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Example</strong>: <a href="https://visgl.github.io/react-map-gl/examples/clusters" class="typography__A-sc-1pmaksm-0 dvhuEd">Clusters</a></li></ul><h2 style="position:relative" id="react-map-gl-v51" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v51" aria-label="react map gl v51 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v5.1</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Oct 30, 2019</p><h3 style="position:relative" id="highlights-2" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-2" aria-label="highlights 2 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Components</strong>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/layer"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Layer</code></a> and <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/source"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Source</code></a> have been added to provide better React parity with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Mapbox GL JS</code> API.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Viewport transition</strong>: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code> can be set to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;auto&#x27;</code> when using <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/fly-to-interpolator"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">FlyToInterpolator</code></a>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Example</strong>: Add an <a href="https://visgl.github.io/react-map-gl/examples/draw-polygon" class="typography__A-sc-1pmaksm-0 dvhuEd">example</a> with drawing library <a href="https://github.com/uber/nebula.gl/tree/master/modules/react-map-gl-draw" class="typography__A-sc-1pmaksm-0 dvhuEd">react-map-gl-draw</a>.</li></ul><h2 style="position:relative" id="react-map-gl-v50" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v50" aria-label="react map gl v50 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v5.0</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: May 31, 2019</p><h3 style="position:relative" id="whats-changed-1" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#whats-changed-1" aria-label="whats changed 1 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What&#x27;s Changed</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">The only change between the 5.0 release and the latest 4.1 release is Mapbox GL JS v1.0. By using this version, you opt into Mapbox&#x27;s new pricing model, which bills per map load instead of map views. 5.0.x and 4.1.x will continue to update in parallel with otherwise identical features until November 2019 when Mapbox moves all users of 0.xx to a new pricing scheme. For more details, see mapbox&#x27;s <a href="https://github.com/mapbox/mapbox-gl-js/releases/tag/v1.0.0" class="typography__A-sc-1pmaksm-0 dvhuEd">changelog</a> and <a href="https://blog.mapbox.com/new-pricing-46b7c26166e7" class="typography__A-sc-1pmaksm-0 dvhuEd">blog post</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Alongside Mapbox GL JS&#x27;s new milestone, we have relaxed the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapbox-gl</code> dependency from locking minor release (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">~0.53.0</code>) to major release (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">^1.0.0</code>). This will allow developers to upgrade faster without waiting for a new release from react-map-gl.</p><h2 style="position:relative" id="react-map-gl-v41" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v41" aria-label="react map gl v41 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v4.1</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Mar 14, 2019</p><h3 style="position:relative" id="highlights-3" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-3" aria-label="highlights 3 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Components</strong>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/fullscreen-control"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">FullscreenControl</code></a>, <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/geolocate-control"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">GeolocateControl</code></a> have been added to provide better React parity with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Mapbox GL JS</code> API.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New callback props</strong> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> supports more callbacks:<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onNativeClick</code></li></ul></li></ul><h2 style="position:relative" id="react-map-gl-v40" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v40" aria-label="react map gl v40 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v4.0</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Nov 5, 2018</p><h3 style="position:relative" id="highlights-4" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-4" aria-label="highlights 4 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Relative dimensions</strong> Both <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code> now support CSS strings supplied to map <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> props. New <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onResize</code> callback is fired when the map resizes.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>React 16</strong> Upgrade to React 16.3 context and ref patterns</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Babel 7</strong> Upgrade build system to Babel 7, better support for tree-shaking</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Style diffing</strong> Now use Mapbox&#x27;s native style diffing. Immutable is no longer required.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Draggable Markers</strong> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Marker</code> component now supports a new prop <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">draggable</code>, along with callbacks <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragStart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDrag</code>, and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragEnd</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>3d Popups</strong> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Popup</code> component now supports a new prop <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">sortByDepth</code> to enable proper occlusion when multiple popups are used in a tilted map.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Interaction states</strong> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> is now called with richer descriptors of the user interaction, including <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isPanning</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isZooming</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isRotating</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Interactive layers</strong> Dropped the requirement for the deprecated <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactive</code> property on the layer styles. Use the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> prop to specify which layers are clickable.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New callback props</strong> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> supports more callbacks:<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDblClick</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseDown</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseUp</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchStart</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchEnd</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseEnter</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseLeave</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onWheel</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseOut</code></li></ul></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">See <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/upgrade-guide">upgrade guide</a> for breaking changes.</p><h2 style="position:relative" id="react-map-gl-v33" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v33" aria-label="react map gl v33 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v3.3</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: July, 2018</p><h3 style="position:relative" id="highlights-5" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-5" aria-label="highlights 5 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> Property</strong>: Makes it possible to specify all map state properties (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code>) as a single property.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewStateChange</code> callback</strong>: An alternative callback that matches the new <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> prop.</li></ul><h2 style="position:relative" id="react-map-gl-v32" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v32" aria-label="react map gl v32 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v3.2</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Realease date: January, 2018</p><h3 style="position:relative" id="highlights-6" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-6" aria-label="highlights 6 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Viewport transition</strong>: feature equivalent to Mapbox&#x27;s flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Better parity of Mapbox interaction</strong>: navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Support for Map Reuse (experimental)</strong>: A new property <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">reuseMaps</code> is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>mapbox-gl 0.42.2</strong></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New props</strong> of the InteractiveMap component:<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Map creation: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transformRequest</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">reuseMaps</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Interaction: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchZoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchRotate</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Transition: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterruption</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionStart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionInterrupt</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionEnd</code></li></ul></li></ul><h2 style="position:relative" id="react-map-gl-v31" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v31" aria-label="react map gl v31 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v3.1</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: October 19, 2017</p><h3 style="position:relative" id="highlights-7" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-7" aria-label="highlights 7 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Event handling</strong><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Support right mouse drag to rotate</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Support keyboard navigation</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Allow controls and overlays to block map interactions</li></ul></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>React 16</strong> - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&gt;=15.4.x</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>mapbox-gl v0.40.1</strong></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>No Token warning</strong>: react-map-gl now renders an HTML message if no mapbox token is supplied.</li></ul><h2 style="position:relative" id="react-map-gl-v30" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v30" aria-label="react map gl v30 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v3.0</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: July 27th, 2017</p><h3 style="position:relative" id="highlights-8" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-8" aria-label="highlights 8 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Latest Mapbox GL JS</strong>: Bumps <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Mapbox GL JS</code> to <a href="https://github.com/mapbox/mapbox-gl-js/releases" class="typography__A-sc-1pmaksm-0 dvhuEd">0.38</a>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Multi-Touch Support</strong>: Full support for multi-touch gestures such as pinch-to-zoom and rotate.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Components</strong>: The <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapGL</code> component has been split into <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/static-map"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code></a> and <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code></a> (the default). Also, <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/popup"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Popup</code></a>, <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/marker"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Marker</code></a>, <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/navigation-control"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">NavigationControl</code></a> have been added to provide better React parity with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Mapbox GL JS</code> API.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Improved Overlay Components</strong>: Supplying viewport props (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>) are no longer required if you render <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/svg-overlay"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">SVGOverlay</code></a>, <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/canvas-overlay"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">CanvasOverlay</code></a> or <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/html-overlay"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">HTMLOverlay</code></a> as a child of the map. Perspective mode is now supported in all overlays.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Props</strong>: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxPitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minPitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dragPan</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">doubleClickZoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchZoomRotate</code>,
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/whats-new/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="What&#x27;s new" class="" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Contributing to react-map-gl" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="default (InteractiveMap)" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="default (InteractiveMap)" href="/react-map-gl/docs/api-reference/interactive-map">default (InteractiveMap)</a></div></div></li></div><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="whats-new" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#whats-new" aria-label="whats new permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What&#x27;s new</h1><h2 style="position:relative" id="react-map-gl-v53v61" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v53v61" aria-label="react map gl v53v61 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v5.3/v6.1</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Jan 27, 2020</p><h3 style="position:relative" id="highlights" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights" aria-label="highlights permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>TypeScript and Flow typings</strong> are now published with the library</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>More controller customizations.</strong> Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map#interaction-options">interaction options</a> for details.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">A new <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map#eventrecognizeroptions">eventRecognizerOptions</a> prop is added for fine-tuning the interaction experience.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">New component: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Promoted to official API: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Resolved React error over attempted state update during render</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">GeolocateControl</code> added supports for <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">showAccuracyCircle</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">All controls now support inline styling with a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">style</code> prop</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">All components and examples have been rewritten as functional components</li></ul><h2 style="position:relative" id="react-map-gl-v60" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v60" aria-label="react map gl v60 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v6.0</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Dec 16, 2020</p><h3 style="position:relative" id="whats-changed" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#whats-changed" aria-label="whats changed permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What&#x27;s Changed</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are <a href="https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0" class="typography__A-sc-1pmaksm-0 dvhuEd">important changes</a> to mapbox-gl&#x27;s license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do <strong>NOT</strong> upgrade to this version, and consider your options discussed in <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/get-started/mapbox-tokens">this document</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">See <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/upgrade-guide">upgrade guide</a> for a complete list of breaking changes.</p><h2 style="position:relative" id="react-map-gl-v52" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v52" aria-label="react map gl v52 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v5.2</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Jan 6, 2020</p><h3 style="position:relative" id="highlights-1" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-1" aria-label="highlights 1 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Components</strong>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/scale-control"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ScaleControl</code></a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>NavigationControl</strong>: new <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">label</code> prop</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>GeolocateControl</strong>: new <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">label</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onGeolocate</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">auto</code> props</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Export</strong>: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">WebMercatorViewport</code> is re-exported from the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewport-mercator-project</code> library for ease of use. It&#x27;s recommended to import it from <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">react-map-gl</code> instead to avoid future dependency change.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Example</strong>: <a href="https://visgl.github.io/react-map-gl/examples/clusters" class="typography__A-sc-1pmaksm-0 dvhuEd">Clusters</a></li></ul><h2 style="position:relative" id="react-map-gl-v51" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v51" aria-label="react map gl v51 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v5.1</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Oct 30, 2019</p><h3 style="position:relative" id="highlights-2" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-2" aria-label="highlights 2 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Components</strong>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/layer"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Layer</code></a> and <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/source"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Source</code></a> have been added to provide better React parity with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Mapbox GL JS</code> API.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Viewport transition</strong>: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code> can be set to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&#x27;auto&#x27;</code> when using <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/fly-to-interpolator"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">FlyToInterpolator</code></a>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Example</strong>: Add an <a href="https://visgl.github.io/react-map-gl/examples/draw-polygon" class="typography__A-sc-1pmaksm-0 dvhuEd">example</a> with drawing library <a href="https://github.com/uber/nebula.gl/tree/master/modules/react-map-gl-draw" class="typography__A-sc-1pmaksm-0 dvhuEd">react-map-gl-draw</a>.</li></ul><h2 style="position:relative" id="react-map-gl-v50" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v50" aria-label="react map gl v50 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v5.0</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: May 31, 2019</p><h3 style="position:relative" id="whats-changed-1" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#whats-changed-1" aria-label="whats changed 1 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What&#x27;s Changed</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">The only change between the 5.0 release and the latest 4.1 release is Mapbox GL JS v1.0. By using this version, you opt into Mapbox&#x27;s new pricing model, which bills per map load instead of map views. 5.0.x and 4.1.x will continue to update in parallel with otherwise identical features until November 2019 when Mapbox moves all users of 0.xx to a new pricing scheme. For more details, see mapbox&#x27;s <a href="https://github.com/mapbox/mapbox-gl-js/releases/tag/v1.0.0" class="typography__A-sc-1pmaksm-0 dvhuEd">changelog</a> and <a href="https://blog.mapbox.com/new-pricing-46b7c26166e7" class="typography__A-sc-1pmaksm-0 dvhuEd">blog post</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Alongside Mapbox GL JS&#x27;s new milestone, we have relaxed the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapbox-gl</code> dependency from locking minor release (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">~0.53.0</code>) to major release (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">^1.0.0</code>). This will allow developers to upgrade faster without waiting for a new release from react-map-gl.</p><h2 style="position:relative" id="react-map-gl-v41" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v41" aria-label="react map gl v41 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v4.1</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Mar 14, 2019</p><h3 style="position:relative" id="highlights-3" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-3" aria-label="highlights 3 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Components</strong>: <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/fullscreen-control"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">FullscreenControl</code></a>, <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/geolocate-control"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">GeolocateControl</code></a> have been added to provide better React parity with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Mapbox GL JS</code> API.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New callback props</strong> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> supports more callbacks:<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onNativeClick</code></li></ul></li></ul><h2 style="position:relative" id="react-map-gl-v40" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v40" aria-label="react map gl v40 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v4.0</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: Nov 5, 2018</p><h3 style="position:relative" id="highlights-4" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-4" aria-label="highlights 4 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Relative dimensions</strong> Both <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code> now support CSS strings supplied to map <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> props. New <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onResize</code> callback is fired when the map resizes.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>React 16</strong> Upgrade to React 16.3 context and ref patterns</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Babel 7</strong> Upgrade build system to Babel 7, better support for tree-shaking</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Style diffing</strong> Now use Mapbox&#x27;s native style diffing. Immutable is no longer required.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Draggable Markers</strong> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Marker</code> component now supports a new prop <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">draggable</code>, along with callbacks <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragStart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDrag</code>, and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDragEnd</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>3d Popups</strong> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Popup</code> component now supports a new prop <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">sortByDepth</code> to enable proper occlusion when multiple popups are used in a tilted map.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Interaction states</strong> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code> is now called with richer descriptors of the user interaction, including <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isPanning</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isZooming</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isRotating</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Interactive layers</strong> Dropped the requirement for the deprecated <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactive</code> property on the layer styles. Use the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">interactiveLayerIds</code> prop to specify which layers are clickable.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New callback props</strong> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code> supports more callbacks:<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onDblClick</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseDown</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseMove</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseUp</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchStart</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchMove</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTouchEnd</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseEnter</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseLeave</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onWheel</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onMouseOut</code></li></ul></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">See <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/upgrade-guide">upgrade guide</a> for breaking changes.</p><h2 style="position:relative" id="react-map-gl-v33" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v33" aria-label="react map gl v33 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v3.3</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: July, 2018</p><h3 style="position:relative" id="highlights-5" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-5" aria-label="highlights 5 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> Property</strong>: Makes it possible to specify all map state properties (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code>) as a single property.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewStateChange</code> callback</strong>: An alternative callback that matches the new <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">viewState</code> prop.</li></ul><h2 style="position:relative" id="react-map-gl-v32" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v32" aria-label="react map gl v32 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v3.2</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Realease date: January, 2018</p><h3 style="position:relative" id="highlights-6" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-6" aria-label="highlights 6 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Viewport transition</strong>: feature equivalent to Mapbox&#x27;s flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Better parity of Mapbox interaction</strong>: navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Support for Map Reuse (experimental)</strong>: A new property <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">reuseMaps</code> is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>mapbox-gl 0.42.2</strong></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New props</strong> of the InteractiveMap component:<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Map creation: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transformRequest</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">reuseMaps</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Interaction: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchZoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchRotate</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Transition: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionDuration</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterpolator</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionEasing</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">transitionInterruption</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionStart</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionInterrupt</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onTransitionEnd</code></li></ul></li></ul><h2 style="position:relative" id="react-map-gl-v31" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v31" aria-label="react map gl v31 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v3.1</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: October 19, 2017</p><h3 style="position:relative" id="highlights-7" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-7" aria-label="highlights 7 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Event handling</strong><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Support right mouse drag to rotate</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Support keyboard navigation</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Allow controls and overlays to block map interactions</li></ul></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>React 16</strong> - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&gt;=15.4.x</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>mapbox-gl v0.40.1</strong></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>No Token warning</strong>: react-map-gl now renders an HTML message if no mapbox token is supplied.</li></ul><h2 style="position:relative" id="react-map-gl-v30" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v30" aria-label="react map gl v30 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v3.0</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Release date: July 27th, 2017</p><h3 style="position:relative" id="highlights-8" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-8" aria-label="highlights 8 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Latest Mapbox GL JS</strong>: Bumps <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Mapbox GL JS</code> to <a href="https://github.com/mapbox/mapbox-gl-js/releases" class="typography__A-sc-1pmaksm-0 dvhuEd">0.38</a>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Multi-Touch Support</strong>: Full support for multi-touch gestures such as pinch-to-zoom and rotate.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Components</strong>: The <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">MapGL</code> component has been split into <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/static-map"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code></a> and <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">InteractiveMap</code></a> (the default). Also, <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/popup"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Popup</code></a>, <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/marker"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Marker</code></a>, <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/navigation-control"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">NavigationControl</code></a> have been added to provide better React parity with the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Mapbox GL JS</code> API.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Improved Overlay Components</strong>: Supplying viewport props (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>) are no longer required if you render <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/svg-overlay"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">SVGOverlay</code></a>, <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/canvas-overlay"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">CanvasOverlay</code></a> or <a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/html-overlay"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">HTMLOverlay</code></a> as a child of the map. Perspective mode is now supported in all overlays.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New Props</strong>: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxPitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">minPitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dragPan</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">doubleClickZoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">touchZoomRotate</code>,
 <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">scrollZoom</code> are now provided to allow granular control of map interactivity.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Documentation</strong>: Significantly expanded and linked with our other geospatial frameworks.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Examples</strong>: New stand-alone examples to get you started instantly with the new features.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Event Handling</strong>: New event handling architecture that enables full customization of event handling (experimental).</li></ul><h3 style="position:relative" id="components" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#components" aria-label="components permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Components</h3><h4 style="position:relative" id="interactivemap-new-mapgl-replacement" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#interactivemap-new-mapgl-replacement" aria-label="interactivemap new mapgl replacement permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap (New, MapGL replacement)</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">This is a wrapper on top of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code>. It takes all the props of <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">StaticMap</code> and additional ones such as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onViewportChange</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">scrollZoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">dragRotate</code>, etc. to control interactivity on the map. See <a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/interactive-map.js" class="typography__A-sc-1pmaksm-0 dvhuEd">Source Code</a> for more information.</p><h4 style="position:relative" id="staticmap-new" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#staticmap-new" aria-label="staticmap new permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a class="typography__GatsbyA-sc-1pmaksm-1 dMoEUD" href="/react-map-gl/docs/api-reference/static-map">StaticMap (New)</a></h4><p class="typography__P-sc-1pmaksm-8 cncNYa">This is the React wrapper around <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Mapbox GL JS</code> and takes in viewport properties such as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>. Style diffing and updating logic also live here. See <a href="https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/static-map.js" class="typography__A-sc-1pmaksm-0 dvhuEd">Source Code</a> for more information.</p><h4 style="position:relative" id="overlays" class="typography__H4-sc-1pmaksm-5 dMIfYV"><a href="#overlays" aria-label="overlays permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Overlays</h4><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Three overlays (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ScatterplotOverlay</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">DraggablePointsOverlay</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">ChoroplethOverlay</code>), have been moved out of the library and are now only provided as examples.</li></ul><h3 style="position:relative" id="property-changes" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#property-changes" aria-label="property changes permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Property Changes</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Property Names</strong> - some prop names have been modernized, the old ones will still work for now with a warning.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Internal Properties</strong> such as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isHovering</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">isDragging</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">startDragLngLat</code> have been removed.
-These were never meant to be useful publicly and have caused confusions in the past.</li></ul><h3 style="position:relative" id="utilities" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#utilities" aria-label="utilities permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Utilities</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>fitBounds</strong>: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fitBounds</code> has been moved to another repository and has been rewritten to provide a more logical interface.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">For more information, see the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Upgrade Guide</code>.</p><h2 style="position:relative" id="react-map-gl-v20" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v20" aria-label="react map gl v20 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v2.0</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Date: Jan 17, 2017</p><h3 style="position:relative" id="highlights-9" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-9" aria-label="highlights 9 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Latest mapbox-gl</strong>: Bump <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapbox-gl</code> to v0.31.0</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>new maxZoom prop</strong> - Add <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code> prop and defaults to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">20</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New onLoad prop</strong> - Add <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onLoad</code> event handler</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>new onClick prop</strong> - Add <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> prop handler (#140)</li></ul><h2 style="position:relative" id="react-map-gl-v10" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v10" aria-label="react map gl v10 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v1.0</h2><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Perspective Mode</strong> - Now supports <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code> properties, per mapbox-gl api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Support for ES6 imports</strong> - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) previously had to be imported via their relative source paths can now be imported directly using `import {SVGOverlay} from &#x27;react-map-gl&#x27;.</li></ul><h2 style="position:relative" id="react-map-gl-v06" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v06" aria-label="react map gl v06 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v0.6</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Initial public version</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/whats-new";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+These were never meant to be useful publicly and have caused confusions in the past.</li></ul><h3 style="position:relative" id="utilities" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#utilities" aria-label="utilities permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Utilities</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>fitBounds</strong>: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fitBounds</code> has been moved to another repository and has been rewritten to provide a more logical interface.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">For more information, see the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Upgrade Guide</code>.</p><h2 style="position:relative" id="react-map-gl-v20" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v20" aria-label="react map gl v20 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v2.0</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Date: Jan 17, 2017</p><h3 style="position:relative" id="highlights-9" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#highlights-9" aria-label="highlights 9 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Highlights</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Latest mapbox-gl</strong>: Bump <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">mapbox-gl</code> to v0.31.0</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>new maxZoom prop</strong> - Add <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">maxZoom</code> prop and defaults to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">20</code></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>New onLoad prop</strong> - Add <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onLoad</code> event handler</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>new onClick prop</strong> - Add <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">onClick</code> prop handler (#140)</li></ul><h2 style="position:relative" id="react-map-gl-v10" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v10" aria-label="react map gl v10 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v1.0</h2><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Perspective Mode</strong> - Now supports <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code> properties, per mapbox-gl api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><strong>Support for ES6 imports</strong> - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) previously had to be imported via their relative source paths can now be imported directly using `import {SVGOverlay} from &#x27;react-map-gl&#x27;.</li></ul><h2 style="position:relative" id="react-map-gl-v06" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#react-map-gl-v06" aria-label="react map gl v06 permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>react-map-gl v0.6</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Initial public version</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/whats-new";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/clusters/index.html b/examples/clusters/index.html
index 1bc813ea..092a2190 100644
--- a/examples/clusters/index.html
+++ b/examples/clusters/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/clusters/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Clusters" class="" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Create and Style Clusters</h3><p>Use Mapbox GL JS&#x27; built-in functions to visualize points as clusters.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/clusters" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/clusters";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/clusters/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Clusters" class="" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Create and Style Clusters</h3><p>Use Mapbox GL JS&#x27; built-in functions to visualize points as clusters.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/clusters" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/clusters";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/controls/index.html b/examples/controls/index.html
index 9eabc2a2..ecfd55e8 100644
--- a/examples/controls/index.html
+++ b/examples/controls/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/controls/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Markers &amp; Popups" class="" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Marker, Popup, NavigationControl and FullscreenControl </h3><p>Map showing top 20 most populated cities of the United States. Click on a marker to learn more.</p><p>Data source:<!-- --> <a href="https://en.wikipedia.org/wiki/List_of_United_States_cities_by_population">Wikipedia</a></p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/controls" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/controls";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/controls/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Markers &amp; Popups" class="" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Marker, Popup, NavigationControl and FullscreenControl </h3><p>Map showing top 20 most populated cities of the United States. Click on a marker to learn more.</p><p>Data source:<!-- --> <a href="https://en.wikipedia.org/wiki/List_of_United_States_cities_by_population">Wikipedia</a></p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/controls" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/controls";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/custom-cursor/index.html b/examples/custom-cursor/index.html
index 24a1fdb5..007e270b 100644
--- a/examples/custom-cursor/index.html
+++ b/examples/custom-cursor/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/custom-cursor/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Custom Cursor" class="" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:default"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Custom Cursor</h3><p>Customize the cursor based on interactivity.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/custom-cursor" target="_new">View Code ↗</a></div><hr/><p>Clickable layers</p><div class="input"><label>parks</label><input type="checkbox" checked=""/></div><div class="input"><label>buildings</label><input type="checkbox" checked=""/></div><div class="input"><label>roads</label><input type="checkbox" checked=""/></div><div class="input"><label>labels</label><input type="checkbox" checked=""/></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/custom-cursor";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js" async=""></script><script src="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/custom-cursor/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Custom Cursor" class="" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:default"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Custom Cursor</h3><p>Customize the cursor based on interactivity.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/custom-cursor" target="_new">View Code ↗</a></div><hr/><p>Clickable layers</p><div class="input"><label>parks</label><input type="checkbox" checked=""/></div><div class="input"><label>buildings</label><input type="checkbox" checked=""/></div><div class="input"><label>roads</label><input type="checkbox" checked=""/></div><div class="input"><label>labels</label><input type="checkbox" checked=""/></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/custom-cursor";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js" async=""></script><script src="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/draggable-markers/index.html b/examples/draggable-markers/index.html
index 3ec57adb..560489f7 100644
--- a/examples/draggable-markers/index.html
+++ b/examples/draggable-markers/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/draggable-markers/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Draggable Marker" class="" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Draggable Marker</h3><p>Try dragging the marker to another location.</p><div><div><strong>onDragStart<!-- -->:</strong> <em>null</em></div><div><strong>onDrag<!-- -->:</strong> <em>null</em></div><div><strong>onDragEnd<!-- -->:</strong> <em>null</em></div></div><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/draggable-markers" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/draggable-markers";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/draggable-markers/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Draggable Marker" class="" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Draggable Marker</h3><p>Try dragging the marker to another location.</p><div><div><strong>onDragStart<!-- -->:</strong> <em>null</em></div><div><strong>onDrag<!-- -->:</strong> <em>null</em></div><div><strong>onDragEnd<!-- -->:</strong> <em>null</em></div></div><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/draggable-markers" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/draggable-markers";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/draw-polygon/index.html b/examples/draw-polygon/index.html
index 0bad852a..47a3a736 100644
--- a/examples/draw-polygon/index.html
+++ b/examples/draw-polygon/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/dd81a582-73554666236247b54dbf.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/draw-polygon/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="DrawPolygon" class="" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Draw Polygon</h3><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/draw-polygon" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/draw-polygon";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js" async=""></script><script src="/react-map-gl/537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/dd81a582-73554666236247b54dbf.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/dd81a582-73554666236247b54dbf.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/draw-polygon/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="DrawPolygon" class="" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Draw Polygon</h3><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/draw-polygon" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/draw-polygon";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js" async=""></script><script src="/react-map-gl/537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/dd81a582-73554666236247b54dbf.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/filter/index.html b/examples/filter/index.html
index d1a7cfdf..19a52e42 100644
--- a/examples/filter/index.html
+++ b/examples/filter/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/filter/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Highlight By Filter" class="" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Highlight Features Containing Similar Data</h3><p>Hover over counties to highlight counties that share the same name.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/filter" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/filter";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/filter/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Highlight By Filter" class="" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Highlight Features Containing Similar Data</h3><p>Hover over counties to highlight counties that share the same name.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/filter" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/filter";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/geojson-animation/index.html b/examples/geojson-animation/index.html
index fabf1501..980d9af9 100644
--- a/examples/geojson-animation/index.html
+++ b/examples/geojson-animation/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/geojson-animation/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="GeoJSON Animation" class="" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Animated GeoJSON</h3><p>Render animation by updating GeoJSON data source.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/geojson-animation" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/geojson-animation";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/geojson-animation/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="GeoJSON Animation" class="" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Animated GeoJSON</h3><p>Render animation by updating GeoJSON data source.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/geojson-animation" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/geojson-animation";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/geojson/index.html b/examples/geojson/index.html
index ac9c6c97..cbc7be19 100644
--- a/examples/geojson/index.html
+++ b/examples/geojson/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/geojson/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="GeoJSON" class="" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Interactive GeoJSON</h3><p>Map showing median household income by state in year <b>2015</b>. Hover over a state to see details.</p><p>Data source: <a href="www.census.gov">US Census Bureau</a></p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/geojson" target="_new">View Code ↗</a></div><hr/><div class="input"><label>Year</label><input type="range" value="2015" min="1995" max="2015" step="1"/></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/geojson";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/geojson/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="GeoJSON" class="" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Interactive GeoJSON</h3><p>Map showing median household income by state in year <b>2015</b>. Hover over a state to see details.</p><p>Data source: <a href="www.census.gov">US Census Bureau</a></p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/geojson" target="_new">View Code ↗</a></div><hr/><div class="input"><label>Year</label><input type="range" value="2015" min="1995" max="2015" step="1"/></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/geojson";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/heatmap/index.html b/examples/heatmap/index.html
index 45946ae4..63589a2a 100644
--- a/examples/heatmap/index.html
+++ b/examples/heatmap/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/heatmap/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Heatmap" class="" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Heatmap</h3><p>Map showing earthquakes<br/>from <b>1/1/1970</b> to <b>1/1/1970</b>.</p><hr/><div class="input"><label>All Days</label><input type="checkbox" name="allday" checked=""/></div><div class="input disabled"><label>Each Day: <!-- -->1/1/1970</label><input type="range" disabled="" min="1" max="0" value="0" step="1"/></div><hr/><p>Data source:<!-- --> <a href="https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson">earthquakes.geojson</a></p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/heatmap" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/heatmap";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/heatmap/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Heatmap" class="" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Heatmap</h3><p>Map showing earthquakes<br/>from <b>1/1/1970</b> to <b>1/1/1970</b>.</p><hr/><div class="input"><label>All Days</label><input type="checkbox" name="allday" checked=""/></div><div class="input disabled"><label>Each Day: <!-- -->1/1/1970</label><input type="range" disabled="" min="1" max="0" value="0" step="1"/></div><hr/><p>Data source:<!-- --> <a href="https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson">earthquakes.geojson</a></p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/heatmap" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/heatmap";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/index.html b/examples/index.html
index 38b71435..8b94fcca 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -76,4 +76,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><main class="example__MainExamples-h9izwc-2 fdIXrQ"><main class="example__ExamplesGroup-h9izwc-3 eApiBi"><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/layers"><img width="100%" src="/react-map-gl/static/9e84a694c23794ae1ae03fc88c038550/7f7a0/example-layers.jpg" alt="Dynamic Styling"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Dynamic Styling</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/controls"><img width="100%" src="/react-map-gl/static/206d375b86e070b03648931e49bcd68b/7f7a0/example-controls.jpg" alt="Markers &amp; Popups"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Markers &amp; Popups</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/custom-cursor"><img width="100%" src="/react-map-gl/static/2c2e3824003c5b0c4d569d9c8c84b7a5/7f7a0/example-custom-cursor.jpg" alt="Custom Cursor"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Custom Cursor</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/draggable-markers"><img width="100%" src="/react-map-gl/static/09a13d7313169bf738c0522466443c95/7f7a0/example-draggable-markers.jpg" alt="Draggable Marker"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Draggable Marker</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/geojson"><img width="100%" src="/react-map-gl/static/13f0a23dcc3137337f3cb4720dfb0fd9/7f7a0/example-geojson.jpg" alt="GeoJSON"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>GeoJSON</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/geojson-animation"><img width="100%" src="/react-map-gl/static/c40e7f20a6776fb6c741e19996492bfa/7f7a0/example-geojson-animation.jpg" alt="GeoJSON Animation"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>GeoJSON Animation</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/clusters"><img width="100%" src="/react-map-gl/static/c0bfc81d1642c8ec17fa1167bd568e1d/7f7a0/example-clusters.jpg" alt="Clusters"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Clusters</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/locate-user"><img width="100%" src="/react-map-gl/static/47789e7197a70c253f0a179dbb192027/7f7a0/example-locate-user.jpg" alt="Locate User"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Locate User</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/interaction"><img width="100%" src="/react-map-gl/static/d90050daabc660dbd8e765515d39551f/7f7a0/example-interaction.jpg" alt="Limit Map Interaction"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Limit Map Interaction</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/viewport-animation"><img width="100%" src="/react-map-gl/static/fabb3710ac60a2979a4a1b01f4318ac7/7f7a0/example-viewport-animation.jpg" alt="Camera Transition"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Camera Transition</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/filter"><img width="100%" src="/react-map-gl/static/575ed8c3942901f5d5a0d4928c86f22a/7f7a0/example-filter.jpg" alt="Highlight By Filter"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Highlight By Filter</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/zoom-to-bounds"><img width="100%" src="/react-map-gl/static/7cfec70f9e69dbc9406cce85e4a69ab9/7f7a0/example-zoom-to-bounds.jpg" alt="Zoom To Bounds"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Zoom To Bounds</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/heatmap"><img width="100%" src="/react-map-gl/static/35ee1f7a427df4de95b2c1ac6dc5a52b/7f7a0/example-heatmap.jpg" alt="Heatmap"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Heatmap</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/draw-polygon"><img width="100%" src="/react-map-gl/static/5afd016451de1be147fd36d2f184dc4f/7f7a0/example-draw-polygon.jpg" alt="DrawPolygon"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>DrawPolygon</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/terrain"><img width="100%" src="/react-map-gl/static/4f856c2ab53be4fbe80a4ecaf2a3457b/7f7a0/example-terrain.jpg" alt="Terrain"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Terrain</span></div></a></main></main></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><main class="example__MainExamples-h9izwc-2 fdIXrQ"><main class="example__ExamplesGroup-h9izwc-3 eApiBi"><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/layers"><img width="100%" src="/react-map-gl/static/9e84a694c23794ae1ae03fc88c038550/7f7a0/example-layers.jpg" alt="Dynamic Styling"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Dynamic Styling</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/controls"><img width="100%" src="/react-map-gl/static/206d375b86e070b03648931e49bcd68b/7f7a0/example-controls.jpg" alt="Markers &amp; Popups"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Markers &amp; Popups</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/custom-cursor"><img width="100%" src="/react-map-gl/static/2c2e3824003c5b0c4d569d9c8c84b7a5/7f7a0/example-custom-cursor.jpg" alt="Custom Cursor"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Custom Cursor</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/draggable-markers"><img width="100%" src="/react-map-gl/static/09a13d7313169bf738c0522466443c95/7f7a0/example-draggable-markers.jpg" alt="Draggable Marker"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Draggable Marker</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/geojson"><img width="100%" src="/react-map-gl/static/13f0a23dcc3137337f3cb4720dfb0fd9/7f7a0/example-geojson.jpg" alt="GeoJSON"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>GeoJSON</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/geojson-animation"><img width="100%" src="/react-map-gl/static/c40e7f20a6776fb6c741e19996492bfa/7f7a0/example-geojson-animation.jpg" alt="GeoJSON Animation"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>GeoJSON Animation</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/clusters"><img width="100%" src="/react-map-gl/static/c0bfc81d1642c8ec17fa1167bd568e1d/7f7a0/example-clusters.jpg" alt="Clusters"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Clusters</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/locate-user"><img width="100%" src="/react-map-gl/static/47789e7197a70c253f0a179dbb192027/7f7a0/example-locate-user.jpg" alt="Locate User"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Locate User</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/interaction"><img width="100%" src="/react-map-gl/static/d90050daabc660dbd8e765515d39551f/7f7a0/example-interaction.jpg" alt="Limit Map Interaction"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Limit Map Interaction</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/viewport-animation"><img width="100%" src="/react-map-gl/static/fabb3710ac60a2979a4a1b01f4318ac7/7f7a0/example-viewport-animation.jpg" alt="Camera Transition"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Camera Transition</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/filter"><img width="100%" src="/react-map-gl/static/575ed8c3942901f5d5a0d4928c86f22a/7f7a0/example-filter.jpg" alt="Highlight By Filter"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Highlight By Filter</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/zoom-to-bounds"><img width="100%" src="/react-map-gl/static/7cfec70f9e69dbc9406cce85e4a69ab9/7f7a0/example-zoom-to-bounds.jpg" alt="Zoom To Bounds"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Zoom To Bounds</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/heatmap"><img width="100%" src="/react-map-gl/static/35ee1f7a427df4de95b2c1ac6dc5a52b/7f7a0/example-heatmap.jpg" alt="Heatmap"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Heatmap</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/draw-polygon"><img width="100%" src="/react-map-gl/static/5afd016451de1be147fd36d2f184dc4f/7f7a0/example-draw-polygon.jpg" alt="DrawPolygon"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>DrawPolygon</span></div></a><a class="example__ExampleCard-h9izwc-4 eRQKwt" href="/react-map-gl/examples/terrain"><img width="100%" src="/react-map-gl/static/4f856c2ab53be4fbe80a4ecaf2a3457b/7f7a0/example-terrain.jpg" alt="Terrain"/><div class="example__ExampleTitle-h9izwc-5 elEWCU"><span>Terrain</span></div></a></main></main></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/interaction/index.html b/examples/interaction/index.html
index 5ee47f85..738d7223 100644
--- a/examples/interaction/index.html
+++ b/examples/interaction/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/interaction/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Limit Map Interaction" class="" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Limit Map Interaction</h3><p>Turn interactive features off/on.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/interaction" target="_new">View Code ↗</a></div><hr/><div class="input"><label>drag Pan</label><input type="checkbox" checked=""/></div><div class="input"><label>drag Rotate</label><input type="checkbox" checked=""/></div><div class="input"><label>scroll Zoom</label><input type="checkbox" checked=""/></div><div class="input"><label>touch Zoom</label><input type="checkbox" checked=""/></div><div class="input"><label>touch Rotate</label><input type="checkbox" checked=""/></div><div class="input"><label>keyboard</label><input type="checkbox" checked=""/></div><div class="input"><label>double Click Zoom</label><input type="checkbox" checked=""/></div><div class="input"><label>min Zoom</label><input type="number" value="0"/></div><div class="input"><label>max Zoom</label><input type="number" value="20"/></div><div class="input"><label>min Pitch</label><input type="number" value="0"/></div><div class="input"><label>max Pitch</label><input type="number" value="85"/></div><hr/><div><div><label>Dragging</label><span></span></div><div><label>Transition</label><span></span></div><div><label>Panning</label><span></span></div><div><label>Rotating</label><span></span></div><div><label>Zooming</label><span></span></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/interaction";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/interaction/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Limit Map Interaction" class="" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Limit Map Interaction</h3><p>Turn interactive features off/on.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/interaction" target="_new">View Code ↗</a></div><hr/><div class="input"><label>drag Pan</label><input type="checkbox" checked=""/></div><div class="input"><label>drag Rotate</label><input type="checkbox" checked=""/></div><div class="input"><label>scroll Zoom</label><input type="checkbox" checked=""/></div><div class="input"><label>touch Zoom</label><input type="checkbox" checked=""/></div><div class="input"><label>touch Rotate</label><input type="checkbox" checked=""/></div><div class="input"><label>keyboard</label><input type="checkbox" checked=""/></div><div class="input"><label>double Click Zoom</label><input type="checkbox" checked=""/></div><div class="input"><label>min Zoom</label><input type="number" value="0"/></div><div class="input"><label>max Zoom</label><input type="number" value="20"/></div><div class="input"><label>min Pitch</label><input type="number" value="0"/></div><div class="input"><label>max Pitch</label><input type="number" value="85"/></div><hr/><div><div><label>Dragging</label><span></span></div><div><label>Transition</label><span></span></div><div><label>Panning</label><span></span></div><div><label>Rotating</label><span></span></div><div><label>Zooming</label><span></span></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/interaction";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/layers/index.html b/examples/layers/index.html
index e5c3163f..c51548ad 100644
--- a/examples/layers/index.html
+++ b/examples/layers/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-layers-src-app-js-3a34e0db161255746f46.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/layers/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Dynamic Styling" class="" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Dynamic Styling</h3><p>Dynamically show/hide map layers and change color with Immutable map style.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/layers" target="_new">View Code ↗</a></div><hr/><div class="input"><label>labels</label><input type="checkbox" checked=""/><input type="color" value="#78888a"/></div><div class="input"><label>roads</label><input type="checkbox" checked=""/><input type="color" value="#ffffff"/></div><div class="input"><label>buildings</label><input type="checkbox" checked=""/><input type="color" value="#c0c0c8"/></div><div class="input"><label>parks</label><input type="checkbox" checked=""/><input type="color" value="#E6EAE9"/></div><div class="input"><label>water</label><input type="checkbox" checked=""/><input type="color" value="#DBE2E6"/></div><div class="input"><label>background</label><input type="checkbox" checked=""/><input type="color" value="#EBF0F0"/></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/layers";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-layers-src-app-js-3a34e0db161255746f46.js" async=""></script><script src="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-layers-src-app-js-3a34e0db161255746f46.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/layers/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Dynamic Styling" class="" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Dynamic Styling</h3><p>Dynamically show/hide map layers and change color with Immutable map style.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/layers" target="_new">View Code ↗</a></div><hr/><div class="input"><label>labels</label><input type="checkbox" checked=""/><input type="color" value="#78888a"/></div><div class="input"><label>roads</label><input type="checkbox" checked=""/><input type="color" value="#ffffff"/></div><div class="input"><label>buildings</label><input type="checkbox" checked=""/><input type="color" value="#c0c0c8"/></div><div class="input"><label>parks</label><input type="checkbox" checked=""/><input type="color" value="#E6EAE9"/></div><div class="input"><label>water</label><input type="checkbox" checked=""/><input type="color" value="#DBE2E6"/></div><div class="input"><label>background</label><input type="checkbox" checked=""/><input type="color" value="#EBF0F0"/></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/layers";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-layers-src-app-js-3a34e0db161255746f46.js" async=""></script><script src="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/locate-user/index.html b/examples/locate-user/index.html
index 68259078..526db73a 100644
--- a/examples/locate-user/index.html
+++ b/examples/locate-user/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/locate-user/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Locate User" class="" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/locate-user";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/locate-user/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Locate User" class="" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/locate-user";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/terrain/index.html b/examples/terrain/index.html
index 013550da..ad44b835 100644
--- a/examples/terrain/index.html
+++ b/examples/terrain/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/terrain/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Terrain" class="" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>3D Terrain</h3><p>Add 3D terrain and sky to a map.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/terrain" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/terrain";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/terrain/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Terrain" class="" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>3D Terrain</h3><p>Add 3D terrain and sky to a map.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/terrain" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/terrain";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/viewport-animation/index.html b/examples/viewport-animation/index.html
index ddf731d6..4eb3434f 100644
--- a/examples/viewport-animation/index.html
+++ b/examples/viewport-animation/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/viewport-animation/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Camera Transition" class="" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Camera Transition</h3><p>Smooth animate of the viewport.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/viewport-animation" target="_new">View Code ↗</a></div><hr/><div class="input"><input type="radio" name="city" id="city-0"/><label for="city-0">Los Angeles</label></div><div class="input"><input type="radio" name="city" id="city-1"/><label for="city-1">San Diego</label></div><div class="input"><input type="radio" name="city" id="city-2"/><label for="city-2">San Jose</label></div><div class="input"><input type="radio" name="city" id="city-3" checked=""/><label for="city-3">San Francisco</label></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/viewport-animation";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/viewport-animation/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Camera Transition" class="" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Camera Transition</h3><p>Smooth animate of the viewport.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/viewport-animation" target="_new">View Code ↗</a></div><hr/><div class="input"><input type="radio" name="city" id="city-0"/><label for="city-0">Los Angeles</label></div><div class="input"><input type="radio" name="city" id="city-1"/><label for="city-1">San Diego</label></div><div class="input"><input type="radio" name="city" id="city-2"/><label for="city-2">San Jose</label></div><div class="input"><input type="radio" name="city" id="city-3" checked=""/><label for="city-3">San Francisco</label></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/viewport-animation";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/examples/zoom-to-bounds/index.html b/examples/zoom-to-bounds/index.html
index 4f8d54cd..4a9e40eb 100644
--- a/examples/zoom-to-bounds/index.html
+++ b/examples/zoom-to-bounds/index.html
@@ -68,4 +68,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js"/><link as="script" rel="preload" href="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js"/><link as="script" rel="preload" href="/react-map-gl/537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/zoom-to-bounds/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Zoom To Bounds" class="" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Zoom to Bounding Box</h3><p>Click on a San Fransisco Neighborhood to zoom in.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/zoom-to-bounds" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/zoom-to-bounds";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js" async=""></script><script src="/react-map-gl/537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js" async=""></script><script src="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js"/><link as="script" rel="preload" href="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js"/><link as="script" rel="preload" href="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js"/><link as="script" rel="preload" href="/react-map-gl/537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/zoom-to-bounds/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 jlfDtm"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Locate User" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Locate User" href="/react-map-gl/examples/locate-user">Locate User</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Limit Map Interaction" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Zoom To Bounds" class="" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="DrawPolygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="DrawPolygon" href="/react-map-gl/examples/draw-polygon">DrawPolygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%;cursor:grab"><div style="position:relative;width:100%;height:100%"><div style="position:absolute;width:100%;height:100%;overflow:hidden;visibility:inherit" class=""></div></div></div><div class="control-panel"><h3>Zoom to Bounding Box</h3><p>Click on a San Fransisco Neighborhood to zoom in.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/zoom-to-bounds" target="_new">View Code ↗</a></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/examples/zoom-to-bounds";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js" async=""></script><script src="/react-map-gl/537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js" async=""></script><script src="/react-map-gl/393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js" async=""></script><script src="/react-map-gl/73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js" async=""></script><script src="/react-map-gl/fe95a7ce-92300a72d6d7e297fd55.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 6002969c..00832868 100644
--- a/index.html
+++ b/index.html
@@ -84,4 +84,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---src-home-js-d9cb8e2a1f1b43e76cef.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/index/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="body__BodyContainerFull-lvm4v2-0 jcCBQi"><main><section class="home__Banner-f9hbqs-0 cWWlRG"><div class="home__HeroExampleContainer-f9hbqs-3 dyloyq"><div class="home__HeroExample-sc-1jcekwk-1 duddkX"></div></div><div class="home__Container-f9hbqs-1 home__BannerContainer-f9hbqs-2 byxZlM"><h1 class="home__ProjectName-f9hbqs-5 hUDXst">react-map-gl</h1><p>React wrapper for Mapbox GL JS</p><a colortheme="dark" class="home__GetStartedLink-f9hbqs-6 bMqhOg" href="/react-map-gl/docs/get-started/get-started">GET STARTED</a></div></section><div class="home__ContentContainer-sc-1jcekwk-2 eTuzrY"><h2>react-map-gl makes using Mapbox GL JS in React applications easy.</h2><h3><img src="images/icon-react.svg" class="home__Icon-sc-1jcekwk-0 kUNTgu"/>React Integration</h3><p>Integration on browser and Node.js, exposing the full power of mapbox-gl.</p><h3><img src="images/icon-layers.svg" class="home__Icon-sc-1jcekwk-0 kUNTgu"/>Component Library</h3><p>react-map-gl comes with additional React components that synchronize with the map camera system. Use one of the supported overlays to visualize data, or build your own.</p><h3><img src="images/icon-high-precision.svg" class="home__Icon-sc-1jcekwk-0 kUNTgu"/>Part of vis.gl&#x27;s Framework Suite</h3><p>Use together with e.g. <a href="https://deck.gl/" target="_blank" rel="noopener noreferrer">deck.gl</a> to render performant and compelling 2D and 3D WebGL visualizations on top of your Mapbox GL JS based maps.</p></div><section class="home__Section-f9hbqs-4 iZhuWO"><div class="home__Container-f9hbqs-1 eCgMCt"><div><h2 style="text-align:center">Contributors</h2><div class="github-contributors__ContribContainer-sc-12w0yk9-0 eTZWpm"></div></div></div></section><footer class="home__Footer-f9hbqs-7 SJzLG"><div class="home__Container-f9hbqs-1 eCgMCt"><div class="home__FooterText-f9hbqs-8 bwWQsF">Made by</div><img src="images/visgl-logo.png" alt="logo" class="home__FooterLogo-f9hbqs-9 jSoWkF"/></div></footer></main></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---src-home-js-d9cb8e2a1f1b43e76cef.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---src-home-js-d9cb8e2a1f1b43e76cef.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/index/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="body__BodyContainerFull-lvm4v2-0 jcCBQi"><main><section class="home__Banner-f9hbqs-0 cWWlRG"><div class="home__HeroExampleContainer-f9hbqs-3 dyloyq"><div class="home__HeroExample-sc-1jcekwk-1 duddkX"></div></div><div class="home__Container-f9hbqs-1 home__BannerContainer-f9hbqs-2 byxZlM"><h1 class="home__ProjectName-f9hbqs-5 hUDXst">react-map-gl</h1><p>React wrapper for Mapbox GL JS</p><a colortheme="dark" class="home__GetStartedLink-f9hbqs-6 bMqhOg" href="/react-map-gl/docs/get-started/get-started">GET STARTED</a></div></section><div class="home__ContentContainer-sc-1jcekwk-2 eTuzrY"><h2>react-map-gl makes using Mapbox GL JS in React applications easy.</h2><h3><img src="images/icon-react.svg" class="home__Icon-sc-1jcekwk-0 kUNTgu"/>React Integration</h3><p>Integration on browser and Node.js, exposing the full power of mapbox-gl.</p><h3><img src="images/icon-layers.svg" class="home__Icon-sc-1jcekwk-0 kUNTgu"/>Component Library</h3><p>react-map-gl comes with additional React components that synchronize with the map camera system. Use one of the supported overlays to visualize data, or build your own.</p><h3><img src="images/icon-high-precision.svg" class="home__Icon-sc-1jcekwk-0 kUNTgu"/>Part of vis.gl&#x27;s Framework Suite</h3><p>Use together with e.g. <a href="https://deck.gl/" target="_blank" rel="noopener noreferrer">deck.gl</a> to render performant and compelling 2D and 3D WebGL visualizations on top of your Mapbox GL JS based maps.</p></div><section class="home__Section-f9hbqs-4 iZhuWO"><div class="home__Container-f9hbqs-1 eCgMCt"><div><h2 style="text-align:center">Contributors</h2><div class="github-contributors__ContribContainer-sc-12w0yk9-0 eTZWpm"></div></div></div></section><footer class="home__Footer-f9hbqs-7 SJzLG"><div class="home__Container-f9hbqs-1 eCgMCt"><div class="home__FooterText-f9hbqs-8 bwWQsF">Made by</div><img src="images/visgl-logo.png" alt="logo" class="home__FooterLogo-f9hbqs-9 jSoWkF"/></div></footer></main></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---src-home-js-d9cb8e2a1f1b43e76cef.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/page-data/app-data.json b/page-data/app-data.json
index 2c34cc31..02aa5cf0 100644
--- a/page-data/app-data.json
+++ b/page-data/app-data.json
@@ -1 +1 @@
-{"webpackCompilationHash":"4abbe719336efa59776d"}
+{"webpackCompilationHash":"fa52de29a9f545e1b706"}
diff --git a/page-data/docs/api-reference/geolocate-control/page-data.json b/page-data/docs/api-reference/geolocate-control/page-data.json
index 04e77403..526bef69 100644
--- a/page-data/docs/api-reference/geolocate-control/page-data.json
+++ b/page-data/docs/api-reference/geolocate-control/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/geolocate-control","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"geolocatecontrol\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#geolocatecontrol\",\n    \"aria-label\": \"geolocatecontrol permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"GeolocateControl\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://img.shields.io/badge/since-v4.1-green\",\n    \"alt\": \"Since v4.1\"\n  })), mdx(\"p\", null, \"This is a React equivalent of Mapbox's \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol\"\n  }, \"GeolocateControl\"), \".\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"as\"), \" React \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" ReactMapGL\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"GeolocateControl\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"react-map-gl\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" geolocateControlStyle\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  right\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"10\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  top\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"10\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"App\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"viewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" setViewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" React\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"useState\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    longitude\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"122.45\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    latitude\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"37.78\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    zoom\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"14\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"ReactMapGL \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"...\"), \"viewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"100vw\\\"\"), \" height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"100vh\\\"\"), \" onViewportChange\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"setViewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"GeolocateControl\\n        style\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"geolocateControlStyle\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        positionOptions\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"enableHighAccuracy\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        trackUserLocation\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        auto\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"ReactMapGL\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"h2\", {\n    \"id\": \"properties\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#properties\",\n    \"aria-label\": \"properties permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Properties\"), mdx(\"p\", null, \"Accepts all the options of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol\"\n  }, \"Mapbox GeolocateControl\"), \".\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textonviewportchangecode-function-optional\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textonviewportchangecode-function-optional\",\n    \"aria-label\": \"code classlanguage textonviewportchangecode function optional permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"onViewportChange\"), \" (Function, optional)\"), mdx(\"p\", null, \"Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md\"\n  }, \"InteractiveMap\"), \"'s \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"onViewportChange\"), \".\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textongeolocatecode-function-optional\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textongeolocatecode-function-optional\",\n    \"aria-label\": \"code classlanguage textongeolocatecode function optional permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"onGeolocate\"), \" (Function, optional)\"), mdx(\"p\", null, \"Callback when Geolocation API position updates. It is called with a Geolocation API \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions\"\n  }, \"PositionOptions\"), \" object.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textpositionoptionscode-object\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textpositionoptionscode-object\",\n    \"aria-label\": \"code classlanguage textpositionoptionscode object permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"positionOptions\"), \" (Object)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"{enableHighAccuracy: false, timeout: 6000}\"))), mdx(\"p\", null, \"A Geolocation API \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions\"\n  }, \"PositionOptions\"), \" object.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textfitboundsoptionscode-object\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textfitboundsoptionscode-object\",\n    \"aria-label\": \"code classlanguage textfitboundsoptionscode object permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"fitBoundsOptions\"), \" (Object)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"{maxZoom: 15}\"))), mdx(\"p\", null, \"A \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/react-map-gl/docs/api-reference/web-mercator-viewport.md#fitboundsbounds-options-object\"\n  }, \"fitBounds\"), \" options object to use when the map is panned and zoomed to the user's location. The default is to use a  maxZoom of 15 to limit how far the map will zoom in for very accurate locations.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-texttrackuserlocationcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-texttrackuserlocationcode-boolean\",\n    \"aria-label\": \"code classlanguage texttrackuserlocationcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"trackUserLocation\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"false\"))), mdx(\"p\", null, \"If true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textshowuserlocationcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textshowuserlocationcode-boolean\",\n    \"aria-label\": \"code classlanguage textshowuserlocationcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"showUserLocation\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"true\"))), mdx(\"p\", null, \"By default a dot will be shown on the map at the user's location. Set to false to disable.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textshowaccuracycirclecode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textshowaccuracycirclecode-boolean\",\n    \"aria-label\": \"code classlanguage textshowaccuracycirclecode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"showAccuracyCircle\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"true\"))), mdx(\"p\", null, \"By default, if showUserLocation is \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"true\"), \" , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"false\"), \" to disable. Always disabled when showUserLocation is \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"false\"), \".\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textclassnamecode-string\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textclassnamecode-string\",\n    \"aria-label\": \"code classlanguage textclassnamecode string permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"className\"), \" (String)\"), mdx(\"p\", null, \"Assign a custom class name to the container of this control.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textstylecode-object\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textstylecode-object\",\n    \"aria-label\": \"code classlanguage textstylecode object permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"style\"), \" (Object)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"{position: 'absolute'}\"))), mdx(\"p\", null, \"A \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/dom-elements.html#style\"\n  }, \"React style\"), \" object applied to this control.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textlabelcode-string\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textlabelcode-string\",\n    \"aria-label\": \"code classlanguage textlabelcode string permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"label\"), \" (String)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"'Find My Location'\"))), mdx(\"p\", null, \"Label applied to the Geolocate control button.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textdisabledlabelcode-string\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textdisabledlabelcode-string\",\n    \"aria-label\": \"code classlanguage textdisabledlabelcode string permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"disabledLabel\"), \" (String)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"'Location Not Available'\"))), mdx(\"p\", null, \"Label applied to the Geolocate control button if geolocation is disabled by the user.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textautocode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textautocode-boolean\",\n    \"aria-label\": \"code classlanguage textautocode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"auto\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"false\"))), mdx(\"p\", null, \"Programmatically triggers geolocate when set to true. Initializing the component with true triggers inside \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"componentDidMount\"), \" where as changing to true at a later point triggers inside \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"componentDidUpdate\"), \". Initally setting as or changing to false has no effect.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textcapturescrollcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textcapturescrollcode-boolean\",\n    \"aria-label\": \"code classlanguage textcapturescrollcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"captureScroll\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"false\"))), mdx(\"p\", null, \"Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textcapturedragcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textcapturedragcode-boolean\",\n    \"aria-label\": \"code classlanguage textcapturedragcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"captureDrag\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"true\"))), mdx(\"p\", null, \"Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textcaptureclickcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textcaptureclickcode-boolean\",\n    \"aria-label\": \"code classlanguage textcaptureclickcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"captureClick\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"true\"))), mdx(\"p\", null, \"Stop propagation of click event to the map component. Can be used to stop map from calling the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"onClick\"), \" callback when this component is clicked.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textcapturedoubleclickcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textcapturedoubleclickcode-boolean\",\n    \"aria-label\": \"code classlanguage textcapturedoubleclickcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"captureDoubleClick\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"true\"))), mdx(\"p\", null, \"Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textcapturepointermovecode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textcapturepointermovecode-boolean\",\n    \"aria-label\": \"code classlanguage textcapturepointermovecode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"capturePointerMove\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"false\"))), mdx(\"p\", null, \"Stop propagation of pointermove event to the map component. Can be used to stop map from calling the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"onMouseMove\"), \" or \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"onTouchMove\"), \" callback when this component is hovered.\"), mdx(\"h2\", {\n    \"id\": \"styling\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#styling\",\n    \"aria-label\": \"styling permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Styling\"), mdx(\"p\", null, \"Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.\"), mdx(\"h2\", {\n    \"id\": \"source\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#source\",\n    \"aria-label\": \"source permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/geolocate-control.js\"\n  }, \"geolocate-control.js\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"GeolocateControl This is a React equivalent of Mapbox's  GeolocateControl . Properties Accepts all the options of  Mapbox GeolocateControl…","frontmatter":{"title":"GeolocateControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/advanced/custom-components":"/docs/advanced/custom-components","../../advanced/custom-components":"/docs/advanced/custom-components","docs/advanced/custom-map-controller":"/docs/advanced/custom-map-controller","../../advanced/custom-map-controller":"/docs/advanced/custom-map-controller","docs/advanced/viewport-transition":"/docs/advanced/viewport-transition","../../advanced/viewport-transition":"/docs/advanced/viewport-transition","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","../canvas-overlay":"/docs/api-reference/canvas-overlay","docs/api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","../fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/html-overlay":"/docs/api-reference/html-overlay","../html-overlay":"/docs/api-reference/html-overlay","docs/api-reference/interactive-map":"/docs/api-reference/interactive-map","../interactive-map":"/docs/api-reference/interactive-map","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","../linear-interpolator":"/docs/api-reference/linear-interpolator","docs/api-reference/map-context":"/docs/api-reference/map-context","../map-context":"/docs/api-reference/map-context","docs/api-reference/map-controller":"/docs/api-reference/map-controller","../map-controller":"/docs/api-reference/map-controller","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/pointer-event":"/docs/api-reference/pointer-event","../pointer-event":"/docs/api-reference/pointer-event","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/static-map":"/docs/api-reference/static-map","../static-map":"/docs/api-reference/static-map","docs/api-reference/svg-overlay":"/docs/api-reference/svg-overlay","../svg-overlay":"/docs/api-reference/svg-overlay","docs/api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","../web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/faq":"/docs/get-started/faq","../../get-started/faq":"/docs/get-started/faq","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management"},"title":"GeolocateControl","slug":"docs/api-reference/geolocate-control","toc":"docs"}},"staticQueryHashes":["484347790"]}
\ No newline at end of file
+{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/geolocate-control","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"geolocatecontrol\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#geolocatecontrol\",\n    \"aria-label\": \"geolocatecontrol permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"GeolocateControl\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://img.shields.io/badge/since-v4.1-green\",\n    \"alt\": \"Since v4.1\"\n  })), mdx(\"p\", null, \"This is a React equivalent of Mapbox's \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol\"\n  }, \"GeolocateControl\"), \".\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"as\"), \" React \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" ReactMapGL\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"GeolocateControl\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react-map-gl'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" geolocateControlStyle \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  right\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"10\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  top\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"10\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"App\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"viewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" setViewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" React\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"useState\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    longitude\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"122.45\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    latitude\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"37.78\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    zoom\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"14\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"ReactMapGL \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"...\"), \"viewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"100vw\\\"\"), \" height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"100vh\\\"\"), \" onViewportChange\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"setViewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"GeolocateControl\\n        style\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"geolocateControlStyle\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        positionOptions\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"enableHighAccuracy\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        trackUserLocation\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        auto\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"ReactMapGL\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"h2\", {\n    \"id\": \"properties\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#properties\",\n    \"aria-label\": \"properties permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Properties\"), mdx(\"p\", null, \"Accepts all the options of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol\"\n  }, \"Mapbox GeolocateControl\"), \".\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textonviewportchangecode-function-optional\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textonviewportchangecode-function-optional\",\n    \"aria-label\": \"code classlanguage textonviewportchangecode function optional permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"onViewportChange\"), \" (Function, optional)\"), mdx(\"p\", null, \"Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md\"\n  }, \"InteractiveMap\"), \"'s \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"onViewportChange\"), \".\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textongeolocatecode-function-optional\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textongeolocatecode-function-optional\",\n    \"aria-label\": \"code classlanguage textongeolocatecode function optional permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"onGeolocate\"), \" (Function, optional)\"), mdx(\"p\", null, \"Callback when Geolocation API position updates. It is called with a Geolocation API \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions\"\n  }, \"PositionOptions\"), \" object.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textpositionoptionscode-object\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textpositionoptionscode-object\",\n    \"aria-label\": \"code classlanguage textpositionoptionscode object permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"positionOptions\"), \" (Object)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"{enableHighAccuracy: false, timeout: 6000}\"))), mdx(\"p\", null, \"A Geolocation API \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions\"\n  }, \"PositionOptions\"), \" object.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textfitboundsoptionscode-object\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textfitboundsoptionscode-object\",\n    \"aria-label\": \"code classlanguage textfitboundsoptionscode object permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"fitBoundsOptions\"), \" (Object)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"{maxZoom: 15}\"))), mdx(\"p\", null, \"A \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/react-map-gl/docs/api-reference/web-mercator-viewport.md#fitboundsbounds-options-object\"\n  }, \"fitBounds\"), \" options object to use when the map is panned and zoomed to the user's location. The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-texttrackuserlocationcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-texttrackuserlocationcode-boolean\",\n    \"aria-label\": \"code classlanguage texttrackuserlocationcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"trackUserLocation\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"false\"))), mdx(\"p\", null, \"If true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textshowuserlocationcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textshowuserlocationcode-boolean\",\n    \"aria-label\": \"code classlanguage textshowuserlocationcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"showUserLocation\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"true\"))), mdx(\"p\", null, \"By default a dot will be shown on the map at the user's location. Set to false to disable.\"), mdx(\"h5\", {\n    \"id\": \"showuserheading-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#showuserheading-boolean\",\n    \"aria-label\": \"showuserheading boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"showUserHeading (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"false\"))), mdx(\"p\", null, \"If true a heading indicator will be shown on the map at the user's location.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textshowaccuracycirclecode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textshowaccuracycirclecode-boolean\",\n    \"aria-label\": \"code classlanguage textshowaccuracycirclecode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"showAccuracyCircle\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"true\"))), mdx(\"p\", null, \"By default, if showUserLocation is \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"true\"), \" , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"false\"), \" to disable. Always disabled when showUserLocation is \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"false\"), \".\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textclassnamecode-string\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textclassnamecode-string\",\n    \"aria-label\": \"code classlanguage textclassnamecode string permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"className\"), \" (String)\"), mdx(\"p\", null, \"Assign a custom class name to the container of this control.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textstylecode-object\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textstylecode-object\",\n    \"aria-label\": \"code classlanguage textstylecode object permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"style\"), \" (Object)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"{position: 'absolute'}\"))), mdx(\"p\", null, \"A \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/dom-elements.html#style\"\n  }, \"React style\"), \" object applied to this control.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textlabelcode-string\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textlabelcode-string\",\n    \"aria-label\": \"code classlanguage textlabelcode string permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"label\"), \" (String)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"'Find My Location'\"))), mdx(\"p\", null, \"Label applied to the Geolocate control button.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textdisabledlabelcode-string\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textdisabledlabelcode-string\",\n    \"aria-label\": \"code classlanguage textdisabledlabelcode string permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"disabledLabel\"), \" (String)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"'Location Not Available'\"))), mdx(\"p\", null, \"Label applied to the Geolocate control button if geolocation is disabled by the user.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textautocode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textautocode-boolean\",\n    \"aria-label\": \"code classlanguage textautocode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"auto\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"false\"))), mdx(\"p\", null, \"Programmatically triggers geolocate when set to true. Initializing the component with true triggers inside \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"componentDidMount\"), \" where as changing to true at a later point triggers inside \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"componentDidUpdate\"), \". Initally setting as or changing to false has no effect.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textcapturescrollcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textcapturescrollcode-boolean\",\n    \"aria-label\": \"code classlanguage textcapturescrollcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"captureScroll\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"false\"))), mdx(\"p\", null, \"Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textcapturedragcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textcapturedragcode-boolean\",\n    \"aria-label\": \"code classlanguage textcapturedragcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"captureDrag\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"true\"))), mdx(\"p\", null, \"Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textcaptureclickcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textcaptureclickcode-boolean\",\n    \"aria-label\": \"code classlanguage textcaptureclickcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"captureClick\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"true\"))), mdx(\"p\", null, \"Stop propagation of click event to the map component. Can be used to stop map from calling the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"onClick\"), \" callback when this component is clicked.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textcapturedoubleclickcode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textcapturedoubleclickcode-boolean\",\n    \"aria-label\": \"code classlanguage textcapturedoubleclickcode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"captureDoubleClick\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"true\"))), mdx(\"p\", null, \"Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.\"), mdx(\"h5\", {\n    \"id\": \"code-classlanguage-textcapturepointermovecode-boolean\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#code-classlanguage-textcapturepointermovecode-boolean\",\n    \"aria-label\": \"code classlanguage textcapturepointermovecode boolean permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"code\", {\n    parentName: \"h5\",\n    \"className\": \"language-text\"\n  }, \"capturePointerMove\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"default: \", mdx(\"code\", {\n    parentName: \"li\",\n    \"className\": \"language-text\"\n  }, \"false\"))), mdx(\"p\", null, \"Stop propagation of pointermove event to the map component. Can be used to stop map from calling the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"onMouseMove\"), \" or \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"onTouchMove\"), \" callback when this component is hovered.\"), mdx(\"h2\", {\n    \"id\": \"styling\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#styling\",\n    \"aria-label\": \"styling permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Styling\"), mdx(\"p\", null, \"Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.\"), mdx(\"h2\", {\n    \"id\": \"source\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#source\",\n    \"aria-label\": \"source permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/geolocate-control.js\"\n  }, \"geolocate-control.js\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"GeolocateControl This is a React equivalent of Mapbox's  GeolocateControl . Properties Accepts all the options of  Mapbox GeolocateControl…","frontmatter":{"title":"GeolocateControl"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/advanced/custom-components":"/docs/advanced/custom-components","../../advanced/custom-components":"/docs/advanced/custom-components","docs/advanced/custom-map-controller":"/docs/advanced/custom-map-controller","../../advanced/custom-map-controller":"/docs/advanced/custom-map-controller","docs/advanced/viewport-transition":"/docs/advanced/viewport-transition","../../advanced/viewport-transition":"/docs/advanced/viewport-transition","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","../canvas-overlay":"/docs/api-reference/canvas-overlay","docs/api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","../fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/html-overlay":"/docs/api-reference/html-overlay","../html-overlay":"/docs/api-reference/html-overlay","docs/api-reference/interactive-map":"/docs/api-reference/interactive-map","../interactive-map":"/docs/api-reference/interactive-map","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","../linear-interpolator":"/docs/api-reference/linear-interpolator","docs/api-reference/map-context":"/docs/api-reference/map-context","../map-context":"/docs/api-reference/map-context","docs/api-reference/map-controller":"/docs/api-reference/map-controller","../map-controller":"/docs/api-reference/map-controller","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/pointer-event":"/docs/api-reference/pointer-event","../pointer-event":"/docs/api-reference/pointer-event","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/static-map":"/docs/api-reference/static-map","../static-map":"/docs/api-reference/static-map","docs/api-reference/svg-overlay":"/docs/api-reference/svg-overlay","../svg-overlay":"/docs/api-reference/svg-overlay","docs/api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","../web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/faq":"/docs/get-started/faq","../../get-started/faq":"/docs/get-started/faq","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management"},"title":"GeolocateControl","slug":"docs/api-reference/geolocate-control","toc":"docs"}},"staticQueryHashes":["484347790"]}
\ No newline at end of file
diff --git a/page-data/docs/get-started/get-started/page-data.json b/page-data/docs/get-started/get-started/page-data.json
index e8747e59..c4a47fba 100644
--- a/page-data/docs/get-started/get-started/page-data.json
+++ b/page-data/docs/get-started/get-started/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/get-started/get-started","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"get-started\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#get-started\",\n    \"aria-label\": \"get started permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Get Started\"), mdx(\"h2\", {\n    \"id\": \"installation\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#installation\",\n    \"aria-label\": \"installation permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Installation\"), mdx(\"p\", null, \"Using \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"react-map-gl\"), \" requires \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"node >= v4\"), \" and \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"react >= 16.3\"), \".\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"sh\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-sh\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-sh\"\n  }, \"npm install --save react-map-gl\"))), mdx(\"h2\", {\n    \"id\": \"example\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#example\",\n    \"aria-label\": \"example permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Example\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"as\"), \" React \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" useState \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" ReactMapGL \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react-map-gl'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"Map\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"viewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" setViewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"useState\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"400\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"400\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    latitude\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"37.7577\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    longitude\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"122.4376\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    zoom\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"8\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"ReactMapGL\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"...\"), \"viewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n      onViewportChange\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"nextViewport\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setViewport\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"nextViewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"p\", null, \"See full project setup in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/examples/get-started\"\n  }, \"get-started examples\")), mdx(\"h2\", {\n    \"id\": \"styling\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#styling\",\n    \"aria-label\": \"styling permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Styling\"), mdx(\"p\", null, \"The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly.\"), mdx(\"p\", null, \"You may add the stylesheet to the head of your page:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-html\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- index.html -->\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"link\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"'\"), \"https://api.tiles.mapbox.com/mapbox-gl-js/v<YOUR_MAPBOX_VERSION>/mapbox-gl.css\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"'\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"rel\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"'\"), \"stylesheet\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"'\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"/>\"))))), mdx(\"p\", null, \"Find out your mapbox version by running \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"yarn list mapbox-gl\"), \" or \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"npm ls mapbox-gl\"), \".\"), mdx(\"p\", null, \"Or embed it in your app by using - \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.npmjs.com/package/browserify-css\"\n  }, \"browserify-css\"), \"\\nwith Browserify or - \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://webpack.github.io/docs/stylesheets.html\"\n  }, \"css-loader\"), \" with Webpack:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// app.js\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'mapbox-gl/dist/mapbox-gl.css'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"h2\", {\n    \"id\": \"using-with-browserify-webpack-and-other-javascript-bundlers\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#using-with-browserify-webpack-and-other-javascript-bundlers\",\n    \"aria-label\": \"using with browserify webpack and other javascript bundlers permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Using with Browserify, Webpack, and other JavaScript Bundlers\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"browserify\"), \" - react-map-gl is extensively tested with \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"browserify\"), \" and works without configuration.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"webpack\"), \" - Most of the provided react-map-gl examples use webpack. Look at the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/examples/get-started\"\n  }, \"get started examples\"), \" folder for minimalist templates.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"create-react-app\"), \" - react-map-gl is compatible with \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/facebook/create-react-app\"\n  }, \"create-react-app\"), \".\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"create-react-app-typescript\"), \" - react-map-gl is compatible with \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/wmonk/create-react-app-typescript\"\n  }, \"create-react-app-typescript\"), \". You can see an example \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/zackhsi/react-map-gl-typescript\"\n  }, \"here\"), \".\"))), mdx(\"p\", null, \"There's many other ready-to-run \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/examples\"\n  }, \"examples\"), \" you can take a look at if you need more inspiration.\"), mdx(\"h2\", {\n    \"id\": \"using-with-a-mapbox-gl-fork\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#using-with-a-mapbox-gl-fork\",\n    \"aria-label\": \"using with a mapbox gl fork permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Using with a mapbox-gl Fork\"), mdx(\"p\", null, \"Install your choice of fork along with react-map-gl, for example:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-bash\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"npm\"), \" i react-map-gl maplibre-gl\"))), mdx(\"p\", null, \"In your bundler's configuration, set the forked library to replace any reference from mapbox-gl. This can be done in Webpack with something like:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// webpack.config.js\"), \"\\nmodule\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"export \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// ...\"), \"\\n  resolve\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    alias\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'mapbox-gl'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'maplibre-gl'\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"p\", null, \"In rollup:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// rollup.config.js\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" alias \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'@rollup/plugin-alias'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\nmodule\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"exports \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// ...\"), \"\\n  plugins\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"alias\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      entries\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" find\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'mapbox-gl'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" replacement\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'maplibre-gl'\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Get Started Installation Using  react-map-gl  requires  node >= v4  and  react >= 16.3 . Example See full project setup in  get-started…","frontmatter":{"title":"Get Started"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/advanced/custom-components":"/docs/advanced/custom-components","../../advanced/custom-components":"/docs/advanced/custom-components","docs/advanced/custom-map-controller":"/docs/advanced/custom-map-controller","../../advanced/custom-map-controller":"/docs/advanced/custom-map-controller","docs/advanced/viewport-transition":"/docs/advanced/viewport-transition","../../advanced/viewport-transition":"/docs/advanced/viewport-transition","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","../../api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","docs/api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","../../api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../../api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../../api-reference/geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/html-overlay":"/docs/api-reference/html-overlay","../../api-reference/html-overlay":"/docs/api-reference/html-overlay","docs/api-reference/interactive-map":"/docs/api-reference/interactive-map","../../api-reference/interactive-map":"/docs/api-reference/interactive-map","docs/api-reference/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","../../api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","docs/api-reference/map-context":"/docs/api-reference/map-context","../../api-reference/map-context":"/docs/api-reference/map-context","docs/api-reference/map-controller":"/docs/api-reference/map-controller","../../api-reference/map-controller":"/docs/api-reference/map-controller","docs/api-reference/marker":"/docs/api-reference/marker","../../api-reference/marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../../api-reference/navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/pointer-event":"/docs/api-reference/pointer-event","../../api-reference/pointer-event":"/docs/api-reference/pointer-event","docs/api-reference/popup":"/docs/api-reference/popup","../../api-reference/popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../../api-reference/scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../../api-reference/source":"/docs/api-reference/source","docs/api-reference/static-map":"/docs/api-reference/static-map","../../api-reference/static-map":"/docs/api-reference/static-map","docs/api-reference/svg-overlay":"/docs/api-reference/svg-overlay","../../api-reference/svg-overlay":"/docs/api-reference/svg-overlay","docs/api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","../../api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/faq":"/docs/get-started/faq","../faq":"/docs/get-started/faq","docs/get-started/get-started":"/docs/get-started/get-started","../get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../state-management":"/docs/get-started/state-management"},"title":"Get Started","slug":"docs/get-started/get-started","toc":"docs"}},"staticQueryHashes":["484347790"]}
\ No newline at end of file
+{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/get-started/get-started","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"get-started\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#get-started\",\n    \"aria-label\": \"get started permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Get Started\"), mdx(\"h2\", {\n    \"id\": \"installation\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#installation\",\n    \"aria-label\": \"installation permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Installation\"), mdx(\"p\", null, \"Using \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"react-map-gl\"), \" requires \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"node >= v4\"), \" and \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"react >= 16.3\"), \".\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"sh\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-sh\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-sh\"\n  }, \"npm install --save react-map-gl\"))), mdx(\"h2\", {\n    \"id\": \"example\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#example\",\n    \"aria-label\": \"example permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Example\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"as\"), \" React \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" useState \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" ReactMapGL \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'react-map-gl'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"Map\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"viewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" setViewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"useState\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    width\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"400\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    height\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"400\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    latitude\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"37.7577\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    longitude\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"122.4376\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    zoom\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"8\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"ReactMapGL\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"...\"), \"viewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n      onViewportChange\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"nextViewport\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setViewport\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"nextViewport\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"p\", null, \"See full project setup in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/examples/get-started\"\n  }, \"get-started examples\")), mdx(\"h2\", {\n    \"id\": \"styling\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#styling\",\n    \"aria-label\": \"styling permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Styling\"), mdx(\"p\", null, \"The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly.\"), mdx(\"p\", null, \"You may add the stylesheet to the head of your page:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-html\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- index.html -->\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"link\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"'\"), \"https://api.tiles.mapbox.com/mapbox-gl-js/v<YOUR_MAPBOX_VERSION>/mapbox-gl.css\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"'\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"rel\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"'\"), \"stylesheet\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"'\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"/>\"))))), mdx(\"p\", null, \"Find out your mapbox version by running \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"yarn list mapbox-gl\"), \" or \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"npm ls mapbox-gl\"), \".\"), mdx(\"p\", null, \"Or embed it in your app by using - \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.npmjs.com/package/browserify-css\"\n  }, \"browserify-css\"), \"\\nwith Browserify or - \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://webpack.github.io/docs/stylesheets.html\"\n  }, \"css-loader\"), \" with Webpack:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// app.js\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'mapbox-gl/dist/mapbox-gl.css'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"h2\", {\n    \"id\": \"using-with-browserify-webpack-and-other-javascript-bundlers\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#using-with-browserify-webpack-and-other-javascript-bundlers\",\n    \"aria-label\": \"using with browserify webpack and other javascript bundlers permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Using with Browserify, Webpack, and other JavaScript Bundlers\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"browserify\"), \" - react-map-gl is extensively tested with \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"browserify\"), \" and works without configuration.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"webpack\"), \" - Most of the provided react-map-gl examples use webpack. Look at the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/examples/get-started\"\n  }, \"get started examples\"), \" folder for minimalist templates.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"create-react-app\"), \" - react-map-gl is compatible with \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/facebook/create-react-app\"\n  }, \"create-react-app\"), \".\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"create-react-app-typescript\"), \" - react-map-gl is compatible with \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/wmonk/create-react-app-typescript\"\n  }, \"create-react-app-typescript\"), \". You can see an example \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/zackhsi/react-map-gl-typescript\"\n  }, \"here\"), \".\"))), mdx(\"p\", null, \"There's many other ready-to-run \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/examples\"\n  }, \"examples\"), \" you can take a look at if you need more inspiration.\"), mdx(\"h2\", {\n    \"id\": \"using-with-a-mapbox-gl-fork\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#using-with-a-mapbox-gl-fork\",\n    \"aria-label\": \"using with a mapbox gl fork permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Using with a mapbox-gl Fork\"), mdx(\"p\", null, \"Install your choice of fork along with react-map-gl, for example:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-bash\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"npm\"), \" i react-map-gl maplibre-gl\"))), mdx(\"p\", null, \"In your bundler's configuration, set the forked library to replace any reference from mapbox-gl. This can be done in Webpack with something like:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// webpack.config.js\"), \"\\nmodule\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"export \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// ...\"), \"\\n  resolve\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    alias\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'mapbox-gl'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'maplibre-gl'\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"p\", null, \"In rollup:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// rollup.config.js\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" alias \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'@rollup/plugin-alias'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\nmodule\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"exports \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// ...\"), \"\\n  plugins\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"alias\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      entries\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" find\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'mapbox-gl'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" replacement\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'maplibre-gl'\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"In Next.js:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// next.config.js\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" nextConfig \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// ...\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function-variable function\"\n  }, \"webpack\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"config\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    config\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"resolve\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"alias \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"...\"), \"config\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"resolve\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"alias\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'mapbox-gl'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'maplibre-gl'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// ...\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Get Started Installation Using  react-map-gl  requires  node >= v4  and  react >= 16.3 . Example See full project setup in  get-started…","frontmatter":{"title":"Get Started"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/advanced/custom-components":"/docs/advanced/custom-components","../../advanced/custom-components":"/docs/advanced/custom-components","docs/advanced/custom-map-controller":"/docs/advanced/custom-map-controller","../../advanced/custom-map-controller":"/docs/advanced/custom-map-controller","docs/advanced/viewport-transition":"/docs/advanced/viewport-transition","../../advanced/viewport-transition":"/docs/advanced/viewport-transition","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","../../api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","docs/api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","../../api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../../api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../../api-reference/geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/html-overlay":"/docs/api-reference/html-overlay","../../api-reference/html-overlay":"/docs/api-reference/html-overlay","docs/api-reference/interactive-map":"/docs/api-reference/interactive-map","../../api-reference/interactive-map":"/docs/api-reference/interactive-map","docs/api-reference/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","../../api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","docs/api-reference/map-context":"/docs/api-reference/map-context","../../api-reference/map-context":"/docs/api-reference/map-context","docs/api-reference/map-controller":"/docs/api-reference/map-controller","../../api-reference/map-controller":"/docs/api-reference/map-controller","docs/api-reference/marker":"/docs/api-reference/marker","../../api-reference/marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../../api-reference/navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/pointer-event":"/docs/api-reference/pointer-event","../../api-reference/pointer-event":"/docs/api-reference/pointer-event","docs/api-reference/popup":"/docs/api-reference/popup","../../api-reference/popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../../api-reference/scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../../api-reference/source":"/docs/api-reference/source","docs/api-reference/static-map":"/docs/api-reference/static-map","../../api-reference/static-map":"/docs/api-reference/static-map","docs/api-reference/svg-overlay":"/docs/api-reference/svg-overlay","../../api-reference/svg-overlay":"/docs/api-reference/svg-overlay","docs/api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","../../api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/faq":"/docs/get-started/faq","../faq":"/docs/get-started/faq","docs/get-started/get-started":"/docs/get-started/get-started","../get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../state-management":"/docs/get-started/state-management"},"title":"Get Started","slug":"docs/get-started/get-started","toc":"docs"}},"staticQueryHashes":["484347790"]}
\ No newline at end of file
diff --git a/page-data/search/page-data.json b/page-data/search/page-data.json
index 6e77906e..6e4fb4f6 100644
--- a/page-data/search/page-data.json
+++ b/page-data/search/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx","path":"/search","result":{"pageContext":{"data":[{"excerpt":"Introduction react-map-gl is a suite of  React  components for\nMapbox GL JS-compatible libraries. Library Description MapLibre An open fork of mapbox-gl v1, that can be used without a mapbox token. Mapbox GL JS v1 The previous version of mapbox GL JS. This version is free open source and can be used with non-mapbox basemaps without a mapbox token. Mapbox GL JS v2 The latest version of Mapbox GL JS. Note that version 2 is not free open source, and a mapbox token is required and billable events are generated even if you do not use mapbox hosted basemaps. Other mapbox-gl forks It may be possible to use react-map-gl with other mapbox forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted. For basemaps: You can load map data from Mapbox's own service. You can create and host your own map data using one of the many  open source tools . New to react-map-gl?  Get Started Want to contribute? See our  Developer Guide Design Philosophy At Uber, we make powerful web tools that contain maps. To manage the complexity of our applications, we fully embrace React and reactive programming. The stock mapbox-gl APIs are  imperative . That is, you instruct the map to do something (for example,  map.flyTo ), and it will execute the command at its own pace. This does not scale when we have many components that need to synchronize with each other. One use case we have is to render two maps side by side, and when the user interacts with one, update both cameras. We draw UI on top of the map using React, pinned to a given geolocation. We also render visualization layers on top of the map using WebGL, most notably with  deck.gl . The mapbox maps, the deck.gl canvas, and React controls' render cycles are all asynchronous. If we listen to the  move  event in the map and tell the other components to update, the other components would always be one frame behind. Ultimately, in the spirit of the  reactive programming paradigm , data always flows  down . In a complex application, any user input or data fetch can affect the rendering of many components. We might store the  source of truth  in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync. react-map-gl creates a fully reactive wrapper for mapbox-gl. The  InteractiveMap  component is stateless. To move the map camera in anyway, the application must update the component's props. The application can also be confident that the map's camera would never deviate from the props that it's assigned. At first glance, its API may seem verbose to those who come from the imperative world of mapbox-gl. However, it is essential for the correctness of large applications. Limitations This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map. Because most of the functionality of Mapbox's JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Mapbox GL JS's Map class. You may access the native Mapbox API exposed by the  getMap()  function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state. Examples of replacing common native API calls with their React equivalents can be found on the  FAQ  page.","headings":[{"value":"Introduction","depth":1},{"value":"Design Philosophy","depth":2},{"value":"Limitations","depth":2}],"slug":"docs","title":"Introduction"},{"excerpt":"Custom Components You may create your own map control components by consuming  MapContext . Using the MapContext The following component renders a label \"(longitude, latitude)\" at the given coordinate: Using the useMapControl hook useMapControl  is an experimental API that makes it easier to create controls with event handling. Calling  useMapControl(opts)  returns an object containing the following fields: context  (MapContext) - the current context value containerRef  (RefObject) - this should be assigned to the  ref  prop of the DOM element that the event listeners should attach to. This hook supports the following options: onScroll  (Function) - called on mouse wheel event. Can be used to stop map from zooming when this component is scrolled. onDragStart  (Function) - called on dragstart event. Can be used to stop map from panning when this component is dragged. onClick  (Function) - called on click event. Can be used to stop map from calling the  onClick  callback when this component is clicked. onDoubleClick  (Function) - called on double click event. Can be used to stop map from zooming when this component is double clicked. onPointerMove  (Function) - called on pointermove event. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered.","headings":[{"value":"Custom Components","depth":1},{"value":"Using the MapContext","depth":2},{"value":"Using the useMapControl hook","depth":2}],"slug":"docs/advanced/custom-components","title":"Custom Components"},{"excerpt":"Custom Map Controller Overriding The Default Map Controller To change the default behavior of map interaction, you can provide a custom map control to the  controller  prop of  InteractiveMap . This custom map control must offer the following interface: setOptions(options)  - called by  InteractiveMap  when props change. Documentation of  the MapController class . Examples A simple example to swap drag pan and drag rotate: Overwrite existing event handling: Listen to additional events: Add a custom callback:","headings":[{"value":"Custom Map Controller","depth":1},{"value":"Overriding The Default Map Controller","depth":2},{"value":"Examples","depth":2}],"slug":"docs/advanced/custom-map-controller","title":"Custom Map Controller"},{"excerpt":"Viewport Transition react-map-gl  does not expose the transition API from  mapbox-gl-js  since it is designed to be a stateless component, and needs to synchronize with separate overlay systems such as deck.gl. Instead, transitions can be defined using  InteractiveMap 's transition props. Example: Fly to a New Location See  viewport animation  for a complete example. Example: Transition Viewport To A Bounding Box You can use the  WebMercatorViewport  utility to find the target viewport that fits around a lngLat bounding box: Documentation of WebMercatorViewport Controlling Map Transitions InteractiveMap's Transition Props See properties of  InteractiveMap . transitionDuration  (Number) transitionInterpolator  (Object) transitionEasing  (Function) transitionInterruption  (Number) onTransitionStart  (Function) onTransitionInterrupt  (Function) onTransitionEnd  (Function) Transition and the onViewportChange Callback InteractiveMap  is designed to be a stateless component. For transitions to work, the application must update the viewport props returned by the  onViewportChange  callback: Remarks: The props returned by the callback may contain transition properties. For example, during panning and rotating, the callback is invoked with  transitionDuration: 0 , meaning that the map movement instantly matches the change of the pointer. When panning or zooming with keyboard, the callback is invoked with a 300ms linear transition. It is recommended that when programatically triggering a transition, always explicitly set the transition properties (interpolator, easing and duration). \"Set and forget\": the values of the following props at the start of a transition carry through the entire duration of the transition: transitionDuration transitionInterpolator transitionEasing transitionInterruption The default interaction/transition behavior can always be intercepted and overwritten in the handler for  onViewportChange . However, if a transition is in progress, the properties that are being transitioned (e.g. longitude and latitude) should not be manipulated, otherwise the change will be interpreted as an interruption of the transition. When using  FlyToInterpolator  for  transitionInterpolator ,  transitionDuration  can be set to  'auto'  where actual duration is auto calculated based on start and end viewports and is linear to the distance between them. This duration can be further customized using  speed  parameter to  FlyToInterpolator  constructor. Transition Interpolators A  TransitionInterpolator  instance must be supplied to the  transitionInterpolator  prop. It contains the following methods: arePropsEqual(currentProps, nextProps)  - called to determine if transition should be triggered when viewport props update. initiateProps(startProps, endProps)  - called before transition starts to pre-process the start and end viewport props. interpolateProps(startProps, endProps, t)  - called to get viewport props in transition.  t  is a time factor between  [0, 1] . react-map-gl offers two built-in interpolator classes: LinearInterpolator FlyToInterpolator","headings":[{"value":"Viewport Transition","depth":1},{"value":"Example: Fly to a New Location","depth":2},{"value":"Example: Transition Viewport To A Bounding Box","depth":2},{"value":"Controlling Map Transitions","depth":2},{"value":"InteractiveMap's Transition Props","depth":3},{"value":"Transition and the onViewportChange Callback","depth":3},{"value":"Transition Interpolators","depth":3}],"slug":"docs/advanced/viewport-transition","title":"Viewport Transition"},{"excerpt":"AttributionControl This is a React equivalent of Mapbox's  AttributionControl . Properties toggleLabel  (String) default:  'Toggle Attribution' Label applied to the toggle button. compact  (Boolean) If  true , force a compact attribution that shows the full attribution on mouse hover. If  false , force the full attribution control. When undefined, shows a responsive attribution that collapses when the map is less than 640 pixels wide. customAttribution  (String| String ) String or strings to show in addition to any other attributions. className  (String) Assign a custom class name to the container of this control. style  (Object) default:  {position: 'absolute'} A  React style  object applied to this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source attribution-control.js","headings":[{"value":"AttributionControl","depth":1},{"value":"Properties","depth":2},{"value":"toggleLabel (String)","depth":5},{"value":"compact (Boolean)","depth":5},{"value":"customAttribution (String|String)","depth":5},{"value":"className (String)","depth":5},{"value":"style (Object)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/attribution-control","title":"AttributionControl"},{"excerpt":"CanvasOverlay Allows applications to overlay data on top of maps using a canvas. Properties redraw  (Function) Called every time the map updates. Parameters: ctx  {CanvasRenderingContext2D} - rendering context of the canvas width  {Number} - width of the viewport height  {Number} - height of the viewport project  {Function} - get screen position  [x, y]  from geo coordinates  [lng, lat] unproject  {Function} - get geo coordinates  [lng, lat]  from screen position  [x, y] captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  false Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  false Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  false Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Source canvas-overlay.js","headings":[{"value":"CanvasOverlay","depth":1},{"value":"Properties","depth":2},{"value":"redraw (Function)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/canvas-overlay","title":"CanvasOverlay"},{"excerpt":"FlyToInterpolator Implements the  TransitionInterpolator  interface. Designed to use with the  transitionInterpolator  prop of  InteractiveMap . This interpolator offers similar behavior to Mapbox's  flyTo  method. Constructor new FlyToInterpolator([options]) Parameters: options  {Object} (optional) curve  (Number, optional, default: 1.414) - The zooming \"curve\" that will occur along the flight path. speed  (Number, optional, default: 1.2) - The average speed of the animation defined in relation to  options.curve , it linearly affects the duration, higher speed returns smaller durations and vice versa. screenSpeed  (Number, optional) - The average speed of the animation measured in screenfuls per second. Similar to  opts.speed  it linearly affects the duration,  when specified  opts.speed  is ignored. maxDuration  (Number, optional) - Maximum duration in milliseconds, if calculated duration exceeds this value,  0  is returned. Source viewport-fly-to-interpolator.js","headings":[{"value":"FlyToInterpolator","depth":1},{"value":"Constructor","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/fly-to-interpolator","title":"FlyToInterpolator"},{"excerpt":"FullscreenControl This is a React equivalent of Mapbox's  FullscreenControl . Properties container  (HTMLElement) container  is the compatible DOM element which should be made full screen. By default, the map container element will be made full screen. label  (String) default:  Toggle fullscreen Label applied to the fullscreen control button. className  (String) Assign a custom class name to the container of this control. style  (Object) default:  {position: 'absolute'} A  React style  object applied to this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source fullscreen-control.js","headings":[{"value":"FullscreenControl","depth":1},{"value":"Properties","depth":2},{"value":"container (HTMLElement)","depth":5},{"value":"label (String)","depth":5},{"value":"className (String)","depth":5},{"value":"style (Object)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/fullscreen-control","title":"FullscreenControl"},{"excerpt":"GeolocateControl This is a React equivalent of Mapbox's  GeolocateControl . Properties Accepts all the options of  Mapbox GeolocateControl . onViewportChange  (Function, optional) Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing  InteractiveMap 's  onViewportChange . onGeolocate  (Function, optional) Callback when Geolocation API position updates. It is called with a Geolocation API  PositionOptions  object. positionOptions  (Object) default:  {enableHighAccuracy: false, timeout: 6000} A Geolocation API  PositionOptions  object. fitBoundsOptions  (Object) default:  {maxZoom: 15} A  fitBounds  options object to use when the map is panned and zoomed to the user's location. The default is to use a  maxZoom of 15 to limit how far the map will zoom in for very accurate locations. trackUserLocation  (Boolean) default:  false If true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes. showUserLocation  (Boolean) default:  true By default a dot will be shown on the map at the user's location. Set to false to disable. showAccuracyCircle  (Boolean) default:  true By default, if showUserLocation is  true  , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to  false  to disable. Always disabled when showUserLocation is  false . className  (String) Assign a custom class name to the container of this control. style  (Object) default:  {position: 'absolute'} A  React style  object applied to this control. label  (String) default:  'Find My Location' Label applied to the Geolocate control button. disabledLabel  (String) default:  'Location Not Available' Label applied to the Geolocate control button if geolocation is disabled by the user. auto  (Boolean) default:  false Programmatically triggers geolocate when set to true. Initializing the component with true triggers inside  componentDidMount  where as changing to true at a later point triggers inside  componentDidUpdate . Initally setting as or changing to false has no effect. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source geolocate-control.js","headings":[{"value":"GeolocateControl","depth":1},{"value":"Properties","depth":2},{"value":"onViewportChange (Function, optional)","depth":5},{"value":"onGeolocate (Function, optional)","depth":5},{"value":"positionOptions (Object)","depth":5},{"value":"fitBoundsOptions (Object)","depth":5},{"value":"trackUserLocation (Boolean)","depth":5},{"value":"showUserLocation (Boolean)","depth":5},{"value":"showAccuracyCircle (Boolean)","depth":5},{"value":"className (String)","depth":5},{"value":"style (Object)","depth":5},{"value":"label (String)","depth":5},{"value":"disabledLabel (String)","depth":5},{"value":"auto (Boolean)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/geolocate-control","title":"GeolocateControl"},{"excerpt":"HTMLOverlay Allows applications to overlay data on top of maps using a HTML container. Properties redraw  (Function) Called every time the map updates. Parameters: width  {Number} - width of the viewport height  {Number} - height of the viewport project  {Function} - get screen position  [x, y]  from geo coordinates  [lng, lat] unproject  {Function} - get geo coordinates  [lng, lat]  from screen position  [x, y] style  (Object) Additional css styles of the  div  container. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  false Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  false Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  false Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Source html-overlay.js","headings":[{"value":"HTMLOverlay","depth":1},{"value":"Properties","depth":2},{"value":"redraw (Function)","depth":5},{"value":"style (Object)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/html-overlay","title":"HTMLOverlay"},{"excerpt":"default (InteractiveMap) This component renders  MapboxGL  and provides full interactivity support.\nIt uses  StaticMap  underneath to render the final map component.\nThis is the  default  exported component from  react-map-gl . Properties Initialization Inherit the following props from  StaticMap : attributionControl  (Boolean) disableTokenWarning  (Boolean) gl  (WebGLContext) mapboxApiAccessToken  (String) mapboxApiUrl  (String) mapOptions  (Object) preserveDrawingBuffer  (Boolean) preventStyleDiffing  (Boolean) reuseMaps  (Boolean) transformRequest  (Function) Map State Inherit the following props from  StaticMap : mapStyle  (String | Object | Immutable.Map) width  (Number | String) height  (Number | String) latitude  (Number) longitude  (Number) zoom  (Number) bearing  (Number) pitch  (Number) altitude  (Number) viewState  (Object) Render Options Inherit the following props from  StaticMap : style  (Object) visible  (Boolean) visibilityConstraints  (Object) getCursor  (Function) Accessor that returns a cursor style to show interactive state. Called when the component is being rendered. Parameters state  - The current state of the component. state.isDragging  - If the map is being dragged. state.isHovering  - If the pointer is over an interactive feature. See  interactiveLayerIds  prop. The default implementation of  getCursor  returns  'pointer'  if  isHovering ,  'grabbing'  if  isDragging  and  'grab'  otherwise. Interaction Options maxZoom  (Number) default:  20 Max zoom level. minZoom  (Number) default:  0 Min zoom level. maxPitch  (Number) default:  85 Max pitch in degrees. minPitch  (Number) default:  0 Min pitch in degrees. scrollZoom  (Boolean|Object) default:  true Enable scroll to zoom. If an object is provided, may contain the following options to customize the scroll zoom behavior: speed  (Number) - Multiplier for the wheel delta. Default  0.01 . smooth  (Boolean) - Smoothly transition to the new zoom. If enabled, will provide a slightly lagged but smoother experience. Default  false . dragPan  (Boolean|Object) default:  true Enable drag to pan. If an object is provided, may contain the following options to customize its behavior: inertia  (Number) - Enable momentum/inertia when the gesture ends. The value specifies after how long the panning comes to a stop, in milliseconds. Default  300 . dragRotate  (Boolean) default:  true Enable drag to rotate. If an object is provided, may contain the following options to customize its behavior: inertia  (Number) - Enable momentum/inertia when the gesture ends. The value specifies after how long the rotation comes to a stop, in milliseconds. Default  300 . doubleClickZoom  (Boolean) default:  true Enable double click to zoom. touchZoom  (Boolean|Object) default:  true Enable multitouch zoom. If an object is provided, may contain the following options to customize its behavior: inertia  (Number) - Enable momentum/inertia when the gesture ends. The value specifies after how long the zooming comes to a stop, in milliseconds. Default  300 . touchRotate  (Boolean|Object) default:  false Enable multitouch rotate, including two-finger rotation to change bearing and three-finger swipe to change pitch. If an object is provided, may contain the following options to customize its behavior: inertia  (Number) - Enable momentum/inertia when the gesture ends. The value specifies after how long the rotation comes to a stop, in milliseconds. Default  300 . keyboard  (Boolean|Object) default:  true Enable keyboard navigation. If an object is provided, may contain the following options to customize its behavior: zoomSpeed  (Number) - speed of zoom using +/- keys. Default  2 . moveSpeed  (Number) - speed of movement using arrow keys, in pixels. rotateSpeedX  (Number) - speed of rotation using shift + left/right arrow keys, in degrees. Default  15 . rotateSpeedY  (Number) - speed of rotation using shift + up/down arrow keys, in degrees. Default  10 . touchAction  (String) default:  'none' Allow browser default touch actions. Default  none . See  hammer.js doc . By default, the map captures all touch interactions. This prop is useful for mobile applications to unblock default scrolling behavior. For example, use the combination  dragPan: false  and  touchAction: 'pan-y'  to allow vertical page scroll when dragging over the map. eventRecognizerOptions  (Object) default:  {} Set options for gesture recognition. My contain the following fields: pan  - an object that is  Hammer.Pan  options. This gesture is used for drag events. pinch  - an object that is  Hammer.Pinch  options This gesture is used for two-finger touch events. tripan  - an object that is  Hammer.Pan  options.  This gesture is used for three-finger touch events. tap  - an object that is  Hammer.Tap  options. This gesture is used for the  onClick  callback. anytap  - an object that is  Hammer.Tap  options. This gesture is used for the  onNativeClick  callback. doubletap  - an object that is  Hammer.Tap  options. This gesture is used for double click events. For example, the following setting makes panning less sensitive and clicking easier on mobile: Note that the value of this prop is used once when the component mounts. Subsequent changes will be ignored. clickRadius  (Number) default:  0 Radius to detect features around a clicked point. controller  (Object) A map controller instance to replace the default map controller. This object must implement the following interface: events  - An array of subscribed events handleEvent(event, context)  - A method that handles interactive events interactiveLayerIds  (Array) default:  null A list of layer ids that are interactive. If specified: Pointer event callbacks will only query the features under the pointer of these layers. The  getCursor  callback will receive  isHovering: true  when hover over features of these layers. If not specified: Pointer event callbacks will query the features under the pointer of all layers. The  getCursor  callback will always receive  isHovering: false . Transitions transitionDuration  (Number) default:  0 Duration of transition in milliseconds. If specified, the map's viewport will smoothly move from the previous props to the current one. transitionInterpolator  (Object) default:  new LinearInterpolator() An interpolator object that defines the transition behavior between two map states.  react-map-gl  offers two interpolators: LinearInterpolator  - similar to Mapbox's  easeTo  behavior. FlyToInterpolator  - similar to Mapbox's  flyTo  behavior. You may import them as follows: For details about using transition interpolators, see  transitions . transitionEasing  (Function) default:  t => t Easing function that maps a value from  [0, 1]  to  [0, 1] . Check out  http://easings.net/  for common easing curves. transitionInterruption  (Number) default:  TRANSITION_EVENTS.BREAK What to do if an ongoing transition is interrupted by another transition. There are 4 options: TRANSITION_EVENTS.BREAK  - Start new transition from the current view. TRANSITION_EVENTS.SNAP_TO_END  - Jump to the end of the previous transition before starting the new transition. TRANSITION_EVENTS.IGNORE  - Complete the previous transition and ignore the new viewport change. TRANSITION_EVENTS.UPDATE  - Continue the ongoing transition but change its destination to the new viewport. You may import the constants as follows: Callbacks Inherit the following props from  StaticMap : onLoad  (Function) onResize  (Function) onError  (Function) onViewportChange  (Function) Callback that is fired when the map's viewport properties should be updated. If not supplied, the map is not interactive. Arguments: viewState  (Object) The next viewport properties, including:  width ,  height ,  latitude ,  longitude ,  zoom ,  bearing ,  pitch ,  altitude ,  maxZoom ,  minZoom ,  maxPitch ,  minPitch ,  transitionDuration ,  transitionEasing ,  transitionInterpolator ,  transitionInterruption . interactionState  (Object) The current interaction that caused this viewport change. See  onInteractionStateChange  for possible fields. oldViewState  (Object) The current viewport properties. onViewStateChange  (Function) A newer version of the  onViewportChange  callback. Both are supported and provide equivalent functionality. onInteractionStateChange  (Function) Callback that is fired when the user interacted with the map. Possible fields include: interactionState.inTransition  (Boolean) interactionState.isDragging  (Boolean) interactionState.isPanning  (Boolean) interactionState.isRotating  (Boolean) interactionState.isZooming  (Boolean) Note: onInteractionStateChange  may be fired without  onViewportChange . For example, when the pointer is released at the end of a drag-pan,  isDragging  are reset to  false , without the viewport's  longitude  and  latitude  changing. onHover  (Function) Called when the mouse moves over the map (without button pressed). Receives a  PointerEvent  object. onClick  (Function) Called when the map is single clicked. Receives a  PointerEvent  object. This event is not fired on double click therefore there may be a delay between pointer up and the event. onNativeClick  (Function) Called when the map is clicked. Receives a  PointerEvent  object. This event is fired twice on double click. onDblClick  (Function) Called when the map is double clicked. Receives a  PointerEvent  object. onMouseDown  (Function) Called when a pointing device (usually a mouse) is pressed within the map. Receives a  PointerEvent  object. onMouseMove  (Function) Called when a pointing device (usually a mouse) is moved within the map. Receives a  PointerEvent  object. onMouseUp  (Function) Called when a pointing device (usually a mouse) is released within the map. Receives a  PointerEvent  object. onTouchStart  (Function) Called when a  touchstart  event occurs within the map. Receives a  PointerEvent  object. onTouchMove  (Function) Called when a  touchmove  event occurs within the map. Receives a  PointerEvent  object. onTouchEnd  (Function) Called when a  touchend  event occurs within the map. Receives a  PointerEvent  object. onMouseEnter  (Function) Called when a pointing device (usually a mouse) enters a visible portion of one of the interactive layers, defined by the  interactiveLayerIds  prop. Receives a  PointerEvent  object. onMouseLeave  (Function) Called when a pointing device (usually a mouse) leaves a visible portion of one of the interactive layers, defined by the  interactiveLayerIds  prop. Receives a  PointerEvent  object. onWheel  (Function) Called when a  wheel  event occurs within the map. Receives a  PointerEvent  object. onMouseOut  (Function) Called when a point device (usually a mouse) leaves the map's canvas. Receives a  PointerEvent  object. onContextMenu  (Function) Called when the context menu is activated. Prevent default here to enable right button interaction. Default:  event => event.preventDefault() onTransitionStart  (Function) Callback that is fired when a transition is triggered. onTransitionInterrupt  (Function) Callback that is fired when an ongoing transition is interrupted by another transition. onTransitionEnd  (Function) Callback that is fired when a transition is complete. Methods Inherit the following methods from  StaticMap : getMap() queryRenderedFeatures(geometry, parameters) Source interactive-map.js","headings":[{"value":"default (InteractiveMap)","depth":1},{"value":"Properties","depth":2},{"value":"Initialization","depth":3},{"value":"Map State","depth":3},{"value":"Render Options","depth":3},{"value":"getCursor (Function)","depth":5},{"value":"Interaction Options","depth":3},{"value":"maxZoom (Number)","depth":5},{"value":"minZoom (Number)","depth":5},{"value":"maxPitch (Number)","depth":5},{"value":"minPitch (Number)","depth":5},{"value":"scrollZoom (Boolean|Object)","depth":5},{"value":"dragPan (Boolean|Object)","depth":5},{"value":"dragRotate (Boolean)","depth":5},{"value":"doubleClickZoom (Boolean)","depth":5},{"value":"touchZoom (Boolean|Object)","depth":5},{"value":"touchRotate (Boolean|Object)","depth":5},{"value":"keyboard (Boolean|Object)","depth":5},{"value":"touchAction (String)","depth":5},{"value":"eventRecognizerOptions (Object)","depth":5},{"value":"clickRadius (Number)","depth":5},{"value":"controller (Object)","depth":5},{"value":"interactiveLayerIds (Array)","depth":5},{"value":"Transitions","depth":3},{"value":"transitionDuration (Number)","depth":5},{"value":"transitionInterpolator (Object)","depth":5},{"value":"transitionEasing (Function)","depth":5},{"value":"transitionInterruption (Number)","depth":5},{"value":"Callbacks","depth":3},{"value":"onViewportChange (Function)","depth":5},{"value":"onViewStateChange (Function)","depth":5},{"value":"onInteractionStateChange (Function)","depth":5},{"value":"onHover (Function)","depth":5},{"value":"onClick (Function)","depth":5},{"value":"onNativeClick (Function)","depth":5},{"value":"onDblClick (Function)","depth":5},{"value":"onMouseDown (Function)","depth":5},{"value":"onMouseMove (Function)","depth":5},{"value":"onMouseUp (Function)","depth":5},{"value":"onTouchStart (Function)","depth":5},{"value":"onTouchMove (Function)","depth":5},{"value":"onTouchEnd (Function)","depth":5},{"value":"onMouseEnter (Function)","depth":5},{"value":"onMouseLeave (Function)","depth":5},{"value":"onWheel (Function)","depth":5},{"value":"onMouseOut (Function)","depth":5},{"value":"onContextMenu (Function)","depth":5},{"value":"onTransitionStart (Function)","depth":5},{"value":"onTransitionInterrupt (Function)","depth":5},{"value":"onTransitionEnd (Function)","depth":5},{"value":"Methods","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/interactive-map","title":"default (InteractiveMap)"},{"excerpt":"Layer This component allows apps to create a  map layer  using React. Properties The props provided to this component should be conforming to the  Mapbox layer specification . When props change  shallowly , the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance. Identity Properties Once a  <Layer>  is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's  key prop  to give each element a stable identity. id  (String) Unique identifier of the layer. If not provided, a default id will be assigned. type  (String, required) Type of the layer. Options beforeId  (String) The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL. Note that layers are added by the order that they mount. They are  NOT  reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate  beforeId  for consistent behavior. source  (String) source  is required by some layer types in the Mapbox style specification. If  <Layer>  is used as the child of a  Source  component, this prop will be overwritten by the id of the parent source. Source layer.js","headings":[{"value":"Layer","depth":1},{"value":"Properties","depth":2},{"value":"Identity Properties","depth":3},{"value":"id (String)","depth":5},{"value":"type (String, required)","depth":5},{"value":"Options","depth":3},{"value":"beforeId (String)","depth":5},{"value":"source (String)","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/layer","title":"Layer"},{"excerpt":"LinearInterpolator Implements the  TransitionInterpolator  interface. Designed to use with the  transitionInterpolator  prop of  InteractiveMap . Interpolates all viewport props linearly. This interpolator offers similar behavior to Mapbox's  easeTo  when combined with a  transitionEasing  function. You may optionally limit the transition to selected viewport props, for example  new LinearInterpolator(['pitch', 'bearing'])  animates pitch and bearing while the user is still allowed to pan and zoom. Constructor new LinearInterpolator([options]) Parameters: options  {Object} (optional) transitionProps  {Array} (optional) - list of prop names to interpolate. Default:  ['longitude', 'latitude', 'zoom', 'pitch', 'bearing'] . around  {Array} (optional) - a point to zoom/rotate the map around, as  [x, y]  in screen position. Source linear-interpolator.js","headings":[{"value":"LinearInterpolator","depth":1},{"value":"Constructor","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/linear-interpolator","title":"LinearInterpolator"},{"excerpt":"MapContext MapContext  allows components to interact with  InteractiveMap  or  StaticMap  via React's  context  API. It is also possible to consume  MapContext  outside the map component, if you render your own  Provider . Note that not all context fields are available if you use it this way. Fields The context value object may contain the following fields: map  (Map) - the mapbox-gl  Map  instance viewport  (WebMercatorViewport) - the current viewport container  (HTMLDivElement) - the outer container of the map component onViewportChange  (Function) - a callback invoked when a map control requests a viewport change, with the signature  onViewportChange(viewState, interactionState, oldViewState) onViewStateChange  (Function) - an alternative callback invoked when a map control requests a viewport change, with the signature  onViewStateChange({viewState, interactionState, oldViewState}) eventManager  (EventManager) - an  EventManager  instance used to register all interactive events Source map-context.js","headings":[{"value":"MapContext","depth":1},{"value":"Fields","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/map-context","title":"MapContext"},{"excerpt":"MapController The easiest way to create a custom map control is to extend the default  MapController  class. Properties events  (Array) A list of additional event names that this control subscribes to. Available events:  click ,  dblclick ,  tap ,  doubletap ,  press ,  pinch ,  pinchin ,  pinchout ,  pinchstart ,  pinchmove ,  pinchend ,  pinchcancel ,  rotate ,  rotatestart ,  rotatemove ,  rotateend ,  rotatecancel ,  pan ,  panstart ,  panmove ,  panup ,  pandown ,  panleft ,  panright ,  panend ,  pancancel ,  swipe ,  swipeleft ,  swiperight ,  swipeup ,  swipedown ,  pointerdown ,  pointermove ,  pointerup ,  keydown , and  keyup . The following events are toggled on/off by InteractiveMap props:  scrollZoom  -  ['wheel'] dragPan  and  dragRotate  -  ['panstart', 'panmove', 'panend'] touchZoomRotate  -  ['pinchstart', 'pinchmove', 'pinchend'] doubleClickZoom  -  ['doubletap'] keyboard  -  ['keydown'] Event object is generated by  mjolnir.js . It always has the following properties: type  (string) -  The event type to which the event handler is subscribed, e.g.  'click'  or  'pointermove' center  (Object  {x, y} ) - The center of the event location (e.g. the centroid of a touch) relative to the viewport (basically,  clientX/Y ) offsetCenter  (Object  {x, y} ) - The center of the event location relative to the map. target  (Object) - The target of the event, as specified by the original  srcEvent srcEvent  (Object) - The original event object dispatched by the browser to the JS runtime Additionally, event objects for different event types contain a subset of the following properties: key  (number) - The keycode of the keyboard event leftButton  (boolean) - Flag indicating whether the left button is involved during the event middleButton  (boolean) - Flag indicating whether the middle button is involved during the event rightButton  (boolean) - Flag indicating whether the right button is involved during the event pointerType  (string) - A string indicating the type of input (e.g.  'mouse' ,  'touch' ,  'pointer' ) delta  (number) - The scroll magnitude/distance of a wheel event Methods handleEvent handleEvent(event) Called by the event manager to handle pointer events. This method delegate to the following methods to handle the default events: _onPanStart(event) _onPan(event) _onPanEnd(event) _onPinchStart(event) _onPinch(event) _onPinchEnd(event) _onDoubleTap(event) _onWheel(event) _onKeyDown(event) getMapState getMapState(overrides) Get a new descriptor object of the map state. If specified, props in the  overrides  object override the current map props. setOptions setOptions(options) Add/remove event listeners based on the latest  InteractiveMap  props. updateViewport updateViewport(newMapState, extraProps, interactionState) Invoke  onViewportChange  callback with a new map state. Source map-controller.js","headings":[{"value":"MapController","depth":1},{"value":"Properties","depth":2},{"value":"events (Array)","depth":5},{"value":"Methods","depth":2},{"value":"handleEvent","depth":5},{"value":"getMapState","depth":5},{"value":"setOptions","depth":5},{"value":"updateViewport","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/map-controller","title":"MapController"},{"excerpt":"Marker This is a React equivalent of Mapbox's\n Marker Control , which can\nbe used to render custom icons at specific locations on the map. Performance notes: if a large number of markers are needed, it's generally favorable to cache the  <Marker>  nodes, so that we don't rerender them when the viewport changes. Properties latitude  (Number, required) Latitude of the marker. longitude  (Number, required) Longitude of the marker. offsetLeft  (Number) default:  0 Offset of the marker from the left in pixels, negative number indicates left. offsetTop  (Number) default:  0 Offset of the marker from the top in pixels, negative number indicates up. draggable  (Boolean) default:  false Allows this marker component to be dragged around the map. (Use  onDragEnd  to capture the final position and update  longitude  and  latitude ). onDragStart  (Function) Called when a draggable marker starts being dragged. Parameters: event  - The pointer event. event.lngLat  - The geo coordinates where the drag started, as  [lng, lat] . onDrag  (Function) Continuously called while a draggable marker is being dragged. Parameters: event  - The pointer event. event.lngLat  - The geo coordinates of the drag event, as  [lng, lat] . onDragEnd  (Function) Called when a draggable marker is released at its final position. This is usually a good time to capture  event.lngLat  and update the marker's  longitude  and  latitude  props. Parameters: event  - The pointer event. event.lngLat  - The geo coordinates where the drag ended, as  [lng, lat] . className  (String) Assign a custom class name to the container of this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source marker.js","headings":[{"value":"Marker","depth":1},{"value":"Properties","depth":2},{"value":"latitude (Number, required)","depth":5},{"value":"longitude (Number, required)","depth":5},{"value":"offsetLeft (Number)","depth":5},{"value":"offsetTop (Number)","depth":5},{"value":"draggable (Boolean)","depth":5},{"value":"onDragStart (Function)","depth":5},{"value":"onDrag (Function)","depth":5},{"value":"onDragEnd (Function)","depth":5},{"value":"className (String)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/marker","title":"Marker"},{"excerpt":"NavigationControl This is a React equivalent of Mapbox's  NavigationControl ,\nwhich provides zoom buttons and a compass button. Properties onViewportChange  (Function) Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing  InteractiveMap 's  onViewportChange . showCompass  (Boolean) default:  true Show or hide the compass button showZoom  (Boolean) default:  true Show or hide the zoom buttons zoomInLabel  (String) default:  Zoom In Label applied to the zoom in control button. zoomOutLabel  (String) default:  Zoom Out Label applied to the zoom out control button. compassLabel  (String) default:  Reset North Label applied to the compass control button. className  (String) Assign a custom class name to the container of this control. style  (Object) default:  {position: 'absolute'} A  React style  object applied to this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source navigation-control.js","headings":[{"value":"NavigationControl","depth":1},{"value":"Properties","depth":2},{"value":"onViewportChange (Function)","depth":5},{"value":"showCompass (Boolean)","depth":5},{"value":"showZoom (Boolean)","depth":5},{"value":"zoomInLabel (String)","depth":5},{"value":"zoomOutLabel (String)","depth":5},{"value":"compassLabel (String)","depth":5},{"value":"className (String)","depth":5},{"value":"style (Object)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/navigation-control","title":"NavigationControl"},{"excerpt":"PointerEvent Event object passed to some of  InteractiveMap 's callback props. Members type  (String) The name of the event. point  (Array) The screen coordinates that is being clicked. lngLat  (Array) The geo coordinates that is being clicked. target  (Element) The target element of the pointer event. srcEvent  (Object) The original browser event.","headings":[{"value":"PointerEvent","depth":1},{"value":"Members","depth":2},{"value":"type (String)","depth":5},{"value":"point (Array)","depth":5},{"value":"lngLat (Array)","depth":5},{"value":"target (Element)","depth":5},{"value":"srcEvent (Object)","depth":5}],"slug":"docs/api-reference/pointer-event","title":"PointerEvent"},{"excerpt":"Popup This is a React equivalent of Mapbox's  Popup Control , which can be used to\nshow tooltip popups with custom HTML content at specific locations on the map. Properties latitude  (Number, required) Latitude of the anchor. longitude  (Number, required) Longitude of the anchor. altitude  (Number) default:  0 Altitude of the anchor. offsetLeft  (Number) default:  0 Offset of the anchor from the left in pixels, negative number indicates left. offsetTop  (Number) default:  0 Offset of the anchor from the top in pixels, negative number indicates up. closeButton  (Boolean) default:  true If  true , a close button will appear in the top right corner of the popup. closeOnClick  (Boolean) default:  true If  true , the popup will be closed when the map is clicked. tipSize  (Number) default:  10 Size of the tip pointing to the coordinate. anchor  (String) default:  bottom A string indicating the popup's position relative to the coordinate.\nOptions are  top ,  bottom ,  left ,  right ,  top-left ,  top-right ,  bottom-left , and  bottom-right . dynamicPosition  (Boolean) default:  true If  true , the anchor will be dynamically adjusted to ensure the popup falls within the map container. sortByDepth  (Boolean) default:  false If  true , the order of the popups will be dynamically rearranged to ensure that the ones anchored closer to the camera are rendered on top. Useful when showing multiple popups in a tilted map. onClose  (Function) Callback when the user closes the popup. className  (String) Assign a custom class name to the container of this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source popup.js","headings":[{"value":"Popup","depth":1},{"value":"Properties","depth":2},{"value":"latitude (Number, required)","depth":5},{"value":"longitude (Number, required)","depth":5},{"value":"altitude (Number)","depth":5},{"value":"offsetLeft (Number)","depth":5},{"value":"offsetTop (Number)","depth":5},{"value":"closeButton (Boolean)","depth":5},{"value":"closeOnClick (Boolean)","depth":5},{"value":"tipSize (Number)","depth":5},{"value":"anchor (String)","depth":5},{"value":"dynamicPosition (Boolean)","depth":5},{"value":"sortByDepth (Boolean)","depth":5},{"value":"onClose (Function)","depth":5},{"value":"className (String)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/popup","title":"Popup"},{"excerpt":"ScaleControl This is a React equivalent of Mapbox's  ScaleControl . Properties maxWidth  (Number) default:  100 The maximum length of the scale control in pixels. unit  (String) default:  'metric' Unit of the distance, one of  'imperial' ,  'metric'  or  'nautical' . className  (String) Assign a custom class name to the container of this control. style  (Object) default:  {position: 'absolute'} A  React style  object applied to this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source scale-control.js","headings":[{"value":"ScaleControl","depth":1},{"value":"Properties","depth":2},{"value":"maxWidth (Number)","depth":5},{"value":"unit (String)","depth":5},{"value":"className (String)","depth":5},{"value":"style (Object)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/scale-control","title":"ScaleControl"},{"excerpt":"Source This component allows apps to create a  map source  using React. It may contain  Layer  components as children. Properties The props provided to this component should be conforming to the  Mapbox source specification or  CanvasSourceOptions . Note that the map component's  mapStyle  prop defaults to  mapbox://styles/mapbox/light-v8 . To use an empty base map with your own sources, you need to override the prop, e.g.: When props change  shallowly , the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit. Once a  <Source>  is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's  key prop  to give each element a stable identity. id  (String) Unique identifier of the source. If not provided, a default id will be assigned. type  (String, required) Type of the source. Source source.js","headings":[{"value":"Source","depth":1},{"value":"Properties","depth":2},{"value":"id (String)","depth":5},{"value":"type (String, required)","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/source","title":"Source"},{"excerpt":"StaticMap The simplest  React  wrapper around  MapboxGL . This is designed to be completely\nstatic, and should be used to render a map with no interactivity. For a component\nthat supports full user interactivity, see  InteractiveMap . Properties Initialization The following props are used during the creation of the Mapbox map. attributionControl  (Boolean) default:  true Equivalent to Mapbox's  attributionControl   option . If  true , shows Mapbox's attribution control. disableTokenWarning  (Boolean) default:  false If the provided API access token is rejected by Mapbox,  StaticMap  renders a warning instead of failing silently. If you know what you are doing and want to hide this warning anyways, set this prop to  true . gl  (WebGLContext) This prop is experimental. Use an existing WebGLContext instead of creating a new one. This allows multiple libraries to render into a shared buffer. Use with caution. mapboxApiAccessToken  (String) Mapbox API access token for  MapboxGL . Required when using Mapbox vector tiles/styles\nMapbox WebGL context creation option. Useful when you want to export the canvas as a PNG mapboxApiUrl  (String) default:  https://api.mapbox.com Enables the use of private and country specific servers Mapbox servers, e.g.  https://api.mapbox.cn/ . mapOptions  (Object) default:  {} Non-public API, see  https://github.com/visgl/react-map-gl/issues/545 An object of additional options to be passed to Mapbox's  Map  constructor . Options specified here\nwill take precedence over those same options if set via props. preserveDrawingBuffer  (Boolean) default:  false Equivalent to Mapbox's  preserveDrawingBuffer   option . If  true , the map's canvas can be exported to a PNG using  map.getCanvas().toDataURL() . preventStyleDiffing  (Boolean) default:  false If  mapStyle  is assigned an Immutable object, when the prop changes,  StaticMap  can diff between the two values and call the appropriate Mapbox API such as  addLayer ,  removeLayer ,  setStyle ,  setData , etc.\nThis allows apps to update data sources and layer styles efficiently. In use cases such as animation or dynamic showing/hiding layers, style diffing prevents the map from reloading and flickering when the map style changes. There are known issues with style diffing. As stopgap, use this option to prevent style diffing. reuseMaps  (Boolean) default:  false This prop is experimental. If  true , when the map component is unmounted, instead of calling  remove  on the Mapbox map instance, save it for later reuse. This will avoid repeatedly creating new Mapbox map instances if possible. Applications that frequently mount and unmount maps may try this prop to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations. transformRequest  (Function) default:  null A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.\nExpected to return an object with a  url  property and optionally  headers  and  credentials  properties.  Equivalent to Mapbox's  transformRequest   map option . Map State mapStyle  (String | Object | Immutable.Map) default:  'mapbox://styles/mapbox/light-v8' The Mapbox style. A string url or a\n MapboxGL style \nobject (regular JS object or Immutable.Map). Whenever the  mapStyle  prop changes, the component will attempt to update the style of the underlying Mapbox map. The behavior can be further customized with the  preventStyleDiffing  prop. mapStyle  is ignored when explicitly set to  null . width  (Number | String, required) The width of the map. Can be either a number in pixels, or a valid CSS string. height  (Number | String, required) The height of the map. Can be either a number in pixels, or a valid CSS string. latitude  (Number) The latitude of the center of the map, as a top level prop. Only used if  viewState  is not supplied. longitude  (Number) The longitude of the center of the map, as a top level prop. Only used if  viewState  is not supplied. zoom  (Number) The tile zoom level of the map, as a top level prop. Only used if  viewState  is not supplied. Bounded implicitly by default  minZoom  and  maxZoom  of  MapboxGL bearing  (Number) default:  0 Specify the bearing of the viewport, as a top level prop. Only used if  viewState  is not supplied. pitch  (Number) default:  0 Specify the pitch of the viewport, as a top level prop. Only used if  viewState  is not supplied.. altitude  (Number) default:  1.5 Non-public API, see  https://github.com/mapbox/mapbox-gl-js/issues/1137 . Altitude of the viewport camera, relative to screen height. viewState  (Object) An object containing the view state of the map specified by the following fields: latitude  (Number) - The latitude of the center of the map. longitude  (Number) - The longitude of the center of the map. zoom  (Number) - The tile zoom level of the map. Bounded implicitly by default  minZoom  and  maxZoom  of  MapboxGL . bearing  (Number) - default:  0  - The bearing of the viewport. pitch  (Number) - default:  0  - The pitch of the viewport. altitude  (Number) - default:  1.5 screen heights Note: Either the  viewState , or the  latitude ,  longitude  and  zoom  properties need to be specified. Render Options asyncRender  (Boolean) default:  false If  true , let Mapbox manage its own render cycle. This is the behavior prior to v4.1. If  false , force Mapbox canvas to redraw with DOM updates. This will make the map synchronize better with other controls during prop-driven viewport changes. style  (Object) The CSS style of the map container. visible  (Boolean) default:  true Whether the map is visible. Unmounting and re-mounting a Mapbox instance is known to be costly. This option offers a way to hide a map using CSS style. visibilityConstraints  (Object) An object that specifies bounds for viewport props with  min* ,  max*  keys. If the viewport props are outside of these constraints, the Mapbox map is automatically hidden. Default:  { minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 } Callbacks onLoad  (Function) default:  () => {} A callback run when the map emits a  load  event.  Mapbox docs onResize  (Function) default:  () => {} A callback run when the map size has changed. onError  (Function) default:  console.error A callback run when the map emits an  error  event.  Mapbox docs Methods getMap Returns the Mapbox instance if initialized. The  Map  instance will have full access to  MapboxGL's API . getMap() queryRenderedFeatures Use Mapbox's  queryRenderedFeatures  API to find features at point or in a bounding box. If the  parameters  argument is not specified, only queries the layers with the  interactive  property in the layer style. queryRenderedFeatures(geometry, parameters) geometry  { [Number, Number  |  [[Number, Number, [Number, Number  - Point or an array of two points defining the bounding box. Coordinates in pixels. parameters  - Query options. For more details, see  Mapbox API documentation . Source static-map.js","headings":[{"value":"StaticMap","depth":1},{"value":"Properties","depth":2},{"value":"Initialization","depth":3},{"value":"attributionControl (Boolean)","depth":5},{"value":"disableTokenWarning (Boolean)","depth":5},{"value":"gl (WebGLContext)","depth":5},{"value":"mapboxApiAccessToken (String)","depth":5},{"value":"mapboxApiUrl (String)","depth":5},{"value":"mapOptions (Object)","depth":5},{"value":"preserveDrawingBuffer (Boolean)","depth":5},{"value":"preventStyleDiffing (Boolean)","depth":5},{"value":"reuseMaps (Boolean)","depth":5},{"value":"transformRequest (Function)","depth":5},{"value":"Map State","depth":3},{"value":"mapStyle (String | Object | Immutable.Map)","depth":5},{"value":"width (Number | String, required)","depth":5},{"value":"height (Number | String, required)","depth":5},{"value":"latitude (Number)","depth":5},{"value":"longitude (Number)","depth":5},{"value":"zoom (Number)","depth":5},{"value":"bearing (Number)","depth":5},{"value":"pitch (Number)","depth":5},{"value":"altitude (Number)","depth":5},{"value":"viewState (Object)","depth":5},{"value":"Render Options","depth":3},{"value":"asyncRender (Boolean)","depth":5},{"value":"style (Object)","depth":5},{"value":"visible (Boolean)","depth":5},{"value":"visibilityConstraints (Object)","depth":5},{"value":"Callbacks","depth":3},{"value":"onLoad (Function)","depth":5},{"value":"onResize (Function)","depth":5},{"value":"onError (Function)","depth":5},{"value":"Methods","depth":2},{"value":"getMap","depth":5},{"value":"queryRenderedFeatures","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/static-map","title":"StaticMap"},{"excerpt":"SVGOverlay Allows applications to overlay data on top of maps using a SVG container. Properties redraw  (Function) Called every time the map updates. Parameters: width  (Number) - width of the viewport height  (Number) - height of the viewport project  (Function) - get screen position  [x, y]  from geo coordinates  [lng, lat] unproject  (Function) - get geo coordinates  [lng, lat]  from screen position  [x, y] style  (Object) Additional css styles of the  svg  container. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  false Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  false Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  false Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Source svg-overlay.js","headings":[{"value":"SVGOverlay","depth":1},{"value":"Properties","depth":2},{"value":"redraw (Function)","depth":5},{"value":"style (Object)","depth":3},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/svg-overlay","title":"SVGOverlay"},{"excerpt":"WebMercatorViewport The  WebMercatorViewport  class takes map camera states ( latitude ,  longitude ,  zoom ,  pitch ,  bearing  etc.),\nand 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) fovy number see below Field of view of camera in degrees altitude number see below Altitude of camera in screen units position number[] null Offset of the camera, in meters Remarks: If either  altitude  or  fovy  is not provided, the missing value is computed from the other using  altitudeToFovy() / fovyToAltitude() . Altitude has a default value that matches assumptions in mapbox-gl. It is only used if both  altitude  and  fovy  are not supplied. Field of view is independent from altitude, provide  altitudeToFovy(1.5)  (default value) to match assumptions in mapbox-gl width  and  height  are forced to 1 if supplied as 0, to avoid\ndivision by zero. This is intended to reduce the burden of apps to\nto check values before instantiating a  Viewport . When using Mercator projection, per cartographic tradition, longitudes and\nlatitudes are specified as degrees. Methods project(lngLatZ, options) 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 options Object {} named options options.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\nrendering. unproject(xyz, options) 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 options Object {} named options options.topLeft Boolean true If  true  projected coords are top left, otherwise bottom left options.targetZ number 0 If pixel depth  z  is not specified in  xyz , use  options.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  options.targetZ : returns  [lng, lat] . If input is  [x, y]  with  options.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] getBounds(options) Get the axis-aligned bounding box of the current visible area. options.z  (number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding box at a specific elevation. Default  0 . Returns: [[lon, lat], [lon, lat]]  as the south west and north east corners of the smallest orthogonal bounds that encompasses the visible region. getBoundingRegion(options) Get the vertices of the current visible region. options.z  (number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding region at a specific elevation. Default  0 . Returns: An array of 4 corners in  [longitude, latitude, altitude]  that define the visible region. fitBounds(bounds, options: object) Get a new flat viewport that fits around the given bounding box. bounds  ([ number,number , number,number ]) - an array of two opposite corners of\nthe bounding box. Each corner is specified in  [lon, lat] . options.padding  (number|{top:number, bottom: number, left: number, right: number}, optional) - The amount of\npadding in pixels to add to the given bounds from the edge of the viewport. If padding is set as object, all parameters are\nrequired. options.offset  ( number,number , optional) - The center of the given bounds relative to the viewport's center,  [x, y]  measured in pixels. opts.minExtent  (number, optional) - If supplied, the bounds used to calculate the new map settings will be expanded if the delta width or height of the supplied  bounds  is smaller than this value. opts.maxZoom = 24  (number, optional) - The returned zoom value will be capped to this value. Avoids returning infinite  zoom  when the supplied  bounds  have zero width or height deltas. Returns: A new  WebMercatorViewport  instance getMapCenterByLngLatPosition(options: object): [number, number] Get the map center that place a given  lng, lat  coordinate at screen point  x, y . Parameters: options.lngLat  (Array, required) -  lng,lat  coordinates of a location on the sphere. options.pos  (Array, required) -  x,y  coordinates of a pixel on screen. Returns: [longitude, latitude]  as the new map center","headings":[{"value":"WebMercatorViewport","depth":1},{"value":"Constructor","depth":2},{"value":"Methods","depth":2},{"value":"project(lngLatZ, options)","depth":5},{"value":"unproject(xyz, options)","depth":5},{"value":"projectFlat(lngLat, scale)","depth":5},{"value":"unprojectFlat(xy, scale)","depth":5},{"value":"getBounds(options)","depth":5},{"value":"getBoundingRegion(options)","depth":5},{"value":"fitBounds(bounds, options: object)","depth":5},{"value":"getMapCenterByLngLatPosition(options: object): [number, number]","depth":5}],"slug":"docs/api-reference/web-mercator-viewport","title":"WebMercatorViewport"},{"excerpt":"Contributing to react-map-gl Thanks for taking the time to contribute! PRs and bug reports are welcome, and we are actively looking for new maintainers. Setting Up Dev Environment The  master  branch is the active development branch. Building react-map-gl locally from the source requires node.js  >=8 .\nWe use  yarn  to manage the dependencies. Test: Test in Node: Test in browser (can use Chrome dev tools for debugging): Pull Requests Any intended change to the code base must open a  pull request  and be approved.  Generally speaking, all PRs are open against the  master  branch, unless the feature being affected no longer exists on master. PR Checklist Tests npm run test  must be successful. New code should be covered by unit tests whenever possible. Documentation If public APIs are added/modified, update component documentation in  docs/api-reference . Breaking changes and deprecations must be added to  docs/upgrade-guide.md . Noteworthy new features should be added to  docs/whats-new.md . Description on GitHub Link to relevant issue. Label with a milestone (latest release or vNext). If public APIs are added/modified, describe the intended behavior. If visual/interaction is affected, consider attaching a screenshot/GIF. Release react-map-gl follows the  Semantic Versioning  guidelines. Steps for publishing releases can be found  here . Community Governance vis.gl is part of the  Urban Computing Foundation . See the organization's  Technical Charter . Technical Steering Committee react-map-gl development is governed by the vis.gl Technical Steering Committee (TSC). Maintainers Xiaoji Chen Xintong Xia Maintainers of react-map-gl have commit access to this GitHub repository, and take part in the decision making process. If you are interested in becoming a maintainer, read the  governance guidelines . The vis.gl TSC meets monthly and publishes meeting notes via a  mailing list .\nThis mailing list can also be utilized to reach out to the TSC. Code of Conduct Please be mindful of and adhere to the Linux Foundation's  Code of Conduct  when contributing to react-map-gl.","headings":[{"value":"Contributing to react-map-gl","depth":1},{"value":"Setting Up Dev Environment","depth":2},{"value":"Pull Requests","depth":2},{"value":"PR Checklist","depth":3},{"value":"Release","depth":2},{"value":"Community Governance","depth":2},{"value":"Technical Steering Committee","depth":3},{"value":"Maintainers","depth":3},{"value":"Code of Conduct","depth":2}],"slug":"docs/contributing","title":"Contributing to react-map-gl"},{"excerpt":"Upgrade Guide Upgrading to v5.3/v6.1 MapContext  is now an official API. The experimental  _MapContext  export will be removed in a future release. react-virtualized-auto-sizer  is no longer a dependency. Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the  interaction options : Source  and  Layer  components no longer expose imperative methods via  ref  as part of the migration to functional components. This is to comply with the pattern recommended by the latest React. If you used to call  sourceRef.getSource() , it can be replaced with  mapRef().getMap().getSource(sourceId) . If you used to call  layerRef.getLayer() , it can be replaced with  mapRef().getMap().getLayer(layerId) . Upgrading to v6 A valid Mapbox access token is always required. The default value of  InteractiveMap 's  maxPitch  prop is changed to  85  from  60 . mapbox-gl  v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message  m is not defined . Find solutions in  this thread . Upgrading to v4 onChangeViewport  is removed, use  onViewportChange  instead Immutable.js  is no longer a dependency Export  experimental.MapControls  is removed, use  MapController  instead InteractiveMap 's  mapControls  prop is renamed to  controller Removed support for the deprecated  interactive  property on the layer styles. Use the  interactiveLayerIds  prop to specify which layers are clickable. Upgrading to v3.2 The latest mapbox-gl release requires stylesheet to be included at all times. See  Get Started  for information about styling. Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies. Upgrading to v3 v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided. Version Requirements The  Node Version Requirement  for  building  react-map-gl is now  >=v6.4.0 . Using prebuilt react-map-gl does  NOT  has this limitation. This is introduced by  Mapbox GL JS v0.38.0 MapGL Component Two Map Components  - v3 now splits the Map component into two React components:  StaticMap  and  InteractiveMap .  InteractiveMap  is the default export, and designed to be as compatible as possible with the v2 default component. onChangeViewport  callback now includes  width  and  height . The  viewport  parameter passed to the  onChangeViewport  callback now includes  width  and  height . Application code that composed the  viewport  with  width  and  height  may have to be updated. Please double check your render code if you relied on this behavior. Overlays Some Overlays Moved to Examples  -  Some less frequently used overlays ( DraggablePointsOverlay ,  ChoroplethOverlay ,  ScatterplotOverlay ), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application. Overlays must be Children of the Map  - Overlays  must  now be rendered as children of the main  react-map-gl  component to automatically sync with the map viewport. fitBounds  utility function The  fitBounds  utility has been moved to the  math.gl  library. The function can now be called as follows: Deprecations We have started to deprecate a few React props. In all the cases below, the old  props  will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new  props  as soon as possible. Old Prop New Prop onChangeViewport(<viewport>) onViewportChange(<viewport>) onHoverFeatures(<features>) onHover(<event>) onClickFeatures(<features>) onClick(<event>) perspectiveEnabled [default: false] dragRotate [default: true] Upgrading to v2 v2 is API compatible with v1, however if you are still using  v1  of react-map-gl, make sure that you first upgrade: Your  node  version to  v4  or higher Your  react  version to  15.4  or higher. Background:  mapbox-gl  0.31.0 introduced a hard dependency on Node >= v4. Upgrading to v1 (Upgrading from 0.6.x) Importing Overlays  - The map overlay components ( HTMLOverlay ,  CanvasOverlay ,  SVGOverlay  etc) are now named exports. They previously had to be imported via their relative source paths: Map State  - The map state reported by  onViewportChanged  will now contain additional state fields (tracking not only  pitch  and  bearing  needed for perspective mode, but also transient information about how the projection is being changed by the user). This information must be passed back to the react-map-gl component in the next render. To simplify and future proof applications, it is recommended to simply save the entire  mapState  in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like  longitude ,  latitude  and  zoom ).","headings":[{"value":"Upgrade Guide","depth":1},{"value":"Upgrading to v5.3/v6.1","depth":2},{"value":"Upgrading to v6","depth":2},{"value":"Upgrading to v4","depth":2},{"value":"Upgrading to v3.2","depth":2},{"value":"Upgrading to v3","depth":2},{"value":"Version Requirements","depth":3},{"value":"MapGL Component","depth":3},{"value":"onChangeViewport callback now includes width and height.","depth":4},{"value":"Overlays","depth":3},{"value":"fitBounds utility function","depth":3},{"value":"Deprecations","depth":3},{"value":"Upgrading to v2","depth":2},{"value":"Upgrading to v1","depth":2}],"slug":"docs/upgrade-guide","title":"Upgrade Guide"},{"excerpt":"What's new react-map-gl v5.3/v6.1 Release date: Jan 27, 2020 Highlights TypeScript and Flow typings  are now published with the library More controller customizations.  Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated  interaction options  for details. A new  eventRecognizerOptions  prop is added for fine-tuning the interaction experience. New component:  AttributionControl Promoted to official API:  MapContext Resolved React error over attempted state update during render GeolocateControl  added supports for  showAccuracyCircle All controls now support inline styling with a  style  prop All components and examples have been rewritten as functional components react-map-gl v6.0 Release date: Dec 16, 2020 What's Changed The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are  important changes  to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do  NOT  upgrade to this version, and consider your options discussed in  this document . See  upgrade guide  for a complete list of breaking changes. react-map-gl v5.2 Release date: Jan 6, 2020 Highlights New Components :  ScaleControl NavigationControl : new  label  prop GeolocateControl : new  label ,  onGeolocate ,  auto  props New Export :  WebMercatorViewport  is re-exported from the  viewport-mercator-project  library for ease of use. It's recommended to import it from  react-map-gl  instead to avoid future dependency change. New Example :  Clusters react-map-gl v5.1 Release date: Oct 30, 2019 Highlights New Components :  Layer  and  Source  have been added to provide better React parity with the  Mapbox GL JS  API. Viewport transition :  transitionDuration  can be set to  'auto'  when using  FlyToInterpolator . New Example : Add an  example  with drawing library  react-map-gl-draw . react-map-gl v5.0 Release date: May 31, 2019 What's Changed The only change between the 5.0 release and the latest 4.1 release is Mapbox GL JS v1.0. By using this version, you opt into Mapbox's new pricing model, which bills per map load instead of map views. 5.0.x and 4.1.x will continue to update in parallel with otherwise identical features until November 2019 when Mapbox moves all users of 0.xx to a new pricing scheme. For more details, see mapbox's  changelog  and  blog post . Alongside Mapbox GL JS's new milestone, we have relaxed the  mapbox-gl  dependency from locking minor release ( ~0.53.0 ) to major release ( ^1.0.0 ). This will allow developers to upgrade faster without waiting for a new release from react-map-gl. react-map-gl v4.1 Release date: Mar 14, 2019 Highlights New Components :  FullscreenControl ,  GeolocateControl  have been added to provide better React parity with the  Mapbox GL JS  API. New callback props   InteractiveMap  supports more callbacks: onNativeClick react-map-gl v4.0 Release date: Nov 5, 2018 Highlights Relative dimensions  Both  InteractiveMap  and  StaticMap  now support CSS strings supplied to map  width  and  height  props. New  onResize  callback is fired when the map resizes. React 16  Upgrade to React 16.3 context and ref patterns Babel 7  Upgrade build system to Babel 7, better support for tree-shaking Style diffing  Now use Mapbox's native style diffing. Immutable is no longer required. Draggable Markers   Marker  component now supports a new prop  draggable , along with callbacks  onDragStart ,  onDrag , and  onDragEnd . 3d Popups   Popup  component now supports a new prop  sortByDepth  to enable proper occlusion when multiple popups are used in a tilted map. Interaction states   onViewportChange  is now called with richer descriptors of the user interaction, including  isPanning ,  isZooming  and  isRotating . Interactive layers  Dropped the requirement for the deprecated  interactive  property on the layer styles. Use the  interactiveLayerIds  prop to specify which layers are clickable. New callback props   InteractiveMap  supports more callbacks: onDblClick onMouseDown onMouseMove onMouseUp onTouchStart onTouchMove onTouchEnd onMouseEnter onMouseLeave onWheel onMouseOut See  upgrade guide  for breaking changes. react-map-gl v3.3 Release date: July, 2018 Highlights New  viewState  Property : Makes it possible to specify all map state properties ( longitude ,  latitude ,  zoom ,  bearing  and  pitch ) as a single property. New  onViewStateChange  callback : An alternative callback that matches the new  viewState  prop. react-map-gl v3.2 Realease date: January, 2018 Highlights Viewport transition : feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl. Better parity of Mapbox interaction : navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning. Support for Map Reuse (experimental) : A new property  reuseMaps  is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations. mapbox-gl 0.42.2 New props  of the InteractiveMap component: Map creation:  transformRequest ,  reuseMaps Interaction:  touchZoom ,  touchRotate Transition:  transitionDuration ,  transitionInterpolator ,  transitionEasing ,  transitionInterruption ,  onTransitionStart ,  onTransitionInterrupt ,  onTransitionEnd react-map-gl v3.1 Release date: October 19, 2017 Highlights Event handling Support right mouse drag to rotate Support keyboard navigation Allow controls and overlays to block map interactions React 16  - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at  >=15.4.x . mapbox-gl v0.40.1 No Token warning : react-map-gl now renders an HTML message if no mapbox token is supplied. react-map-gl v3.0 Release date: July 27th, 2017 Highlights Latest Mapbox GL JS : Bumps  Mapbox GL JS  to  0.38 . Multi-Touch Support : Full support for multi-touch gestures such as pinch-to-zoom and rotate. New Components : The  MapGL  component has been split into  StaticMap  and  InteractiveMap  (the default). Also,  Popup ,  Marker ,  NavigationControl  have been added to provide better React parity with the  Mapbox GL JS  API. Improved Overlay Components : Supplying viewport props ( width   height   zoom   longitude  and  latitude ) are no longer required if you render  SVGOverlay ,  CanvasOverlay  or  HTMLOverlay  as a child of the map. Perspective mode is now supported in all overlays. New Props :  maxPitch ,  minPitch ,  dragPan ,  doubleClickZoom ,  touchZoomRotate ,\n scrollZoom  are now provided to allow granular control of map interactivity. Documentation : Significantly expanded and linked with our other geospatial frameworks. Examples : New stand-alone examples to get you started instantly with the new features. Event Handling : New event handling architecture that enables full customization of event handling (experimental). Components InteractiveMap (New, MapGL replacement) This is a wrapper on top of  StaticMap . It takes all the props of  StaticMap  and additional ones such as  onViewportChange ,  scrollZoom ,  dragRotate , etc. to control interactivity on the map. See  Source Code  for more information. StaticMap (New) This is the React wrapper around  Mapbox GL JS  and takes in viewport properties such as  width ,  height ,  latitude ,  longitude . Style diffing and updating logic also live here. See  Source Code  for more information. Overlays Three overlays ( ScatterplotOverlay ,  DraggablePointsOverlay ,  ChoroplethOverlay ), have been moved out of the library and are now only provided as examples. Property Changes Property Names  - some prop names have been modernized, the old ones will still work for now with a warning. Internal Properties  such as  isHovering ,  isDragging ,  startDragLngLat  have been removed.\nThese were never meant to be useful publicly and have caused confusions in the past. Utilities fitBounds :  fitBounds  has been moved to another repository and has been rewritten to provide a more logical interface. For more information, see the  Upgrade Guide . react-map-gl v2.0 Date: Jan 17, 2017 Highlights Latest mapbox-gl : Bump  mapbox-gl  to v0.31.0 new maxZoom prop  - Add  maxZoom  prop and defaults to  20 New onLoad prop  - Add  onLoad  event handler new onClick prop  - Add  onClick  prop handler (#140) react-map-gl v1.0 Perspective Mode  - Now supports  bearing  and  pitch  properties, per mapbox-gl api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided Support for ES6 imports  - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) previously had to be imported via their relative source paths can now be imported directly using `import {SVGOverlay} from 'react-map-gl'. react-map-gl v0.6 Initial public version","headings":[{"value":"What's new","depth":1},{"value":"react-map-gl v5.3/v6.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v6.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v5.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v4.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v4.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.3","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.0","depth":2},{"value":"Highlights","depth":3},{"value":"Components","depth":3},{"value":"InteractiveMap (New, MapGL replacement)","depth":4},{"value":"StaticMap (New)","depth":4},{"value":"Overlays","depth":4},{"value":"Property Changes","depth":3},{"value":"Utilities","depth":3},{"value":"react-map-gl v2.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v1.0","depth":2},{"value":"react-map-gl v0.6","depth":2}],"slug":"docs/whats-new","title":"What's new"},{"excerpt":"Adding Custom Data Native Mapbox Layers You can inject data and mapbox native layers using the  Source  and  Layer  components: For details about data sources and layer configuration, check out the  Mapbox style specification . For dynamically updating data sources and layers, check out the  GeoJSON  and  GeoJSON animation  examples. Overlays react-map-gl provides a basic overlay API that enables applications to overlay data on top of maps.\nThey are great for creating light-weight custom drawings. Example Built-in Overlays SVGOverlay HTMLOverlay CanvasOverlay Example Overlays There are a couple of  additional overlays  in the examples folder that can be copied into applications  ScatterplotOverlay ,  ChoroplethOverlay . Third-party overlays are also available. For example, the  heatmap-overlay  module uses  webgl-heatmap  to create geographic heatmaps. Other vis.gl Libraries For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the  vis.gl  ecosystem, a suite of high-performance data visualization tools for the Web. deck.gl  - WebGL-powered framework for the visualization of large datasets. loaders.gl  - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data. nebula.gl  - 3D-enabled GeoJSON editing based on deck.gl and React.","headings":[{"value":"Adding Custom Data","depth":1},{"value":"Native Mapbox Layers","depth":2},{"value":"Overlays","depth":2},{"value":"Example","depth":3},{"value":"Built-in Overlays","depth":3},{"value":"Example Overlays","depth":3},{"value":"Other vis.gl Libraries","depth":2}],"slug":"docs/get-started/adding-custom-data","title":"Adding Custom Data"},{"excerpt":"FAQ Enable Right-to-Left Language Support This is the same as  import {setRTLTextPlugin} from 'mapbox-gl'  in the browser, but will not crash in node. The export mainly offers a convenience when using server-side rendering. To use this API, consult Mapbox's  setRTLTextPlugin  documentation. Where is fitBounds? You can use the  WebMercatorViewport  utility to find the target viewport that fits around a longitude-latitude bounding box: Documentation of WebMercatorViewport I called flyTo/panTo and all controls went out of sync You cannot manipulate the map camera via  getMap()  and the native mapbox-gl API. To conform to the reactive programming paradigm, all camera changes should be driven by prop changes on the React component. Circumventing this will break the binding between React components and the underlying map instance. Instead, use the  InteractiveMap 's transition props. See  viewport transition  for examples. mapbox-gl-draw does not work with react-map-gl Unfortunately, react-map-gl implements its own interative logic and disables the native event handling of mapbox-gl. Short explanation: mapbox-gl is not designed to support React. Long explanation: When using react-map-gl, we have two asynchronous rendering loops, React and Mapbox. Mapbox's  move  events are only fired after the camera changes and there is no way to control how and when the map rerenders. If we update React states upon the  move  events, all React controls/overlays may only get updated one animation frame after the map rerender. You can find discussions  here  and  here . Because of this, any mapbox-gl control that listens to the native map events will not work. An equivelant to mapbox-gl-draw is  react-map-gl-draw . You can find an example  here .","headings":[{"value":"FAQ","depth":1},{"value":"Enable Right-to-Left Language Support","depth":2},{"value":"Where is fitBounds?","depth":2},{"value":"I called flyTo/panTo and all controls went out of sync","depth":2},{"value":"mapbox-gl-draw does not work with react-map-gl","depth":2}],"slug":"docs/get-started/faq","title":"FAQ"},{"excerpt":"Get Started Installation Using  react-map-gl  requires  node >= v4  and  react >= 16.3 . Example See full project setup in  get-started examples Styling The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly. You may add the stylesheet to the head of your page: Find out your mapbox version by running  yarn list mapbox-gl  or  npm ls mapbox-gl . Or embed it in your app by using -  browserify-css \nwith Browserify or -  css-loader  with Webpack: Using with Browserify, Webpack, and other JavaScript Bundlers browserify  - react-map-gl is extensively tested with  browserify  and works without configuration. webpack  - Most of the provided react-map-gl examples use webpack. Look at the  get started examples  folder for minimalist templates. create-react-app  - react-map-gl is compatible with  create-react-app . create-react-app-typescript  - react-map-gl is compatible with  create-react-app-typescript . You can see an example  here . There's many other ready-to-run  examples  you can take a look at if you need more inspiration. Using with a mapbox-gl Fork Install your choice of fork along with react-map-gl, for example: In your bundler's configuration, set the forked library to replace any reference from mapbox-gl. This can be done in Webpack with something like: In rollup:","headings":[{"value":"Get Started","depth":1},{"value":"Installation","depth":2},{"value":"Example","depth":2},{"value":"Styling","depth":2},{"value":"Using with Browserify, Webpack, and other JavaScript Bundlers","depth":2},{"value":"Using with a mapbox-gl Fork","depth":2}],"slug":"docs/get-started/get-started","title":"Get Started"},{"excerpt":"About Mapbox Tokens react-map-gl  itself is open source and free. It provides a React wrapper for  mapbox-gl  or derived projects.\nDepending on which Mapbox GL JS version (or fork) you use, you may need a Mapbox token. You will need a Mapbox token if you use: react-map-gl@>=6.0.0 , depending on  mapbox-gl@>=2.0.0  and above - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps. react-map-gl@5.x , depending on  mapbox-gl@1.x  - requires an access token only if you load the map styles and tiles from Mapbox's data service. See \"Display Maps Without A Mapbox Token\" section below for using non-Mapbox tiles. To get a Mapbox token, you will need to register on  their website . The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded. There are several ways to provide a token to your app, as showcased in some of the example folders: Provide a  mapboxApiAccessToken  prop to the map component Set the  MapboxAccessToken  environment variable (or set  REACT_APP_MAPBOX_ACCESS_TOKEN  if you are using Create React App) Provide it in the URL, e.g  ?access_token=TOKEN Provide  mapboxApiUrl  prop to the map component to override the default mapbox API URL But we would recommend using something like  dotenv  and put your key in an untracked  .env  file, that will then expose it as a  process.env  variable, with much less leaking risks. Display Maps Without A Mapbox Token It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using mapbox-gl v2.0 and above. The options are: Stay on  react-map-gl@5.x  and  mapbox-gl@1.x . react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox. Use a community fork of mapbox-gl, for example  maplibre-gl . See  using with a mapbox-gl fork  for how to configure your project. To use your own map service, you will need a custom Mapbox GL style that points to your own  vector tile source , and pass it to  ReactMapGL  using the  mapStyle  prop. This custom style must match the schema of your tile source. Open source tile schemas include: TileZen schema OpenMapTiles schema  Some useful resources for creating your own map service: Mapbox Vector Tile Spec Open source tools If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to  ReactMapGL  using the  transformRequest  prop. An example function:","headings":[{"value":"About Mapbox Tokens","depth":1},{"value":"Display Maps Without A Mapbox Token","depth":2}],"slug":"docs/get-started/mapbox-tokens","title":"About Mapbox Tokens"},{"excerpt":"State Management InteractiveMap  is designed to be a stateless component. Its appearance is entirely controlled by the properties that are passed in from its parent. In this architecture, transition works the same way as interaction: the component shall notify the application of \"user intent\" by calling the  onViewportChange  callback, but ultimately the application needs to decide what to do with it. The most simple handling of this intent is to save it and pass it back to the component: User interaction and transition will not work without a valid  onViewportChange  handler. The advantage of this practice is that it ensures a single source of truth regarding the viewport state (in the example above, saved in the  state  of the container component). When you use this viewport state to direct the rendering of other components, it is guaranteed that they will always be synced with the map. You may apply additional constraints to the viewport: Or manipulate the viewport outside of the ReactMap component: Using with Redux If you're using redux, it is very easy to hook this component up to store state in the redux state tree.\nThe simplest way is to take all properties passed to the  onViewportChange  function property and add them\ndirectly into the store. This state can then be passed back to the  <ReactMapGL>  component without any transformation.","headings":[{"value":"State Management","depth":1},{"value":"Using with Redux","depth":2}],"slug":"docs/get-started/state-management","title":"State Management"}]}},"staticQueryHashes":["484347790"]}
\ No newline at end of file
+{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx","path":"/search","result":{"pageContext":{"data":[{"excerpt":"Introduction react-map-gl is a suite of  React  components for\nMapbox GL JS-compatible libraries. Library Description MapLibre An open fork of mapbox-gl v1, that can be used without a mapbox token. Mapbox GL JS v1 The previous version of mapbox GL JS. This version is free open source and can be used with non-mapbox basemaps without a mapbox token. Mapbox GL JS v2 The latest version of Mapbox GL JS. Note that version 2 is not free open source, and a mapbox token is required and billable events are generated even if you do not use mapbox hosted basemaps. Other mapbox-gl forks It may be possible to use react-map-gl with other mapbox forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted. For basemaps: You can load map data from Mapbox's own service. You can create and host your own map data using one of the many  open source tools . New to react-map-gl?  Get Started Want to contribute? See our  Developer Guide Design Philosophy At Uber, we make powerful web tools that contain maps. To manage the complexity of our applications, we fully embrace React and reactive programming. The stock mapbox-gl APIs are  imperative . That is, you instruct the map to do something (for example,  map.flyTo ), and it will execute the command at its own pace. This does not scale when we have many components that need to synchronize with each other. One use case we have is to render two maps side by side, and when the user interacts with one, update both cameras. We draw UI on top of the map using React, pinned to a given geolocation. We also render visualization layers on top of the map using WebGL, most notably with  deck.gl . The mapbox maps, the deck.gl canvas, and React controls' render cycles are all asynchronous. If we listen to the  move  event in the map and tell the other components to update, the other components would always be one frame behind. Ultimately, in the spirit of the  reactive programming paradigm , data always flows  down . In a complex application, any user input or data fetch can affect the rendering of many components. We might store the  source of truth  in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers. As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync. react-map-gl creates a fully reactive wrapper for mapbox-gl. The  InteractiveMap  component is stateless. To move the map camera in anyway, the application must update the component's props. The application can also be confident that the map's camera would never deviate from the props that it's assigned. At first glance, its API may seem verbose to those who come from the imperative world of mapbox-gl. However, it is essential for the correctness of large applications. Limitations This library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map. Because most of the functionality of Mapbox's JS API depends on the use of HTML5 canvases and WebGL, which React is not built to manipulate, the React component does not mirror all the functionality of Mapbox GL JS's Map class. You may access the native Mapbox API exposed by the  getMap()  function in this library. However, proceed with caution as calling the native APIs may break the connection between the React layer props and the underlying map state. Examples of replacing common native API calls with their React equivalents can be found on the  FAQ  page.","headings":[{"value":"Introduction","depth":1},{"value":"Design Philosophy","depth":2},{"value":"Limitations","depth":2}],"slug":"docs","title":"Introduction"},{"excerpt":"Custom Components You may create your own map control components by consuming  MapContext . Using the MapContext The following component renders a label \"(longitude, latitude)\" at the given coordinate: Using the useMapControl hook useMapControl  is an experimental API that makes it easier to create controls with event handling. Calling  useMapControl(opts)  returns an object containing the following fields: context  (MapContext) - the current context value containerRef  (RefObject) - this should be assigned to the  ref  prop of the DOM element that the event listeners should attach to. This hook supports the following options: onScroll  (Function) - called on mouse wheel event. Can be used to stop map from zooming when this component is scrolled. onDragStart  (Function) - called on dragstart event. Can be used to stop map from panning when this component is dragged. onClick  (Function) - called on click event. Can be used to stop map from calling the  onClick  callback when this component is clicked. onDoubleClick  (Function) - called on double click event. Can be used to stop map from zooming when this component is double clicked. onPointerMove  (Function) - called on pointermove event. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered.","headings":[{"value":"Custom Components","depth":1},{"value":"Using the MapContext","depth":2},{"value":"Using the useMapControl hook","depth":2}],"slug":"docs/advanced/custom-components","title":"Custom Components"},{"excerpt":"Custom Map Controller Overriding The Default Map Controller To change the default behavior of map interaction, you can provide a custom map control to the  controller  prop of  InteractiveMap . This custom map control must offer the following interface: setOptions(options)  - called by  InteractiveMap  when props change. Documentation of  the MapController class . Examples A simple example to swap drag pan and drag rotate: Overwrite existing event handling: Listen to additional events: Add a custom callback:","headings":[{"value":"Custom Map Controller","depth":1},{"value":"Overriding The Default Map Controller","depth":2},{"value":"Examples","depth":2}],"slug":"docs/advanced/custom-map-controller","title":"Custom Map Controller"},{"excerpt":"Viewport Transition react-map-gl  does not expose the transition API from  mapbox-gl-js  since it is designed to be a stateless component, and needs to synchronize with separate overlay systems such as deck.gl. Instead, transitions can be defined using  InteractiveMap 's transition props. Example: Fly to a New Location See  viewport animation  for a complete example. Example: Transition Viewport To A Bounding Box You can use the  WebMercatorViewport  utility to find the target viewport that fits around a lngLat bounding box: Documentation of WebMercatorViewport Controlling Map Transitions InteractiveMap's Transition Props See properties of  InteractiveMap . transitionDuration  (Number) transitionInterpolator  (Object) transitionEasing  (Function) transitionInterruption  (Number) onTransitionStart  (Function) onTransitionInterrupt  (Function) onTransitionEnd  (Function) Transition and the onViewportChange Callback InteractiveMap  is designed to be a stateless component. For transitions to work, the application must update the viewport props returned by the  onViewportChange  callback: Remarks: The props returned by the callback may contain transition properties. For example, during panning and rotating, the callback is invoked with  transitionDuration: 0 , meaning that the map movement instantly matches the change of the pointer. When panning or zooming with keyboard, the callback is invoked with a 300ms linear transition. It is recommended that when programatically triggering a transition, always explicitly set the transition properties (interpolator, easing and duration). \"Set and forget\": the values of the following props at the start of a transition carry through the entire duration of the transition: transitionDuration transitionInterpolator transitionEasing transitionInterruption The default interaction/transition behavior can always be intercepted and overwritten in the handler for  onViewportChange . However, if a transition is in progress, the properties that are being transitioned (e.g. longitude and latitude) should not be manipulated, otherwise the change will be interpreted as an interruption of the transition. When using  FlyToInterpolator  for  transitionInterpolator ,  transitionDuration  can be set to  'auto'  where actual duration is auto calculated based on start and end viewports and is linear to the distance between them. This duration can be further customized using  speed  parameter to  FlyToInterpolator  constructor. Transition Interpolators A  TransitionInterpolator  instance must be supplied to the  transitionInterpolator  prop. It contains the following methods: arePropsEqual(currentProps, nextProps)  - called to determine if transition should be triggered when viewport props update. initiateProps(startProps, endProps)  - called before transition starts to pre-process the start and end viewport props. interpolateProps(startProps, endProps, t)  - called to get viewport props in transition.  t  is a time factor between  [0, 1] . react-map-gl offers two built-in interpolator classes: LinearInterpolator FlyToInterpolator","headings":[{"value":"Viewport Transition","depth":1},{"value":"Example: Fly to a New Location","depth":2},{"value":"Example: Transition Viewport To A Bounding Box","depth":2},{"value":"Controlling Map Transitions","depth":2},{"value":"InteractiveMap's Transition Props","depth":3},{"value":"Transition and the onViewportChange Callback","depth":3},{"value":"Transition Interpolators","depth":3}],"slug":"docs/advanced/viewport-transition","title":"Viewport Transition"},{"excerpt":"AttributionControl This is a React equivalent of Mapbox's  AttributionControl . Properties toggleLabel  (String) default:  'Toggle Attribution' Label applied to the toggle button. compact  (Boolean) If  true , force a compact attribution that shows the full attribution on mouse hover. If  false , force the full attribution control. When undefined, shows a responsive attribution that collapses when the map is less than 640 pixels wide. customAttribution  (String| String ) String or strings to show in addition to any other attributions. className  (String) Assign a custom class name to the container of this control. style  (Object) default:  {position: 'absolute'} A  React style  object applied to this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source attribution-control.js","headings":[{"value":"AttributionControl","depth":1},{"value":"Properties","depth":2},{"value":"toggleLabel (String)","depth":5},{"value":"compact (Boolean)","depth":5},{"value":"customAttribution (String|String)","depth":5},{"value":"className (String)","depth":5},{"value":"style (Object)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/attribution-control","title":"AttributionControl"},{"excerpt":"CanvasOverlay Allows applications to overlay data on top of maps using a canvas. Properties redraw  (Function) Called every time the map updates. Parameters: ctx  {CanvasRenderingContext2D} - rendering context of the canvas width  {Number} - width of the viewport height  {Number} - height of the viewport project  {Function} - get screen position  [x, y]  from geo coordinates  [lng, lat] unproject  {Function} - get geo coordinates  [lng, lat]  from screen position  [x, y] captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  false Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  false Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  false Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Source canvas-overlay.js","headings":[{"value":"CanvasOverlay","depth":1},{"value":"Properties","depth":2},{"value":"redraw (Function)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/canvas-overlay","title":"CanvasOverlay"},{"excerpt":"FlyToInterpolator Implements the  TransitionInterpolator  interface. Designed to use with the  transitionInterpolator  prop of  InteractiveMap . This interpolator offers similar behavior to Mapbox's  flyTo  method. Constructor new FlyToInterpolator([options]) Parameters: options  {Object} (optional) curve  (Number, optional, default: 1.414) - The zooming \"curve\" that will occur along the flight path. speed  (Number, optional, default: 1.2) - The average speed of the animation defined in relation to  options.curve , it linearly affects the duration, higher speed returns smaller durations and vice versa. screenSpeed  (Number, optional) - The average speed of the animation measured in screenfuls per second. Similar to  opts.speed  it linearly affects the duration,  when specified  opts.speed  is ignored. maxDuration  (Number, optional) - Maximum duration in milliseconds, if calculated duration exceeds this value,  0  is returned. Source viewport-fly-to-interpolator.js","headings":[{"value":"FlyToInterpolator","depth":1},{"value":"Constructor","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/fly-to-interpolator","title":"FlyToInterpolator"},{"excerpt":"FullscreenControl This is a React equivalent of Mapbox's  FullscreenControl . Properties container  (HTMLElement) container  is the compatible DOM element which should be made full screen. By default, the map container element will be made full screen. label  (String) default:  Toggle fullscreen Label applied to the fullscreen control button. className  (String) Assign a custom class name to the container of this control. style  (Object) default:  {position: 'absolute'} A  React style  object applied to this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source fullscreen-control.js","headings":[{"value":"FullscreenControl","depth":1},{"value":"Properties","depth":2},{"value":"container (HTMLElement)","depth":5},{"value":"label (String)","depth":5},{"value":"className (String)","depth":5},{"value":"style (Object)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/fullscreen-control","title":"FullscreenControl"},{"excerpt":"GeolocateControl This is a React equivalent of Mapbox's  GeolocateControl . Properties Accepts all the options of  Mapbox GeolocateControl . onViewportChange  (Function, optional) Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing  InteractiveMap 's  onViewportChange . onGeolocate  (Function, optional) Callback when Geolocation API position updates. It is called with a Geolocation API  PositionOptions  object. positionOptions  (Object) default:  {enableHighAccuracy: false, timeout: 6000} A Geolocation API  PositionOptions  object. fitBoundsOptions  (Object) default:  {maxZoom: 15} A  fitBounds  options object to use when the map is panned and zoomed to the user's location. The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations. trackUserLocation  (Boolean) default:  false If true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes. showUserLocation  (Boolean) default:  true By default a dot will be shown on the map at the user's location. Set to false to disable. showUserHeading (Boolean) default:  false If true a heading indicator will be shown on the map at the user's location. showAccuracyCircle  (Boolean) default:  true By default, if showUserLocation is  true  , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to  false  to disable. Always disabled when showUserLocation is  false . className  (String) Assign a custom class name to the container of this control. style  (Object) default:  {position: 'absolute'} A  React style  object applied to this control. label  (String) default:  'Find My Location' Label applied to the Geolocate control button. disabledLabel  (String) default:  'Location Not Available' Label applied to the Geolocate control button if geolocation is disabled by the user. auto  (Boolean) default:  false Programmatically triggers geolocate when set to true. Initializing the component with true triggers inside  componentDidMount  where as changing to true at a later point triggers inside  componentDidUpdate . Initally setting as or changing to false has no effect. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source geolocate-control.js","headings":[{"value":"GeolocateControl","depth":1},{"value":"Properties","depth":2},{"value":"onViewportChange (Function, optional)","depth":5},{"value":"onGeolocate (Function, optional)","depth":5},{"value":"positionOptions (Object)","depth":5},{"value":"fitBoundsOptions (Object)","depth":5},{"value":"trackUserLocation (Boolean)","depth":5},{"value":"showUserLocation (Boolean)","depth":5},{"value":"showUserHeading (Boolean)","depth":5},{"value":"showAccuracyCircle (Boolean)","depth":5},{"value":"className (String)","depth":5},{"value":"style (Object)","depth":5},{"value":"label (String)","depth":5},{"value":"disabledLabel (String)","depth":5},{"value":"auto (Boolean)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/geolocate-control","title":"GeolocateControl"},{"excerpt":"HTMLOverlay Allows applications to overlay data on top of maps using a HTML container. Properties redraw  (Function) Called every time the map updates. Parameters: width  {Number} - width of the viewport height  {Number} - height of the viewport project  {Function} - get screen position  [x, y]  from geo coordinates  [lng, lat] unproject  {Function} - get geo coordinates  [lng, lat]  from screen position  [x, y] style  (Object) Additional css styles of the  div  container. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  false Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  false Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  false Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Source html-overlay.js","headings":[{"value":"HTMLOverlay","depth":1},{"value":"Properties","depth":2},{"value":"redraw (Function)","depth":5},{"value":"style (Object)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/html-overlay","title":"HTMLOverlay"},{"excerpt":"default (InteractiveMap) This component renders  MapboxGL  and provides full interactivity support.\nIt uses  StaticMap  underneath to render the final map component.\nThis is the  default  exported component from  react-map-gl . Properties Initialization Inherit the following props from  StaticMap : attributionControl  (Boolean) disableTokenWarning  (Boolean) gl  (WebGLContext) mapboxApiAccessToken  (String) mapboxApiUrl  (String) mapOptions  (Object) preserveDrawingBuffer  (Boolean) preventStyleDiffing  (Boolean) reuseMaps  (Boolean) transformRequest  (Function) Map State Inherit the following props from  StaticMap : mapStyle  (String | Object | Immutable.Map) width  (Number | String) height  (Number | String) latitude  (Number) longitude  (Number) zoom  (Number) bearing  (Number) pitch  (Number) altitude  (Number) viewState  (Object) Render Options Inherit the following props from  StaticMap : style  (Object) visible  (Boolean) visibilityConstraints  (Object) getCursor  (Function) Accessor that returns a cursor style to show interactive state. Called when the component is being rendered. Parameters state  - The current state of the component. state.isDragging  - If the map is being dragged. state.isHovering  - If the pointer is over an interactive feature. See  interactiveLayerIds  prop. The default implementation of  getCursor  returns  'pointer'  if  isHovering ,  'grabbing'  if  isDragging  and  'grab'  otherwise. Interaction Options maxZoom  (Number) default:  20 Max zoom level. minZoom  (Number) default:  0 Min zoom level. maxPitch  (Number) default:  85 Max pitch in degrees. minPitch  (Number) default:  0 Min pitch in degrees. scrollZoom  (Boolean|Object) default:  true Enable scroll to zoom. If an object is provided, may contain the following options to customize the scroll zoom behavior: speed  (Number) - Multiplier for the wheel delta. Default  0.01 . smooth  (Boolean) - Smoothly transition to the new zoom. If enabled, will provide a slightly lagged but smoother experience. Default  false . dragPan  (Boolean|Object) default:  true Enable drag to pan. If an object is provided, may contain the following options to customize its behavior: inertia  (Number) - Enable momentum/inertia when the gesture ends. The value specifies after how long the panning comes to a stop, in milliseconds. Default  300 . dragRotate  (Boolean) default:  true Enable drag to rotate. If an object is provided, may contain the following options to customize its behavior: inertia  (Number) - Enable momentum/inertia when the gesture ends. The value specifies after how long the rotation comes to a stop, in milliseconds. Default  300 . doubleClickZoom  (Boolean) default:  true Enable double click to zoom. touchZoom  (Boolean|Object) default:  true Enable multitouch zoom. If an object is provided, may contain the following options to customize its behavior: inertia  (Number) - Enable momentum/inertia when the gesture ends. The value specifies after how long the zooming comes to a stop, in milliseconds. Default  300 . touchRotate  (Boolean|Object) default:  false Enable multitouch rotate, including two-finger rotation to change bearing and three-finger swipe to change pitch. If an object is provided, may contain the following options to customize its behavior: inertia  (Number) - Enable momentum/inertia when the gesture ends. The value specifies after how long the rotation comes to a stop, in milliseconds. Default  300 . keyboard  (Boolean|Object) default:  true Enable keyboard navigation. If an object is provided, may contain the following options to customize its behavior: zoomSpeed  (Number) - speed of zoom using +/- keys. Default  2 . moveSpeed  (Number) - speed of movement using arrow keys, in pixels. rotateSpeedX  (Number) - speed of rotation using shift + left/right arrow keys, in degrees. Default  15 . rotateSpeedY  (Number) - speed of rotation using shift + up/down arrow keys, in degrees. Default  10 . touchAction  (String) default:  'none' Allow browser default touch actions. Default  none . See  hammer.js doc . By default, the map captures all touch interactions. This prop is useful for mobile applications to unblock default scrolling behavior. For example, use the combination  dragPan: false  and  touchAction: 'pan-y'  to allow vertical page scroll when dragging over the map. eventRecognizerOptions  (Object) default:  {} Set options for gesture recognition. My contain the following fields: pan  - an object that is  Hammer.Pan  options. This gesture is used for drag events. pinch  - an object that is  Hammer.Pinch  options This gesture is used for two-finger touch events. tripan  - an object that is  Hammer.Pan  options.  This gesture is used for three-finger touch events. tap  - an object that is  Hammer.Tap  options. This gesture is used for the  onClick  callback. anytap  - an object that is  Hammer.Tap  options. This gesture is used for the  onNativeClick  callback. doubletap  - an object that is  Hammer.Tap  options. This gesture is used for double click events. For example, the following setting makes panning less sensitive and clicking easier on mobile: Note that the value of this prop is used once when the component mounts. Subsequent changes will be ignored. clickRadius  (Number) default:  0 Radius to detect features around a clicked point. controller  (Object) A map controller instance to replace the default map controller. This object must implement the following interface: events  - An array of subscribed events handleEvent(event, context)  - A method that handles interactive events interactiveLayerIds  (Array) default:  null A list of layer ids that are interactive. If specified: Pointer event callbacks will only query the features under the pointer of these layers. The  getCursor  callback will receive  isHovering: true  when hover over features of these layers. If not specified: Pointer event callbacks will query the features under the pointer of all layers. The  getCursor  callback will always receive  isHovering: false . Transitions transitionDuration  (Number) default:  0 Duration of transition in milliseconds. If specified, the map's viewport will smoothly move from the previous props to the current one. transitionInterpolator  (Object) default:  new LinearInterpolator() An interpolator object that defines the transition behavior between two map states.  react-map-gl  offers two interpolators: LinearInterpolator  - similar to Mapbox's  easeTo  behavior. FlyToInterpolator  - similar to Mapbox's  flyTo  behavior. You may import them as follows: For details about using transition interpolators, see  transitions . transitionEasing  (Function) default:  t => t Easing function that maps a value from  [0, 1]  to  [0, 1] . Check out  http://easings.net/  for common easing curves. transitionInterruption  (Number) default:  TRANSITION_EVENTS.BREAK What to do if an ongoing transition is interrupted by another transition. There are 4 options: TRANSITION_EVENTS.BREAK  - Start new transition from the current view. TRANSITION_EVENTS.SNAP_TO_END  - Jump to the end of the previous transition before starting the new transition. TRANSITION_EVENTS.IGNORE  - Complete the previous transition and ignore the new viewport change. TRANSITION_EVENTS.UPDATE  - Continue the ongoing transition but change its destination to the new viewport. You may import the constants as follows: Callbacks Inherit the following props from  StaticMap : onLoad  (Function) onResize  (Function) onError  (Function) onViewportChange  (Function) Callback that is fired when the map's viewport properties should be updated. If not supplied, the map is not interactive. Arguments: viewState  (Object) The next viewport properties, including:  width ,  height ,  latitude ,  longitude ,  zoom ,  bearing ,  pitch ,  altitude ,  maxZoom ,  minZoom ,  maxPitch ,  minPitch ,  transitionDuration ,  transitionEasing ,  transitionInterpolator ,  transitionInterruption . interactionState  (Object) The current interaction that caused this viewport change. See  onInteractionStateChange  for possible fields. oldViewState  (Object) The current viewport properties. onViewStateChange  (Function) A newer version of the  onViewportChange  callback. Both are supported and provide equivalent functionality. onInteractionStateChange  (Function) Callback that is fired when the user interacted with the map. Possible fields include: interactionState.inTransition  (Boolean) interactionState.isDragging  (Boolean) interactionState.isPanning  (Boolean) interactionState.isRotating  (Boolean) interactionState.isZooming  (Boolean) Note: onInteractionStateChange  may be fired without  onViewportChange . For example, when the pointer is released at the end of a drag-pan,  isDragging  are reset to  false , without the viewport's  longitude  and  latitude  changing. onHover  (Function) Called when the mouse moves over the map (without button pressed). Receives a  PointerEvent  object. onClick  (Function) Called when the map is single clicked. Receives a  PointerEvent  object. This event is not fired on double click therefore there may be a delay between pointer up and the event. onNativeClick  (Function) Called when the map is clicked. Receives a  PointerEvent  object. This event is fired twice on double click. onDblClick  (Function) Called when the map is double clicked. Receives a  PointerEvent  object. onMouseDown  (Function) Called when a pointing device (usually a mouse) is pressed within the map. Receives a  PointerEvent  object. onMouseMove  (Function) Called when a pointing device (usually a mouse) is moved within the map. Receives a  PointerEvent  object. onMouseUp  (Function) Called when a pointing device (usually a mouse) is released within the map. Receives a  PointerEvent  object. onTouchStart  (Function) Called when a  touchstart  event occurs within the map. Receives a  PointerEvent  object. onTouchMove  (Function) Called when a  touchmove  event occurs within the map. Receives a  PointerEvent  object. onTouchEnd  (Function) Called when a  touchend  event occurs within the map. Receives a  PointerEvent  object. onMouseEnter  (Function) Called when a pointing device (usually a mouse) enters a visible portion of one of the interactive layers, defined by the  interactiveLayerIds  prop. Receives a  PointerEvent  object. onMouseLeave  (Function) Called when a pointing device (usually a mouse) leaves a visible portion of one of the interactive layers, defined by the  interactiveLayerIds  prop. Receives a  PointerEvent  object. onWheel  (Function) Called when a  wheel  event occurs within the map. Receives a  PointerEvent  object. onMouseOut  (Function) Called when a point device (usually a mouse) leaves the map's canvas. Receives a  PointerEvent  object. onContextMenu  (Function) Called when the context menu is activated. Prevent default here to enable right button interaction. Default:  event => event.preventDefault() onTransitionStart  (Function) Callback that is fired when a transition is triggered. onTransitionInterrupt  (Function) Callback that is fired when an ongoing transition is interrupted by another transition. onTransitionEnd  (Function) Callback that is fired when a transition is complete. Methods Inherit the following methods from  StaticMap : getMap() queryRenderedFeatures(geometry, parameters) Source interactive-map.js","headings":[{"value":"default (InteractiveMap)","depth":1},{"value":"Properties","depth":2},{"value":"Initialization","depth":3},{"value":"Map State","depth":3},{"value":"Render Options","depth":3},{"value":"getCursor (Function)","depth":5},{"value":"Interaction Options","depth":3},{"value":"maxZoom (Number)","depth":5},{"value":"minZoom (Number)","depth":5},{"value":"maxPitch (Number)","depth":5},{"value":"minPitch (Number)","depth":5},{"value":"scrollZoom (Boolean|Object)","depth":5},{"value":"dragPan (Boolean|Object)","depth":5},{"value":"dragRotate (Boolean)","depth":5},{"value":"doubleClickZoom (Boolean)","depth":5},{"value":"touchZoom (Boolean|Object)","depth":5},{"value":"touchRotate (Boolean|Object)","depth":5},{"value":"keyboard (Boolean|Object)","depth":5},{"value":"touchAction (String)","depth":5},{"value":"eventRecognizerOptions (Object)","depth":5},{"value":"clickRadius (Number)","depth":5},{"value":"controller (Object)","depth":5},{"value":"interactiveLayerIds (Array)","depth":5},{"value":"Transitions","depth":3},{"value":"transitionDuration (Number)","depth":5},{"value":"transitionInterpolator (Object)","depth":5},{"value":"transitionEasing (Function)","depth":5},{"value":"transitionInterruption (Number)","depth":5},{"value":"Callbacks","depth":3},{"value":"onViewportChange (Function)","depth":5},{"value":"onViewStateChange (Function)","depth":5},{"value":"onInteractionStateChange (Function)","depth":5},{"value":"onHover (Function)","depth":5},{"value":"onClick (Function)","depth":5},{"value":"onNativeClick (Function)","depth":5},{"value":"onDblClick (Function)","depth":5},{"value":"onMouseDown (Function)","depth":5},{"value":"onMouseMove (Function)","depth":5},{"value":"onMouseUp (Function)","depth":5},{"value":"onTouchStart (Function)","depth":5},{"value":"onTouchMove (Function)","depth":5},{"value":"onTouchEnd (Function)","depth":5},{"value":"onMouseEnter (Function)","depth":5},{"value":"onMouseLeave (Function)","depth":5},{"value":"onWheel (Function)","depth":5},{"value":"onMouseOut (Function)","depth":5},{"value":"onContextMenu (Function)","depth":5},{"value":"onTransitionStart (Function)","depth":5},{"value":"onTransitionInterrupt (Function)","depth":5},{"value":"onTransitionEnd (Function)","depth":5},{"value":"Methods","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/interactive-map","title":"default (InteractiveMap)"},{"excerpt":"Layer This component allows apps to create a  map layer  using React. Properties The props provided to this component should be conforming to the  Mapbox layer specification . When props change  shallowly , the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance. Identity Properties Once a  <Layer>  is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's  key prop  to give each element a stable identity. id  (String) Unique identifier of the layer. If not provided, a default id will be assigned. type  (String, required) Type of the layer. Options beforeId  (String) The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL. Note that layers are added by the order that they mount. They are  NOT  reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate  beforeId  for consistent behavior. source  (String) source  is required by some layer types in the Mapbox style specification. If  <Layer>  is used as the child of a  Source  component, this prop will be overwritten by the id of the parent source. Source layer.js","headings":[{"value":"Layer","depth":1},{"value":"Properties","depth":2},{"value":"Identity Properties","depth":3},{"value":"id (String)","depth":5},{"value":"type (String, required)","depth":5},{"value":"Options","depth":3},{"value":"beforeId (String)","depth":5},{"value":"source (String)","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/layer","title":"Layer"},{"excerpt":"LinearInterpolator Implements the  TransitionInterpolator  interface. Designed to use with the  transitionInterpolator  prop of  InteractiveMap . Interpolates all viewport props linearly. This interpolator offers similar behavior to Mapbox's  easeTo  when combined with a  transitionEasing  function. You may optionally limit the transition to selected viewport props, for example  new LinearInterpolator(['pitch', 'bearing'])  animates pitch and bearing while the user is still allowed to pan and zoom. Constructor new LinearInterpolator([options]) Parameters: options  {Object} (optional) transitionProps  {Array} (optional) - list of prop names to interpolate. Default:  ['longitude', 'latitude', 'zoom', 'pitch', 'bearing'] . around  {Array} (optional) - a point to zoom/rotate the map around, as  [x, y]  in screen position. Source linear-interpolator.js","headings":[{"value":"LinearInterpolator","depth":1},{"value":"Constructor","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/linear-interpolator","title":"LinearInterpolator"},{"excerpt":"MapContext MapContext  allows components to interact with  InteractiveMap  or  StaticMap  via React's  context  API. It is also possible to consume  MapContext  outside the map component, if you render your own  Provider . Note that not all context fields are available if you use it this way. Fields The context value object may contain the following fields: map  (Map) - the mapbox-gl  Map  instance viewport  (WebMercatorViewport) - the current viewport container  (HTMLDivElement) - the outer container of the map component onViewportChange  (Function) - a callback invoked when a map control requests a viewport change, with the signature  onViewportChange(viewState, interactionState, oldViewState) onViewStateChange  (Function) - an alternative callback invoked when a map control requests a viewport change, with the signature  onViewStateChange({viewState, interactionState, oldViewState}) eventManager  (EventManager) - an  EventManager  instance used to register all interactive events Source map-context.js","headings":[{"value":"MapContext","depth":1},{"value":"Fields","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/map-context","title":"MapContext"},{"excerpt":"MapController The easiest way to create a custom map control is to extend the default  MapController  class. Properties events  (Array) A list of additional event names that this control subscribes to. Available events:  click ,  dblclick ,  tap ,  doubletap ,  press ,  pinch ,  pinchin ,  pinchout ,  pinchstart ,  pinchmove ,  pinchend ,  pinchcancel ,  rotate ,  rotatestart ,  rotatemove ,  rotateend ,  rotatecancel ,  pan ,  panstart ,  panmove ,  panup ,  pandown ,  panleft ,  panright ,  panend ,  pancancel ,  swipe ,  swipeleft ,  swiperight ,  swipeup ,  swipedown ,  pointerdown ,  pointermove ,  pointerup ,  keydown , and  keyup . The following events are toggled on/off by InteractiveMap props:  scrollZoom  -  ['wheel'] dragPan  and  dragRotate  -  ['panstart', 'panmove', 'panend'] touchZoomRotate  -  ['pinchstart', 'pinchmove', 'pinchend'] doubleClickZoom  -  ['doubletap'] keyboard  -  ['keydown'] Event object is generated by  mjolnir.js . It always has the following properties: type  (string) -  The event type to which the event handler is subscribed, e.g.  'click'  or  'pointermove' center  (Object  {x, y} ) - The center of the event location (e.g. the centroid of a touch) relative to the viewport (basically,  clientX/Y ) offsetCenter  (Object  {x, y} ) - The center of the event location relative to the map. target  (Object) - The target of the event, as specified by the original  srcEvent srcEvent  (Object) - The original event object dispatched by the browser to the JS runtime Additionally, event objects for different event types contain a subset of the following properties: key  (number) - The keycode of the keyboard event leftButton  (boolean) - Flag indicating whether the left button is involved during the event middleButton  (boolean) - Flag indicating whether the middle button is involved during the event rightButton  (boolean) - Flag indicating whether the right button is involved during the event pointerType  (string) - A string indicating the type of input (e.g.  'mouse' ,  'touch' ,  'pointer' ) delta  (number) - The scroll magnitude/distance of a wheel event Methods handleEvent handleEvent(event) Called by the event manager to handle pointer events. This method delegate to the following methods to handle the default events: _onPanStart(event) _onPan(event) _onPanEnd(event) _onPinchStart(event) _onPinch(event) _onPinchEnd(event) _onDoubleTap(event) _onWheel(event) _onKeyDown(event) getMapState getMapState(overrides) Get a new descriptor object of the map state. If specified, props in the  overrides  object override the current map props. setOptions setOptions(options) Add/remove event listeners based on the latest  InteractiveMap  props. updateViewport updateViewport(newMapState, extraProps, interactionState) Invoke  onViewportChange  callback with a new map state. Source map-controller.js","headings":[{"value":"MapController","depth":1},{"value":"Properties","depth":2},{"value":"events (Array)","depth":5},{"value":"Methods","depth":2},{"value":"handleEvent","depth":5},{"value":"getMapState","depth":5},{"value":"setOptions","depth":5},{"value":"updateViewport","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/map-controller","title":"MapController"},{"excerpt":"Marker This is a React equivalent of Mapbox's\n Marker Control , which can\nbe used to render custom icons at specific locations on the map. Performance notes: if a large number of markers are needed, it's generally favorable to cache the  <Marker>  nodes, so that we don't rerender them when the viewport changes. Properties latitude  (Number, required) Latitude of the marker. longitude  (Number, required) Longitude of the marker. offsetLeft  (Number) default:  0 Offset of the marker from the left in pixels, negative number indicates left. offsetTop  (Number) default:  0 Offset of the marker from the top in pixels, negative number indicates up. draggable  (Boolean) default:  false Allows this marker component to be dragged around the map. (Use  onDragEnd  to capture the final position and update  longitude  and  latitude ). onDragStart  (Function) Called when a draggable marker starts being dragged. Parameters: event  - The pointer event. event.lngLat  - The geo coordinates where the drag started, as  [lng, lat] . onDrag  (Function) Continuously called while a draggable marker is being dragged. Parameters: event  - The pointer event. event.lngLat  - The geo coordinates of the drag event, as  [lng, lat] . onDragEnd  (Function) Called when a draggable marker is released at its final position. This is usually a good time to capture  event.lngLat  and update the marker's  longitude  and  latitude  props. Parameters: event  - The pointer event. event.lngLat  - The geo coordinates where the drag ended, as  [lng, lat] . className  (String) Assign a custom class name to the container of this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source marker.js","headings":[{"value":"Marker","depth":1},{"value":"Properties","depth":2},{"value":"latitude (Number, required)","depth":5},{"value":"longitude (Number, required)","depth":5},{"value":"offsetLeft (Number)","depth":5},{"value":"offsetTop (Number)","depth":5},{"value":"draggable (Boolean)","depth":5},{"value":"onDragStart (Function)","depth":5},{"value":"onDrag (Function)","depth":5},{"value":"onDragEnd (Function)","depth":5},{"value":"className (String)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/marker","title":"Marker"},{"excerpt":"NavigationControl This is a React equivalent of Mapbox's  NavigationControl ,\nwhich provides zoom buttons and a compass button. Properties onViewportChange  (Function) Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing  InteractiveMap 's  onViewportChange . showCompass  (Boolean) default:  true Show or hide the compass button showZoom  (Boolean) default:  true Show or hide the zoom buttons zoomInLabel  (String) default:  Zoom In Label applied to the zoom in control button. zoomOutLabel  (String) default:  Zoom Out Label applied to the zoom out control button. compassLabel  (String) default:  Reset North Label applied to the compass control button. className  (String) Assign a custom class name to the container of this control. style  (Object) default:  {position: 'absolute'} A  React style  object applied to this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source navigation-control.js","headings":[{"value":"NavigationControl","depth":1},{"value":"Properties","depth":2},{"value":"onViewportChange (Function)","depth":5},{"value":"showCompass (Boolean)","depth":5},{"value":"showZoom (Boolean)","depth":5},{"value":"zoomInLabel (String)","depth":5},{"value":"zoomOutLabel (String)","depth":5},{"value":"compassLabel (String)","depth":5},{"value":"className (String)","depth":5},{"value":"style (Object)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/navigation-control","title":"NavigationControl"},{"excerpt":"PointerEvent Event object passed to some of  InteractiveMap 's callback props. Members type  (String) The name of the event. point  (Array) The screen coordinates that is being clicked. lngLat  (Array) The geo coordinates that is being clicked. target  (Element) The target element of the pointer event. srcEvent  (Object) The original browser event.","headings":[{"value":"PointerEvent","depth":1},{"value":"Members","depth":2},{"value":"type (String)","depth":5},{"value":"point (Array)","depth":5},{"value":"lngLat (Array)","depth":5},{"value":"target (Element)","depth":5},{"value":"srcEvent (Object)","depth":5}],"slug":"docs/api-reference/pointer-event","title":"PointerEvent"},{"excerpt":"Popup This is a React equivalent of Mapbox's  Popup Control , which can be used to\nshow tooltip popups with custom HTML content at specific locations on the map. Properties latitude  (Number, required) Latitude of the anchor. longitude  (Number, required) Longitude of the anchor. altitude  (Number) default:  0 Altitude of the anchor. offsetLeft  (Number) default:  0 Offset of the anchor from the left in pixels, negative number indicates left. offsetTop  (Number) default:  0 Offset of the anchor from the top in pixels, negative number indicates up. closeButton  (Boolean) default:  true If  true , a close button will appear in the top right corner of the popup. closeOnClick  (Boolean) default:  true If  true , the popup will be closed when the map is clicked. tipSize  (Number) default:  10 Size of the tip pointing to the coordinate. anchor  (String) default:  bottom A string indicating the popup's position relative to the coordinate.\nOptions are  top ,  bottom ,  left ,  right ,  top-left ,  top-right ,  bottom-left , and  bottom-right . dynamicPosition  (Boolean) default:  true If  true , the anchor will be dynamically adjusted to ensure the popup falls within the map container. sortByDepth  (Boolean) default:  false If  true , the order of the popups will be dynamically rearranged to ensure that the ones anchored closer to the camera are rendered on top. Useful when showing multiple popups in a tilted map. onClose  (Function) Callback when the user closes the popup. className  (String) Assign a custom class name to the container of this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source popup.js","headings":[{"value":"Popup","depth":1},{"value":"Properties","depth":2},{"value":"latitude (Number, required)","depth":5},{"value":"longitude (Number, required)","depth":5},{"value":"altitude (Number)","depth":5},{"value":"offsetLeft (Number)","depth":5},{"value":"offsetTop (Number)","depth":5},{"value":"closeButton (Boolean)","depth":5},{"value":"closeOnClick (Boolean)","depth":5},{"value":"tipSize (Number)","depth":5},{"value":"anchor (String)","depth":5},{"value":"dynamicPosition (Boolean)","depth":5},{"value":"sortByDepth (Boolean)","depth":5},{"value":"onClose (Function)","depth":5},{"value":"className (String)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/popup","title":"Popup"},{"excerpt":"ScaleControl This is a React equivalent of Mapbox's  ScaleControl . Properties maxWidth  (Number) default:  100 The maximum length of the scale control in pixels. unit  (String) default:  'metric' Unit of the distance, one of  'imperial' ,  'metric'  or  'nautical' . className  (String) Assign a custom class name to the container of this control. style  (Object) default:  {position: 'absolute'} A  React style  object applied to this control. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  true Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  true Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  true Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Styling Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page. Source scale-control.js","headings":[{"value":"ScaleControl","depth":1},{"value":"Properties","depth":2},{"value":"maxWidth (Number)","depth":5},{"value":"unit (String)","depth":5},{"value":"className (String)","depth":5},{"value":"style (Object)","depth":5},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Styling","depth":2},{"value":"Source","depth":2}],"slug":"docs/api-reference/scale-control","title":"ScaleControl"},{"excerpt":"Source This component allows apps to create a  map source  using React. It may contain  Layer  components as children. Properties The props provided to this component should be conforming to the  Mapbox source specification or  CanvasSourceOptions . Note that the map component's  mapStyle  prop defaults to  mapbox://styles/mapbox/light-v8 . To use an empty base map with your own sources, you need to override the prop, e.g.: When props change  shallowly , the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit. Once a  <Source>  is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's  key prop  to give each element a stable identity. id  (String) Unique identifier of the source. If not provided, a default id will be assigned. type  (String, required) Type of the source. Source source.js","headings":[{"value":"Source","depth":1},{"value":"Properties","depth":2},{"value":"id (String)","depth":5},{"value":"type (String, required)","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/source","title":"Source"},{"excerpt":"StaticMap The simplest  React  wrapper around  MapboxGL . This is designed to be completely\nstatic, and should be used to render a map with no interactivity. For a component\nthat supports full user interactivity, see  InteractiveMap . Properties Initialization The following props are used during the creation of the Mapbox map. attributionControl  (Boolean) default:  true Equivalent to Mapbox's  attributionControl   option . If  true , shows Mapbox's attribution control. disableTokenWarning  (Boolean) default:  false If the provided API access token is rejected by Mapbox,  StaticMap  renders a warning instead of failing silently. If you know what you are doing and want to hide this warning anyways, set this prop to  true . gl  (WebGLContext) This prop is experimental. Use an existing WebGLContext instead of creating a new one. This allows multiple libraries to render into a shared buffer. Use with caution. mapboxApiAccessToken  (String) Mapbox API access token for  MapboxGL . Required when using Mapbox vector tiles/styles\nMapbox WebGL context creation option. Useful when you want to export the canvas as a PNG mapboxApiUrl  (String) default:  https://api.mapbox.com Enables the use of private and country specific servers Mapbox servers, e.g.  https://api.mapbox.cn/ . mapOptions  (Object) default:  {} Non-public API, see  https://github.com/visgl/react-map-gl/issues/545 An object of additional options to be passed to Mapbox's  Map  constructor . Options specified here\nwill take precedence over those same options if set via props. preserveDrawingBuffer  (Boolean) default:  false Equivalent to Mapbox's  preserveDrawingBuffer   option . If  true , the map's canvas can be exported to a PNG using  map.getCanvas().toDataURL() . preventStyleDiffing  (Boolean) default:  false If  mapStyle  is assigned an Immutable object, when the prop changes,  StaticMap  can diff between the two values and call the appropriate Mapbox API such as  addLayer ,  removeLayer ,  setStyle ,  setData , etc.\nThis allows apps to update data sources and layer styles efficiently. In use cases such as animation or dynamic showing/hiding layers, style diffing prevents the map from reloading and flickering when the map style changes. There are known issues with style diffing. As stopgap, use this option to prevent style diffing. reuseMaps  (Boolean) default:  false This prop is experimental. If  true , when the map component is unmounted, instead of calling  remove  on the Mapbox map instance, save it for later reuse. This will avoid repeatedly creating new Mapbox map instances if possible. Applications that frequently mount and unmount maps may try this prop to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations. transformRequest  (Function) default:  null A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.\nExpected to return an object with a  url  property and optionally  headers  and  credentials  properties.  Equivalent to Mapbox's  transformRequest   map option . Map State mapStyle  (String | Object | Immutable.Map) default:  'mapbox://styles/mapbox/light-v8' The Mapbox style. A string url or a\n MapboxGL style \nobject (regular JS object or Immutable.Map). Whenever the  mapStyle  prop changes, the component will attempt to update the style of the underlying Mapbox map. The behavior can be further customized with the  preventStyleDiffing  prop. mapStyle  is ignored when explicitly set to  null . width  (Number | String, required) The width of the map. Can be either a number in pixels, or a valid CSS string. height  (Number | String, required) The height of the map. Can be either a number in pixels, or a valid CSS string. latitude  (Number) The latitude of the center of the map, as a top level prop. Only used if  viewState  is not supplied. longitude  (Number) The longitude of the center of the map, as a top level prop. Only used if  viewState  is not supplied. zoom  (Number) The tile zoom level of the map, as a top level prop. Only used if  viewState  is not supplied. Bounded implicitly by default  minZoom  and  maxZoom  of  MapboxGL bearing  (Number) default:  0 Specify the bearing of the viewport, as a top level prop. Only used if  viewState  is not supplied. pitch  (Number) default:  0 Specify the pitch of the viewport, as a top level prop. Only used if  viewState  is not supplied.. altitude  (Number) default:  1.5 Non-public API, see  https://github.com/mapbox/mapbox-gl-js/issues/1137 . Altitude of the viewport camera, relative to screen height. viewState  (Object) An object containing the view state of the map specified by the following fields: latitude  (Number) - The latitude of the center of the map. longitude  (Number) - The longitude of the center of the map. zoom  (Number) - The tile zoom level of the map. Bounded implicitly by default  minZoom  and  maxZoom  of  MapboxGL . bearing  (Number) - default:  0  - The bearing of the viewport. pitch  (Number) - default:  0  - The pitch of the viewport. altitude  (Number) - default:  1.5 screen heights Note: Either the  viewState , or the  latitude ,  longitude  and  zoom  properties need to be specified. Render Options asyncRender  (Boolean) default:  false If  true , let Mapbox manage its own render cycle. This is the behavior prior to v4.1. If  false , force Mapbox canvas to redraw with DOM updates. This will make the map synchronize better with other controls during prop-driven viewport changes. style  (Object) The CSS style of the map container. visible  (Boolean) default:  true Whether the map is visible. Unmounting and re-mounting a Mapbox instance is known to be costly. This option offers a way to hide a map using CSS style. visibilityConstraints  (Object) An object that specifies bounds for viewport props with  min* ,  max*  keys. If the viewport props are outside of these constraints, the Mapbox map is automatically hidden. Default:  { minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 } Callbacks onLoad  (Function) default:  () => {} A callback run when the map emits a  load  event.  Mapbox docs onResize  (Function) default:  () => {} A callback run when the map size has changed. onError  (Function) default:  console.error A callback run when the map emits an  error  event.  Mapbox docs Methods getMap Returns the Mapbox instance if initialized. The  Map  instance will have full access to  MapboxGL's API . getMap() queryRenderedFeatures Use Mapbox's  queryRenderedFeatures  API to find features at point or in a bounding box. If the  parameters  argument is not specified, only queries the layers with the  interactive  property in the layer style. queryRenderedFeatures(geometry, parameters) geometry  { [Number, Number  |  [[Number, Number, [Number, Number  - Point or an array of two points defining the bounding box. Coordinates in pixels. parameters  - Query options. For more details, see  Mapbox API documentation . Source static-map.js","headings":[{"value":"StaticMap","depth":1},{"value":"Properties","depth":2},{"value":"Initialization","depth":3},{"value":"attributionControl (Boolean)","depth":5},{"value":"disableTokenWarning (Boolean)","depth":5},{"value":"gl (WebGLContext)","depth":5},{"value":"mapboxApiAccessToken (String)","depth":5},{"value":"mapboxApiUrl (String)","depth":5},{"value":"mapOptions (Object)","depth":5},{"value":"preserveDrawingBuffer (Boolean)","depth":5},{"value":"preventStyleDiffing (Boolean)","depth":5},{"value":"reuseMaps (Boolean)","depth":5},{"value":"transformRequest (Function)","depth":5},{"value":"Map State","depth":3},{"value":"mapStyle (String | Object | Immutable.Map)","depth":5},{"value":"width (Number | String, required)","depth":5},{"value":"height (Number | String, required)","depth":5},{"value":"latitude (Number)","depth":5},{"value":"longitude (Number)","depth":5},{"value":"zoom (Number)","depth":5},{"value":"bearing (Number)","depth":5},{"value":"pitch (Number)","depth":5},{"value":"altitude (Number)","depth":5},{"value":"viewState (Object)","depth":5},{"value":"Render Options","depth":3},{"value":"asyncRender (Boolean)","depth":5},{"value":"style (Object)","depth":5},{"value":"visible (Boolean)","depth":5},{"value":"visibilityConstraints (Object)","depth":5},{"value":"Callbacks","depth":3},{"value":"onLoad (Function)","depth":5},{"value":"onResize (Function)","depth":5},{"value":"onError (Function)","depth":5},{"value":"Methods","depth":2},{"value":"getMap","depth":5},{"value":"queryRenderedFeatures","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/static-map","title":"StaticMap"},{"excerpt":"SVGOverlay Allows applications to overlay data on top of maps using a SVG container. Properties redraw  (Function) Called every time the map updates. Parameters: width  (Number) - width of the viewport height  (Number) - height of the viewport project  (Function) - get screen position  [x, y]  from geo coordinates  [lng, lat] unproject  (Function) - get geo coordinates  [lng, lat]  from screen position  [x, y] style  (Object) Additional css styles of the  svg  container. captureScroll  (Boolean) default:  false Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled. captureDrag  (Boolean) default:  false Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged. captureClick  (Boolean) default:  false Stop propagation of click event to the map component. Can be used to stop map from calling the  onClick  callback when this component is clicked. captureDoubleClick  (Boolean) default:  false Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked. capturePointerMove  (Boolean) default:  false Stop propagation of pointermove event to the map component. Can be used to stop map from calling the  onMouseMove  or  onTouchMove  callback when this component is hovered. Source svg-overlay.js","headings":[{"value":"SVGOverlay","depth":1},{"value":"Properties","depth":2},{"value":"redraw (Function)","depth":5},{"value":"style (Object)","depth":3},{"value":"captureScroll (Boolean)","depth":5},{"value":"captureDrag (Boolean)","depth":5},{"value":"captureClick (Boolean)","depth":5},{"value":"captureDoubleClick (Boolean)","depth":5},{"value":"capturePointerMove (Boolean)","depth":5},{"value":"Source","depth":2}],"slug":"docs/api-reference/svg-overlay","title":"SVGOverlay"},{"excerpt":"WebMercatorViewport The  WebMercatorViewport  class takes map camera states ( latitude ,  longitude ,  zoom ,  pitch ,  bearing  etc.),\nand 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) fovy number see below Field of view of camera in degrees altitude number see below Altitude of camera in screen units position number[] null Offset of the camera, in meters Remarks: If either  altitude  or  fovy  is not provided, the missing value is computed from the other using  altitudeToFovy() / fovyToAltitude() . Altitude has a default value that matches assumptions in mapbox-gl. It is only used if both  altitude  and  fovy  are not supplied. Field of view is independent from altitude, provide  altitudeToFovy(1.5)  (default value) to match assumptions in mapbox-gl width  and  height  are forced to 1 if supplied as 0, to avoid\ndivision by zero. This is intended to reduce the burden of apps to\nto check values before instantiating a  Viewport . When using Mercator projection, per cartographic tradition, longitudes and\nlatitudes are specified as degrees. Methods project(lngLatZ, options) 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 options Object {} named options options.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\nrendering. unproject(xyz, options) 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 options Object {} named options options.topLeft Boolean true If  true  projected coords are top left, otherwise bottom left options.targetZ number 0 If pixel depth  z  is not specified in  xyz , use  options.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  options.targetZ : returns  [lng, lat] . If input is  [x, y]  with  options.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] getBounds(options) Get the axis-aligned bounding box of the current visible area. options.z  (number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding box at a specific elevation. Default  0 . Returns: [[lon, lat], [lon, lat]]  as the south west and north east corners of the smallest orthogonal bounds that encompasses the visible region. getBoundingRegion(options) Get the vertices of the current visible region. options.z  (number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding region at a specific elevation. Default  0 . Returns: An array of 4 corners in  [longitude, latitude, altitude]  that define the visible region. fitBounds(bounds, options: object) Get a new flat viewport that fits around the given bounding box. bounds  ([ number,number , number,number ]) - an array of two opposite corners of\nthe bounding box. Each corner is specified in  [lon, lat] . options.padding  (number|{top:number, bottom: number, left: number, right: number}, optional) - The amount of\npadding in pixels to add to the given bounds from the edge of the viewport. If padding is set as object, all parameters are\nrequired. options.offset  ( number,number , optional) - The center of the given bounds relative to the viewport's center,  [x, y]  measured in pixels. opts.minExtent  (number, optional) - If supplied, the bounds used to calculate the new map settings will be expanded if the delta width or height of the supplied  bounds  is smaller than this value. opts.maxZoom = 24  (number, optional) - The returned zoom value will be capped to this value. Avoids returning infinite  zoom  when the supplied  bounds  have zero width or height deltas. Returns: A new  WebMercatorViewport  instance getMapCenterByLngLatPosition(options: object): [number, number] Get the map center that place a given  lng, lat  coordinate at screen point  x, y . Parameters: options.lngLat  (Array, required) -  lng,lat  coordinates of a location on the sphere. options.pos  (Array, required) -  x,y  coordinates of a pixel on screen. Returns: [longitude, latitude]  as the new map center","headings":[{"value":"WebMercatorViewport","depth":1},{"value":"Constructor","depth":2},{"value":"Methods","depth":2},{"value":"project(lngLatZ, options)","depth":5},{"value":"unproject(xyz, options)","depth":5},{"value":"projectFlat(lngLat, scale)","depth":5},{"value":"unprojectFlat(xy, scale)","depth":5},{"value":"getBounds(options)","depth":5},{"value":"getBoundingRegion(options)","depth":5},{"value":"fitBounds(bounds, options: object)","depth":5},{"value":"getMapCenterByLngLatPosition(options: object): [number, number]","depth":5}],"slug":"docs/api-reference/web-mercator-viewport","title":"WebMercatorViewport"},{"excerpt":"Contributing to react-map-gl Thanks for taking the time to contribute! PRs and bug reports are welcome, and we are actively looking for new maintainers. Setting Up Dev Environment The  master  branch is the active development branch. Building react-map-gl locally from the source requires node.js  >=8 .\nWe use  yarn  to manage the dependencies. Test: Test in Node: Test in browser (can use Chrome dev tools for debugging): Pull Requests Any intended change to the code base must open a  pull request  and be approved.  Generally speaking, all PRs are open against the  master  branch, unless the feature being affected no longer exists on master. PR Checklist Tests npm run test  must be successful. New code should be covered by unit tests whenever possible. Documentation If public APIs are added/modified, update component documentation in  docs/api-reference . Breaking changes and deprecations must be added to  docs/upgrade-guide.md . Noteworthy new features should be added to  docs/whats-new.md . Description on GitHub Link to relevant issue. Label with a milestone (latest release or vNext). If public APIs are added/modified, describe the intended behavior. If visual/interaction is affected, consider attaching a screenshot/GIF. Release react-map-gl follows the  Semantic Versioning  guidelines. Steps for publishing releases can be found  here . Community Governance vis.gl is part of the  Urban Computing Foundation . See the organization's  Technical Charter . Technical Steering Committee react-map-gl development is governed by the vis.gl Technical Steering Committee (TSC). Maintainers Xiaoji Chen Xintong Xia Maintainers of react-map-gl have commit access to this GitHub repository, and take part in the decision making process. If you are interested in becoming a maintainer, read the  governance guidelines . The vis.gl TSC meets monthly and publishes meeting notes via a  mailing list .\nThis mailing list can also be utilized to reach out to the TSC. Code of Conduct Please be mindful of and adhere to the Linux Foundation's  Code of Conduct  when contributing to react-map-gl.","headings":[{"value":"Contributing to react-map-gl","depth":1},{"value":"Setting Up Dev Environment","depth":2},{"value":"Pull Requests","depth":2},{"value":"PR Checklist","depth":3},{"value":"Release","depth":2},{"value":"Community Governance","depth":2},{"value":"Technical Steering Committee","depth":3},{"value":"Maintainers","depth":3},{"value":"Code of Conduct","depth":2}],"slug":"docs/contributing","title":"Contributing to react-map-gl"},{"excerpt":"Upgrade Guide Upgrading to v5.3/v6.1 MapContext  is now an official API. The experimental  _MapContext  export will be removed in a future release. react-virtualized-auto-sizer  is no longer a dependency. Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the  interaction options : Source  and  Layer  components no longer expose imperative methods via  ref  as part of the migration to functional components. This is to comply with the pattern recommended by the latest React. If you used to call  sourceRef.getSource() , it can be replaced with  mapRef().getMap().getSource(sourceId) . If you used to call  layerRef.getLayer() , it can be replaced with  mapRef().getMap().getLayer(layerId) . Upgrading to v6 A valid Mapbox access token is always required. The default value of  InteractiveMap 's  maxPitch  prop is changed to  85  from  60 . mapbox-gl  v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message  m is not defined . Find solutions in  this thread . Upgrading to v4 onChangeViewport  is removed, use  onViewportChange  instead Immutable.js  is no longer a dependency Export  experimental.MapControls  is removed, use  MapController  instead InteractiveMap 's  mapControls  prop is renamed to  controller Removed support for the deprecated  interactive  property on the layer styles. Use the  interactiveLayerIds  prop to specify which layers are clickable. Upgrading to v3.2 The latest mapbox-gl release requires stylesheet to be included at all times. See  Get Started  for information about styling. Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies. Upgrading to v3 v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided. Version Requirements The  Node Version Requirement  for  building  react-map-gl is now  >=v6.4.0 . Using prebuilt react-map-gl does  NOT  has this limitation. This is introduced by  Mapbox GL JS v0.38.0 MapGL Component Two Map Components  - v3 now splits the Map component into two React components:  StaticMap  and  InteractiveMap .  InteractiveMap  is the default export, and designed to be as compatible as possible with the v2 default component. onChangeViewport  callback now includes  width  and  height . The  viewport  parameter passed to the  onChangeViewport  callback now includes  width  and  height . Application code that composed the  viewport  with  width  and  height  may have to be updated. Please double check your render code if you relied on this behavior. Overlays Some Overlays Moved to Examples  -  Some less frequently used overlays ( DraggablePointsOverlay ,  ChoroplethOverlay ,  ScatterplotOverlay ), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application. Overlays must be Children of the Map  - Overlays  must  now be rendered as children of the main  react-map-gl  component to automatically sync with the map viewport. fitBounds  utility function The  fitBounds  utility has been moved to the  math.gl  library. The function can now be called as follows: Deprecations We have started to deprecate a few React props. In all the cases below, the old  props  will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new  props  as soon as possible. Old Prop New Prop onChangeViewport(<viewport>) onViewportChange(<viewport>) onHoverFeatures(<features>) onHover(<event>) onClickFeatures(<features>) onClick(<event>) perspectiveEnabled [default: false] dragRotate [default: true] Upgrading to v2 v2 is API compatible with v1, however if you are still using  v1  of react-map-gl, make sure that you first upgrade: Your  node  version to  v4  or higher Your  react  version to  15.4  or higher. Background:  mapbox-gl  0.31.0 introduced a hard dependency on Node >= v4. Upgrading to v1 (Upgrading from 0.6.x) Importing Overlays  - The map overlay components ( HTMLOverlay ,  CanvasOverlay ,  SVGOverlay  etc) are now named exports. They previously had to be imported via their relative source paths: Map State  - The map state reported by  onViewportChanged  will now contain additional state fields (tracking not only  pitch  and  bearing  needed for perspective mode, but also transient information about how the projection is being changed by the user). This information must be passed back to the react-map-gl component in the next render. To simplify and future proof applications, it is recommended to simply save the entire  mapState  in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (like  longitude ,  latitude  and  zoom ).","headings":[{"value":"Upgrade Guide","depth":1},{"value":"Upgrading to v5.3/v6.1","depth":2},{"value":"Upgrading to v6","depth":2},{"value":"Upgrading to v4","depth":2},{"value":"Upgrading to v3.2","depth":2},{"value":"Upgrading to v3","depth":2},{"value":"Version Requirements","depth":3},{"value":"MapGL Component","depth":3},{"value":"onChangeViewport callback now includes width and height.","depth":4},{"value":"Overlays","depth":3},{"value":"fitBounds utility function","depth":3},{"value":"Deprecations","depth":3},{"value":"Upgrading to v2","depth":2},{"value":"Upgrading to v1","depth":2}],"slug":"docs/upgrade-guide","title":"Upgrade Guide"},{"excerpt":"What's new react-map-gl v5.3/v6.1 Release date: Jan 27, 2020 Highlights TypeScript and Flow typings  are now published with the library More controller customizations.  Smooth easing on wheel scroll, three-finger gesture to change pitch, inertia after pan/pinch, and customizable keyboard navigation speed. See the updated  interaction options  for details. A new  eventRecognizerOptions  prop is added for fine-tuning the interaction experience. New component:  AttributionControl Promoted to official API:  MapContext Resolved React error over attempted state update during render GeolocateControl  added supports for  showAccuracyCircle All controls now support inline styling with a  style  prop All components and examples have been rewritten as functional components react-map-gl v6.0 Release date: Dec 16, 2020 What's Changed The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are  important changes  to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do  NOT  upgrade to this version, and consider your options discussed in  this document . See  upgrade guide  for a complete list of breaking changes. react-map-gl v5.2 Release date: Jan 6, 2020 Highlights New Components :  ScaleControl NavigationControl : new  label  prop GeolocateControl : new  label ,  onGeolocate ,  auto  props New Export :  WebMercatorViewport  is re-exported from the  viewport-mercator-project  library for ease of use. It's recommended to import it from  react-map-gl  instead to avoid future dependency change. New Example :  Clusters react-map-gl v5.1 Release date: Oct 30, 2019 Highlights New Components :  Layer  and  Source  have been added to provide better React parity with the  Mapbox GL JS  API. Viewport transition :  transitionDuration  can be set to  'auto'  when using  FlyToInterpolator . New Example : Add an  example  with drawing library  react-map-gl-draw . react-map-gl v5.0 Release date: May 31, 2019 What's Changed The only change between the 5.0 release and the latest 4.1 release is Mapbox GL JS v1.0. By using this version, you opt into Mapbox's new pricing model, which bills per map load instead of map views. 5.0.x and 4.1.x will continue to update in parallel with otherwise identical features until November 2019 when Mapbox moves all users of 0.xx to a new pricing scheme. For more details, see mapbox's  changelog  and  blog post . Alongside Mapbox GL JS's new milestone, we have relaxed the  mapbox-gl  dependency from locking minor release ( ~0.53.0 ) to major release ( ^1.0.0 ). This will allow developers to upgrade faster without waiting for a new release from react-map-gl. react-map-gl v4.1 Release date: Mar 14, 2019 Highlights New Components :  FullscreenControl ,  GeolocateControl  have been added to provide better React parity with the  Mapbox GL JS  API. New callback props   InteractiveMap  supports more callbacks: onNativeClick react-map-gl v4.0 Release date: Nov 5, 2018 Highlights Relative dimensions  Both  InteractiveMap  and  StaticMap  now support CSS strings supplied to map  width  and  height  props. New  onResize  callback is fired when the map resizes. React 16  Upgrade to React 16.3 context and ref patterns Babel 7  Upgrade build system to Babel 7, better support for tree-shaking Style diffing  Now use Mapbox's native style diffing. Immutable is no longer required. Draggable Markers   Marker  component now supports a new prop  draggable , along with callbacks  onDragStart ,  onDrag , and  onDragEnd . 3d Popups   Popup  component now supports a new prop  sortByDepth  to enable proper occlusion when multiple popups are used in a tilted map. Interaction states   onViewportChange  is now called with richer descriptors of the user interaction, including  isPanning ,  isZooming  and  isRotating . Interactive layers  Dropped the requirement for the deprecated  interactive  property on the layer styles. Use the  interactiveLayerIds  prop to specify which layers are clickable. New callback props   InteractiveMap  supports more callbacks: onDblClick onMouseDown onMouseMove onMouseUp onTouchStart onTouchMove onTouchEnd onMouseEnter onMouseLeave onWheel onMouseOut See  upgrade guide  for breaking changes. react-map-gl v3.3 Release date: July, 2018 Highlights New  viewState  Property : Makes it possible to specify all map state properties ( longitude ,  latitude ,  zoom ,  bearing  and  pitch ) as a single property. New  onViewStateChange  callback : An alternative callback that matches the new  viewState  prop. react-map-gl v3.2 Realease date: January, 2018 Highlights Viewport transition : feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl. Better parity of Mapbox interaction : navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning. Support for Map Reuse (experimental) : A new property  reuseMaps  is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations. mapbox-gl 0.42.2 New props  of the InteractiveMap component: Map creation:  transformRequest ,  reuseMaps Interaction:  touchZoom ,  touchRotate Transition:  transitionDuration ,  transitionInterpolator ,  transitionEasing ,  transitionInterruption ,  onTransitionStart ,  onTransitionInterrupt ,  onTransitionEnd react-map-gl v3.1 Release date: October 19, 2017 Highlights Event handling Support right mouse drag to rotate Support keyboard navigation Allow controls and overlays to block map interactions React 16  - react-map-gl is now being tested with React 16, but the React peer dependency requirement is unchanged at  >=15.4.x . mapbox-gl v0.40.1 No Token warning : react-map-gl now renders an HTML message if no mapbox token is supplied. react-map-gl v3.0 Release date: July 27th, 2017 Highlights Latest Mapbox GL JS : Bumps  Mapbox GL JS  to  0.38 . Multi-Touch Support : Full support for multi-touch gestures such as pinch-to-zoom and rotate. New Components : The  MapGL  component has been split into  StaticMap  and  InteractiveMap  (the default). Also,  Popup ,  Marker ,  NavigationControl  have been added to provide better React parity with the  Mapbox GL JS  API. Improved Overlay Components : Supplying viewport props ( width   height   zoom   longitude  and  latitude ) are no longer required if you render  SVGOverlay ,  CanvasOverlay  or  HTMLOverlay  as a child of the map. Perspective mode is now supported in all overlays. New Props :  maxPitch ,  minPitch ,  dragPan ,  doubleClickZoom ,  touchZoomRotate ,\n scrollZoom  are now provided to allow granular control of map interactivity. Documentation : Significantly expanded and linked with our other geospatial frameworks. Examples : New stand-alone examples to get you started instantly with the new features. Event Handling : New event handling architecture that enables full customization of event handling (experimental). Components InteractiveMap (New, MapGL replacement) This is a wrapper on top of  StaticMap . It takes all the props of  StaticMap  and additional ones such as  onViewportChange ,  scrollZoom ,  dragRotate , etc. to control interactivity on the map. See  Source Code  for more information. StaticMap (New) This is the React wrapper around  Mapbox GL JS  and takes in viewport properties such as  width ,  height ,  latitude ,  longitude . Style diffing and updating logic also live here. See  Source Code  for more information. Overlays Three overlays ( ScatterplotOverlay ,  DraggablePointsOverlay ,  ChoroplethOverlay ), have been moved out of the library and are now only provided as examples. Property Changes Property Names  - some prop names have been modernized, the old ones will still work for now with a warning. Internal Properties  such as  isHovering ,  isDragging ,  startDragLngLat  have been removed.\nThese were never meant to be useful publicly and have caused confusions in the past. Utilities fitBounds :  fitBounds  has been moved to another repository and has been rewritten to provide a more logical interface. For more information, see the  Upgrade Guide . react-map-gl v2.0 Date: Jan 17, 2017 Highlights Latest mapbox-gl : Bump  mapbox-gl  to v0.31.0 new maxZoom prop  - Add  maxZoom  prop and defaults to  20 New onLoad prop  - Add  onLoad  event handler new onClick prop  - Add  onClick  prop handler (#140) react-map-gl v1.0 Perspective Mode  - Now supports  bearing  and  pitch  properties, per mapbox-gl api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided Support for ES6 imports  - The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc) previously had to be imported via their relative source paths can now be imported directly using `import {SVGOverlay} from 'react-map-gl'. react-map-gl v0.6 Initial public version","headings":[{"value":"What's new","depth":1},{"value":"react-map-gl v5.3/v6.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v6.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v5.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v5.0","depth":2},{"value":"What's Changed","depth":3},{"value":"react-map-gl v4.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v4.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.3","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.2","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.1","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v3.0","depth":2},{"value":"Highlights","depth":3},{"value":"Components","depth":3},{"value":"InteractiveMap (New, MapGL replacement)","depth":4},{"value":"StaticMap (New)","depth":4},{"value":"Overlays","depth":4},{"value":"Property Changes","depth":3},{"value":"Utilities","depth":3},{"value":"react-map-gl v2.0","depth":2},{"value":"Highlights","depth":3},{"value":"react-map-gl v1.0","depth":2},{"value":"react-map-gl v0.6","depth":2}],"slug":"docs/whats-new","title":"What's new"},{"excerpt":"Adding Custom Data Native Mapbox Layers You can inject data and mapbox native layers using the  Source  and  Layer  components: For details about data sources and layer configuration, check out the  Mapbox style specification . For dynamically updating data sources and layers, check out the  GeoJSON  and  GeoJSON animation  examples. Overlays react-map-gl provides a basic overlay API that enables applications to overlay data on top of maps.\nThey are great for creating light-weight custom drawings. Example Built-in Overlays SVGOverlay HTMLOverlay CanvasOverlay Example Overlays There are a couple of  additional overlays  in the examples folder that can be copied into applications  ScatterplotOverlay ,  ChoroplethOverlay . Third-party overlays are also available. For example, the  heatmap-overlay  module uses  webgl-heatmap  to create geographic heatmaps. Other vis.gl Libraries For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the  vis.gl  ecosystem, a suite of high-performance data visualization tools for the Web. deck.gl  - WebGL-powered framework for the visualization of large datasets. loaders.gl  - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data. nebula.gl  - 3D-enabled GeoJSON editing based on deck.gl and React.","headings":[{"value":"Adding Custom Data","depth":1},{"value":"Native Mapbox Layers","depth":2},{"value":"Overlays","depth":2},{"value":"Example","depth":3},{"value":"Built-in Overlays","depth":3},{"value":"Example Overlays","depth":3},{"value":"Other vis.gl Libraries","depth":2}],"slug":"docs/get-started/adding-custom-data","title":"Adding Custom Data"},{"excerpt":"FAQ Enable Right-to-Left Language Support This is the same as  import {setRTLTextPlugin} from 'mapbox-gl'  in the browser, but will not crash in node. The export mainly offers a convenience when using server-side rendering. To use this API, consult Mapbox's  setRTLTextPlugin  documentation. Where is fitBounds? You can use the  WebMercatorViewport  utility to find the target viewport that fits around a longitude-latitude bounding box: Documentation of WebMercatorViewport I called flyTo/panTo and all controls went out of sync You cannot manipulate the map camera via  getMap()  and the native mapbox-gl API. To conform to the reactive programming paradigm, all camera changes should be driven by prop changes on the React component. Circumventing this will break the binding between React components and the underlying map instance. Instead, use the  InteractiveMap 's transition props. See  viewport transition  for examples. mapbox-gl-draw does not work with react-map-gl Unfortunately, react-map-gl implements its own interative logic and disables the native event handling of mapbox-gl. Short explanation: mapbox-gl is not designed to support React. Long explanation: When using react-map-gl, we have two asynchronous rendering loops, React and Mapbox. Mapbox's  move  events are only fired after the camera changes and there is no way to control how and when the map rerenders. If we update React states upon the  move  events, all React controls/overlays may only get updated one animation frame after the map rerender. You can find discussions  here  and  here . Because of this, any mapbox-gl control that listens to the native map events will not work. An equivelant to mapbox-gl-draw is  react-map-gl-draw . You can find an example  here .","headings":[{"value":"FAQ","depth":1},{"value":"Enable Right-to-Left Language Support","depth":2},{"value":"Where is fitBounds?","depth":2},{"value":"I called flyTo/panTo and all controls went out of sync","depth":2},{"value":"mapbox-gl-draw does not work with react-map-gl","depth":2}],"slug":"docs/get-started/faq","title":"FAQ"},{"excerpt":"Get Started Installation Using  react-map-gl  requires  node >= v4  and  react >= 16.3 . Example See full project setup in  get-started examples Styling The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly. You may add the stylesheet to the head of your page: Find out your mapbox version by running  yarn list mapbox-gl  or  npm ls mapbox-gl . Or embed it in your app by using -  browserify-css \nwith Browserify or -  css-loader  with Webpack: Using with Browserify, Webpack, and other JavaScript Bundlers browserify  - react-map-gl is extensively tested with  browserify  and works without configuration. webpack  - Most of the provided react-map-gl examples use webpack. Look at the  get started examples  folder for minimalist templates. create-react-app  - react-map-gl is compatible with  create-react-app . create-react-app-typescript  - react-map-gl is compatible with  create-react-app-typescript . You can see an example  here . There's many other ready-to-run  examples  you can take a look at if you need more inspiration. Using with a mapbox-gl Fork Install your choice of fork along with react-map-gl, for example: In your bundler's configuration, set the forked library to replace any reference from mapbox-gl. This can be done in Webpack with something like: In rollup: In Next.js:","headings":[{"value":"Get Started","depth":1},{"value":"Installation","depth":2},{"value":"Example","depth":2},{"value":"Styling","depth":2},{"value":"Using with Browserify, Webpack, and other JavaScript Bundlers","depth":2},{"value":"Using with a mapbox-gl Fork","depth":2}],"slug":"docs/get-started/get-started","title":"Get Started"},{"excerpt":"About Mapbox Tokens react-map-gl  itself is open source and free. It provides a React wrapper for  mapbox-gl  or derived projects.\nDepending on which Mapbox GL JS version (or fork) you use, you may need a Mapbox token. You will need a Mapbox token if you use: react-map-gl@>=6.0.0 , depending on  mapbox-gl@>=2.0.0  and above - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps. react-map-gl@5.x , depending on  mapbox-gl@1.x  - requires an access token only if you load the map styles and tiles from Mapbox's data service. See \"Display Maps Without A Mapbox Token\" section below for using non-Mapbox tiles. To get a Mapbox token, you will need to register on  their website . The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded. There are several ways to provide a token to your app, as showcased in some of the example folders: Provide a  mapboxApiAccessToken  prop to the map component Set the  MapboxAccessToken  environment variable (or set  REACT_APP_MAPBOX_ACCESS_TOKEN  if you are using Create React App) Provide it in the URL, e.g  ?access_token=TOKEN Provide  mapboxApiUrl  prop to the map component to override the default mapbox API URL But we would recommend using something like  dotenv  and put your key in an untracked  .env  file, that will then expose it as a  process.env  variable, with much less leaking risks. Display Maps Without A Mapbox Token It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using mapbox-gl v2.0 and above. The options are: Stay on  react-map-gl@5.x  and  mapbox-gl@1.x . react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox. Use a community fork of mapbox-gl, for example  maplibre-gl . See  using with a mapbox-gl fork  for how to configure your project. To use your own map service, you will need a custom Mapbox GL style that points to your own  vector tile source , and pass it to  ReactMapGL  using the  mapStyle  prop. This custom style must match the schema of your tile source. Open source tile schemas include: TileZen schema OpenMapTiles schema  Some useful resources for creating your own map service: Mapbox Vector Tile Spec Open source tools If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to  ReactMapGL  using the  transformRequest  prop. An example function:","headings":[{"value":"About Mapbox Tokens","depth":1},{"value":"Display Maps Without A Mapbox Token","depth":2}],"slug":"docs/get-started/mapbox-tokens","title":"About Mapbox Tokens"},{"excerpt":"State Management InteractiveMap  is designed to be a stateless component. Its appearance is entirely controlled by the properties that are passed in from its parent. In this architecture, transition works the same way as interaction: the component shall notify the application of \"user intent\" by calling the  onViewportChange  callback, but ultimately the application needs to decide what to do with it. The most simple handling of this intent is to save it and pass it back to the component: User interaction and transition will not work without a valid  onViewportChange  handler. The advantage of this practice is that it ensures a single source of truth regarding the viewport state (in the example above, saved in the  state  of the container component). When you use this viewport state to direct the rendering of other components, it is guaranteed that they will always be synced with the map. You may apply additional constraints to the viewport: Or manipulate the viewport outside of the ReactMap component: Using with Redux If you're using redux, it is very easy to hook this component up to store state in the redux state tree.\nThe simplest way is to take all properties passed to the  onViewportChange  function property and add them\ndirectly into the store. This state can then be passed back to the  <ReactMapGL>  component without any transformation.","headings":[{"value":"State Management","depth":1},{"value":"Using with Redux","depth":2}],"slug":"docs/get-started/state-management","title":"State Management"}]}},"staticQueryHashes":["484347790"]}
\ No newline at end of file
diff --git a/search/index.html b/search/index.html
index 22e994dc..2c62400e 100644
--- a/search/index.html
+++ b/search/index.html
@@ -64,4 +64,4 @@ body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:bor
         }
       }
     })
-  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/search/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="body__BodyContainerFull-lvm4v2-0 jcCBQi"><main class="search__MainSearch-kiea9v-3 jANEwJ"><div class="search__SearchContainer-kiea9v-0 czREGK"><div class="search__IconContainer-kiea9v-1 zwZYQ"><svg viewBox="0 0 24 24" width="24" height="24"><title>Search</title><path fill-rule="evenodd" clip-rule="evenodd" d="M11 6C8.79086 6 7 7.79086 7 10C7 12.2091 8.79086 14 11 14C13.2091 14 15 12.2091 15 10C15 7.79086 13.2091 6 11 6ZM5 10C5 6.68629 7.68629 4 11 4C14.3137 4 17 6.68629 17 10C17 11.2958 16.5892 12.4957 15.8907 13.4765L19.7071 17.2929C20.0976 17.6834 20.0976 18.3166 19.7071 18.7071C19.3166 19.0976 18.6834 19.0976 18.2929 18.7071L14.4765 14.8907C13.4957 15.5892 12.2958 16 11 16C7.68629 16 5 13.3137 5 10Z"></path></svg></div><input type="text" placeholder="Search" value="" class="search__SearchInput-kiea9v-2 bfJSyJ"/></div><div><div>32 articles indexed.</div><div></div></div></main></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/search";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-3a81eb65abfc940bc22b.js" async=""></script></body></html>
\ No newline at end of file
+  </script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-f62c983d7560821ea2e9.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/search/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="body__BodyContainerFull-lvm4v2-0 jcCBQi"><main class="search__MainSearch-kiea9v-3 jANEwJ"><div class="search__SearchContainer-kiea9v-0 czREGK"><div class="search__IconContainer-kiea9v-1 zwZYQ"><svg viewBox="0 0 24 24" width="24" height="24"><title>Search</title><path fill-rule="evenodd" clip-rule="evenodd" d="M11 6C8.79086 6 7 7.79086 7 10C7 12.2091 8.79086 14 11 14C13.2091 14 15 12.2091 15 10C15 7.79086 13.2091 6 11 6ZM5 10C5 6.68629 7.68629 4 11 4C14.3137 4 17 6.68629 17 10C17 11.2958 16.5892 12.4957 15.8907 13.4765L19.7071 17.2929C20.0976 17.6834 20.0976 18.3166 19.7071 18.7071C19.3166 19.0976 18.6834 19.0976 18.2929 18.7071L14.4765 14.8907C13.4957 15.5892 12.2958 16 11 16C7.68629 16 5 13.3137 5 10Z"></path></svg></div><input type="text" placeholder="Search" value="" class="search__SearchInput-kiea9v-2 bfJSyJ"/></div><div><div>32 articles indexed.</div><div></div></div></main></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/search";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-a02570a256af19808a06.js"],"app":["/app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["/component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["/component---src-home-js-d9cb8e2a1f1b43e76cef.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-a02570a256af19808a06.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js" async=""></script><script src="/react-map-gl/app-f62c983d7560821ea2e9.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-8f269beabc6fe82c4dec.js" async=""></script></body></html>
\ No newline at end of file
diff --git a/webpack-runtime-3a81eb65abfc940bc22b.js b/webpack-runtime-8f269beabc6fe82c4dec.js
similarity index 96%
rename from webpack-runtime-3a81eb65abfc940bc22b.js
rename to webpack-runtime-8f269beabc6fe82c4dec.js
index d0122cb3..e91d2e78 100644
--- a/webpack-runtime-3a81eb65abfc940bc22b.js
+++ b/webpack-runtime-8f269beabc6fe82c4dec.js
@@ -1 +1 @@
-!function(e){function a(a){for(var t,c,p=a[0],s=a[1],f=a[2],l=0,u=[];l<p.length;l++)c=p[l],Object.prototype.hasOwnProperty.call(n,c)&&n[c]&&u.push(n[c][0]),n[c]=0;for(t in s)Object.prototype.hasOwnProperty.call(s,t)&&(e[t]=s[t]);for(d&&d(a);u.length;)u.shift()();return r.push.apply(r,f||[]),o()}function o(){for(var e,a=0;a<r.length;a++){for(var o=r[a],t=!0,p=1;p<o.length;p++){var s=o[p];0!==n[s]&&(t=!1)}t&&(r.splice(a--,1),e=c(c.s=o[0]))}return e}var t={},n={5:0},r=[];function c(a){if(t[a])return t[a].exports;var o=t[a]={i:a,l:!1,exports:{}};return e[a].call(o.exports,o,o.exports,c),o.l=!0,o.exports}c.e=function(e){var a=[],o=n[e];if(0!==o)if(o)a.push(o[2]);else{var t=new Promise((function(a,t){o=n[e]=[a,t]}));a.push(o[2]=t);var r,p=document.createElement("script");p.charset="utf-8",p.timeout=120,c.nc&&p.setAttribute("nonce",c.nc),p.src=function(e){return c.p+""+({0:"framework",1:"73944ee5ea94c1d98436bc52f9523528f31fde99",2:"fe95a7ce",3:"393ab9b2f11b50cae2165635a5f8f207617a3eb5",4:"537017fb0d27e3630b9a96dd0b8f0429103dedd1",7:"component---examples-clusters-src-app-js",8:"component---examples-controls-src-app-js",9:"component---examples-custom-cursor-src-app-js",10:"component---examples-draggable-markers-src-app-js",11:"component---examples-draw-polygon-src-app-js",12:"component---examples-filter-src-app-js",13:"component---examples-geojson-animation-src-app-js",14:"component---examples-geojson-src-app-js",15:"component---examples-heatmap-src-app-js",16:"component---examples-interaction-src-app-js",17:"component---examples-layers-src-app-js",18:"component---examples-locate-user-src-app-js",19:"component---examples-terrain-src-app-js",20:"component---examples-viewport-animation-src-app-js",21:"component---examples-zoom-to-bounds-src-app-js",22:"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx",23:"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx",24:"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx",25:"component---src-home-js",26:"dd81a582"}[e]||e)+"-"+{0:"cc409ead3d26361b9ba0",1:"727dd780702c9fcfc772",2:"92300a72d6d7e297fd55",3:"3c3b1312c54b37c9f588",4:"4f4baa1fa353638ef4ce",7:"346e4b3ce834a2a59abd",8:"514d86f5f5bb530818ca",9:"7353428ea7993bffe6ca",10:"750aa1fd5d8ef7c5deb5",11:"86d6f9fd87d1e260e722",12:"34d8eea6aa3da822f4d4",13:"80242668b41d1c5a100c",14:"825f697ecfa8c8d3744d",15:"5f78c7d3f8bebcd578e3",16:"f2d0479e7c40dac7abd5",17:"3a34e0db161255746f46",18:"7138f5bd4ddb502f4dac",19:"af650608bf2b75a0b197",20:"8ea3db271b29cf0fe322",21:"841590abf6c1f5dbd690",22:"f46f9cf0f757ffbc6d8d",23:"eafda65ae80fc6b14adb",24:"38016206555992fc85a9",25:"d9cb8e2a1f1b43e76cef",26:"73554666236247b54dbf"}[e]+".js"}(e);var s=new Error;r=function(a){p.onerror=p.onload=null,clearTimeout(f);var o=n[e];if(0!==o){if(o){var t=a&&("load"===a.type?"missing":a.type),r=a&&a.target&&a.target.src;s.message="Loading chunk "+e+" failed.\n("+t+": "+r+")",s.name="ChunkLoadError",s.type=t,s.request=r,o[1](s)}n[e]=void 0}};var f=setTimeout((function(){r({type:"timeout",target:p})}),12e4);p.onerror=p.onload=r,document.head.appendChild(p)}return Promise.all(a)},c.m=e,c.c=t,c.d=function(e,a,o){c.o(e,a)||Object.defineProperty(e,a,{enumerable:!0,get:o})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,a){if(1&a&&(e=c(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(c.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var t in e)c.d(o,t,function(a){return e[a]}.bind(null,t));return o},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},c.p="/react-map-gl/",c.oe=function(e){throw console.error(e),e};var p=window.webpackJsonp=window.webpackJsonp||[],s=p.push.bind(p);p.push=a,p=p.slice();for(var f=0;f<p.length;f++)a(p[f]);var d=s;o()}([]);
\ No newline at end of file
+!function(e){function a(a){for(var t,c,p=a[0],s=a[1],f=a[2],l=0,u=[];l<p.length;l++)c=p[l],Object.prototype.hasOwnProperty.call(n,c)&&n[c]&&u.push(n[c][0]),n[c]=0;for(t in s)Object.prototype.hasOwnProperty.call(s,t)&&(e[t]=s[t]);for(d&&d(a);u.length;)u.shift()();return r.push.apply(r,f||[]),o()}function o(){for(var e,a=0;a<r.length;a++){for(var o=r[a],t=!0,p=1;p<o.length;p++){var s=o[p];0!==n[s]&&(t=!1)}t&&(r.splice(a--,1),e=c(c.s=o[0]))}return e}var t={},n={5:0},r=[];function c(a){if(t[a])return t[a].exports;var o=t[a]={i:a,l:!1,exports:{}};return e[a].call(o.exports,o,o.exports,c),o.l=!0,o.exports}c.e=function(e){var a=[],o=n[e];if(0!==o)if(o)a.push(o[2]);else{var t=new Promise((function(a,t){o=n[e]=[a,t]}));a.push(o[2]=t);var r,p=document.createElement("script");p.charset="utf-8",p.timeout=120,c.nc&&p.setAttribute("nonce",c.nc),p.src=function(e){return c.p+""+({0:"framework",1:"73944ee5ea94c1d98436bc52f9523528f31fde99",2:"fe95a7ce",3:"393ab9b2f11b50cae2165635a5f8f207617a3eb5",4:"537017fb0d27e3630b9a96dd0b8f0429103dedd1",7:"component---examples-clusters-src-app-js",8:"component---examples-controls-src-app-js",9:"component---examples-custom-cursor-src-app-js",10:"component---examples-draggable-markers-src-app-js",11:"component---examples-draw-polygon-src-app-js",12:"component---examples-filter-src-app-js",13:"component---examples-geojson-animation-src-app-js",14:"component---examples-geojson-src-app-js",15:"component---examples-heatmap-src-app-js",16:"component---examples-interaction-src-app-js",17:"component---examples-layers-src-app-js",18:"component---examples-locate-user-src-app-js",19:"component---examples-terrain-src-app-js",20:"component---examples-viewport-animation-src-app-js",21:"component---examples-zoom-to-bounds-src-app-js",22:"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx",23:"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx",24:"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx",25:"component---src-home-js",26:"dd81a582"}[e]||e)+"-"+{0:"cc409ead3d26361b9ba0",1:"0a1690d3fd163c21521f",2:"92300a72d6d7e297fd55",3:"3c3b1312c54b37c9f588",4:"4f4baa1fa353638ef4ce",7:"346e4b3ce834a2a59abd",8:"514d86f5f5bb530818ca",9:"7353428ea7993bffe6ca",10:"750aa1fd5d8ef7c5deb5",11:"86d6f9fd87d1e260e722",12:"34d8eea6aa3da822f4d4",13:"80242668b41d1c5a100c",14:"825f697ecfa8c8d3744d",15:"5f78c7d3f8bebcd578e3",16:"f2d0479e7c40dac7abd5",17:"3a34e0db161255746f46",18:"7138f5bd4ddb502f4dac",19:"af650608bf2b75a0b197",20:"8ea3db271b29cf0fe322",21:"841590abf6c1f5dbd690",22:"f46f9cf0f757ffbc6d8d",23:"eafda65ae80fc6b14adb",24:"38016206555992fc85a9",25:"d9cb8e2a1f1b43e76cef",26:"73554666236247b54dbf"}[e]+".js"}(e);var s=new Error;r=function(a){p.onerror=p.onload=null,clearTimeout(f);var o=n[e];if(0!==o){if(o){var t=a&&("load"===a.type?"missing":a.type),r=a&&a.target&&a.target.src;s.message="Loading chunk "+e+" failed.\n("+t+": "+r+")",s.name="ChunkLoadError",s.type=t,s.request=r,o[1](s)}n[e]=void 0}};var f=setTimeout((function(){r({type:"timeout",target:p})}),12e4);p.onerror=p.onload=r,document.head.appendChild(p)}return Promise.all(a)},c.m=e,c.c=t,c.d=function(e,a,o){c.o(e,a)||Object.defineProperty(e,a,{enumerable:!0,get:o})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,a){if(1&a&&(e=c(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(c.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var t in e)c.d(o,t,function(a){return e[a]}.bind(null,t));return o},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},c.p="/react-map-gl/",c.oe=function(e){throw console.error(e),e};var p=window.webpackJsonp=window.webpackJsonp||[],s=p.push.bind(p);p.push=a,p=p.slice();for(var f=0;f<p.length;f++)a(p[f]);var d=s;o()}([]);
\ No newline at end of file
diff --git a/webpack.stats.json b/webpack.stats.json
index e13cf310..dbd23500 100644
--- a/webpack.stats.json
+++ b/webpack.stats.json
@@ -1 +1 @@
-{"errors":[],"warnings":[],"namedChunkGroups":{"polyfill":{"chunks":[5,27],"assets":["webpack-runtime-3a81eb65abfc940bc22b.js","polyfill-a02570a256af19808a06.js"],"children":{},"childAssets":{}},"app":{"chunks":[5,0,6],"assets":["webpack-runtime-3a81eb65abfc940bc22b.js","framework-cc409ead3d26361b9ba0.js","app-f62c983d7560821ea2e9.js"],"children":{},"childAssets":{}},"component---examples-clusters-src-app-js":{"chunks":[0,2,1,7],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"children":{},"childAssets":{}},"component---examples-controls-src-app-js":{"chunks":[0,2,1,8],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"children":{},"childAssets":{}},"component---examples-custom-cursor-src-app-js":{"chunks":[0,2,1,3,9],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"children":{},"childAssets":{}},"component---examples-draggable-markers-src-app-js":{"chunks":[0,2,1,10],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"children":{},"childAssets":{}},"component---examples-draw-polygon-src-app-js":{"chunks":[0,2,26,1,4,11],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","dd81a582-73554666236247b54dbf.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js","component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"children":{},"childAssets":{}},"component---examples-filter-src-app-js":{"chunks":[0,2,1,12],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"children":{},"childAssets":{}},"component---examples-geojson-animation-src-app-js":{"chunks":[0,2,1,13],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"children":{},"childAssets":{}},"component---examples-geojson-src-app-js":{"chunks":[0,2,1,14],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"children":{},"childAssets":{}},"component---examples-heatmap-src-app-js":{"chunks":[0,2,1,15],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"children":{},"childAssets":{}},"component---examples-interaction-src-app-js":{"chunks":[0,2,1,16],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"children":{},"childAssets":{}},"component---examples-layers-src-app-js":{"chunks":[0,2,1,3,17],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"children":{},"childAssets":{}},"component---examples-locate-user-src-app-js":{"chunks":[0,2,1,18],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"children":{},"childAssets":{}},"component---examples-terrain-src-app-js":{"chunks":[0,2,1,19],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"children":{},"childAssets":{}},"component---examples-viewport-animation-src-app-js":{"chunks":[0,2,1,20],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"children":{},"childAssets":{}},"component---examples-zoom-to-bounds-src-app-js":{"chunks":[0,2,1,3,4,21],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js","component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"children":{},"childAssets":{}},"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":{"chunks":[22],"assets":["component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"children":{},"childAssets":{}},"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":{"chunks":[23],"assets":["component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"children":{},"childAssets":{}},"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":{"chunks":[24],"assets":["component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"children":{},"childAssets":{}},"component---src-home-js":{"chunks":[25],"assets":["component---src-home-js-d9cb8e2a1f1b43e76cef.js"],"children":{},"childAssets":{}}},"assetsByChunkName":{"polyfill":["webpack-runtime-3a81eb65abfc940bc22b.js","polyfill-a02570a256af19808a06.js"],"app":["webpack-runtime-3a81eb65abfc940bc22b.js","framework-cc409ead3d26361b9ba0.js","app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","dd81a582-73554666236247b54dbf.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js","component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-727dd780702c9fcfc772.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js","component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["component---src-home-js-d9cb8e2a1f1b43e76cef.js"]}}
\ No newline at end of file
+{"errors":[],"warnings":[],"namedChunkGroups":{"polyfill":{"chunks":[5,27],"assets":["webpack-runtime-8f269beabc6fe82c4dec.js","polyfill-a02570a256af19808a06.js"],"children":{},"childAssets":{}},"app":{"chunks":[5,0,6],"assets":["webpack-runtime-8f269beabc6fe82c4dec.js","framework-cc409ead3d26361b9ba0.js","app-f62c983d7560821ea2e9.js"],"children":{},"childAssets":{}},"component---examples-clusters-src-app-js":{"chunks":[0,2,1,7],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"children":{},"childAssets":{}},"component---examples-controls-src-app-js":{"chunks":[0,2,1,8],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"children":{},"childAssets":{}},"component---examples-custom-cursor-src-app-js":{"chunks":[0,2,1,3,9],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"children":{},"childAssets":{}},"component---examples-draggable-markers-src-app-js":{"chunks":[0,2,1,10],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"children":{},"childAssets":{}},"component---examples-draw-polygon-src-app-js":{"chunks":[0,2,26,1,4,11],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","dd81a582-73554666236247b54dbf.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js","component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"children":{},"childAssets":{}},"component---examples-filter-src-app-js":{"chunks":[0,2,1,12],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"children":{},"childAssets":{}},"component---examples-geojson-animation-src-app-js":{"chunks":[0,2,1,13],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"children":{},"childAssets":{}},"component---examples-geojson-src-app-js":{"chunks":[0,2,1,14],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"children":{},"childAssets":{}},"component---examples-heatmap-src-app-js":{"chunks":[0,2,1,15],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"children":{},"childAssets":{}},"component---examples-interaction-src-app-js":{"chunks":[0,2,1,16],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"children":{},"childAssets":{}},"component---examples-layers-src-app-js":{"chunks":[0,2,1,3,17],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"children":{},"childAssets":{}},"component---examples-locate-user-src-app-js":{"chunks":[0,2,1,18],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"children":{},"childAssets":{}},"component---examples-terrain-src-app-js":{"chunks":[0,2,1,19],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"children":{},"childAssets":{}},"component---examples-viewport-animation-src-app-js":{"chunks":[0,2,1,20],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"children":{},"childAssets":{}},"component---examples-zoom-to-bounds-src-app-js":{"chunks":[0,2,1,3,4,21],"assets":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js","component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"children":{},"childAssets":{}},"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":{"chunks":[22],"assets":["component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"children":{},"childAssets":{}},"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":{"chunks":[23],"assets":["component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"children":{},"childAssets":{}},"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":{"chunks":[24],"assets":["component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"children":{},"childAssets":{}},"component---src-home-js":{"chunks":[25],"assets":["component---src-home-js-d9cb8e2a1f1b43e76cef.js"],"children":{},"childAssets":{}}},"assetsByChunkName":{"polyfill":["webpack-runtime-8f269beabc6fe82c4dec.js","polyfill-a02570a256af19808a06.js"],"app":["webpack-runtime-8f269beabc6fe82c4dec.js","framework-cc409ead3d26361b9ba0.js","app-f62c983d7560821ea2e9.js"],"component---examples-clusters-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","dd81a582-73554666236247b54dbf.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js","component---examples-draw-polygon-src-app-js-86d6f9fd87d1e260e722.js"],"component---examples-filter-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-terrain-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-terrain-src-app-js-af650608bf2b75a0b197.js"],"component---examples-viewport-animation-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","component---examples-viewport-animation-src-app-js-8ea3db271b29cf0fe322.js"],"component---examples-zoom-to-bounds-src-app-js":["framework-cc409ead3d26361b9ba0.js","fe95a7ce-92300a72d6d7e297fd55.js","73944ee5ea94c1d98436bc52f9523528f31fde99-0a1690d3fd163c21521f.js","393ab9b2f11b50cae2165635a5f8f207617a3eb5-3c3b1312c54b37c9f588.js","537017fb0d27e3630b9a96dd0b8f0429103dedd1-4f4baa1fa353638ef4ce.js","component---examples-zoom-to-bounds-src-app-js-841590abf6c1f5dbd690.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-f46f9cf0f757ffbc6d8d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-eafda65ae80fc6b14adb.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-38016206555992fc85a9.js"],"component---src-home-js":["component---src-home-js-d9cb8e2a1f1b43e76cef.js"]}}
\ No newline at end of file