https://evidence.dev logo
Title
l

loud-notebook-55987

05/25/2023, 3:34 PM
Hello ! Is there any option to build a map of another country or a even a world map. ?
b

bright-smartphone-11251

05/25/2023, 3:36 PM
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

loud-notebook-55987

05/25/2023, 3:39 PM
It's a pity 😢, I was needing a choropleth
b

bright-smartphone-11251

05/25/2023, 3:40 PM
For which country / map?
l

loud-notebook-55987

05/25/2023, 3:40 PM
world map, also France (but it can wait)
g

great-boots-39022

05/25/2023, 4:27 PM
@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

loud-notebook-55987

05/25/2023, 5:17 PM
🙂 top!! thanks a lot
g

great-boots-39022

05/26/2023, 12:55 AM
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:
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

loud-notebook-55987

05/26/2023, 7:16 AM
Thanks a lot Sean !! you have helped me a lot 😄
🙌 1
I'll try it now
g

great-boots-39022

05/26/2023, 11:55 AM
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

loud-notebook-55987

05/30/2023, 9:52 AM
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

great-boots-39022

05/31/2023, 2:25 PM
No problem at all! Just wanted to share the info as I was thinking about it
🤩 1