mikima/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Basic Mappa Tutorial</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js" type="text/javascript"></script>
  <script src="https://cdn.jsdelivr.net/npm/mappa-mundi/dist/mappa.min.js" type="text/javascript"></script>
</head>

<body>
  <script src="map.js"></script>
</body>

</html>

## map.js
var myMap;
var canvas;
var key = 'pk.eyJ1IjoibWlraW1hIiwiYSI6ImNqZ2RzZ3RvcjM3OGozM2xpaXEyZm1xc2QifQ.kQtk3BHI9A6xVPKdLgvA-Q'
var mappa = new Mappa('Mapbox', key);


// Lets put all our map options in a single object
var options = {
  lat: 0,
  lng: 0,
  zoom: 4,
  studio: true, // false to use non studio styles
  //style: 'mapbox.dark' //streets, outdoors, light, dark, satellite (for nonstudio)
  style: 'mapbox://styles/mikima/cjfy1ltb45xo32spj8vpry2y3',
};

function setup() {
	canvas = createCanvas(windowWidth, 640);
	//background(22); //let's uncomment this, we don't need it for now;

  	// Create a tile map and overlay the canvas on top.
  	myMap = mappa.tileMap(options);
  	myMap.overlay(canvas);
}

function draw() {

}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Basic Mappa Tutorial</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js" type="text/javascript"></script>
	<script src="https://cdn.jsdelivr.net/npm/mappa-mundi/dist/mappa.min.js" type="text/javascript"></script>
	</head>

	<body>
	<script src="map.js"></script>
	</body>

	</html>
	var myMap;
	var canvas;
	var key = 'pk.eyJ1IjoibWlraW1hIiwiYSI6ImNqZ2RzZ3RvcjM3OGozM2xpaXEyZm1xc2QifQ.kQtk3BHI9A6xVPKdLgvA-Q'
	var mappa = new Mappa('Mapbox', key);


	// Lets put all our map options in a single object
	var options = {
	lat: 0,
	lng: 0,
	zoom: 4,
	studio: true, // false to use non studio styles
	//style: 'mapbox.dark' //streets, outdoors, light, dark, satellite (for nonstudio)
	style: 'mapbox://styles/mikima/cjfy1ltb45xo32spj8vpry2y3',
	};

	function setup() {
	canvas = createCanvas(windowWidth, 640);
	//background(22); //let's uncomment this, we don't need it for now;

	// Create a tile map and overlay the canvas on top.
	myMap = mappa.tileMap(options);
	myMap.overlay(canvas);
	}

	function draw() {

	}