Interactive map components

[hughess]

Description

Adds interactive map components powered by Leaflet. Includes:

• BaseMap - composable map component, with ability to include multiple layers

  <BaseMap>
    <Points/>
    <Areas/>
  </BaseMap>

• AreaMap

  <AreaMap data={la_zip_sales} geoId="zipcode_field_in_geojson" areaCol="zip_code" />

• PointMap

  <PointMap data={la_locations} lat="lat" long="long" />

• BubbleMap

  <BubbleMap data={la_locations} lat="lat" long="long" size="sales" />

Major Features

• Drill-down links: supply a link column and when the point/area is clicked, it will navigate to the link
• Inputs: passing a name to the map will let you treat the map like an input component. When a point/area is clicked, the input will be set to that row of data. An individual value can be access using {inputs.my_map_name.my_column_name}
• Custom tooltips: the tooltip prop accepts an array of tooltip objects.
  • This functionality closely resembles the DataTable Column component's options
  • Note this will be replaced by a friendlier component syntax in the future
  • E.g.,

       tooltip={[
             {id: 'store_name', showColumnName: false},
             {id: 'sales', fmt: 'usd'}
      ]}

• Links in tooltips: within tooltip, you can use the contentType option to specify that a column is a link
  • To make the link clickable, you will need to use tooltipType=click (default is hover, where it's not possible to click the link)

Checklist

• [x] For UI or styling changes, I have added a screenshot or gif showing before & after
• [x] I have added a changeset
• [x] I have added to the docs where applicable
• [x] I have added to the VS Code extension where applicable

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: a03b7d65bd1d4998866eef21be4f0607f8ca089e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

| Name | Type | | ----------------------------- | ----- | | @evidence-dev/core-components | Minor | | @evidence-dev/evidence | Major | | my-evidence-project | Patch | | @evidence-dev/components | Patch | | evidence-test-environment | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify[bot]]

✅ Deploy Preview for evidence-test-env ready!

Name	Link
🔨 Latest commit	a03b7d65bd1d4998866eef21be4f0607f8ca089e
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-test-env/deploys/66479202a641700008ad0c74
😎 Deploy Preview	https://deploy-preview-2011--evidence-test-env.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	a03b7d65bd1d4998866eef21be4f0607f8ca089e
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/66479202a014600008896140
😎 Deploy Preview	https://deploy-preview-2011--evidence-development-workspace.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for next-docs-evidence ready!

Name	Link
🔨 Latest commit	a03b7d65bd1d4998866eef21be4f0607f8ca089e
🔍 Latest deploy log	https://app.netlify.com/sites/next-docs-evidence/deploys/664792023e64900008600e48
😎 Deploy Preview	https://deploy-preview-2011--next-docs-evidence.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.