Skip to content

Instantly share code, notes, and snippets.

@NickFitz

NickFitz/gall-peters-osm-projection-ol5.html

Last active September 26, 2019 19:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NickFitz/58829a65dab12a5c9be7ae40087ada9c to your computer and use it in GitHub Desktop.
Save NickFitz/58829a65dab12a5c9be7ae40087ada9c to your computer and use it in GitHub Desktop.
Download ZIP
Gall-Peters projection with OpenStreetMap tiles and OpenLayers 5
Raw
gall-peters-osm-projection-ol5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gall-Peters projection with OpenStreetMap tiles and OpenLayers 5</title>
</head>
<body>
<h1>Gall-Peters projection with OpenStreetMap tiles and OpenLayers 5</h1>
<section id="openlayers">
<h2>OpenLayers (with OpenStreetMap tiles)</h2>
<div id="openlayers-map" style="width: 500px; height: 380px; margin-bottom: 20px;"></div>
<div id="openlayers-map2" style="width: 500px; height: 380px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div class="script-example">
<script>
{
// Gall-Peters projection from https://stackoverflow.com/questions/54903080/openlayers-5-wms-tiled-map-wrapping-with-gall-peters-projection
var projname = 'EPSG:22';
var projdef = '+proj=cea +lon_0=0 +lat_ts=45 +x_0=0 +y_0=0 +ellps=WGS84 +units=m +no_defs';
proj4.defs(projname, projdef);
ol.proj.proj4.register(proj4);
const map = new ol.Map({
view: new ol.View({
center: ol.proj.fromLonLat([0,0]),
zoom: 2
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'openlayers-map'
});
const map2 = new ol.Map({
view: new ol.View({
projection: 'EPSG:22',
center: ol.proj.fromLonLat([0,0]),
zoom: 2
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'openlayers-map2'
});
}
</script>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment