dbabbs/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
    <style>
    body, html { border: 0; padding: 0; margin: 0}
    #root {
       height: 100vh;
       width: 100%;
    }
    </style>
  </head>
  <body>


    <!-- We will put our React component inside this div. -->
    <div id="root"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/three/build/three.min.js"></script>
      <script src="https://unpkg.com/@here/harp.gl/dist/harp.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="map.js"></script>

  </body>
</html>

## map.js
"use strict";

const e = React.createElement;

class HarpMap extends React.Component {
   constructor(props) {
      super(props);
      this.state = {};
      this.map = null;
   }

   componentDidMount = () => {
      const { harp } = window;
      this.map = new harp.MapView({
         canvas: document.querySelector('#map'),
         theme: "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_night_reduced.json",
      });

      const omvDataSource = new harp.OmvDataSource({
         baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
         apiFormat: window.harp.APIFormat.XYZOMV,
         styleSetName: "tilezen",
         authenticationCode: "AGrdMdqrcvM-4h-0PXlBi8U",
      });
      this.map.addDataSource(omvDataSource);
      this.map.lookAt(new harp.GeoCoordinates(40.709658, -74.002835), 5000, 40, 20);

      new harp.MapControls(this.map);

      window.onresize = () => this.map.resize(window.innerWidth, window.innerHeight);
   }

   componentWillUnmount = () => {
      this.map.dispose();
   }

   render() {
      return e(
         "canvas",
         {
            id:"map",
            style: {height: '100%', width: '100%'}
         },
         "canvas"
      );
   }
}

const domContainer = document.querySelector("#root");
ReactDOM.render(e(HarpMap), domContainer);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Add React in One Minute</title>
	<style>
	body, html { border: 0; padding: 0; margin: 0}
	#root {
	height: 100vh;
	width: 100%;
	}
	</style>
	</head>
	<body>


	<!-- We will put our React component inside this div. -->
	<div id="root"></div>

	<!-- Load React. -->
	<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
	<script src="https://unpkg.com/three/build/three.min.js"></script>
	<script src="https://unpkg.com/@here/harp.gl/dist/harp.js"></script>
	<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

	<!-- Load our React component. -->
	<script src="map.js"></script>

	</body>
	</html>
	"use strict";

	const e = React.createElement;

	class HarpMap extends React.Component {
	constructor(props) {
	super(props);
	this.state = {};
	this.map = null;
	}

	componentDidMount = () => {
	const { harp } = window;
	this.map = new harp.MapView({
	canvas: document.querySelector('#map'),
	theme: "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_night_reduced.json",
	});

	const omvDataSource = new harp.OmvDataSource({
	baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
	apiFormat: window.harp.APIFormat.XYZOMV,
	styleSetName: "tilezen",
	authenticationCode: "AGrdMdqrcvM-4h-0PXlBi8U",
	});
	this.map.addDataSource(omvDataSource);
	this.map.lookAt(new harp.GeoCoordinates(40.709658, -74.002835), 5000, 40, 20);

	new harp.MapControls(this.map);

	window.onresize = () => this.map.resize(window.innerWidth, window.innerHeight);
	}

	componentWillUnmount = () => {
	this.map.dispose();
	}

	render() {
	return e(
	"canvas",
	{
	id:"map",
	style: {height: '100%', width: '100%'}
	},
	"canvas"
	);
	}
	}

	const domContainer = document.querySelector("#root");
	ReactDOM.render(e(HarpMap), domContainer);