Esri / Esri/calcite-bootstrap

Map UI: Custom Panels (Absolute and Inline-Block)

Open
#70 1 comment 0 reactions 1 assignee Claimed by @TheBlueDog View on GitHub
enhancement map ui patterns
Dominant language
SCSS
Stars
49
Forks
27
PR merge metrics
No merged PRs in 30d

Description

We've got this new, super cool framework to help people build sites with maps, why not add a few more UI components that devs can use to build map apps?

One of the main UI components required to develop any map app is a panel or window area that shows information such as a legend, list of attributes, more tools with functionality (e.g. driving directions). Sometimes panels are also used to replaced the popup window.

These panels are often implemented to appear in different locations, both 1) over the map or 2) inside the map view. They are also controlled by some type of user interaction or invoked by another control e.g. button, tab...

Currently calcite-bootstrap doesn't have any such controls, therefore, I propose we extend the default framework to provide this very handy Map UI-specific component. We could probably steal from panel, modal or just use the grid system to make this all happen.

Requirements:
- Responsive
- Control size
- Set docking position
- Set absolute vs inline-block
- Nice transitions
- Minimize/Maximize/Close

NOTE: This functionality may be coupled with a button group or li for tab controls. I have some ideas...

Wireframes

Panel controlled from button (Over map, doesn't consume space)
![image](https://cloud.githubusercontent.com/assets/2539681/8702801/dd2b14ee-2ace-11e5-86b0-faa9181c7260.png)

Panel invoked from map click (Consumes map space)
![image](https://cloud.githubusercontent.com/assets/2539681/8702871/202a9684-2acf-11e5-9258-9fc6ca70a3b6.png)

Here are some examples of how others implement this:

[Basic Viewer](http://edn.maps.arcgis.com/apps/OnePane/basicviewer/index.html?appid=996edd88c7bd47ed910c28f4b60bb478)
![image](https://cloud.githubusercontent.com/assets/2539681/8702957/aae8034c-2acf-11e5-9b9a-8784f73bce35.png)

[Simple Viewer](http://edn.maps.arcgis.com/apps/Viewer/index.html?appid=f7a0342b36d247529c3fcb99ad02cf5c)
![image](https://cloud.githubusercontent.com/assets/2539681/8702982/d0b31c4c-2acf-11e5-8abd-f1b53e28c95f.png)

[Public Information](http://edn.maps.arcgis.com/apps/PublicInformation/index.html?appid=df3ec1216d644718a3ddc80baaa5f9da)
![image](https://cloud.githubusercontent.com/assets/2539681/8703013/f3b79768-2acf-11e5-91e0-5d30e86bd120.png)

[WAB](http://edn.maps.arcgis.com/apps/webappviewer/index.html?id=0e5c033f83df46eeb2244ffcd04ef455)
![image](https://cloud.githubusercontent.com/assets/2539681/8703045/13c68a96-2ad0-11e5-9e5d-efb263db14db.png)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.