require.js bundles test
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.js"></script>
<div id="mapcontainer"/>
CSS
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#mapcontainer
{
width: 100%;
height: 100%;
box-sizing: 'border-box';
}
JavaScript
//39min http://stackoverflow.com/questions/25175914/bundles-in-requirejs
//2.1.10. sync api: https://github.com/cloudchen/requirejs-bundle-examples/blob/master/src/app/hello/main.js
//amd examples: http://jsfiddle.net/jasdeepkhalsa/NssGv/
require.config(
{
map: {
'*': {
'css': 'https://cdnjs.cloudflare.com/ajax/libs/require-css/0.1.5/css.js'
}
},
paths : {
'leaflet-css': 'http://cdn.leafletjs.com/leaflet-0.7.3/leaflet',
'leaflet-js': 'http://cdn.leafletjs.com/leaflet-0.7.3/leaflet'
},
//todo not work
bundles : {
'leaflet-bundle': [
'http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js', 'css!http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css'
]
}
});
//does not works
/*
require(['leaflet-bundle'], function(){
alert('leaflet-bundle required');
drwaMap();
});
*/
define('leaflet', ['leaflet-js', 'css!leaflet-css'], function(){
alert('leaflet defined');
});
require(['leaflet'], function(){
alert('leaflet required');
drwaMap();
});
function drwaMap()
{
var container = document.getElementById('mapcontainer');
var L = window.L;
var map = L.map(container).setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// add a marker in the given location, attach some popup content to it and open the popup
var o = L.marker([51.5, -0.09]);
for(var k in L.Mixin.Events)
{
if(!L.Mixin.Events.hasOwnProperty(k))
{
continue;
}
console.log(k+""+( typeof o[k] != L.Mixin.Events[k]))
}
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
}