Code Monkey home page Code Monkey logo

viewer'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: basic-viewer-template

Basic Viewer is a configurable application template used to display a web map with a specified set of commonly used tools and options.

View it live

November 2015 Release Updates

  • Splash Screen: Add a configurable splash screen and specify custom title and contents.
  • LayerList: The layer list widget has been updated to add support for displaying legend info and setting layer opacity.

July 2015 Release Updates

  • Optional Subtitle: Added support for specifying a subtitle. To specify subtitle text update config/defaults.js and specify the subtitle text using the subtitle property.
  • Custom URL Parameters: The template now supports the ability to define a custom url parameter along with the search layer and field. This can be used to build applications that display a particular feature at application startup. For example if your app displays parcel features you could define a custom url parameter called parcel and then users can navigate there directly by appending ?parcel=1245243242343 and the map will zoom to that feature on startup. Define these values using by setting the customUrlParam and customUrlLayer properties in config/defaults.js.
  • Support for toggling sub layers: The layers feature now allows you to toggle the visibility of sub layers.
  • Define custom print layout title: The print feature now provides an option for users to define a custom title for the print layout.
  • Reduce white space on panels: Reduced white space on panels. Now the panels (Legend, layer, desc etc) size to fit the content.

Features

The template can be configured using the following options:

  • Map: Choose the web map used in your application.
  • Color Scheme: Choose a color scheme for the application.
  • 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. *
  • 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.

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

Instructions

Local setup

  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 in defaults.js inside the config folder for the application, 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 default.js file. 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 additional 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.

viewer's People

Contributors

beromero avatar gbonynge avatar jgravois avatar jsomerville avatar kellyhutchins 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

viewer's Issues

Geocoder error when using custom geocoder

when a custom geocoder is implemented in the config/commonConifg.js

geocode: [{
        url:  location.protocol +"//<IP ADDRESS>:<POPRTNUMBER>/arcgis/rest/services/<FOLDER NAME>/XXXX_AddressLocator/GeocodeServer"
       }]

I receive a Type Error : this.activeGeocoder is undefined | http://js.arcgis.com/3.11/esri/dijit/Geocoder.js

When the geocoder is only specified in the config/default.js file i do not get the error but the geocode service is still pointing to the default service.

queryForOrg is set to false on both default.js and commonConfig.js files.

My GeoLocator service is returning expected results in the REST endpoint and in ArcGIS for Desktop.

Thoughts? Incantations?

New Behavior - Layers with tiers now show expanded on PC

Before the latest update the "Layers" window would show only the highest tier data set. The update expanded all the layers to show all the data under the top tier. For example: I had an server based parcel layer in my project with all types of associated secondary layers. Before the update, the "Layers" window only displayed that top tier. Now I see the main layer with all the associated secondary layers expanded underneath and it has greatly diminished the ease of use as it makes the "Layers" window appear cluttered with data that the end user doesn't really need to view. See attached images Before and After the update. Unfortunately this expanded "Layers" window makes the Basic Viewer app unusable for my organization and I will be forced to consider migrating to another app.

layers window expanded
layers window before update

Secured Layers from AGS

Good Morning,
I we have a webmap with a secure layer from arcgis server, when the login pop up appears if we cancel the sign in the app stops.

I think would be great if (like in AGOL) the table of content skips that layer.

Thank you for your great job!

Sublayers Not Showing In Layers Widget

When viewing the Layers widget where you can toggle map layers on and off, map services can't be expanded to show their sublayers and thus those sublayers can't individually be turned on and off.
map_layers_example

How are "details" set?

We've created a web map and enabled details. Where is the text sourced from? We can customize the text on a map built using the configuration interface provided with arcgis online. However, we can't see out how to set the text when we create a map using a local copy of the viewer.

Add documentation in the readme for adding proxy rules

When using a proxy to authenticate on behalf of a user when accessing secured services, a proxy rule is needed. The code can be added after line 87 in main.js. Eg.

          urlUtils.addProxyRule({
            urlPrefix: "http://sampleserver6.arcgisonline.com",
            proxyUrl: "http://domain.com/DotNet/proxy.ashx"
          });

Save button for Editing tool.

Many of our clients are used to saving edits manually after creating or modifying a feature. It would be more sensible if there is a "Save" button next to the delete button as it is difficult to determine whether the edits have been saved or not.

Measure tool

The workflow to deactivate the measuring tool is not very intuitive. I had a user send me a note saying they could not figure out how to turn off the tool. When you click on the X to close the window, it does not turn off measuring. You have to click the measure tool you were using a second time to turn it off.

Small UI issue when using black color theme

Thanks for this great template.

The City of Tampa just rolled out an app using this template to show flooded streets for a current emergency. https://tampa.maps.arcgis.com/apps/Viewer/index.html?appid=36b7142d021a425fa9240b4704dc392d

They selected a black color theme and unfortunately this causes the close button on their legend which is open be default (and some other interface elements) to be near invisible. We are concerned that this may have led to some unnecessary user frustration with the app.

I’m not sure what type of change could be made to the template to resolve this or to warn the person configuring the app. But I wanted to give you the heads up about it.

"Active Tool" option not working

I have my active tool set to "None" and the "Measure" tool always pops up when the application is opened. If I set my active tool to "Layers" same thing happens, always starts with "Measure".

Custom Geocoder causes search box to disappear

When I try to use a custom geocode service, and configure the commonConfig.js according to the wiki instructions (custom geocode url, queryForOrg set to false), the search box disappears from the site and other elements such as layers, legend, no longer show up when selected.

Edit session issue on Opera or Chrome using iOS with iPhone and iPad.

When the edit map is activated and the application is running in the Google Chrome or Opera browser on Iphone and clicked on the "Editor" component restarts making it impossible to be able to add a new point.

image

In the picture you can see how to select the option of adding point, just let selected appear but the menu never disappears, making it impossible to add the point and edit the layer

Add other Geolocator

Is it possible to add another geolocator using single line geocode services?
thank you
Enrico

Add ability to share via Twitter

Under the share page, twitter is not available as a sharing option. The previous version of the basic viewer had options for twitter and facebook.

share_twitter

Add Function to use our ArcGIS server services

Yeah... I know... Probably been asked 1,000 time already but i'm gonna ask again.

First i'll say i am a total noob to javaScript, so please bear with me.

Is there anyway we can get a function or methodology to use our own hosted services in this template?

the folks here have a decent function that worked in the old viewer but i am having great issue getting it to work here. I took there code and and put it into an file called buildWebMap.js in the js folder of the source but i am unable to get to reference it in the defaults.js file

Please help.

   function createWebMap(){
        var webmap = {};
        webmap.item = {
        "title":"Local Data Layer",
        "snippet": "Local service",
        "extent": [[-139.4916, 10.7191],[-52.392, 59.5199]]
        };

        webmap.itemData = {
        "operationalLayers": [{
        "url": "http://<INTERNAL IP>/arcgis/rest/services/<SERVICE NAME>/MapServer",
        "visibility": true,
        "opacity": 0.75,
        "title": "Farms"
        }],
        "baseMap": {
        "baseMapLayers": [{
        "opacity": 1,
        "visibility": true,
        "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
        },{
        "isReference": true,
        "opacity": 1,
        "visibility": true,
        "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
        }],
        "title": "World_Terrain_Base"
        },
        "version": "1.1"
        };

        return webmap;
        }

Feature Labels

I have feature labeling setup for my web map. Is it possible to get the labels to show up in my hosted template? They do show up in the template on ArcGIS.com.

Thank you.

Require is not defined error on chrome

I am working with a customer who use this template, and use a webmap from portal. We are getting unexpected token illegal and require is not defined error in google chrome, but everything is working fine in IE. Any idea to why this is happenning in chrome? Thank you.

4

Service basemaps on legend

Hello:
First of all, congrats for the template, is just great!
I have a problem with the template, If I use the Esri hosted version it works fine, but if I download it and try to host in our server I have a problem with the legend. In this case the legend show the base map services and text, points, lines and areas items...
I really don't see how can I disable this.
Thanks.
github

URL parameter "find" not using custom geocoder

I have configured a custom geocoder in my app but when I use URL parameter to locate an address it is still using ESRI geocoder. When I search an address using search box in the app, it uses our custom geocoder.

Just a general question about this ESRI viewer

I see that there are two viewers, this ESRI viewer and an older basic-viewer-template-master. I've got this ESRI viewer to work in IE and Chrome but I've got problems with the other viewer in IE. Before doing some more trouble shooting for the basic-viewer-template-master can you tell me the advantages/disadvantages to using this ESRI viewer? Other than I can get it to work!

Scrollbar inside edit session.

When the edit window is created does not occupy the entire space of the component, which makes it difficult to Navigation

image

image

Print tool not pulling in custom URL

was having an issue with the print tool. I had changed the url for the print task in both the commonConfig.js and in the default.js and it was still using the arcgisonline print service.

ended up adding a custom print var under _addPrint

 _addPrint: function (tool, toolbar, panelClass) {
            //Add the print widget to the toolbar. TODO: test custom layouts. 
            var deferred = new Deferred(),
                legendNode = null,
                print = null;
            var customPrintURL = "my print service" //added to overwrite arcgisonline
...
print = new Print({
                            map: this.map,
                            id: "printButton",
                            templates: templates,
                            url: customPrintURL
                        }
... and so on an so forth...

base map gallery

First of all: very nice work!
we downloaded the app and tried to configure the basemap gallery, setting our basemaps group but only the arcgis basemaps compare..

We tried to set parameters in the main.js
in particular the function
"_addBasemapGallery"var basemap = new BasemapGallery({
id: "....", ..(we tried with our group name or our group ID)

and in the function
"_getBasemapGroup"

            basemapGroup = {
                "owner": "XXXXl", 
                "title": "Arpa Piemonte Geoportal Basemap",
                "id": "36d72c18fcf04e96bab3b73ef0e09a13"
            };

but nothing change. Any help is appreciated.
thank you
Enrico

add a button in the toolbar

Hi, sorry for the novice question:
we would like to add a new button in the toolbar that open a simple link to a download file (for example an external csv or zip file).
If the toolbar customization is complex we could use any other point on the viewer...
are there samples to do this kind of customizations? Any help is appreciated.
Thank you
Enrico & Manu

My experience with this template and a private ArcGIS online map

I just want to say that using this template in Internet Explorer 10 with an un-shared ArcGIS Online map was not working for me. After sharing the map to the public the template would work in IE 10. Using the template in Chrome I'd get a "log-in" dialog to view the un-shared map.
Is this the way it is suppose to work? Does this older Basic Viewer Template only work with public shared maps?

Swich frames

Hello everyone

I would like to know if it is simple to change the position of the float tool's window from the right to the left (as far as the toolbar also).

Best regards
Ezequias Rocha

Configure Layout

The read me mentions the map supports different layout options. Can you point me in the direction of how this is configured?

Thanks in advance...

bad link in README

"For addtional customization options view the wiki"

right now this is pointing at the repo for the legacy viewer. we should create an equivalent wiki for this repo and move @jsomerville's article there.

Edit on iPhone 5 or 5S or size of the screen similar

In the mobile version of the basic display is difficult to create a new point on the map as to select the type of item, the popup window does not close and can not locate the point on the map.

When you use an Iphone 5 and 5s error is more evident as the size of the screen is smaller, when devices like Samsung s5 are used, it is possible to do the editing, but it would better if this window once you selected point to report, this window will disappear.

img_9252

Popup "Next Feature" arrow not displayed.

If I query a spot on the map that contains two or more features the popup the window will say (1 of #) but the little arrows to toggle between the different popups is gone. It still works if I click on where they used to be but any new user will wonder where to click to toggle the data. This worked yesterday. Today the "Next Feature" toggle arrows are gone.

How to config maxAllowableOffset of layers for search?

How to config maxAllowableOffset of layers for search, or where the code i can update? When i update the code in function _createWebMapItemSources of SearchSources.js as follows:
source.featureLayer = new FeatureLayer(url, { outFields: outFields, maxAllowableOffset: 0.01 });
It does't work!

Editor on mobile UI not working well

Editing features on mobile with the viewer template UI needs to be changed to be more user friendly. It's not designed for small screens.

Either the template needs to handle this or the editing widget needs to use a more responsive design.

cc @driskull

Searches and Overall Functionality

Kelly,

This is probably a core issue with AGOL but I figured I would pose the question(s) anyways.

  • Is it possible to setup a search within an AGOL webmap, that could use multiple fields?

For example a layer named parcels where 3 fields could be specified (Address,Parcel,Owner)?

The searching seems nice but very limited as it is expected for the user to go in and pick which field they want to search. Additionally there is currently not a way to provide an alias for the search. Therefore however the layer is named in the webmap is how it will appear to the end user. This also seems like an enhancement opportunity, by allowing the person configuring the app to give an alias for the search/query they have configured.

  • Moreover, the print functionality has no configurable attributes. If we wanted to use our own print service with our own templates, is there a way to configure that?

I really like the look and feel of the template but I am not sure I could use this in a production environment if my users are expected to know which field to search. Most of our users expect to input their in Search in one location and the application be configured to know what they are looking for. Any thoughts or suggestions would be greatly appreciated. Please keep up the great work, look forward to any enhancements that are coming.

Reordering Widgets

Is it possible to reorder the widgets in this template? If not, could you give me some guidance as to what would be required code wise to implement this?

Date attribute subtracts a day???

When I import an ESRI shapefile with a DATE attribute the table and popup's in ArcGIS Online oddly subtract one day from all my dates. My organizational map is built in this viewer so I haven't tried an another to see if it's a symptom of the viewer or ArcGIS Online in general. NOTICE: I can subsequently export the data from ArcGIS Online to my desktop and when I open the attribute table in my Desktop ArcGIS the date is fine. I'm guessing it's something to do with ArcGIS Online and how it reads dates? I can forward you a copy of my dataset if you want to see for yourself.

Geocoder

Bug in CreateGeocoder.js breaks viewer in Firefox and Chrome when sharinghost is switched to a portal site.

Share Tool - current map extent

In a scenario where a webmap contains a locally hosted (non ArcGIS.com) map service that is in a different projected coordinate system, the Basic Viewer Share tool does not update the URL (in Map Link or Embed Map) to include the map extent. (even though the box for "Share current map extent" is checked)

While troubleshooting the issue, I created a locally hosted map service that is in Web Mercator Auxiliary Sphere (and a corresponding webmap in ArcGIS.com). In this scenario the Share Tool generates the URL correctly, and allows the Basic Viewer to correctly zoom to the specified map extent when the map is shared.

I'm missing something, how to define a different basemap, or rest server?

Maybe I misunderstood what the viewer was supposed to do for me. I'm looking for a viewer I can use that will allow me to specify an alternative arcgis server and basemap. It would be especially cool if it would find the layers on the rest server as well.

A bonus feature would be an input line to enter a location that could be geocoded by a default geocoder or an alternate one.

I also need it to work behind https. The browser complains about http access to

http://tmservices1.esri.com/arcgis/rest/info?f=json

Interface Feedback

First of all, I want to let you know that this template is awesome. You guys have finally put out a template that has all of the functionality my users request (layer control, search, bookmarks, printing), so thanks for that!

That being said, I've noticed a few issues when I watch my users using the app:

  • Not all buttons in the top-left have hover text in IE 9
  • Missing scroll bar on legend. Mouse wheel works, but very difficult because the wheel also navigates between boxes and zooms the map
  • When "Feature Search" is enabled there isn't any visual feedback as to what the user is search. For example they'll type in a town name, but the search will be on RR Crossing Number.
  • The printing feature is really nice, but there needs to be more visual indication that the map is generating the layout. Changing the text from Print to Printing is a good start, but maybe it needs to be greyed out more, or add more text such as "Generating printout - please wait"
  • When a user checked "Add Legend to Layout", it wasn't added to the printout PDF in the end.

I'll update this as more users give me feedback.

You can see the template in action on the maps on our homepage http://rail.vermont.gov.

Thanks,
~Stephen

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.