https://evidence.dev logo
Join Slack
Powered by
Hello ! Is there any option to build a map of anot...
# random
l
Hello ! Is there any option to build a map of another country or a even a world map. ?
b
Hi there, We dont have a default component for that yet, but you should be able to do it using the custom Echarts component. What country / type of map are you trying to make?
l
It's a pity 😢, I was needing a choropleth
b
For which country / map?
l
world map, also France (but it can wait)
g
@loud-notebook-55987 I’ve set up a world map before using Echarts for a choropleth - I’ll take a look at what I did and follow up later today!
l
🙂 top!! thanks a lot
g
Ok so eventually we'll be building this in as a more general solution where you can swap out which map you want, but to get this working for now, you can use a custom component. I've pulled these from our US Map component - hopefully this will work for you in advance of the better long term solution!
CleanShot 2023-05-25 at 20.54.16@2x.png
This gets created by including a geo JSON file, and 3 other files to create the component - all in a 
components
folder in the root of your project:
Once these files are in that folder (I'll send the contents of the files in a second), you can import the WorldMap component into your markdown page:
here are the files you can drop into that 
components
folder and this should work:
EChartsWorldMap.svelteworldmap.jsonechartsWorldMap.jsWorldMap.svelte
Because this is a copy of the existing USMap component, the options available in that component should also work - e.g., colour scales, links, etc. (https://docs.evidence.dev/components/us-map)
l
Thanks a lot Sean !! you have helped me a lot 😄
🙌 1
I'll try it now
g
Let me know if you run into any issues with it! Also happy to help with the France map if you’re looking to build that too - would help me think through how to generalize these map components in the future
Hi @loud-notebook-55987 - I've made this a bit easier to extend to other custom maps. I've made the echarts files reusable across custom maps, so to get a new map, you just need to add a custom map component and put in the json file you want to use
I've played around with adding 3 maps using this method: world map, france, and italy. Here's what my 
components
folder looks like:
which gets me this on the page:
🇫🇷 1
here's a stackblitz example which includes the files I mentioned. Had to take out the italy example here - for some reason stackblitz didn't like the italy json i was using: https://stackblitz.com/edit/evidence-vknfdf?file=pages%2Findex.md
l
Sorry for getting back to you late, yesterday was a public holiday here in France, so I couldn't work on it. I haven't had a chance to tackle it since Friday, but I'll make sure to get to it tomorrow morning. Thanks a lot for your help. I really appreciate it.
g
No problem at all! Just wanted to share the info as I was thinking about it
🤩 1
l
Hello Sean ! It's me again ...
👋🏼 1
👋 1
I'm trying to build the map, but I'm getting an error... I don't know exactly what does it mean 😞
image.png
b
Laura - I have a solution for you (I think)
We have just released the FranceMap as a component in Evidence Labs
l
That's amazing !! I'm needing too but, the world map as well
b
You can use the FranceMap like this
Copy code
```france_sales_by_department
select 'Paris' as department, 100 as sales_usd0k
union all
select 'Vienne' as department, 200 as sales_usd0k
union all
select 'Gironde' as department, 300 as sales_usd0k
<FranceMap data={france_sales_by_department} region=department value=sales_usd0k />```
🙌 1
@great-boots-39022 might be able to add the WorldMap to Evidence Labs too
l
How can I see the names of countries/departments/regions ? ... in order to match them well
Omg I'm so thankful for your help
b
This is all pretty experimental so we havent got good docs yet. But the list of departments is:
Copy code
"properties": { "code": "02", "nom": "Aisne" }
        "properties": { "code": "10", "nom": "Aube" }
        "properties": { "code": "14", "nom": "Calvados" }
        "properties": { "code": "15", "nom": "Cantal" }
        "properties": { "code": "28", "nom": "Eure-et-Loir" }
        "properties": { "code": "35", "nom": "Ille-et-Vilaine" }
        "properties": { "code": "39", "nom": "Jura" }
        "properties": { "code": "40", "nom": "Landes" }
        "properties": { "code": "42", "nom": "Loire" }
        "properties": { "code": "45", "nom": "Loiret" }
        "properties": { "code": "47", "nom": "Lot-et-Garonne" }
        "properties": { "code": "55", "nom": "Meuse" }
        "properties": { "code": "61", "nom": "Orne" }
        "properties": { "code": "62", "nom": "Pas-de-Calais" }
        "properties": { "code": "63", "nom": "Puy-de-D\u00f4me" }
        "properties": { "code": "67", "nom": "Bas-Rhin" }
        "properties": { "code": "68", "nom": "Haut-Rhin" }
        "properties": { "code": "76", "nom": "Seine-Maritime" }
        "properties": { "code": "89", "nom": "Yonne" }
        "properties": { "code": "93", "nom": "Seine-Saint-Denis" }
        "properties": { "code": "04", "nom": "Alpes-de-Haute-Provence" }
        "properties": { "code": "05", "nom": "Hautes-Alpes" }
        "properties": { "code": "07", "nom": "Ard\u00e8che" }
        "properties": { "code": "08", "nom": "Ardennes" }
        "properties": { "code": "09", "nom": "Ari\u00e8ge" }
        "properties": { "code": "17", "nom": "Charente-Maritime" }
        "properties": { "code": "19", "nom": "Corr\u00e8ze" }
        "properties": { "code": "24", "nom": "Dordogne" }
        "properties": { "code": "27", "nom": "Eure" }
        "properties": { "code": "37", "nom": "Indre-et-Loire" }
        "properties": { "code": "48", "nom": "Loz\u00e8re" }
        "properties": { "code": "58", "nom": "Ni\u00e8vre" }
        "properties": { "code": "60", "nom": "Oise" }
        "properties": { "code": "64", "nom": "Pyr\u00e9n\u00e9es-Atlantiques" }
        "properties": { "code": "69", "nom": "Rh\u00f4ne" }
        "properties": { "code": "71", "nom": "Sa\u00f4ne-et-Loire" }
        "properties": { "code": "75", "nom": "Paris" }
        "properties": { "code": "78", "nom": "Yvelines" }
        "properties": { "code": "81", "nom": "Tarn" }
        "properties": { "code": "82", "nom": "Tarn-et-Garonne" }
        "properties": { "code": "83", "nom": "Var" }
        "properties": { "code": "85", "nom": "Vend\u00e9e" }
        "properties": { "code": "87", "nom": "Haute-Vienne" }
        "properties": { "code": "88", "nom": "Vosges" }
        "properties": { "code": "92", "nom": "Hauts-de-Seine" }
        "properties": { "code": "03", "nom": "Allier" }
        "properties": { "code": "06", "nom": "Alpes-Maritimes" }
        "properties": { "code": "11", "nom": "Aude" }
        "properties": { "code": "2A", "nom": "Corse-du-Sud" }
        "properties": { "code": "22", "nom": "C\u00f4tes-d'Armor" }
        "properties": { "code": "23", "nom": "Creuse" }
        "properties": { "code": "25", "nom": "Doubs" }
        "properties": { "code": "29", "nom": "Finist\u00e8re" }
        "properties": { "code": "30", "nom": "Gard" }
        "properties": { "code": "33", "nom": "Gironde" }
        "properties": { "code": "36", "nom": "Indre" }
        "properties": { "code": "38", "nom": "Is\u00e8re" }
        "properties": { "code": "51", "nom": "Marne" }
        "properties": { "code": "52", "nom": "Haute-Marne" }
        "properties": { "code": "57", "nom": "Moselle" }
        "properties": { "code": "65", "nom": "Hautes-Pyr\u00e9n\u00e9es" }
        "properties": { "code": "66", "nom": "Pyr\u00e9n\u00e9es-Orientales" }
        "properties": { "code": "73", "nom": "Savoie" }
        "properties": { "code": "74", "nom": "Haute-Savoie" }
        "properties": { "code": "77", "nom": "Seine-et-Marne" }
        "properties": { "code": "84", "nom": "Vaucluse" }
        "properties": { "code": "86", "nom": "Vienne" }
        "properties": { "code": "94", "nom": "Val-de-Marne" }
        "properties": { "code": "01", "nom": "Ain" }
        "properties": { "code": "12", "nom": "Aveyron" }
        "properties": { "code": "13", "nom": "Bouches-du-Rh\u00f4ne" }
        "properties": { "code": "16", "nom": "Charente" }
        "properties": { "code": "18", "nom": "Cher" }
        "properties": { "code": "2B", "nom": "Haute-Corse" }
        "properties": { "code": "21", "nom": "C\u00f4te-d'Or" }
        "properties": { "code": "26", "nom": "Dr\u00f4me" }
        "properties": { "code": "31", "nom": "Haute-Garonne" }
        "properties": { "code": "32", "nom": "Gers" }
        "properties": { "code": "34", "nom": "H\u00e9rault" }
        "properties": { "code": "43", "nom": "Haute-Loire" }
        "properties": { "code": "44", "nom": "Loire-Atlantique" }
        "properties": { "code": "46", "nom": "Lot" }
        "properties": { "code": "49", "nom": "Maine-et-Loire" }
        "properties": { "code": "50", "nom": "Manche" }
        "properties": { "code": "56", "nom": "Morbihan" }
        "properties": { "code": "59", "nom": "Nord" }
        "properties": { "code": "70", "nom": "Haute-Sa\u00f4ne" }
        "properties": { "code": "72", "nom": "Sarthe" }
        "properties": { "code": "80", "nom": "Somme" }
        "properties": { "code": "91", "nom": "Essonne" }
        "properties": { "code": "95", "nom": "Val-d'Oise" }
        "properties": { "code": "41", "nom": "Loir-et-Cher" }
        "properties": { "code": "53", "nom": "Mayenne" }
        "properties": { "code": "54", "nom": "Meurthe-et-Moselle" }
        "properties": { "code": "79", "nom": "Deux-S\u00e8vres" }
        "properties": { "code": "90", "nom": "Territoire de Belfort" }
l
no worries, it's quiet useful !! 🙂
and for the countries ? 🙈
b
Sorry I realised that the names formatted badly in the above. Eg you should use 
Nièvre
not 
Ni\u00e8vre
l
Okiii no problem 🙂
b
For the countries:
Copy code
"name": "Nicaragua",
                "name": "Haiti",
                "name": "Guatemala",
                "name": "El Salvador",
                "name": "Dominican Rep.",
                "name": "Cuba",
                "name": "Costa Rica",
                "name": "United States of America",
                "name": "Honduras",
                "name": "Canada",
                "name": "Panama",
                "name": "Belize",
                "name": "Mexico",
                "name": "Greenland",
                "name": "Bahamas",
                "name": "Trinidad and Tobago",
                "name": "Puerto Rico",
                "name": "Jamaica",
                "name": "Bolivia",
                "name": "Chile",
                "name": "Guyana",
                "name": "Peru",
                "name": "Suriname",
                "name": "Argentina",
                "name": "Ecuador",
                "name": "Colombia",
                "name": "Uruguay",
                "name": "Brazil",
                "name": "Paraguay",
                "name": "Venezuela",
                "name": "Falkland Is.",
                "name": "India",
                "name": "Indonesia",
                "name": "Cyprus",
                "name": "Malaysia",
                "name": "China",
                "name": "Israel",
                "name": "Palestine",
                "name": "Syria",
                "name": "Lebanon",
                "name": "Bhutan",
                "name": "South Korea",
                "name": "North Korea",
                "name": "Oman",
                "name": "Uzbekistan",
                "name": "Kazakhstan",
                "name": "Tajikistan",
                "name": "Mongolia",
                "name": "Vietnam",
                "name": "Cambodia",
                "name": "Georgia",
                "name": "United Arab Emirates",
                "name": "Azerbaijan",
                "name": "Laos",
                "name": "Turkey",
                "name": "Kyrgyzstan",
                "name": "Armenia",
                "name": "Iraq",
                "name": "Iran",
                "name": "Qatar",
                "name": "Pakistan",
                "name": "Saudi Arabia",
                "name": "Thailand",
                "name": "Kuwait",
                "name": "Timor-Leste",
                "name": "Myanmar",
                "name": "Brunei",
                "name": "Bangladesh",
                "name": "Afghanistan",
                "name": "Turkmenistan",
                "name": "N. Cyprus",
                "name": "Nepal",
                "name": "Yemen",
                "name": "Jordan",
                "name": "Philippines",
                "name": "Sri Lanka",
                "name": "Taiwan",
                "name": "Japan",
                "name": "Ethiopia",
                "name": "S. Sudan",
                "name": "Somalia",
                "name": "Kenya",
                "name": "Tanzania",
                "name": "Malawi",
                "name": "Somaliland",
                "name": "Morocco",
                "name": "Congo",
                "name": "Dem. Rep. Congo",
                "name": "W. Sahara",
                "name": "Namibia",
                "name": "South Africa",
                "name": "Libya",
                "name": "Tunisia",
                "name": "Zambia",
                "name": "Sierra Leone",
                "name": "Guinea",
                "name": "Central African Rep.",
                "name": "Liberia",
                "name": "Sudan",
                "name": "Djibouti",
                "name": "Eritrea",
                "name": "Senegal",
                "name": "Côte d'Ivoire",
                "name": "Mali",
                "name": "Nigeria",
                "name": "Benin",
                "name": "Angola",
                "name": "Botswana",
                "name": "Zimbabwe",
                "name": "Chad",
                "name": "Algeria",
                "name": "Burundi",
                "name": "eSwatini",
                "name": "Mozambique",
                "name": "Rwanda",
                "name": "Uganda",
                "name": "Lesotho",
                "name": "Cameroon",
                "name": "Gabon",
                "name": "Niger",
                "name": "Burkina Faso",
                "name": "Togo",
                "name": "Guinea-Bissau",
                "name": "Ghana",
                "name": "Egypt",
                "name": "Mauritania",
                "name": "Eq. Guinea",
                "name": "Gambia",
                "name": "Madagascar",
                "name": "France",
                "name": "Ukraine",
                "name": "Belarus",
                "name": "Lithuania",
                "name": "Russia",
                "name": "Czechia",
                "name": "Germany",
                "name": "Estonia",
                "name": "Latvia",
                "name": "Sweden",
                "name": "Norway",
                "name": "Finland",
                "name": "Luxembourg",
                "name": "Belgium",
                "name": "North Macedonia",
                "name": "Albania",
                "name": "Kosovo",
                "name": "Spain",
                "name": "Denmark",
                "name": "Hungary",
                "name": "Romania",
                "name": "Slovakia",
                "name": "Poland",
                "name": "Ireland",
                "name": "United Kingdom",
                "name": "Greece",
                "name": "Austria",
                "name": "Italy",
                "name": "Switzerland",
                "name": "Netherlands",
                "name": "Serbia",
                "name": "Croatia",
                "name": "Slovenia",
                "name": "Bulgaria",
                "name": "Bosnia and Herz.",
                "name": "Montenegro",
                "name": "Portugal",
                "name": "Moldova",
                "name": "Iceland",
                "name": "Papua New Guinea",
                "name": "Australia",
                "name": "Fiji",
                "name": "New Zealand",
                "name": "New Caledonia",
                "name": "Solomon Is.",
                "name": "Vanuatu",
Okay I have the world map working too, will release
l
Thank you a lot 🤩
b
Released in 0.0.6
l
Thank you a lot for the support ! I'll work on it tomorrow morning 😄
Open in Slack
PreviousNext
Powered by