Code Monkey home page Code Monkey logo

compare-maps-template's Introduction

compare-maps-template

Compare Maps is a configurable application template used to compare multiple web maps.

View it live

July 2015 Release Updates

  • Auto Sync: Automatically sync maps to the first map. Disable this behavior by setting auto_sync to false in config/defaults.js
  • Search: Add a search box to each map by setting search to true in config/defaults.js

Features

  • Compare multiple web maps side by side.
  • Sync maps based on scale.
  • Display legend and description

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": location.protocol + "//" + “<your organization name>.maps.arcgis.com
  • Portal Example where arcgis is the name of the Web Adaptor: "sharinghost": location.protocol + "//" + "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 "//js.arcgis.com/3.13" and replace this portion of the reference with the url to your local install.
  • For example: "//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 default.js file found in the config folder. 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.

Requirements

  • Notepad or HTML editor
  • Some background with HTML, CSS and JavaScript
  • Experience with the ArcGIS API for JavaScript is helpful.

Resources

Issues

Found 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. Please see our guidelines for contributing.

Licensing

Copyright 2017 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.

compare-maps-template's People

Contributors

jgravois avatar kellyhutchins avatar ssylvia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

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

compare-maps-template's Issues

Map picker search box appearance

(Using Safari 8.0.3 and Chrome 40.0.2214.111 on Mac OS 10.10.2)

Something seems to be wrong with the appearance of the search box in the configuration panel's map picker.

In Safari, there is no line around the area to define the search box, and when I enter text it is the same color as the background so is invisible. The text can be seen if I go back in to the search box and drag to select the invisible text. The functionality of the search bar doesn't seem to be affected.

Initial view:
screen shot 2015-02-13 at 7 39 16 am

After typing search text and executing search:
screen shot 2015-02-13 at 7 40 48 am

After selecting "invisible" text:
screen shot 2015-02-13 at 7 40 39 am

In Chrome, the text is visible, but the button to clear search text is missing. I can see the placeholder for this button if I tab over (blue box in screenshot below).
screen shot 2015-02-13 at 7 45 48 am

change color of map description

I have looked at all of the places in the main.css where I could think to change the color of the text in the side panel where the map description/legends are, but have no luck. I have everything else the way i want (black background, white text) but the description is still grey. Are there any further resources available for this app? thx

Add folder access to basemap picker

It would be great to have access to select a folder in my content. Sometimes I know exactly where a map is stored, but am not able to recall enough about the name, tags or title to find it via search.

To avoid fetching folders whenever the picker is loaded maybe the user could select My Folders and then have the list of folders load.

More documentation

Kelly,

For developers to follow your lead and customize this template further, it would really help to add more developer focused documentation to this template and others that you create. Right now- all info is more towards config than customize.

A quick walk-through through the logic/architecture of this template. Even thoughts such as - your take on using gulp would be beneficial. Any such developer oriented info would really help developers use this template as a jump-off point to a custom one.

Thanks
Subu

Anchor map title boxes when scrolling

When scrolling down in the side panel, the map title bar for the first map immediate scrolls up under the app description section (see first screenshot). This doesn't provide a good separation or indication that you are still looking at the first web map description.

screen shot 2014-12-11 at 11 15 17 am
screen shot 2014-12-11 at 11 15 30 am

I think having each map title bar anchor at the top, right under the app description section, would be an improvement. I'm envisioning the same way sections scroll by in iOS apps. As sections scroll by the title of the current section anchors at the top until a new title section gets to the top and that replaces the one above it.

no compare in live sample

i wanted to see how the compare worked but there is only one map in the live sample

  • when i download the code and add my 2 web maps, there are 3 panels that appear. There is a 'farmers market' webmap that is included but I do not have it listed in my web map list in index.html. where else are web maps referenced? I am not a developer so I appreciate better documentation and explanation with thees samples

Behavior for deselecting map

If I have a map selected and then go into the web map picker and click on that map again, nothing happens visually (it still appears selected). However, I noticed that the configuration panel then reports an additional map is currently displayed. When saving the configuration the clicked map then appears twice (see screenshot).

If I hold Command and click the map, then it is deselected and removed from the app configuration.

I'm using Safari 8.0 on Mac OS X 10.10.1.

screen shot 2014-12-11 at 10 38 09 am

proxy reference other than in defualt.js?

I added my proxy URL as with my other apps I have and I still get the box to input AGOL log in credentials and ones for my secure service. Other apps had me add proxy rules at the index.html (as with story maps) as well but there is no reference there, only to add the proxy URL in the defalt.js.
I looked at the 'adding proxy rules' section but its not clear to me where to which file I would add these additional lines of code....and which URL should be used for the private AGOL content. I am trying to add the rules in the index.html and having mixed success.
I have several different URLs in various apps I am trying-

arcgis.com/sharing/content,
myorg.maps.arcgis.com/sharing/rest/content/items

but neither seem to work. I can add a proxy rule for my URL for my secure REST endpoint to access that map service w/o login, but the AGOL content still requires login.
what am I missing? and how come there is not a single definitive URL to use to access secure AGOL content? Seems strange that each app type (story map, WAB, compare, maptools, etc) need a slightly different URL

Add panel layout options

It would be great to have a configuration option to choose between side-by-side or stacked layout of map panels. If your maps have a horizontal aspect ratio (e.g., the state of Tennessee or Maryland) the side-by-side layout is not ideal, especially with more than two maps.

If comparing different sized areas, it would be useful to be able to specify individual panel widths (or heights in stacked configuration). Preferably using percentages in the configuration panel or interactively using a handle on the panel separators.

I could also see a diagonal panel split working well for to maximize the space when comparing two square-shaped areas of interest, say for Colorado or Australia.

Add configuration option for width of side panel

Provide a way to configure the width of the side panel. If one or more of the web map titles are longer or if the map descriptions are long it is useful to expand the side panel so that the titles are more readable and/or more of the description appears without scrolling. Also if there are images in the description they can easily be chopped off due to the width of the side panel.

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.