javascript - Reutilize maps markers for weighted heatMaps -

-

i'm using functions markers via ajax, , draw in map_canvas div. works perfectly, , i'm trying reuse "gmarkers" variable create heatmap...with no luck. how can create heatmap data?

i prefer use same data i'm loading function weighting heatmap variable: llamados.

how can start?

var gmarkers = []; function initialize() {     var myoptions = {         zoom: 10,         center: mapcenter,         maptypeid: google.maps.maptypeid.roadmap     };     map = new google.maps.map(document.getelementbyid('map_canvas'), myoptions);     current_zoom = map.getzoom();     var mycontrol = document.getelementbyid('descripcion');     map.controls[google.maps.controlposition.right_bottom].push(mycontrol); }  google.maps.event.adddomlistener(window, 'load', initialize);  var infowindow = new google.maps.infowindow(); var bounds = new google.maps.latlngbounds(); var marker, i; var mylatlng;  function createmarker (obj, i) {     mylatlng = new google.maps.latlng(obj['lat'], obj['lon']);     marker = new google.maps.marker({         position: mylatlng,         animation: google.maps.animation.drop,         title: obj['nodo'],         llamados: obj['llamados'],         icon: obj['icono'],         map: map     });     google.maps.event.addlistener(marker, 'click', (function(marker, i) {         return function() {             infowindow.setcontent('nodo: ' + obj['nodo'] + '; llamados: ' + obj['llamados']);             infowindow.open(map, marker);         }     })(marker, i));      gmarkers.push(marker); }  function ejecutarajax(){     $.ajax({         beforesend: function() {          },         cache: false,         // data: params,         datatype: 'json',         timeout: 0,         type: 'post',         url: 'traerllamados.php',         success: function(data) {             if (data) {                 var data = data;                 var obj;                 cantidad=object.keys(data).length;                      for(var in data){                                 createmarker(data[i]);                          };                     }              else {                 alert('no data');             }         },     }); }

given existing code, should able add heatmap map (after markers loaded) doing:

var heatmaparray = []; (var i=0; i<gmarkers.length; i++) {   heatmaparray.push({location: gmarkers[i].getposition(), weight: gmarkers[i].llamados}); } var heatmap = new google.maps.visualization.heatmaplayer({   data: heatmaparray }); heatmap.setmap(map);

proof of concept fiddle

code snippet:

var gmarkers = [];  var mapcenter = new google.maps.latlng(37.782, -122.447);    function initialize() {    var myoptions = {      zoom: 15,      center: mapcenter,      maptypeid: google.maps.maptypeid.satellite    };    map = new google.maps.map(document.getelementbyid('map_canvas'), myoptions);    current_zoom = map.getzoom();    var mycontrol = document.getelementbyid('descripcion');    map.controls[google.maps.controlposition.right_bottom].push(mycontrol);      (var = 0; < heatmapdata.length; i++) {        // translate obj expected createmarker      var obj = {        lat: heatmapdata[i].location.lat(),        lon: heatmapdata[i].location.lng(),        nodo: "nodo" + i,        llamados: heatmapdata[i].weight,        icono: "http://maps.google.com/mapfiles/ms/micons/blue.png"      }      createmarker(obj, i);    }    var heatmaparray = [];    (var = 0; < gmarkers.length; i++) {      heatmaparray.push({        location: gmarkers[i].getposition(),        weight: gmarkers[i].llamados      });    }    var heatmap = new google.maps.visualization.heatmaplayer({      data: heatmaparray    });    heatmap.setmap(map);  }    google.maps.event.adddomlistener(window, 'load', initialize);    var infowindow = new google.maps.infowindow();  var bounds = new google.maps.latlngbounds();  var marker, i;  var mylatlng;    function createmarker(obj, i) {    mylatlng = new google.maps.latlng(obj['lat'], obj['lon']);    marker = new google.maps.marker({      position: mylatlng,      animation: google.maps.animation.drop,      title: obj['nodo'],      llamados: obj['llamados'],      icon: obj['icono'],      map: map    });    google.maps.event.addlistener(marker, 'click', (function(marker, i) {      return function() {        infowindow.setcontent('nodo: ' + obj['nodo'] + '; llamados: ' + obj['llamados']);        infowindow.open(map, marker);      }    })(marker, i));      gmarkers.push(marker);  }    google.maps.event.adddomlistener(window, "load", initialize);  /* data points defined mixture of weightedlocation , latlng objects */  var heatmapdata = [{    location: new google.maps.latlng(37.782, -122.447),    weight: 0.5  }, {    location: new google.maps.latlng(37.782, -122.445),    weight: 1  }, {    location: new google.maps.latlng(37.782, -122.443),    weight: 2  }, {    location: new google.maps.latlng(37.782, -122.441),    weight: 3  }, {    location: new google.maps.latlng(37.782, -122.439),    weight: 2  }, {    location: new google.maps.latlng(37.782, -122.437),    weight: 10  }, {    location: new google.maps.latlng(37.782, -122.435),    weight: 0.5  }, {    location: new google.maps.latlng(37.785, -122.447),    weight: 3  }, {    location: new google.maps.latlng(37.785, -122.445),    weight: 2  }, {    location: new google.maps.latlng(37.785, -122.443),    weight: 5  }, {    location: new google.maps.latlng(37.785, -122.441),    weight: 0.5  }, {    location: new google.maps.latlng(37.785, -122.439),    weight: 1  }, {    location: new google.maps.latlng(37.785, -122.437),    weight: 2  }, {    location: new google.maps.latlng(37.785, -122.435),    weight: 3  }];
html,  body,  #map_canvas {    height: 100%;    width: 100%;    margin: 0px;    padding: 0px  }
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,visualization"></script>  <div id="map_canvas"></div>


Comments

Post a Comment

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

-
i trying fetch records database , having above error this classs appropriate getters , setters public class user { private int id; private string username; private string password; private string email; i have create database , inserted data below configuration <bean id="datasource" class="org.apache.commons.dbcp2.basicdatasource" destroy-method="close"> <property name="driverclassname" value="com.mysql.jdbc.driver"/> <property name="url" value="jdbc:mysql://localhost:3306/usersdb"/> <property name="username" value="root"/> <property name="password" value=""/> </bean> this complete stacktrace severe: servlet.service() servlet [appservlet] in context path [/spring] threw exception [request processing failed; nested exception org.hibernate.exception.sqlgrammarexception: not ...
Read more

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

-
Image
i have postgresql db number of tables. if query: select column_name information_schema.columns table_name="my_table"; i list of columns returned properly. however, when query: select * "my_table"; i error: (programmingerror) relation "my_table" not exist 'select *\n "my_table"\n' {} any thoughts on why can columns, can't query table? goal able query table. you have include schema if isnt public one select * <schema>."my_table" or can change default schema show search_path; set search_path my_schema; check table schema here select * information_schema.columns for example if table on default schema public both works ok select * parroquias_region select * public.parroquias_region but sectors need specify schema select * map_update.sectores_point
Read more

asp.net mvc - breakpoint on javascript in CSHTML? -

-
i have .cshtml file has javascript tag. within script tag have few lines of javascript. first line of javascript refers property in @viewbag. other javascript lines plain script without mvc related references. observation: can place breakpoints (visual studio 2015) on each of these javascript lines. however, breakpoints has white dot in center of breakpoint symbol (red circle) except line @viewbag reference (this particular line not have white dot in center). it seems breakpoint without white dot hit during run-time. question: can explain going on here? white dot mean? why plain red breakpoint line line hitting breakpoint? the visual studio debugger expecting debug actual server-side code within .cshtml file opposed client-side javascript within it. iirc, visual studio allow debug javascript code expected in internet explorer (and possibly edge), other browsers want use either third-party tool or developer tools (f12) within browser. an easy approach take advant...
Read more