JSFiddle - React, Tailwind, and code Playground

by garmashnikolay

HTML

<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

  
    <div id="map"></div>

CSS

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    background: #000000;
}

JavaScript

function moveMapToBerlin(map){
  map.setCenter({lat:52.5159, lng:13.3777});
  map.setZoom(14);
}

const APP_ID='s6EH3Yleef6Gfi3tlIsC'
const APP_CODE='9Pu-bKeM-3um0HOJvblSQg'
  
  
/**
 * Boilerplate map initialization code starts below:
 */
// Step 1: initialize communication with the platform
// In your own code, replace window.app_id with your own app_id
// and window.app_code with your own app_code
  var platform = new H.service.Platform({
    app_id: APP_ID,
    app_code: APP_CODE,
    useCIT: true,
    useHTTPS: true
  });
  
  
   const nptBaseLayerProvider = new H.map.provider.ImageTileProvider({
    // We have tiles only for zoom levels 12–15,
    // so on all other zoom levels only base map will be visible
    min: 0,
    max: 20,
    tileSize: 512,
    getURL: function (column, row, zoom) {
      return `https://1.base.maps.api.here.com/maptile/2.1/mapnopttile/newest/normal.night/${zoom}/${column}/${row}/512/png8?app_id=${APP_ID}&app_code=${APP_CODE}&ppi=320`
    }
  })
  const nptBaseLayer = new H.map.layer.TileLayer(nptBaseLayerProvider, { opacity: 0.7 })
  
  var defaultLayers = platform.createDefaultLayers();
  
  
  //Step 2: initialize a map - this map is centered over Europe
  var map = new H.Map(document.getElementById('map'),
    defaultLayers.normal.xbasenight,
    {
      center: {lat:52.5126, lng:13.3979},
      zoom: 14,
      pixelRatio: window.devicePixelRatio,
//      renderBaseBackground: {lower: 0, higher: 0}
  	}
  );
  map.addLayer(nptBaseLayer)
  // add a resize listener to make sure that the map occupies the whole container
  window.addEventListener('resize', () => map.getViewPort().resize());
  
  //Step 3: make the map interactive
  // MapEvents enables the event system
  // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
  var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
  
  // Create the default UI components
  /* var ui = H.ui.UI.createDefault(map,...