Created
August 12, 2014 07:45
-
-
Save mattfullerton/a88aa0997961cd209162 to your computer and use it in GitHub Desktop.
Failing Recline MultiView Grid+Map
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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