0

I have a very strange requirement from my client and I am not sure if it is achievable.

Here's the requirement:
The client wants to display a Map zoomed to a country level having 4 filters:
1. Drop down based state filter which should populate the cities in the city filter and the map should zoom to state level
2. Drop down based city filter which should populate the area filter and the map should zoom to city level
3. Drop down based area filter which would zoom the map to the area level.

This is where it gets tricky:
Once the map is zoomed at area level, it should display all the markers in that area and none of the markers have coordinates or address. They are only attributed to that area boundaries and are randomly/evenly spread out in that area so that all the markers are visible.

A marker clustering should be fine here but I don't know how the markers themselves can be placed in that area without coordinates or addresses, just based on area boundary coordinates.

Now comes the fourth filter:
4. A search box filter which will search the data only within those area markers and whichever matches, is shown and the rest are hidden

I believe I can still take care of the 4th filter, but it's the 3rd filter which is driving me crazy.

Is there any mechanism by which we can place multiple markers (with no coordinates or address, only associated to an area boundary), inside a highlighted area boundary and randomly/evenly distributed within that area so that all the markers are visible?

Thanks in advance.

Sourin K Sen
  • 137
  • 1
  • 7
  • 1
    With the boundary, do you mean a series of coordinates? how are the boundaries defined? – Joost K Jan 08 '20 at 10:57
  • For defining the boundaries, I was thinking to get polygon coordinates using openstreetmaps as per suggestions on this thread: https://stackoverflow.com/questions/44570996/drawing-region-on-google-maps – Sourin K Sen Jan 08 '20 at 11:20
  • I just realized after posting my answer that I might have misunderstood the question? is 1 marker linked to 1 area or 1 area with a N amount of markers? – Joost K Jan 08 '20 at 12:41
  • 1
    You can add random markers in a polygon: [How to add a random point inside a polygon in Google Maps?](https://stackoverflow.com/questions/22852371/how-to-add-a-random-point-inside-a-polygon-in-google-maps). If you want them spread out, that will require a different algorithm (or disallowing markers that are within a certain distance of existing markers as well as those outside the polygon). – geocodezip Jan 09 '20 at 02:08
  • @JoostK - So, think of it this way: Let's say, we found a polygon for a locality in my city and in that locality, there are 100 shops. Now, due to an unknown reason, I am not allowed to ask either their addresses or their coordinates but I have to put an equal number of markers on the map for that locality. So, basically, it's 1 area with N amount of markers. – Sourin K Sen Jan 09 '20 at 05:55
  • @geocodezip - Thanks a lot. That is what I was looking for. – Sourin K Sen Jan 09 '20 at 05:57

1 Answers1

0

One way of solving this comes to mind is using the getCenter from LatLngBounds class from google maps. This does require getting the polygon coordinates from somewhere else.

let coords = [{lat: -34, lng: 151},{lat: -34.5, lng: 151.5},etc]
let bounds = new google.maps.LatLngBounds();

coords.forEach(LatLng => bounds.extend(LatLng));

let center = bounds.getCenter(); //returns LatLng variable

This can also be used to center your google maps on an area with the function fitBounds:

map.fitBounds(bounds);

Using this would solve 2 of your challanges, the zoom and center

Joost K
  • 1,096
  • 8
  • 23
  • This is useful when we have address or cordinates. he has no cordinates or addresses along with markers. So I think this will not work in this case. – Heena Vora Jan 08 '20 at 13:17
  • 1
    @HeenaVora - You are right that it won't help me with placing the markers inside an area, but this does helps me with the zoom & center till the area level at least and for those I think I can get the polygon coordinates from some other API. – Sourin K Sen Jan 09 '20 at 06:05