Comparing the capabilities of Esri’s graphic visualization tools

First things first, what are we comparing? Esri has two dashboard tools -namely Web AppBuilder and Operations Dashboard-, and one business intelligence (BI) tool -namely Insights.

Before we delve into the abilities of each tool, what is the difference between Dashboards and BI tools?

  • Dashboards are a simple display of the most important information that achieves a specific business objective. Ideally designed for at-a-glance monitoring and decision making.
  • BI Tools allow you to explore your data and get quick visual data discovery by providing an interactive approach that enables dynamic analysis.

 

Operations Dashboard

Operations Dashboard and Web AppBuilder provide the same basic functionality to the user, but with a different look and feel. Operations Dashboard is perfect for a simple dashboard; however, Web AppBuilder takes the trophy with providing more functionality to improve the dashboard experience.

Ops Dashboard

What are the advantages and disadvantages of Operations Dashboard?

AdDisad-OpsDB

Web AppBuilder

Web AppBuilder can import external datasets that are not found in the map, can support statistics for big datasets, and most excitingly offers all the additional tools found in your mapping applications. These additional tools include (and are not limited to); Analysis, Directions, Edit, Filter, Geo Lookup, Oblique Viewer, Parcel Drafter, Query, Situational Awareness, and more.

Dashboard1

What are the advantages and disadvantages of Web AppBuilder?

AdvantagesWAB... vs Disadvantages

Insights

Insights offers users a map-centric BI tool that contains different graph visualizations to Esri’s dashboard tools. Insights is the evolution of the dashboard that enables rapid iteration and productivity, but it is important to note that it is not a replacement of the dashboard. Insights is a unique tool that allows the user to run spatial queries (spatial aggregation, buffer/ drive times, and density) and to find answers (How is it distributed? How is it related? What’s nearby?).

Insights-Screen-Shot-2.2-drag-and-drop-on-map-trendline

What are the advantages and disadvantages of Insights?

AdDisad-Insights

Below is a summary of the available functionalities, broken down into dashboard and BI Tools respectively.

1 - Copy

2 - Copy

Ultimately it is the user’s need that determines the tool that fits best. All that being said, Esri is constantly providing updates and new software versions that include many more capabilities to each tool.

FAQ

New Year, New User Types!

The latest version of ArcGIS Online comes with major changes. The most prominent one being the latest update to the named user licensing model.

A new and very flexible way to license identities in ArcGIS Online has been introduced. Where before we had only two types of users Lever 1 and Level 2 (viewer and content creator, respectively), we now have 5 different user types. These offer more flexibility and may save your company some money.

Below is a summary of the new user types which are  available now on ArcGIS Online and will be available  with a future release of ArcGIS Enterprise.

  • Viewer

                                     David2

The Viewer (previously known as Level 1) can only view items that have been shared by members of the organisation. Viewers do not have edit, create, share, and analysis capabilities.

So what apps can a viewer access? A viewer has access to the Essential Apps Bundle. Remember that access to these apps will be view only access.

A viewer typically views maps & apps to make better decisions and monitor performance.

  • Editor

Lerato.jpg

Editors can create, delete and edit data. They also have access to all the apps in the Essential Apps Bundle.

This user type makes sure that data is kept updated and ensures that the organisation has authoritative information.

  • Field Worker

Richard1

I am sure we are all excited about this new user type. Many of you have been asking for this option. The Field Worker has capabilities to edit, create, delete and update data in the field using apps that are in the Field App Bundle.

Field workers, doing real-time data collection, can connect from the field to the office thus improving efficiency and productivity.

  • Creator

Rajesh

Creators (previously Level 2) have create, edit, update, and delete rights using all the apps in the Essential Apps Bundle, Field Apps bundle, and the Office Apps Bundle.

This user type is typically the content creator for the organisation. Creators can share their maps and analysis through ready-to-use apps.

  • GIS Professional

Christie.jpg

The GIS professional is the super user. This user type has all the capabilities of the Creator type plus ArcGIS Pro (Basic, Standard or Advanced). This user has access to: Essential Apps Bundle, Field Apps Bundle, and the Office Apps Bundle, in addition to this they also have access to ArcGIS Pro. This type of user builds advanced maps and visualisations, performs advanced analysis and can share these results to the organisation.

All existing Level 1 users will automatically be moved over to Viewer and Level 2 users will get the Creator user type.

Pricing for the various user types will vary.

So, what are App Bundles?

Another new update at this version is App Bundles. This is a new way of grouping ArcGIS applications that are often used together. Typically, a field worker would only use Workforce for ArcGIS and Survey123 for a typical day’s work. The organisations administrator will then purchase the Field Worker User type which gives access to the apps in the Field App Bundle. This means this user will not have access to office applications like Operations Dashboard. See below for the list of all app bundles and the apps that are included in it.

appBundles

What a great way to kick off the year. If you would like to know more about user types and app bundles, please do not hesitate to contact the Esri South Africa office at +2711 238 6300

Happy Mapping. Wishing you a great 2019 ahead.

Survey123 – Progress / Increment bar

Let’s kick the year off with something special – A customized progress /  increment bar for Survey123!

For a recent survey that I designed I wanted to give the user visible feedback of a risk factor calculation. Have a look at the video below to see how striking the end result is:

Let’s break the Progress / Increment Bar down into it’s capabilities:

  1. A color ramp to visualize the score (similar to the score distress bar)
  2. A progress increment indicator (□□□□□□□□□□)
  3. Expand and contract the bar according to the score

How was this achieved? Let’s look at the components needed to make this work:

Color Ramp

The color ramp changes according to the score, which runs from 0 to 10 in this case. We could sit down and pretend to be graphic artists and create a color ramp from scratch, or we can use one of the handy websites which creates beautiful color ramps for us!

Let’s head to RGB Gradient Generator or any RGB gradient generator of your choosing.

Now choose your start color and your end color for your ramp (in my case green to red) and choose the number of steps required (in this case 11, which corresponds with our allowable score values):

ColorRamp.JPG

Next you need to choose a generated gradient and copy the gradient indexes and corresponding hex values to Notepad++ in order to create a CSV file which will act as a color value lookup which is based on the score calculated:

ColorRampCSV.JPG

Now we have a handy way to color the bar according to the score calculated. To retrieve the color for each score, we simply have to use the pulldata() function of Survey123:

${color} = pulldata('ColorLookup', 'hexvalue', 'colorvalue', string(int(${score})))

In order to use this hex color we need to use some html magic:

<font color="#',${color},'">

Progress Indicator

The progress indicator is actually a string of HTML Unicode characters (UTF-8).

Let’s go shop for a pair of Unicode characters to use for the progress bar at UTF-8 Geometric Shapes

You can play around with the various character options but in essence you need a pair of Unicode characters; one to show up as “filled” and colored in, and one that seems to be “empty”:

■■■■■■■□□□

I found it useful to add the character pair strings to a CSV file since it abstracts the solution:

ProgressBarStrings.JPG

In the CSV file I simply Copied & Pasted each character 10 times to make two strings that are each 10 characters long. Item 1 in the CSV then represents the filled in section of the progress bar (e.g. ■■■■■■■) and Item 2 represents the “empty” part of the progress bar (e.g □□□).

We now have two strings of 10 characters each and we can access them in our survey with the pulldata() function:

${barString} = pulldata('CharStringLookup', 'textvalue', 'item', '1')
${emptyString} = pulldata('CharStringLookup', 'textvalue', 'item', '2')

Expanding and Contracting the Bar

Now we can color our progress bar and we can visually differentiate between the “filled” in part and the “empty” part of the progress bar by using our Unicode character pair. All that is left is to cut our strings to size (according to the score e.g. 1/10) and combine and color it according to the color ramp already calculated.

Our score in the survey can run from 0 to 10 so the progress bar should mimic that by filling up from 0 to 10. We can achieve this by using the SubStr(<string>,<start>,<end>) function on each of our character strings. When the filled in part expands, the empty part should contract, so there is an inverse relation between their lengths.

Using two substring functions we can easily cut our two strings to size:

substr(${barString},0,${scorelength})
substr(${emptyString},0,${scoreinvertlength})

Now all we need to do is to set the color of the filled in section to our ramp color and then concatenate the strings together with the concat() function:

concat('<font color="#',${color},'">', 

substr(${barString},0,${scorelength}), '<font color="black">',

substr(${emptyString},0,${scoreinvertlength}),'<br>',string(${score}), ' / ' ,${scoremax})

The second font color setting colors the empty part of the progress bar in black for a nice contrast in colors.

As always, feel free to use and adapt as needed!

The source files for demonstration can be found here:  Zip file

 

Survey123 with a single attribute for repeating generic questions (instead of multiple attributes); and an auto-incremented list!

Example Requirement:

RiskAssessmentExcel

You are being tasked with creating a Disaster Risk Assessment form (as above) which requires the field worker to capture the risk factor associated with 14 Hazard Items:

  1. Avalanche
  2. Animal disease outbreak
  3. Drought
  4. Earthquake
  5. Epidemic
  6. Flood
  7. Hurricane
  8. Landslide
  9. Pandemic
  10. Tornado
  11. Tsunami
  12. Volcanic eruption
  13. Wildfire
  14. Winter storm

Each of these Hazard Items require the field worker to assess the risk factors of the hazard as follows:

  1. Affected Area (Very small=1, Small=2, Medium=3, Large=4, Very large=5)
  2. Probability (0% chance=1, 30% chance=2, 60% chance=3, 80% chance=4, 100% chance=5)
  3. Frequency (> 20 years = 1, 1 to 20 years = 2, Annually = 3, Monthly = 4, Weekly = 5)
  4. Predictability (100% Predictable = 1, Fairly Accurate to Predict = 2, 50/50 predictable = 3, Slightly Predictable = 4, Cannot Predict = 5)
  5. Magnitude (Low = 1, Low to Medium = 2, Medium = 3, Medium  to High = 4, High = 5)

A hazard score is calculated with the above risk factors as follow:

Score = Affected Area*0.5 + Probability + Predictability + Magnitude*1.5 + Frequency


Survey / Feature Class Design:

Having worked with Survey123 before we might be tempted to jump into it and simply create 14 questions, one for each Hazard Item listed in the requirement. The number of attributes quickly escalates however, since we also need to capture the associated Risk Factor for each Hazard Item – which results in a LOT of attributes! That doesn’t sound like a good design anymore, does it?

If we first designed this Feature Class in ArcGIS Pro we would probably design it simpler and lighter; perhaps a design like the one below, where each hazard item is not a separate attribute but a generic field which stores the Hazard Item descriptions:

FCRisk.JPG

That looks better, but how do we marry these two designs and also keep in mind the “limitations” of Survey123, seeing that Survey123 only allows one answer per “question”? An alternative would be to use a repeat section in the survey. A repeat section would give us the ability to add each Hazard Item as a (related) record whilst saving the Risk Factors in attributes.

Good, a Repeat Section it is… but how do we make it easy for the hapless field worker to capture 14 attributes and then still expect him/her to remember which hazards have been captured and which ones haven’t? It would be downright cruel to have the user choose the hazard item from a drop-down, like this (mistakes will happen!):

ice_video_20171213-115850(1)

Let us improve on this design.

It would be great if the field worker didn’t have to remember which hazard is next in the sequence, so if we can add an auto-incremented hazard list to the design it would be great! It would also be nice if the field worker could see some kind of progress as the survey is completed – for instance Hazard 5 of 14 captured.

Luckily Survey123 allows us to do all of these things. Look at the final design in action:

ice_video_20171213-160453

This solution comprises:

  • An auto-incremented Hazard Item (leaving no room for mistakes!)
  • An incremented counter showing the capturing progress (for example 1 of 14)
  • A clean database design that looks like this:SchemaS123
  • A happy field worker!

So how did we achieve this design?

In the repeat section of the survey, add a counter variable (count1) that we use for the increment:

calculate count1 count1 1
calculate counter Counter once(count(${count1}))

The count() function does a count of the number of repeats by simply counting all the count1 values. The once() function ensures that the count calculation only happens once, otherwise we will have an issue when the user traverses backwards through the list and the count() is recalculated.

Now, for the magic bit…

Create a CSV file with all the Hazard Items and their indexes in it. The file will look like this:

CSVFile

Now all we need is to hook up our incremental index (the ${Counter}) with the Hazard Item. This is done with the pulldata() function as follow, where HazardEntryLookup is our CSV file:

pulldata('HazardEntryLookup', 'hazard', 'hazardindex', string(${counter}))

Now, all that is left is to enable the 1 of 14, 2 of 14, etc functionality. This is done by specifying that the Repeat count should not exceed 14 (our number of hazard items). So setting the repeat_count option for the Repeat sorts that out nicely!

As always, here is the complete set of files used for this demonstration, feel free to use an adapt as necessary:

Source files

For my upcoming Blog I am going to show how to make an interactive progress / risk visualization bar in Survey123! Here is a sneak peek of the end result:

ice_video_20171214-172437

Leveraging data-as-a-service with the ArcGIS JavaScript API

Welcome to the information age! We are part of a lucky generation to be living in a time of great technological change. All around us, data and information about the world is being collected and collated, just waiting for someone to take advantage of it. Based on a recent demonstration we provided to a group of enthusiastic startups, this blog post looks at how to pull in some publicly available data via web services into a basic ArcGIS web app. We are going to use the Public transport data for emerging cities from wheresmytransport through a simple Restful web service.

We will build a basic web (but mobile-ready) app that locates the user and identifies the 10 nearest public transport stops and shows them on a map.

So, where do we begin? With the map of course!

1. Create a web app stub

Open a new project/page in your favourite web development IDE (I still just use notepad++) and create a basic framework for an app. We will pull in the ArcGIS JSAPI and related CSS, a simple HTML structure with some associated CSS classes for controlling how the app will look.



You wont see much when opening this, but here is a tip for how I view and debug my “mobile-ready” apps – open Chrome Developer tools (F12) and toggle the device toolbar. Dock the dev tools window to the right and choose an appropriate mobile device from the drop-down. You can now easily view your app and follow the console alongside.

2. Add a map control

Using the JSAPI that has been loaded, follow the basic steps for creating a WebMap from an ArcGIS Online web map ID, add it to a MapView and assign it to the dom node you just created called “map”. Place the following code inside a script tag in the document header.



If you are using the Chrome Developer tip I mentioned, you should see something like this.
Web App - Step 2

3. Add “find me” button
HTML5 provides a handy geolocation API for getting the user’s location based on the best available method on the device. Esri has packaged this method into a simple widget that makes it easy to add to a map. Note that in v4.x of the JSAPI you can now add items to the “ui” of the map using the “view.ui” properties. To add the widget, insert the following code into the main function that will load the widget, add it to the UI and set up a handler that zooms and centres the map to your coordinates.

TIP: don’t forget to add the new requires: “esri/widgets/Locate”,”esri/layers/GraphicsLayer”

And, then call the new function once the map has loaded (i.e. within the “view.then(function(){“ function).



Your output should look a little like this after clicking the new button:
Web App - Step 3

4. Get stops from wheresmytransport
First, I recommend going to check out wheresmytransport.com and read up on their cool data service that provides real-time access to consolidated public transport information in many major global cities (including Joburg and Cape Town). Use of their API is free if you sign up as a developer here: https://developer.whereismytransport.com/ – you will need to do this to get a client id and secret to run the app.
Now, we will add a new button that will call the service by adding the following code into your main function:

And add a dom node to host the new button to the HTML body:

Now that we have a button, let’s listen for it’s click event and then call the wheresmytransport service – by adding this code to the main function:

Now, before you can use the wheresmytransport service, you need to request a security token. Add this code into the function you just created.

You will notice that the successful callback runs a new function called “getStops(token)” to which it passes that new token. The getStops function looks like this.

This code only sends the request, now we need to handle the response by adding “then” and “catch” callbacks for the promise variable we created called “getLocalStops”. This code will process the results by creating a new Esri graphic and adding to the graphics layer with the specified symbology.



TIP: Remember to add the new requires “esri/symbols/SimpleMarkerSymbol”, “esri/Graphic” and “esri/geometry/Point”

Finally, for the eagle-eyed among you, there is a utility function called from within the code called “getWMTdata” that takes the url, token and payload which you can use generically for calls to those services.



That’s it. Run the app and after clicking both the “Locate Me” and the “Get Stops” button, your app should look a little like this:
Web App - Step 4

5. Take it further…
This is a basic example, but think about how you can take this app further, by adding capabilities such as:

  • Finding the nearest stop based on travel distance/time using the FindNearest method from ArcGIS
  • Display results back to the user in a table or list for easy viewing
  • Log requests made by users to be able to assess where the demand for the app is…
  • Many many more!!

If you would like to try out the sample code, you can download this example here. Let me know in the comments below if you want some more info/help!

Happy app-making

– Richard

Broadband in South Africa

Broadband in South Africa

Whether it is mobile or fixed broadband services, consumers are demanding cheaper and faster speeds. Consumers have become brand agnostic and have become data hungry.

How do you differentiate yourself from your customer? Better services, faster speeds and rapid deployment of broadband services. This requires huge capital expenditure and exploring unknown markets.

Esri South Africa have helped our customers in the rapid build and design of their networks using the ArcGIS Platform. Using mobile applications our customers can update, capture and report on their network. This has changed the way in which our clients operate; instead of using paper based maps, our clients are enabled to manage their network from the field. With the introduction of BYOD, it helps organizations reduce hardware expenses.

Our mobile applications have enabled our clients to engage directly with the client by means of integrating CRM’s and allows the rapid deployment of their sales force into the field.

Esri helps you answer the question of “where” and solve problems. You transform your telecommunication company provide better service via your network assurance team, plan and build team and sales team. Esri provides a complete system that allows you to integrate disparate data, access and update information from the office or the field, and maintain a real-time view of all operations. More than maps and applications, Esri gives you the location analytics you need to save time, lower costs, and satisfy customers.

fibre_editing

Modelling the holiday-based redistribution of South Africans in December

MAP SERIES

Over the coming months, I’m planning on developing a map series to showcase often overlooked aspects of Cartography and GIS. The idea is to explore topical subject matter to create insightful and (hopefully) beautiful maps.

This is the first in the series.

OLYMPUS DIGITAL CAMERA

Every December hundreds of thousands of South African holiday-makers push pause on their lives and scatter across the country; making time to explore, relax and unwind.

I got to wondering if there would be a simple way of modelling this behaviour. Surely there must be some universal underlying factors that could be used to help explain where people go in December? I also knew I wanted to represent my data in a non-traditional way.

For the sake of simplicity, I limited my sights on South Africans moving within South Africa for the holiday season and eventually settled on four broad factors to consider:

  • F1 [-] Distribution of population during the rest of the year
  • F2 [+] Accessibility (using major roads as a proxy)
  • F3 [+] Distribution of holiday accommodation
  • F4 [+] Distribution of National Parks

There are obviously many more factors at play however these four seemed to interact spatially in a dynamic enough way across the country that I was happy to move forward with my investigation.

The density per factor was calculated per municipality, normalised across the country and combined into an equation that attempts to model the interaction between these factors as a linear function.

equation

In the formula, population density acts as a push factor – people will be moving away from areas of high population density towards areas with low population density. The availability of accommodation, how accessible the area is and the distribution of national parks all act as pull factors.

The amount that each factor contributes towards the final index is controlled with weights and the global difference within each variable is exaggerated by squaring it’s normalised value to highlight the most favourable areas more clearly.

The final index can be used to rank order each municipality based on the likelihood that it will be visited in December by people who do not live in that region.

These values were then used to generate the following cartogram:

dec_mapseries_cartogram_screenshot

  • You can explore the map right down to the municipal level
  • The shades of blue represent the percentage change in surface area relative to the region’s usual size. This is affected by the rank as well as the relative difference in the ranks surrounding the area.
  • National parks are included as well as major cities as you zoom in for context
  • The top 20 sites are highlighted with the concentrically banded points
  • Clicking anywhere on the map will return the overall rank for that region

Cartograms have been around since the 1800s. They provide us with a new perspective to our world by taking a thematic variable and typically substituting it for the area of the land that it represents.

The creation of cartograms comes with several challenges as regions must be scaled and still fit together. A recent (2004) and popular method of generating contiguous cartograms is the Gastner-Newman Method. This method is faster, conceptually simpler to understand and produces easily readable cartograms. The algorithm guarantees topology and general shape preservation (albeit with some distortion). This method allows its users to choose their own balance between good density equalization and low distortion of map regions, making it flexible for a wide variety of applications.

Now I need YOUR help.

Taking this one step further, I’ve configured a crowd sourcing web application which will allow users to post about their holiday destinations in a collaborative manner.

You will be able to access this from anywhere on any device and see information contributed by all users of the application. My hope with this is that this information will further support the outcome of the formula and cartogram produced in this exercise.

destinationwhere

Please share far and wide and happy holidays!

Mathematically Verifying South African ID Numbers with Survey123

This blog post describes how South African ID numbers can be verified mathematically in Survey123. South African ID numbers have the following format:

{YYMMDD}{G}{SSS}{C}{A}{Z}

YYMMDD : Date of birth.
G  : Gender. 0-4 Female; 5-9 Male.
SSS  : Sequence No. for DOB/G combination.
C  : Citizenship. 0 SA; 1 Other.
A  : Usually 8, or 9
Z  : Control digit

The most challenging part of verifying the ID number is the control digit which is calculated by using the Luhn algorithm – this will be the focus of this blog post.

The best way to tackle complex mathematical functions in Survey123 is to break it up into separate mathematical calculations and using calculated fields:

The check digit is the last digit of the SA ID number so it can be retrieved with the following function: substr(${idnr}, string-length(${idnr}) – 1, string-length(${idnr})) where ${idnr} refers to the captured ID number.

Once you have an understanding of the substr() function the rest of the calculations used to verify the ID number is pretty much straight forward.

The survey’s XLSForm file can be found here (and can be freely used): SA Id number

  1. Copy the file to your downloads folder
  2. Open Survey123 Connect
  3. Create a New Survey and base it on an existing file
  4. Choose the Excel file that you have downloaded
  5. Your survey will be generated

Notes:

  1. The SA ID Number does not indicate if a user was born in 19yy or 20yy so both options are catered for – with a logic test to see if the birth date is in the future (age not greater than zero)
  2. Race is no longer indicated in the SA ID Number

Make your own 3D web app

jsapiWe all know that ArcGIS comes with a very large number of out of the box apps that seemingly do just about everything! Surprisingly though, we often come across the problem of finding an app that “fits just right” with what you need to achieve. The solution to this is to build your own app using an API or Runtime. The beauty of the ArcGIS APIs and Runtimes is that they extend the platform – meaning you can leverage all the power of ArcGIS such as Server, map services, web maps, popups, geoprocessing, etc all in a front-end that suits your workflow, user needs and styling choices. This may seem daunting, but don’t be fooled, anyone can do it!

This post will take you through some basic steps to create your own custom web application using a 3D scene. We will use the ArcGIS JavaScript API 4.0 to make the app.

1. Getting started – setting up your environment

Like I said, this is really simple. There are only two things you need. Firstly, you will need an ArcGIS Online subscription to make a web scene that we will load into our custom app

Secondly, you will need is a JavaScript IDE (editor) such as Notepad++ or WebStorm (link).

And that’s it, we are ready to go!

2. Creating the web scene

Log in to your ArcGIS Online account and click the menu option entitled “Scene”. This is a familiar interface very similar to the “Map” tool that lets you other webmaps. Use this tool to create a web scene with your own data layers, popups and symbology. In my example, I have added the provinces of South Africa as a layer and extruded them to show some 3D.

blog1
Creating a web scene in ArcGIS Online

Make sure to save the scene when you are done and take note (copy into notepad) of the item id for the web scene. You can grab this from the address bar in your browser. My id is “0390e2ec01fa488a847d4e413f015cd0”.

blog2
Getting the web scene’s ID

Note that to make things easier, you can share your web scene publically. This will avoid your app needing to authenticate you when opening it (i.e. logging in). In future, you can add security to your app as required.

More info on how to create a web scene, go to this link.

3. Creating your web page structure

Open up a new, empty html file in your IDE of choice. We will first put in the basic structure of the HTML page to get us going (TIP: I have created myself a template that I can re-use as a starting point each time I want to create a new app – saving me the time of creating the structure). An HTML page consists of some mandatory sections:

  • HTML doctype declaration – so that a web browser knows that the page is an HTML file (and what version – we are using 5)
  • Head – this includes all necessary ‘meatadata’ for the web page including the styling and logic (javascript)
    • Title – be sure to set a readbale title that you will see on your browser tab
    • CSS – this is the styling file and its easiest to pull in the CDN hosted Esri stylesheet
    • Javascript libraries – this is the ‘core’ JS library that will enable all kinds of web mapping goodness, we will pull in the CDN hosted JSAPI from Esri (link)
    • Javascript – this is the logic of your won app, here will enter our code to load a scene view and any other logic we want from the page
  • Body – this is the HTML which provides the structure of the page using HTML tags (link)

Here is my basic skeleton template including the links to the CDN CSS and JavaScript libraries that make up the ArcGIS JavaScript API (v4.0):

<!DOCTYPE html>
<html>
<head>

<title>My First 3D Web App</title>

<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>

<script>
/* section for my custom code */

</script>

<body>
<!-- page layout will go here --> 

</body>
</html>

More info on creating HTML pages, go to this link.

4. Building the HTML page structure

Before we can add a map (or other elements) to the UI, we need to create the structure of the page itself. Now, there are many ways to skin this cat which I wont go into in this post, but I am going to use a couple of layers (“DIV”s in HTML parlance) to layout my page. This is where you can really start to have fun – since you are in full control of everything, you can choose layout, colours, fonts, graphics, etc to make you page look great!

Here is the HTML layout code that is inserted into the “body” section:

<div id="wrapper" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgb(200,200,200)">

  <div id="mapPanel" style="position: relative; float: left; width: 60%; height: 100%">
  </div>

  <div id="mapDescription" style="position: relative; float: left; width: 40%; height: 100%; background-color: rgb(220,220,220)">
    <p style="margin: 10px; font: normal 10pt verdana;">Welcome to my very first 3D web app! You can click around and navigate the scene.</p>
  </div>

</div>

5. Adding the JavaScript “Scene View”

Since v4.0 of the ArcGIS JavaScript API, Esri now uses a new pattern for adding maps to the view. This is done by first creating the map (which is a container) and then adding a view to that map.

Here is the code for loading my map which is inserted directly into the <script> section:

require([
  "esri/views/SceneView",
  "esri/WebScene",
  "dojo/domReady!"
], function(SceneView, WebScene) {

  var scene = new WebScene({
    portalItem: {
      id: "0390e2ec01fa488a847d4e413f015cd0" // replace with your web scene's ID
    }
  });

  var view = new SceneView({
    container: "mapPanel",
    map: scene
  });

});

Note that I have entered the Item ID from the web scene I created earlier as the reference. This means that the logic will now create a scene container, find the scene item by its id and load that into the scene as a view. Too easy!

More info on the ArcGIS JavaScript API, go to this link.

6. Revel in your mastery

And that’s it! You have created your first 3D web app. To view it, simply open the HTML page in your favourite browser (JSAPI v4.0 is supported in Chrome, Firefox, and IE 11).

Here is a screenshot of my first app:

blog3
My First 3D Web App!

Happy coding!

– Richard

ArcGIS Earth is here!

ArcGIS Earth Logo

Version 1 of ArcGIS Earth was officially released mid-January 2016. The application offers functionality to share data in a similar way that Google Earth does.

For Esri customers ArcGIS Earth offers additional value as it makes data viewing in realistic 3D and data sharing possible across the platform – from the desktop, mobile, server or custom developments, the same authoritative data can now be viewed in ArcGIS Earth.

Some advantages of ArcGIS Earth are:

1. Basemaps

ArcGIS Earth offers a choice of 10 global Basemaps ranging from street maps, to terrain and imagery at the click of a button. Simply set the Basemaps to suit the data that is displayed. This means you always have access to high quality, global data that is being constantly updated for you.

ArcGIS Earth screen shot

Multiple datasets from various online or offline sources can be viewed in context of a Basemaps of your choice.

 

2. Collaboration & Content

If you are an existing Esri client with a Portal (or ArcGIS Online) identity you have full access to your organization’s authoritative content in the form of map and feature services, which means you can do your work quicker and easier than before. Sharing data requires no conversion, saving you time and money.

3. Ownership & Security

With ArcGIS Earth you have the ability to share GIS content that is 100% secure in an existing ArcGIS Online or Portal environment.

  • The level of data access is controlled by your Portal identity. Users can only access data they have been granted access to.
  • When information is added to ArcGIS Earth it remains the property of organisation/person who published it. This is different from other software providers may keep data even after you have removed it.
  • It is not possible to extract or download data from ArcGIS Earth. You can share a view of your data without giving it away. This is great because you can rest assured that your company’s data is safe and secure while using the latest technology to do your work.

4. Save your last session

There are several setting that can be customized. Among them is the possibility to have the Start-up view to continue where you left off. This setting remembers your location, Basemaps and all the other layers that were added during your last session. This can save you time when starting to work each day!

5. Limitations

ArcGIS Earth is great as a free tool for realistic 3D data visualization and sharing data in collaboration with your colleagues and customers. As with all software, there are currently a few limitations:

  • The file based data formats are limited to shp and kmz/kml. If you wish to use data from other Esri sources it must be published to a map or feature service first.
  • Where the symbology of file based features can be changed and the popups are visible, this is not the case for feature and map services. It is not possible to change the symbology or transparency of service layers to view data in context of layers below. It is also not possible to label or set popups for a service layer.

In conclusion

ArcGIS Earth version 1 has many useful features and boasts unrivaled global Basemap content. It is a great way to share your data securely with anyone, any place, anytime. So, have a go! You can download it for free.