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.

Parameter	Description	Type	Example
webmap	Webmap ID for webmap	String	default, e1653fe614c04b6aa4efba5ba7b56d05
webscene	Webscene ID for webscene	String	default, bdc09d6c8ef8492783ebe2c572950931
Map
lat	Latitude to move the map to on start-up	Number	45
lon	Longitude to move the map to on start-up	Number	-120
x	X coordinate to move the map to on start-up	Number	-50000000
y	Y coordinate to move the map to on start-up	Number	50000000
wkid	Spatial reference value to support x/y values on start-up	Number	103500
zoom	Level of Detail (LOD) to zoom to on start-up	Number	1-20
scale	The scale the map displays on start-up. This prevails over zoom.	Number	1-100000000
rotation	Rotation of the 2D view on start-up	Number	0-360
tilt	Angle of the 3D view on start-up	Number	0-90
heading	Heading of the 3D view on start-up	Number	0-360
basemap	Basemap to use for the map on start-up. See ArcGIS JS API reference	String	streets, satellite, hybrid, topo, gray, dark-gray, oceans, national-geographic, terrain, osm, dark-gray-vector, gray-vector, streets-vector, streets-night-vector, streets-relief-vector, streets-navigation-vector
App
title	Title of the application	String	New York
subtitle	Subtitle of the application	String	A great place to visit
abouttext	Information about your application	String	Map of the Big Apple
aboutsummary	Includes item summary (snippet) in about text	Boolean	true
aboutdescription	Includes item description in about text	Boolean	false
theme	The base color theme used to style the app. "custom" applies your color to the entire app.	String	light, dark, custom
bgcolor	The base background color for navbar and panels. Use Calcite colors or RGB/RGBA colors.	String	light, dark, blue..., rgb(24,24,24), rgba(24,24,24,.5)
textcolor	The base text color for navbar and panels	String	light, dark
opacity	The opacity to use for navbar and panels	String	0-1
widgettheme	The base color for the widgets	String	light, dark
layout	The position of the navbar	String	top-small, top-medium, top-medium, bottom-small, bottom-medium, bottom-large
panelslayout	The position of the panels	String	left, right
Panels
widgetslayout	The position set for all widgets	String	top-left, top-right, bottom-left, bottom-right
menuabout	Show or hide the about menu and panel	Boolean	true, false
menulegend	Show or hide the legend menu and panel	Boolean	true, false
menulayers	Show or hide the layers menu and panel	Boolean	true, false
menubasemaps	Show or hide the basemaps menu and panel	Boolean	true, false
menuslides	Show or hide the slides menu and panel	Boolean	true, false
menubookmarks	Show or hide the bookmarks menu and panel	Boolean	true, false
menushare	Show or hide the share menu and panel	Boolean	true, false
menuprint	Show or hide the print menu and panel	Boolean	true, false
menutogglenav	Show or hide the toggle nav menu and panel	Boolean	true, false
menustyledrawer	Change the style of the main menu to partial or full height	Boolean	true, false
activepanel	Name of the panel to show when app loads	String	about, legend, basemaps, slides, layers,print,share
Widgets
zoomin	Add the zoom widget to the view	String	show, hide, top-left, top-right, bottom-left, bottom-right
home	Add the home widget the view	String	show, hide, top-left, top-right, bottom-left, bottom-right
locate	Add the locate widget to the view	String	show, hide, top-left, top-right, bottom-left, bottom-right
track	Add the track widget to the view	String	show, hide, top-left, top-right, bottom-left, bottom-right
search	Add the search widget to the view	String	show, hide, top-left, top-right, bottom-left, bottom-right
scalebar	Add the scalebar widget to the view	String	show, hide, top-left, top-right, bottom-left, bottom-right
legend	Add the legend to the view	String	show, hide, top-left, top-right, bottom-left, bottom-right
basemaptoggle	Add the basemaptoggle widget to the view	String	show, hide, top-left, top-right, bottom-left, bottom-right
nextbasemap	Set the next basemap for the basemaptoggle widget	String	streets, satellite, hybrid, topo, gray, dark-gray, oceans, national-geographic, terrain, osm, dark-gray-vector, gray-vector, streets-vector, streets-night-vector, streets-relief-vector, streets-navigation-vector
popup	Position to dock the popup. See ArcGIS JS API	String	top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
mapcoords	Show the map coordinates widget	Boolean	true,false
searchnav	Show the search widget in the navbar	Boolean	true, false
searchtext	Search for location	String	e.g. Los Angeles
findplaces	Enable long-tap/hold search for restaurants, parks, stores...	Boolean	true, false
places	Search for a category	String	cities, neighborhoods, restaurants, gas stations, stores, parks, hotels, arts and entertainment, travel, schools
showerrors	Display errors in a window when webmap or webscene have load failures	Boolean	true, false

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)