JSFiddle - React, Tailwind, and code Playground

by Max Sinev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo/1.9.1/d3-geo.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://ammap.com/lib/3/maps/js/usaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<div id="mapdiv" style="width: 100%; height: 370px;"></div>
<div>
  <button onclick="zoomIn()">
    +
  </button>
  <button onclick="zoomOut()">
    -
  </button>
  <button onclick="back()">
    Back
  </button>
  <button onclick="center()">
    Center
  </button>
</div>

JavaScript

var map; var  globalProvider;
let path = d3.geoPath();
var previousZoom = null;

transformTopo().then((data) => {
	  map = new AmCharts.AmMap();
    //map.pathToImages = "http://www.ammap.com/lib/3/images/";
    map.colorSteps = 10;
    map.zoomOnDoubleClick = false;
    map.zoomControl.zoomControlEnabled = false;
    map.zoomControl.homeButtonEnabled = false;
    map.zoomControl.zoomFactor = 3;
    map.zoomControl.maxZoomLevel = 200;
    map.balloon.color = "#000000";
    map.fitMapToContainer = true;
    globalProvider = {
      mapVar: data.svgMap,
      areas: data.values
    };

    map.areasSettings = {
      autoZoom: true
    };
    map.dataProvider = globalProvider;

    var valueLegend = new AmCharts.ValueLegend();
    valueLegend.right = 10;
    valueLegend.minValue = "little";
    valueLegend.maxValue = "a lot!";
    map.valueLegend = valueLegend;
    var startZooming = false;
    map.addListener('clickMapObject', () => {
    	console.log('ObjectClicked');
      startZooming = true;
    });
    
    map.addListener('zoomCompleted', () => {
    	console.log('Zoom Completed');
      let zoom = {
        level: map.zoomLevel(),
        x: map.zoomX(),
        y:  map.zoomY()
  		}
      if (startZooming) {
      	previousZoom = zoom;
        startZooming = false;
      } 
      console.log(zoom);
    });
    
    map.addListener('init', () => {
    	console.log(1);
    	map.clickMapObject(map.getObjectById('48'));
    });
    
    map.write("mapdiv");
});

function getSvgBase() {
   return { svg: { g: { path: [] } } };
}

function transformTopo() {
	return axios.get('https://d3js.org/us-10m.v1.json').then(({data}) => {
    let states = transformCollection(data, 'states');
    let counties = transformCollection(data, 'counties');
    linkCollections(states, counties);
    return states;
  });
}

function transformCollection(topo, name) {
	let features = topojson.feature(topo, topo.objects[name]).features;
  let svgMap = getSvgBase();
  let values = [];
 ...