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

Proof of concept website for RegionChooser, written in html/js

parent deecc2a6
Expand all Show whitespace changes
Inline Side-by-side
website/index.html 0 → 100644
View file @ f998dd51
<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/jquery-1.4.2.min.js 0 → 100644
View file @ f998dd51
This diff is collapsed.
website/polygon.js 0 → 100644
View file @ f998dd51
/*
* 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.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);
$('#dataPanel').empty();
$('#dataPanel').append("WGS84 Coordinates<br/>");
$('#dataPanel').append(this.getData("WGS84"));
$('#dataPanel').append("GSK3 Coordinates<br/>");
$('#dataPanel').append(this.getData("GSK3"));
} else {
if (null != this.polyline) {
this.polyline.remove();
}
var dot = new Dot(latLng, this.map, this);
this.listOfDots.push(dot);
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();
}
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.cancel = function() {
if (null != this.polygon) {
(this.polygon.remove());
}
this.polygon = null;
this.deleteMis();
}
this.setCurrentDot = function(dot) {
this.currentDot = dot;
}
this.getListOfDots = function() {
return this.listOfDots;
}
this.getData = function(referenceSystem) {
if (this.polygon != null) {
var data = "";
var paths = this.polygon.getPlots();
var fromProjection = proj4('EPSG:4326');
var toProjection = proj4('EPSG:31467');
paths.getAt(0).forEach(function(value, index) {
if (referenceSystem == "WGS84") {
data += (value.toString() + "<br/>");
} else if (referenceSystem == "GSK3") {
data += "(" + (proj4(fromProjection, toProjection, [ value.lng(), value.lat() ]).toString() + ")<br/>");
}
});
return data;
} else {
return null;
}
}
}
function Dot(latLng, map, pen) {
this.latLng = latLng;
this.parent = pen;
this.markerObj = new google.maps.Marker({
position : this.latLng,
// draggable: true,
map : map
});
this.addListener = function() {
var parent = this.parent;
var thisMarker = this.markerObj;
var thisDot = this;
google.maps.event.addListener(thisMarker, 'click', function() {
parent.setCurrentDot(thisDot);
parent.draw(thisMarker.getPosition());
});
}
this.addListener();
this.getLatLng = function() {
return this.latLng;
}
this.getMarkerObj = function() {
return this.markerObj;
}
this.remove = function() {
this.markerObj.setMap(null);
}
}
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();
}
\ No newline at end of file
website/proj4.js 0 → 100644
View file @ f998dd51
This diff is collapsed.
website/style.css 0 → 100644
View file @ f998dd51
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; }
.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