Embedded content in ESP

This page describes how to add a search bar, project statistics, videos, Google Earth and Google Maps files, and other types of non-textual data in ESP. See the help page on reusing Oracc content for instructions on how to embed Cuneify, texts from a corpus, and other Oracc content in your ESP pages.

Search bar | Corpus statistics | Google Earth and Google Maps | Video content | Twitter feeds

Search bar

To enable users to search across your project's site, add the following code to your ESP page:

<form method="get" action="http://oracc.museum.upenn.edu/PROJECT/find" id="PROJECT_search">
	<span class="button">Search PROJECT  </span>
	<input class="textbox" name="phrase" id="phrase" type="text" size="14" accesskey="s" value=""/>

Remember to replace the word PROJECT with the Oracc code for your project or subproject (e.g., saao/saa17 or etcsri). You can resize the searchbox by changing the value of the size attribute.

If you are using this code in a non-ESP website, replace <esp:link url with <a href and </esp:link with </a>.

This, for instance, is what a search box for the CAMS/GKAB project would look like:

Corpus statistics

To embed a live set of statistics about a project's corpus in your ESP page, use the following code:

   <object width="380px" height="240px" data="/PROJECT/statistics" title="PROJECT Statistics"> 

Remember to replace the word PROJECT with the Oracc code for your project or subproject (e.g., saao/saa17 or etcsri). You can resize the embedded page by changing the value of the width and height attributes.

This, for instance, is what the DCCLT project's statistics looks like:

Google Earth and Google Maps content

Google allows people to make their own content that will display in both Google Earth (GE) and Google Maps (GM). You need a Google account to do this.

Custom Google Maps

Projects can create their own custom-made maps [link: https://support.google.com/maps/answer/62843?hl=en] via GM. Use the URL provided by Google to link directly to the map, e.g.:

<esp:link url="https://maps.google.co.uk/maps/ms?msid=204599863567827172960.0004e9e3e5e5d5b82b694&msa=0" 
rel="external">View map using Google Maps</esp:link>

An advantage of creating GM content in this way is that custom-made maps can be embedded into your portal pages.

One disadvantage though is that the content of these custom GMs is not directly editable or re-usable by website users. It is recommended that projects also save GM content in .KML or .KMZ format and make these files available for download. KML / KMZ files allow users to incorporate the GM content into their own maps, and re-use it as they wish.

For instance, the Knowledge & Power [http://oracc.museum.upenn.edu/saao/knpp/teachingresources] project created overlays of archaeological sites and tags showing place names, etc.

Embedding a Google Map

Custom-made Google Maps can also be embedded into ESP pages. Do not embed your map by copying and pasting the code provided on the Google Maps page (as it uses the non-standards-compliant <iframe> element). Instead, use the standards-compliant <object> element, as outlined in this sample code:

<p><object type="text/html" width="425" height="350"

Replace the example map URL (i.e., https://maps.google.co.uk/maps/ms?msid=EXAMPLE) with that of your custom map.


Good articles on standards-compliant embedding include:

Sample code for a GM/GE map

The following code gives an example of an embedded custom map, followed by a link to the same map using Google Maps, and a link to download the KMZ file.

<p><object type="text/html" width="425" height="350" 

<p><esp:link url="https://maps.google.co.uk/maps/ms?msid=204599863567827172960.0004e9e3e5e5d5b82b694&msa=0" 
rel="external">View larger version of map using Google Maps</esp:link><br/>
<esp:link url="nd-reliefs-nw-palace-distribution.kmz" 
title="Map showing worldwide distribution of reliefs from Assurnasirpal's Northwest Palace, 
Nimrud">Download map content to view using Google Earth or re-use within your own custom maps 
(KMZ file, 7 KB)</esp:link></p>

Do not copy this code directly, as it will not work. Replace the map ID with that of your custom map.

Creating re-usable GE and GM content using .KML and .KMZ files

Providing KML or KMZ files allows website users to re-use GE and GM content within their own maps.

Create KMZ files:

As technologies develop, KML and KMZ files may need updating to ensure they remain readable. Keep accessible copies of all files.

Displaying KMZ files in Google Earth

To allow website visitors to view KMZ content in GE, create a link to the KMZ file using the <esp:link> element with a relative URL, as described in the section on Links to downloadable content.

NB. If the user has GE installed on their computer, the file should automatically open in GE. If the user does not have GE installed, they will receive a prompt asking what they want to do with the file. Currently there is no means of automatically asking the user whether they want to download Google Earth.

Displaying KMZ files in Google Maps

For users who do not want to install GE, the same KMZ files will also display within a GM web page. To display the content in this way, create a link to the GM web page using <esp:link>. Append the complete location of the specific KMZ file on your webserver to the end of the URL for the GM web page.

So, to display the KMZ file entitled adian_eski_kalak.kmz that sits in the downloads folder for the site http://oracc.museum.upenn.edu/saao/knpp you would use the following URL in the element <esp:link>:

<esp:link url="http://maps.google.com/maps?q=http://oracc.museum.upenn.edu/
      title="View location of Adian using Google Earth">

      View location using Google Maps


Note that appending &t=k to the end of the URL forces GM to open satellite view rather than the default map view.

Example code for linking to GE and GM content

Example code showing links to Google Earth and Google Maps within a glossary definition is given below.

<esp:definition term="Adian (place)">A town in central Assyria, possibly now 
Eski Kalak.
   <esp:link url="/saao/knpp/downloads/adian_eski_kalak.kmz" title="View location of 
   Adian using Google Earth">View location using Google Earth
   </esp:link> |
   <esp:link url="http://maps.google.com/maps?q=http://oracc.museum.upenn.edu/
   saao/knpp/downloads/adian_eski_kalak.kmz&t=k" title="View location of Adian using 
   Google Maps">View location using Google Maps

Video content

We no longer recommend embedding Flash movies directly into ESP pages, as Flash is not compatible with the browsers used on most hand-held and mobile devices. Instead we recommend embedding video via Youtube.

Ask your Oracc liaison to upload Quicktime movies to Oracc's Youtube [http://www.youtube.com] channel.

Embed youtube Flash videos using standards compliant tags, using the method described at: http://www.alistapart.com/articles/byebyeembed/ [http://www.alistapart.com/articles/byebyeembed/].

The code used is:

<object type="application/x-shockwave-flash"
 width="425" height="344" id="VideoPlayback">
 <param name="movie" 
  value="http://www.youtube.com/v/mADrWB6F5CU&hl=en&fs=1&rel=0&showinfo=0" />
  <param name="allowScriptAcess" value="sameDomain" />
  <param name="quality" value="best" />
  <param name="bgcolor" value="#FFFFFF" />
  <param name="scale" value="noScale" />
  <param name="salign" value="TL" />
  <param name="FlashVars" value="playerMode=embedded" />

This places the video left-aligned onto the page.

NB. Added on to the end of the URL (http://www.youtube.com/v/mADrWB6F5CU&hl=en&fs=1&rel=0&showinfo=0) are two modifiers: &rel=0 means that it doesn't display the 'related videos' link, and '&showinfo=0' remove the stars and crap that youtube wants to overlay onto the video.

Twitter feeds

You need to have your own Twitter account [https://twitter.com/signup] in order to do this.

First log in to Twitter. Then:

Then use Emacs to open the ESP page in which you want to embed the Twitter feed, if it's not already open.

23 Aug 2014 osc at oracc dot org

Ruth Horry & Eleanor Robson

Ruth Horry & Eleanor Robson, 'Embedded content in ESP', Oracc: The Open Richly Annotated Cuneiform Corpus, Oracc, 2014 [http://oracc.museum.upenn.edu/doc/help/portals/embeddedcontent/]

Back to top ^^

Released under a Creative Commons Attribution Share-Alike license 3.0, 2014. [http://www.facebook.com/opencuneiform] [http://oracc.blogspot.com] [http://www.twitter.com/oracctivity]
Oracc uses cookies only to collect Google Analytics data. Read more here; see the stats here [http://www.seethestats.com/site/oracc.museum.upenn.edu]; opt out here.