Leaflet Directive

[ap...@foundops.com]

Hi everyone, 

I am new to angular. I have poured over the latest docs but I cannot seem to create a Leaflet directive. 

Can someone please tell me what is wrong?

http://jsfiddle.net/apohl/3SBvk/72/

http://leaflet.cloudmade.com/reference.html#map-constructor

Thanks!

[Dan Doyon]

for starters you need the MapCtrl definition

function MapCtrl($scope) {
}

if i'm not mistaken below 

var map = new L.Map(element.map());

s/b 

var map = new L.Map(element.map);

After this I can't help you, it crimps about this._container is undefined in firebug console

hope this helps

dan

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/bBGpUV2InIcJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[ap...@foundops.com]

Ok, so I did have it like that before, but accidentally removed it with other unnecessary code. It still doesn't show the map.

http://jsfiddle.net/apohl/3SBvk/75/ 

[Dan Doyon]

Seeangular-1.0.0rc4.min.js:58

Do you have all necessary js referenced?

How about this, create a jsfiddle that uses leaflet without angular so you (and others) can see that work first.

If that works, then it'll be easier to diagnose.

TypeError: Cannot read property '_leaflet' of undefined at [object Object].initialize (http://code.leafletjs.com/leaflet-0.3.1/leaflet.js:6:12366) at new <anonymous> (http://code.leafletjs.com/leaflet-0.3.1/leaflet.js:6:1734) at http://fiddle.jshell.net/apohl/3SBvk/75/show/:51:23 at j (http://code.angularjs.org/angular-1.0.0rc4.min.js:41:247) at e (http://code.angularjs.org/angular-1.0.0rc4.min.js:38:47) at j (http://code.angularjs.org/angular-1.0.0rc4.min.js:41:186) at e (http://code.angularjs.org/angular-1.0.0rc4.min.js:38:47) at e (http://code.angularjs.org/angular-1.0.0rc4.min.js:38:64) at http://code.angularjs.org/angular-1.0.0rc4.min.js:37:126 at http://code.angularjs.org/angular-1.0.0rc4.min.js:15:347 <div id="map">

On Apr 11, 2012, at 10:53 AM, ap...@foundops.com wrote:

Ok, so I did have it like that before, but accidentally removed it with other unnecessary code. It still doesn't show the map.

http://jsfiddle.net/apohl/3SBvk/75/ 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/cISw7xrMMMcJ.

[ap...@foundops.com]

Thanks again. Here is a working version of Leaflet. For some reason I can't get it to work with the script in the Javascript area though.

 

http://jsfiddle.net/apohl/zY4Ty/2/ 

[Dan Doyon]

I'm thinking there's something wrong with that leaflet library or how it is interacting with jsfiddle (i did try outside of it).

Below is it not working OUTSIDE of angular, all i did was change the id from map to map2. The api says it would take an id. I tried 2 flavors 'map2' and '#map2'

http://jsfiddle.net/dandoyon/kJyRP/2/

http://jsfiddle.net/dandoyon/kJyRP/3/

Below is it "working" in angular, unless you change the id attr to something other than 'map'

http://jsfiddle.net/dandoyon/BWvkp/2/

IMO: i would start with leaflet or switch to another library

If you can get leaflet to work in jsfiddle without angular but with different element id's then you should be ok getting it to work in Angular.

--dan 

On Apr 11, 2012, at 12:15 PM, ap...@foundops.com wrote:

Thanks again. Here is a working version of Leaflet. For some reason I can't get it to work with the script in the Javascript area though.

 

http://jsfiddle.net/apohl/zY4Ty/2/ 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/c7Aqr1lP2Z8J.

[ap...@foundops.com]

Dan,

Thank you very much! It's really weird why the id has to be "map", but it works.

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[richard....@gmail.com]

Just fixed the resources for this example, leaflet is still working fine IN angular.

I was able to swap it out this way:

module.directive('rap', function() {

and use that as the element:

<rap id="map"></rap>

the #map just needs to be given a height in CSS so the map will display.  The element is not selected by its id attr, but the tag it seems.

http://jsfiddle.net/M6RPn/

On Wednesday, April 11, 2012 4:29:08 PM UTC-4, Dan Doyon wrote:

[ap...@foundops.com]

http://jsfiddle.net/M6RPn/26/