combo/combo/apps/maps/static/css/combo.map.scss

$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: 2.3em;
    height: 2.3em;
    display: block;
    left: -1.15em; /* 2.3 / 2 */
    top: -3em; /* 2.3 * 1.2 */
    position: relative;
    border-radius: 11em 6em 0.8em;
    transform: scale(1, 1.3) rotate(45deg);
    box-sizing: border-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%;
}

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: 0.5ex;
    transform: scale(1.3, 1);
    margin-top: -0.3ex;
    height: 1rem;
    width: 1rem;
}

/* 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%;
		}
	}
}