How to know zoom level to display a marker inside google marker cluster -


well, in title :

  • i have thousands of markers google marker cluster (not google marker cluster plus : let me know if help)
  • everything works perfectly

but

  • when fire event relative particular marker, i'd display marker alone (not within cluster anymore).
  • since spacial repartition of markers not homogeneous : @ place zoom level of 9 display alone @ place, i'll have set zoom level 15.

so

  • the ultimate question : giving particular maker, how "query" marker cluster know :
    1. perhaps distance closest maker (giving should able calculate corresponding zoom level)
    2. any other helpful information should still miss @ time ...

some code ;)

/**  * computes scale in meters per pixel given zoom , latitute.  *  * @param {object} opt optional parameters  *      - zoom  *      - lat  *      - precision  *  * @returns {number} scale in meters per pixel  */ google.maps.map.prototype.getmapscale = function (opt){     var circumference = 40075040,         zoom, lat, scale;      if (typeof(opt['zoom']) == 'number' && typeof(opt['lat']) == 'number') {         zoom = opt['zoom'];         lat = opt['lat'];     } else {         zoom = this.getzoom();         lat = this.getcenter().lat();     }      scale = (circumference * math.cos(lat) / math.pow(2, zoom + 8));      if (typeof(opt['precision']) == 'number') {         scale = number(scale.tofixed(opt['precision']));     }      return scale; }   function calculatezoomlevelmarkeraloneincluster(vigneronid){     var distance = 1000000000;     var found_marker_in_cluster = false;     /* clusters gmap marker cluster */     var clustersarray = mc.getclusters();     /* clusters */     $.each(clustersarray, function(key, cluster){         var markersclusterarray = cluster.getmarkers();         /* markers in cluster */         $.each(markersclusterarray, function(key, marker){             /* if find marker */             if(marker.vigneronid === vigneronid){                 /* marker in cluster : no need process markers */                 found_marker_in_cluster = true;                 /* again : markers in cluster */                 var distance_tmp = 0;                 /* markers in cluster */                 $.each(markersclusterarray, function(key, marker2){                     /* markers except mine (otherwise distance 0 :-) ) */                     if(marker.vigneronid !== marker2.vigneronid){                         /* calculate distance between marker : http://stackoverflow.com/questions/1502590/calculate-distance-between-two-points-in-google-maps-v3 */                         distance_tmp = google.maps.geometry.spherical.computedistancebetween(marker.getposition(), marker2.getposition());                         /* keep min distance */                         if(distance_tmp < distance && distance_tmp!==0){                             distance = distance_tmp;                         }                     }                 });                 /* no reason continue process : break */                 return false;             }         });     });      if(found_marker_in_cluster === false){         var markersclusterarray = mc.getmarkers()         $.each(markersclusterarray, function(key, marker){             if(marker.vigneronid === vigneronid){                 var distance_tmp = 0;                 /* markers in cluster */                 $.each(markersclusterarray, function(key, marker2){                     /* markers except mine (otherwise distance 0 :-) ) */                     if(marker.vigneronid !== marker2.vigneronid){                         /* calculate distance between marker : http://stackoverflow.com/questions/1502590/calculate-distance-between-two-points-in-google-maps-v3 */                         distance_tmp = google.maps.geometry.spherical.computedistancebetween(marker.getposition(), marker2.getposition());                         /* keep min distance */                         if(distance_tmp < distance && distance_tmp!==0){                             distance = distance_tmp;                         }                     }                 });             }         });     }      var mapscale = map.getmapscale({}); /* meters / pixels */     var gridsizepixels = mc.getgridsize(); /* in pixels */     var gridsizemeters = gridsizepixels * mapscale;      if(distance!==1000000000 && distance!==0){         if(distance < gridsizemeters){             var factor = get2factor(gridsizemeters, distance);             map.setzoom(map.getzoom() + factor);         } else{             var factor = get2factor(distance, gridsizemeters);             map.setzoom(map.getzoom() - factor + 1);         }      }     /*alert(distance);*/ }  function get2factor(grid, distance){     var count = 0;     while(distance < grid){         count++;         grid = grid / 2;             }     return count; }

some explanations :

firstly code highly commeted read it

secondly :

  • the first function getmapscale has been found on internet

  • before use functions need set marker identifier (here : marker.vigneronid) before doing push in marker cluster

  • i fisrt iteration in cluster find marker , distance closest marker (in meter)

  • if don't find marker, means it's not in cluster second iteration on markers managed marker cluster , distance closest marker (in meter)

  • then calculate gridsize in meter (thanks function getmapscale transforms pixels in meters)

  • knowing each zoom level factor 2 previous zoom level, compute distance between closest marker , cluster grid size know how many zooms levels can add or substract current zoom level

yeah !


-

Comments

Post a Comment

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

first of all, thank being patient know simple question more couple of weeks' experience figure out. i've seen folks persevere , helpful on here , hope you're willing me. here fiddle: http://jsfiddle.net/65uzf/ here 1 of places searched answers on here: ( vertically center image thumbnails fix-sized div ) tried solutions on there , didn't work out me. i've searched ~4 or 5 others, , been unsuccessful those, too. what want take large image (what linked background-image #ysypic , #tabpic divs) , display thumbnail version of image in confines of divs have set it. is, using background properties have laid out in css, portion of image displays inside of circular divs. without these properties, display defaults smaller section of image [presumably pi*(50^2) area in top left] terrible resolution. i not care if entire image doesn't display inside of circles (it won't, given difference in shape), , overflow not being displayed fine. want able see figu
Read more

java - IntelliJ - No such instance method -

using intellij's 12 ultimate, i'm running following code in debugger: java import play.api.libs.json.jsvalue; public class foo { ... public jsvalue tojson() { ... } public class fooexample { ... foo foo = new foo(); system.out.println("...); //<-- breakpoint at breakpoint, right-clicked source code , picked "evaluate expression," typing in: foo.tojson() . but following error showed up: no such instance method: play.api.libs.json.jsvalue$class.com.foo.foo.tojson () am doing wrong? foo#tojson calls scala code, if matters. edit had breakpoint after instantiation of foo. downvoted it, deserved it. edit my answer no longer valid after op modified question (i.e. moved breakpoint actual is).. a breakpoint hit before line executed. in case foo has not yet been declared or instantiated (i.e. foo constructor has not yet been called). you'll need put breakpoint @ next line (or step on current line) if want evaluate foo .
Read more

identifier - Is it possible for an html5 document to have two ids? -

i wondering if html5 element can have 2 ids, this: <button id="thing1" id="thing2" name="button1" onclick="change()">click here</button> or this: <button id="thing1, thing2" name="button1" onclick="change()">click here</button> also, if 1 of ids said 1 thing, , other id said thing, 1 used? tl;dr : no. in versions of html, each element can have 1 id. see the spec : the id attribute specifies element's unique identifier (id). [dom] the value must unique amongst ids in element's home subtree , must contain @ least 1 character. the value must not contain space characters. note: there no other restrictions on form id can take; in particular, ids can consist of digits, start digit, start underscore, consist of punctuation , etc. note: element's unique identifier can used variety of purposes, notably way link specific parts of document usin
Read more