Skip to content
GitLab
Commit c548ba99 authored by duminil's avatar duminil
Browse files

Proof of concept for JavaFX Region Chooser

parent 9b99ce4b
Expand all Hide whitespace changes
Inline Side-by-side
src/eu/simstadt/regionchooser/RegionChooserFX.java 0 → 100644
View file @ c548ba99
package eu.simstadt.regionchooser;
import java.nio.file.Paths;
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker.State;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.layout.Region;
import javafx.scene.paint.Color;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;
public class RegionChooserFX extends Application
{
private Scene scene;
@Override
public void start(Stage stage) {
// create the scene
stage.setTitle("RegionChooserJavaFX");
scene = new Scene(new Browser(), 1024, 768, Color.web("#666970"));
stage.setScene(scene);
scene.getStylesheets().add("webviewsample/BrowserToolbar.css");
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class Browser extends Region
{
public class JavaApp
{
public void downloadRegion(String wktPolygon) {
System.out.println("FROM JAVA : DO SOMETHING with " + wktPolygon);
}
}
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();
public Browser() {
//apply the styles
getStyleClass().add("browser");
// load the web page
String url = "file://" + Paths.get("../RegionChooser/website/index.html").toAbsolutePath().toString();
webEngine.load(url);
// process page loading
webEngine.getLoadWorker().stateProperty().addListener(
(ObservableValue<? extends State> ov, State oldState,
State newState) -> {
if (newState == State.SUCCEEDED) {
JSObject win = (JSObject) webEngine.executeScript("window");
win.setMember("fxapp", new JavaApp());
}
});
//add the web view to the scene
getChildren().add(browser);
}
@Override
protected void layoutChildren() {
double w = getWidth();
double h = getHeight();
layoutInArea(browser, 0, 0, w, h, 0, HPos.CENTER, VPos.CENTER);
}
@Override
protected double computePrefWidth(double height) {
return 900;
}
@Override
protected double computePrefHeight(double width) {
return 600;
}
}
website/data/citygml_hulls.kml
View file @ c548ba99
This diff is collapsed.
website/index.html
View file @ c548ba99
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title> Simstadt Region Chooser </title>
<meta name="keywords" content="polygon,creator,google map,v3,draw,paint">
<meta name="description" content="Google Map V3 Polygon Creator for Simstadt">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/javascript" src="script/proj4.js"></script>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.4.0/build/ol.js" type="text/javascript"></script>
-->
<link rel="stylesheet" href="style/ol.css" type="text/css">
<!-- <script src="ol-debug.js" type="text/javascript"></script> -->
<script src="script/ol.js" type="text/javascript"></script>
<script src="script/turf.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<ul>
<li class="title">
Simstadt Region Chooser
</li>
</ul>
<p>
<span class="instruction">Demo Instruction:</span>
Left click on the map to create markers, when last marker meets first marker, it will form a polygon.
</p>
</div>
<div id="map" class="map"></div>
<div id="side">
<input id="reset" value="Reset" type="button" class="navi"/>
<div id="dataPanel">
</div>
</div>
<script src="script/simstadt_openlayers.js" type="text/javascript"></script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title> Simstadt Region Chooser </title>
<meta name="keywords" content="polygon,creator,google map,v3,draw,paint">
<meta name="description" content="Google Map V3 Polygon Creator for Simstadt">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/javascript" src="script/proj4.js"></script>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.4.0/build/ol.js" type="text/javascript"></script>
-->
<link rel="stylesheet" href="style/ol.css" type="text/css">
<!-- <script src="ol-debug.js" type="text/javascript"></script> -->
<script src="script/ol.js" type="text/javascript"></script>
<script src="script/turf.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<ul>
<li class="title">
Simstadt Region Chooser
</li>
</ul>
<p>
<span class="instruction">Demo Instruction:</span>
Left click on the map to create markers, when last marker meets first marker, it will form a polygon.
</p>
</div>
<div id="map" class="map"></div>
<div id="side">
<input id="reset" value="Reset" type="button" class="navi" disabled/>
<input id="send" value="Send" type="button" class="navi" disabled/>
<div id="dataPanel">
</div>
</div>
<script src="script/simstadt_openlayers.js" type="text/javascript"></script>
</body>
</html>
website/script/jquery-1.4.2.min.js
View file @ c548ba99
This diff is collapsed.
website/script/proj4.js
View file @ c548ba99
This diff is collapsed.
website/script/simstadt_openlayers.js
View file @ c548ba99
//TODO: Add zoom to extent as control
//TODO: Add keyboard controls . ol.interaction.KeyboardPan
//TODO: Many polygons?
//TODO: Movable corners
//TODO: Add text to citygml vector
proj4.defs("EPSG:31467", "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0"
+ " +ellps=bessel +datum=potsdam +units=m +no_defs"); // http://spatialreference.org/ref/epsg/31467/proj4js/
var wgs84Sphere = new ol.Sphere(6378137);
var osm_layer = new ol.layer.Tile({
source : new ol.source.OSM()
});
var kml_source = new ol.source.KML({
projection : ol.proj.get('EPSG:3857'),
url : 'data/citygml_hulls.kml',
extractAttributes : false,
extractStyles : false
})
var kml_layer = new ol.layer.Vector({
source : kml_source,
style : new ol.style.Style({
fill : new ol.style.Fill({
color : 'rgba(255, 255, 255, 0.2)'
}),
stroke : new ol.style.Stroke({
color : '#777777',
width : 2,
lineDash : [ 5, 10 ]
}),
})
});
var polygons = new ol.source.Vector();
var polygons_layer = new ol.layer.Vector({
source : polygons,
style : new ol.style.Style({
fill : new ol.style.Fill({
color : 'rgba(255, 155, 51, 0.5)'
}),
stroke : new ol.style.Stroke({
color : '#ffcc33',
width : 4
}),
image : new ol.style.Circle({
radius : 5,
fill : new ol.style.Fill({
color : '#ffcc33'
})
})
})
});
kml_layer.addEventListener("change", function(event) {
map.getView().fitExtent(kml_source.getExtent(), (map.getSize()));
});
var map = new ol.Map({
target : 'map',
layers : [ osm_layer, kml_layer, polygons_layer ],
});
var draw = new ol.interaction.Draw({
source : polygons,
type : 'Polygon'
});
draw.on('drawstart', function(evt) {
sketch = evt.feature;
});
var sourceProj = map.getView().getProjection();
function findIntersections() {
var geoJSONformat = new ol.format.GeoJSON();
var wktFormat = new ol.format.WKT();
var features = kml_source.getFeatures();
var wgs84_sketch = /** @type {ol.geom.Polygon} */
(sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
var sketch_area = sketch.getGeometry().getArea();
var poly1 = geoJSONformat.writeFeatureObject(new ol.Feature(wgs84_sketch));
var intersection_found = false;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var wgs84_citygml = /** @type {ol.geom.Polygon} */
(feature.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
var poly2 = geoJSONformat.writeFeatureObject(new ol.Feature(wgs84_citygml));
try {
var jsonIntersection = turf.intersect(poly1, poly2);
if (undefined != jsonIntersection) {
if (!intersection_found) {
$('#dataPanel').append("Intersection found with :<br/>\n");
intersection_found = true;
}
var intersection = geoJSONformat.readFeature(jsonIntersection, {
dataProjection : ol.proj.get('EPSG:4326'),
featureProjection : ol.proj.get('EPSG:3857')
});
console.log(intersection);
console.log(wktFormat.writeFeature(intersection, {
dataProjection : ol.proj.get('EPSG:4326'),
featureProjection : ol.proj.get('EPSG:3857')
}));
var intersectionArea = intersection.getGeometry().getArea();
var citygmlArea = feature.getGeometry().getArea();
var citygml_percentage = Math.round(intersectionArea / citygmlArea * 100);
var sketch_percentage = Math.round(intersectionArea / sketch_area * 100);
polygons.addFeature(intersection);
intersection.setStyle(new ol.style.Style({
fill : new ol.style.Fill({
color : 'rgba(255, 155, 51, 0.5)'
})
}))
$('#dataPanel').append(feature.get('description') + " (" + citygml_percentage + "%");
if (sketch_percentage == 100) {
$('#dataPanel').append(", all inside");
}
$('#dataPanel').append(")<br/>\n");
}
} catch (err) {
console.log(feature.get('description') + " - " + err);
}
}
if (!intersection_found) {
$('#dataPanel').append("No intersection found with any CityGML<br/>\n");
}
}
draw.on('drawend', function(e) {
$('#dataPanel').empty();
var geom = /** @type {ol.geom.Polygon} */
(sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
var coordinates = geom.getLinearRing(0).getCoordinates();
var area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
var coords = geom.getLinearRing(0).getCoordinates();
var gsk3_coords = "";
var wgs84_coords = "";
var n = coords.length - 1;
for (var i = 0; i < n; i++) {
var wgs84_coord = coords[i];
wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")<br/>";
var gsk3_coord = ol.proj.transform(coords[i], ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:31467'))
gsk3_coords += "(" + gsk3_coord[0] + "," + gsk3_coord[1] + ")<br/>";
}
$('#dataPanel').append("WGS84 Coordinates<br/>");
$('#dataPanel').append(wgs84_coords + "<br/>\n");
$('#dataPanel').append("GSK3 Coordinates<br/>");
$('#dataPanel').append(gsk3_coords + "<br/>\n");
$('#dataPanel').append("Area" + "<br/>\n");
$('#dataPanel').append((Math.round(area / 1000) / 10).toString() + " ha<br/><br/>\n");
findIntersections();
});
map.addInteraction(draw);
$('#reset').click(function() {
$('#dataPanel').empty();
polygons.clear();
});
//TODO: Add zoom to extent as control
//TODO: Add keyboard controls . ol.interaction.KeyboardPan
//TODO: Don't allow multiple sketch
//TODO: Add text to citygml vector
//TODO: Try to leave everything in 4326
//TODO: Gray buttons until polygon is closed
var reset_btn = $('#reset')[0];
var send_btn = $('#send')[0];
proj4.defs("EPSG:31467", "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0"
+ " +ellps=bessel +datum=potsdam +units=m +no_defs"); // http://spatialreference.org/ref/epsg/31467/proj4js/
var wgs84Sphere = new ol.Sphere(6378137);
var osm_layer = new ol.layer.Tile({
source : new ol.source.OSM()
});
var kml_source = new ol.source.KML({
projection : ol.proj.get('EPSG:3857'),
url : 'data/citygml_hulls.kml',
extractAttributes : false,
extractStyles : false
})
var kml_layer = new ol.layer.Vector({
source : kml_source,
style : new ol.style.Style({
fill : new ol.style.Fill({
color : 'rgba(255, 255, 255, 0.2)'
}),
stroke : new ol.style.Stroke({
color : '#777777',
width : 2,
lineDash : [ 5, 10 ]
}),
})
});
kml_layer.addEventListener("change", function(event) {
map.getView().fitExtent(kml_source.getExtent(), (map.getSize()));
});
var intersections = new ol.source.Vector();
var intersections_layer = new ol.layer.Vector({
source : intersections,
style : new ol.style.Style({
fill : new ol.style.Fill({
color : 'rgba(255, 155, 51, 0.5)'
})
})
});
var map = new ol.Map({
target : 'map',
layers : [ osm_layer, kml_layer, intersections_layer ],
});
// The features are not added to a regular vector layer/source,
// but to a feature overlay which holds a collection of features.
// This collection is passed to the modify and also the draw
// interaction, so that both can add or modify features.
var featureOverlay = new ol.FeatureOverlay({
style : new ol.style.Style({
fill : new ol.style.Fill({
color : 'rgba(255, 155, 51, 0.5)'
}),
stroke : new ol.style.Stroke({
color : '#ffcc33',
width : 4
}),
image : new ol.style.Circle({
radius : 5,
fill : new ol.style.Fill({
color : '#ffcc33'
})
})
})
});
featureOverlay.setMap(map);
var selected_features = featureOverlay.getFeatures();
selected_features.on('add', function(event) {
var feature = event.element;
feature.on("change", function(event) {
displayInfo();
});
});
var modify = new ol.interaction.Modify({
features : featureOverlay.getFeatures(),
// the SHIFT key must be pressed to delete vertices, so
// that new vertices can be drawn at the same position
// of existing vertices
deleteCondition : function(event) {
return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
}
});
map.addInteraction(modify);
draw = new ol.interaction.Draw({
features : featureOverlay.getFeatures(),
type : 'Polygon'
});
map.addInteraction(draw);
var sketch;
draw.on('drawstart', function(evt) {
sketch = evt.feature;
reset_btn.disabled = false;
});
var sourceProj = map.getView().getProjection();
var geoJSONformat = new ol.format.GeoJSON();
function findIntersections() {
var features = kml_source.getFeatures();
var sketch_area = sketch.getGeometry().getArea();
var poly1 = geoJSONformat.writeFeatureObject(sketch);
var intersection_found = false;
intersections.clear();
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var poly2 = geoJSONformat.writeFeatureObject(feature);
try {
var jsonIntersection = turf.intersect(poly1, poly2);
if (undefined != jsonIntersection) {
if (!intersection_found) {
$('#dataPanel').append("Intersection found with :<br/>\n");
intersection_found = true;
}
var intersection = geoJSONformat.readFeature(jsonIntersection);
var intersectionArea = intersection.getGeometry().getArea();
var citygmlArea = feature.getGeometry().getArea();
var citygml_percentage = Math.round(intersectionArea / citygmlArea * 100);
var sketch_percentage = Math.round(intersectionArea / sketch_area * 100);
intersections.addFeature(intersection);
$('#dataPanel').append(feature.get('description') + " (" + citygml_percentage + "%");
if (sketch_percentage == 100) {
$('#dataPanel').append(", all inside");
}
$('#dataPanel').append(")<br/>\n");
}
} catch (err) {
console.log(feature.get('description') + " - " + err);
}
}
if (!intersection_found) {
$('#dataPanel').append("No intersection found with any CityGML<br/>\n");
}
}
function displayInfo() {
var start = new Date().getTime();
$('#dataPanel').empty();
var geom = /** @type {ol.geom.Polygon} */
(sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
var coordinates = geom.getLinearRing(0).getCoordinates();
var area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
var coords = geom.getLinearRing(0).getCoordinates();
var gsk3_coords = "";
var wgs84_coords = "";
var n = coords.length - 1;
for (var i = 0; i < n; i++) {
var wgs84_coord = coords[i];
wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")<br/>";
var gsk3_coord = ol.proj.transform(coords[i], ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:31467'))
gsk3_coords += "(" + gsk3_coord[0] + "," + gsk3_coord[1] + ")<br/>";
}
$('#dataPanel').append("WGS84 Coordinates<br/>");
$('#dataPanel').append(wgs84_coords + "<br/>\n");
$('#dataPanel').append("GSK3 Coordinates<br/>");
$('#dataPanel').append(gsk3_coords + "<br/>\n");
$('#dataPanel').append("Area" + "<br/>\n");
$('#dataPanel').append((Math.round(area / 1000) / 10).toString() + " ha<br/><br/>\n");
findIntersections();
var end = new Date().getTime();
var time = end - start;
console.log('Execution time: ' + time);
}
draw.on('drawend', function(e) {
displayInfo();
reset_btn.disabled = false;
send_btn.disabled = false;
});
$('#reset').click(function() {
// TODO: Should also remove current drawing if polygon isn't finished
$('#dataPanel').empty();
featureOverlay.getFeatures().clear();
intersections.clear();
reset_btn.disabled = true;
send_btn.disabled = true;
});
$('#send').click(function() {
var wktFormat = new ol.format.WKT();
fxapp.downloadRegion(wktFormat.writeFeature(sketch, {
dataProjection : ol.proj.get('EPSG:4326'),
featureProjection : ol.proj.get('EPSG:3857')
}));
});
website/style/ol.css
View file @ c548ba99
.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:#95b9e6;background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{position:absolute;background-color:#eee;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:#7b98bc;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:#4c6079;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100%-1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{position:absolute;top:4.5em;left:.5em;background:#eee;background:rgba(255,255,255,.4);width:24px;height:200px}.ol-zoomslider-thumb{position:absolute;background:#7b98bc;background:rgba(0,60,136,.5);border-radius:2px;cursor:pointer;height:10px;width:22px;margin:3px}.ol-touch .ol-zoomslider{top:5.5em;width:2.052em}.ol-touch .ol-zoomslider-thumb{width:1.8em}.ol-overviewmap{position:absolute;left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}
\ No newline at end of file
.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:#95b9e6;background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{position:absolute;background-color:#eee;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:#7b98bc;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:#4c6079;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{position:absolute;top:4.5em;left:.5em;background:#eee;background:rgba(255,255,255,.4);width:24px;height:200px}.ol-zoomslider-thumb{position:absolute;background:#7b98bc;background:rgba(0,60,136,.5);border-radius:2px;cursor:pointer;height:10px;width:22px;margin:3px}.ol-touch .ol-zoomslider{top:5.5em;width:2.052em}.ol-touch .ol-zoomslider-thumb{width:1.8em}.ol-overviewmap{position:absolute;left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}
\ No newline at end of file
website/style/style.css
View file @ c548ba99
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
font-family:Arial, Helvetica, sans-serif;
}
form.pay{
width:200px;
display:inline;
}
div#header{
vertical-align:middle;
border-bottom:1px solid #000;
}
div#map{
width:70%;
height:70%;
float:left;
}
div#side{
width:30%;
float:left;
}
div#dataPanel{
width:90%;
height:50%;
overflow:auto;
border:2px solid #DDDDDD;
}
div#side input{
width:90%;
}
div#side input.navi{
font-size:18px;
height:30px;
margin-bottom:10px;
}
div ul{
margin-top:30px;
margin-bottom:30px;
}
div ul li{
display: inline;
list-style-type: none;
padding-right: 40px;
font-size:18px;
font-weight:bold;
}
div ul li.title{
font-size:22px;
color:#888;
}
div#header p{
color:#888;
font-size:14px;
padding-left:20px;
}
span.instruction{
font-weight:bold;
}
.message-box { text-align: center; padding: 5px; color:#545454; width:80%; margin:5px auto; font-size:12px;}
.clean { background-color: #efefef; border-top: 2px solid #dedede; border-bottom: 2px solid #dedede; }
.info { background-color: #f7fafd; border-top: 2px solid #b5d3ff; border-bottom: 2px solid #b5d3ff; }
.ok { background-color: #d7f7c4; border-top: 2px solid #82cb2f; border-bottom: 2px solid #82cb2f; }
.alert { background-color: #fef5be; border-top: 2px solid #fdd425; border-bottom: 2px solid #fdd425; }
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
font-family:Arial, Helvetica, sans-serif;
}
form.pay{
width:200px;
display:inline;
}
div#header{
vertical-align:middle;
border-bottom:1px solid #000;
}
div#map{
width:70%;
height:70%;
float:left;
}
div#side{
width:30%;
float:left;
}
div#dataPanel{
width:90%;
height:50%;
overflow:auto;
border:2px solid #DDDDDD;
}
div#side input{
width:90%;
}
div#side input.navi{
font-size:18px;
height:30px;
margin-bottom:10px;
}
div ul{
margin-top:30px;
margin-bottom:30px;
}
div ul li{
display: inline;
list-style-type: none;
padding-right: 40px;
font-size:18px;
font-weight:bold;
}
div ul li.title{
font-size:22px;
color:#888;
}
div#header p{
color:#888;
font-size:14px;
padding-left:20px;
}
span.instruction{
font-weight:bold;
}
.message-box { text-align: center; padding: 5px; color:#545454; width:80%; margin:5px auto; font-size:12px;}
.clean { background-color: #efefef; border-top: 2px solid #dedede; border-bottom: 2px solid #dedede; }
.info { background-color: #f7fafd; border-top: 2px solid #b5d3ff; border-bottom: 2px solid #b5d3ff; }
.ok { background-color: #d7f7c4; border-top: 2px solid #82cb2f; border-bottom: 2px solid #82cb2f; }
.alert { background-color: #fef5be; border-top: 2px solid #fdd425; border-bottom: 2px solid #fdd425; }
.error { background-color: #ffcdd1; border-top: 2px solid #e10c0c; border-bottom: 2px solid #e10c0c; }
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal