Estoy tratando de visualizar datos mapeando la latitud, la longitud y la magnitud de algunos de los principales vecindarios de Chicago con p5.js. Está inspirado en este desafío de codificación . Lo seguí minuciosamente, solo cambié el área y el zoom del mapa (usando Mapbox API). Los códigos se ven bien y aparece el mapa. Pero cuando trato de visualizar una sola ubicación como un círculo en el mapa antes incluso de ingresar los datos, no aparece en el boceto. ¡Súper agradecido si alguien puede decirme cuál podría ser el problema aquí!
var mapimg; var zoom = 10; var clat = 0; var clon = 0; var lat = 41.9000; var lon = -87.7204; function preload() { mapimg = loadImage ('https://api.mapbox.com/styles/v1/mapbox/dark-v10/static/-87.7278,41.9099,10,0/400x400?access_token=pk.eyJ1Ijoic2wzMDcyNCIsImEiOiJja3VuMWNieWgzd3MzMnVrNmU2bzNwdndoIn0.cGgvcAgQwVdnNsHLIeBf9A'); } function mercX(lon) { lon = radians(lon); var a = (256 / PI) * pow(2, zoom); var b = (lon) + PI; return a * b; } function mercY (lat) { lat = radians(lat); var a = (256 / PI) * pow(2, zoom); var b = tan(PI / 4 + lat / 2); var c = PI - log(b); return a * c; } function setup() { createCanvas(400, 400); translate(width/2, height/2); imageMode(CENTER); image(mapimg, 0, 0); stroke(255); strokeWeight(100); noFill(); circle(0, 0, 500); var cx = mercX(clon); var cy = mercY(clat); var x = mercX(lon) - cx; var y = mercY(lat) - cy; } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>Creo que el problema tiene que ver con mercX y mercY y las entradas que les está pasando. Parece que tal vez están diseñados para convertir la latitud y la longitud en píxeles.
Estaba usando 0 tanto para clat como para clon , lo que significaría que el mapa estaba centrado en el ecuador en el meridiano principal. Entonces, las coordenadas relativas de píxeles entre allí y Chicago eran enormes. Creo que he corregido el código usando valores para clat y clon de la URL de tu mapbox. Sin embargo, encuentro que las implementaciones de mercX y mercY son algo incomprensibles, y no estoy seguro de lo que está tratando de resaltar, por lo que no puedo estar seguro. Pero al menos x e y están ahora en la pantalla (mostrados con un punto rojo).
var mapimg; var zoom = 10; var clat = 41.9099; var clon = -87.7278; var lat = 41.9000; var lon = -87.7204; function preload() { mapimg = loadImage ('https://api.mapbox.com/styles/v1/mapbox/dark-v10/static/-87.7278,41.9099,10,0/400x400?access_token=pk.eyJ1Ijoic2wzMDcyNCIsImEiOiJja3VuMWNieWgzd3MzMnVrNmU2bzNwdndoIn0.cGgvcAgQwVdnNsHLIeBf9A'); } function mercX(lon) { lon = radians(lon); var a = (256 / PI) * pow(2, zoom); var b = (lon) + PI; return a * b; } function mercY (lat) { lat = radians(lat); var a = (256 / PI) * pow(2, zoom); var b = tan(PI / 4 + lat / 2); var c = PI - log(b); return a * c; } function setup() { createCanvas(400, 400); translate(width/2, height/2); imageMode(CENTER); image(mapimg, 0, 0); stroke(255); strokeWeight(100); noFill(); circle(0, 0, 500); // get the center of the image in pixels var cx = mercX(clon); var cy = mercY(clat); // convert lon & lat to pixels and find the relative displacement from the center var x = mercX(lon) - cx; var y = mercY(lat) - cy; print({ cx, cy, x, y }); stroke('red'); strokeWeight(8); point(x, y); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>