UI: Map/Subject Synchronization, Part 2: Current Origin

Loading...

From the course by Johns Hopkins University

Capstone: Photo Tourist Web Application

18 ratings

Johns Hopkins University

Capstone: Photo Tourist Web Application

18 ratings

Course 6 of 6 in the Specialization Ruby on Rails Web Development

In this Capstone project for the Photo Tourist you will implement a Ruby on Rails web application that makes use of both a relational and NoSQL database for the backend and expose the data through services to the Internet using Web services and a responsive user interface operating in a browser from a desktop and mobile device. You will have a chance to revisit and apply what you have learned in our previous courses to build and deploy a fully functional web application to the cloud accessible to your co-workers, future employers, friends, and family. In developing the Photo Tourist web application, you will get to work with different data types and data access scenarios (e.g., fielded data display and update, image upload/download, text search, access controlled information) to provide your users the ability to show off their photos and information from trips they have taken and to seek out photos and information from trips taken by others. Using the application you develop, your users will be able to • Create an account • Upload and download photos to the site and make them accessible to others • Provide descriptions of trips and photos that others can read • Organize photos by location and trip, • Find photos based on location • Find photos based on text searches of descriptions • Locate the place where the photo was taken on a map

From the lesson

Mapping

In this module you will learn to display and interact with subjects on a map using the Google Javascript Map API. You will learn how to display a map, display markers on the map, customized markers to distinguish different types of subjects, and add display information windows for markers to indicate subject identity and image You will learn how to synchronize elements of the map with the other Subject components. You will learn to clear the map of markers, add new markers, activate marker(s) through a method call, and react to markers being clicked. This will complete our subjects page and course topics and leave you on the doorstep of building more interesting extensions to the example in the assignment. Good luck!

Module 8 Introduction2:32

UI: Display Map, Part 1: Implementation9:09

UI: Display Map, Part 2: Logistics and Completion10:20

UI: Display Origin Marker10:21

UI: Display Subject Markers6:53

UI: Display Info Windows15:10

UI: Map/Subject Synchronization, Part 1: Current Subject10:28

UI: Map/Subject Synchronization, Part 2: Current Origin7:05

Course Outro3:26

Meet the Instructors

Jim Stafford
Adjunct Professor, Graduate Computer Science
Computer Science, Whiting School of Engineering

In this lecture, we will discuss continuing our synchronization

of our Map with our Subjects page.

And specifically in this part, synchronizing the Map Center with the Current Origin.

Now with the selection of images in sync, one of the other things you should noticed

is that our current origin isn't quite tracking with the rest of the page.

Even though the rest of the page thinks the Inner Harbor is the origin,

the map still thinks Johns Hopkins University is the origin.

Let's fix that.

When we fix that, let's go top down.

Let's go over to the current subjects component,

where we've been establishing a lot of these watch statements.

And what we want to do is watch the current location of the currentOrigin.

We don't need to know distance, all we need is the location.

And when the location changes, let's store that off

and call a helper method within this controller to update the origin.

And when we go to update the origin,

first we need to verify that we have a map service in place

and we were past a location to be the origin of this map.

And at that point, we're going to call a method of the map service

that we haven't implemented yet, center, and pass it a new set of Map Options that,

in this case, only consist of a new center position, of latitude and longitude.

And with the map recentered, we now want to display our new origin on the map,

with an updated origin window expressing new geographic information.

Now over when we implement the center method,

let's check to see that there is a map instantiated and the color supplied in map options.

And just like we did when we instantiated the map initially,

let's normalize those options that they're passing in.

And if they expressed a new center,

let's store off that new value into our stored off Map Options

and then call setCenter on the map, passing in that new value.

And the same works for the other properties we're setting as well, Zoom and Map Type ID.

And there are several other properties that you could set

if you want to go back and look at the documentation.

This is all we're going to worry about in this example.

And the other thing we have to worry about is redisplaying the Origin Marker.

And what if we had a previous Origin Marker?

We should probably clear the old marker.

And it's more of a pinpoint replacement to clear all markers,

we're just clearing a particular one.

And by my implementation,

you're already starting to see a worry that I have of multithreading.

So when we come into the method, we store off of the current marker.

And if we have a marker, then we remove the listener and we set it's map to null.

And if at that time, when we finish,

if the current marker is still what we stored off, then let's null out the Origin Marker.

It's a hard race condition to get into, but if you remember our base implementation

of the current Subjects page - is to go out and find my location if a location isn't set,

and that completes asynchronously.

And, let's say, two to five seconds.

At the same time while that's going on, the user could be selecting an origin

and changing the mileage, in which case,

you could have multiple threads trying to set the current origin,

and just trying to be safe here and trying to keep the two different threads

from walking over each other's state.

However, what's done here is not enough.

What we need is some concept of synchronization.

We would like only one color of display origin invoking at a time.

Now JavaScript doesn't exactly have that, but there is a suitable stand-in in this case,

because we owe no result back from this method.

It's just sort of like get it done at some point in the future.

That suitable stand-in for synchronization is to take whatever functionality

that we would have implemented in line to move that to the callback of a timeout,

because there is only one timeout executing at a time.

Right?

This is an indirect way of implementing synchronization.

However, when we do implement the timeout,

realize that all this code is gonna execute in a callback.

And this pointer is not going to be valid at that point in time,

so we need to store off to this pointer into another variable, let's call it service.

And then, we need to update all of the this pointers to now be service pointers.

OK?

All right, this construct assures that this group of code is gonna get executed together,

one at a time against the service.

Now, when I refresh the map and change my origin location,

you notice that our red marker moved down here at the Inner Harbor.

And if I go within one mile, we'd be in to see it right here.

And it says Inner Harbor and with the lat and long of the Inner Harbor.

So if I say Key Highway Baltimore, it puts the center of the map down towards the south.

OK?

However, as good as we feel, we have to address an issue that we still have with our test.

One of the things I found within the map service, within setActiveMarker,

is that if we are currently selecting something that's already selected,

it will close momentarily and then be reopened.

That tiny time of flash is just enough to throw off our test.

And with those changes in place, our tests are now passing.

Gorgeous.

Now, one thing I want to do before we quit so I want to make sure that this MyLocation

is put back to normal, and we have the normal functionality.

Now, when I hit refresh, it's now pausing

because it's going out and asking for my current location,

setting at the Johns Hopkins University, and look up Key Highway in Baltimore.

If things within roughly a mile, let's say some of the images,

say I'm looking for the Hyatt, and I want to go through things that are in that area.

OK.

This is pretty much all the changes that we're gonna be making to our application.

It wasn't built to be a specific application,

but it was built to show you a lot of interesting capabilities

that you could do with information, images, and maps.

And I hope you agree that that's exactly what we have.

Awesome.

In summary, we synchronized our Map center with the Current Origin,

and we did so by establishing a watch to the Current Origin,

and we set the Map center to the geographic position of the Current Origin,

and we redisplayed the origin marker with upgraded geographic information.

We also addressed the multithreaded issues,

where the map was being recentered by two different threads,

and you learned how you could synchronize the activity of two threads

using the timeout callback.

Not too bad.

And this, of course, brings us to a conclusion of our end-to-end,

full-stack demonstration application,

demonstrating capabilities having to do with information, images, and maps.

What's next?

Congratulations and thank you.

I appreciate the time that you spent to take this course.

And I congratulate you for making it to the end.

There's just one more mandatory project to go.

Good luck with that.

And good luck with your full-stack web developments in the future.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play