JSFiddle - React, Tailwind, and code Playground

HTML

<style>
	body, html{ height: 100%; }
</style>
<script type='application/javascript' src='https://livemapdev.maaap.it/js/sdk.min.js'></script>

<div id='map-container' style='width: 100%; height: 100%;'></div>

<script>
	// Create your map
	var container = document.getElementById('map-container');
	var options = {
	    emmid: 7439,
	    token: 'Y6TBX2RX7HUP21XCCMFNHM6AV'
    };
	var livemap = wemap.v1.createLivemap(container, options, false);

	// Create Pinpoints from geojson

    var geojson2Pinpoints = (featuresCollection) => {
        var features = featuresCollection.features.filter(feat => {
            return feat.geometry.type === 'Point';
    });
    var id = 0;
    var pinpoints = features.map(feat => {
      return {
        id: id++,
        name: feat.properties.name,
        latitude: feat.geometry.coordinates[1],
        longitude: feat.geometry.coordinates[0],
        description: feat.properties.description,
        type: feat.properties.media_url ? 2 : 1,
        media_url: feat.properties.media_url,
        media_type: feat.properties.media_url ? 'image' : undefined
      };
    });
    return pinpoints;
  };
	livemap.waitForReady().then(function() {
    fetch('https://gist.githubusercontent.com/bertrandmd/99656cbee2c6b81607cce3243137cf35/raw/74aae01eb4ee84a5d96db7139a7c6275371dd150/example.geojson')
  .then(resp => resp.json())
  .then(data => {
      var pinpoints = geojson2Pinpoints(data);

      // Add your Pinpoint to the map
      return livemap.setPinpoints(pinpoints);      	
  })
  .then(response => {
     var bounds = response.bounds;
     var options = {
         padding: {bottom: 0, top: 65, left: 0, right:0}
     }

			livemap.fitBounds(bounds.toArray(), options);
  });
  });
</script>