Polymaps and Angularjs -
i'm trying add polymaps map inside angularjs app.
typeerror: object [object object] has no method 'setattribute' @ object.a.container (http://localhost:8000/lib/polymaps.min.js:15:341) @ new <anonymous> (http://localhost:8000/js/controllers.js:22:4) @ d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:335) @ object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:464) @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:65:486 @ link (http://localhost:8000/lib/angular-route.min.js:7:248) @ j (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:492) @ h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:28) @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:45:200 @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:431 <div ng-view="" class="ng-scope">
javascript not able setattribute on element inside angular view?
my html looks this:
<article class="dashboard container"> <div id="map"></div> </article>
and basic polymaps code is:
var po = org.polymaps; var map = po.map() .container(document.getelementbyid("map").appendchild(po.svg("svg"))) .add(po.interact()) .add(po.hash()); .add(po.image().url( po.url("http://{s}tile.openstreetmap.org" + "/{z}/{x}/{y}.png") .hosts(["a.","b.","c.",""]))) .center({lat: -33.882957, lon: 151.073685}) .zoom(11);
i'm assuming angular. there work around?
to answer own question had 2 things make work in angular.js.
the first, solve problem wrap #map element did. turns out caching keeping error when had #map element element in view. (so had right idea, deleting cache removed error)
since polymaps uses #{zoom}/{coordinatex}/{coordinatey} routing, second thing add:
$locationprovider.html5mode(true);
to app.js file remove /#/ in routes. otherwise, angular , polymaps undertook infinite battle on url.
Comments
Post a Comment