JSFiddle - React, Tailwind, and code Playground

by EDWIN MAURICIO QUISHPE MALDONADO

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

JavaScript

/*Author: MAMISHO*/
//creo un clase que llama a los métodos de las librerías

enyo.kind({
    name: "mapContainer",
    rendered: function(){
        this.inherited(arguments);
        
        //inicio el mapa con la localización por defecto
        this.map = L.map(this.id).setView([37.35585, -5.93653],17);
		L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            {attribution: "texto de prueba"}
        ).addTo(this.map);
        
        //Configuro el pop up
        var mark = new L.marker([37.35585, -5.93653]).addTo(this.map);
		var popDiv = L.DomUtil.create("div");
		var pop = new L.popup();
		mark.bindPopup(pop);

        //Para incluir código dentro de los controles se hace de la siguiente forma
		var ctrl = new enyo.Control({
			capturaBurbuja: function(){
				alert("Eres un pringui");
			}
		});
        var button = new enyo.Button({
            name: "Boton",
            content: "Estoy aquí :P",
            ontap: "capturaBurbuja",
            owner: ctrl,
        });
        
        //Puede usarse también con jQuery UI
        function forward(e){
            if (window.enyo && window.enyo.$ && e.srcElement && e.srcElement.id && window.enyo.$[e.srcElement.id]){
                    window.enyo.$[e.srcElement.id].bubble("ontap", e);
            }
        }
        this.map.on("popupopen", function (e){
            if (! e.popup.hasForwarder){ 
                //Es mejor trabajar con el DOM de forma directa y se hace de la siguiente forma
                L.DomEvent.on(pop._contentNode, "click", forward, this);
                e.popup.hasForwarder = true;
            }
        }, this);
        
        
        button.renderInto(popDiv);
		pop.setContent(popDiv);
        mark.openPopup();
    },
    
});
mapCont = new mapContainer();
mapCont.renderInto(document.body);
//elevar un método burbuja para atraparlo desde el DOM en una clase padre "javascript avanzado, ver notas de nodeJS debox.net"
console.log("click");