Skip navigation
All Places > Applications Prototype Lab > Blog > 2014 > November
2014

tutorial.gif

Solar Eclipse Finder is a JavaScript-based web application that displays past and future solar eclipses that pass through a user defined location.  The source data is published as an AGOL hosted service with the paths of 905 solar eclipses from 1601 to 2200.  The eclipse paths were prepared by Michael Zeiler from data courtesy of Xavier Jubier.

The live application is available here.

Source code is available on agol and github.

Originally developed 2½ years ago as a Silverlight-based web application (see blog posting here), we wanted to confirm that the same performance and advanced symbology is achievable today with HTML5/JavaScript in modern browsers.

jQuery & Bootstrap

jQuery is a JavaScript framework for DOM manipulating.  It is important to note that jQuery is not a prerequisite for mapping apps using Esri's ArcGIS API for JavaScipt. It is however a prerequisite of many third party JavaScript libraries like Bootstrap, a popular user interface framework.  This application uses Bootstap's popover tooltips in the fly-out attribute window and its modal dialog during start-up.

D3


The tapered symbol used by eclipse shadow paths is achieved using a linear gradient fill.  Linear gradient fills are not supported by ArcGIS API for JavaScript.  However linear gradient fills are supported by SVG, the underlying technology used by Esri's JavaScript API for renderering vectors.  We used Mike Bostock's D3.js JavaScript library to insert and apply linear gradient fills directly to the map's embedded SVG node.

Conclusion


Updating this application was a two step process.  First the eclipse dataset was republished as an AGOL hosted feature service and, second, the app was rewritten in HTML/JS.  Both tasks were relatively effortless and only took a couple of days in total.

rcarmichael-esristaff

GeoJigsaw

Posted by rcarmichael-esristaff Employee Nov 18, 2014

puzzle.gif

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.

Voronois


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.

Security


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.

 

Conclusion


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!

rcarmichael-esristaff

Map Quiz

Posted by rcarmichael-esristaff Employee Nov 17, 2014

mapquiz.gif

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.

Introduction


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.

Spinning


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.

Conclusion

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.

rcarmichael-esristaff

Map Lens

Posted by rcarmichael-esristaff Employee Nov 13, 2014

lens.gif

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.

Filter Blog

By date: By tag: