Skip to content

GitLab

Commit 7356fc84 authored by duminil's avatar duminil
Browse files

All new javascript region chooser, with OpenStreeMap, OpenLayers, Citygml... 

All new javascript region chooser, with OpenStreeMap, OpenLayers, Citygml convex hulls and polygon selection.
parent 016fd1cb
Expand all Hide whitespace changes
Inline Side-by-side
website/data/citygml_hulls.kml
View file @ 7356fc84
This diff is collapsed.
website/data/convex_hull.rb 0 → 100644
View file @ 7356fc84
module ConvexHull
# after graham & andrew
def self.calculate(points)
lop = points.sort
left = lop.shift
right = lop.pop
lower, upper = [left], [left]
lower_hull, upper_hull = [], []
det_func = determinant_function(left, right)
until lop.empty?
p = lop.shift
( det_func.call(p) < 0 ? lower : upper ) << p
end
lower << right
until lower.empty?
lower_hull << lower.shift
while (lower_hull.size >= 3) &&
!convex?(lower_hull.last(3), true)
last = lower_hull.pop
lower_hull.pop
lower_hull << last
end
end
upper << right
until upper.empty?
upper_hull << upper.shift
while (upper_hull.size >= 3) &&
!convex?(upper_hull.last(3), false)
last = upper_hull.pop
upper_hull.pop
upper_hull << last
end
end
upper_hull.shift
upper_hull.pop
lower_hull + upper_hull.reverse+[left]
end
private
def self.determinant_function(p0, p1)
proc { |p| ((p0.x-p1.x)*(p.y-p1.y))-((p.x-p1.x)*(p0.y-p1.y)) }
end
def self.convex?(list_of_three, lower)
p0, p1, p2 = list_of_three
(determinant_function(p0, p2).call(p1) > 0) ^ lower
end
end
website/data/find_gsk3_bounding_boxes.rb 0 → 100644
View file @ 7356fc84
# sudo aptitude install libproj-dev
# gem install proj4rb
# This Ruby script :
# finds all the citygml files
# reads them
# find the 2D convex hull
# writes it to a kml file
require 'fileutils'
require 'proj4'
require 'builder'
require_relative 'convex_hull'
Resolution = 0.1
RepositoryDir = "../TestRepository/"
class Point
attr_reader :x,:y,:z
@@dest_prj = Proj4::Projection.new("+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs")
@@src_prj = Proj4::Projection.new("+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0 +ellps=bessel +datum=potsdam +units=m +no_defs")
def initialize(l)
@x,@y,@z = l.map{|v| v.to_f}
end
def to_s
[x,y,z].join(',')
end
def to_wgs84
wgs84_point = @@src_prj.transform(@@dest_prj, proj4_point)
['%.7f' % (wgs84_point.x*180/Math::PI), '%.7f' % (wgs84_point.y*180/Math::PI),0].join(',')
end
def <=>(p2)
[x,y]<=>[p2.x,p2.y]
end
private
def proj4_point
Proj4::Point.new(x,y)
end
end
xml = Builder::XmlMarkup.new(:target=>STDOUT, :indent=>2)
xml.instruct! :xml, :version=>"1.0", :encoding=>"UTF-8"
xml.kml do
xml.Document do
FileUtils.cd(RepositoryDir){
xmls_and_gmls = Dir["**/*"].select{|f|
File.extname(f).downcase=~/(g|x)ml/
}.sort_by{|f| File.basename(f)}
citygmls = xmls_and_gmls.select{|xml|
File.open(xml,'r'){|f|
f.read(1000)
}=~/citymodel/i
}
citygmls.each{|citygml|
basename = File.basename(citygml)
project = File.dirname(citygml).split('/').last.gsub('.simstadt','')
content = File.read(citygml).force_encoding("ISO-8859-1").encode("utf-8", replace: nil)
coordinates = content.gsub(/(low|upp)erCorner.*?Corner/,'').scan(/(?<![\d\.])(3\d\d\d\d\d\d[\.\d]*) (5\d\d\d\d\d\d[\.\d]*) ([\d\.]+)/)
next if coordinates.empty?
xml.Placemark do
xml.name basename
xml.description project+">"+basename
xml.Polygon do
xml.outerBoundaryIs do
xml.LinearRing do
xml.tessellate 1
xyz_points = coordinates.map{|l| Point.new(l)}
xy_points = xyz_points.uniq{|p| [(p.x/Resolution).round,(p.y/Resolution).round]}
hull = ConvexHull.calculate(xy_points).map{|p| p.to_wgs84}
xml.coordinates hull.join(' ')
end
end
end
end
}
}
end
end
website/gmaps/index.html deleted 100644 → 0
View file @ 016fd1cb
<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.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="proj4.js"></script>
<script type="text/javascript" src="polygon.js"></script>
<script type="text/javascript">
$(function(){
//create map
var gruenbuehl =new google.maps.LatLng(48.881, 9.213);
var myOptions = {
zoom: 16,
center: gruenbuehl ,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById('main-map'), myOptions);
var creator = new PolygonCreator(map);
//reset
$('#reset').click(function(){
creator.destroy();
creator=null;
creator=new PolygonCreator(map);
});
});
</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="main-map">
</div>
<div id="side">
<input id="reset" value="Reset" type="button" class="navi"/>
<div id="dataPanel">
</div>
</div>
</body>
</html>
website/gmaps/polygon.js deleted 100644 → 0
View file @ 016fd1cb
/*
* Developed by The Di Lab
* www.the-di-lab.com
* 22.06.2010
*/
function PolygonCreator(map) {
this.map = map;
this.pen = new Pen(this.map);
var thisOjb = this;
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/
this.event = google.maps.event.addListener(thisOjb.map, 'click', function(
event) {
thisOjb.pen.draw(event.latLng);
});
this.destroy = function() {
this.pen.deleteMis();
$('#dataPanel').empty();
if (null != this.pen.polygon) {
this.pen.polygon.remove();
}
google.maps.event.removeListener(this.event);
}
}
function Pen(map) {
this.map = map;
this.listOfDots = new Array();
this.polyline = null;
this.polygon = null;
this.currentDot = null;
this.i = 0;
this.draw = function(latLng) {
if (null != this.polygon) {
alert('Click Reset to draw another');
} else {
if (this.currentDot != null && this.listOfDots.length > 1
&& this.currentDot == this.listOfDots[0]) {
this.drawPolygon(this.listOfDots);
this.refreshInfo();
} else {
if (null != this.polyline) {
this.polyline.remove();
}
var dot = new Dot(latLng, this.i, this.map, this);
this.i += 1;
this.listOfDots.push(dot);
this.refreshInfo();
if (this.listOfDots.length > 1) {
this.polyline = new Line(this.listOfDots, this.map);
}
}
}
}
this.drawPolygon = function(listOfDots, color, des, id) {
this.polygon = new Polygon(listOfDots, this.map, this, color, des, id);
}
this.deleteMis = function() {
$.each(this.listOfDots, function(index, value) {
value.remove();
});
this.listOfDots.length = 0;
if (null != this.polyline) {
this.polyline.remove();
this.polyline = null;
}
}
this.setCurrentDot = function(dot) {
this.currentDot = dot;
}
this.getListOfDots = function() {
return this.listOfDots;
}
this.getWGS84Data = function() {
var data = "";
for (var i = 0; i < this.getListOfDots().length; i++) {
data += this.getListOfDots()[i].latLng + "<br/>";
}
return data;
}
this.refreshInfo = function() {
$('#dataPanel').empty();
$('#dataPanel').append("WGS84 Coordinates<br/>");
$('#dataPanel').append(this.getWGS84Data() + "<br/>\n");
$('#dataPanel').append("GSK3 Coordinates<br/>");
$('#dataPanel').append(this.getGSK3DataAndArea());
}
this.getGSK3DataAndArea = function(referenceSystem) {
var data = "";
var fromProjection = proj4('EPSG:4326');
var toProjection = proj4('EPSG:31467');
var xs = [];
var ys = [];
var listOfDots = this.getListOfDots();
var n = listOfDots.length;
for (var i = 0; i < n; i++) {
var latLng = listOfDots[i].latLng;
var gk3_coords = proj4(fromProjection, toProjection, [
latLng.lng(), latLng.lat() ]);
xs.push(gk3_coords[0] - 3500000);
ys.push(gk3_coords[1] - 5000000);
data += "(" + (gk3_coords.toString() + ")<br/>");
}
if (n > 2) {
data += "<br/>\nArea : "
+ (Math.round(polygonArea(xs, ys) / 1000) / 10).toString()
+ " ha<br/>";
}
return data;
}
this.updateDot = function(marker) {
var old_dot = this.listOfDots[marker.zIndex];
old_dot.setLatLng(marker.getPosition());
if (null != this.polygon) {
(this.polygon.remove());
this.polygon = null;
this.drawPolygon(this.listOfDots);
}
if (null != this.polyline) {
this.polyline.remove();
this.polyline = new Line(this.listOfDots, this.map);
}
this.refreshInfo();
}
}
function Dot(latLng, i, map, pen) {
this.latLng = latLng;
this.parent = pen;
this.markerObj = new google.maps.Marker({
position : this.latLng,
draggable : true,
map : map,
zIndex : i
});
this.addListener = function() {
var parent = this.parent;
var thisMarker = this.markerObj;
var thisDot = this;
google.maps.event.addListener(thisMarker, 'click', function() {
// console.log("CLICKED");
parent.setCurrentDot(thisDot);
parent.draw(thisMarker.getPosition());
});
}
this.addListener();
this.addListener = function() {
var parent = this.parent;
var thisMarker = this.markerObj;
var thisDot = this;
google.maps.event.addListener(thisMarker, 'drag', function() {
// console.log("DRAGGED");
parent.updateDot(thisMarker);
});
}
this.addListener();
this.getLatLng = function() {
return this.latLng;
}
this.getMarkerObj = function() {
return this.markerObj;
}
this.remove = function() {
this.markerObj.setMap(null);
}
this.setLatLng = function(latLng) {
this.latLng = latLng;
}
}
function Line(listOfDots, map) {
this.listOfDots = listOfDots;
this.map = map;
this.coords = new Array();
this.polylineObj = null;
if (this.listOfDots.length > 1) {
var thisObj = this;
$.each(this.listOfDots, function(index, value) {
thisObj.coords.push(value.getLatLng());
});
this.polylineObj = new google.maps.Polyline({
path : this.coords,
strokeColor : "#FF0000",
strokeOpacity : 1.0,
strokeWeight : 2,
map : this.map
});
}
this.remove = function() {
this.polylineObj.setMap(null);
}
}
function Polygon(listOfDots, map, pen, color) {
this.listOfDots = listOfDots;
this.map = map;
this.coords = new Array();
this.parent = pen;
this.des = 'Hello';
var thisObj = this;
$.each(this.listOfDots, function(index, value) {
thisObj.coords.push(value.getLatLng());
});
this.polygonObj = new google.maps.Polygon({
paths : this.coords,
strokeColor : "#FF0000",
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : "#FF0000",
fillOpacity : 0.35,
map : this.map
});
this.remove = function() {
this.polygonObj.setMap(null);
}
this.getContent = function() {
return this.des;
}
this.getPolygonObj = function() {
return this.polygonObj;
}
this.getListOfDots = function() {
return this.listOfDots;
}
this.getPlots = function() {
return this.polygonObj.getPaths();
}
this.addListener = function() {
var thisPolygon = this.polygonObj;
google.maps.event.addListener(thisPolygon, 'rightclick',
function(event) {
return false;
});
}
this.addListener();
}
function polygonArea(X, Y, numPoints) {
area = 0; // Accumulates area in the loop
j = X.length - 1; // The last vertex is the 'previous' one to the first
for (i = 0; i < X.length; i++) {
area = area + (X[j] + X[i]) * (Y[j] - Y[i]);
j = i; // j is previous vertex to i
}
return Math.abs(area / 2);
}
website/index.html
View file @ 7356fc84
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<script type="text/javascript" src="gmaps/proj4.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css"
type="text/css">
<style>
.map {
height: 100vh;
width: 100%;
}
</style>
<script src="http://openlayers.org/en/v3.4.0/build/ol.js"
type="text/javascript"></script>
<title>RegionChooser OpenLayers</title>
<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>
<h2>RegionChooser</h2>
<div id="map" class="map"></div>
<script src="simstadt_openlayers.js" type="text/javascript"></script>
<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>
\ No newline at end of file
</html>
website/script/ol-debug.js 0 → 100644
View file @ 7356fc84
This diff is collapsed.
website/script/ol.js 0 → 100644
View file @ 7356fc84
This diff is collapsed.
website/script/simstadt_openlayers.js 0 → 100644
View file @ 7356fc84
//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();
});
website/script/turf.js 0 → 100644
View file @ 7356fc84
This diff is collapsed.
website/simstadt_openlayers.js deleted 100644 → 0
View file @ 016fd1cb
//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 osm_layer = new ol.layer.Tile({
// source: new ol.source.MapQuest({layer: 'sat'})
source : new ol.source.OSM()
});
var kml_source = new ol.source.KML({
projection : ol.proj.get('EPSG:3857'),
url : 'data/citygml_hulls.kml'
})
var kml_layer = new ol.layer.Vector({
source : kml_source
});
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 ],
});
\ No newline at end of file
website/style/ol.css 0 → 100644
View file @ 7356fc84
.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/gmaps/style.css → website/style/style.css
View file @ 7356fc84
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#main-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
Markdown is supported
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