Skip to content

Instantly share code, notes, and snippets.

@atlefren

atlefren/web_map_client_poc

Created April 17, 2013 19:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save atlefren/5407085 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save atlefren/5407085 to your computer and use it in GitHub Desktop.
Download ZIP
A proof of concept web map client. Requires a WMS-server that serves a map in EPSG:4326. Should not be used for anything serious
Raw
web_map_client_poc
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<style type="text/css">
#map {
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
var Map = function (element) {
this.element = element;
this.width = element.width();
this.height = element.height();
this.bbox = [-90, -180, 90, 180];
this.loadMap();
var that = this;
//for some reason dblclick interferes with mousedown/mouseup
/*
this.element.dblclick(function(e) {
that.handleClick(e);
});
*/
this.element.mousedown(function(e) {
that.mousedown(e);
});
this.element.mouseup(function(e) {
that.mouseup(e);
});
};
Map.prototype.handleClick = function (e) {
this.bbox = _.map(this.bbox, function(el) {
return el / 2;
});
this.loadMap();
};
Map.prototype.mousedown = function(e) {
this.downX = e.pageX;
this.downY = e.pageY;
};
Map.prototype.mouseup = function(e) {
var deltaX = e.pageX - this.downX;
var deltaY = e.pageY - this.downY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX > 0) {
this.moveRight();
} else {
this.moveLeft();
}
} else {
if (deltaY > 0) {
this.moveDown();
} else {
this.moveUp();
}
}
};
Map.prototype.moveUp = function() {
var delta = Math.abs(this.bbox[1]-this.bbox[3])/4;
var bbox = _.clone(this.bbox);
bbox[1] = this.bbox[1] - delta;
bbox[3] = this.bbox[3] - delta;
this.bbox = bbox;
this.loadMap();
};
Map.prototype.moveDown = function() {
var delta = Math.abs(this.bbox[1]-this.bbox[3])/4;
var bbox = _.clone(this.bbox);
bbox[1] = this.bbox[1] + delta;
bbox[3] = this.bbox[3] + delta;
this.bbox = bbox;
this.loadMap();
};
Map.prototype.moveRight = function() {
var delta = Math.abs(this.bbox[0]-this.bbox[2])/4;
console.log("move", delta);
var bbox = _.clone(this.bbox);
bbox[0] = this.bbox[0] - delta;
bbox[2] = this.bbox[2] - delta;
this.bbox = bbox;
this.loadMap();
};
Map.prototype.moveLeft = function() {
var delta = Math.abs(this.bbox[0]-this.bbox[2])/4;
var bbox = _.clone(this.bbox);
bbox[0] = this.bbox[0] + delta;
bbox[2] = this.bbox[2] + delta;
this.bbox = bbox;
this.loadMap();
};
Map.prototype.toUrlParams = function(params) {
return _.map(params, function(value, key) {
if (key !== "BBOX") {
value = encodeURIComponent(value);
}
return encodeURIComponent(key) + "=" + value;
}).join("&")
};
Map.prototype.loadMap = function () {
var params = {
"LAYERS": "world",
"STYLES": "",
"FORMAT": "image/png",
"SERVICE": "WMS",
"VERSION": "1.1.1",
"REQUEST": "GetMap",
"SRS": "EPSG:4326",
"BBOX": this.bbox.join(","),
"WIDTH": this.width,
"HEIGHT": this.height
};
console.log(this.bbox);
var url = "http://localhost:8080/geoserver/bouvet/wms?" + this.toUrlParams(params);
var mapImage = new Image();
mapImage.src = url;
mapImage.width = this.width;
mapImage.height = this.height;
var element = this.element;
mapImage.onload = function (e) {
var img = $(e.target)
element.html(img);
img.on('dragstart', function(event) { event.preventDefault(); });
}
};
$(function () {
var map = new Map($("#map"));
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment