UI: Display Origin Marker

Loading...

From the course by Johns Hopkins University

Capstone: Photo Tourist Web Application

18 ratings

Explore Related Videos

At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you

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

[MUSIC]

In this lecture, we will discuss, displaying a marker that represents our

origin, and defining a custom icon for that marker.

And we'll also address, locating markers during automated testing.

So as we come back to our application, in this lecture, we'd like to

represent things like our current origin, as well as the other subjects

On our page, using icons on the map, and let's start with the current origin.

All right, prior to this lecture, I checked in and defined a few things.

I went and checked in several PNG files that we can use for custom markers,

and I defined a couple of elements within the app config that would point

to specific icons, as well as another property that I'll talk about shortly.

I also went in and temporarily disabled my location.

This will save us about 3 to 5 seconds on the page reload.

And so when I reload the page,

I'll automatically be routed to the position override.

Again, this is just to save time on page reloads and getting our map displayed.

So one of the first places we want to start is within the mapping service, and

the shell of the method of define called displayMarker.

And one of the first things we want to check is the map defined, and

if it's not defined, let's get out.

We have a couple of race conditions that start up once we add a couple of watch

statements.

And there are several methods within the map that could be called before

we actually have a map especially if we were trying to resolve my location.

And when we go to display a marker, the caller is going to

supply various marker options and we'll go through this in more detail in a moment.

You can think of those as hash properties that contain at least a center position,

a latitude and longitude.

So since it's really, let's go ahead and log what those options are that we

are being asked to display and let's get started displaying the marker.

Now on the following documentation page on the Google Maps API website,

does a pretty decent job at summarizing what we have to do.

We've already instantiated our map, got that.

And now we need to instantiate a marker and then assign the map to the marker.

Okay, so instantiate the marker, and set the map.

So let's go ahead and instantiate the marker, giving it the markerOptions and

set the map.

However, we're going to want to remember this marker.

We're going to want to do things with it later.

So, let's go ahead and store that marker value

in the markerOptions that we're going to manage here in a second.

So let's go ahead and remember the markers we're asked to display.

And then each marker is going to remember its Google Maps marker

within its marker property.

All right we have everything we've been working with so far.

We've remembered it.

And the next thing I want to do when I display a marker is,

adjust the boundary of the map so that it's displaying all the markers.

And to do that let's use a LatLngBounds.

This is a google.map type that will allow us to add to it, all of our marker

positions, and then, have the map fit the bounds of all of our markers.

All right, that was pretty clean.

Make sense?

So what you'll find is, although we have set a zoom level,

once we start putting markers on the page, our zoom is going to change.

And now that we have the capability of displaying a marker,

what we're going to want to do is be able to undo that.

And so, let's go ahead and

define our clear marker, where we'll walk through every one of our markers.

And we may have more to do later, but at a minimum we need to null out the map for

the marker.

And that'll cause that marker no longer to be visible.

And now that we've made the marker invisible, let's go ahead and

take it out of our collection.

Although this is general purpose to display and clear just about any marker,

what we're going to start with is displaying the origin marker.

So let's come down to that shell of a method.

So what we'll do is, we will call the displayMarker that we just defined and

we are going to pass in some properties.

And what we almost forgot to do is return the markerOptions so

that we could remember the marker that we just displayed.

Now as I mentioned earlier,

one of the primary properties to define is the position.

And for the originMarker,

we'll define the position in terms of the center of the map.

We already have that, and to help us find the marker on the map.

Let's go ahead and define a title and call it origin.

All right, that's enough for now.

We can add more later.

So in order to get our current origin displayed, we're going to have to come

over to our current subjects map component and make a few minor changes.

The first change is, after the map is initialized, we want to displaySubjects.

And since displaySubjects can actually be called from a number of different places,

as we go into displaySubjects,

we're going to verify that the map in fact exists.

But of course, if we come this route, we know the map will exist.

So obviously there's going to be another route in the future that I know about, but

I hadn't told you about yet.

So if verify that the map does exist, and then we'll go to the map.

And say clear your current markers, and now display the origin marker,

the center of the map display and with an icon.

And with that in place,

we going to hit Refresh on your map, see what kind of error that we caused.

Looks like a syntax error on the mapping service line 43.

Okay, we missed the end of this function, okay?

Let's refresh.

And we now have our display with an icon representing the center of the map.

Okay, right, the next thing I want to do is,

I want to create a custom icon for this.

We can't just have all our markers have the same standard

default icon that comes with Google Maps.

Let's have a little bit of originality.

And after for a couple of Google searches,

I found this site called iconpark.com, that I was able to come in here and

download various pin icons that I can place on the map.

And again, I check these in, already in the GLO's markers directory.

And in config, I've already defined an origin marker, pointing at the red marker.

Now what I want to do is go to the place where I defined the map options for

the originMarker and add APP_CONFIG.origin_marker and

this is a file resource path to an icon that's within our web application.

And now when I Refresh the page,

we now get a different pin icon that we've defined.

Very good, wonder how our test is making up.

So if we look at the results to the test, it said that it was looking for

a div, that had a title of origin but I couldn't find it.

And if we inspect our webpage, until we find at the very bottom, you see I'm

looking for a div with the name of origin, sure enough it does not exist.

If I look for other div that just happened to have title,

I see other Google Maps kind of constructs but not our center icon.

Well the problem is, is that if we were to dig into this deep enough,

you'll notice that, this isn't a direct reference to a graphics image.

Google Maps has optimized it so that this icon is part of the map.

We have to tell it to non-optimize it, so that we can find this.

So you may have noticed in the app config,

that I had this property called optimize markers.

And what it's going to do is look out into the environment and

look for an environment variable of optimize markers.

And if that's been defined, and

it's been defined to have the value of true, then the markers will be optimized.

For every other scenario, optimized markers would be false.

So what we're doing is, we're making the default to be non-optimized

that will actually work with the test easily.

And in production, we can set this value to be true and

on run in optimized mode because we don't need to find the markers in production.

So over in the map service, in the area where we're displaying the marker,

we want to set optimized to the value of a optimized marker.

And now when we refresh our page, And

look for a adieu with a title of origin, we got our origin marker.

Very good, and our test is happy as well.

Now when your trying to do this, there's a couple of things to watch out for.

One is that the Google Map's page could be cached in your server.

So you notice on my command, I am removing the contents of temp cache

before I run my test to make sure that it's running with the option that I want.

And in this particular case, I want the false option.

If I would have said nothing, I would have effectively have gotten

the false option and then I want to run my test.

If I set this to true,

we'd be back in the scenario that we started with, that we can't find the icon.

I don't think I need to take you through that.

But as you flip from false to true and true to false, make sure that you clear

your temp cache, otherwise, it's going to remember whatever it had downloaded last.

Because it's not going to factor in the fact that environment variable has

changed.

That there would have any impact at all on that cache to map page.

So we have to manually delete it.

In summary, you learned how to display a marker by instantiating

the marker with its markerOptions and setting the map for the marker.

And the markerOptions consisted of,

position of the marker, expressed in latitude and longitude.

The title of the marker,

which is part of a built-in pop up if you hover over the icon.

And you learned how you could also find a specific marker,

using the title and a CSS search when the map was properly set up for testing.

And you learned how to assign a custom icon for the marker, and

ready your map for testing by turning off optimization, so

that we could use CSS searches in order to find specific markers.

And then we added code that would cause our map to expand, so

that it could fit all of the markers on the page.

We'll see that in action in the next lecture.

And then you also learned that, if you flipped between optimization options, true

and false, true and false, you need to clear the temp cache of the rail server.

Otherwise, the map views from the previous option will be cached there.

And the server doesn't know that the cache needs to be

invalidated simply because an environment variable changed.

You have to manually delete it.

What's next?

Display subject markers.

You learn how to display a marker in general, and

specifically displayed the origin marker.

Now let's display the other markers that will represent all the other subjects we

have on our page.

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.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play