Skip to content

Commit

Permalink
feat: can highlight cluster
Browse files Browse the repository at this point in the history
  • Loading branch information
dadiorchen committed Apr 3, 2021
1 parent 7a54536 commit 3f5f055
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 19 deletions.
45 changes: 26 additions & 19 deletions src/models/Map.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@ export default class Map{
log.info("options:", options);
}

static formatClusterText(count){
if(count > 1000){
return `${Math.round(count/1000)}K`;
}else{
return count;
}
}

mount(domElement){
const mapOptions = {
minZoom: this.minZoom,
Expand Down Expand Up @@ -68,31 +76,30 @@ export default class Map{
}
});

this.layerUtfGrid.on('mouseover', function (e) {
this.layerUtfGrid.on('mouseover', (e) => {
log.debug("mouseover:", e);
// const [lon, lat] = JSON.parse(e.data.latlon).coordinates;
// markerHighlight = new window.L.marker(
// [lat, lon],
// {
// icon: new window.L.DivIcon({
// className: "greenstand-cluster-highlight",
// html: `
// <div class="greenstand-cluster-highlight-box" >
// <div></div>
// </div>
// `,
// iconSize: [32, 32],
// }),
// }
// );
const [lon, lat] = JSON.parse(e.data.latlon).coordinates;
this.layerHighlight = new this.L.marker(
[lat, lon],
{
icon: new this.L.DivIcon({
className: "greenstand-cluster-highlight",
html: `
<div class="greenstand-cluster-highlight-box" >
<div>${Map.formatClusterText(e.data.count)}</div>
</div>
`,
}),
}
);
// markerHighlight.payload = {
// id: e.data.id
// };
// markerHighlight.addTo(map);
this.layerHighlight.addTo(this.map);
});
this.layerUtfGrid.on('mouseout', function (e) {
this.layerUtfGrid.on('mouseout', (e) => {
log.debug("e:", e);
// this.map.removeLayer(markerHighlight);
this.map.removeLayer(this.layerHighlight);
});
this.layerUtfGrid.addTo(this.map);

Expand Down
20 changes: 20 additions & 0 deletions src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -265,3 +265,23 @@ body {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
}

/* new version */

.greenstand-cluster-highlight{
z-index: 999 !important;
margin-left: 0px !important;
margin-top: 0px !important;
}

.greenstand-cluster-highlight-box {
background: url(./images/cluster_63px_highlight.png);
width: 63px;
height: 63px;
display: flex;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
}

0 comments on commit 3f5f055

Please sign in to comment.