From 2a2a9406757cebea5f1a2e4669609a3a773d17b5 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 14 Nov 2025 14:34:46 -0500 Subject: [PATCH 1/2] add maps page --- .../2019-07-03-outline-map-locations.html | 14 + .../2019-07-03-country-names-example.html | 24 ++ .../2019-07-03-country-names-warning.html | 10 + .../2019-07-03-intro.html | 22 ++ .../2019-07-03-iso3-example.html | 28 ++ .../2019-07-03-iso3-table.html | 282 ++++++++++++++++++ .../2019-07-03-usa-states-example.html | 26 ++ .../2019-07-03-usa-states-table.html | 73 +++++ 8 files changed, 479 insertions(+) create mode 100644 _posts/plotly_js/maps/2019-07-03-outline-map-locations.html create mode 100644 _posts/plotly_js/maps/outline-map-locations/2019-07-03-country-names-example.html create mode 100644 _posts/plotly_js/maps/outline-map-locations/2019-07-03-country-names-warning.html create mode 100644 _posts/plotly_js/maps/outline-map-locations/2019-07-03-intro.html create mode 100644 _posts/plotly_js/maps/outline-map-locations/2019-07-03-iso3-example.html create mode 100644 _posts/plotly_js/maps/outline-map-locations/2019-07-03-iso3-table.html create mode 100644 _posts/plotly_js/maps/outline-map-locations/2019-07-03-usa-states-example.html create mode 100644 _posts/plotly_js/maps/outline-map-locations/2019-07-03-usa-states-table.html diff --git a/_posts/plotly_js/maps/2019-07-03-outline-map-locations.html b/_posts/plotly_js/maps/2019-07-03-outline-map-locations.html new file mode 100644 index 000000000..10e533034 --- /dev/null +++ b/_posts/plotly_js/maps/2019-07-03-outline-map-locations.html @@ -0,0 +1,14 @@ +--- +description: How to specify country codes, names, and US states for outline-based maps +display_as: maps +language: plotly_js +layout: base +name: Locations for Outline-based Maps +order: 15 +page_type: example_index +permalink: javascript/outline-map-locations/ +thumbnail: thumbnail/choropleth.jpg +--- + +{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","outline-map-locations" | sort: "order" %} +{% include posts/auto_examples.html examples=examples %} diff --git a/_posts/plotly_js/maps/outline-map-locations/2019-07-03-country-names-example.html b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-country-names-example.html new file mode 100644 index 000000000..0284c4109 --- /dev/null +++ b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-country-names-example.html @@ -0,0 +1,24 @@ +--- +name: "locationmode: 'country names'" +language: plotly_js +suite: outline-map-locations +order: 3 +sitemap: false +arrangement: horizontal +markdown_content: | + Set `locationmode: 'country names'` to use full country names in `locations`. +--- +var data = [{ + type: 'choropleth', + locations: ['United States', 'Canada', 'United Kingdom'], + locationmode: 'country names', + z: [1, 1, 1], + colorscale: [[0, '#636efa'], [1, '#636efa']], + showscale: false +}]; + +var layout = { + title: 'Choropleth with Country Names' +}; + +Plotly.newPlot('myDiv', data, layout); diff --git a/_posts/plotly_js/maps/outline-map-locations/2019-07-03-country-names-warning.html b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-country-names-warning.html new file mode 100644 index 000000000..d243f2a1e --- /dev/null +++ b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-country-names-warning.html @@ -0,0 +1,10 @@ +--- +language: plotly_js +suite: outline-map-locations +order: 3.5 +sitemap: false +arrangement: horizontal +markdown_content: | + > How Plotly matches 'country names' will change in a future version. Matching will become stricter and some country names may no longer match. We recommend using `locationmode: 'ISO-3'` with ISO codes for `locations` to ensure consistent behavior across versions. +--- + diff --git a/_posts/plotly_js/maps/outline-map-locations/2019-07-03-intro.html b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-intro.html new file mode 100644 index 000000000..b4067f7fc --- /dev/null +++ b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-intro.html @@ -0,0 +1,22 @@ +--- +name: Locations for Outline-based Maps +language: plotly_js +suite: outline-map-locations +order: 0 +sitemap: false +arrangement: horizontal +markdown_content: | + With outline-based maps, you can visualize data for specific regions using the `locations` and `locationmode` parameters. + + The following map types in Plotly.js support these parameters: + + - `choropleth` - color regions based on data values + - `scattergeo` - show markers at geographic locations + + The `locations` parameter accepts region identifiers and the `locationmode` parameter controls how those identifiers are interpreted: + + - `'ISO-3'` - three-letter ISO country codes (for example, `'USA'`, `'CAN'`, `'GBR'`) + - `'USA-states'` - two-letter US state abbreviations (for example, `'CA'`, `'TX'`, `'NY'`) + - `'country names'` - full country names (for example, `'United States'`) +--- + diff --git a/_posts/plotly_js/maps/outline-map-locations/2019-07-03-iso3-example.html b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-iso3-example.html new file mode 100644 index 000000000..d6b9f8624 --- /dev/null +++ b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-iso3-example.html @@ -0,0 +1,28 @@ +--- +name: "locationmode: 'ISO-3'" +language: plotly_js +suite: outline-map-locations +order: 1 +sitemap: false +arrangement: horizontal +markdown_content: | + Set `locationmode: 'ISO-3'` to use three-letter ISO country codes in `locations`. +--- +var data = [{ + type: 'choropleth', + locations: ['USA', 'CAN', 'MEX', 'BRA', 'RUS'], + locationmode: 'ISO-3', + z: [100, 85, 72, 95, 68], + colorscale: 'Viridis' +}]; + +var layout = { + title: 'Choropleth with ISO-3 Country Codes', + geo: { + projection: { + type: 'natural earth' + } + } +}; + +Plotly.newPlot('myDiv', data, layout); diff --git a/_posts/plotly_js/maps/outline-map-locations/2019-07-03-iso3-table.html b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-iso3-table.html new file mode 100644 index 000000000..3c5f16104 --- /dev/null +++ b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-iso3-table.html @@ -0,0 +1,282 @@ +--- +name: Supported ISO Codes +language: plotly_js +suite: outline-map-locations +order: 1.5 +sitemap: false +arrangement: horizontal +markdown_content: | + The following ISO codes are supported when `locationmode='ISO-3'`: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameISO Code
AfghanistanAFG
Aksai ChinXAC
Åland IslandsALA
AlbaniaALB
AlgeriaDZA
American SamoaASM
AndorraAND
AngolaAGO
AnguillaAIA
AntarcticaATA
Antigua and BarbudaATG
ArgentinaARG
ArmeniaARM
ArubaABW
Arunachal PradeshXAP
AustraliaAUS
AustriaAUT
AzerbaijanAZE
Azores IslandsPRT
BahamasBHS
BahrainBHR
BangladeshBGD
BarbadosBRB
BelarusBLR
BelgiumBEL
BelizeBLZ
BeninBEN
BermudaBMU
BhutanBTN
Bir TawilXBT
Bolivia (Plurinational State of)BOL
BonaireBES
Bosnia and HerzegovinaBIH
BotswanaBWA
Bouvet IslandBVT
BrazilBRA
British Virgin IslandsVGB
Brunei DarussalamBRN
BulgariaBGR
Burkina FasoBFA
BurundiBDI
Cabo VerdeCPV
CambodiaKHM
CameroonCMR
CanadaCAN
Canary IslandsESP
Cayman IslandsCYM
Central African RepublicCAF
ChadTCD
Chagos ArchipelagoMUS
ChileCHL
ChinaCHN
Christmas IslandCXR
Cocos (Keeling) IslandsCCK
ColombiaCOL
ComorosCOM
CongoCOG
Cook IslandsCOK
Costa RicaCRI
Côte d'IvoireCIV
CroatiaHRV
CubaCUB
CuraçaoCUW
CyprusCYP
CzechiaCZE
Democratic People's Republic of KoreaPRK
Democratic Republic of the CongoCOD
DenmarkDNK
DjiboutiDJI
DominicaDMA
Dominican RepublicDOM
EcuadorECU
EgyptEGY
El SalvadorSLV
Equatorial GuineaGNQ
EritreaERI
EstoniaEST
EswatiniSWZ
EthiopiaETH
Falkland Islands (Malvinas)FLK
Faroe IslandsFRO
FijiFJI
FinlandFIN
FranceFRA
French GuianaGUF
French PolynesiaPYF
French Southern TerritoriesATF
GabonGAB
Galápagos IslandsECU
GambiaGMB
GazaPSE
GeorgiaGEO
GermanyDEU
GhanaGHA
GibraltarGIB
GreeceGRC
GreenlandGRL
GrenadaGRD
GuadeloupeGLP
GuamGUM
GuatemalaGTM
GuernseyGGY
GuineaGIN
Guinea-BissauGNB
GuyanaGUY
HaitiHTI
Halaib TriangleXHT
Heard Island and McDonald IslandsHMD
HondurasHND
Hong KongHKG
HungaryHUN
IcelandISL
Ilemi TriangleXIT
IndiaIND
IndonesiaIDN
Iran (Islamic Republic of)IRN
IraqIRQ
IrelandIRL
Isle of ManIMN
IsraelISR
ItalyITA
JamaicaJAM
Jammu and KashmirXJK
JapanJPN
JerseyJEY
JordanJOR
KazakhstanKAZ
KenyaKEN
Kingdom of the NetherlandsNLD
KiribatiKIR
KuwaitKWT
KyrgyzstanKGZ
Lao People's Democratic RepublicLAO
LatviaLVA
LebanonLBN
LesothoLSO
LiberiaLBR
LibyaLBY
LiechtensteinLIE
LithuaniaLTU
LuxembourgLUX
MacaoMAC
MadagascarMDG
Madeira IslandPRT
MalawiMWI
MalaysiaMYS
MaldivesMDV
MaliMLI
MaltaMLT
Marshall IslandsMHL
MartiniqueMTQ
MauritaniaMRT
MauritiusMUS
MayotteMYT
MexicoMEX
Micronesia (Federated States of)FSM
MonacoMCO
MongoliaMNG
MontenegroMNE
MontserratMSR
MoroccoMAR
MozambiqueMOZ
MyanmarMMR
NamibiaNAM
NauruNRU
NepalNPL
New CaledoniaNCL
New ZealandNZL
NicaraguaNIC
NigerNER
NigeriaNGA
NiueNIU
Norfolk IslandNFK
North MacedoniaMKD
Northern Mariana IslandsMNP
NorwayNOR
OmanOMN
PakistanPAK
PalauPLW
PanamaPAN
Papua New GuineaPNG
ParaguayPRY
PeruPER
PhilippinesPHL
PitcairnPCN
PolandPOL
PortugalPRT
Puerto RicoPRI
QatarQAT
Republic of KoreaKOR
Republic of MoldovaMDA
RéunionREU
RomaniaROU
Russian FederationRUS
RwandaRWA
SabaBES
Saint BarthélemyBLM
Saint HelenaSHN
Saint Kitts and NevisKNA
Saint LuciaLCA
Saint MartinMAF
Saint Pierre and MiquelonSPM
Saint Vincent and the GrenadinesVCT
SamoaWSM
Sao Tome and PrincipeSTP
Saudi ArabiaSAU
SenegalSEN
SerbiaSRB
SeychellesSYC
Sierra LeoneSLE
SingaporeSGP
Sint EustatiusBES
Sint MaartenSXM
SlovakiaSVK
SloveniaSVN
Solomon IslandsSLB
SomaliaSOM
South AfricaZAF
South Georgia and the South Sandwich IslandsSGS
South SudanSSD
SpainESP
Sri LankaLKA
SudanSDN
SurinameSUR
Svalbard and Jan Mayen IslandsSJM
SwedenSWE
SwitzerlandCHE
Syrian Arab RepublicSYR
TaiwanTWN
TajikistanTJK
ThailandTHA
Timor-LesteTLS
TogoTGO
TokelauTKL
TongaTON
Trinidad and TobagoTTO
TunisiaTUN
TürkiyeTUR
TurkmenistanTKM
Turks and Caicos IslandsTCA
TuvaluTUV
UgandaUGA
UkraineUKR
United Arab EmiratesARE
United Kingdom of Great Britain and Northern IrelandGBR
United Republic of TanzaniaTZA
United States of AmericaUSA
United States Virgin IslandsVIR
UruguayURY
UzbekistanUZB
VanuatuVUT
Venezuela (Bolivarian Republic of)VEN
Viet NamVNM
West BankPSE
Western SaharaESH
YemenYEM
ZambiaZMB
ZimbabweZWE
+ + [View full list of ISO-3 codes](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3) +--- + diff --git a/_posts/plotly_js/maps/outline-map-locations/2019-07-03-usa-states-example.html b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-usa-states-example.html new file mode 100644 index 000000000..5538761cf --- /dev/null +++ b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-usa-states-example.html @@ -0,0 +1,26 @@ +--- +name: "locationmode: 'USA-states'" +language: plotly_js +suite: outline-map-locations +order: 2 +sitemap: false +arrangement: horizontal +markdown_content: | + Set `locationmode: 'USA-states'` to use two-letter US state abbreviations in `locations`. +--- +var data = [{ + type: 'choropleth', + locations: ['CA', 'TX', 'NY', 'FL', 'IL'], + locationmode: 'USA-states', + z: [95, 88, 92, 85, 78], + colorscale: 'Reds' +}]; + +var layout = { + title: 'USA States Choropleth', + geo: { + scope: 'usa' + } +}; + +Plotly.newPlot('myDiv', data, layout); diff --git a/_posts/plotly_js/maps/outline-map-locations/2019-07-03-usa-states-table.html b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-usa-states-table.html new file mode 100644 index 000000000..c7b96a030 --- /dev/null +++ b/_posts/plotly_js/maps/outline-map-locations/2019-07-03-usa-states-table.html @@ -0,0 +1,73 @@ +--- +name: Supported US State Codes +language: plotly_js +suite: outline-map-locations +order: 2.5 +sitemap: false +arrangement: horizontal +markdown_content: | + The following state codes are supported when `locationmode='USA-states'`: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StateCode
AlabamaAL
AlaskaAK
ArizonaAZ
ArkansasAR
CaliforniaCA
ColoradoCO
ConnecticutCT
DelawareDE
District of ColumbiaDC
FloridaFL
GeorgiaGA
HawaiiHI
IdahoID
IllinoisIL
IndianaIN
IowaIA
KansasKS
KentuckyKY
LouisianaLA
MaineME
MarylandMD
MassachusettsMA
MichiganMI
MinnesotaMN
MississippiMS
MissouriMO
MontanaMT
NebraskaNE
NevadaNV
New HampshireNH
New JerseyNJ
New MexicoNM
New YorkNY
North CarolinaNC
North DakotaND
OhioOH
OklahomaOK
OregonOR
PennsylvaniaPA
Rhode IslandRI
South CarolinaSC
South DakotaSD
TennesseeTN
TexasTX
UtahUT
VermontVT
VirginiaVA
WashingtonWA
West VirginiaWV
WisconsinWI
WyomingWY
+--- + From 17886c2b7ca6681a9f14805b55e96306bb0c23a9 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 14 Nov 2025 14:40:17 -0500 Subject: [PATCH 2/2] Update 2019-07-03-outline-map-locations.html --- _posts/plotly_js/maps/2019-07-03-outline-map-locations.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/plotly_js/maps/2019-07-03-outline-map-locations.html b/_posts/plotly_js/maps/2019-07-03-outline-map-locations.html index 10e533034..6da1cfee7 100644 --- a/_posts/plotly_js/maps/2019-07-03-outline-map-locations.html +++ b/_posts/plotly_js/maps/2019-07-03-outline-map-locations.html @@ -4,7 +4,7 @@ language: plotly_js layout: base name: Locations for Outline-based Maps -order: 15 +order: 11 page_type: example_index permalink: javascript/outline-map-locations/ thumbnail: thumbnail/choropleth.jpg