Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use bubble map with longitude and latitude #202

Closed
Dan-Veinberg opened this issue Oct 18, 2023 · 4 comments
Closed

How to use bubble map with longitude and latitude #202

Dan-Veinberg opened this issue Oct 18, 2023 · 4 comments
Labels
answered The question has been answered but is in a waiting state question Further information is requested

Comments

@Dan-Veinberg
Copy link

Dan-Veinberg commented Oct 18, 2023

Can someone give me an example on how to use bubblemap with longitude and latitude values for the whole world? Is there a way to do it without use typescript?
Also can you answer the following questions:

  1. I also keep an error that the map needs to be destroyed before being created. I am using React.js.
  2. How to update map with new data?

Thank you so much. I am have been trying to create a Bubble Map world map with longitude and latitude for several weeks now without success.
My Code So far:

useEffect(()=>{

` fetch('https://unpkg.com/world-atlas@2.0.2/countries-50m.json')
    .then((r) => {
      console.log(r.json().then((datapoint)=>{
        const countries = ChartGeo.topojson.feature(datapoint,datapoint.objects.countries).features
        console.log(countries)
    const chart = new Chart(document.getElementById("canvas").getContext("2d"),{
      type: 'bubbleMap',
      data: {
        labels: countries.map((d) => d.properties.name),
        datasets: [
          {
            label: 'States',
            outline: countries,
            data: countries.map((d) => ({
              value: 10,
              feature: d
            })),
          },
        ],
      },
      options: {
        showOutline: true,
        showGraticule: false,
        plugins: {
          legend: {
            display: false,
          },
        },
        scales: {
          xy: {
            projection: 'equalEarth'
          },
        }
      },
    });

  }))

 
  })

`},[])``

@Dan-Veinberg Dan-Veinberg added the question Further information is requested label Oct 18, 2023
@sgratzl sgratzl added the answered The question has been answered but is in a waiting state label Oct 20, 2023
@Dan-Veinberg
Copy link
Author

Dan-Veinberg commented Oct 20, 2023

Thank you for answering. I have not look at those examples yet. How do I just do bubbles for longitude and latitude instead of states? It seems like the examples do states only.

@sgratzl
Copy link
Owner

sgratzl commented Oct 20, 2023

what do you mean? the referenced example uses the referenced json which contains long/lat for the US capitals and that's where the bubbles are shown.

@Dan-Veinberg
Copy link
Author

Dan-Veinberg commented Oct 21, 2023

Okay I see now. I will try it out. Thank you for your help.

@sgratzl sgratzl closed this as completed Nov 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
answered The question has been answered but is in a waiting state question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants