JSFiddle - React, Tailwind, and code Playground

by EDWIN MAURICIO QUISHPE MALDONADO

HTML

<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css">

CSS

body {
 margin:0;
padding:0;
}
#map {
position:absolute;
 top:0;
bottom:0;
 width:100%;
}
.map {
position:absolute;
 top:0;
bottom:0;
 width:100%;
 }

JavaScript

enyo.kind({
    name: 'MapBox',
    kind: 'FittableRows',
    events: {
        onMapCreated: ''
    },
    components: [{
        kind: "onyx.Toolbar",
        components: [{
            kind: "onyx.Button",
            content: "Test"
        }]
    }, {
        fit: true,
        style: "position:relative;",
        components: [{
            tag: 'div',
            id: "map",
            name: 'map',
            classes: 'map',
            allowHtml: true,
            content: "example"
        }]
    }],
    //* @protected
    create: function () {
        this.inherited(arguments);
    },
    rendered: function () {
        this.inherited(arguments);
        this.load();
    },
    load: function () {
        var map = L.mapbox.map('map', 'examples.map-9ijuk24y').setView([40, -74.50], 9);
    }
});


enyo.kind({
    name: "App",
    kind: "MapBox",
});

new App().renderInto(document.body);