FREAC/COM

click on the point at 11011 Sheridan st Cooper City FL

Closed this issue · 9 comments

There are 24 hits at that location. When you click on the point you only get one hit and I suspect it is a random one of the 24. There are lots of other examples of 2 or more mapped to the same lat/lon

This is a problem we have seen before that causes us to write special "drill down identify" code. The code queries a database rather that what we have in this case -- JSON.

The table is correct -- it contains all 24 + others that fall in the circle.

I think what needs to happen is in the click part of the circle_marker..on function we need to examine the event.latlng value, then look through the json and find all the records that have that same lat/lon. Now what... somehow add all that stuff to a giant popup maybe.

I think you should try this approach

  1. add the following 2 lines to index:
<script type="text/javascript" src="plugin/Leaflet.markercluster-1.4.1/dist/leaflet.markercluster.js"></script>
  1. go to this page: https://www.npmjs.com/package/leaflet.markercluster
  2. under the "Using the Plugin" header click on the download the v1.4.1 release
  3. create a directory under the leaflet_app directory calling it plugin
  4. put the download unzipped file from 3 above in the plugin directory
  5. in the app.js file change the following line (around line 51) "const json_group = new L.FeatureGroup" to "const json_group = new L.markerClusterGroup();"

Now use the geocoder to go to 11011 Sheridan st hollywood and click on the new cluster.
Once you get this cluster working, does that break anything? We only want to cluster when the lat/lons are exactly the same, so there has to be some kind of distance check to set so it will not cluster anything but the same address ones.

I have been thinking on this throughout the day and was thinking either we could implement something similar to the labins map, or we could use a clustering program. I will read through the docs to see what type of scenarios we can enforce to have the clustering behavior that we want. I think out of the box functionality is clustering happens if markers overlap at a current scale.

Sent with GitHawk

So far this is looking pretty good. when you click on a multiple site location, it "spiders" out so you now see, say, 20 points instead of one (where the other 19 are under the first and you cant get to them

This is what I have changed my json_group to look like:

//const json_group = new L.FeatureGroup();
const json_group = new L.markerClusterGroup({
    maxClusterRadius: 0,
    iconCreateFunction: function(cluster) {
        return L.divIcon({ html: '<b>' + cluster.getChildCount() + '</b>', 
                            className: 'clustered_sites', 
                            iconSize: L.point(10, 10)
                         });
	}
});

Now just add this to the style,css file:

.clustered_sites {
  border-radius: 90%;
  width: 5px;
  height: 5px;
  background-color: #ED9118;
  text-align: center;
  font-size: 7px;
}

I created my own branch of this and played with the styling a bit to see if I could find something a little more aesthetically pleasing.

I am thinking about the popup functionality too. Perhaps we could set that IF the spider functionality is activated, then maybe a mouseover could trigger a popup. It is a bit tedius having to click each popup to receive this information.

Also, when the table is clicked, the spider functionality goes away. I think it might look nice for it to stay while panning through the results.

Overall, I am not a huge fan of the clustering. I am thinking a different approach may work more seamlessly. Since all of these providers reside at the same place, maybe we could programmatically detect this and have an altered popup view with all provider information. In the end, I'm not sure if this would be a good way to go either, but I want to throw it out there. I may try this approach out throughout the week/weekend too.

Here is another idea on how to handle multiples at the same location:
https://adammertel.github.io/Leaflet.MarkerCluster.List/demo/demo1.html

That would be interesting to play around with. I’ll give this a good look.

Sent with GitHawk

This functionality of seeing all points on the same popup has been achieved. Now, we could make decisions about how we want do display the quantity of facilities in each popup. See examples below:

No display:
(still trying to figure out how to do this)

Concentric circle displaty:
image

Or the current strategy (spiderfy):
image

I am thinking since we have a popup attatched to the point, it may be beneficial to just have no icon, and just a number of facilities

I think I agree that no graphic would be best. The spider or concentric circle really doesn't add any new information that the number doesn't already do. Lets try that and see how it looks.

I dont think its necessary, but I am going to ask them today about putting a "1" in the markers where there is only one person at a location.

Since we haven't implemented the insurance / medicaid links state-wide yet, I think you may need to test whether or not the that logic still works with with your current code. For example , if you have already zoomed to an address and, say, 30 "people" have been identified and the user hits the "accepts medicaid button, does the number change in the graphic?

I am going to close this issue because I think we have handled it at this time. There are mentions of Medicare but they are not relevant any more.