Giter Club home page Giter Club logo

esri / impact-summary-map-template-js Goto Github PK

View Code? Open in Web Editor NEW
25.0 25.0 20.0 5.77 MB

This interactive map highlights who and what has been impacted by this incident and shows the effects of the disaster, its location, and the potential impact it has caused to the infrastructure, businesses, population, and households in and around area of the disaster.

Home Page: http://esri.github.io/impact-summary-map-template-js/

License: Apache License 2.0

JavaScript 85.65% CSS 12.34% HTML 2.01%
arcgis-online arcgis-api javascript disaster web-application

impact-summary-map-template-js's Introduction

impact-summary-map-template-js

App

This interactive map highlights an area and shows a summary of data related to its location. The data presented in the boxes, at the bottom of the map, can be any integer data allowing you to answer new questions about locations that you cannot answer with maps alone.

For instance, in the web map you could enrich your polygon with demographics, landscape, infrastructure, and other variables using Enrich Layer or analyze your own data with Aggregate Points. Then you can use this template to show your analysis with a simple web mapping application.

View it live

The template can be configured using the following options:

  • Map: Choose the web map to use in your application.
  • Responsive: A side drawer is shown when its size can be accommodated. The responsive drawer can be toggled on or off by the user and allows the application to be embedded into blogs and websites.
  • Navigation: Home and Locate buttons add ease of map navigation.
  • Content: Summarize integer data by choosing a FeatureService layer containing the fields. A layer containing multiple features and has a renderer defined allows for selecting the features by the renderer values. An interactive dashboard provides ability to categorize fields in up to 4 group panels and page through the fields.
  • Summary: Briefly describe your application in the "Area" panel.
  • Search: Enable Searching for addresses and places.
  • Share: Share this application through Twitter, Facebook, Google+ or generate HTML for embedding in a blog or website.
  • Basemap: Enable toggling between two Esri basemaps.
  • Layers: Toggle visibility of layers.
  • Legend: Display a legend.
  • About: Display information about the application. The dialog can also be set to open on startup.

Instructions

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

New to Github? Get started here.

Deploying

  1. To deploy this application, download the template from Portal/ArcGIS Online and unzip it.
  2. 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>/index.html
  3. 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": "https://" + “<your organization name>.maps.arcgis.com
  • Portal Example where arcgis is the name of the Web Adaptor: "sharinghost": "https://" + "webadaptor.domain.com/arcgis"
  1. 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 "https://js.arcgis.com/3.35" and replace this portion of the reference with the url to your local install.
  • For example: "https://webadaptor.domain.com/arcgis/jsapi/jsapi" where arcgis is the name of your Web Adaptor.
  1. Copy a map or group ID from Portal/ArcGIS Online and replace the default web map ID in the application’s index.html page. 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.

Data Layer Requirements

The template requires a FeatureLayer with numeric attributes to show the data in the block panel over the map.

Configuring The Template

This template has an application builder built into it. If you're using this template via ArcGIS.com, you can take advantage of this builder while logged into ArcGIS. If you are the owner of the application via the appid parameter, you will see an option to enter the builder mode and start configuring the template.

If you are not using ArcGIS Online applications, you can configure this template using the defaults.js in the config folder. To configure the data layer, enter the FeatureLayer ID into the "summaryLayer":"id" property. You will need to know the ID of this layer. The ID of the layer can be seen in the webmap JSON response or by logging the FeatureLayer object to the console.

Once you have the layer with the data configured, you can start entering which attributes you would like to show by editing the "summaryAttributes" property in the defaults.js.

You can specify 1-4 main variables and each can have 0-many sub-variables that will be shown when the main variable is clicked. For the main variable, you can optionally link to a source for the data. Each variable can have a label for it as well.

Layer Example

"summaryLayer": {
    "id": "THE_ID_OF_MY_LAYER"
},

Attributes example

"summaryAttributes": [{
    "attribute": "MY_MAIN_VARIABLE",
    "label": "My Variable",
    "dataSourceUrl": "http://mydata.com/",
    "children": [{
        "attribute": "MY_RELATED_VARIABLE 1",
        "label": "My Related Variable 1"
    }, {
        "attribute": "MY_RELATED_VARIABLE 2",
        "label": "My Related Variable 2"
    }]
}]

New to Github? Get started here.

Requirements

  • Notepad or HTML editor
  • A little background with Javascript
  • Experience with the ArcGIS Javascript API would help.

Webfonts

This application uses a custom webfont created on Fontello. If you're hosting this application on your own server, make sure that it's configured to host the webfont files with the correct mime types. Some servers require a mime type set for these files to be able to serve them correctly. See the following URLs for more information. There is a zip archive of the webfont with it's fontello config in the "resources" folder in this repository.

Resources

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Anyone and everyone is welcome to contribute. :)

Licensing

Copyright 2012 Esri

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.

impact-summary-map-template-js's People

Contributors

ctdisastermanagement avatar driskull avatar joalvarez avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

impact-summary-map-template-js's Issues

Issue viewing app if you are logged into another org

I have created an app using the template and shared it publicly. This works great for anonymous uses and members of my org but if a user is logged into another org and trys accessing the app they get an error saying they do not have access.

I suspect this is a result of the check it does to decide if it gives access to builder mode.

Can this be fixed please?

ISM colors rendering changed when selected

But then they are changing color of the last selected group. So colors of the lines start to not match the legend.

Patrick Huls | Technical Evangelist
Esri | 380 New York St. | Redlands CA 92373
T 909.793.2853 x6118 | M 909.253.9560
[email protected] | esri.com
LinkedIn: Patrick Huls | Twitter:@TechEvangeli5t | GeoNet: PHuls-esristaff

On Sep 24, 2014, at 1:59 PM, Matt Driscoll [email protected] wrote:

The lines are just getting selected

Matt Driscoll | Web Developer
Esri | 380 New York Street | Redlands, CA 92373 | USA
T 909 793 2853 x3587 | [email protected] | esri.com

From: Patrick Huls [email protected]
Date: Wednesday, September 24, 2014 at 12:16 PM
To: Paul Doherty [email protected], Matt Driscoll [email protected]
Subject: ISM Going Nuts

Were there any updates to the ISM that would affect symbology? Whenever I click a symbol type in my list all of the colors are switching on the map. Check it out, the colors keep switching around.

http://telecomrc.maps.arcgis.com/home/item.html?id=e859a61ecbf64f768d342e5dd7691d00

Patrick Huls | Technical Evangelist
Esri | 380 New York St. | Redlands, CA 92373 | USA
T 909.793.2853 x6118 | M 909.253.9560 | [email protected] | esri.com
LinkedIn: Patrick Huls | Twitter: @TechEvangeli5t| GeoNet: PHuls-esristaff

Popup showing for layer when other features clicked.

Yeah, it’s a bug that the popup for that layer is showing since the popup is being replaced by the blocks at the bottom. No popups for that layer should be showing.

-Matt

Matt Driscoll | Web Developer
Esri | 380 New York Street | Redlands, CA 92373 | USA
T 909 793 2853 x3587 | [email protected] | esri.com

From: Ian Wittenmyer [email protected]
Date: Friday, December 5, 2014 at 10:44 AM
To: Scott Whittington [email protected], Sajit Thomas [email protected], Matt Driscoll [email protected]
Cc: Kelly Hutchins [email protected]
Subject: RE: Question about expected behavior with Pop-Ups in Impact summary App

I believe the expected behavior for the summary layer is to update the data in the stats boxes at the bottom of the app when a feature is selected and indicate which classification it falls within on the about tab, the app is essentially over riding the default popup behavior.

It’s likely a bug that the polygon popup is accessible when the point intersecting point is clicked, because the app probably isn’t listening for the polygon to be selected via this workflow. In this screenshot below you can see two selected polygons, the data in the stats boxes is coming from the selected polygon at the bottom of the data set.

Matt, can you verify the expected behavior?

e9f891aa-7cb0-11e4-853b-6ba0214a0609

Selected Features

Hi @CTDisasterManagement

I'm not seeing all features being selected in both examples:

Some are selected in this one.
screen shot 2014-06-20 at 11 09 11 am

None are selected in this one.
screen shot 2014-06-20 at 11 09 43 am

appid=6871cacae08848aea61a44ae48afc661&webmap=99c4beff9b9642d4b6d0fd07e15b32bc

Also, why is the selected border color now blue again? Didnt we have a black border for the dark theme and a white border for the light?

'Cancel' button saves the changes in Data Browser widget.

In AGOL Data Browser widget, currently Cancel also saves the changes.

Since we only have Cancel button on Home page of Data Browser, if User makes any changes in the Cart (top right), there is no way to save those changes. We need a way to have Apply button on home screen to save changes.

_9168 on the feature service id

This is a great piece of work! I got it running but I still don't understand the _9168 reference at the end of the summary layer/feature service? I have never seen that in AGOL.
"summaryLayer":{
"id": "XXXXXXXXXXXXXXXXXX_9168"

Thanks for sharing this work. My goal is to get it running for my Org, then if there is uptake with the idea may extend and contribute with my developers.

James Ashton

This is a test

This is a test to see how quickly we are notified of "issues" during our meeting.

Map Note legends

image

image

When I use map notes in the Impact Summary map, it provides a legend that does not represent what it is on the map.

Web map: http://bit.ly/1myQ1Qn
App ID: d278e781c48c42a19ee211db666800fc
Map Note: http://www.arcgis.com/home/item.html?id=d94d52ca31104c50bf4c56101e67513b (this was made in another web map using the "Save Layer" function from a map note).

I will hide the legend in the web map for now (it is a public facing map) but please test and see if you can replicate.

This may be an ArcGIS Online issue not specific to this application.

Add builder setting to switch between light and dark theme

In order to work well with the basemap of the application, a light and dark theme for the blocks are necessary.

There would need to be an option when configuring the application to switch between these.

These styles should replace the different color blocks.

See screenshots below:

3
4
5
6

Mask everything but the selected feature

In order to make more apparent which feature is selected, we would like a mask to be applied. the mask should either be dark or light depending on the theme.

Also, remove the slash on selected feature

Screenshots are below

3
4
5
6

Question related to displaying Rendered Area info.

Hi @driskull, we just wanted to confirm few scenarios related to Application settings-

  • As discussed on call, we will hide the renderer info from the left panel if User switch off the ‘Rendered Area’ option.
  • If the visibility of ‘Rendered Area’ is switched off, 'Entire Area' should also be turned off as it is part of Renderer.
  • On mouse hover on the left panel, if a User selects off, it will switch off all the renderer information from left panel.

image

Thanks!

Data Requirements? Non-enriched sources allowed?

Hello,

I'm looking to utilize the impact summary for a slightly different purpose - to give interactive asset statistics for our rail lines.

For example, if a user clicked on a rail line the information boxes would show statistics such as number of bridges, crossings, or culverts. I've created a new feature service containing numeric fields but the application won't let me select it as the source.

  1. What are the requirements for the data source?
    • What type of numeric fields are accepted? Double? Short? Long? Float?
    • Or does the app just look at specific column names?
    • What version of ArcServer is required?
    • Does it have to be a feature service, a map service, or a hosted feature service?
    • Are there are other requirements not mentioned?
  2. Can this tool be modified to allow polylines?

Thanks,
~Stephen

Unable to save the enriched layer in webmap

@driskull

To save the newly created Enrich Layer in web map:

  1. We need to add newly created Enriched Layer in operational layer array.
  2. Convert the entire web map itemData object into string and then fire the update item query.

But we found that the itemData object obtained from web map breaks while converting it into string.
If this approach doesn't work we have to create the itemData object(for operational layers and base map) manually but we think this is not the correct approach.

webmapjson

Your inputs will really help us.

Thanks!

Need ability to choose what variables to sum

I need a way to show the median income for an entire area without the app summing the total median income across 5 different zones. Perhaps add an ability to choose the statistic used for the "entire area" stats. Any variable that provides an average or median value will be incorrectly summed for the entire area.

impactmap_sum

Use Data Browser to select variables for geoenrichment

Hi @CTDisasterManagement Here is a sample of the data browser widget. We are going to use this to select variables for enrichment.

Once we have a design completed, we can use this. No action at this time.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Data Browser</title>
    <style>
        html,
        body,
        .app,
        .map {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: 'Segoe UI';
            font-size: 13px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body class="claro">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css" />
    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
        var dataBrowser;
        require([
            "esri/dijit/geoenrichment/DataBrowser",
            "dojo/on",
            "dojo/domReady!"
        ], function (
            DataBrowser,
            on
        ) {
            dataBrowser = new DataBrowser({
                okButton: 'ok',
                backButton: 'back', //Back button text. Can be set to -null- which should hide the button.
                cancelButton: 'cancel', //Cancel button text. Can be set to -null- which should hide the button.
                countryBox: true, //Show/hide country dropdowm
                selection: ["KeyUSFacts.TOTPOP_CY", "KeyUSFacts.TOTHH_CY"], //Array of currently selected variables
                countryID: "US"
            }, "dataBrowser");
            dataBrowser.startup();
            on(dataBrowser, 'ok', function (evt) {
                var selection = dataBrowser.selection;
                console.log(selection);

            });
            on(dataBrowser, 'back', function (evt) {
                var selection = dataBrowser.selection;
                console.log(selection);
            });
            on(dataBrowser, 'cancel', function (evt) {
                var selection = dataBrowser.selection;
                console.log(selection);
            });
        });
    </script>
    <div id="dataBrowser"></div>
</body>
</html>

Selection on load is not correct

App: http://www.arcgis.com/apps/ImpactSummary/index.html?appid=2f7a9bfdef4d4af491ea4debcce48d84

Web Map: 2ec37d41bced4284b30a8471f613d7a1

The app is configured using the Ascending setting...

image

Yet - the default feature highlighted is the Bald Fire (2nd from bottom) - I would expect that it would be the top most layer.

image

Also - what field is it using for sorting - it does not appear to be alphabetical?

This is a live map being used for disaster response - so you may want to make a copy and reproduce on your own.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.