Skip to content

Instantly share code, notes, and snippets.

@mattfullerton

mattfullerton/multiviewtest.html

Created August 12, 2014 07:45
Show Gist options
  • Save mattfullerton/a88aa0997961cd209162 to your computer and use it in GitHub Desktop.
Save mattfullerton/a88aa0997961cd209162 to your computer and use it in GitHub Desktop.
Download ZIP
Failing Recline MultiView Grid+Map
Raw
multiviewtest.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- you do not have to use bootstrap but we use it by default -->
<link href="vendor/bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet">
<!-- css -->
<link href="vendor/leaflet/0.4.4/leaflet.css" rel="stylesheet">
<!--[if lte IE 8]>
<link rel="stylesheet" href="vendor/leaflet/0.4.4/leaflet.ie.css" />
<![endif]-->
<link href="vendor/leaflet.markercluster/MarkerCluster.css" rel="stylesheet">
<link href="vendor/leaflet.markercluster/MarkerCluster.Default.css" rel=
"stylesheet"><!--[if lte IE 8]>
<link rel="stylesheet" href="vendor/leaflet.markercluster/MarkerCluster.Default.ie.css" />
<![endif]-->
<link href="css/map.css" rel="stylesheet">
<link href="css/grid.css" rel="stylesheet">
<link href="css/multiview.css" rel="stylesheet">
<!-- 3rd party dependencies -->
<script src="vendor/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<script src="vendor/underscore/1.4.4/underscore.js" type="text/javascript"></script>
<script src="vendor/backbone/1.0.0/backbone.js" type="text/javascript"></script>
<script src="vendor/mustache/0.5.0-dev/mustache.js" type="text/javascript"></script>
<script src="vendor/bootstrap/2.3.2/bootstrap.js" type="text/javascript"></script>
<script src="dist/recline.js" type="text/javascript"></script><!-- javascript -->
<script src="vendor/leaflet/0.4.4/leaflet.js" type="text/javascript"></script>
<script src="vendor/leaflet.markercluster/leaflet.markercluster.js" type=
"text/javascript"></script>
<title></title>
</head>
<body>
<div id="explorer"></div>
<script>
var data = [
{id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', geo: {lat:52.56, lon:13.40} },
{id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', geo: {lat:54.97, lon:-1.60}}
];
var dataset = new recline.Model.Dataset({
records: data
});
var $el = $('#explorer');
var views = [
{
id: 'map',
label: 'Map',
view: new recline.View.Map({
model: dataset
})
},
{
id: 'grid', // used for routing
label: 'Table', // used for view switcher
view: new recline.View.Grid({
model: dataset
})
}
];
var myExplorer = new recline.View.MultiView({
model: dataset,
el: $el,
views: views
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment