212 lines
4.3 KiB
SCSS
212 lines
4.3 KiB
SCSS
$marker_width: 40px;
|
|
|
|
$marker_icons: (
|
|
(ambulance, "\f0f9"),
|
|
(bicycle, "\f206"),
|
|
(book, "\f02d"),
|
|
(building, "\f0f7"),
|
|
(bus, "\f207"),
|
|
(car, "\f1b9"),
|
|
(hospital, "\f0f8"),
|
|
(house, "\f015"),
|
|
(motorcycle, "\f21c"),
|
|
(recycle, "\f1b8"),
|
|
(shower, "\f2cc"),
|
|
(subway, "\f239"),
|
|
(taxi, "\f1ba"),
|
|
(train, "\f238"),
|
|
(trash, "\f1f8"),
|
|
(truck, "\f0d1"),
|
|
(university, "\f19c"),
|
|
(wheelchair, "\f193"),
|
|
(drop, "\f043"), // tint
|
|
(bolt, "\f0e7"),
|
|
(broken_chain, "\f127"), // chain-broken
|
|
(bell, "\f0a2"), // bell-o
|
|
(eye, "\f06e"),
|
|
(gavel, "\f0e3"),
|
|
(asterisk, "\f069"),
|
|
(star, "\f005"),
|
|
(checkmark, "\f00c"), // check
|
|
(paw, "\f1b0"),
|
|
(lightbulb, "\f0eb"), // lightbulb-o
|
|
(cube, "\f1b2"),
|
|
(paint_brush, "\f1fc"),
|
|
(tree, "\f1bb"),
|
|
(road, "\f018"),
|
|
(warning, "\f071"), // exclamation-triangle
|
|
(map_signs, "\f277"),
|
|
(flag, "\f024"),
|
|
);
|
|
|
|
div.combo-cell-map.leaflet-container {
|
|
height: 60vh;
|
|
font: inherit;
|
|
}
|
|
|
|
/* leaflet styles */
|
|
|
|
div.leaflet-marker-icon.leaflet-div-icon {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
div.leaflet-div-icon span {
|
|
width: #{$marker_width};
|
|
height: #{$marker_width};
|
|
display: block;
|
|
left: #{0 - $marker_width / 2};
|
|
top: #{0 - $marker_width * 1.2};
|
|
position: relative;
|
|
border-radius: #{$marker_width * 10} #{$marker_width * 6} #{$marker_width * 0.5};
|
|
transform: scale(1, 1.3) rotate(45deg);
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
div.leaflet-div-icon span {
|
|
border: 1px solid white;
|
|
box-shadow: 0 0 0 1px #aaa;
|
|
}
|
|
|
|
div.leaflet-div-icon span i {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
transform: translateY(50%) rotate(-45deg);
|
|
height: 50%;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
div.leaflet-popup-content {
|
|
div.popup-field {
|
|
margin: 0.5rem 0;
|
|
}
|
|
span.field-label,
|
|
span.field-value {
|
|
display: block;
|
|
}
|
|
span.field-label + span.field-value {
|
|
font-weight: bold;
|
|
}
|
|
div.file-field {
|
|
font-weight: normal;
|
|
font-size: 90%;
|
|
img {
|
|
max-width: 100%;
|
|
display: block;
|
|
max-height: 10vh;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.leaflet-div-icon span i::before {
|
|
display: inline-block;
|
|
background: white;
|
|
border-radius: 100%;
|
|
padding: #{$marker_width * 0.1};
|
|
transform: scale(1.3, 1);
|
|
position: relative;
|
|
top: #{0 - $marker_width * 0.1};
|
|
height: #{$marker_width * 0.5};
|
|
line-height: #{$marker_width * 0.5};
|
|
width: #{$marker_width * 0.5};
|
|
}
|
|
|
|
/* leaflet markers icons */
|
|
|
|
.layers a::before,
|
|
select#id_icon option::before,
|
|
ul#id_icon span label::before,
|
|
i.leaflet-marker-icon {
|
|
font: normal normal normal 1em/1 FontAwesome;
|
|
}
|
|
|
|
.layers a::before,
|
|
select#id_icon option::before {
|
|
padding-right: 1ex;
|
|
display: inline-block;
|
|
width: 3ex;
|
|
text-align: center;
|
|
}
|
|
|
|
@each $marker_icon_name, $marker_icon_symbol in $marker_icons {
|
|
ul#id_icon li span.icon-#{$marker_icon_name} label::before,
|
|
a.layer-icon-#{$marker_icon_name}::before,
|
|
select#id_icon option[value=#{$marker_icon_name}]::before,
|
|
i.leaflet-marker-icon.#{$marker_icon_name}::before {
|
|
content: $marker_icon_symbol;
|
|
}
|
|
}
|
|
|
|
ul#id_icon {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
column-width: 30ex;
|
|
li {
|
|
margin-right: 1em;
|
|
margin-top: -1px;
|
|
span label {
|
|
display: block;
|
|
border: 1px solid #bcbcbc;
|
|
width: 100%;
|
|
padding: 0.5ex;
|
|
}
|
|
span label::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 2.5em;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* leaflet markercluster styles */
|
|
|
|
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
|
|
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
|
|
}
|
|
|
|
.leaflet-cluster-spider-leg {
|
|
/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
|
|
transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
|
|
}
|
|
|
|
.marker-cluster {
|
|
background-clip: padding-box;
|
|
border-radius: 30px;
|
|
div {
|
|
display: block;
|
|
background: #fff;
|
|
border-radius: 30px;
|
|
font-weight: bold;
|
|
height: 50px;
|
|
width: 50px;
|
|
text-align: center;
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
span {
|
|
line-height: 50px;
|
|
}
|
|
&-small {
|
|
background: #b5e28c;
|
|
div {
|
|
font-size: 200%;
|
|
}
|
|
}
|
|
&-medium {
|
|
background: #f1d357;
|
|
div {
|
|
font-size: 200%;
|
|
}
|
|
}
|
|
&-large {
|
|
background: #fd9c73;
|
|
div {
|
|
font-size: 150%;
|
|
}
|
|
}
|
|
}
|