1. Getting Started with Milestone 2
From Lat Lon, to Cartesian, and back again…

2. Initial Steps Download m2 handout Follow the walkthrough in Section 4
Read the EZGL QuickStart Guide
Modify main.cpp
Begin implementing the draw_map function

3. Modifying Your Main Function
#include "m1.h"
#include "m2.h“
int main(int argc, char** argv) {
//Other code goes here…
//Load the map and related data structures
bool load_success = load_map(map_path);
if(!load_success) {
std::cerr << "Failed to load map '“
<< map_path << "'\n";
return 2; }
draw_map();
close_map();
return 0;
Don’t forget to include m2.h
You only need to add one line in the function.
Make sure you call draw_map after you call load_map.
Make sure you call draw_map before you call close_map.

4. Goal #1: Creating an Empty Window

5. Goal #1: An Empty Window

6. Implementing draw_map
#include "m2.h“
#include "ezgl/application.hpp“
#include "ezgl/graphics.hpp“
void draw_map () {
ezgl::application::settings settings;
settings.main_ui_resource =
"libstreetmap/resources/main.ui";
settings.window_identifier = "MainWindow";
settings.canvas_identifier = "MainCanvas";
ezgl::application application(settings);
application.run(nullptr, nullptr,
nullptr, nullptr); }
Make sure to include m2.h

7. Implementing draw_map
#include "m2.h“
#include "ezgl/application.hpp“
#include "ezgl/graphics.hpp“
void draw_map () {
ezgl::application::settings settings;
settings.main_ui_resource =
"libstreetmap/resources/main.ui";
settings.window_identifier = "MainWindow";
settings.canvas_identifier = "MainCanvas";
ezgl::application application(settings);
application.run(nullptr, nullptr,
nullptr, nullptr); }
Include EZGL headers
Read these headers in detail, they describe all the features of EZGL

8. Implementing draw_map
#include "m2.h“
#include "ezgl/application.hpp“
#include "ezgl/graphics.hpp“
void draw_map () {
ezgl::application::settings settings;
settings.main_ui_resource =
"libstreetmap/resources/main.ui";
settings.window_identifier = "MainWindow";
settings.canvas_identifier = "MainCanvas";
ezgl::application application(settings);
application.run(nullptr, nullptr,
nullptr, nullptr); }
Setup EZGL Configuration
main.ui file defines window layout

9. Implementing draw_map
#include "m2.h“
#include "ezgl/application.hpp“
#include "ezgl/graphics.hpp“
void draw_map () {
ezgl::application::settings settings;
settings.main_ui_resource =
"libstreetmap/resources/main.ui";
settings.window_identifier = "MainWindow";
settings.canvas_identifier = "MainCanvas";
ezgl::application application(settings);
application.run(nullptr, nullptr,
nullptr, nullptr); }
Create the EZGL application

10. Implementing draw_map
#include "m2.h“
#include "ezgl/application.hpp“
#include "ezgl/graphics.hpp“
void draw_map () {
ezgl::application::settings settings;
settings.main_ui_resource =
"libstreetmap/resources/main.ui";
settings.window_identifier = "MainWindow";
settings.canvas_identifier = "MainCanvas";
ezgl::application application(settings);
application.run(nullptr, nullptr,
nullptr, nullptr); }
Finally we run the application
Passes control to EZGL
Graphics window will open
Will not return until graphics closed

11. Our Newly Created Window
Pan Buttons
Zoom buttons
Close window and continue

12. Drawing on a Canvas
#include "m2.h“
#include "ezgl/application.hpp“
#include "ezgl/graphics.hpp“
void draw_main_canvas (ezgl::renderer &g);
void draw_map_blank_canvas() {
ezgl::application::settings settings;
settings.main_ui_resource =
"libstreetmap/resources/main.ui";
settings.window_identifier = "MainWindow";
settings.canvas_identifier = "MainCanvas;
ezgl::application application(settings);
ezgl::rectangle initial_world({0, 0},
{1000, 1000});
application.add_canvas("MainCanvas",
draw_main_canvas,
initial_world);
application.run(nullptr, nullptr,
nullptr, nullptr); }
Need to define a Canvas (area to draw upon), requires:
Named location in main.ui (“MainCanvas”)
Co-ordinate system (initial_world)
Drawing callback function (draw_main_canvas)
application.run() will call draw_main_canvas()

13. Draw Callback Called by application.run() to ‘paint’ the canvas
The renderer object supports many drawing operations (shapes, text): See ezgl/graphics.hpp
void draw_main_canvas (ezgl::renderer &g) {
g.draw_rectangle({0, 0},
{1000, 1000}); };
For now, we just draw a rectangle around the world coordinates
draw_rectangle takes two arguments:
Bottom-left corner
Top-right corner

14. Our Window’s Coordinate System
Top-Right Corner (1000.0, )
Bottom-Left Corner (0.0, 0.0)

15. Goal #2: Drawing Intersections

16. Loading Intersection Data
struct intersection_data {
LatLon position;
std::string name; };
std::vector<intersection_data> intersections;
void draw_map () {
intersections.resize(getNumIntersections());
for (int id = 0; id < getNumIntersections(); ++id) {
intersections[id].position = getIntersectionPosition(id);
intersections[id].name = getIntersectionName(id); }
//Other setup code not shown...
application.run(nullptr, nullptr,
nullptr, nullptr);
Write your code to initialize intersections

17. Use fill_rectangle to draw all the intersections
struct intersection_data {
LatLon position;
std::string name; };
std::vector<intersection_data> intersections;
void draw_main_canvas(ezgl::renderer &g) {
g.draw_rectangle({0, 0}, {1000, 1000});
for (size_t i = 0; i < intersections.size(); ++i) {
float x = intersections[i].position.lon();
float y = intersections[i].position.lat();
float width = 10;
float height = width;
g.fill_rectangle({x, y}, {x + width, y + height}); }
Write your code to draw each intersection

18. Attempt #1 at Drawing Intersections

19. Are x and y correct?
void draw_main_canvas(ezgl::renderer &g) {
g.draw_rectangle({0, 0}, {1000, 1000});
for (size_t i = 0; i < intersections.size(); ++i) {
float x = intersections[i].position.lon();
float y = intersections[i].position.lat();
float width = 10;
float height = width;
g.fill_rectangle({x, y}, {x + width, y + height}); }
What are the possible values of the longitude and latitude?
What coordinate system did we setup as initial_world?

20. Finding Map bounds Write your code here Write your code here
double max_lat = getIntersectionPosition(0).lat();
double min_lat = max_lat;
double max_lon = getIntersectionPosition(0).lon();
double min_lon = max_lon;
intersections.resize(getNumIntersections());
for (int id = 0; id < getNumIntersections(); ++id) {
intersections[id].position = getIntersectionPosition(id);
intersections[id].name = getIntersectionName(id);
max_lat = std::max(max_lat, intersections[id].position.lat());
min_lat = std::min(min_lat, intersections[id].position.lat());
max_lon = std::max(max_lon, intersections[id].position.lon());
min_lon = std::min(min_lon, intersections[id].position.lon()); }
Write your code here
Write your code here

21. Updating World Coordinates
ezgl::rectangle initial_world({min_lon, min_lat},
{max_lon, max_lat});
application.add_canvas("MainCanvas",
draw_main_canvas_xy_fixed_world,
initial_world);
application.run(nullptr, nullptr, nullptr, nullptr);

22. Attempt #3 – A corrected visible world…

23. Modifying the draw size
Intersection width and height were set to big!
I played around and got it right with 0.001
Should the width and height change based on the zoom level?

24. Attempt #4 – Eureka! Is this correct?
Interactive Demo: Show basic pan/zoom

25. Converting Lat/Lon to Cartesian X/Y
Should project Lat/Lon to Cartesian X/Y
See M1 handout for details
Need average latitude of map
Should use functions to do the conversion:
Inverse also useful:
float x_from_lon(float lon);
float y_from_lat(float lat);
float lon_from_x(float x);
float lat_from_y(float y);

26. Convert x and y into Cartesian Coordinates
void draw_main_canvas(ezgl::renderer &g) {
for (size_t i = 0; i < intersections.size(); ++i) {
float x = x_from_lon(intersections[i].position.lon());
float y = y_from_lat(intersections[i].position.lat());
float width = 0.001;
float height = width;
g.fill_rectangle({x, y}, {x + width, y + height}); }

27. Attempt #5 – Corrected Projection

28. Projection Comparison

29. Reacting to Mouse Clicks

30. Reacting to Mouse Clicks
application.run(nullptr, act_on_mouse_click,
nullptr, nullptr);
void act_on_mouse_click(ezgl::application* app,
GdkEventButton* event,
double x, double y) {
std::cout << "Mouse clicked at (" << x << "," << y << ")\n";
LatLon pos = LatLon(lat_from_y(y), lon_from_x(x));
int id = find_closest_intersection(pos);
std::cout << "Closest Intersection: “
<< intersections[id].name << "\n"; }
Find the closest intersection to (x, y)
Write your code to find the closest intersection to (x, y)

31. Stateful Graphics

32. Highlighting Closest Intersection
How can we draw the closest intersection differently?
void act_on_mouse_click(ezgl::application* app,
GdkEventButton* event,
double x, double y) {
std::cout << "Mouse clicked at (" << x << "," << y << ")\n";
LatLon pos = LatLon(lat_from_y(y), lon_from_x(x));
int id = find_closest_intersection(pos);
std::cout << "Closest Intersection: “
<< intersections[id].name << "\n"; }
Find the closest intersection to (x, y)

33. Storing & Modifying State
struct intersection_data {
LatLon position;
std::string name;
bool highlight = false; };
Set state based on mouse click
void act_on_mouse_click(ezgl::application* app,
GdkEventButton* event,
double x, double y) {
std::cout << "Mouse clicked at (" << x << "," << y << ")\n";
LatLon pos = LatLon(lat_from_y(y), lon_from_x(x));
int id = find_closest_intersection(pos);
std::cout << "Closest Intersection: “
<< intersections[id].name << "\n";
intersections[id].highlight = true; }
Find the closest intersection to (x, y)

34. Drawing State Draw based on state struct intersection_data {
LatLon position;
std::string name;
bool highlight = false; };
Draw based on state
void draw_main_canvas(ezgl::renderer &g) {
for (size_t i = 0; i < intersections.size(); ++i) {
float x = x_from_lon(intersections[i].position.lon());
float y = y_from_lat(intersections[i].position.lat());
float width = 0.001;
float height = width;
if (intersections[i].highlight) {
g.set_color(ezgl::RED);
} else {
g.set_color(ezgl::GREY_55); }
g.fill_rectangle({x, y}, {x + width, y + height});
Interactive Demo: Show how clicking doesn’t show highlight until zoom/pan forces redraw
Modify code to include refresh_screen() to fix

35. Forcing a Redraw When state changes graphics will not update
Can force a refresh
void act_on_mouse_click(ezgl::application* app,
GdkEventButton* event,
double x, double y) {
std::cout << "Mouse clicked at (" << x << "," << y << ")\n";
LatLon pos = LatLon(lat_from_y(y), lon_from_x(x));
int id = find_closest_intersection(pos);
std::cout << "Closest Intersection: “
<< intersections[id].name << "\n";
intersections[id].highlight = true;
app->refresh_drawing(); }

36. Modifying GUI

37. Modifying GUI The GUI window layout is specified in:
libstreetmap/resources/main.ui
You can modify the GUI by editing this file
Easiest way is to use the ‘glade’ GUI editor tool:
$ glade libstreetmap/resources/main.ui
Can re-name components
Move positions
Add new components (text boxes etc.)
Demo: Change application title bar name