Pull script out

This commit is contained in:
lukasmartinelli 2016-04-09 13:42:45 +02:00
parent 758aec2f92
commit 3b60f02df9
3 changed files with 72 additions and 82 deletions

62
editor.js Normal file
View File

@ -0,0 +1,62 @@
mapboxgl.accessToken = 'pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/morgenkaffee/cimsw88b8002l8sko6hhm2pr1',
center: [5.9701, 46.1503],
zoom: 9
});
map.addControl(new mapboxgl.Navigation({position: 'top-left'}));
var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
lineNumbers: true,
mode: 'text/x-plsql',
theme: 'dracula'
});
var cn = {
host: '192.168.99.100',
port: 32772,
database: 'osm',
user: 'osm',
password: 'osm'
};
var dbgeo = require("dbgeo");
var pgp = require('pg-promise')();
var db = pgp(cn);
var subquery = "select from osm_poi_point where name <> '' limit 10"
var transformQuery = "select ST_AsGeoJSON(ST_Transform(geometry, 4326)), t* from (" + subquery + ") as t";
db.any(transformQuery, true).then(function (data) {
dbgeo.parse({
"data": data,
"outputFormat": "geojson",
"geometryColumn": "geom",
"geometryType": "geojson"
},function(error, result) {
if (error) {
return console.log(error);
}
map.addSource("markers", {
"type": "geojson",
"data": result
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "monument-15",
"text-field": "{name}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
}).catch(function (error) {
console.log(error);
});

View File

@ -2,22 +2,22 @@
<html>
<head>
<meta charset='utf-8' />
<title></title>
<title>SQL Query Editor</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
<link rel="stylesheet" type="text/css" href="resources/normalize.css" />
<link rel="stylesheet" type="text/css" href="resources/css/font-awesome.css" />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="resources/codemirror/codemirror.css" />
<link rel="stylesheet" type="text/css" href="resources/codemirror/dracula.css" />
<link rel="stylesheet" type="text/css" href="resources/style.css" />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
<script src="resources/codemirror/codemirror.js"></script>
<script src="resources/codemirror/sql.js"></script>
<link rel="stylesheet" type="text/css" href="resources/style.css" />
</head>
<body class="dark">
<div class="app">
<div class="toolbar-container">
@ -28,88 +28,19 @@
<button class="toolbar-button">
<i class="toolbar-icon fa fa-cog"></i>
<span>Settings</span>
</button>
</button>
</div>
<div class="map-container">
<div id="map"></div>
</div>
<div class="editor-container">
<textarea id="editor">
SELECT * FROM
my_great_table;
</textarea>
SELECT * FROM
my_great_table;
</textarea>
</div>
</div>
<script type="text/javascript">
window.$ = window.jQuery = require('jquery');
$(function() {
mapboxgl.accessToken = 'pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/morgenkaffee/cimsw88b8002l8sko6hhm2pr1',
//style: 'mapbox://styles/mapbox/streets-v8',
center: [5.9701, 46.1503], // starting position
zoom: 9 // starting zoom
});
map.addControl(new mapboxgl.Navigation({position: 'top-left'}));
var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
lineNumbers: true,
mode: 'text/x-plsql',
theme: 'dracula'
});
var cn = {
host: '192.168.99.100',
port: 32772,
database: 'osm',
user: 'osm',
password: 'osm'
};
var dbgeo = require("dbgeo");
var pgp = require('pg-promise')();
var db = pgp(cn);
db.any("select ST_AsGeoJSON(ST_Transform(geometry, 4326)) as geom, name from osm_poi_point where name <> '' limit 10", true)
.then(function (data) {
dbgeo.parse({
"data": data,
"outputFormat": "geojson",
"geometryColumn": "geom",
"geometryType": "geojson"
},function(error, result) {
if (error) {
return console.log(error);
}
// This will log a valid GeoJSON object
console.log(JSON.stringify(result));
map.addSource("markers", {
"type": "geojson",
"data": result
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "monument-15",
"text-field": "{name}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
})
.catch(function (error) {
console.log(error);
// error;
});
});
</script>
<script src="editor.js"></script>
</body>
</html>

View File

@ -36,8 +36,5 @@ app.on('ready', function() {
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
// kill tessera
tessera.kill('SIGINT');
});
});