This feature includes the implementation of Leaflet.js, which contains the following key features:
- Zoom and drag controls
- Support for keyboard
- Support for touch devices
- Modular architecture
- Support for multiple layers
- Base tile layer
- Additional tile layers
- GeoJSON features layer
- Image overlays
- I can zoom the map in and out using the + and - buttons on the upperleft corner of the map.
- I can zoom the map in and out using the mousewheel
- I can pan the map.
- I can pan and zoom the map using a touch device such as a mobile phone or tablet.
- I can use the keyboard to zoom and pan the map.
- I can show the map full screen by clicking the Full screen button on the upperleft corner of the map
- I can show and hide the image overlay layer with the button on the upperright corner of the map
- Clicking anywhere on the map (not on a marker) closes any open panes
- When the map zooms to either a selected or all visible markers it should take any open panes into account for its viewport
Geocoded objects from a result set that contain a point (that is, records that contain a longitude and latitude value) can be added to a map in the form of a marker.
Icons are taken from open source Maki icon set, and implemented using extensions to Leaflet provided by Mapbox.js, also open source.
Markers are styled according to the simplestyle specification, 1.1.0. This provides the means to modify a marker's size, symbol, color, text and description.
The markers support the following features:
- When I hover over a marker, I see the title of that marker.
- When I click on a marker, a detail screen appears.
- If two markers are close together on the map, they cluster together.
- The amount of markers in a cluster is indicated in the marker cluster itself.
- The color of the marker is the "primary color" by default.
- The color of the marker can be overriden from the detail screen.
Geocoded objects from a result set that contain geometries such as polygons and lines can also be drawn on the map. These shapes have less interactivity than markers, but can be styled using the simplestyle specification, 1.1.0. This provides the means to modify a polygon's stroke (the color and thickness of the border) and its fill color.
- When I click on a polygon, I see the title in a tooltip.
- When I click on a polygon, a detail screen appears.
- Polygons do not cluster.
- The color of the polygon is the "primary color" by default.
- The color of the polygon can be overriden from the detail screen.
The detail view appears after clicking a stored object on the map, such as a marker. The fields from that object are then shown.
The site implementing the ErfGeoviewer can customize this pane by altering the configuration file. By default, the following fields will be displayed if available:
- Title
- Image
- Description
- Link to external page
When the object is of type "kaart", additional controls are exposed to alter an overlaid image:
- Rotate/scale
- Distort
- Transparency
- The title of the marker can be changed by typing in the Titel field
- The Stijl button enables me to change color and icon of the marker
- The Verwijderen button deletes the marker from the map
- The description of the marker can be changed by typing in the text field below the buttons
- When an image is overlaid, I can adjust the transparency with the Transparantie slider.
- When an image is overlaid, I can toggle between "rotate/scale" and "distort" mode with the Kaart manipuleren buttons
- The image of the marker should be visible. If the marker has no image, a placeholder image should be visible.
- The description of the marker should be visible
- The description of the external link can be changed by editing the field next to the Lees meer button
- Clicking the Lees meer button opens the associated link in a new browser tab (Reader mode)
- Clicking the archive icon in the lowerright corner opens a link to the Digitale Collectie for this marker in a new browser tab
A legend can be configured in mapmaker mode, and displayed in reader mode. It allows a user to show colored markers with an optional icon next to a editable label. If enabled, it appears in the lower left of the map in reader mode.
A number of settings are available directly through the ErfGeoviewer interface.
- Title of map
- Toggle for search
- Toggle for social share widget
- Toggle legend
- Toggle list view ("Mijn kaart")
- Colors
- Base map
- Legend
- Toggling the Titel checkbox switches title visibility
- Typing in the edit box beneath the Titel checkbox changes the title
- Toggling the Zoekfunctie checkbox switches the search feature in Reader mode
- Toggling the Sociale Media checkbox switches the social media buttons in Reader mode
- Toggling the Legenda checkbox switches the legend feature in Reader mode
- Toggling the Lijst checkbox switches the Mijn kaart feature in Reader mode
- Changing primary and secondary colors change the colors of the user interface
- Selecting any of the predefined tile sources changes the background tiles of the map
- Clicking the Toevoegen button adds a legend item
- Clicking a legend item opens a popup
- The popup allows changing color, icon and label of the legend item
- Clicking next to the popup closes it and makes the change permanent
- Clicking on the blue cross while hovering above a legend item deletes it
The following settings can be configured through a configuration file. A template for this file is stored in version control. A developer creating an instance of the ErfGeoviewer will create a per-site version of this file.
- Primary and secondary colors
- Control to open a new map
- Control to create a new map
- Enable/disable timeline slider
- Default text for "Lees meer" in detail screen
- Available colors for configuring the interface via forms
- Mapbox settings (optional)
- Array of base tiles
- Connection settings to Digitale Collectie via de Zoek en Vind API
- Fields to show on detail screen
- If I change the zoek_en_vind.requestedFacets array, the advance search corresponds to the facets I have selected.
- Facet labels replace the name of a field (dc:subject) with a user-friendly title (Subject).
- I can change the order in which fields are shown in the detail screen by altering the "fields" array.
- Labels are shown or hidden according to my "fields" configuration: if label is blank for a given field, no label is shown; if a valid string is entered, then the label appears above my field in the detail screen.
- The read more link in the detail screen uses the ui.moreInfo for its default value.
- If I set controls.newMap to false, then the menu item for creating a new map is hidden.
- If I set controls.openMap to false, then the menu item for opening an existing map is hidden.
The "reader mode" provides a way to easily embed curated maps.
- Loading JSON file
- Recreation of map features (markers, polygons)
- Reading configuration to enable/disable options such as the legend or map title
- I can load a stored map in "reader mode".
- Users can clone an existing map into their own Data Atlas account
- This creates an exact copy, which can be modified to fit the user's requirements
- This feature is handled by the Data Atlas, not by the ErfGeoviewer itself.
- All maps contain a "clone" action which links to the Data Atlas.
This feature was determined to be out of scope.
A slider will allow users to filter a layer based on a date range. The slider is made available by clicking a filter icon in the upperleft of the map.
- Clicking the filter button in the upperleft corner of the map toggles visibility of the timeline filter pane
- The timeline filter pane should display a bar chart of all available markers on the map, by year
- When clicking and dragging the mouse over a time period a selection should become visible
- After making a timeline selection, the markers on the map should be filtered by the selection and the map should zoom to all visible markers
- Dragging a time selection should keep the selection the same width and update the filter
- Dragging either end of the selection should update the filter
- Clicking on an empty area on the timeline filter should disable the filter and the map should zoom back out to all markers
A normalized date is required for this feature to function properly. Due to current limitations in the API, this feature has not been entirely implemented.
Users can reduce search results through one or more facets, which are configurable through the configuration file. By default, the exposed filters are type, collection and subject.
By clicking a facet, the results are narrowed. This selction can be reset by clicking the "reset" link.
- I can reduce search results by clicking on a facet
- The number of results in a facet is indicated
- I can remove a facet selection by clicking "reset
- Entering a from and/or to date reduces the search results based on date
Users can search by keyword. Pressing enter begins the search. This can also be initiated by clicking a search icon.
Results can be restricted to the map's current bounding box by selecting "zoek binnen kader".
- When the search pane is opened, the search box has keyboard input focus
- A search is started by either pressing enter in the search box or by clicking the search icon
- Entering a search term and starting a search shows the matching search results in a list
- Searching for multiple terms can be done by separating them with a space
- Searching for an empty search term returns all results available
- I can restrict a search by the map's current bounding box by selecting "zoek binnen kader"
- When a search does not produce any results there should be a message that there are no results found
The API has some known issues with implementing a bounding box filter.
The results of the search are listed in a pane overlay before being plotted on a map. Only objects with associated spatial data are returned. These are shown in an alternative color on the map, and in the case of markers, are smaller than stored objects.
- The search results are shown in a list
- The search results are paginated by 30 items per page
- Each search result item should contain an image (or placeholder if no image is available), a title and two buttons (extra button for "kaart" image overlays)
- Hovering over a search result item should highlite the corresponding projection on the map.
- Pressing the Plus button adds the item to the map
- Pressing the Zoom button zooms the map to the coordinates of the item
- Pressing the Plus button on a "kaart" image overlay adds the item to the map as an overlaid image
- Clicking on the map closes the search pane overlay
Markers and image overlays are placed in separate layer groups. Markers always appear above an overlaid image.
- When adding both a polygon and a point marker, the point marker should lie on top of the polygon
- When adding both an image overlay and a point marker, the point marker should lie on top of the image overlay
- When adding both a polygon marker and an image overlay, the polygon marker should lie on top of the image overlay
The application will be designed using Marionette regions and underscore templates. This provides a flexible way to adjust the presentation of a map instance.
No tests required.
Users can change the location of various flyouts (detail screen, menu) based on a "layout."�
This feature was not implemented.
Once markers are added to a map, then can later be searched through the "Mijn kaart" list view. This provides a way to quickly find one marker out of a larger, pre-selected dataset.
- Clicking on the number button in the top menu bar should open the Mijn kaart pane
- Opening the Mijn kaart pane should zoom the map in or out to the bounding box of all markers
- Typing in the Zoek edit box dynamically filters the list based on marker title
- A marker in the list can be selected by clicking the checkbox in front of it
- The selection total ("n geselecteerd") should reflect the total number of selected markers
- Clicking the Bewerken link pops up a dialog to edit the selected markers
- Clicking the Verwijderen link pops up a dialog to delete the selected markers
- Changing the color and icon in the dialog should change the color and icon of all selected markers on the map
- Either clicking the Sluiten button or clicking next to the dialog should close the dialog
- Clicking the Verwijderen button should delete all selected markers from the map
- Clicking any button or clicking next to the dialog should close the dialog
Added 2 september 2015. Provides a quick overview of the application, with quick-links to start a new map or open an existing one.
- I see the welcome screen when my local storage is empty.
- I do not see the welcome screen after something has been saved in my session.
- Clicking the New map button creates a new empty map
- Clicking the Open map button shows the Open file dialog to open a JSON map file
Markers that are not associated with a search result can be created using the drawing tools.
- Clicking the Draw a marker button on the upperleft corner of the map switches the mouse to marker placement mode
- Clicking on the map in marker placement mode places a marker on the clicked coordinates
- Clicking cancel next to the Draw a marker button cancels the marker placement mode
- Clicking a drawn marker shows the Detail pane of that marker which can be used to customize the marker
Other drawing tools to create elipses and polygons have been disabled to simplify the interface.
The map has a printer-friendly version.
This feature was not implemented.
Markers are linked to one another in sequential order. From the reader view, one can click on a detail view, and click "next" or "previous" to move to the detail screen of another object.
- Clicking the Volgende button activates the next marker
- Clicking the Vorige button activates the previous marker
A user can search for a location on the map using an address such as "Pedro de Medinalaan 9, Amsterdam".
This feature was not implemented. The primariy reason was that the interface for searching through the Digtiale Collectie and one to search for an address could cause some confusion.
The ErfGeoviewer will make a best effort to comply with the Dutch Webrichtlijnen.
-
The application should run in the most recent version of the following browsers: Desktop (Windows & Mac):
- Chrome
- Firefox
- Internet Explorer
- Safari
Mobile (Android & iOS):
- Android browser
- Samsung Internet
- Google Chrome
- Safari
-
A warning message should be displayed when the application is run in an unsupported (version of a) browser.
-
User can navigate through menu items using the keyboard.