Calcite Maps - Styler

Styler is a new ArcGIS configurable application that can be used to easily create, style and share modern 2D and 3D map apps. Using simple styler parameters you can customize everything from the title, menus and text, to the overall color, theme and layout. The app is hosted on ArcGIS Online and GitHub so you can 1) style maps on-the-fly just by adding URL parameters or 2) if you have an existing web map or web scene, you can style (more advanced) apps step-by-step by configuring them with the new Styler template. Once styled, share your app at any time just by sharing the URL - no programming required.

Styler is built with the new ArcGIS API for JavaScript v4, Calcite Maps and Bootstrap. The application is fully responsive and supports many features of the new JavaScript v4 API such as loading 2D web maps and 3D web scenes, displaying image and vector tile basemaps, showing legend and layers, positioning widgets on the view, and searching and finding places. The app can be accessed in ArcGIS Online and ArcGIS Enterprise or downloaded and hosted locally.

How to style and share a map

1. Open the default 2D map or 3D scene and zoom to or search for a place. e.g. "New York City"

https://esri.github.io/calcite-maps-styler-template/index.html?webmap=default
https://esri.github.io/calcite-maps-styler-template/index.html?webscene=default

2. Click the Main Menu > Share, add URL style parameters and hit Enter to style your map. e.g.

https://esri.github.io/calcite-maps-styler-template/index.html?webmap=default
&title=New York City at Night
&bgcolor=dark-blue
&basemap=streets-night-vector
&lat=40.72461
&lon=-73.99893
&zoom=12

3. Now copy and paste the URL to share your map with others.

Examples

Example 1: Create a 2D map to find parks in New York

https://esri.github.io/calcite-maps-styler-template/index.html?webmap=default
  &title=Explore New York
  &abouttext=Click + hold on the map to find interesting places
  &lat=40.71862
  &lon=-73.99343
  &zoom=13
  &basemap=streets-navigation-vector
  &activepanel=about
  &places=parks

Example 2: Load an existing webmap and style with colors

https://esri.github.io/calcite-maps-styler-template/index.html?webmap=742e3546ff1e4e0bba3360ae5004d0e1
  &bgcolor=dark-blue
  &opacity=.75
  &theme=custom
  &layout=bottom-medium
  &menubookmarks=true
  &aboutsummary=true
  &activepanel=bookmarks

Example 3: Create a 3D to search for a city and manually position widgets

https://esri.github.io/calcite-maps-styler-template/index.html?webscene=default
  &title=Big Bear Lake, California
  &subtitle=A great vacation getaway
  &abouttext=Come explore the mountains in SoCal!
  &bgcolor=rgb(140, 94, 42)
  &theme=light
  &zoomin=bottom-left
  &home=hide
  &navtoggle=bottom-left
  &compass=bottom-left
  &search=Big Bear,CA
  &heading=174
  &tilt=80
  &scale=14739

Example 4: Load an existing scene and style the layout and theme

https://esri.github.io/calcite-maps-styler-template/index.html?webscene=128ba9498cca447ab6ec356b84fee879
  &title=Airflow%20Globe
  &subtitle=Air Traffic Routes
  &bgcolor=transparent
  &theme=dark
  &widgettheme=dark
  &layout=top-small
  &widgetslayout=top-right
  &panelslayout=left
  &lat=50.21064
  &lon=15.07372
  &zoom=2
  &activepanel=about
  &aboutdescription=true
  &nextbasemap=satellite

Features

What can you configure?

• Title/subtitle
• Menus and panels
• About text
• Search
• Widgets and location
• App layout
• App styles and colors
• Map start-up location

What mapping operations can you perform?

• Load web maps and web scenes
• Search for locations and places
• Find places e.g. Parks, Restaurants, Gas Stations…
• Browse bookmarks and slides
• Display legend and layers
• Change basemaps
• Zoom to your location or home
• View coordinates, zoom level, scale, tilt, rotation
• Share your current map view with others

Style Parameters

Here are the parameters you can configure in a URL or in a JSON file.

JSON Example

{
  "webmap": "e1653fe614c04b6aa4efba5ba7b56d05",
  "webscene": "",

  "title": "",
  "subtitle": "",
  "abouttext": "",
  "aboutsummary": true,
  "aboutdescription": false,

  "theme": "dark",
  "themecustom": false,
  "bgcolor": "",
  "textcolor": "",
  "opacity": "1",
  "widgettheme": "",

  "layout": "top",
  "panelslayout": "",

  "menuabout": true,
  "menulegend": true,
  "menulayers": true,
  "menubasemaps": true,
  "menuslides": true,
  "menushare": true,
  "menutogglenav": true,

  "menustyledrawer": false,

  "dockposition": "top-right",

  "widgetslayout": "top-left",
  "zoom": "show",
  "home": "show",
  "compass": "show",
  "widgetnavtoggle": "show",
  "locate": "show",
  "track": "hide",
  "search": "hide",
  "basemaptoggle": "show",
  "nextbasemap": "streets",

  "mapcoords": true,
  
  "searchnav": true,

  "activepanel": "about",

  "findplaces": true,

  "lat": null,
  "lon": null,
  "x": null,
  "y": null,
  "wkid": null,
  "zoom": null,
  "scale": null,
  "rotation": null,
  "heading": null,
  "tilt": null,
  "altitude": null,

  "basemap": "",

  "showerrors": true
}

NOTE: See the Application Boilerplate for more app configuration options.

URL Example

The same JSON parameters can be passed to the application via URL.

WebMap
http://esri.github.io/calcite-maps-styler-template/index.html?webscene=e47ea1b15e284af5bc9b6be428de1a84&theme=light&bgcolor=dark-blue&opacity=.75

WebScene
http://esri.github.io/calcite-maps-styler-template/index.html?webscene=91b46c2b162c48dba264b2190e1dbcff&layout=bottom&activepanel=slides

Setup and Deployment

Please see the Application Boilerplate.

Resources

• Creating your first Web Map and Web Scene
• Writing your first application
• Make your first app
• Create apps from maps
• Add configurable parameters to templates
• Community
• ArcGIS for JavaScript API Resource Center
• ArcGIS Blog
• twitter@esri

Issues

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

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

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

[](Esri Tags: ArcGIS ArcGIS Online Web Application boilerplate template widget Bootstrap Calcite Calcite-Maps Esri JavaScript application) [](Esri Language: JavaScript)