javascript - show hide polylines google maps -

-

when page loaded polyline autoloaded on map. m need hide , when click chekcbox show on map. how can it? polylines has categories.. rayon.. call on checkbox categories rayon..

p.s. sorry english code:

    function getline() {        var mpenc = new google.maps.infowindow();   function pinfo(poly, html) {         google.maps.event.addlistener(poly,"mouseover",function(){ poly.setoptions({  strokecolor:'#ffffff', strokeopacity: .8});});        google.maps.event.addlistener(poly,"mouseout",function(){  poly.setoptions({strokecolor:colorr});});        google.maps.event.addlistener(poly,'click', function(event) {     mpenc.setcontent(html);     mpenc.setposition(event.latlng);     mpenc.open(map);   });  }        alert('loading lines.. please wait 10 sec.');   downloadurl("all.php", function(doc) {       alert('lines loaded..');          var g = google.maps;          var xmldoc = xmlparse(doc);         bounds = new google.maps.latlngbounds();        // ========= process polylines ===========       var lines = xmldoc.documentelement.getelementsbytagname("line");        // read each line       (var = 0; < lines.length; a++) {         // line attributes        var colour = lines[a].getattribute("colour");         var width  = parsefloat(lines[a].getattribute("width"));         var diameter = lines[a].getattribute("diameter");         var project = lines[a].getattribute("projectid");       var type = lines[a].getattribute("type");         var contract = lines[a].getattribute("contract");             var cr = lines[a].getattribute("contractor"); if (cr) {cr1 = "  " + cr + " ";} else { cr1 = "none";}         var comp = lines[a].getattribute("complated");         var id = lines[a].getattribute("id_line");         var html = "<b>contractor:</b> " + cr1 + " </a> <br/> <b> contract: </b>" + contract + " <br/><b>line segment:</b> " + id + " <br/><b>project: </b>" + project +"<br/>  <b>diameter: </b>" + diameter + " <br/> <b>completed: </b>" + comp + "% <hr><br/><a class=\"inline-link-1\" href=\"javascript:void(0)\"onclick=\"window.open('cdatal.php?id="+ id +"','cdatal','height=300, width=460,scrollbars=no')\">change completed</a> <a class=\"inline-link-1\" href=\"javascript:void(0)\"onclick=\"window.open('dedit.php?id="+ id +"','cdata','height=300, width=350,scrollbars=no')\">design data</a>" ;         // read each point on line         var points = lines[a].getelementsbytagname("point");         var pts = [];         var length = 0;         var point = null;         (var = 0; < points.length; i++) {            pts[i] = new g.latlng(parsefloat(points[i].getattribute("lng")),                                 parsefloat(points[i].getattribute("lat")));            if (i > 0) {              length += pts[i-1].distancefrom(pts[i]);              if (isnan(length)) { alert("["+i+"] length="+length+" segment="+pts[i-1].distancefrom(pts[i])) };            }            bounds.extend(pts[i]);            point = pts[parseint(i/2)];         }         // length *= 0.000621371192; // miles/meter      if (comp < 1) {   colorr = '#fa0505' }   if (comp > 0 && comp < 25 ) {   colorr = '#ffa640' }   if (comp > 24 && comp < 50) {   colorr = '#fffd91' }   if (comp > 49 && comp < 75) {   colorr = '#e8e400' }   if (comp > 74 && comp < 100) {   colorr = '#bfffad' }   if (comp == 100) {   colorr = '#0f8500' }     if(type == 'dl') {en = '1'}     if(type == 'ml') {en = '3'}     if(type == 'tl') {en = '5'}          var poly = new g.polyline({                           map:map,                           path:pts,                           strokecolor:colorr,                           strokeweight:en,                           clickable: true                           });       pinfo(poly,html);     }       map.fitbounds(bounds);      });   }     <li><input type="checkbox" id="value1" value="wsn/qabala.php" onclick="boxclick(this.value,'qabala','value1')" /> qabala</li>   <li><input type="checkbox" id="value2" value="wsn/ismailli.php"  onclick="boxclick(this.value,'ismailli','value2')" /> ismayilli</li>   <li><input type="checkbox" id="value3"  value="wsn/agshu.php"   onclick="boxclick(this.value,'value3')" /> aghsu</li> ....

and xml data:

http://nn-gis.com/map/all.php

do mean this?

http://jsfiddle.net/nczyw/9/

$(function() {      var div = $('#categories');      var map = new google.maps.map($('#map').get(0), {         center: new google.maps.latlng(0, -180),         zoom: 3,         maptypeid: google.maps.maptypeid.roadmap     });      var categories = {         rayon: [             {                 coordinates: [                     [37.772323, -122.214897],                     [21.291982, -157.821856],                     [-18.142599, 178.431],                     [-27.46758, 153.027892]                 ],                 color: '#ff0000'             }         ]     };      $.each(categories, function(name) {          var paths = [];new google.maps.latlng          $.each(this, function(i) {              var path = [];              $.each(this.coordinates, function(i) {                  path.push(new google.maps.latlng(this[0], this[1]));              });              paths.push(new google.maps.polyline({                 path: path,                 strokecolor: this.color,                 strokeopacity: 1.0,                 strokeweight: 2,                 visible: false,                 map: map             }));          });          categories[name] = paths;          div.append('<label><input type="checkbox" value="' + name + '"/> ' + name + '</label>');      });      div.on('change', 'input', function(event) {          var checked = this.checked;          $.each(categories[this.value], function(i) {              this.setvisible(checked);          });      });  });

the key group polylines.


Comments

Post a Comment

Popular posts from this blog

Perl - how to grep a block of text from a file -

-
it can in xml or text format. how in general grep block of text in perl? <track type="ws"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>0</locationindex> <propertyindex>0</propertyindex> </range> </track> <track type="ps" id="1"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>1</locationindex> <propertyindex>1</propertyindex> </range> </track> i want grep type="ps" , till </range> . one solution open file, read line line , match block. open(fh, "file.txt"); foreach $line (<fh>) { if ($line =~ m/type="cc"(.*?)<\/range>/) { print $1; } } but there more optimal solution without reading file line l
Read more

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

-
Image
if set mycoolbar.fixedorder true,only grip on first band hidden. well,if use delphi 7 create vcl forms application,then put coolbar on , create 3 coolbans hold other controls,only grip , top coolbands can hidden setting mycoolbar.fixedorder:=true. i've uploaded picture make things clear. you got fixedorder property wrong. fixed property not allow bands rearranged if set true . setting property of coolbar true keep user changing bands order @ runtime, user can still move , resize bands. can give advice can do, actual solution problem, well, have wait answer. my advice use 3 coolbars in row , setting "fixedorder" property true , bandborderstyle bsnone . way grip hidden on of them. about property, it's not bug of ide, actual preference of property.
Read more

javascript - Animating array of divs; only the final element is modified -

-
this baffling me @ moment. i'm experienced programmer looking throw bit of surprise fiancee on countdown page our wedding. desired effect simulated confetti falling behind main page. setup follows: i have array of divs in javascript. each div absolutely positioned on page. have interval set updates every 50 or milliseconds. on each tick, run loop on array of divs, , calculations , update positions. problem problem having, however, though can see divs created, stored array, , modified (in case, each has slight randomized rotation) during initialization phase, once tick update position starts, div stored in whatever last slot of array gets position updated. tried hard-coding each div index testing purposes, strictly last element update position. upon printing current "left" , "top" style values each div before , after calculations shows value has been changed, no visible change noticeable. here's basic code: javascript var container;
Read more