Skip to content

Tutorial

Kevin Dyke edited this page Jun 23, 2020 · 2 revisions

Tutorial

This page provides a step by step introduction to adding comparison layers and overlays to Sideby.

1. To start the application with a blank slate, append #builder to the url.

https://okstate-maps.github.io/sideby/#builder

2. Add your first layer by pressing the Add Comparison Layer button at the bottom of the screen.

Sideby builder screen

3. You'll now see a dialog box with a form to fill out (hooray).

Add Comparison Layer dialog

4. Let's add our first layer. Let's add a basemap from Esri. Visit this ArcGIS.com item page. Scroll to the bottom of the page and locate the URL section. Click the copy button.

Copy ArcGIS service URL

5. Paste the URL into the URL box. Notice that the Type of Layer field automatically selects Esri Tiled Map Layer. Many layer types will auto populate based on the URL, but not every one.

Paste URL into URL field

6. Next, fill out the display name field. This is the text that will be shown on the layer's selection tile as well as in the top right corner of the map. Keep it as short as possible. Twenty characters or less is ideal. Anything longer than that will be truncated, although a tooltip with the full display name will be shown when a user hovers over the tile. For this example, enter in World Imagery.

Enter a display name

7. (Optional) This step is pointing to a image to use as the background of the layer tile. While optional, it is highly recommended.

Clone this wiki locally