I'm trying to dynamically set the map tiles based on the current location using mappa.js and p5.js. Now, I'm able to set the map to location [0,0] using mappa.js and then get location from navigator and draw an eclipse using p5.js. But the map stays centered at [0,0]. I want the map's center to be the current location. I couldn't find much docs to help me.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/mappa-mundi@0.0.5/dist/mappa.js" type="text/javascript"></script>
</head>
<body>
<script>
var mappa
var canvas
var myMap
var init = true
var options= {
lat: 0,
lng: 0,
zoom: 4,
style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
},
mappa = new Mappa("Leaflet");
function setup() {
if(init) {
canvas = createCanvas(600, 600);
init = false
}
myMap = mappa.tileMap(options);
myMap.overlay(canvas)
myMap.onChange(drawCurrentLocation)
}
function draw() {
drawCurrentLocation()
}
function drawCurrentLocation() {
console.log("Current location");
navigator.geolocation.getCurrentPosition(position => {
options.lat = position.coords.latitude
options.lng = position.coords.longitude
})
clear()
const myLocation = myMap.latLngToPixel(options.lat, options.lng);
let c = color(0, 0, 255);
fill(c);
noStroke();
ellipse(myLocation.x, myLocation.y, 10, 10);
}
</script>
</body>
</html>