Use a map as a selector and display results on the side
This template propose a 2 steps dynamic view. First you propose a map with clickable points or shapes.
- Global information are displayed on the side.
- Then, the user clic on the map, it then open a drawer with specific information relative to the selection.
- Finally, if the user wants to know more about this selection, a second drawer expend to take almost all the screen width.
This template is the best solution when you desire to display a lot of information and that just can’t fit in the default tooltip ! N.B.: grey areas help the user to come back to the map quickly if they want to change their selection
<div class="ods-box donotcopy-specific"
ng-init="donotcopy = { 'simulaterefineonclick' : false}">
<div class="map-drawer-container"
ng-class="{
'map-drawer-container--active': donotcopy.simulaterefineonclick,
'map-drawer-container--active-full': drawer.status}"
ng-init="drawer = {'status':false}">
<div class="map-drawer-container__map">
<div class="map-drawer-container__backdrop"
ng-click="donotcopy.simulaterefineonclick = undefined;
drawer.status = false"
ng-class="{'map-drawer-container__backdrop--active': donotcopy.simulaterefineonclick }">
</div>
<h1>
Map
</h1>
<div class="ods-button"
ng-click="donotcopy.simulaterefineonclick = true">Refine-on-click</div>
</div>
<div class="map-drawer-container__info">
<h2>
General info here
</h2>
</div>
<div class="map-drawer-container__drawer map-drawer-container__drawer__partial">
<div class="map-drawer-container__drawer__close"
ng-click="donotcopy.simulaterefineonclick = undefined;
drawer.status = false">
<i class="fa fa-times"></i>
</div>
<h2>
Specific info here
</h2>
<div class="ods-button"
ng-click="drawer.status = !drawer.status">
Expend / See more
</div>
</div>
<div class="map-drawer-container__drawer map-drawer-container__drawer__full">
<h2>
More info here
</h2>
</div>
</div>
</div>
/* TEMPLATE */
:root {
--drawer-width: 270px;
--map-width: calc(100% - var(--drawer-width));
--backdrop-width-when-modal-active: 75px;
--drawer-background-color: white;
}
.map-drawer-container {
display: flex;
position: relative;
overflow: hidden;
}
.map-drawer-container__map {
position:relative;
width: var(--map-width);
}
.map-drawer-container__info {
width: var(--drawer-width);
}
/* BACKDROP (black screen when modal active) */
.map-drawer-container__backdrop {
visibility: hidden;
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
z-index: 9;
background-color: #000;
cursor: default;
-webkit-transition: visibility .5s,opacity .5s;
transition: visibility .5s,opacity .5s;
}
.map-drawer-container__backdrop--active {
visibility: visible;
opacity: .45; /* make a more or less darker backdrop, 1:totally dark, 0:totally transparent (invisibile) */
}
.map-drawer-container__drawer {
position: absolute;
top: 0;
bottom: 0;
background-color: var(--drawer-background-color);
transition: 0.3s;
}
.map-drawer-container__drawer__partial {
right: calc(-1 * var(--drawer-width));
width: var(--drawer-width);
z-index: 11;
}
.map-drawer-container__drawer__full {
right: calc(-1 * var(--map-width));
width: calc(var(--map-width) - var(--backdrop-width-when-modal-active));
z-index: 10;
}
.map-drawer-container__drawer__close {
position: absolute;
top: 0px;
right: 8px;
font-size: 1.5em;
}
/* active state partial drawer */
.map-drawer-container--active .map-drawer-container__drawer__partial {
right: 0;
}
/* active state full drawer */
.map-drawer-container--active-full .map-drawer-container__drawer__full {
right: var(--drawer-width);
}
/* DO NOT COPY */
.donotcopy-specific .map-drawer-container {
height: 600px;
text-align: center;
}
.donotcopy-specific .map-drawer-container__info,
.donotcopy-specific .map-drawer-container__drawer__partial,
.donotcopy-specific .map-drawer-container__drawer__full {
border: 4px solid;
padding: 50px;
}
.donotcopy-specific .map-drawer-container__map {
background-color: lightblue;
}
.donotcopy-specific .map-drawer-container__info {
background-color: lightgray;
}
.donotcopy-specific .map-drawer-container__drawer__partial {
background-color: lightgreen;
}
.donotcopy-specific .map-drawer-container__drawer__full {
background-color: lightpink;
}
.donotcopy-specific h1, .donotcopy-specific h2 {
}