Slippy Maps on p5.js

g8f

This codetrain video goes through how to import a mapbox map image onto a p5.js Sketch.

My question is - how does one incorporate a slippy map from mapbox into a p5.js skecth? Also, if I were to draw a bunch of (lat, long) GPS points onto the slippy map, is it still possible to have them at the correct reference points as I zoom and pan around? Thanks in Advance :) Gee

DFRgth456

Up

kfrajer

Is the zooming done by loading another image from their website, assuming you are using mapbox? Or are you applying zooming by scaling your sketch? For the former, you need to keep track of the center of your map and the zoom factor of you loaded map image. Then the web marcator functions will take care of the correct positioning of your points in your sketch (yes, you need to keep using translate and any geocoordinate to be offset from the center as illustrated in the video). On the other hand, if you are using scaling functions applied to an image, then you need to look into previous post related to panning: https://forum.processing.org/two/search?Search=panning
Also:
https://forum.processing.org/two/discussion/20445/resize-sketch-window https://forum.processing.org/two/discussion/comment/86915#Comment_86915

Related to how to insert mapbox into a p5.js, it is a described in the video. Did you try it?

I just used the info on this video in another post: https://forum.processing.org/two/discussion/21135/add-latitude-longitude-to-csv-file-and-make-interactive-map-with-the-data/p1

Kf

DFRgth456

Hello kfrajet, thanks for the input. I'm not sure what want g8f but I kind know waht I want, and why I upped. I am trying to have a slippy map, with drag and drop and zooming function. Just like that https://www.mapbox.com/blog/geocoding-wikidata/ I assume that the slippy mode and zooming one are embedded by the API mapbox. I tried like in the video with a static one, It's work, but when I switch the link found in the documentation with a slippy one. It does'nt work anywork, the loading frizz in process and I go a Uncaught ReferenceError: require is not defined error. here the code

var mapimg;


//pk.eyJ1IjoidGhvbWFzbGFpbmUiLCJhIjoiY2l6bnhodXJkMDAweTJxbnlndjU0Z2QyNyJ9.MVC_KSbEp4c-lLx9UnfRVQ

function preload(){
  mapimg = loadImage('https://api.mapbox.com/v4/mapbox.light/zoomwheel,zoompan,geocoder,share.html?access_token=pk.eyJ1IjoidGhvbWFzbGFpbmUiLCJhIjoiY2l6bnhodXJkMDAweTJxbnlndjU0Z2QyNyJ9.MVC_KSbEp4c-lLx9UnfRVQ#5/33.119/-68.577')

}

function setup() {
  createCanvas(600,600);
  image(mapimg, 0, 0);

}

I don't know why it's not working. I'll digg in your http://p5js.sketchpad.cc/sp/pad/view/R14cPjGmuo/latest?

edit: found someone, said It doesnt work because of the loadImage, I should use another function

kfrajer

Edit your post. Select your code. Hit ctrl+o. Make sure there is an empty line above and below your code.

For the static case, yes, there are several links offered by the mapbox API. When you are editing your map, click in create a static map and then you will be able to copy the link. You know that you have the right link when you see the latitude and longitude info in the last part of the link, exactly as in shiffman's video.

For dynamic panning and zooming, it will take some additional effort and to become familiar with the API. I can't promise anything on my side at the moment because I have my hands full. Get the static version working first.

Kf

DFRgth456

Thanks for the advice. There was a misunderstanding, the static version is working from the beginning. For the dynamic one, I think I don't use the right function. But I hope I will. At the end I will us maybe the googlemap API instead of mapbox https://developers.google.com/maps/documentation/javascript/examples/map-simple but I don't know how to use the piece of code in mine (for now).