Giter Club home page Giter Club logo

basic-viewer-template's Introduction

ArcGIS Configurable Apps will be retired in 2025. The ArcGIS Configurable Apps source code repro is deprecated and will not receive further updates. In addition, this repository will be removed in October 2025, along with the October 2025 ArcGIS Online update.

DEPRECATED: Classic Viewer

Note: An updated version of this application has been created that contains much of the funcationality of this template but with an updated look and feel. We will continue to fix bugs in this version but all new development efforts will be in the new application. Visit the new template repo for more details.

Classic Viewer is a configurable application template that enables you to display an ArcGIS web map using a variety of tools.

View it live

#Features The template can be configured using the following options:

  • Map: Choose the web map used in your application.
  • Color Scheme: Choose between five color schemes for the application (Blue, Gray, Green, Orange, Purple).
  • Show Title: Choose whether to include an application title.
  • Title Text: The application title. The default title is the web map name.
  • Logo: Choose a custom logo for your application.
  • Overview Map: Display a retractable overview map to add context for panning and zooming.
  • Legend: Display a legend for map layers. *
  • Details: Display the web map item description. *
  • Editor: Allows users to interactively create, modify, or delete features in editable layers. *
  • Time Slider: Enables the display of the time slider. *
  • Print: Enables printing the map at the current extent. It can be configured to include a legend and supports different layout options.
  • Layer List: Enables toggling the visibility of operational layers within the web map. *
  • Basemaps: Enables the display of the basemap gallery.
  • Bookmarks: Enables the use of web map bookmarks for navigation. *
  • Measure: Enables measure tool for interactive area, length, and point measurement.
  • Share: Allows users to share the application with others via email, Twitter, or Facebook.
  • Search: Displays the Search box to enable navigation to addresses and places.
  • Search for locations within current extent: Enable toggling of search within the current map extent only.

*These options will appear in the application when the web map has properties or layers that support them.

Instructions

  1. Download and unzip the .zip file or clone the repository.
  2. Web-enable the directory.
  3. Access the .html page.
  4. Start writing your template!

New to Github? Get started here.

Deploying

  1. To deploy this application, download the template from Portal/ArcGIS Online and unzip it.
  2. Copy the unzipped folder containing the web app template files, such as index.html, to your web server. You can rename the folder to change the URL through which users will access the application. By default the URL to the app will be http://<Your Web Server>/<app folder name>/index.html
  3. Change the sharing host, found at line 61 of index.html, to the sharing URL for ArcGIS Online or Portal. For ArcGIS Online users, keep the default value of www.arcgis.com or specify the name of your organization.
  • ArcGIS Online Example: "sharinghost": location.protocol + "//" + “<your organization name>.maps.arcgis.com
  • Portal Example where arcgis is the name of the Web Adaptor: "sharinghost": location.protocol + "//" + "webadaptor.domain.com/arcgis"
  1. If you are using Portal or a local install of the ArcGIS API for JavaScript, change all references to the ArcGIS API for JavaScript in index.html to refer to your local copy of the API. Search for the references containing "//js.arcgis.com/3.13" and replace this portion of the reference with the url to your local install.
  • For example: "//webadaptor.domain.com/arcgis/jsapi/jsapi" where arcgis is the name of your Web Adaptor.
  1. Copy a map or group ID from Portal/ArcGIS Online and replace the default web map ID in the application’s index.html page. You can now run the application on your web server or customize the application further.

Note: If your application edits features in a feature service, contains secure services or web maps that aren't shared publicly, or generate requests that exceed 200 characters, you may need to set up and use a proxy page. Common situations where you may exceed the URL length are using complex polygons as input to a task or specifying a spatial reference using well-known text (WKT). For details on installing and configuring a proxy page see Using the proxy. If you do not have an Internet connection, you will need to access and deploy the ArcGIS API for JavaScript documentation from developers.arcgis.com.

For addtional customization options view the wiki.

#Requirements

  • Notepad or HTML editor
  • Some background with HTML, CSS and JavaScript
  • Experience with the ArcGIS API for JavaScript is helpful.

#Resources

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

#Contributing Anyone and everyone is welcome to contribute.

#Licensing

Copyright 2012 Esri

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.

basic-viewer-template's People

Contributors

jgravois avatar kellyhutchins avatar regan-sarwas avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

basic-viewer-template's Issues

Error handling

When a webmap has incorrect layers, the viewer simply stops rendering the toolbar and the widgets. No error is shown to the user, just an incomplete set of tools and map.
Apparently this occurs if you save and share a web map pointing to some map item like a feature service, then delete de map item from arcgis online (not from the web map).

The arcgis online viewer displays a detailed message: 'Layer XXX not found'. How could I customize the javascript viewer to handle that? All I could find was a .createMap passing the webmap id in main.js but didn't find any way to handle specific errors other than map not created at all, because in this cenario the map is created, just one layer isnt rendered.

Document the commonConfig.js parameter 'queryForOrg'

Please add a comment to the commonConfig.js and the readme.md files explaining the purpose of the queryForOrg parameter. Many users do not know that changing the value to false allows the app to use non-ArcGIS Online services.

Queryable

Hi Kelly,
Would it be possible to add a query widget like the one in arcexplorer online?

Scott

Printing with the MAP_ONLY layout template fails

The export options JSON parameter is missing from the request when printing with any template. Other templates still successfully print, but if the MAP_ONLY template is chosen (by first adding it as an option in the printLayouts in the index.html file), the request will fail with the error:
ERROR 001305: Missing or invalid 'exportOptions' property in WebMap; cannot derive a size for the output image. Failed to execute (Export Web Map). Failed to execute (Export Web Map Task).

The attempted remedy of hard-coding the exportOptions parameter either in the index.html file or in the layout.js file (around line 1000) also fails:

exportOptions = {
'outputSize': [
800,
1100
],
"dpi": 96
}

The JSON request adds these parameters, but the outputSize dimensions are set to null, resulting in the same error message:

{
"exportOptions": {
"outputSize": [
null,
null
],
"dpi": 96
}
}

To fix the JSON request, the null values can be changed to [800, 1100]:

{
"exportOptions": {
"outputSize": [
800,
1100
],
"dpi": 96
}
}

Adding a map to the basic viewer template

Hi

I want to add my base map.But i am able to see only webmap id which i didnt have.
I wan to add map like this
var myMap = new esri.Map("mapDiv");
Where to write this code??

printTask URL not being updated in app - ref closed issue #5

I started a new issue since the last one that referenced this issue has been closed. I'm using the basic viewer template. I have changed the URL of my custom printTask in several places, both in commonConfig.js and printpage.html (printurl variable). When I save the changes and open my app, the app is still using the out of the box print task
//utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task

I have searched exhaustively for another place where the URL might be defaulting, and could not find anything. I have added my custom print task as an item in ArcGIS Online and it works with my other non-custom AGOL web applications, so not sure why my app is not reading the URL.

Tami

Filter layer functionality

The ArcGIS Online viewer opens up a set of functionalities when you click the arrow near the layer name.

One of these functionalities is 'Filter'. This allows users to create custom queries specific to their needs, like: all crimes that happened in a specific district that were tagged as robbery.

I didn't find such functionality out of the box in this viewer, any directions on how to implement a 'Filter' one?

Location of Configuration arameters

Possible I am missing the obvious.

Do you state in your readme where the configuration parameters are to be set - e.g. a specific file and section of the file?

Incorporating a custom address locator

Hi, I haven't had much luck adding customizing the basic viewer with another geocoder.

My goal is to replace the default Esri World Geocoder with my own.

When I edit the commonConfig.js file and refresh the app, it looks like the viewer's still pointing at the default geocoder. (Screenshot attached)

I saw this comment in the layout.js file: "only use geocoders with a singleLineFieldName that allow placefinding". I added a place name alias locator service to my composite address locator, but it didn't make a difference. My locator already supports single line fields.

At this point I'm not certain if this is an issue with the viewer, if I'm getting my syntax wrong, or if the viewer has an issue with my own custom geocoder?

screen shot 2014-02-16 at 3 56 44 pm

Add Layer

How can I add my own layer to the map?

sub layer toggle

I can't seem to get the sub layer toggle functionality to work. I'm fairly new to the API, but have understood the configuration thus far. Do I have to add my own custom layers to achieve this or can I still just use the generated webmap ID? Cheers

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.