1"use strict";(self.webpackChunkmapsvg=self.webpackChunkmapsvg||[]).push([[1845],{4858:(e,s,n)=>{n.d(s,{A:()=>o});const o=n.p+"assets/images/2-2558e1e433816d09e8a701919184d00e.png"},28453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var o=n(96540);const t={},i=o.createContext(t);function r(e){const s=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),o.createElement(i.Provider,{value:s},e.children)}},52611:(e,s,n)=>{n.d(s,{A:()=>o});const o=n.p+"assets/images/3-5c0c3db5db114685aa5bafe09d6368fa.png"},61941:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>r,metadata:()=>o,toc:()=>d});const o=JSON.parse('{"id":"tutorials/specialized-maps/choropleth-map","title":"Choropleth map","description":"A choropleth map colors Regions (or shows bubbles) by numeric values \u2014 for example population or sales per state.","source":"@site/docs/03. tutorials/01. specialized-maps/choropleth-map.md","sourceDirName":"03. tutorials/01. specialized-maps","slug":"/tutorials/specialized-maps/choropleth-map","permalink":"/docs/tutorials/specialized-maps/choropleth-map","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Choropleth map","taxonomy":{"category":"docs"}},"sidebar":"tutorialSidebar","previous":{"title":"Specialized maps","permalink":"/docs/category/specialized-maps"},"next":{"title":"Google Map with SVG overlay","permalink":"/docs/tutorials/specialized-maps/google-and-custom-svg"}}');var t=n(74848),i=n(28453);const r={title:"Choropleth map",taxonomy:{category:"docs"}},l="Choropleth map",a={},d=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Steps",id:"steps",level:2},{value:"1. Add a numeric field",id:"1-add-a-numeric-field",level:3},{value:"2. Enable choropleth",id:"2-enable-choropleth",level:3},{value:"3. Enter values",id:"3-enter-values",level:3},{value:"Customize",id:"customize",level:2},{value:"Related",id:"related",level:2}];function c(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"choropleth-map",children:"Choropleth map"})}),"\n",(0,t.jsx)(s.p,{children:"A choropleth map colors Regions (or shows bubbles) by numeric values \u2014 for example population or sales per state."}),"\n",(0,t.jsx)(s.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"A map with Regions (SVG country/state map works well)"}),"\n",(0,t.jsxs)(s.li,{children:["Numeric values stored in a field on ",(0,t.jsx)(s.strong,{children:"Regions"})," or ",(0,t.jsx)(s.strong,{children:"Database"})," objects (depending on the data source you choose)"]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"steps",children:"Steps"}),"\n",(0,t.jsx)(s.h3,{id:"1-add-a-numeric-field",children:"1. Add a numeric field"}),"\n",(0,t.jsx)(s.p,{children:"For region-based choropleth (most common):"}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["Go to ",(0,t.jsx)(s.strong,{children:"Menu \u203a Regions \u203a Edit fields"})]}),"\n",(0,t.jsxs)(s.li,{children:["Add a field that will hold numbers (for example a ",(0,t.jsx)(s.code,{children:"text"})," or number field named ",(0,t.jsx)(s.code,{children:"number"}),")"]}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"Add choropleth field",src:n(4858).A+"",width:"1116",height:"627"})}),"\n",(0,t.jsxs)(s.p,{children:["If your values live on Database objects instead, add the field under ",(0,t.jsx)(s.strong,{children:"Menu \u203a Database \u203a Edit fields"})," and later set ",(0,t.jsx)(s.strong,{children:"Choropleth data source"})," to ",(0,t.jsx)(s.strong,{children:"Database"}),"."]}),"\n",(0,t.jsx)(s.h3,{id:"2-enable-choropleth",children:"2. Enable choropleth"}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["Open ",(0,t.jsx)(s.strong,{children:"Menu \u203a Settings \u203a Choropleth"})," (or the ",(0,t.jsx)(s.strong,{children:"Choropleth"})," section in Settings)"]}),"\n",(0,t.jsxs)(s.li,{children:["Turn ",(0,t.jsx)(s.strong,{children:"Choropleth"})," on"]}),"\n",(0,t.jsxs)(s.li,{children:["Set ",(0,t.jsx)(s.strong,{children:"Choropleth data source"})," to ",(0,t.jsx)(s.strong,{children:"Regions"})," or ",(0,t.jsx)(s.strong,{children:"Database"})]}),"\n",(0,t.jsxs)(s.li,{children:["Choose ",(0,t.jsx)(s.strong,{children:"Source field"})," \u2014 the field with numeric values"]}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"Enable choropleth and pick source field",src:n(52611).A+"",width:"1119",height:"629"})}),"\n",(0,t.jsx)(s.h3,{id:"3-enter-values",children:"3. Enter values"}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["Go to ",(0,t.jsx)(s.strong,{children:"Menu \u203a Regions \u203a List"})," (or ",(0,t.jsx)(s.strong,{children:"Database \u203a List"})," if the source is Database)"]}),"\n",(0,t.jsx)(s.li,{children:"Enter numbers for several regions/objects"}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:"As you save values, Region colors update on the map:"}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"Choropleth colors after entering values",src:n(92716).A+"",width:"1120",height:"627"})}),"\n",(0,t.jsx)(s.h2,{id:"customize",children:"Customize"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["Colors and gradient: ",(0,t.jsx)(s.strong,{children:"Menu \u203a Colors"})]}),"\n",(0,t.jsxs)(s.li,{children:["Gradient labels (low/high text): ",(0,t.jsx)(s.strong,{children:"Menu \u203a Settings \u203a Choropleth \u203a Gradient labels"})]}),"\n",(0,t.jsxs)(s.li,{children:["More options (bubble mode, legend, etc.): ",(0,t.jsx)(s.strong,{children:"Settings \u203a Choropleth"})," in the map editor"]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"related",children:"Related"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/guides/map-editor/settings",children:"Settings"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/guides/map-editor/colors",children:"Colors"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/guides/map-editor/regions/what-is-regions",children:"What is Regions"})}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},92716:(e,s,n)=>{n.d(s,{A:()=>o});const o=n.p+"assets/images/4-c736e629db59153fcde492c3bf94d078.png"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.