Processing unfolding maps for each marker

Question

I want to add an image for each marker i have on unfolding maps

Already tried to use Buffer but im not sure what i should do now.

My main class

import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;
import de.fhpotsdam.unfolding.marker.*;

UnfoldingMap map;


import java.util.Map;    // import java hashmaps

// declare country hashmaps
// key // value
HashMap<String, Country> countries = new HashMap<String, Country>();
//PGraphics buffer;
int countryNumber;
Button country;
public void setup() {
  size(800, 600, P2D);
  smooth();  

  //buffer = createGraphics(800, 600);
  map = new UnfoldingMap(this);
  map.setTweening(true);
  map.zoomToLevel(3);

  MapUtils.createDefaultEventDispatcher(this, map);

  String[] lines = loadStrings("test.csv");  //read file and save lines in a string array

  countryNumber = lines.length; // how many lines
  println(countryNumber);

  for (int i=0; i<countryNumber; i++) { //all csv lines

    String line = lines[i];   /// get data from line. Ex: "Portugal,10,91"

    String[] elements = split(line, ","); //separate line by ','

    String name = elements[0]; // get country name
    float lat = parseInt(elements[20]); // lat
    float lon = parseInt(elements[21]); // lon
    PImage flagIcon;

    flagIcon = loadImage(elements[22]); //get image flag name

    Country P = new Country(name, lat, lon, flagIcon); 


    Location mapMarker = new Location(lat,lon);
    // Create point markers for locations
    SimplePointMarker eachMapMarker = new 
    SimplePointMarker(mapMarker);

    // Add markers to the map
    map.addMarkers(eachMapMarker);
    paises.put(nome, P );
  }
}



public void draw() {

  background(255);

  map.draw();    // draw map
  //image(buffer, 200, 50);
  for (Map.Entry p : Countries.entrySet() ) {    // get countries hashmap
    Country country = (Country) p.getValue();
    country.drawInfo();
    country.drawCoor();
    country.drawIcon();
  }
}

My Country class

//my country class

class Country { 

  String name;
  float lat;
  float lon;
  int posX, posY;
  PImage flagIcon;

  Pais (String n, float la, float lo, PImage ic) {
    name = n;
    lat = la;
    lon = lo;
    flagIcon = ic;
  }

  void drawIcon() {
    image(flagIcon,lat,lon,16,16);
  }

  void drawInfo() {
    Location mapLocal = new Location(lat, lon);

    ScreenPosition mapPos = map.getScreenPosition(mapLocal);

    float scale = map.getZoom();

    // if pointer is near a country
    boolean onOver = false;
    if (dist(mouseX, mouseY, mapPos.x, mapPos.y)<2*scale) {
      onOver = true;
    }



    if (onOver) {
      noStroke();
      //fill(255,255,255,255);
      //rect(mouseX+18, mouseY-20, 120, 50);
      fill(0);
      text(name + "\nLat: " + lat + "\nLon: " + lon , mouseX+25, mouseY-5);
    }
  }

  void drawCoor() {
   //println(coordinates);

    fill(0);
    text("coordinates: " + mouseX + " " + mouseY, 650,10); 
  }
}

Image links are stored on my CSV

This is what im getting and as i can see my images arent synced with my lat and lon. Can anyone give me an hand ?

Answer 1

When you draw the country icon on the map, for the input of x and y in the image(PImage image, float x, float y) function inside drawIcon() method, you are supposed to use the marker's position on the map instead of the latitude and longitude properties.

The specific method is called getScreenPosition(UnfoldingMap map) of AbstractMarker. Please refer to the javadoc for the details. http://unfoldingmaps.org/javadoc/de/fhpotsdam/unfolding/marker/AbstractMarker.html#getScreenPosition(de.fhpotsdam.unfolding.UnfoldingMap)

The reason behind it is that (I think) the markers are added to the map with the map.addMarker method, then rendered together with the map.draw() method, where the latitude and longitude are transferred to their screen positions at the backstage.

Because you are trying to add the country icons on top of the country markers after the map.draw() method, you should try to associate the icon's position to the marker's screen position.

    public void draw() {
        background(200);
        map.draw();
        
        for (Marker m: countryMarkers) {
            
            image(countryIcon, (((AbstractMarker) m).getScreenPosition(map).x,
 ((AbstractMarker) m).getScreenPosition(map).y);
        }
    }

It would also help the code look more organized and clean if you make a CountryMarker class extends SimplePointMarker class, which is available in the unfolding maps library.