jaronimoe

import React, {Component} from 'react';
import {render} from 'react-dom';
import {StaticMap} from 'react-map-gl';
import DeckGL, {GeoJsonLayer, PolygonLayer} from 'deck.gl';
import {LightingEffect, AmbientLight, _SunLight as SunLight} from '@deck.gl/core';
import {scaleThreshold} from 'd3-scale';
import {getJSONData} from './data_loader'

// Set your mapbox token here
const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line

jaronimoe

this example shows how to draw arbitrary SVGs (in this case circles) with d3 on a leaflet map.

the code can be seen as an extension to Mike Bostock's tutorial on drawing geoJSON shapes within leaflet with d3: https://bost.ocks.org/mike/leaflet/ - and as an update to similar older examples that rely on outdated leaflet versions.

these are the basic steps:

1. create an svg within the leaflet overlay pane:

    //this svg holds the d3 visualizations
   

svg = d3.select(mymap.getPanes().overlayPane).append("svg");