esri / embed-template Goto Github PK

Source code for the embed application used by ArcGIS Online to embed maps.

License: Apache License 2.0

JavaScript 86.87% CSS 10.34% HTML 2.79%

arcgis-online web-application javascript portal embed-template configurable-apps

embed-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: embed-template

Source code for the embed application used by ArcGIS Online to embed maps and Minimalist template.

Details on the options supported by the embed application can be found in the New Options for Embedding Maps blog post.

Instructions

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

New to Github? Get started here.

Deploying

To deploy this application, download the template from Portal/ArcGIS Online and unzip it.
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>/build/index.html
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"

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.

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.

Requirements

Text or HTML editor.
A little background with JavaScript.
Experience with the ArcGIS JavaScript API would help.

Resources

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.

embed-template's People

Contributors

Stargazers

Watchers

Forkers

jgravois cartologic ckutter eq4010 isabella232

embed-template's Issues

Roadmap for Embeded-template for 4.x ?

Hi there,

We are leveraging this code as part of our enterprise GIS - we like that is is open, and we have a "app builder" for knowledge workers that couples these configurable capabilities with required header and footer, bilingualism capabilities, and WCAG 2.0/508 for the organization. Is there a roadmap for this to be updated to use 4.x of the JSAPI?

Search does not Search correct attribute field

The Search in Feature Layer does not search the attribute field specified in the webmap.

New URL parameters no longer working

What happened to all the new embedding url options documented here http://blogs.esri.com/esri/arcgis/2015/02/19/new-options-for-embedding-maps/

In particular the "find=xxxxxx" this was hugely useful and we just rolled out lots of sites that integrate with backoffice systems using the webmap feature service search option, and passing in a field value such as an identifier using the find parameter to display a map of a specific asset..

As far as I can see that option is no longer in the code or in ArcGIS online and there are no other templates that support this.

Search Does not work against layers from ArcGIS Server version < 10.3

The search tool does not seem to work against feature layers in any ArcGIS server versions other than 10.3. even at 10.3 it only works against services with SupportsPagination = true which depends on the underlying database.

Throws:
Error: Pagination is not supported.

This may be a problem with the underlying search widget, as the ArcGIS Online viewer also errors like this now. It would be good if you could still search even with more limited functionality.

where to add proxy rules?

I added my proxy URL in the default.js but I do not know where to add the code for the actual rules. I am wondering which file as it is not obvious to me looking at the help link & based on my experience adding proxies to several other app templates (several story map types & WAB) . Some templates have rules in index.html and some have it in a config.js type file--is there a standard way/rule to figure it out for this type of app? thx

adjust content panel width?

I have PDFs I want to show as my popup, but the default content panel width is not wide enough to show my documents. I saw in the CSS width values for the panel, but the panel has not changed width when I modified the 'width values in the following CSS elements (below). I am sure I am missing something. This is likely the only thing I need to modify to get my app where I can use it-- only reason I downloaded as I could not find the ability to change panel size on AGOL.

.content-pane-left {
width: 0;
max-width: 600px;
height: 100%;
margin: 0;
border: none;
overflow: hidden !important;
-webkit-transition: width 250ms ease;
-moz-transition: width 250ms ease;
-o-transition: width 250ms ease;
-ms-transition: width 250ms ease;
transition: width 250ms ease;
}

.app-loading .content-pane-left {
width: 600px;
}

.drawer-open .content-pane-left {
width: 600px;
overflow: auto;
overflow-x: hidden;
border-right: none;
}

Enhancement: add parameter in the configuration to hide "Edited by.."

Hello,
I received some customer feedback on the minimalist application template to have the option to remove the Edited by display in the Info window (from the pop-up). The customer does not have the ability to download and re-host a custom copy of this application and they would prefer to have a parameter button to hide this display in the hosted version.
See image below for reference.
Thanks!
Julia

deleted

issue deleted

'center' doesn't accommodate other spatial references

All our mapping is in EPSG:27700, or British National Grid. the code will only cater for EPSG:4326, and assumes incoming coordinates are in that format. By simply defining esri/SpatialReference and changing line 494 of main.js to:

        //specify center and zoom if provided as url params 
        if (this.config.level) {
            options.zoom = this.config.level;
        }
        if (this.config.center) {
            var points = this.config.center.split(",");
            if (points && points.length === 2) {
                options.center = [parseFloat(points[0]), parseFloat(points[1])];
            }
            else if (points && points.length === 3) {
                options.center = new Point(parseFloat(points[0]), parseFloat(points[1]), new SpatialReference({ wkid: parseInt(points[2]) }));
            }
        }