Enyo, leaflet and markercluster

Hi,
I´m trying to write an application using enjoyjs, leafglet and the leaflet plugin markercluster.

leaflet is working fine, but markercluster gives me the error:

Reference error: L is not defined
L.MarkerClusterGroup = L.FeatureGroup.extend({

in /markercluster/dist/leaflet.markercluster-src.js

And then TypeError: L.MarkerClusterGroup is not a constructor in my js

The js is loaded and the css (checked with firebug). If i create a marker it works fine.

Where or how must i ibclude this plugin to make it work?

this is my kind
enyo.kind({
    name: "mapContainer",
    
    published: {
	map: null,
        mi_lat: 44.981014,
        mi_lng: -93.270520,
	zoom_actual: 16,
	zoom_max: 18
    },
    
    rendered: function(){
        this.inherited(arguments);
    
        //Initialize the map
        this.map = L.map(this.id,{
	    center: [this.mi_lat, this.mi_lng],
	    zoom: this.zoom_actual,
	    maxZoom: this.zoom_max,
	});
	L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            {attribution: "Map data © OpenStreetMap contributors"}
        ).addTo(this.map);
	
        var markersLayer = new L.MarkerClusterGroup(); 

        //Initilize the marker and popup
        var mark = new L.marker([44.981014, -93.270520]).addTo(this.map);
		var popDiv = L.DomUtil.create("div");
		var pop = new L.popup();
		mark.bindPopup(pop);

    },
    
});
Thank you very much for your help

Comments

  • I don't see anything immediately wrong here, but I've not used leaflet at all.

    How are you loading the leaflet and markercluster libraries into your webpage.
  • First i created a package.js in mapcontainer folder inside lib.
    Leaflet and markercluster are in lib/extras
    enyo.depends(
    	"MapContainer.js",
            "$lib/extra/leaflet/markercluster/dist/MarkerCluster.css",
            "$lib/extra/leaflet/markercluster/dist/MarkerCluster.Default.css",        
            "$lib/extra/leaflet/markercluster/dist/leaflet.markercluster-src.js"     
    );
    Then i start to test things, and finally i load them in the index.html:
    <!DOCTYPE html>




    App




    mapCont = new mapContainer(); mapCont.renderInto(document.body);
    The javascript is loaded as the error appears inside the js

    I´m really new with enyo and maybe I´m doing something wrong. If i use the code inside the html, not using a kind, it works fine, so evidently something is wrong in my kind.

    Thank you very much again for your time and interest

  • I have been thinking in what you asked, and i have make some changes. I delete the lines from html, and i use the fowolling package:
    enyo.depends(
    	"MapContainer.js",
            "$lib/extra/leaflet/leaflet.css",
            "$lib/extra/leaflet/leaflet.js",
            "$lib/extra/leaflet/markercluster/dist/MarkerCluster.css",
            "$lib/extra/leaflet/markercluster/dist/MarkerCluster.Default.css",        
            "$lib/extra/leaflet/markercluster/dist/leaflet.markercluster-src.js"     
    );
    And there is no error :)
    Just only must i test to include the line:
    in the package.js
    And of course test the cluster :) but first i need to upload markers and learn a bit more.
    Thanks and excuse me if it was a stupid question.
    Cheers
  • Sorry, but i´m still don´t understand how enjo loads external js.
    Apparently i fixed the problem loading the js in the package.js.
    But when i add the fowolling lines to the rendered event:
    	this.map.locate({setView: true,maxZoom: this.zoom_max});
    	this.map.on('locationfound', function(e) {
    	    var radius = e.accuracy / 2;
    	    L.marker(e.latlng).addTo(this.map).bindPopup("You are within " + radius + " meters from this point").openPopup();
    	    L.circle(e.latlng, radius).addTo(this.map);
    	});
    again i have an error in leaflet.js "t is undefined".

    Seems that inside the function the leaflet is not working. I´m trying to find the solution in the documentation but i would appreciate any clue.

    Thank you very much
  • edited August 2013
    @ethemba, I am using Leaflet 0.6.2 with Enyo 2.2.0 just fine. Don't include the leaflet files with enyo.depends; just include those in tags in your header. Leaflet is already compressed; In my experience, I've had better experiences wrapping 3rd party libs into a separate (single) file.

    If you do want to use enyo.depends, you need to put your includes in order. That is, the leaflet js files need to precede your MapContainer.js.

    If it is helpful, I maintain a fork of Leaflet based on 0.6.2 that fixes a couple issues with differences between how Enyo and Leaflet manage event propagation: https://github.com/NBTSolutions/Leaflet/tree/v0.6.2.master-enyofix
  • edited August 2013
    Also, inside a leaflet on listener, you need to save your this context. Inside your on('locationfound'...) callback, this.map will be undefined. I suggest you read the Leaflet docs; this is not an Enyo issue.

    Look at the 3rd argument of addEventListener (of which on is an alias): http://leafletjs.com/reference.html#events-addeventlistener. Pass in this as the 3rd argument so that this.map is defined as you'd expect. Currently, you are trying to add a marker to undefined, which is why you are seeing that error.

    Awhile back, I filed an issue with Leaflet to clarify how Leaflet handles context passing: https://github.com/Leaflet/Leaflet/issues/1583#issuecomment-20431765. The maintainer did not agree with my design concerns.
  • Let me read it carefully, and test all your comments. I´m a nerd in enyo ;) . We are migrating an app to this platform and some of your amazing answers need some little translation or second read :)

    Thank you very much TravisWebbUSA for your help and time.If you come to Spain i will invite you to a wine ;)

    Cheers
  • Error fixed. Thats right, i started to change things and finally:
    	map.on('locationfound', function(e) {
    	    var radius = e.accuracy / 2;
    	    L.marker(e.latlng).addTo(map);
    	    L.circle(e.latlng, radius).addTo(map);
    	});
    Thanks a lot.
  • @TravisWebbUSA Thanks a lot for sharing your experience. I don´t understand completely about " In my experience, I've had better experiences wrapping 3rd party libs into a separate (single) file." You mean compile them together with closure for example?.

    I will study your fix tomorrow (today is late). Can i use it in any app? Are compatible with marker cluster?

    Thanks a lot again.I will try not to disturb you more.

    Cheers
Sign In or Register to comment.