muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 11:06:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

marcercluster tooltips

Browse source
This commit is contained in:
muerwre 2019-02-20 11:36:09 +07:00
parent 9d48c479a5
commit f2758843bf
2 changed files with 20 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/styles/map.less
View file

@ -126,8 +126,25 @@
font-size: 13px; font-size: 13px;
transform: translate(-12px, -12px); transform: translate(-12px, -12px);
transition: box-shadow 250ms; transition: box-shadow 250ms;
position: relative;
outline: none;
&:hover { &:hover {
box-shadow: fade(@cluster_small, 70%) 0 0 0 7px; box-shadow: fade(@cluster_small, 70%) 0 0 0 7px;
} }
span {
outline: none;
position: absolute;
right: -7px;
bottom: 11px;
background: @cluster_small;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 11px;
}
} }

5
src/utils/clusterIcon.js
View file

@ -1,8 +1,9 @@
import { divIcon } from 'leaflet'; import { divIcon } from 'leaflet';
export const clusterIcon = () => divIcon({ export const clusterIcon = cluster => divIcon({
html: ` html: `
<div class="custom-marker-cluster"> <div class="custom-marker-cluster">
<span>${cluster.getChildCount()}</span>
<svg width="24" height="24" viewBox="-2 -2 36 36"> <svg width="24" height="24" viewBox="-2 -2 36 36">
<circle cx="10" cy="20" fill="white" r="4" /> <circle cx="10" cy="20" fill="white" r="4" />
<circle cx="22" cy="20" fill="white" r="4" /> <circle cx="22" cy="20" fill="white" r="4" />