Neatline Workshop

Lex Berman (2016-03-16)

Official Neatline Manual: PDF Online Documentation

Table of Contents:
Getting Started
Maps - Geographic Focus
Import WMS Map Layer
Add Vector Features to your Map
Popups using Record BODY and CSS
Add Items to your Exhibit
Link an Item to a Vector Feature on Map
Set Up a Timeline
Set Up a Waypoints Menu


Neatline is a specialized plugin to a content management system that creates websites.

Neatline sets up "Exhibits" which are collections of "Items" that have a geographic and temporal scale. By creating a geographic "Focus" and a "Timeline" Neatline creates websites that have Items which can be browsed on interactive webmaps, and which appear as bands on a timeline. The Items can be browsed by viewing a map, by clicking on a list of the Items, or by scrolling the Timeline.

Exhibit: the collection of digital content that is arranged into a single website.
Items: the digital files and descriptions that are arranged in geographic and temporal contexts.
Focus: the geographic area within with the Items are arranged.
Timeline: the scope of time within with the Items are arranged.

Getting Started

  1. Go to neatline sandbox:

  2. Login by adding to the URL: admin/ or admin/users/login

  3. After login in you will see the dashboard for all Neatline Exhibits and Items.
    click on the NEATLINE tab to continue.

  4. The Neatline Exhibits that have been created by all users will be listed
    click on CREATE AN EXHIBIT button to continue.

  5. Fill in the basic Metadata for your Neatline Exhibit
    Give the exhibit a title and description
    Set defaults for Widgets: SIMILE TIMELINE and Enabled Spatial Layers: OpenStreetMap
    scroll down to click SAVE EXHIBIT

Maps - Geographic Focus

  1. Back on the Neatline | Browse Exhibits screen
    click on the Title of your exhibit to launch the Editor screen

  2. On the initial EDIT EXHIBIT screen, you should see a MAP for setting the default map extent
    Pan and Zoom the map to find the default map extent you want to see
    click STYLES link (upper left) to continue

  3. The STYLES menu will appear on the lower left
    You will see the current settings populate the fields, then click SAVE

  4. You should see a SAVED SUCCESSFULLY message on the top right
    click BACK TO OMEKA on the top left to continue

Import WMS Layer of Scanned Map

  1. You can bring a scanned and georectified map into Neatline using the WMS protocol.
    In this example, we will use georectified map image from CGA Map Warper
    First go to the page where a scanned map has already been georectified
    Click the EXPORT tab, and right-click on the "WMS base URL link", to COPY LINK ADDRESS
    You should have a URL like this:
    Paste this onto a Notepad or other editor temporarily
    Now copy the complete Title of the map, "Saint Petersburg 1830", and paste it onto your Notepad

  2. Back in Omeka, click NEATLINE tab, and the title of your Neatline Exhibit
    In the Editing Window, click on NEW RECORD

  3. The NEW RECORD options will load on the left side of the screen
    In the TEXT settings, enter a title for the NEW RECORD
    Now click SAVE to continue

  4. Now switch to the STYLE settings for the Record
    Scroll down using the gray scroll bar to find the IMAGERY settings
    For WMS Address paste in the complete URL saved earlier: ""
    For the WMS Layers paste in the complete Title saved earlier: "Saint Petersburg 1820"

  5. If the settings for WMS layer are correct, the Overlay of the WMS map will appear on the map view

  6. Use the gray scroll bar to scroll up to OPACITIES
    set the Fill Opacity and Fill Opacity (selected) as desired
    The settings range from 0 to 1 (where 0=transparent and 1=opaque)

  7. Use the gray scrollbar to return to the top of the Record and click the X to exit
    Then, back on the EDIT screen for the Neatline Exhibit, click the Back to Omeka link

Add vector features to Neatline Map

  1. Back in Omeka, click the NEATLINE menu item to list all the Neatline Exhibits
    Click on the Title of your exhibit to start editing

  2. In the EDIT Exhibit screen click on NEW RECORD button
    enter a Title for the vector feature you want to create, and click SAVE

  3. Click on the MAP link (instead of Text)
    Select from the Drawing Tools, for example DRAW POLYGON

  4. Use the zoom and pan functions to find the exact location on the map
    turn off the scanned map overlay, to see the OSM base map
    click points on the map to DRAW A POLYGON
    double-click to finish the feature, then Click SAVE
    scroll up to click the X and exit out of the EDIT RECORD mode

Create a Pop-Up using Record BODY element and CSS

  1. Use this method to create a custom popup for your vector feature. If you prefer to have a separate web-page for the feature, use the following method (Full Web-Page Items) instead.
  2. In the EDIT Exhibit screen, select and click on the RECORD that you want to edit.
  3. Under the TEXT menu, use the BODY section to enter your pop-up content. NOTE: this BODY section is where you can use HTML with CSS to control how the popup looks
  4. For Example, by pasting the following HTML with inline CSS, you can embed an image from a URL and set both the background color of the popup, the text color, the margins and the padding:
    <p style="color:white;margin:3px 3px 3px 3px;padding: 18px 8px 8px 8px;background-color:gray;">
    <img src="" width="300">
    Opened in 1860, Mariinksy became the preeminent music theatre ...

Add Full Web-Page Items to Neatline Exhibit

  1. Use this method if you want to create a complete web-page that the vector items on the map will link to. Otherwise, skip this method and use the Record BODY with CSS as described above.
    In the Omeka sceen, click on the ITEMS menu near the top left
    This loads the list of available Items (files and links to digital resources)
    click ADD AN ITEM

  2. In the Add an Item screen, first fill out some metadata in the DUBLIN CORE tab
    Add a Title that will be unique enough for you to find it in a pick list
    Add a Description that you would like to appear on the page for that item
    Add a Publisher reference, typically a URL to the source of the item
    Add a Date (visible to users, but not the controller for Timeline, see below)
    When all the info is entered, scroll to the top right and click ADD ITEM

  3. Switch to the FILES tab of the Add an Item screen
    Use CHOOSE FILE to browse to the folder on your computer to select a photo to upload
    click ADD ITEM to upload the file to Neatline

  4. The Item page should now have the thumbnail of the uploaded image
    and also the various other metadata
    click Neatline menu item on the left, then the title of your exhibit to continue

Link Items to Vector Features on Neatline Map

    This method allows you to link the vector features to your Full Web Page Items (described above)
  1. Go to the Editing page of your Exhibit
    click on the Title of the Location Record that you want to link an item to
    on the RECORD EDITING page, click the ITEM link

  2. Click the drop-down menu "Search Omeka Items"
    find the ITEM TITLE that you gave to the uploaded photo previously
    click on the item in the drop-down list
    the metadata about the item will pre-load on the left column
    then click the SAVE button
    Now the locations on Neatline map will be clickable
    popup will contain the Item details and thumbnail of image

Setup of Timeline

  1. Go to the Editing page of your Exhibit
    under Plugins Options, click SIMILE TIMELINE
    Set the DEFAULT DATE of the timeline, which will be in the center
    Set the INTERVAL UNIT and INTERVAL Pixels to adjust the dates on the scale
    click SAVE and click the BACK TO OMEKA link to continue

  2. Go to the NEATLINE menu, select the title of our Exhibit to EDIT
    click on the name of the RECORD that you want to appear on the Timeline
    click on the item in the drop-down list
    the metadata about the item will pre-load on the left column

  3. in the ITEM editing pane on the left go to the STYLE section (not Text)
    In the WIDGETS drop-down menu select and click on SIMILE Timeline
    the Widget title should be enabled as a gray button in the drop-down

  4. Once the SIMILE TIMELINE widget is engaged, scroll down to DATES section
    The first two dates: START DATE and END DATE control the tape on the Timeline
    The next dates: AFTER DATE and BEFORE DATE control when the vector shape will be shown on the map. (In other words, After Date = 1781, means the polygon will appear when the centerline of the timeline is positioned after the year 1781). Leaving the End date blank should create a tape on the timeline that has no end point.
    Remember to scroll to the bottom of the page and click SAVE.

  5. In the PUBLIC VIEW of your Neatline Exhibit you can see how the timeline controls the features that have AFTER DATE and BEFORE DATE values
    The dashed centerline on the Timeline is the threshold that determines if features are shown on the map
    If the centerline is to the RIGHT of the AFTER DATE, the object will be visible
    If the centerline is to the LEFT of the AFTER DATE, the object will not be visible
    Scrolling left and right on the timeline will therefore control the features shown on the map (as long as EACH feature has the SIMILE TIMELINE widget enabled and the AFTER DATE and/or BEFORE DATE set)

Setup of Waypoints Menu

  1. Go to the NEATLINE Tab on the left side menu
    Find the EXHIBIT you want to edit, and click on "Exhibit Settings"

  2. Scroll down to the Widgets section
    In the drop-down list select and click on WAYPOINTS
    Waypoints should now appear as a gray button in the Widgets menu
    Scroll to the bottom and click SAVE EXHIBIT

  3. In the NEATLINE | BROWSE EXHIBITS screen, click on the Title of your Exhibit
    You should now be on the EDIT EXHIBIT screen
    Scroll to click on the ITEM that you want to make into a Waypoint

  4. In EDIT ITEM screen, go to the STYLE settings (not Text)
    scroll down to the Widgets menu
    In the drop-down menu click on WAYPOINTS
    "Waypoints" should appear as a gray button in the Widgets menu box.
    Scroll down to Click SAVE
    Scroll up to close the EDIT ITEM panel
    [Repeat these steps to add WAYPOINT for other ITEMS]

  5. Now in the PUBLIC VIEW of your exhibit you should have a WAYPOINTS menu on the right
    Clicking on an item in the WAYPOINTS list, will zoom in to that item on the map
    If you don't see the WAYPOINTS MENU on Public View, make sure the WAYPOINTS widget was saved on the EXHIBIT SETTINGS screen and the settings saved!