Google MAP API, Determine if a route passes by a polygon -


i have map shows 3 polygons , route passes cross them. each polygone has title property. display polygone title when route passes it.

this code did :

<!doctype html><html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta content="ie=edge,chrome=1" http-equiv="x-ua-compatible"> <title>loading / editing zones</title> <style>      #map, html, body {        padding: 0;        margin: 0;        height: 100%;      }      #panel {        width: 200px;        font-family: arial, sans-serif;        font-size: 13px;        float: right;        margin: 10px;      }      #delete-button {        margin-top: 5px;      }      #login_close{     display: none;    }   .labels {      color: red;         background-color: white;        font-family: "lucida grande", "arial", sans-serif;      font-size: 10px;        font-weight: bold;      text-align: center;         width: 65px;            border: 2px solid black;        white-space: nowrap;         }   .autocomplete-suggestions { border: 1px solid #999; background: #fff; overflow: auto; }     .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }   .autocomplete-selected { background: #f0f0f0; }     .autocomplete-suggestions strong { font-weight: normal; color: #3399ff; } </style> </head> <body> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry" type="text/javascript"></script> <script type="text/javascript"> var directionsdisplay = new google.maps.directionsrenderer(),   directionsservice = new google.maps.directionsservice(),   polys    = new array(),   map      = null,   zoom     = 10,   mypolygons =    [     {         "name": "zone1",         "coordinates": [             "51.44459,-0.21835",             "51.46256,-0.11261",             "51.43004,0.03708",             "51.40777,-0.09888",             "51.39064,-0.21149",             "51.40692,-0.27191"         ]     },     {         "name": "zone2",         "coordinates": [             "51.56683,-0.22934",             "51.54292,-0.13046",             "51.57195,0",             "51.59755,-0.03708",             "51.5984,-0.13733",             "51.59755,-0.19913"         ]     },     {         "name": "zone3",         "coordinates": [             "51.66148,-0.13733",             "51.61461,-0.08514",             "51.61887,0.02197",             "51.65381,0.05905",             "51.64359,-0.04807"         ]     } ];    function drawpolygon(poly, polylabel) {     var options = {        paths: poly,       strokecolor: '#aa2143',       strokeopacity: 1,       strokeweight: 2,       fillcolor: "#ff6600",       fillopacity: 0.7,       polytitle: polylabel         };       newpoly = new google.maps.polygon(options);       newpoly.setmap(map);       polys.push(newpoly);   }   function sendpolygonfordrawing() {     for(var =0; i<mypolygons.length; i++){         poly = new array();         var coord = mypolygons[i].coordinates;         var lng = coord.length;         for(var j=0; j<lng; j++){             var longit_latid = coord[j].split(',');             poly.push(new google.maps.latlng(parsefloat(longit_latid[0]), parsefloat(longit_latid[1])));         }         drawpolygon(poly, mypolygons[i].name);               poly.pop();     }      }   //route   function calcroute() {       var start = "croydon";       var end = "cheshunt";       var waypts = [];       var waysarray = ["london"];       (var = 0; < waysarray.length; i++) {           waypts.push({               location:waysarray[i],               stopover:true});       }       var request = {           origin: start,           destination: end,           waypoints: waypts,           optimizewaypoints: true,           travelmode: google.maps.travelmode.driving       };       directionsservice.route(request, function(response, status) {         if (status == google.maps.directionsstatus.ok) {           directionsdisplay.setdirections(response);             var routcoordinates = fncroutezoneintersection(response);//this function populates routcoordinates json data of route.             var exist = new array();             for(var i=0; i<polys.length; i++){//polys holds polygons objects.               for(var j=0; j<routcoordinates.length; j++){                 if(google.maps.geometry.poly.containslocation(new google.maps.latlng(routcoordinates[j].k, routcoordinates[j].a), polys[i]) == true){                     exist .push(polys.polytitle);                     break;                     /*this breaks loop checking when point found inside polygon                      , go check next one, because knowing 1 point of route                      inside polygon enough*/                 }               }             }         console.log(exist);         alert(exist);         }       });       directionsdisplay.setmap(map);      }     function fncroutezoneintersection(response){         var myroute = response.routes[0].legs[0];         var lnglatcordinates = new array();         (var = 0; < myroute.steps.length; i++) {             lnglatcordinates.push(myroute.steps[i].start_point);         }         return lnglatcordinates;     }    $(function() {     //basic     var cartodbmapoptions = {       zoom: zoom,       center: new google.maps.latlng(51.465872, -0.065918),       disabledefaultui: false,       maptypeid: google.maps.maptypeid.roadmap     }      // init map     map = new google.maps.map(document.getelementbyid("map"),cartodbmapoptions);     sendpolygonfordrawing();     calcroute();      var drawingmanager = new google.maps.drawing.drawingmanager({       drawingcontrol: false,       polygonoptions: {         fillcolor: '#0099ff',         fillopacity: 0.7,         strokecolor: '#aa2143',         strokeweight: 2,         clickable: true,         zindex: 1,         editable: true       }     });   });   </script> <div id="map"> </div> </body> </html>

sounds code starting line : var routcoordinates = fncroutezoneintersection(response);............ checking starting, waypoint , end of route against polygons , not route points why empty array when doing check.

can 1 me please?

you have use overview_path instead of route legs. see docs overview_path contains array of latlngs represent approximate (smoothed) path of resulting directions.

function fncroutezoneintersection(response) {     console.log('fncroutezoneintersection...');  //    var myroute = response.routes[0].legs[0];     var myroute = response.routes[0].overview_path;     var lnglatcordinates = new array(); //    (var = 0; < myroute.steps.length; i++) {     (var = 0; < myroute.length; i++) {  //        lnglatcordinates.push(myroute.steps[i].start_point);         lnglatcordinates.push(myroute[i]);     }     // console.log(lnglatcordinates);     return lnglatcordinates; }

and have change:

exist.push(polys.polytitle);

to

exist.push(polys[i].polytitle);

see example @ jsbin markers. list of polygon titles written console.log.


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more