0:00
[SOUND] In this next bit of code we're going to talk about two things.
We're going to talk about how to add custom markers and
then we're going to talk about how to add separate popups for each marker.
So just to give you a sense of what we want, we want something like this,
where it's the Hopkins logo at each of the markers.
And then after we add, we want a separate popup for each marker.
And so we want something like this with the markers, and
then I'll show you interactively here in a second what we're actually getting when we
have a separate popup.
Okay, so let's go ahead and try doing that.
Okay, so I think it's actually pretty quick to get an icon exactly how you want.
So here we're going to just define our Hopkins icon as grabbing this URL.
Okay, and then you specify the width, the height, and the anchor points.
0:50
And then now let's create hopkinsLatLong, which is a series of latitude and
longitude values of buildings at Hopkins, and then we're just going to run it.
So we're going to have our longitude and latitude values are going to be passed to
leaflet, which is then the output of the leaflet function with the latitude and
longitude values passed to it is going to be passed in as the argument to add tiles,
which is going to add the mapping data, and then it's going to add the markers.
However, we also have some secondary arguments that we need,
which is that the icon is going to be the hopkinsIcon.
So let's run all this code, I'm just going to run it by clicking this
little arrow up here, and there you see it.
And now instead of these bubbles that we had before, we have the Hopkins shield.
Now we actually want links for each of these.
If I click on them now, they don't do anything.
So what we're going to do is basically the same thing.
We already have our icon set and we already have our series of longitude and
latitude values set.
So what we need is a series of sites,
in this case our sites is a vector of text that give the HTML
commands that give a hyper ref to each one of the buildings,
or the campus values or something like this.
And these are in the correct order,
corresponding to the latitude and longitude values.
And so we're going to take our existing defined latitude and longitude values.
We're going to pass them to leaflet, we're going to pass
the output of that command to addTiles, and then we're going to pass the output of
that command to addMarkers only if we have our icon set to the icon that we want.
And then popup is going to be the collection of hopkinsSites.
Okay, so let's run the whole thing, and there we go.
Okay, now when you click it, it says Peabody Institute.
And if you click on this link, it takes you to the Peabody Institute website.
Okay, so pretty handy little map.
Brian Caffo, PhDProfessor, Biostatistics
Jeff Leek, PhDAssociate Professor, Biostatistics
Roger D. Peng, PhDAssociate Professor, Biostatistics
