Check this:

https://forum.processing.org/two/search?Search=mapbox

For instance:

https://forum.processing.org/two/discussion/comment/93128/#Comment_93128

I am not addressing your latest post but your initial question. I hope it helps.

Kf

Thanks for pointing me on this excellent video !!!

Right now, I would say that I envision to do the opposit of what David (correct me if I'm wrong) is explaining.

I mean David is adding a mapbox map as a background image to a p5 canvas and then David uses the "scheduler (mechanism)" of the p5 canvas to draw the information onto the background map.

As for me, I think I need to "add" a p5 canvas into a map and then to use the map scheduler to call the draw function of p5.

The reason I tend to do that is that the map scheduler allows, as I said, multiple layers which each layer a specific behavior. The canvas being one these layers.

I'm new with p5, but let me explain my understanding of p5 to check if it's correct ... - p5 is a mechanism to schedule drawings on a canvas, somewhere, I think it is calling kind of "requestAnimFrame" function to refresh the drawing. - p5 offers one setup() function to initialize and one draw() function to draw the changes. - p5 is made of a collection of many libraries functions to implement all the required functionalities. These many libraries functions are called from the setup() or draw() p5 functions.

Is this correct?

The scheduler of the "leaflet canvasLayer" addon is doing quite the same as also calling a "requestAnimFrame" function.

then ...

I'm wondering whether I could ... - A - either instantciate p5 from withing the map scheduler of the "leaflet canvasLayer" addon. Rather difficult because of potential conflicts ... - B - either restrict the usage of p5 to the collection of the many libraries functions ... and then let the scheduler of the "leaflet canvasLayer" addon does the same as the p5 scheduler ...

Thanks for reading me, any though on this?

hello,

I'm developping a personnal project around the "concept of" interactive map.

On this interactive map, I would like to gather as many as possible of information related to one specific thematic.

I mean, I will represent static information (markers, geographical forms ...) and dynamic information (pathes, animations ...). The dynamic information and animations are scheduled according to a global timer (day by day, hour by hour ...). I may have several tens of thousand information per map ...

I've started prototyping the project using leaflet and some of its addons. Leaflet uses the concept of layers to manage different level of information or interactions with the user.

One of these addons is canvasLayer.js that I use for the dynamic part of the project. I can add a canvas layer to the interactive map and draw on this canvas. Being integrated to the leaflet map, this canvas layer is automatically managed when resizing, moving, spanning and managing the user interaction. But, to me, I suffer from a lack of algorithms for drawing all kinds of dynamic objects and then I have to implement most of them by myself ...

On the other hand , p5.js offers a huge amount of animation of all kinds (steering behavior, ...) that I would like to integrate in my interactive map.

Now I'm at the point to ask my questions:

Is it feasible to integrate the p5.js library in a leaflet interactive map? if yes ... how to do that?

I could replace leaflet by mapbox, as long as I keep the concept of interactive map.

I'm open to any discussion about different approach in order to reach the same goal.

Could you help me please?

Thanks

Hey! I'll update this post just for make you know what I've been doing to solve this problem. I used Mapbox gl js & Turf to make the simulation happen. Here's a little video (I have to add more objects):

[edit] -I did manage to get this to work. Working code is at the very bottom. I have a new question: Can anyone point me to some resources that will help me learn how to do this coding challenge with a dynamic map? Example, a map in which I can zoom in and the data will remain in the correct coordinates, the circles will change their size dynamically so that the map is still easier to see, etc? Even better, is there a way to have the earthquake data update regularly or receive a tooltip with earthquake info when I scroll over the ellipses? I know this is way too much, that's why I'm asking for resources, not the actual result :) I'll figure out the rest in pieces. [edit]

original question:

I'm throwing in the towel again, this one has me stumped. I've essentially copied Shiffman's code verbatim but it appears that the url to retrieve a static map doesn't work anymore. You'll notice I'm on part one, before he integrates the earthquake data, so I'm still attempting to get the image to size correctly and to have a single set of coordinates appear in the right location on the canvas. I tried using an updated style and that one is functional and I was even able to get the ellipses to appear and change according to the latitude and longitude...but they never appear in the correct place. Here's my code, it may be hacked up due to all of my experimenting:

var mapimg;

var clat = 0;
var clon = 0;

var lat = 49.2827;
var lon = -123.1207;

function preload() {
    mapimg = loadImage('https://"+"api.mapbox.com/v4/mapbox.dark/0, 0,1/1024x512.png?access_token=KEY');

}

var zoom = 1;

// When I change the zoom variables as well as the corresponding property in the link, weird things happen. Through trial and error I fixed it on the static map in the working code

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(1024, 512);
    translate(width / 2, height / 2);
    imageMode(CENTER);
    image(mapimg, 0, 0);

    var cx = mercX(clon);
    var cy = mercY(clat);

    var x = mercX(lon) - cx;
    var y = mercY(lat) - cy;

    fill(255, 0, 255, 200);
    ellipse(x, y, 16, 16);

}

One of the things you'll notice is that this map loops, so when zoomed out you can see two maps! I haven't figured out if this is the way the image works or if that's to do with the way I've formatted the link. I'll be honest, I am still working out how all of the parameters and equations work. The documentation is overwhelming for me.

Link to Shiffman's video and related github files:

https://github.com/CodingTrain/Rainbow-Code/blob/b22fb09f6eb3e403c3efff370dab42c104a33d35/CodingChallenges/CC_57_Earthquake_Viz/sketch.js

Link to Mapbox API documentation:

https://www.mapbox.com/api-documentation/?language=JavaScript#introduction

Thanks for looking it over!

[edit] - Here's the working code. I solved the problem. My new request is at the top of this thread :)

var mapimg;

var clat = 0;
var clon = 0;

var lat = 49.2827;
var lon = -123.1207;

var earthquakes;

function preload() {
    mapimg = loadImage('https://" + "api.mapbox.com/v4/mapbox.dark/ 0,0,2,1/1024x512.png?access_token=KEY');

    earthquakes = loadStrings('http://" + "earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv');

    // earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.csv

}

var zoom = 1;

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(1024, 512);
    translate(width / 2, height / 2);
    imageMode(CENTER);
    image(mapimg, 0, 0);

    var cx = mercX(clon);
    var cy = mercY(clat);

    for (var i = 1; i < earthquakes.length; i++) {
        var data = earthquakes[i].split(/,/);
        console.log(data);
        var lat = data[1];
        var lon = data[2];
        var mag = data[4];
        var x = mercX(lon) - cx;
        var y = mercY(lat) - cy;

        mag = pow(10, mag);
        mag = sqrt(mag);

        var magmax = sqrt(pow(10, 10));

        var d = map(mag, 0, magmax, 0, 180);
        stroke(255, 0, 255);
        fill(255, 0, 255, 200);
        ellipse(x, y, d, d);
    }
}

I can't figure out how to map the timestamps to something usable on the slider. Any help is welcome!

Not sure how a timestamp would map to your slider. Based on your code, you are showing certain time + 30 days. The slider could set the start time. That will be one approach. A second approach is that if you use a double Slider, then you could select the data to display by setting the lower and max time ranges independently.

I have modified your code to display all the data. There are two things missing. The first one is to properly convert raw time into seconds. After you do that, you need to enable the slider condition to make your slider effective. Code here http://p5js.sketchpad.cc/sp/pad/view/LLapCIpHx4/latest and also below.

Kf

var zoom = 1;
var mapImg; 

var clon = 0;
var clat = 0;
//Red Bank 40.3471° N, 74.0643° W
var lat = 40.3471;
var lon = -74.0643;

var eathquakes;
var data;
var date = [];

var slider;
var currentTime = new Date();
currentTime = currentTime.getTime();
var minMS, maxMS;



function preload() {
  mapImg = loadImage('https://"+"api.mapbox.com/styles/v1/mapbox/dark-v9/static/0,0,1,0,0/1024x512?access_token=pk.eyJ1Ijoic3BrZWxseWRldiIsImEiOiJjajFvdmI1cWMwMDJiMzNtbGQwM3VobHcwIn0.0B1QDD4nZyTssuDJPrax2Q');

  earthquakes = loadStrings('https://"+"earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv');
}



function setup() {
  createCanvas(1024, 512);
  translate(width / 2, height / 2);
  imageMode(CENTER);
  image(mapImg, 0, 0);

  timeSlider(minMS, maxMS);

  slider = createSlider(minMS, currentTime, maxMS);
  slider.size(900);
  slider.position(20, 450);
}

function draw() {
  translate(width / 2, height / 2);
  image(mapImg, 0, 0);
  text(slider.value(),-width/4,0);      

  var cx = webMerX(clon);
  var cy = webMerY(clat); 


  for (var i = 1; i < earthquakes.length; i++) {  //earthquakes.length
    data = earthquakes[i].split(",");

    //date[i] = data[0];
    //convert quake time to ms

    var timeQuake = date[0]; //  Raw time sample: 2017-04-21T06:46:18.627Z

    //MISSING: Converting raw time to ms. Notice raw time is Zulu time

    var lat = data[1];
    var lon = data[2];
    var mag = data[4];

    var x = webMerX(lon) - cx;
    var y = webMerY(lat) - cy;

    mag = sqrt(pow(10, mag));
    var magMax = sqrt(pow(10, 10));

    var d = map(mag, 0, magMax, 0, 100);

    //MISSING: Enabling slider after time stamp is properly processed
    ////if (timeQuake[i] <= slider.value()) {

      fill(255, 130, 100);
      stroke(255);
      ellipse(x, y, d, d);
    ////}
  }
}

//=====================================================================
function timeSlider(min, max) {

  //ms
  //slider = createSlider(minMS, currentTime, maxMS);
  //day in ms
  min = 86400000;
  //30 days in ms
  max = min * 30;
  //get 30 days ago timestamp
  min = currentTime - max;

  max = currentTime;
  //map slider from 1 day in ms to 30 days in ms
  var sliderMinMS = map(minMS, 0, min, 0, currentTime);
  var sliderMaxMS = map(maxMS, 0, (max - min), 0, currentTime);
  return sliderMinMS, sliderMaxMS;
}

//=====================================================================
function webMerX(lon) {
  lon = radians(lon);
  var a = (256 / PI) * pow(2, zoom);
  var b = lon + PI;
  return a*b;
}

//=====================================================================
function webMerY(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;
}

Ok, so I tried to access the json data directly like this:

maps.google.com/maps/api/geocode/json?address=$netherlands&sensor=false&region=Netherlands

http://maps.google.com/maps/api/geocode/json?address=$Aalsmeer&sensor=false&region=Netherlands

http://maps.google.com/maps/api/geocode/json?address=$Ameland&sensor=false&region=Netherlands

and it works. Also mapbox's key is still valid. I tried the following and it works:

var cities =new Array(
    "Aa en Hunze",
    "Aalburg",
    "Aalsmeer",
    "Aalten",
    "Achtkarspelen",
    "Alblasserdam",
    "Albrandswaard",
    "Alkmaar",
    "Almelo",
    "Almere",
    "Alphen%20aan%20den%20Rijn",
    "Alphen-Chaam",
    "Ameland",
    "Amersfoort",
    "Amstelveen",
    "Amsterdam",
    "Apeldoorn",
    "Appingedam",
    "Arnhem",
    "Assen",
    "Asten",
    "Baarle-Nassau",
    "Baarn",
    "Barendrecht",
    "Barneveld",
    "Bedum",
    //"Beek (L.)"
    "Beemster",
    "Beesel",
    "Bellingwedde",
    "Bergambacht"
   ); 

Notice I replaced in some entries spaces with %20. However it seems that is not a problem. There is no problems with hyphens (-) either but I think parentheses will need special treatment. Related links:

http://stackoverflow.com/questions/32348875/can-hyphens-be-used-in-query-string-values
https://forum.processing.org/one/topic/how-make-urlencode.html
http://stackoverflow.com/questions/332872/encode-url-in-javascript

A an alternative, I did the following change when requesting the JSON file for the city which also works:

var acity=encodeURI("https://maps.google.com/maps/api/geocode/json?address=$"+cc+"&sensor=false&region=Netherlands");
let readGeo =loadJSON(acity); 

Here is the latest sketchPad version: http://p5js.sketchpad.cc/sp/pad/view/R14cPjGmuo/latest

In regards to parentheses in one of the names of your cities, you should consider revising a different version or you need to look into the documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

You need to test loading files from external resources. Try loading a simple file for starters or post the code that you are using and the description of the location of your assets. This post might provide better insight: https://forum.processing.org/two/discussion/13393/reading-api-problem-cannot-read-property-responsetext-of-undefined#latest

Kf

Hi,

I'm still dealing with a couple of problems..: I tried it in 2 ways:

1: I used loadStrings, but the places don't show on the map:

`"use strict";  

 var result;
  var map;
  var zoom=6.44;
  const kMaxR=25;
  const kMinR=5;

  var geoData=[];
  var clat=51.949516;
  var clon=6.060097;
  var cc;
  var cx;
  var cy;

  var cities;
  var lat_cities=[];
  var lon_cities=[];
  var rad=kMaxR;

  const TEXT_SIZE = 18, FPS = .5; 


  function preload(){
      cities = loadStrings('assets/citiesNL.txt');

    map=loadImage('https://'+'api.mapbox.com/styles/v1/dirma/cizi74roy001h2spanpymjfdd/static/'+clon+','+clat+','+zoom+',0.00,0.00/1200x800?access_token=pk.eyJ1IjoiZGlybWEiLCJhIjoiY2lpMDl1M3doMDR1NXVza29vanVmOW9nYSJ9.hB2cpg0ETqpqa6MGHU6qIw');    

    for(let cc of cities){
           let readGeo =loadJSON('https://'+'maps.google.com/maps/api/geocode/json?address=$'+cc+'&sensor=false&region=Netherlands');      
      geoData.push(readGeo);      
    }    
  }



  function setup() {  

    createCanvas(1200,800);
    stroke(random(50), random(255), random(255), 100);
    background(255);
    frameRate(FPS).background(0).noStroke();
    textAlign(LEFT, TOP).textSize(TEXT_SIZE);
    imageMode(CENTER);

    for(let readGeo of geoData){
      let res=readGeo.results;
      let tok=res[0].geometry.location.lat;
      lat_cities.push(webmercatorY(tok));
      tok=res[0].geometry.location.lng;
      lon_cities.push(webmercatorX(tok));
     }

     //Map's center
      cx = webmercatorX(clon);
      cy = webmercatorY(clat);
  } 


  function draw() {          

    translate(width/2,height/2);      
    image(map,0,0);    

    for(var j=0;j<lat_cities.length;j++){

      //Cities location on canvas
      var x = lon_cities[j] - cx;
      var y = lat_cities[j] - cy;

      fill(220,20,220,180);
      ellipse(x,y,kMinR,kMinR);

      rad--;
      if(rad<kMinR) rad=kMaxR;

      if(dist(mouseX-width/2,mouseY-height/2,x,y)<kMaxR){
          text(cities[j]+'',x,y);
      }          
    }
  }


  //longitude in degrees
  function webmercatorX(longitude){
      longitude=radians(longitude);
      var a = (256/PI)*pow(2,zoom);  //Mapbox uses 512x512 tiles, so half is 256
      var b = longitude + PI;
      return a*b;
      }


  //latitude in degrees
  function webmercatorY(latitude){
      latitude=radians(latitude);
      var a = (256/PI)*pow(2,zoom);  //Mapbox uses 512x512 tiles, so half is 256
      var b = tan(PI/4+latitude/2);
      var c = PI - log(b);
      return a*c;
      }`

2: I added the places manually, but for some reason it doesn't show some places of the cities array. Some places seem to give errors, for example 'Ameland'. When I put a place like 'Ameland' or 'Aalsmeer' in the array, sometimes the map shows and sometimes I get this error: 'Uncaught TypeError: Cannot read property 'geometry' of undefined'. Does anyone know what I'm doing wrong? :

`"use strict";  

  var map;
  var zoom=5.62;
  const kMaxR=25;
  const kMinR=5;

  var geoData=[];
  var clat=52.172855;
  var clon=5.917137;
  var cc;
  var cx;
  var cy;

  var cities =new Array(
 "Aa en Hunze",
    "Aalburg",
    "Aalsmeer",
    "Aalten",
    "Achtkarspelen",
    "Alblasserdam",
    "Albrandswaard",
    "Alkmaar",
    "Almelo",
    "Almere",
    "Alphen aan den Rijn",
    "Alphen-Chaam",
    // "Ameland",
    "Amersfoort",
    // "Amstelveen",
    // "Amsterdam",
    // "Apeldoorn",
    // "Appingedam",
    // "Arnhem",
    // "Assen",
    // "Asten",
    // "Baarle-Nassau",
    // "Baarn",
    // "Barendrecht",
    // "Barneveld",
    "Bedum",
    "Beek (L.)"
    // "Beemster"
    // "Beesel",
    // "Bellingwedde",
    // "Bergambacht"
   );  
  var lat_cities=[];
  var lon_cities=[];
  var rad=kMaxR;

  const TEXT_SIZE = 18, FPS = .5; 


  function preload(){

    map=loadImage('https://'+'api.mapbox.com/styles/v1/kfrajer/cizvxbzd900102sllt7lozcad/static/'+clon+','+clat+','+zoom+',0.00,0.00/1200x800?access_token=pk.eyJ1Ijoia2ZyYWplciIsImEiOiJjaXp2eDc2eHUwMWVtMnBxcW1jcnUzZjdxIn0.W9vZESizqDyxC85hfeoHeQ');    

    for(let cc of cities){

      let readGeo =loadJSON('https://'+'maps.google.com/maps/api/geocode/json?address=$'+cc+'&sensor=false&region=Netherlands');      
      geoData.push(readGeo);      
    }    
  }



  function setup() {  

    createCanvas(1200,800);
    stroke(random(50), random(255), random(255), 100);
    background(255);
    frameRate(FPS).background(0).noStroke();
    textAlign(LEFT, TOP).textSize(TEXT_SIZE);
    imageMode(CENTER);

    for(let readGeo of geoData){
      let res=readGeo.results;
      let tok=res[0].geometry.location.lat;
      lat_cities.push(webmercatorY(tok));
      tok=res[0].geometry.location.lng;
      lon_cities.push(webmercatorX(tok));
     }

      cx = webmercatorX(clon);
      cy = webmercatorY(clat);
  } 


  function draw() {          

    translate(width/2,height/2);      
    image(map,0,0);    

    for(var j=0;j<lat_cities.length;j++){


      var x = lon_cities[j] - cx;
      var y = lat_cities[j] - cy;

      fill(220,20,220,180);
      ellipse(x,y,kMinR,kMinR);

      rad--;
      if(rad<kMinR) rad=kMaxR;

      if(dist(mouseX-width/2,mouseY-height/2,x,y)<kMaxR){
          text(cities[j]+'',x,y);
      }          
    }
  }


  function webmercatorX(longitude){
      longitude=radians(longitude);
      var a = (256/PI)*pow(2,zoom);  //Mapbox uses 512x512 tiles, so half is 256
      var b = longitude + PI;
      return a*b;
      }


  function webmercatorY(latitude){
      latitude=radians(latitude);
      var a = (256/PI)*pow(2,zoom);  //Mapbox uses 512x512 tiles, so half is 256
      var b = tan(PI/4+latitude/2);
      var c = PI - log(b);
      return a*c;
      }`

You can add them manually or you can read a file or URL using loadStrings. You can check the P5.js reference for an explanations and check the provided examples. If it is not clear, ask below and any of the forum goers will be happy to provide you an example or to point you to a previous post with one.

So as you see in the link, what I am doing is this:

1. I start with an array of know cities ( I don't know many places in Netherlands... sorry)
2. In preload, I inquire for all the geoinformation of those cities. I am not sure if you know this, but preload executes all its statements and only after all statements are done, the program continues its normal execution aka. setup() will be executed follow by continuous calls to draw().
3. Then in setup, I retrieve my geo object and I extract all the information I need like lat and lon.

The push() function is associated to array objects. I am pushing or adding some specific info to my array. This is the way to do so.

This code was just a simple demonstration of how to accomplish your task. It can be adapted to your purpose and isntead of preload, you could use a callback method. I recommend checking the video I provided in the previous post as @shiffman does a terrific job explaining the usage of mapbox and how to interact with it.

Kf

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).

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

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

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

Hi everyone,

I'm quite a beginner in p5.js and I want to do the following:

I have a csv table with data of medication use in The Netherlands, per town. This data I want to show on an interactive (mapbox) map.

Problem 1:
The csv file only has the names of the towns, not the longitude & latitude. Is there a way to generate this automatically? Otherwise I have to do it manually for about 400 towns:(.

Problem 2:
When I have the longitude and latitude, how can I show them on a map, using mapbox, via p5.js?

I hope you can help me with this!!!

Best,

Dirma

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

Hi,

I'm having a similar problem to atomtm in that the example works, but when I replace the filename with my own file (loaded in the same area) my map isn't displayed. I'm using Mapbox Studio to create the mbtile file and I get the following error when reading it in:

Unfolding Map v0.9.6
Using OpenGLMapDisplay with processing.opengl.PGraphics2D
Can't create image from buffer
Can't create image from buffer
Can't create image from buffer
Can't create image from buffer
java.lang.NullPointerException
    at de.fhpotsdam.unfolding.tiles.MBTilesLoaderUtils.getAsImage(Unknown Source)
    at de.fhpotsdam.unfolding.tiles.MBTilesLoaderUtils.getMBTile(Unknown Source)
    at de.fhpotsdam.unfolding.providers.MBTilesMapProvider.getTile(Unknown Source)
    at de.fhpotsdam.unfolding.tiles.TileLoader.run(Unknown Source)
    at java.lang.Thread.run(Thread.java:745) 

I've set the correct center and limited my zoom to between 6 & 11 in the settings of MapBox and used the same map.zoomAndPanTo method to ensure the same information is displayed in processing.

I used MapBox Studio to create the MBTiles. Am I correct in saying these are vector formats while the files coming from TileMill are raster and the Unfolding library works only with raster?

Thanks

You could use TileMill (be aware you need https://www.mapbox.com/tilemill/ and not Mapbox Studio), load the area you need from OpenStreetMap, style your map, and export it as MBTiles which you then can load and use in Unfolding.

Check out http://unfoldingmaps.org/tutorials/mapprovider-and-tiles.html#create-your-own-map-style for more info.

Yes, you can use OpenStreetMap based map tiles in Unfolding without an internet connection. You can download OpenStreetMap data from their dump, or - easier - specific areas from https://mapzen.com/data. Then you select features and a design style in TileMill (https://www.mapbox.com/tilemill/), and finally export it as map tiles.

These map tiles can be loaded in Unfolding from your computer.

Check out http://unfoldingmaps.org/tutorials/mapprovider-and-tiles.html#create-your-own-map-style, or the example MBTilesApp in your Unfolding library (In Processing > File > Examples > Contributed Libraries > Unfolding Maps). But be sure to read the notice at the beginning (how to install another library before).

Hello,

I just started to work with unfolding and I'm trying to create an own layout for a map. Through processing there is only the possibility to insert existing map layouts through certain providers but I want to build my own. I looked into tillmile and mapbox but couldn't figure out how to import the data into my unfolding processing sketch. Is it that complicated? I am a beginner so don't be too harsh on me please!

Alright, I checked and the directory was read only. I changed that and it kinda works. I get a map but the tiles are in the wrong order maybe. The US is split with the Southern portion where the Northern portion should be. At least I've got something coming in and can start working with the Unfolding features.

I figured out why the map order is all screwy and it's because I'm using MapBox.MapBoxProvider and in the comments it says the coordinate order is opposite to OSM and my repository is OSM. I'll just have to mess with that.