MonkCode

import L from "leaflet"
import greatloop from "../GeoJSON/greatloop.json"
import home from "../GeoJSON/homeIcon.svg"
// JSX for my react application
// first "invisible" icon
var smallIcon = new L.Icon({
  iconUrl: home,
  iconSize: [0.0, 0.0],
  iconAnchor: [0, 0],
})

this.map = L.map("home_map", {
  center: [37.9404, -77.8943],
  zoom: 3,
  layers: [
    L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }),
  ],
})

L.geoJSON(greatloop, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, { icon: smallIcon })
  },
}).addTo(this.map)
// JSX for my react template
<div id="home_map" style={{ height: "200px" }}></div>

import * as d3 from "d3"
import * as topojson from "topojson"
import us from "../GeoJSON/states-albers-10m.json"
// in the componentDidMount
const width = 975;
const height = 610;

const zoom = d3.zoom()
    .scaleExtent([1, 8])
    .on("zoom", zoomed);

const svg = d3.select(this.refs.home_graph)
    .attr("viewBox", [0, 0, width, height])
    .attr("width", width)
    .attr("height", height)
    .attr("style", "max-width: 100%; height: 200px;")
    .on("click", reset);

const path = d3.geoPath();

const g = svg.append("g");

const states = g.append("g")
    .attr("fill", "#444")
    .attr("cursor", "pointer")
  .selectAll("path")
  .data(topojson.feature(us, us.objects.states).features)
  .join("path")
    .on("click", clicked)
    .attr("d", path);

states.append("title")
    .text(d => d.properties.name);

g.append("path")
    .attr("fill", "none")
    .attr("stroke", "white")
    .attr("stroke-linejoin", "round")
    .attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)));

svg.call(zoom);

function reset() {
  states.transition().style("fill", null);
  svg.transition().duration(750).call(
    zoom.transform,
    d3.zoomIdentity,
    d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
  );
}

function clicked(event, d) {
  const [[x0, y0], [x1, y1]] = path.bounds(d);
  event.stopPropagation();
  states.transition().style("fill", null);
  d3.select(this).transition().style("fill", "red");
  svg.transition().duration(750).call(
    zoom.transform,
    d3.zoomIdentity
      .translate(width / 2, height / 2)
      .scale(Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)))
      .translate(-(x0 + x1) / 2, -(y0 + y1) / 2),
    d3.pointer(event, svg.node())
  );
}

function zoomed(event) {
  const {transform} = event;
  g.attr("transform", transform);
  g.attr("stroke-width", 1 / transform.k);
}
// template
<svg ref="home_graph"></svg>