react-map-gl/assets/js/6b485341.173f8f99.js

"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[7126],{376:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>o,toc:()=>a});const o=JSON.parse('{"id":"api-reference/mapbox/scale-control","title":"ScaleControl","description":"React component that wraps mapbox-gl\'s ScaleControl class.","source":"@site/../docs/api-reference/mapbox/scale-control.md","sourceDirName":"api-reference/mapbox","slug":"/api-reference/mapbox/scale-control","permalink":"/react-map-gl/docs/api-reference/mapbox/scale-control","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/mapbox/scale-control.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"Popup","permalink":"/react-map-gl/docs/api-reference/mapbox/popup"},"next":{"title":"Source","permalink":"/react-map-gl/docs/api-reference/mapbox/source"}}');var n=r(4848),c=r(8453);const s={},i="ScaleControl",l={},a=[{value:"Properties",id:"properties",level:2},{value:"Reactive Properties",id:"reactive-properties",level:3},{value:"<code>maxWidth</code>: string",id:"maxwidth",level:4},{value:"<code>style</code>: CSSProperties",id:"style",level:4},{value:"<code>unit</code>: &#39;imperial&#39; | &#39;metric&#39; | &#39;nautical&#39;",id:"unit",level:4},{value:"Other Properties",id:"other-properties",level:3},{value:"<code>position</code>: &#39;top-right&#39; | &#39;top-left&#39; | &#39;bottom-right&#39; | &#39;bottom-left&#39;",id:"position",level:4},{value:"Source",id:"source",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",pre:"pre",...(0,c.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"scalecontrol",children:"ScaleControl"})}),"\n",(0,n.jsxs)(t.p,{children:["React component that wraps mapbox-gl's ",(0,n.jsx)(t.a,{href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#scalecontrol",children:"ScaleControl"})," class."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport Map, {ScaleControl} from 'react-map-gl/mapbox';\r\nimport 'mapbox-gl/dist/mapbox-gl.css';\r\n\r\nfunction App() {\r\n  return <Map\r\n    mapboxAccessToken=\"<Mapbox access token>\"\r\n    initialViewState={{\r\n      longitude: -100,\r\n      latitude: 40,\r\n      zoom: 3.5\r\n    }}\r\n    mapStyle=\"mapbox://styles/mapbox/streets-v9\"\r\n  >\r\n    <ScaleControl />\r\n  </Map>;\r\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,n.jsx)(t.h3,{id:"reactive-properties",children:"Reactive Properties"}),"\n",(0,n.jsxs)(t.h4,{id:"maxwidth",children:[(0,n.jsx)(t.code,{children:"maxWidth"}),": string"]}),"\n",(0,n.jsxs)(t.p,{children:["Default: ",(0,n.jsx)(t.code,{children:"100"})]}),"\n",(0,n.jsx)(t.p,{children:"The maximum length of the scale control in pixels."}),"\n",(0,n.jsxs)(t.h4,{id:"style",children:[(0,n.jsx)(t.code,{children:"style"}),": CSSProperties"]}),"\n",(0,n.jsx)(t.p,{children:"CSS style override that applies to the control's container."}),"\n",(0,n.jsxs)(t.h4,{id:"unit",children:[(0,n.jsx)(t.code,{children:"unit"}),": 'imperial' | 'metric' | 'nautical'"]}),"\n",(0,n.jsxs)(t.p,{children:["Default: ",(0,n.jsx)(t.code,{children:"'metric'"})]}),"\n",(0,n.jsx)(t.p,{children:"Unit of the distance."}),"\n",(0,n.jsx)(t.h3,{id:"other-properties",children:"Other Properties"}),"\n",(0,n.jsx)(t.p,{children:"The properties in this section are not reactive. They are only used when the component first mounts."}),"\n",(0,n.jsxs)(t.h4,{id:"position",children:[(0,n.jsx)(t.code,{children:"position"}),": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'"]}),"\n",(0,n.jsxs)(t.p,{children:["Default: ",(0,n.jsx)(t.code,{children:"'top-right'"})]}),"\n",(0,n.jsx)(t.p,{children:"Placement of the control relative to the map."}),"\n",(0,n.jsx)(t.h2,{id:"source",children:"Source"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/scale-control.ts",children:"scale-control.ts"})})]})}function d(e={}){const{wrapper:t}={...(0,c.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,r)=>{r.d(t,{R:()=>s,x:()=>i});var o=r(6540);const n={},c=o.createContext(n);function s(e){const t=o.useContext(c);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:s(e.components),o.createElement(c.Provider,{value:t},e.children)}}}]);