Latest revision as of 05:50, 15 July 2013

Screenshot of the HyperCities Interface

HyperCities is a collaborative research and educational platform for traveling back in time to explore the historical layers of city spaces in an interactive, hypermedia environment. This HyperCities Wiki is a resource to address any inquiries regarding the functions of HyperCities and the creation of HyperCities related projects. If you still have questions about using HyperCities or would like to report a bug, please post to the Google Forum via this link: HyperCities Google Forum.

About HyperCities

Built on the idea that every past is a place, HyperCities is a digital research and educational platform for exploring, learning about, and interacting with the layered histories of city and global spaces. Developed though collaboration between UCLA and USC, the fundamental idea behind HyperCities is that all stories take place somewhere and sometime; they become meaningful when they interact and intersect with other stories. Using Google Maps and Google Earth, HyperCities essentially allows users to go back in time to create and explore the historical layers of city spaces in an interactive, hypermedia environment.

A HyperCity is a real city overlaid with a rich array of geo-temporal information, ranging from urban cartographies and media representations to family genealogies and the stories of the people and diverse communities who live and lived there. We are currently developing content for: Los Angeles, New York, Chicago, Rome, Lima, Ollantaytambo, Berlin, Tel Aviv, Tehran, Saigon, Toyko, Shanghai, Seoul, with many more (big and small) to come.

The project asks a seemingly simple—but deeply fraught and often contested—question that is fundamental to identity: Where are you from? The answers, of course, are far from simple or straightforward.

As a globally-oriented platform that reaches deeply into archival collections and aggregates a wide range of media content (including broadcast news, photograph archives, 3D reconstructions, user-created maps, oral histories, GIS data, and community stories), HyperCities not only transforms how digital information is produced, stored, retrieved, and shared but also transforms how human beings interact with media and how we experience places. Born out of Web 2.0 social technologies, HyperCities represents a new digital media environment that links together cultures, languages, generations, and knowledge communities, mobilizing an array of technologies (from GPS-enabled cell phones to GIS mapping tools and geo-temporal databases) to pioneer a truly participatory, open-ended learning ecology grounded in real places and real times.

By connecting digital archives, maps, and stories with the physical world, HyperCities aims to become the first media platform for supporting the revolution of Web 3.0, the birth of the geo-temporal human web.

Navigate HyperCities

Screenshot of the HyperCities Interface with on-screen navigation highlighted

HyperCities maps can be navigated using both a mouse and/or keyboard. Functions in 2D mode (Map, Satellite, Hybrid, & Terrain modes) include zooming in/out, moving up/down/left/right, and resetting the view. Functions in 3D mode (GoogleEarth mode) include zooming in/out, moving up/down/left/right, tilting camera angle, turn camera direction, and resetting the view. Map views can be changed using the controls overlaid on the upper left corner of the map or by using the following mouse/keyboard functions:

Search Locations

Screenshot of the HyperCities Interface with the SEARCH tab highlighted.

To search for a location or address, click on the green "SEARCH" tab located at the upper right of the HyperCities interface. To use the search function, type the location or address of interest in the search bar and click "GO" or press "Enter." The map view will shift to the queried location and a pinpoint will be placed at the location that was searched. This pinpoint will remain on the map, even when an object is created; however, it will not be part of the object.

Change Map Modes

HyperCities allows you to change between several different map modes by selecting the mode of interest from the drop-down menu located at the upper right corner of the map.

2D Map Modes

Satellite - Satellite imagery

Map - Stylized street maps

Hybrid - Street names and borders superimposed on satellite imagery

Terrain - Street names and borders superimposed on terrain maps

Google Earth (3D) Mode

Google Earth (3D) mode can be selected from the same drop-down box as the other map modes. In order to use Google Earth mode, a Google Earth plugin must first be downloaded and installed.

In Google Earth mode, users are able to change camera tilt angle, change directional orientation of the map, and also view 3D buildings and models.

Enable 3D Models & Buildings

To enable 3D models and buildings from the WORLD tab of the HyperCities interface, check the box labeled "3D Buildings" on the right side of the HyperCities interface.

To enable 3D models while viewing a collection in Narrative Mode, click the "Options" link located towards the upper right corner of the narrative column. An options menu will appear with the option to turn 3D buildings on.

View a Collection

Screenshot of a HyperCities collection with the Narrative Panel highlighted.

Once you've found the collection of interest, you can view that collection in Narrative Mode. To open the collection in narrative, click on the icon of the "Book" located to the right of the Collection name. Once in narrative mode, sub-collections (indicated by an arrow in a grey box to the right of the collection name) could be opened from Narrative Mode by clicking on the grey arrow to the right of the collection name.

After opening a collection in Narrative Mode, you can navigate the objects in the collection in order by clicking the "Next" or "Prev" links at the top of the column. To jump to a particular object of interest, locate the object in the column and click on the object box.

To close a collection, click on the "X" button at the top-right of the Narrative column.

Login

Logging in is required to add collections and objects to HyperCities. To log in, click the red tab labeled "LOGIN" at the upper right corner of the HyperCities interface. A pop-up screen will appear with login options. You are able to log in to HyperCities using pre-existing accounts from any of the providers given on the screen. Note: Logging in from different providers will act as different accounts on HyperCities.

Preparing/Obtaining Files for HyperCities Use

KML Files

Screenshot of Google MyMaps

Obtain a KML File from Google MyMaps

To obtain a KML file from your personal Google MyMaps account, first make sure you are logged onto your Google account. Once in the Google Maps webpage, click on the My Places button (highlighted in the screenshot) to list all the maps you have worked on. Next, select the map you would like to obtain by simply clicking on it. To download the KML file, click on the blue KML button (highlighted in the screenshot). The KML file should automatically download, and you may be asked to choose a destination to save it to.

Obtain a Network Link from Google MyMaps

To obtain a KML file from your personal Google MyMaps account, first make sure you are logged onto your Google account. Once in the Google Maps webpage, click on the My Places button (highlighted in the screenshot) to list all the maps you have worked on. Next, select the map you would like to obtain by simply clicking on it. To obtain KML network link, right click on the Network Link button (highlighted in the screenshot). Select copy link address from the drop-down menu. The KML network link should now be copied to your clipboard.

Export a KML Collection from HyperCities

To export a HyperCities collection as a KML, first open the collection in Narrative Mode. Once in narrative mode, click the link labeled "Link" at the top-right of the Narrative bar. Two links will be provided; right-click the link of interest and "save as" to download the KML file.

Edit KML Files

KML (Keyhole Markup Language) files can be edited through either a text editor, such as notepad, or an HTML editor such as Dreamweaver. KML files added to HyperCities that contain the same ID tags of KML files already existing in HyperCities will overwrite the pre-existing copies.

KML code is organized in a hierarchy of elements within other elements, the same way HyperCities is organized in a hierarchy of objects within collections within other collections. Most KML files will have <document> as the highest level of organization. The <document> element distinguishes the KML file and can have an accompanying ID tag (eg. <document ID=12345>).

Within a <document> are folders, shown as <folder>. These are displayed as Collections in HyperCities. A folder can have an ID tag as well as a name, description, and author. Folders can store other folders as well as objects.

Objects are the primary elements of a HyperCities collection. They can carry ID tags, names, descriptions, authors, time-span, longitude and latitude, camera views, icons, and many other attributes.

The following is a simplified sample KML file with a brief guide on some of the elements that can be modified.

    <Folder id="12345">
      <name>COLLECTION NAME</name>
      <description>DESCRIPTION OF COLLECTION</description>
      <atom:author>
        <atom:name>AUTHOR NAME</atom:name>
      </atom:author>

      <Placemark id="23456">
        <name>Pinpoint on Royce Hall in 2D</name>
        <atom:author>
          <atom:name>HC Team</atom:name>
        </atom:author>
        <TimeSpan>
          <begin>1919-06-11T00:00:00-07:00</begin>
          <end>2012-06-11T00:00:00-07:00</end>
        </TimeSpan>
        <description id="34567">OBJECT DESCRIPTION</description>
        <Icon>
        <href>http://www.patricktran.net/lona.ico</href>
        </Icon>
        <Point>
          <coordinates>-118.44227313995,34.072817481102,0</coordinates>
        </Point>
      </Placemark>

      <Placemark id="68325">
        <name>Bruin Walk Path in 2D</name>
        <atom:author>
          <atom:name>HC Team</atom:name>
        </atom:author>
        <TimeSpan>
          <begin>1919-06-11T00:00:00-07:00</begin>
          <end>2012-06-11T00:00:00-07:00</end>
        </TimeSpan>
        <description id="51737">Description of Bruinwalk!</description>
        <Style id="redLine">
          <LineStyle>
            <color>00ffffff</color>
            <width>15</width>
          </LineStyle>
        </Style>
        <LineString>
          <altitudeMode>absolute</altitudeMode>
          <coordinates>-118.44946146011,34.07102229288,0 -118.44860315323,34.070773451906,0 -118.44784677029,34.071017849297,0 -118.44354987144,34.071040067207,0 -118.44269156456,34.07102229288,0</coordinates>
        </LineString>
      </Placemark>

    </Folder>

Brief guide here!

3D Models

Obtain a KMZ File for a 3D Model from Google 3D Warehouse

If a 3D Model is available for download on Google 3D Warehouse, there will be a "Download" button on the model page. Clicking this button will provide links to different formats of the file such as .SKP, .KMZ, or .ZIP. Click on these links to download the desired format. (Only KMZ files are supported on HyperCities)

Obtain a URL to a 3D Model on Google 3D Warehouse

If a 3D Model is available for use on Google 3D Warehouse, there will be a "Download" button on the model page. Clicking this button will provide links to different formats of the file such as .SKP, .KMZ, or .ZIP. Right-click the .KMZ file and "Copy Link Address" to obtain the URL to the 3D Model.

Adding to HyperCities

Add a Collection

To add a collection, start by clicking the ( + ) icon on the upper left corner. This will present a drop-down menu of various items you can add. Select the COLLECTION icon (shown as a FOLDER) at the very bottom of the drop-down menu.

A panel will pop up on the right side of the window asking you to input information for your new collection. You will need to give your collection a title. Your username will automatically be inputted as the author, however, you may change this if you wish. There also will be an option to provide a description for the newly created collection.

To save your collection, simply click on the save button on the bottom right corner. Your new collection will automatically be saved to "My Collections" by default. If you would like to also save this new collection to another collection (for example, your professor may request that you save it into a collection for the class) simply click on the the drop-down menu next to BELONGS TO and search for the collection of interest.

Add Objects

Screenshot of the HyperCities Interface with editing options highlighted.

All objects added in HyperCities are bound to a set base map, narrative, and map view determined by its creator. Objects that can be added in HyperCities include pinpoints, lines, polygons, and KML Files. Every object is stored within a Collection.

Before adding an object, make sure you have selected your desired map mode (i.e. satellite, map, hybrid, terrain, earth), found your location, and set your appropriate zoom level.

Add a Pinpoint

To add a pinpoint, click the ( + ) icon on the upper left corner. This will present a drop-down menu of various items. Select the push-pin icon, then drop the pin-point on the location of interest by left-clicking it on the map.

Add a Path

To add a path, click the ( + ) icon on the upper left corner. This will present a drop-down menu of various items. Select the paths icon, then left-click onto the map where the beginning of the path will be. Continue to left-click on the map to set the next point in the path (A minimum of 2 points are required to make a line/path). Once the desired path is complete, click on any part of the already drawn path to finish the object.

Add a Polygon

To add a polygon, click the ( + ) icon on the upper left corner. This will present a drop-down menu of various items. Select the polygon icon, then left-click onto the map where one of the corners of the polygon will be. Continue to left-click on the map to set the next corner-point in the polygon (A minimum of 3 points are required to make a polygon). Once the desired polygon is complete, click on any part of the already drawn shape to finish the object.

Add a KML File

Screenshot of HyperCities highlighting the add KML panel

To add a KML file, click the ( + ) icon on the upper left corner. This will present a drop-down menu of various items. Select the KML icon. A panel will appear on the right side (as shown in the screenshot). You will be presented with two options for adding a KML file.

Upload a KML File

To upload a KML, click the "Upload File" button to find and select the KML file of interest. Once selected, the KML file will be uploaded. When uploading is complete, the option to "Preview" or "Delete" the KML will appear. Click "Preview" to check if the KML displays correctly. Once the desired collection to be saved in is selected, click "Save" to finalize the upload.

Make a KML Network Link

To make a KML Network Link, Paste the URL of the KML network link into the "URL" Line. Once the URL has been inputted, click "Preview" to check if the KML displays correctly. Once the desired collection to be saved in is selected, click "Save" to finalize the upload.

Add a 3D Model

To add a geographically referenced 3D Model, click the ( + ) icon on the upper left corner. This will present a drop-down menu of various items. Select the KML icon. A panel will appear on the right side (as shown in the screenshot). You will be presented with two options for adding a KML file; KMZ files for 3D models also can be added here.

Upload a KMZ File

To upload a KMZ, click the "Upload File" button to find and select the KMZ file of interest. Once selected, the KMZ file will be uploaded. When uploading is complete, the option to "Preview" or "Delete" the 3D Model will appear. Click "Preview" to check if the model displays correctly. Once the desired collection to be saved is selected, click "Save" to finalize the upload.

Make a KMZ Network Link

To make a KMZ Network Link, paste the URL of the KMZ network link into the "URL" Line. Once the URL has been pasted, click "Preview" to check if the 3D model displays correctly. Once the desired collection to be saved is selected, click "Save" to finalize the upload.

Add an ArcGIS map

To add a map service hosted on an ArcGIS Server, you first need the URL of that map service (only one map service can be added at a time). First, acquire the URL of the map service (not the layer).

Copy and paste the URL of the map service into the map URL bar in the HyperCities "select base map" window. If you want to show only specific layers, add a slash to the end of the map service URL and then add the layer numbers separated by commas.

Click the plus sign to display the map. The map will appear in the selected map list above the URL bar. Click on the arrow to adjust its opacity or remove the map.

When you save the object, the map will be saved with it.

To use your ArcGIS map in the 3D version, you will need to create a KMZ service from it.

Add a WMS map

In the Maps pane of the HyperCities Add Media window, enter the URL of the map service in the URL bar. Include the appropriate layers in the "layers" parameter of the URL. Click on the plus sign to display it.

When you save the object, the map will be saved with it.

Notes:

The WMS implementation must support GetCapabilities requests.

The only Spatial Reference Systems (SRSes) that HyperCities supports are EPSG:900913 and EPSG:4326. The layer must support one of these projections and advertise that it does so in the GetCapabilities document.

The following parameters in a GetMap are always overwritten with certain values:

• SRS -- this may be converted to either EPSG:4326 or EPSG:900913

• BBOX: this is filled in with bounds of the maps HyperCities is fetching. Including it does not matter.

• EXCEPTIONS: this is always set to application/vnd.ogc.se_inimage

Edit Objects and Narratives

Edit Narratives

The option to create and edit narratives appear once an object has been created. Narratives can also be edited after an object has been saved by opening the the collection in which the object is saved and collapsing the narrative. Once collapsed an "edit" icon (pencil icon) will appear to the right of each object. Click on this icon to open the editing menu.

Narratives can be edited through two modes, "Rich Text" (Default editing mode) and HTML. HTML editing mode can be accessed by clicking the left-most button in the editing menu. Switching between modes of editing in the process of creating a narrative is possible.

Add an Image

Screenshot of HyperCities highlighting the image insertion panel

To add an image to your object, start in the editing mode. Next, be sure to click and place your mouse cursor where you wish for your image to be added. Click on the "insert/upload image" icon (highlighted in green in the screenshot). You will be given two options for adding images.

Insert an Image via Direct URL Link

To insert an image via a direct URL link, paste the direct URL to the image in the URL link and click "insert image." (The link image will work on HyperCities as long as the direct URL is functional.)

Upload an Image from Hard Drive

To upload the image from your hard drive, click on "upload image" and select the desired image from your hard drive. The image automatically will be uploaded and inserted. The image will be uploaded and hosted on HyperCities.

Make Blinking Text

Text can be made to "blink" through the HTML editing mode. By placing <blink> in front of the desired text and </blink> after the desired text, all text in between these tags will blink.

Blinking text does not display in Google Chrome.

Create an Image-Map

Image maps can be used as a form of navigation for HyperCities collections. To create an image map, an image must first be created with "buttons" or "objects" in the image that can serve as clicking points for links. Once the image is created, it must be hosted and an image map can be written in HTML. A guide to creating HTML image maps can be found here: Image Map Guide.

Image map HTML codes can also be easily generated for free through www.image-maps.com

Create an Animated GIF

Animated GIFs can be anything from rain overlay on an image to multiple images transitioning back and forth. A simple way to create basic animated GIFs is through the following website: www.lunapic.com

To create an animated GIF, select the desired effect from the "Animations" tab at the top of the page. After that, upload the pictures or photos that will be animated. Keep in mind that the larger the image dimensions, the larger the file size will be (significantly so), therefore try to keep image dimensions small. Once the image(s) is/are uploaded, follow the directions on the website to finalize the GIF.

Set Base Map

Screenshot of HyperCities base map editing menu

To set the base map of an object, edit the object of interest and click the "Select Base Map" menu shown as the icon of continents of America (2nd Icon from the left). On this menu, a list will be generated of the maps that are available in the map view that is currently set. Clicking on the desired map will add it to the object and it will also display in the map view. Multiple base maps can be set in each object.

To set the opacity of the map, click the downward arrow to the right of the added map and use the opacity slider to change the transparency.

To remove the map from the object, click the downward arrow to the right of the added map and select "Remove This Map."

Hide Map Marker

Screenshot of HyperCities advanced settings menu

Every object added to a collection is designated by a marker on the map that was placed when creating the object. These markers can be a pinpoint, line, or polygon that appears on the map; these markers can be hidden if desired.

To hide the marker, edit the object of interest and select the "Advanced Settings" menu shown as the pencil icon. To hide the marker for that particular object, check the check-box. Save the object to finalize the edit.

Switching out Icons/Markers

To switch out the icons of all the objects within an entire collection: start by exporting the KML file of the collection from Google Fusion Tables. To replace all icons within a collection from KML files that have been exported directly from HyperCities, you may utilize the method for switching out single icons below, and repeat as necessary to encompass all icons.

Once the desired KML file has been exported, open the file using a text/code editor such as notepad or notepad++. To replace your icon, simply replace the URL for the icon image between <href> and </href>.

Icon Properties

Here is a sample of what your code will look like when you open it with a simple text editor:

 <IconStyle>
      <Icon>
        <href>INSERT URL FOR YOUR ICON HERE</href>
      </Icon>

Before you can import this KML file back into HyperCities, you will need to open it with Google Earth and resave the file. To do this, simply drag & drop your KML file into Google Earth, then right click on that same collection and choose "save place as" and select "KML." Within Google Earth, you should see your new icons populate the collection. Google Earth some how cleans up the code when resaving. This is critical to the success of importing your KML file with the new icons.

To switch out single icons of specific objects within a collection: start by exporting the KML file of the collection. See previous section for instructions on exporting KML files. Additionally, you may also export a KML file from data that has been inputted into Google Fusion Tables.

Once the desired KML file has been exported, open it using Google Earth. Within Google Earth, you should see your objects in the collection. To change the icon of a specific object, right click on the object and select "properties." In this new window, click on the picture of your current icon in the upper right corner, as shown in the screenshot.

In the new window, you may choose from existing icons, or choose to provide a link for custom icons that you find online or have created yourself.

Choose the New Icon

• There are many great options online to find stock icons that can be used in your collection. Additionally, you may create your own.
• Note: Custom icons should be 32x32 pixels. Otherwise the image will be automatically resized and the resulting image my become distorted.

Share Object Permissions/Authorship

To share an object, start by opening the object in edit mode. Click on the "privilege setting" icon. Enter the email of the co-author you wish to add, then press enter on the keyboard to finalize the task. You should now see the co-author's e-mail appear in the list of authors.

To share an entire collection, start by opening the collection of interest in narrative view. Next, click on the edit icon. Once inside the collection edit view, click on the "privilege setting" icon. Enter the email of the co-author you wish to add and be sure to check the box to "share all objects..." Press enter on the keyboard to finalize the task. You should now see the co-author's e-mail appear in the list of authors.

Embedding HyperCities

HyperCities collections can be embedded into other web pages such as WordPress, Scalar, or personal web pages through HTML iFrames. Embedding a HyperCities collection is essentially inserting an iFrame in a collection.

iFrame

To embed an iFrame, insert the following code into the HTML file of the page you want the collection to be embedded:

<iframe src="COLLECTION_URL" scrolling="no" frameborder="0" width="#px" height="#px" ><iframe>

To complete the code, replace "COLLECTION_URL" with the URL of the collection of interest. This can be found by opening the collection in HyperCities and copying the URL in the browser URL bar. The URL can also be found within the collection by clicking on the "Link" link at the top-right of the narrative column.

Also replace the "#'s" to set the desired width and height of the iFrame.

To embed a HyperCities collection with a specific Narrative panel width, or no Narrative panel at all, add the following to the end of the collection URL:

?width=#

Replace "#" with the desired width of the Narrative panel in pixels. Replace "#" with "0" to remove Narrative panel. (eg: http://hypercities.ats.ucla.edu/?collections/58134?with=600)

WordPress

Scalar

Step-by-step screenshots of how to import and embed HyperCities into Scalar.

To embed a HyperCities collection in Scalar, the collection must first be imported onto Scalar. This can be done in the "Import" menu that can be accessed up hovering over the drop-down menu on the left. Once in the "Import" menu, select "Affiliated archives" followed by "HyperCities."

Once the HyperCities Importer is open, paste the URL for the HyperCities collection of interest in the text-box then click "Search." To embed a HyperCities collection with a specific Narrative panel width, or no Narrative panel at all, add the following to the end of the collection URL:

?width=#

Replace "#" with the desired width of the Narrative panel in pixels. Replace "#" with "0" to remove Narrative panel. (eg: http://hypercities.ats.ucla.edu/?collections/58134?width=600)

The collection as well as all sub-collections will appear after searching for your collection. Check the boxes for all collections that will be imported and click "Import Selected Media." A message should appear to verify the media import.

Now that the media is imported, embedding the collection on a Scalar page can be done in the rich text, Visual, editing menu. Click on the "Add inline Scalar media file" button, select the collection of interest, and save the page.

For more help with working on Scalar, visit the Scalar HELP SECTION.

Advanced Topics

Installing a HyperCities Instance

The HyperCities API

Using HyperCities Maps in Other Applications

Debugging the Google Earth Plugin

Getting Started with MediaWiki