[GIS] Application Templates for ArcGIS Server

arcgis-javascript-apiarcgis-serverbootstrap-frameworkweb-mapping

Esri provide a lot of excellent template applications for us in conjunction with web maps.

These templates are specifically designed for using with your resources on ArcGIS Online as opposed to ArcGIS Server. (i.e. you supply a web map ID, as opposed to URLs to your GIS Services Directory).

In particular I found this awesome template, that ticks all the boxes for me:

Mobile support (e.g media queries, responsive design)
Share to social media
Nice looking layout
Built in Geocoder
etc. etc.

I have been looking at the code behind it, and was hoping I could reverse engineer it to work with my ArcGIS Server REST endpoints instead. However, does not look like an easy task (im new to Javascript) and believe I would spend more time trying to do this Vs building something from scratch.

Can anyone recommend some template applications to use as a starting point for developing an ArcGIS Javascript API app to use against ArcGIS for Server?

I have already put together the bones of my application in a basic dojo template, but its the stuff mentioned above that I need to also include in my web application.

This will then allow me to focus my development efforts on the actual Esri Javascript API logic, without needing to spend a lot of time having to do a 101 on other aspects of web development.

I understand there are a number of web frameworks out there (e.g Bootstrap) that might assist in some of this, but I was kind of hoping for something a bit more established and aimed at Esri Javascript API. However, would still be interested in answers that do leverage other web framework templates as a starting point.

Best Answer

I completely agree that the ESRI samples are now both out of date and misleading. I notice a few samples are updated to AMD but not many. The samples embedding of JavaScript in the HTML is bad practice that most new comers seem to follow. They are just samples to get across ideas, but many don't seem to realise this.

The Basic Map Viewer provided some very useful features for working with ArcGIS online and making a configurable viewer which fits in with ESRI's AGO framework. This is probably quite similar to the app you were looking at though. Also it's also not structured very well in terms of AMD.

For structuring your code in AMD take a look at odoe's AGSModular demo. It also demonstrates how to build Esri JS code in to a single js using r.js (I never got the hang of Dojo build). It's probably going to be quite a steep learning curve if you are new to JS.

I use the HTML5 boiler plate which helps with a number of cross browser issues. It also includes modernizer for feature detection.

For responsive design I haven't found anything out of the box for web maps that is useful.

Related Solutions

ArcGIS Server – Best Frameworks for Robust Application Implementation Using ArcGIS Server JS API

I would agree with Moyles that the samples are just samples and dojo boileplate is a great resource however at current snovers boilerplate isn't a viable solution. You have two different versions of dojo going on there. The current js api still uses the classic require syntax of dojo 1.6.1 and does not support AMD. I'm sure that a newer js api will be built on 1.7.x and since converting classic dojo.defined modules to AMD is mostly trivial I would choose that route.

If you're starting your project now then I would choose whatever server side framework you wanted to use (if it is necessary for your application. If its just a single page viewer with no server side requirements then don't over complicate things). It could be rails, php, asp, whatever. Follow the best practices for your framework/language.

Then since esri is built on dojo you are already loading a great js framework for creating large scale web applications. Structure your code so that the dojo's loader can load your widgets and modules with the dojo require syntax. Write dojo widgets and modules, use dijits and dojox tools when necessary ( http://dojotoolkit.org/documentation/tutorials/1.6/declare, http://dojotoolkit.org/documentation/tutorials/1.6/recipes/custom_widget/, http://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget, http://dojotoolkit.org/documentation/tutorials/1.6/templated, http://dojotoolkit.org/documentation/tutorials/1.6/cdn). Do not write inline js like the samples do. Create a build profile to optimize all your code when its time for production.

You have to keep your esri and custom code separate to a certain degree because they don't offer the source for compiling - it's already built and minified. The build tool doesn't like that so much.

EDIT

I built a grunt tool, esri_slurp to download the esri js api so you can use it as a package in your applications. This allows you to run the build and get a single file.

[GIS] ArcGIS Server Setting proxy.ashx with ArcGIS API for JavaScript gives Error 403

Have you created an application, in IIS manager, using the folder that the proxy is located? If the folder is say agsproxy then you would have

http://localhost/agsproxy/proxy.ashx?

In the javascript, you would have

esri.config.defaults.io.proxyUrl = "/agsproxy/proxy.ashx";

You may want to use CORS though now.. removing the need for proxy (better performance)

//add CORS servers
esri.config.defaults.io.corsEnabledServers.push("YOURTESTSERVER");
esri.config.defaults.io.corsEnabledServers.push("sampleserver1a.arcgisonline.com");
esri.config.defaults.io.corsEnabledServers.push("sampleserver6.arcgisonline.com");
esri.config.defaults.io.corsEnabledServers.push("tasks.arcgisonline.com");
esri.config.defaults.io.corsEnabledServers.push("server.arcgisonline.com");

Best Answer

Related Solutions

ArcGIS Server – Best Frameworks for Robust Application Implementation Using ArcGIS Server JS API

EDIT

[GIS] ArcGIS Server Setting proxy.ashx with ArcGIS API for JavaScript gives Error 403

Related Question