Find midpoint and zoom from array of long lats on Google map
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need a page I can post an array (between 2 and 100) of long/Lats and a single height and width

[{long, lats},{long,lat}]
height
width

The map will plot these and then have it tell me the center point of the map and zoom level to fit all of the markers in the view (height and width specified). The output of this page should be

Long
Lat
Zoom level

Speed matters a lot so if there way a way to toggle off the heavy Google tiles, that would be awesome!

I've written the javascript that accomplishes this task. Do you want the server side as well, to handle a POST request? If so, what type of server/language would you like it implemented in?
richard-fairthorne over 3 years ago
All client side , no server for this task - thx for asking!
Qdev over 3 years ago
Ok, well, I have it working, but you cannot accept a "POST" client side. How would you like to "send" the array to the page? One possible option would be to put the data in the query string. You also might want this done in node.js, in which case the whole thing is a server. Let me know, and I'll send the code.
richard-fairthorne over 3 years ago
Or I can use form entry if you want to manually enter the points.
richard-fairthorne over 3 years ago
awarded to kerncy

Crowdsource coding tasks.

3 Solutions

Winning solution

Hi

here is the computation part :
https://jsfiddle.net/0awt4u31/14/

coordinates must be given in [[long,lat],[long,lat]] format. (no {}). The answer will be the midpoint and the zoom level.

Do you also need the google map display part ?

For information, output midpoint is given as [longitude, latitude] as the input order you gave.
kerncy over 3 years ago
This is great! I'll test today. No map part needed. It helps speed things up anyway
Qdev over 3 years ago
Yeah that's the point, no include to map at all. Only requirement is jQuery but it can be removed easily if you want.
kerncy over 3 years ago
Works good for now. We will use as AWS lambda workers so this is good
Qdev over 3 years ago
tried with the following data https://gist.github.com/quotient/5b95326b9b55c948171a42e1a087e247 i got a midpoint but not a zoom level. NaN is what the zoom says with input of 1000 x 500
Qdev over 3 years ago
Made a fix when all lat/lng are negative, it should work with this update : https://jsfiddle.net/0awt4u31/15/
kerncy over 3 years ago
works for me, is it a lot of your time to remove jquery dependency? if not too much trouble it would be awesome on our side.
Qdev over 3 years ago
I removed all references to jQuery : https://jsfiddle.net/0awt4u31/16/ This should do the work ;)
kerncy over 3 years ago

Hi, Pls check this solution: https://jsfiddle.net/sm423dtr/

This is a fork of my solution, anyway thanks to have fixed few bugs ☺:).
Stefano Balzarotti over 3 years ago
LOL, I revised the code, and this doesn't works in some cases, you have also cloned the bugs...
Stefano Balzarotti over 3 years ago

Hi, You can check this solution: https://jsfiddle.net/orbintsoft/zf0m1n5d/17/show/.

In this version, I improved validation.

I made a lots of fix, thanks to dev.ravik I revised the solution and i found big bug :) Now I think that should be perfect, and it works all cases.
Stefano Balzarotti over 3 years ago
I used the same format you provided [{long, lats},{long,lat}], "long" for longitude...
Stefano Balzarotti over 3 years ago
I don't put markers on my map, because as you say, if you put lots of them, it can be heavy.
Stefano Balzarotti over 3 years ago
Will check your solution today! Thx
Qdev over 3 years ago
View Timeline