The map-collection-explorer from esri

Browsers support

IE / Edge	Firefox	Chrome	Safari
IE11, Edge	last 2 versions	last 2 versions	last 2 versions

Features

Save web map to your ArcGIS Online account
Panning and zooming the timeline
Filtering maps based on scale
Re-ordering selected maps by drag and drop
Modifying the opacity of a map
Customizing the application's user interface (for example, colors and text)
Using your ArcGIS Online webmap in the template.
Sharing the application's state (that is, the current view) with other users
Capturing the URL parameters and using them in your application
Enabling your application to sign in to ArcGIS Online using OAuth 2.0

Demo - USGS Historical Topographic Map Explorer

Demo

Instructions

Download and unzip the Zip file or clone the repository into a folder on a web server.
Web-enable the directory.
In the config folder, open the config.js file in a text editor.
Edit the config.js file to include information about your image service, as described below.
View the changes by opening the index.html file in a web browser.

You can configure the appearance of many of the application's components (for example, the title, header, sidebar, map, and timeline).``

The names of the components (that is, parameters) are in quotations and the parameter values are in brackets. Comments are preceded by a forward slash (/). To change the appearance of a component, edit the parameter value. For example, to change the application's title, header height, and header background color, you would change the APP_TITLE, HEADER_HEIGHT, AND HEADER_BACKGROUND_COLOR parameters shown below.

"APP_TITLE": "USGS Historical Topographic Map Explorer"
// Header height
"HEADER_HEIGHT": "70px"
// Header/Banner background color (rgb or hex)
"HEADER_BACKGROUND_COLOR": "#333"

Component: Application title

This is the text that is displayed at the top of the application window. Parameter: APP_TITLE; Example value: “USGS Historical Topographic Map Explorer”

Component: Application header

You can change the appearance of the application's header by modifying parameters associated with the color, text, and size of this component.

Parameter	Value	Description
`HEADER_HEIGHT`	70px	The height of the header box
`HEADER_BACKGROUND_COLOR`	rgb(48, 75, 60) or hex value	The definition of the color inside the header box. It can be specified as either a Red, Green Blue (r,g,b) or hexidecimal (hex) color
`HEADER_TEXT_COLOR`	white	The color of the header text inside the header box.
`HEADER_TEXT_SIZE`	1.6em	this is the size of the header text in the header box. It should be specified in em size units, which is recommended by the W3C. The em text size can be converted from pixels using this formula: pixels/16=em . So, the default text size of browsers of 16 pixels is 1em.
`HEADER_TEXT`	USGS Historical Topographic Map Explorer	this is the text string for the header in the header box.
`SUBHEADER_TEXT_COLOR`	0.9em	this is the size of the subheader text in the header box

Additionally, you can configure parameters related to setting up queries, which are used to find the scanned map images that the user is interested in seeing:

Parameter	Value	Description
`IMAGE_SERVER`	image service url	Enter a valid Image Service URL to an ArcGIS REST Services Directory
INFO_THUMBNAIL	/info/thumbnail	Enter a relative path to thumbnails on Image Service (this will be a child resource to the Image Service you listed above
OUTFIELDS	['*']	outfields (return all the fields for now)
IMAGE_SERVER_WHERE	OBJECTID =	The OBJECTID is used in the query
QUERY_WHERE	"isDefault = 1"	A where clause for the query.

Application header and sidebar

You can style the application's header, text, and styles under the section "User Interface styles can be set below this point" in the config file Below are some of the parameters used to style the application's header and "Step 1" text.

Map crosshair and mouse over/out style

These parameters style the crosshair and polygons displayed on a map when a user either selects a point on the map or hovers the mouse over an item in the timeline.

// Crosshair style
"CROSSHAIR_SIZE": 40,
"CROSSHAIR_FILL_COLOR": [255, 0, 24]
"CROSSHAIR_OPACITY": 0.95
// Timeline item mouseover graphics
"TIMELINE_ITEM_MOUSEOVER_GR_FILL": [146, 179, 160, 0.10]
"TIMELINE_ITEM_MOUSEOVER_GR_BORDER": [48, 75, 60, 1.0]
// Sidebar item mouseover graphics
"SIDEBAR_MAP_MOUSEOVER_GR_FILL": [146, 179, 160, 0.0]
"SIDEBAR_MAP_MOUSEOVER_GR_BORDER": [48, 75, 60, 1.75]
"IMAGE_BORDER_WIDTH": 1.75

Timeline

Timeline parameters control the timeline container and the timeline. For instance, indicating initial height of the timeline, and the start and end dates of the timeline.

// Specifies the style for the timeline events. Choose from "dot" or "box". Values below are used in the demo applications.
"TIMELINE_STYLE": "box",
// Timeline height (in pixels)
"TIMELINE_HEIGHT": "240",
// Minimum zoom interval for the visible range (milliseconds). It will not be possible to zoom in further than this minimum.
"TIMELINE_ZOOM_MIN": 201536000000,
// Maximum zoom interval for the visible range (milliseconds). It will not be possible to zoom out further than this maximum.
"TIMELINE_ZOOM_MAX": 4153600000000,
// If true, timeline events will be clustered together when zooming out.
"TIMELINE_CLUSTER": false,
// Enable a navigation menu with buttons to move and zoom the timeline.
"TIMELINE_SHOW_NAVIGATION": false,
// Set a minimum Date for the visible range. It will not be possible for the user to drag the timeline beyond this minimum
"TIMELINE_MIN_DATE": '1950',
// Set a maximum Date for the visible range. It will not be possible to move beyond this maximum.
"TIMELINE_MAX_DATE": '2015',
// steps (number of x-value ticks) between labels
"TIMELINE_STEP": 5,
// When true, events are moved/animated when resizing or moving them. This is very pleasing for the eye, but does require more computational power.
"TIMELINE_ANIMATE": true,
// Timeline scale (Available scales: millisecond, second, minute, hour, weekday, day, month, year)
"TIMELINE_SCALE": "year",

Timeline Legend

The timeline legend displays the different map scales for your maps. The legend is interactive. Users can filter items in the legend by selecting one or more items in the legend to hide.

Below are the properties for a single scale. The USGS demo uses 5 scales and the Yosemite demo uses 3 scales.

"TIMELINE_LEGEND_VALUES": [{
    "label" : <a string representing a single scale in the legend>,
    "value" : <a integer value representing a single scale>,
    "color" : <the color used in the legend for a single scale>,
    "className" : <the CSS style used for a single scale>,
    "lodThreshold" : <the level of detail for a single scale>
}]

The string representing the CSS style used for a single scale must be indicated in the timelineItem.css file:

div.timeline-event-box.five {
	background-color: #004ED7;
	color: #f9f9f9;
}

Timeline item/map tooltip

Tooltips are displayed when users hover over a single item in the timeline. The tooltip can display the map's title, thumbnail, date, and any additional content.
Below are the field names used in the Yosemite demo application.

// THESE MUST MATCH the attribute field names in the feature/map service attribute table
"ATTRIBUTE_OBJECTID": "OBJECTID"
// Name of map displayed in the tooltip and timeline item(s)
"ATTRIBUTE_MAP_NAME": "Name_on_Map"
// Date field
"ATTRIBUTE_DATE": "Year_on_Map"
// Scale field
"ATTRIBUTE_SCALE": "Map_Scale"
// Map citation <String> or <attribute field in the feature service>
"ATTRIBUTE_CITATION": "No citation available"

Folders and Files

The template consists of the following folders and files:

/css/: Styles

main.css Application styles

/images/: Contains images used by the application.

/js/: JavaScript files

config.js
main.js

/html/: HTML files

index.html: The default html file for the application.

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

[](Esri Tags: ArcGIS ArcGIS Online Web Application boilerplate template widget dijit Esri JavaScript application USGS Landsat ArcGIS ImageServer) [](Esri Language: JavaScript)

Undefined values returned in renderedCell

Hey guys,

First of all thank you for uploading the code for this application here, it has helped me out tremendously with my application thus far. I am creating a small scale historic map application for some local archives and have been using your code as a starting point for the application. Everything thus far has been working fine, but there is one minor problem I am facing over the last 2 day or so that I don't seem to be able to find the answer to.

Once a map is selected from the timeline (where it shows all attributes needed to be shown (name, year and citation)) it does show up in the renderedCell class in the bottom-left. Once zoomed in far enough it displays the correct thumbnail and the transparency slider. However, the name of the map and the date of the map return undefined values. What makes it even stranger is that the downloadLink works perfectly fine and instantly downloads the correct TIF files from the server. I have tried debugging the code myself, but I get stuck to a point where the renderedCell will not show up at all. Even when I load the image server into an untouched version of the code and after I set the attribute fields to the correct field names in the image server, it also spits out undefined values.

Are you guys able to help me sort out this problem?

Below I have pasted the results that I keep getting in the RenderedCell. I have also included a picture of the timeline hover over an object where it does show up with the right name and date of the map.

PS. I have altered the lay-out of the RenderedCell in the CSS file

esri / map-collection-explorer Goto Github PK

map-collection-explorer's Introduction

Browsers support

Features

Demo - USGS Historical Topographic Map Explorer

Instructions

Component: Application title

Component: Application header

Application header and sidebar

Map crosshair and mouse over/out style

Timeline

Timeline Legend

Timeline item/map tooltip

Folders and Files

Issues

Contributing

Licensing

map-collection-explorer's People

Contributors

Stargazers

Watchers

Forkers

map-collection-explorer's Issues

Recommend Projects

Recommend Topics

Recommend Org