View geographic area in a window

edited April 2017 in Library Questions

Hi, I'm trying to take a geographic area using geographic coordinates and then mapping them to cartesian coordinates to draw a single polygon in a processing window. The problem is that when I use a spherical coordinate transformation using the radius of the globe the area drawn (a car park for example) is very small in the processing draw canvas. How should I best work with this if I want the canvas resized to the polgon drawn? Should I map the polygon to the size of the canvas or should I scale the canvas to the polygon?



  • Answer ✓

    Those are valid questions but it is depend to what you want. If you draw a rectangle representing a car and your map is the size of the country:

    Mapping the rect to the size of the map if the map is defined to the size of the sketch: You car will be a speckle, maybe a point.

    If you scale your map based on the size of the rectangle, you might be making your sketch really big and probably prohibited big to be handle by your graphics card.

    One way to go about it is to draw the size of the polygon independent on the area that you are mapping. If the user zooms in, the resolution of the map should increase while keeping the width/height ratio. When you are zoomed in to the size of the parking spot, then you could adjust the size of the polygon or have an algorithm to automatically choose the parameters for you.

    How are your transforming from lat/lon to cartesian?

    You should consider exploring the unfoldingmap library. You can access it through the library manager in Processing or checking this next:


  • Thanks for the reply, I think without the library I need to take an approach where I am independently mapping the area to the screen using the map function on the resulting cartesian co-ordinates. I was using the following function to convert to cartesian co-ordinates:

    void convertToCart() { for(int i=0; i<gpsCoord.length; i++) { gpsCoord[i].y = 600 * (180 + gpsCoord[i].y) / 360; gpsCoord[i].x = 600 * (90 - gpsCoord[i].x) / 180; println(gpsCoord[i].x,gpsCoord[i].y); } }

    But, I think I should be using and the earth as a radius, correct?

  • Check the video in the following post:

    I have to warn you it is not java Processing but JavaScript Processing (P5js). They are very alike but the notation might be a bit different, specially if it is your first time. What I want to point out is how he does the transformation from geocoordinates to the sketch surface.

    If you find the video confusing, forget about it. We go back to square one. What are the units of your coordinates? Are they lat/lon?

    In a planet, longitude reference lines runs from the N to the S pole. Latitudes are lines parallel to the equator.

    You could map longitude along the width of the sketch and latitude along the height of the sketch.

    For example:

    float myLat=5,
    float myLon=-140;
    float x=map(myLon, -180,180, 0, width);
    float y=map(myLat,-90,90,height,0);  //Height, 0 in that order

    Drawing ellipses are not a problem in this coordinate system. Doing rectangles might require extra steps.


Sign In or Register to comment.