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.
Jim StaffordAdjunct Professor, Graduate Computer Science
