[Go to Part I, Part II, Part III, Part IV, Part V, Part VI]
Now, the fun part. Actually using MIT’s Simile Exhibit project.
I got started on their website here: http://www.simile-widgets.org/exhibit/
And I’d recommend you start there as well. They have a much better tutorial than I can put together.
I will, however, touch on some basics, and then walk you through my example page.
In my previous article, I talked about having two data Types. So I have my Programs and my Countries, and any Program go to multiple Countries.
This lets me do some cool stuff. I design a single table in my database for Countries and go through the ever-so-fun process of putting in longitude and latitude and a URL to the country’s flag. This way, when my users create programs, all they have to do is select a country from a drop-down, and Simile will place it on the map for me.
One thing you won’t see in the initial tutorial is the idea of Collections. Collections are how you tell your Map or Table whether you want it to show you your Countries, your Programs, or Both in any particular view of your data.
In my particular case, I want to use a Collection of my Programs. I will ‘link over’ to my country data to figure out where to place the pin in the map, however.
The full version of my code is available here. Let’s walk through it a bit…
It starts with the standard tags
<head>
<title>Studyabroad Simile Exhibit Test</title>
and then we call our data file
then we load the exhibit-api javascript, as welll as the map extensions, which in this case are hosted on their site:
<script src=”http://api.simile-widgets.org/exhibit/2.2.0/extensions/map/map-extension.js?gmapkey=ABQIAAAAoI0aGmCtco6t5Jvk3xfZJRQWo29TIH01DKiyzqc94si2icXw1BTOPVnjRhvwLzcKSz29CcbTfwaRXQ”></script>
Then we use some CSS to style a few elements on the page
table.LensTable {
border: 1px solid #ddd;
padding: 0.5em;
width: 100%;
}
div.DataItem {
font-weight: bold;
font-size: 120%;
}
.course {
font-style: italic;
}
td.LenseTable_TextCell {
width: 100%;
}
div.BaloonImageDiv {
float: left;
}
</style>
And we’re ready to get to the body of the page
<body>
First we set up our collections
<div ex:role=”collection” id=”Programs” ex:itemTypes=”Program”></div>
And then we create a ‘viewPanel’, basically somewhere the javascript can dump the content. In this case, in the cell of a table.
<tr valign=”top”>
<td ex:role=”viewPanel”>
Next, we specify that our default view of the data is our map, and give some info about that map. What it’s called, how big it is on the page, where to get the lat & lng, and what the pins on the map look like.
ex:viewClass=”Map”
ex:label=”A Map of Where We Are”
ex:collectionID=”Programs”
ex:latlng=”.country.latLng”
ex:mapHeight=”500″
ex:icon=”.country.flagURL”
ex:shape=”Square”
ex:shapeWidth=”30″
ex:shapeHeight=”20″>
Next, we tell it how to display the popup when we click on an individual pin on the map:
<div ex:if-exists=”.photo-link”><img ex:src-content=”.photo-link” height=”50px”></img></div>
<div><b ex:content=”.label”></b><br />
<a ex:href-content=”.label-link”>Program Website</a>
</div>
</div>
And of course we close the tag for our map div
Next, we create a secondary view, a table of our data:
ex:label=”A List of Where We Are”
ex:collectionID=”Programs”
ex:orders=”.label”
ex:possibleOrders=”.label, .college”>
<table ex:role=”lens”>
<tr>
<td>
<div ex:content=”.label”></div>
<a ex:href-content=”.label-link”>Program Website</a>
<div ex:content=”.course”></div>
</td>
<td><div ex:if-exists=”.photo-link”><img ex:src-content=”.photo-link” height=”100px”></img></div></td>
</tr>
</table>
</div>
And then we close the tag for the viewpanel cell
Next, a simple but very cool part, we tell it what facets it can filter the data by.
Each one lets you narrow down the data that’s shown. Here, we’re letting the user filter by Semester, Country, Department or Course.
Cool aspect #1: Nowhere did I specify a list of semesters, departments or courses! Exhibit creates these lists automatically based on the fields used under each Program.
Cool aspect #2: This is very dynamic. As soon as I click on, say, a semester, it instantly reduces the data shown in the view AND it reduces the choices in the other filter fields as appropriate. So, if the users selects “11F” for the semester, the country list is instantly updated to only list countries that programs are in for 11J.
<div ex:role=”facet” ex:expression=”.semester” ex:collectionID=”Programs” ex:facetLabel=”Program runs in this semester:”></div>
<div ex:role=”facet” ex:expression=”.country” ex:collectionID=”Programs” ex:facetLabel=”Program spends some time in this country:”></div>
<div ex:role=”facet” ex:expression=”.department” ex:collectionID=”Programs” ex:facetLabel=”Programs offer courses from this department:”></div>
<div ex:role=”facet” ex:expression=”.course” ex:collectionID=”Programs” ex:facetLabel=”Programs offer this specific course:”></div>
<div ex:role=”facet” ex:expression=”.course” ex:collectionID=”Programs” ex:facetLabel=”AND this specific course:”></div>
<div ex:role=”facet” ex:facetClass=”TextSearch” ex:facetLabel=”or type below to search:”></div>
Coming Soon: Region, College, Language … and more!
</td>
And then we close up the rest of our tags and we’re done!
</table>
</body>
</html>
