JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.css">
<script src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
<script src="https://raw.githack.com/robhawkes/vizicities/dev/examples/vendor/TweenMax.min.js"></script>
<script src="https://raw.githack.com/robhawkes/vizicities/dev/dist/vizicities.min.js"></script>
  <div id="world"></div>
<script>
// London
var coords = [51.505, -0.09];

var world = VIZI.world('world', {
  skybox: true,
  postProcessing: true
}).setView(coords);

// Set position of sun in sky
world._environment._skybox.setInclination(0.3);

// Add controls
VIZI.Controls.orbit().addTo(world);

// Leave a single CPU for the main browser thread
world.createWorkers(7).then(function() {
  console.log('Workers ready');

  // CartoDB basemap
  VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
  }).addTo(world);

  // Buildings and roads from Tilezen (polygons and linestrings)
  VIZI.mvtTileLayer('https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=-P8vfoBlQHWiTrDduihXhA', {
    workers: true,
    interactive: false,
    style: function(feature) {
      var height;

      if (feature.properties.height) {
        height = feature.properties.height;
      } else {
        height = 10 + Math.random() * 10;
      }

      return {
        height: height,
        lineColor: '#f7c616',
        lineWidth: 1,
        lineTransparent: true,
        lineOpacity: 0.2,
        lineBlending: THREE.AdditiveBlending,
        lineRenderOrder: 2
      };
    },
    layers: ['buildings', 'roads'],
    filter: function(feature) {
      // Don't show points
      return feature.geometry.type !== 'Point';
    },
    attribution: '&copy; <a...