Skip to content

Instantly share code, notes, and snippets.

@mikima

mikima/index.html

Last active August 30, 2023 23:26
Show Gist options
  • Save mikima/4bfe74b8dd12b911ba4a986bd162c78d to your computer and use it in GitHub Desktop.
Save mikima/4bfe74b8dd12b911ba4a986bd162c78d to your computer and use it in GitHub Desktop.
Download ZIP
mappa.js test
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mappa-mundi/dist/mappa.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
Raw
sketch.js
const key = 'pk.eyJ1IjoibWlraW1hIiwiYSI6IjNvWUMwaUEifQ.Za_-O03W3UdQxZwS3bLxtg';
const options = {
lat: 10,
lng: 20,
zoom: 1,
style: 'mapbox://styles/mapbox/traffic-night-v2',
pitch: 0,
};
// Create an instance of MapboxGL
const mappa = new Mappa('MapboxGL', key);
let myMap;
let canvas;
let meteorites;
function setup() {
canvas = createCanvas(400,400);
// Create a tile map and overlay the canvas on top.
myMap = mappa.tileMap(options);
myMap.overlay(canvas);
// Load the data
// Only redraw the meteorites when the map change and not every frame.
myMap.onChange(drawThings);
fill(109, 255, 0);
stroke(100);
}
// The draw loop is fully functional but we are not using it for now.
function draw() {}
function drawThings() {
// Clear the canvas
clear();
}
function mouseReleased() {
const position = myMap.pixelToLatlng(mouseX, mouseY);
print(position);
}
Raw
style.css
html, body {
margin: 0;
padding: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment