Skip to content

Instantly share code, notes, and snippets.

@matlads
Created July 12, 2017 13:26
Show Gist options
  • Save matlads/dd44114d52545f955fcc25eedac94b54 to your computer and use it in GitHub Desktop.
Save matlads/dd44114d52545f955fcc25eedac94b54 to your computer and use it in GitHub Desktop.
Marionette Leaflet example

Marionette Leaflet example

After looking for a way of doing using leaflet with Marionettet, I eventually hunkered down and built this.

You need the following libraries in the lib/ folder

  • requirejs
  • jquery
  • underscore
  • backbone
  • backbone.radio
  • backbone.marionette
  • bootstrap
  • leaflet

Enjoy.

// For any third party dependencies, like jQuery, place them in the lib folder
requirejs.config({
baseUrl: 'lib',
paths: {
'app': '../app'
},
shim: {
'bootstrap': {
deps: ['jquery']
}
}
});
// Start loading the main app file. Put all of
// your application logic in there.
requirejs(['bootstrap', 'main']);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script data-main="app" src="lib/require.js"></script>
<script type="text/template" id="root-template">
<div id="header"></div>
<div id="content"></div>
</script>
<script type="text/template" id="header-template">
<nav class="navbar navbar-template">
<ul class="nav navbar-nav">
<li><a href="#/">Home</a></li>
<li><a href="#/map">Map</a></li>
</ul>
</nav>
</script>
<script type="text/template" id="map-template">
<div id="map"></div>
</script>
</head>
<body>
<div id='container'></div>
</body>
</html>
define(function (require) {
'use strict';
var _ = require('underscore');
var Bb = require('backbone');
var Mn = require('backbone.marionette');
var L = require('leaflet');
var HeaderView = Mn.View.extend({
template: '#header-template'
});
var MapView = Mn.View.extend({
id: 'map',
template: _.noop,
onDomRefresh: function(){
L.map('map').setView([51.505, -0.09], 13);
}
});
var RootView = Mn.View.extend({
template: '#root-template',
regions: {
header: '#header',
content: '#content',
},
onRender: function(){
this.showChildView('header', new HeaderView());
},
});
var Controller = Mn.Object.extend({
initialize: function(){
this.rootView = this.getOption('rootView');
},
default: function(){
console.log('default route');
this.rootView.detachChildView('content');
},
showMap: function(){
this.rootView.showChildView('content', new MapView());
}
});
var Router = Mn.AppRouter.extend({
initialize: function(){
var rootView = this.getOption('rootView');
this.controller = new Controller({
rootView: rootView
});
},
appRoutes: {
'': 'default',
'map': 'showMap'
},
});
var App = Mn.Application.extend({
region: '#container',
onBeforeStart: function(){
this.view = new RootView({
el: '#container'
});
},
onStart: function(){
this.view.render();
new Router({
rootView: this.view
});
Bb.history.start();
}
});
var app = new App();
app.start();
});
@import url("./css/bootstrap.min.css");
@import url("./css/bootstrap-theme.min.css");
@import url("./css/leaflet.css");
html, body, #container, #mapcontainer, #content, #map {
height: 100%;
width: 100%;
overflow: hidden;
}
#map {
width: auto;
height: 100%;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment