Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@cloudflare/chart-map

Package Overview
Dependencies
Maintainers
0
Versions
584
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cloudflare/chart-map

Cloudflare map presentational components

  • 9.0.0
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
853
increased by0.95%
Maintainers
0
Weekly downloads
 
Created
Source

@cloudflare/chart-map

Cloudflare map presentational components

WARNING!

Upgrading mapbox-gl in this package will cost up to an additional $10,000 a month! See: https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0

This package has been patched to add referrerPolicy support via yarn patch-commit.

Installation

Installation with yarn is recommended


$ yarn add @cloudflare/chart-map

Configuration

All components in this package rely on MapBox and require access token in order to talk to MapBox API.

Use <MapProvider /> at the top of your component hierarchy to provide the access token along with other global configuration to all chart components.

<MapProvider /> accepts the following props:

  • accessToken: MapBox access token. Required by MapBox API to identify the client.
  • referrerPolicy: MapBox requires referer header along with the access token in order to identify clients. If a client website uses a referer policy that prevents the browsers from sending the referer header (e.g., noreferrer or same-origin), all requests to MapBox API fail with 403 Unauthorized and prevent the chart components from rendering. This prop can be used to override the referrer policy for the requests to MapBox API. In the most cases you will want to set it to strict-origin-when-cross-origin. For more options, please refer to fetch API specification. For more context about this problem, see: https://github.com/mapbox/mapbox-gl-js/pull/12590.

Usage

import React from 'react';
import { Box } from '@cloudflare/component-box';
import { MapProvider, MapChoropleth, MapBubble, MapLinks, MapHeatmap } from '../../src';
import ccs from './iso2-country-codes.json'; // ["AD","AE","AF","AG",...]

const MAPBOX_ACCESS_TOKEN = '' // read from env 

// Choropleth data
const countryData = ccs.map(cc => ({
  cc: cc,
  val: Math.round(Math.random() * 1e3)
}));

// Bubble data
const N_BUBBLES = 30;
const MAX_VAL = 1000;
const groupColors = ['rgb(40,110,164)', 'rgb(166,30,32)'];
const bubbleData = [...Array(N_BUBBLES).keys()].map(idx => ({
  lat: Math.random() * 180 - 90,
  lng: Math.random() * 360 - 180,
  value: Math.random() * MAX_VAL,
  name: idx.toString(),
  group: Math.floor(Math.random() * groupColors.length)
}));

// Links data
const linksData = [];
[
  // CF offices
  [37.7803628, -122.3957331],
  [40.1189773, -88.2464608],
  [30.2681573, -97.7445804],
  [51.5047963, -0.1089703],
  [1.278984, 103.848831]
].forEach((srcCoords, idx, pnts) => {
  // Full mesh links
  for (let i = idx + 1; i < pnts.length; i++) {
    const dstCoords = pnts[i];
    linksData.push({ src: srcCoords, dst: dstCoords });
  }
});

// Heatmap data
const N_POINTS = 2000;
const heatmapData = [...Array(N_POINTS).keys()].map(() => ({
  lat: Math.random() * 180 - 90,
  lng: Math.random() * 360 - 180,
  value: Math.random() * MAX_VAL
}));

const ViewComponent = () => (
  <MapProvider accessToken={MAPBOX_ACCESS_TOKEN}>
    <Box display="flex">
      <Box flex="1" margin="5px">
        <MapChoropleth
          data={countryData}
          countryDimension="cc"
          valueDimension="val"
          valueFormatter={d => d}
          valueLabel="Units"
          colorScaleExp={3}
          onCountryClick={cc => console.info('Clicked:', cc)}
          onCountryHover={cc => console.info('Hover country:', cc)}
        />
      </Box>
      <Box flex="1" margin="5px">
        <MapBubble
          data={bubbleData}
          nameDimension="name"
          latDimension="lat"
          lngDimension="lng"
          valueDimension="value"
          valueLabel="Units"
          valueFormatter={n => n.toPrecision(5)}
          colorDimension={d => groupColors[d.group]}
          maxRadius={25}
          onBubbleClick={bubble => console.info('Clicked:', bubble)}
          onBubbleHover={bubble => console.info('Hover state:', bubble)}
        />
      </Box>
    </Box>
    <Box display="flex">
      <Box flex="1" margin="5px">
        <MapLinks
          data={linksData}
          srcLatDimension={({ src: [lat] }) => lat}
          srcLngDimension={({ src: [_, lng] }) => lng}
          dstLatDimension={({ dst: [lat] }) => lat}
          dstLngDimension={({ dst: [_, lng] }) => lng}
          colorDimension={() => 'orange'}
          widthDimension={2}
          opacityDimension={0.7}
        />
      </Box>
      <Box flex="1" margin="5px">
        <MapHeatmap
          data={heatmapData}
          latDimension="lat"
          lngDimension="lng"
          valueDimension="value"
          saturation={2}
          pointRadius={60}
        />
      </Box>
    </Box>
  </MapProvider>
);

export default ViewComponent;

FAQs

Package last updated on 11 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc