JSFiddle - React, Tailwind, and code Playground

by Tristen Brown

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css">
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/mbx/v0.28.2/assembly.min.css">
<script src="https://api.mapbox.com/mapbox-assembly/mbx/v0.28.2/assembly.js"></script>
<div id='maps' className="grid-parent grid-parent--cols-2 absolute top right left bottom"></div>

CSS

.grid-parent {
  display: grid;
}

.grid-parent--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-child {
  display: block;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJjajZoOXU4Z2kwNnppMnlxd2d6bTFvZ2xtIn0.PP7AoUakMfeqdXFHdsY0oA';

const maps = [
	'mapbox://styles/tristen/cjue3jw4f28ss1gnvjzwkpn41',
	'mapbox://styles/tristen/cjua1zib90rfa1fn2z5ton1mm',
	'mapbox://styles/tristen/cjue32v0u1dwh1fmwo8odl9u1',
	'mapbox://styles/tristen/cjue33hys28dn1gnvosvp5r1d'
];

const LNG = 5;
const LAT = 34;
const ZOOM = 1.5;
const container = document.getElementById('maps');
const mapInstances = [];

maps.forEach((style, i) => {
  const mapContainer = document.createElement('div');
	mapContainer.className = 'grid-child relative';
	const map = document.createElement('div');
	map.className = 'absolute top right left bottom';
  
  mapContainer.appendChild(map);
  container.appendChild(mapContainer);
  
	this[`map-${i}`] = new mapboxgl.Map({
  	container: map,
		attributionControl: false,
		style,
		center: [LNG, LAT],
		ZOOM
  });
  mapInstances.push(this[`map=${i}`]);
});

// new mapboxgl.Compare(...mapInstances);