Loading...
Logo
Processing Forum
Programming Questions
oatcracker
oatcracker

how to properly display latitude and longitude data?

in Programming Questions  •  18 days ago  
I used the following code to visualize the Zurich bus stop locations information in the stop.json file (geojson format) as shared via:
https://github.com/swissnexSF/Urban-Data-Challenge/tree/master/public-transportation/zurich/geo/geojson

However, I found the proportion of the geo positions as visualized is skewed as compared to that visualized by Raymon Sutedjo & Sandra Lee ( http://ray-mon.com/urbandatachallenge/zurich.html).

May I ask how to correctly visualize the latitude and longitude data so that the map is shown with proper overall proportion?

Thanks!

my viz:


Raymon Sutedjo & Sandra Lee's viz ( http://ray-mon.com/urbandatachallenge/zurich.html):



my code:

Copy code
  1. // coded by Ji Zhang (hope.zh@gmail.com)
  2. // Sep-2013

  4. JSONObject stopsJSON;
  5. JSONArray stops;

  7. Stop[] stations;

  9. float latitude_min = 90;
  10. float latitude_max = 0;
  11. float longitude_min = 180;
  12. float longitude_max = 0;

  14. float canvas_width;
  15. float canvas_height;


  18. ///////////////////////////////////////////////////////////////////////////
  19. void setup() {
  20.   size(1000, 1000);
  21.  
  22.   stopsJSON = loadJSONObject("stops.json");
  23.  
  24.   stops = stopsJSON.getJSONArray("features");
  25.   //println(stops.size());
  26.   stations = new Stop[stops.size()];
  27.  
  28.   for (int i = 0; i < stops.size(); i++) {
  29.     JSONObject stop_i = stops.getJSONObject(i);
  30.     JSONObject stop_i_properties = stop_i.getJSONObject("properties");
  31.     int stopId            = stop_i_properties.getInt("stopId");
  32.     int stopNumber        = stop_i_properties.getInt("stopNumber");
  33.     String stopName       = stop_i_properties.getString("stopName");
  34.     String stopName_short = stop_i_properties.getString("stopNameShort");
  35.    
  36.     JSONObject stop_i_geometry = stop_i.getJSONObject("geometry");
  37.     double stop_longitude = stop_i_geometry.getJSONArray("coordinates").getDouble(0);
  38.     double stop_latitude  = stop_i_geometry.getJSONArray("coordinates").getDouble(1);
  39.    
  40.     if ( (float)stop_longitude < longitude_min ) {
  41.       longitude_min = (float)stop_longitude ;
  42.     } else if ( (float)stop_longitude > longitude_max ) {
  43.       longitude_max = (float)stop_longitude ;
  44.     }
  45.    
  46.     if ( (float)stop_latitude < latitude_min ) {
  47.       latitude_min = (float)stop_latitude ;
  48.     } else if ( (float)stop_latitude > latitude_max ) {
  49.       latitude_max = (float)stop_latitude ;
  50.     }
  51.    
  52.     println("_________________________");
  53.     println("stop sequence: " + i);
  54.     println("stopId: " + stopId);   
  55.     println("stopNumber: " + stopNumber);
  56.     println("stopName: " + stopName);
  57.     println("stopName_short: " + stopName_short);
  58.     println("stop_longitude: " + stop_longitude);
  59.     println("stop_latitude: " + stop_latitude);
  60.    
  61.     stations[i] = new Stop();
  62.     stations[i].stopId = stopId;
  63.     stations[i].stopNumber = stopNumber;
  64.     stations[i].stopName = stopName;
  65.     stations[i].stopName_short = stopName_short;
  66.     stations[i].stop_longitude = stop_longitude;
  67.     stations[i].stop_latitude = stop_latitude;
  68.    
  69.   }
  70.  
  71.   println("longitude_min: " + longitude_min);
  72.   println("longitude_max: " + longitude_max);
  73.   println("latitude_min: "  + latitude_min);
  74.   println("latitude_max: "  + latitude_max);
  75.  
  76.   float canvas_proportion = ((float)latitude_max - (float)latitude_min) / ((float)longitude_max - (float)longitude_min);
  77.   println("canvas_proportion: " + canvas_proportion);
  78.  
  79.   if ( (height/width) >= canvas_proportion ) {
  80.     canvas_width = width;
  81.     canvas_height = canvas_proportion * width;
  82.   } else if ( (height/width) < canvas_proportion ) {
  83.     canvas_width = height / canvas_proportion;
  84.     canvas_height = height;
  85.   } 

  87. }


  90. ///////////////////////////////////////////////////////////////////////////
  91. void draw() {
  92.   background(0);
  93.  
  94.   fill(30);
  95.   noStroke();
  96.   rect( (width - (width-canvas_width)/2 - canvas_width),
  97.         (height - (height - canvas_height)/2 - canvas_height),
  98.         canvas_width, canvas_height);
  99.        
  100.   strokeWeight(2);
  101.   stroke(255);
  102.  
  103.   for (Stop stop : stations) {
  104.     stop.drawStop();
  105.   }
  106. }


  109. class Stop {
  110.   int stopId;
  111.   int stopNumber;
  112.   String stopName;
  113.   String stopName_short;
  114.   double stop_longitude;
  115.   double stop_latitude;
  116.  
  117.   void Stop () {}
  118.  
  119.   void drawStop () {
  120.     float ptX = map((float)stop_longitude, longitude_min,longitude_max,
  121.                     width - (width-canvas_width)/2 - canvas_width,
  122.                     width - (width-canvas_width)/2);
  123.     float ptY = map((float)stop_latitude,  latitude_max,latitude_min,
  124.                     height - (height - canvas_height)/2 - canvas_height,
  125.                     height - (height - canvas_height)/2);
  126.     point(ptX, ptY);
  127.   }
  128.  
  129. }


Replies(7)

oatcracker
oatcracker

Re: how to properly display latitude and longitude data?

18 days ago
advices are greatly appreciated!
dimiro
dimiro

Re: how to properly display latitude and longitude data?

18 days ago
personally i cannot tell the difference by just looking at these two pics..
however, since i cannot open the link (raymon etc) and i do not know which file format did they use and how the did i will make a guess...
if you use the shp files you can play around with the thousands different map projections that exist...i assume it can be done with the json data too but it gets a bit complicated
oatcracker
oatcracker

Re: Re: how to properly display latitude and longitude data?

18 days ago
Hi, dimiro, I'm reading point coordinates from a geojson file. I haven't touch the "reading shape file and draw polygons" part ...
quarks
quarks

Re: how to properly display latitude and longitude data?

18 days ago
The range of values for longitude and latitude are

longitude range: 0.3300457
latitude range:  0.15697479

but then you map these to the width and height of the display (bothe the same at 1000) so the result is stretched in the vertical direction.
oatcracker
oatcracker

Re: how to properly display latitude and longitude data?

18 days ago
Yes, quarks, I'm aware of the issue, and that's why I have a "canvas_proportion" variable, which is used to compare with the processing screen proportion to determine the position of the dots (I only cropped the middle part of the output image to show over here)
quarks
quarks

Re: how to properly display latitude and longitude data?

18 days ago

I'm aware of the issue, and that's why I have a "canvas_proportion" variable, which is used to compare with the processing screen proportion to determine the position of the dots
Sorry missed that - I was having trouble following the maths logic. Anyway I have simplified your program. The plot area (shown in light grey) is now the largest square that fits in the display window and is centred in the window.

I have also simplified some of the maths getting rid of the screen correction factor. You should be able to work out what is happening.

HTH

Copy code
  1. // coded by Ji Zhang (hope.zh@gmail.com)
  2. // Sep-2013
  3. JSONObject stopsJSON;
  4. JSONArray stops;
  5. Stop[] stations;
  6. float latitude_mid;
  7. float latitude_min = 360;
  8. float latitude_max = -360;
  9. float longitude_mid;
  10. float longitude_min = 360;
  11. float longitude_max = -360;
  12. float delta_max;
  13. float plotSize, halfPlotSize;

  15. ///////////////////////////////////////////////////////////////////////////
  16. void setup() {
  17.   size(800, 500);
  18.   plotSize = min(width, height);
  19.   halfPlotSize = plotSize/2;
  20.   stopsJSON = loadJSONObject("stops.json");
  21.   stops = stopsJSON.getJSONArray("features");
  22.   //println(stops.size());
  23.   stations = new Stop[stops.size()];
  24.   for (int i = 0; i < stops.size(); i++) {
  25.     JSONObject stop_i = stops.getJSONObject(i);
  26.     JSONObject stop_i_properties = stop_i.getJSONObject("properties");
  27.     int stopId            = stop_i_properties.getInt("stopId");
  28.     int stopNumber        = stop_i_properties.getInt("stopNumber");
  29.     String stopName       = stop_i_properties.getString("stopName");
  30.     String stopName_short = stop_i_properties.getString("stopNameShort");
  31.     JSONObject stop_i_geometry = stop_i.getJSONObject("geometry");
  32.     double stop_longitude = stop_i_geometry.getJSONArray("coordinates").getDouble(0);
  33.     double stop_latitude  = stop_i_geometry.getJSONArray("coordinates").getDouble(1);

  35.     if ( (float)stop_longitude < longitude_min ) {
  36.       longitude_min = (float)stop_longitude ;
  37.     }
  38.     else if ( (float)stop_longitude > longitude_max ) {
  39.       longitude_max = (float)stop_longitude ;
  40.     }

  42.     if ( (float)stop_latitude < latitude_min ) {
  43.       latitude_min = (float)stop_latitude ;
  44.     }
  45.     else if ( (float)stop_latitude > latitude_max ) {
  46.       latitude_max = (float)stop_latitude ;
  47.     }

  49.     println("_________________________");
  50.     println("stop sequence: " + i);
  51.     println("stopId: " + stopId);   
  52.     println("stopNumber: " + stopNumber);
  53.     println("stopName: " + stopName);
  54.     println("stopName_short: " + stopName_short);
  55.     println("stop_longitude: " + stop_longitude);
  56.     println("stop_latitude: " + stop_latitude);

  58.     stations[i] = new Stop();
  59.     stations[i].stopId = stopId;
  60.     stations[i].stopNumber = stopNumber;
  61.     stations[i].stopName = stopName;
  62.     stations[i].stopName_short = stopName_short;
  63.     stations[i].stop_longitude = stop_longitude;
  64.     stations[i].stop_latitude = stop_latitude;
  65.   }

  67.   latitude_mid = (latitude_max + latitude_min)/2;
  68.   longitude_mid = (longitude_max + longitude_min)/2;
  69.   delta_max = max((latitude_max - latitude_min), (longitude_max-longitude_min));
  70.   println("longitude_min: " + longitude_min);
  71.   println("longitude_max: " + longitude_max);
  72.   println("latitude_min: "  + latitude_min);
  73.   println("latitude_max: "  + latitude_max);
  74.   println("longitude_max: " + longitude_max);
  75. }

  77. ///////////////////////////////////////////////////////////////////////////
  78. void draw() {
  79.   background(0);
  80.   fill(96);
  81.   noStroke();
  82.   rect((width-plotSize)/2, (height-plotSize)/2, plotSize, plotSize);
  83.  
  84.   strokeWeight(2);
  85.   stroke(255);
  86.   for (Stop stop : stations) {
  87.     stop.drawStop();
  88.   }
  89. }

  91. class Stop {
  92.   int stopId;
  93.   int stopNumber;
  94.   String stopName;
  95.   String stopName_short;
  96.   double stop_longitude;
  97.   double stop_latitude;

  99.   void Stop () {
  100.   }

  102.   void drawStop () {
  103.     float ptX = (float)(stop_longitude - longitude_mid) / delta_max;
  104.     ptX = map(ptX, -0.5, 0.5, -halfPlotSize, halfPlotSize);
  105.     float ptY = (float)(latitude_mid - stop_latitude) / delta_max;
  106.     ptY = map(ptY, -0.5, 0.5, -halfPlotSize, halfPlotSize);
  107.     point(ptX + width/2, ptY + height/2);
  108.   }
  109. }

oatcracker
oatcracker

Re: Re: how to properly display latitude and longitude data?

17 days ago
Thank you very much, quark!
Top Reply

Statistics

  • 7 Replies
  • 382  Views
  • 1 Followers

Actions

Related Posts