knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#64,map] Preliminary work on the map view

Browse Source 
Basic map view that plots points into a Leaflet map. Right now only
models with two "lat"/"lon" fields are supported. Some problems
regarding zooming to markers bounds when div not visible.
This commit is contained in:
amercader
2012-04-04 14:27:44 +01:00
parent 14bd9364db
commit 7df22effa3
13 changed files with 518 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/index.html
View File

@@ -13,8 +13,13 @@
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap.css">
<link rel="stylesheet" href="../css/data-explorer.css">
<link rel="stylesheet" href="../css/graph-flot.css">
<link rel="stylesheet" href="../css/map.css">
<link rel="stylesheet" href="style/demo.css">
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
<link rel="stylesheet" href="../vendor/leaflet/leaflet.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="../vendor/leaflet/leaflet.ie.css" />
<![endif]-->
<!-- 3rd party libraries -->
<script type="text/javascript" src="../vendor/jquery-1.7.1.js"></script>
@@ -24,6 +29,7 @@
<script type="text/javascript" src="../vendor/jquery.flot-0.7.js"></script>
<script type="text/javascript" src="../vendor/jquery.mustache.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
<script type="text/javascript" src="../vendor/leaflet/leaflet.js"></script>
<!-- recline library -->
<!-- in normal use would just the single recline.js library file. However, for testing it
@@ -40,6 +46,7 @@
<script type="text/javascript" src="../src/view.js"></script>
<script type="text/javascript" src="../src/view-grid.js"></script>
<script type="text/javascript" src="../src/view-flot-graph.js"></script>
<script type="text/javascript" src="../src/view-map.js"></script>
<script type="text/javascript" src="../src/view-transform-dialog.js"></script>
<!-- non-library javascript specific to this demo -->

22
app/js/app.js
View File

@@ -61,7 +61,15 @@ function standardViews(dataset) {
view: new recline.View.FlotGraph({
model: dataset
})
},
{
id: 'map',
label: 'Map',
view: new recline.View.Map({
model: dataset
})
}
];
return views;
}
@@ -75,14 +83,14 @@ function localDataset() {
, name: '1-my-test-dataset'
, id: datasetId
},
fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}, {id: 'country'}, {id: 'label'}],
fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}, {id: 'country'}, {id: 'label'},{id: 'lat'},{id: 'lon'}],
documents: [
{id: 0, x: 1, y: 2, z: 3, country: 'DE', label: 'first'}
, {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'}
, {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'}
, {id: 3, x: 4, y: 8, z: 12, country: 'UK', label: 'fourth'}
, {id: 4, x: 5, y: 10, z: 15, country: 'UK', label: 'fifth'}
, {id: 5, x: 6, y: 12, z: 18, country: 'DE', label: 'sixth'}
{id: 0, x: 1, y: 2, z: 3, country: 'DE', label: 'first', lat:52.56, lon:13.40}
, {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second', lat:54.97, lon:-1.60}
, {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third', lat:40.00, lon:-75.5}
, {id: 3, x: 4, y: 8, z: 12, country: 'UK', label: 'fourth', lat:57.27, lon:-6.20}
, {id: 4, x: 5, y: 10, z: 15, country: 'UK', label: 'fifth', lat:51.58, lon:0}
, {id: 5, x: 6, y: 12, z: 18, country: 'DE', label: 'sixth', lat:51.04, lon:7.9}
]
};
var backend = new recline.Backend.Memory();