David Patrick McKenzie

Digital Public Historian

Overambition?

http://youtu.be/nhjGoaKf52s

Luckily, I don’t feel like I need Homer’s lesson, although there were moments.

For this week, I decided to try not just embedding a map into a webpage, but into an Omeka site.

A bit of background: for Clio 2 I created an online exhibition, using Omeka, chronicling the journey and visit of the Mexican leader Antonio López de Santa Anna to Washington in 1837. On one page, I had a map showing the route that Santa Anna and his four companions (one Mexican, three Texian) took through the United States.

That map, however, was just a static map. I had planned, as some of my classmates did, to put coordinate points to correspond to different pages on my site. In the end, though, I simply ran out of time (thankfully Dr. Petrik gave me an A anyway!), and left the map as-was.

Since I had basically no experience with either Omeka or PHP when I did the project, I made some errors; e.g., modifying pages in their original folders and not in folders specifically for the theme–a correction I learned this summer at THAT Camp. So when I updated Omeka in September, my customized page layouts were gone–thankfully I had backed them up beforehand, though.

Thus, for the last two months, there has been a caveat on my homepage that the site’s layout had some issues. Here’s what the map page looked like:

The broken page, before I was able to fix it.

Luckily, I was able to fix it–the PHP I learned in class helped me understand where I had gone wrong, and how to use Omeka’s nice documentation to fix it. So during the hurricane, I fixed it:

The journey map after I managed to fix it.

So, then to tackle changing that static map into a Google Map.

I had previously gone through Laura’s excellent tutorial, plotting out the journey (using the diary of Juan Nepomuceno Almonte, a Mexican Army colonel and Santa Anna’s translator for the journey) and warping the same 1837 map I had used originally.

My first step was seeing, then, if I could get the map to work in a separate page. I did; this page draws on the style of my Omeka site. It’s not perfect–the map warping turned out, well, too warped–but it’s close.

Here is my code:

<!DOCTYPE html>
<html>

<title>Santa Anna Goes to Washington: Historic Map</title>
	 <link rel="stylesheet" type="text/css" href="http://davidmckenzie.info/projects/themes/santa-anna/css/style.css" />
	 
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key={my API key}&sensor=false"></script>
      <script src="http://davidmckenzie.info/clio3sandbox/maps/santa-anna-map.js">
    </script>
  </head>
  <body onload="initialize()">
    <div id="map"></div>
  </body>
</html>

Then came getting the same thing into my Omeka site. That, I am still trying.

When I inserted the original map image into that page, I simply put the regular HTML code for an image into Omeka’s text editor for that page, using the HTML option. But I realized that inputting the Java script calls might be an issue, since in the regular HTML page, they are in the head instead of the body. I didn’t want to add them to the head of my Omeka site, as they would be called for every page.

So I tried inserting them into the body of the page.

The next problem: I knew that I couldn’t use the <body> tag to open the function. So I searched around, and came upon this forum answer. I tried using the iframe tag.

Here is the code that I attempted to insert into the editor:

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key={my API key}&sensor=false"></script>
      <script src="http://davidmckenzie.info/clio3sandbox/maps/santa-anna-map.js">
    </script>
  
  <iframe onload="initialize()">
    <div id="map"></div>
  </iframe>

Here’s what it spat back out:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBu9qoNY_aPuji9GwHNDPDhKIV-tVh1AaY&amp;sensor=false"></script>
<script type="text/javascript" src="http://davidmckenzie.info/clio3sandbox/maps/santa-anna-map.js"></script>
<p><iframe>&amp;lt;div id="map"&amp;gt;&amp;lt;br /&amp;gt;&amp;lt;/div&amp;gt;</iframe></p>

However, the thread in that forum response was over two years old, and last referred to Omeka 1.2.something. We’re now above version 1.5 (and I understand a version 2 is coming–looking forward to seeing!). Perhaps that answer is outdated? I tried finding the line to which Sheila Brennan refers in the exhibits.js file, without luck. I even added it at one point.

I found another forum answer with the suggestion to use Neatline for this purpose.

So, I’ve reached an end. Does anyone have any suggestions on how to embed my map into my Omeka site? Do I just need to use Neatline (something I’m at least looking forward to trying)? Or can it be done like it is in a regular HTML page?

Any help would be greatly appreciated!

1 Comment

  1. I cannot speak for Omeka, but when you call in the API in the head of your HTML, use this url:

    https://maps.googleapis.com/maps/api/js?sensor=false

    The {my API key} thing might be throwing things off. That’s the url for v2 of the API.

Leave a Reply

%d bloggers like this: