Skip navigation
All Places > Applications Prototype Lab > Blog > Author: rcarmichael-esristaff


Posted by rcarmichael-esristaff Employee Nov 18, 2014


GeoJigsaw is a community driven geographic jigsaw puzzle.  If you are feeling creative you can create a puzzle and share it with the puzzle community.  If you are feeling competitive, try beating the high score on someone else's puzzle.

Click here to view the live application.(works best in Microsoft Internet Explorer and Mozilla Firefox)

Click here to download the source code from ArcGIS Online.  A simpler version of this application is available on github here.

GeoJigsaw is a JavaScript-based web application inspired by a Silverlight application developed about two years ago called Puzzle Map.  Unlike a Map Quiz published geogame that uses Facebook, in this application we wanted to explore anonymous collaboration.  That is, anyone can anonymously create, share and play puzzles.


In the app developed two years ago, the puzzle design was static.  In this application we wanted to offer puzzles of varying difficulty and size so we needed to implement a technique of dynamic puzzle creation.  After a little research we discovered this example of a voronoi tessellation using D3.  D3's voronoi implementation and associated SVG-based visualization library are the basis of this game.

Unlike the D3 sample, our app did not use completely randomized points.  If a user created or selected an "impossible" puzzle then a 10 by 10 grid of points is created and nudged slightly before being turned into 100 piece voronoi diagram using D3.  This was only part of the puzzle (excuse the pun), each piece needed the addition of one or more tabs.  Tab addition is essential to give the game its recognizable jigsaw look. Through a process of iteration, tabs are appended to any side of sufficient length and reversed if an opposing tab exists.SVG Filterspuzzle1-300x278.png

The finishing touch to give the puzzle a realistic look is the application of an inner bevel using a SVG filter.  SVG filters are hardware accelerated in Internet Explorer and Mozilla Firefox but not in Google Chrome.  Unfortunately the Chrome's software rendering of SVG filters makes complex puzzles almost unplayable.  This may change in future releases of Chrome.


Puzzles designs, ratings and scores are stored in ArcGIS Online (AGOL) hosted services.  We intended the application and associated services to be accessed by non-AGOL users.  This meant that AGOL user credentials could not be used to restrict access to prevent unanticipated malicious activity.  As such, we used the security model discussed in the previous post, that is, app registration and an intermediate web proxy.

Libraries Used



  • Bootstrap by Twitter IncA useful and comprehensive UI framework.  This application leveraged a subset of bootstrap pertaining to buttons and input elements.




  • iQuery by jQuery Foundataion IncA JavaScript framework for DOM manipulation and a foundation for many other frameworks.



This project demonstrations that modern browsers are more than capable of impressive visualizations without the need of plugins such as Silverlight or Flex.  We also wanted to experiment with anonymous game play, time will tell if the lack of user identification is an incentive or disincentive to play.  Good luck!


Map Quiz

Posted by rcarmichael-esristaff Employee Nov 17, 2014


Map Quiz is fun JavaScript-based geo-game developed by the Applications Prototype Lab. The game tests your geographic knowledge with six randomly selected satellite images. Prove that you are a geo-genius at home, school or in your workplace!

Click here to access the live application.

Click here to download the source code.


This project is a port of an application initially developed as a Windows Store application.  The purpose of the application is to present a fun geography-focused game (or "geo-game") based on Esri technology.  The application is primarily based on Esri's ArcGIS API for JavaScript and is powered by ArcGIS Online (AGOL) hosted services for scoring and questions.  Originally the Windows Store based application used AGOL-based authentically, in the JavaScript edition we decided to use Facebook authentication in an effort to appeal to a large audience.

Why Facebook?

One of the motivations of gaming is the thrill of competition, whether personally or with others.  In order to identify users so that they could monitor their scores, or those of others, there needed to be some sort of authentication.  The obviously choice is AGOL.  AGOL is the perfect choice when collaboration is needed within the GIS community but a large percentage of the target audience of this application may not have AGOL credentials. Arguably, Facebook may not be completely ubiquitous but certainly common.  As such, we decided to use Facebook and the Facebook API to authenticate users.  To ease privacy concerns this application requests and displays only a small subset of profile information, specifically, a person's profile picture, last name and initial of first name.

Controlling Access to Hosted Services

The game's questions, answers and scores are stored in two ArcGIS Online hosted feature services.  Hosted services are easy to create and allow for powerful spatial queries.  However access to hosted service is either unrestricted, or confined to an organization or to users that belong to specific groups.  Because this game is intended for non-AGOL users, we needed a way of restricting access to the hosted services to just the Map Quiz web application.

This was achieved by registering the app on AGOL.  The resulting app id and secret were then used in a web proxy that granted exclusive access to the hosted services to only the Map Quiz web application.  The proxy and instructions how to implement it are here.


The spinning map on the landing page or the gradual zooming of each question is achieved using CSS3 animation and the animo JavaScript library (see above).  On modern browsers the animation effects are smooth and consistent.  With respect to the spinning map, map edges needed to be expanded outwards to avoid white patches appearing in the corners.  To avoid this we applied negative margins using a Pythagorean computation.  One disadvantage of the spinning map is that image seams are occasionally observed.

Silverlight vs. JavaScript

As a reformed Silverlight developer I have been pleasantly surprised with the performance and capabilities of JavaScript-based web applications.  To date, I have yet to encounter any Silverlight capability that could not be achieved with HTML5/CSS3.  The biggest issue has been the paradigm shift from Silverlight's large well-documented framework to the necessity of working with a half dozen lightly documented open source libraries.

Libraries Used

As mentioned above, this project is based on a few open source libraries, these libraries are listed and described below.

  • animo.js by Daniel RafteryThis is a small but powerful library that provides programmatic creation and management of CSS animations.



  • Bootstrap by Twitter IncA useful and comprehensive UI framework.  This application leveraged a subset of bootstrap pertaining to buttons and input elements.



  • jQuery by jQuery Foundation IncA JavaScript framework for DOM manipulation and a foundation for many other frameworks.


This  project was a fun and enjoyable exercise and we hope the reader is equally entertained by this application.  We showed that geo-games can be easily created with Esri's JavaScript framework and cloud services together with common libraries like jQuery, bootstrap and Facebook.


Map Lens

Posted by rcarmichael-esristaff Employee Nov 13, 2014


Map Lens is a sample JavaScript-based web application that demonstrates lensing or perhaps a better description is "draggable map insets".  Lensing offers many benefits over traditional swiping which is commonly used to horizontally transition between two web maps, for example, before and after a hurricane imagery.  In comparison, lensing offers the user an unlimited number of rectangular map overlays, for example, one lens per Esri basemap as shown above.

Click here for the live application.

The source code is available on agol and github.

Lensing is achieved with the ArcGIS API for JavaScript and leverages jQuery and jQueryUI, specifically the draggable and resizeable methods.  The biggest challenge developing this sample was the handling (or suppressing) of the various mouse and navigation events.

Map lensing is not without its disadvantages.  Maps embedded in each lens cannot contain dynamic content, maps ideally should only contain tiled map or image service.  This is a performance consideration due to the number of navigation events invoked during lens interaction.


The source code is available here.


The landsat program recently celebrated its 40th birthday. Since the launch of the first satellite in 1972 the program has amassed more than 3,000,000 images.


The USGS has published this archive as a single ArcGIS Image Service called LandsatLook. The prototype described in this posting uses this service in an HTML5 web mapping application.


While the map view is perfect to identify an area of interest, it is not so useful for sorting through hundreds or thousands of overlapping images. This prototypes uses a control developed by LobsterPot called the PivotViewer to present a sortable collection of imagery. Using the map and pivotviewer together, the presenter in the video above was able to quickly find and download a recent cloud-free image of London.Contributed by Richie C.


This post discusses the release of a sample utility called Geometric Network Configuration Manager.  In some instances when it is necessary to temporarily remove a geometric network, this tool can recreate the geometric network from a backed definition file.

The add-in can be downloaded from here.

The source code is available here or here on github.

Configuration Manager has a very long lineage.  More than a decade ago the Prototype Lab published Geodatabase Designer for documenting geodatabases and exchanging schema.  Designer is now obsolete but fortunately much of its capabilities are now incorporated into ArcMap or other tools such as ArcGIS Diagrammer and XRay for ArcCatalog.

However the one feature from Designer that has yet to be replicated is the ability to save and restore geometric networks.  This useful if loading large amounts data or performing a schema change like switching a feature class from a simple edge to a complex edge.PrerequisitesLibraries Used
The following section will walkthrough the steps required to backup geometric network, remove it and then restore it.  The use case for this workflow could be for bulk data loading or transferring a geometric network from a test server to a production server.Walkthrough

Following the successful installation of the add-in.  Display the Geometric Network Tools toolbar and click the first button to launch the main dialog.  Drag and drop a geometric network into the configuration manager window.Capture3-300x203.png

The complete definition of the geometric network will be loaded into the dialog.  The four tabs below the ribbon make it is possible to review and, in some cases, modify classes, weights and connectivity rules.Capture5-300x180.png

The geometric network definition is current stored in memory and should really be saved to a file so that it can backed-up or restored at a later time.  Click the save or Save As button to export the definition to a file with a esriGeoNet extension.Capture6-300x180.png

Recreating a geometric network is just a matter of loading an esriGeoNet file and clicking Export.  The application will prompt the user for the name and location of the exported geometric network.  If the geometric network already exists, it will be overwritten.Known Issues:

  • The dialog that appears when the Export button is click may be hidden by the Configuration Manager window.  Either minimize or move the window to the side to continue with the export operation.

  • Add and removing of network classes and weights is currently not supported.

Church in San Miguel de Allende

This project was brought to life to bring attention to Mexico’s world-class attractions and friendly people.  What started off as a “story map” soon become a “story atlas” as the author continued to add more and more content.  The author is publishing the story maps to educate and encourage future travelers to Mexico.  The following story maps consist of between 1 to 5 thematically related maps.

Whether you are interested in outstanding pre-Hispanic historical landmarks, love to explore fascinating caves, research vibrant Mexican indigenous cultures, or are just a casual traveler who feels like tasting tequila or margarita, the Traveler’s Atlas of Mexico might help you to learn more about the country and its tourist attractions, as well as plan your itinerary.  This atlas might come in handy while you are already there or before you next visit looking for worthwhile attractions.  The atlas consists of over 30 thematic maps depicting Mexico’s geography, population, and primarily, tourist attractions.  The majority of the attractions are precisely located allowing you to explorer these locations at both small and large scales.

Other than indicating where there is the highest density of "must see” attractions, the atlas's maps show where extra caution should be exercised.  Crime analysis represented by the most severe crime of murder is also presented.  The analysis concludes that even though Mexico is not crime free, there are states with murder rates comparable to the safest European countries.

Hope you enjoyed the atlas as much as I enjoyed creating it and hope that you are inspired to visit this amazing nation.

Contributed by Witold F.

9/27/2013 -  Updated for 10.2.  Links to add-in and source code.Leap motion is a hand and finger sensing peripheral for Macs and PCs.  This video demonstrates the integration of the Leap Motion Controller with the ArcGIS Desktop application called ArcGlobe.  The controller is used as a virtual 3d mouse for navigating in the three dimensions.


To download the source code, click here.


The controller is surprisingly accurate, it is able to measure hand and finger displacement with millimeter accuracy at a rate of up to 120 updates per second.  Because this flying tool did not require any precision sketching we used the hand position and orientation information exclusively.  At approximately 30 times a second, the tool retrieves the spatial and angular displacement of the hand from the original starting position.  These differentials are used to update the observer's location and orientation in ArcGlobe.


One of the complexities that needed to be overcome is how to present a consistent navigational experience when the controller is communicating at a rate of 60-120 times a second and ArcGlobe is refreshing anywhere between 15 to 60 times a second.


The work presented here is based on an early developer unit from Leap Motion.  Consumer units are scheduled to ship in May 2013.  Please visit the Leap Motion website for more details.


The virtual city featured in the video is Philadelphia, PA.  For more information about this data please click here.Video filmed by Mark D.


A cartogram is a map where areas or lengths are distorted to represent thematic content such as population or GDP. This sample is a Silverlight-based web application that maps cartograms of international tourism, immigration and trade in dairy, meat and fruit.



The source code can be downloaded from here.


The data used in this application is derived from spreadsheets downloaded from Worldmapper. Cartograms of this data were generated using this geoprocessing tool developed by Tom Gross and published on ArcScripts. For data analysis and presentation we selected the Geood homolosine projection because it is equal-area and looks cool.


In my opinion, the most interesting aspect of this sample is its ability to animate between various cartograms. This is achieved using an inherited Graphics class that can interpolate geometry at a giving instance in time. This will be the subject of a future posting that will discuss this in more detail.


In summary, cartograms are useful technique for showing the distribution of thematic values particular when the data has a wide distribution. However cartograms are not suitable if the map reader is unfamiliar with the original shape of geometries.Contributed by Richie C.

This video demonstrates an application that can geotag text dropped from an email message, web browser or any textual document. The application is built using the new ArcGIS Runtime available at 10.1 and references a geotagging service from MetaCarta.

ArcGIS Runtime is a lightweight mapping framework for building connected or disconnected applications using Java, Qt or WPF. This framework is available now for qualifying participants in the ArcGIS 10.1 beta community.

For developers that are familiar ArcGIS API for Silverlight, the ArcGIS Runtime for WPF will be a seamless transition. However, unlike the Silverlight SDK, developers using the new runtime can access local mapping data and services via bundled map packages. This enables developers to deploy lightweight mapping applications that are connected or completely, disconnected or sometimes connected.More about ArcGIS Runtime:

“An exciting addition to ArcGIS at 10.1 will be ArcGIS Runtime, which lets developers create and deploy focused, stand-alone GIS applications for desktop users, who have been asking for a small, lightweight deployment that, in terms of capabilities, fits between ArcGIS Engine and the ArcGIS Web Mapping APIs. The new runtime is designed for both desktop and cloud development. It has a fast display and does not require installation; it can be run directly from a CD. The learning curve for the new runtime is expected to be very gentle for developers familiar with the web APIs.”from Rob Elkins @ The Road Ahead for ArcGIS.More about GeoTagger

“One of the six core functions of the MetaCarta GSRP is ‘GeoTag’ -- a production-level geographic entity resolving function that parses content, extracts geographic references, and resolves the geographic meaning intended by the author. This creates latitude and longitude coordinates and country code tags for places mentioned within documents.”from MetaCarta GSRP Core Functions – GeoTagOther links:



Contributed by Richie C.

On June 16, 2011, Microsoft released the Kinect for Windows SDK. This SDK allows windows developers to support motion with an Xbox 360 Kinect device. The Applications Prototype Lab at Esri has just completed a prototype using a Kinect to navigate in ArcGlobe.

To fly forward, the user can raise their right hand. The display will navigate in the direct the right hand is pointing. We call this “superman navigation”. If the left hand is elevated, the display will pivot around a central location on the globe surface. And lastly, if both hands are raised, the screen will zoom in or out as the hands are both together or apart.

To use the add-in you must have the following:

    1. Kinect for Xbox 360 sensor,


    1. Windows 7 (32 or 64bit),


    1. .NET Framework 4.0,


  1. Kinect for Windows SDK beta.

The add-in (with source code) is available here.Contributed by Richie C.


The Lab is proud to release Landsat Touch, a Silverlight based web application for browsing the newly published Landsat imagery. Download the source code from here:


Earlier this year Esri announced the publication of more than 8TB of Landsat imagery as image services on ArcGIS Online. These services can be consumed by any ArcGIS client, the ChangeMatters viewer or by any custom app using the REST API.


Landsat Touch is a custom web application developed using the ArcGIS API for Silverlight. The objective of this project was to create an easy to use application that could browse, compare and contrast Landsat content and provide support for touch devices (if available). The application is fully functional using a mouse on Windows or Mac computer, but the application is optimized for Windows 7 touch devices.


Multi-touch behavior is provided using the Multi-Touch Manipulation library from CodePlex which is partially derived from Microsoft’s Manipulation and Inertial sample.


The ability for this application to compare two layers of content is conceptually similar to ArcMap’s swipe layer tool. An important distinction with Landsat Touch is that users can explicitly define the “swiped” area by manipulating the size, orientation and location of windows. However the most exciting features demonstrated by this application is its ability to be multi-touch and multi-user. On large touch devices, say 40”+ diagonally, it is conceivable that two or more users can simultaneously add and manipulate Landsat windows.Contributed by Richie C.

The current method of adding map, image, geoprocessing (and other GIS services) to ArcGIS Online (AGOL) is to use the website directly. This online help article describes the procedure in more detail.500x256[1]


Using the website is Esri’s recommended approach to sharing your GIS services with the mapping community. If you or your organization would like to share a large number of services, using the website could be somewhat time consuming. In response to this, the Prototype Lab have developed and published a free add-in for ArcMap that simplifies the process of registering services on AGOL.


How to Install?

    1. Download the zip file associated with the ArcGIS Online Service Publisher Add-in code gallery contribution
    2. Unzip the download and double click on file with the esriAddIn file extension.(note: the zip file also contains the complete source code)
    3. Click “Install Add-In”.

How to Uninstall?

    1. In ArcMap, click Customize > Add-In Manager,
    2. Select the “ArcGIS Online Service Publisher” add-in and click “Delete this Add-In”.

How to Use?

    1. Start ArcMap,
    2. Click Customize > Toolbars > ArcGIS Online Service Publisher to display the publisher toolbar,
    3. Click the only button on the toolbar to display the AGOL publisher window,
    4. If the Catalog dockable window is not displayed click Windows > Catalog,
    5. In the upper portion of the Catalog Window select “GIS Servers” to reveal a list of your existing ArcGIS Server connections,
    6. Assuming you have a connection to your organization’s ArcGIS Server and that you would like to register its services on AGOL, drag and drop the connection onto the publisher window.
    7. As soon as the service connection shortcut is dropped on the window, the publisher will spend a few seconds examining available services.
    8. When the loading is complete, click the hide button to return to the main dialog,
    9. In the main dialog you can browse all GIS services from the dropped connection, view service details and uncheck services that you do not want to register with AGOL.
    10. Before the services can be registered you must log into ArcGIS Online.  Click “Log In” to display the AGOL Sign In window, enter your Esri global account credentials and then click Sign In.
    11. When connected, you can modify the default settings such as the target folder (if any) and the permissions. By default, registered services will be public, that is, discoverable by everyone. Alternatively, you can make services private and/or discoverable to one or more AGOL groups. Click Publish to commence the AGOL registration process.
    12. During service registration on AGOL, a scrolling list of messages will appear as pictured below. When the registration is complete the progress bar will disappear and the Hide button will enable. Click the hide button to return to the main display.
    13. If your organization has other publically accessible Servers that you would like share with the mapping/GIS community, repeat the steps described above.
    14. Finally, to verify that the registration was successful, start a web browser and navigate to AGOL. Login to view the newly registered content under the My Contents tab as shown below.

3D Terrain Mapping in a Browser


Is it really possible to view 3D terrain in a browser? Yes, with the aid of Silverlight, Esri’s Silverlight SDK and Balder, an open source 3D graphics engine. The sample web application pictured above is running live here and the source code can be downloaded from here.

 How to use?


After the web application has loaded, pan and zoom to an area of interest and then click the “Switch to 3D View” button. The application will pause slightly as it downloads a new map image and the underlying elevation data. After the map has transformed to a 3D display you can use the left mouse button to tilt and/or pivot the extruded terrain. Click “Switch to 2D” to return to the original 2D map display. Try repeating the steps above for your favorite places around the world (land or sea)!


A quick method to zoom to a specific extent is to hold the shift key down while dragging with the left mouse button. This will render a red rectangle on the screen.  When the left mouse button is released the map will zoom to the extent defined by the rectangle.


To assist, here is a short video demonstration on YouTube.

 Where does the data come from?


The imagery, street and topography base maps are sourced directly from Esri’s ArcGIS Online portal for geospatial services, data, applications and communities.


Elevation data is sourced from SRTM, GTOPO30 and GEBCO bathymetry via a new service published yesterday. The service was developed as a custom Server Object Extension for ArcGIS Server.  For more information on this service and how it was implemented please visit this blog post.

 Contributed by Richie C.

Elevation Server Object Extension

A few years ago we published a sample Geoprocessing Service to create elevation profile charts on the server and send back a URL to the chart image.  This sample service has been very popular and some of the core components have been implemented in various production environments.  Some common requests have been to expand this functionality to return the elevation values so additional work could be done on the client applications, and the ability to easily use this functionality against users own elevation data sources.

In response to these many requests, we’ve just shared an updated version of this functionality as a 10.0 REST Server Object Extension (here) on the ArcObjects Resource Center Gallery.  The REST SOE is implemented in .NET and Java and includes samples for the various Web APIs and ArcGIS Explorer 1500.  In addition to the creation of profile charts on the server via the GetElevationProfile operator (now updated to better handle bathymetry), the Elevations SOE also exposes three new operators: GetElevationAtLonLat, GetElevations and GetElevaitonData. These new operators return elevation values to the client applications.

The Elevations SOE is simple to deploy and can be easily attached to any Map Service that contains a single band raster elevation layer by enabling the ‘Get Elevations’ capability when creating the Map Service.  The functionality can be inspected via the ‘Supported Extensions’ entry at the bottom of the Services Directory page of the Map Service.   Accessing the Elevations SOE functionality is done via these newly exposed REST URLs, and it will be up to each developer to properly call and make use of the results.  The provided samples (available here) make use of a public instance of the Elevations SOE.  This instance of the Elevations SOE is attached to a Map Service that includes a sample global elevation dataset that combines three data sources: SRTM, GTOPO30 and GEBCO bathymetry.Caveat: The Elevations SOE is just a sample implementation, and should NOT be used in production environments and/or mission critical situations.  This sample implementation doesn’t attempt to handle every possible scenario and there are still many times when this functionality needs to be customized and deployed in production environments by our professional services team.3/20/2013 - 10.1 Update!
An updated 10.1 version of the Elevations SOE can now be found in this group.  It is important to review the associated readme for details on breaking changes. users can request to become members of this group and share their apps and services based on the Elevations SOE.Contributed by John G.


In July, the Applications Prototype Lab published the Touch AddIn for ArcGIS, this AddIn allowed ArcGlobe users to navigate the globe with touch gestures like pan and pinch. That release was discussed here. One disadvantage of the July release was that users could not use tools like identify, selection or editing concurrently with the touch navigate tool.


Today’s release overcomes that limitation.  Now, touch navigation is always active irrespective of the current tool. This new capability is ideal for editing, for example, the user can position the globe with one hand whilst editing with a pen (or mouse) in the other hand.


Instructions on how to install and use the AddIn are available from the download page here.Contributed by Richie C.

Filter Blog

By date: By tag: