Develop Reference

Google map multiple markers mapped to an area without coordinates

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.

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

Using a polygon as a marker with leaflet

I currently have a map for a game with item locations, i'm wanting to add animals to the side bar/legend but as a polygon instead of a marker, i get how to draw a polygon but i cannot figure out how to make it only show when selected from the legend (or even how to add one to the legend). Sorry for this very basic question.
I'm really very new to this, I only started learning about leaflet to make a map for a game, so i'm not really sure how to explain what i've done.. so i'll try my best:
I have a list of markers like:
var marker_combulbrsh2 = L.marker([-1474, 2661.5])
.bindPopup('Common Bullbrush');
and then i have the layer groups that have lines this like:
var lg_combulbrsh = L.layerGroup([
marker_combulbrsh1, marker_combulbrsh2
]);
and then an overlay list with the layer groups like:
"<i>Common Bullbrush" : lg_combulbrsh,
and then i have them display on the map with:
L.control.layers(null, overlays, {collapsed:true, position: 'topleft'}).addTo(map);
I am wanting to add a series of polygons that are selectable from the side panel/legend in the same way that the above L.marker is, so that I don't have to add individual locations that are close together for adding animal locations to the map.
`var polygonPoints = [
[-2263, 432],
[-2361, 435],
[-2337, 674],
[-2263, 432]];
var poly = L.polygon(polygonPoints).addTo(map);`
The code above draws the polygon i want to draw, but it's permanently there and I haven't been able to figure out how to make it a selectable item like the L.markers are. I figure i have to add the polygon as a marker some how and then have that marker added to the layer group and create an entry for them on the overlay list and then have them display through L.control.layers - I just cannot wrap my head around how though.
again, sorry for this very basic question and thank you to anyone who reads. if you are able to help with this and would like credit added to the website with a link to your work or social media or something i'm more than happy to do so.

Syncing Custom Color of the Line and the Legends with Data Loading from SQL for Multi-color Series

I have managed to plot a multi-color chart, but the legend is not syncing with the custom color of the lines. With this i need the Y axis minimum and maximum to be pulled from the query so it will be dynamic, also kindly help me in loading data_points dynamically from sql query for 3 different series along with the "color" and "segmentColor".
reference is https://jsfiddle.net/mailsakthi/1rv5jr65/1/
The data looks like the attached image:
The Min-Max query:
select (select min(v) from (values (min(Actual)),(min([Prev Year])),(min([Plan]))) as value(v)) as Min_,
(select max(q) from (values (max(Actual)),(max([Prev Year])),(max([Plan]))) as value(q)) as Max_
from s5_test
The dataset query : select * from s5_test
Thanks in Advance.

how to select markers in the polygon from mysql

i'm saving markers coordinates in mysql like below image
what i need is when user draw on maps like below image
i could get the shape and select markers in the shape from mysql and create a query.
for example:
$query= mysql_query("SELECT location FROM table WHERE Coordinates in the polygon");
i belive i need use ajax. and i'm using google maps v3
is this even possible to do that ?
PLEASE HELP, Any idea that i could somthing like that other way ??

Google maps does not provide GIS functions to select the coordinates inside a polygon. You could do using the spatial extension ( data type GEOMETRY) for mysql .. and for this you can go into that ..http://dev.mysql.com/doc/refman/5.7/en/spatial-extensions.html for mysql doc.
A simple way to select locations (points) in google maps is to use the extreme values of the coordinates of the polygon points to get the equivalent to the coordinates of the rectangle that contains the polygon vertices and then perform a select
select location
from my_table
where location_lat >= minLat_polygon
AND location_lat <= maxLat_poligon
AND location_lng <= maxLng_polygon
AND location_lng >= minLng_polygon

Sorting results of coordinates (lat and long) by proximity

I have a page that loads a lot of markers in a map (Google Maps).
The markers when clicked open InfoWindows that have "previous" and "next" links, which the user can use to navigate the markers. Right now I'm not using any particular order and the map moves all over the place when the next/prev marker is too far.
What I'd like to do is to use the coordinates in some way that the query already returns the results ordered by proximity (some combination of lat and long) so that the map moves "less" when the user moves from one marker to the next.
I may or may not have a central point of reference to calculate the proximity/distance from. Do I need one?
EDIT(some more info):
Imagine that I have a query such as:
select id, name, lat, long from whatever;
I'd like to have something in the lines of:
select id, name, somecalc(lat, long) as coord from whatever order by coord;
So when I process this query in my code and generate the markers, each "prev" and "next" link (which I build as a linked list) would have markers the closest to them as possible. What I need is the somecalc above.

Good old Pythagoras is your friend here: Let's say we start from coords (start_lat, start_long). This could be a random first result for example. If you want to order your results by distance to that coordinates you simply have to
SELECT
id, Name,
SQRT(POW(start_lat - lat, 2) + POW(start_long - Long, 2)) AS distance
FROM
whatever
ORDER BY
distance