Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

110 lines (109 sloc) 4.208 kb
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Using Proj4JS for vector reprojection</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js"></script>
<script type="text/javascript" src="http://spatialreference.org/ref/epsg/31467/proj4js/"></script>
<script type="text/javascript" src="../lib/OpenLayers.js"></script>
<script type="text/javascript" src="./using-proj4js.js"></script>
<style type="text/css">
ul {
width: 300px;
float: left;
}
ul li {
list-style: none;
margin-bottom: .2em;
}
input {
width: 250px;
}
#shortdesc {
margin-bottom: .5em;
}
#map {
width: 256px;
height: 256px;
float: left;
margin-right: .2em;
}
#attribution,
#mouse-position-31467,
#mouse-position-4326 {
float: left;
clear: left;
font-size: .8em;
color: #444;
}
.emph {
font-weight: bold;
}
</style>
</head>
<body onload="init();">
<h1 id="title">Using Proj4JS for vector reprojection</h1>
<div id="tags">
projection, proj, proj4js, reprojection, reproject,
transform, transformation, epsg, srs
</div>
<p id="shortdesc">
This example shows how to reproject vector features within
OpenLayers. The baselayer shows Germany in the projection
EPSG:31467 (GK 3). When one clicks on the buttons, features with
geometries originally in EPSG:4326 will be transformed to the
projection of the map on-the-fly.
</p>
<p>
The features are internally reprojected with the JavaScript library
<a href="http://proj4js.org/">Proj4JS</a>. Please note that usually
you would not inlude Proj4JS the way it is done in this example.
In a production environment you would furthermore have a local copy
of the Proj4JS-projection definition that is hotlinked in this
example (see Graticule example for how to do this).
</p>
<div id="map">
</div>
<ul>
<li>
<input type="button" value="Add Cologne (~ 6.97, 50.95)"
onclick="addVector(6.966667, 50.95, this);"
id="btnCologne">
</li>
<li>
<input type="button" value="Add Berlin (~ 13.40, 52.50)"
onclick="addVector(13.398889, 52.500556, this);"
id="btnBerlin">
</li>
<li>
<input type="button" value="Add Hamburg (~ 10.00, 53.57)"
onclick="addVector(10.001389, 53.565278, this);"
id="btnHamburg">
</li>
<li>
<input type="button" value="Add Munich (~ 11.57, 48.13)"
onclick="addVector(11.566667, 48.133333, this);"
id="btnMunich">
</li>
<li>
<input type="button" value="Add country outline (polygon)"
onclick="addOutline(this);" id="btnGermany">
</li>
<li>
<input type="button" value="...clear vector features"
onclick="clearVectors();">
</li>
<li>
<div id="status">
</div>
</li>
</ul>
<div id="attribution"></div>
<div id="mouse-position-4326"></div>
<div id="mouse-position-31467"></div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.