How to detect overlapped shapes and split them up using leaflet and createJS

user_13948446 0
Viewed 209

I am going thru a development feature for a map based application wherein I need to do two things:

  1. Detect which all shapes are overlapped on one another (coordinates match).
  2. Click on the top of them to split them up

Here is the picture of the requirement to get the clear understanding of it:

click here to see the requirement image

So in this image, left state is the default one and the right one is, once we click on them and that state becomes split state wherein all the shapes are kinda scattered but connected with the label name which is "G108" in this case.

These two shapes data will be coming from two different APIs. What I need to do detect is the overlapping. So do I need to loop over the children inside a "stage" element provided by the createJs which seems to a time consuming? So on what basis should detection be checked? There could be 3 or 4 shapes getting plotted from various APIs and have no relation with one another.

For splitting, what could be the approach to handle it?

Here is the stackblitz link, in case you might want to try it out. I've implemented a default scenario.

Libraries being used:

  1. Leaflet for map features
  2. Custom Layer for canvas
  3. For implementing these two shapes, create JS

I would really appreciate if you could suggest me or share an approach or help in this regard.

createjs leaflet angular typescript javascript
2 Answers
user_45432070

I was able to accomplish this with the user of leaflet-markercluster and leaflet-canvasicon.

Create custom icons

import "leaflet-canvasicon";

export const circleIcon = L.canvasIcon({
  iconSize: [50, 50],
  iconAnchor: [25, 25],
  fillStyle: "rgba(255,0,0,.5)",
  drawIcon: function (icon, type) {
    // canvas code here - maybe you can use create-js?
  }
});

export const squareIcon = L.canvasIcon({
  // options and drawIcon function
});

export const combinedIcon = L.canvasIcon({
  // options and drawIcon function which combined both of the above
});

Create a markercluster using these icons:

const marker1 = L.marker(center, {
  icon: circleIcon
});

const marker2 = L.marker(center, {
  icon: squareIcon
});

const group = L.markerClusterGroup({
  iconCreateFunction: function (cluster) {
    return combinedIcon;
  }
});

group.addLayer(marker1).addLayer(marker2);
group.addTo(map);

Working codesandbox

This will take some careful tweaking of the drawIcon functions to get right. You may be able to combine this with create-js. But this is an option. Also my example works on click, not hover, so you may have to

user_120109840
Related