Add reprojection example with proj4 defs loading from EPSG.io

examples/reprojection-by-code.html

@@ -0,0 +1,26 @@
+---
+template: example.html
+title: Reprojection with EPSG.io database search
+shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to any projection
+docs: >
+  This example shows client-side raster reprojection capabilities of
+  OpenLayers 3 from MapQuest OSM (EPSG:3857) to any projection by searching
+  in <a href="http://epsg.io/">EPSG.io</a> database.
+tags: "reprojection, projection, proj4js, mapquest, epsg.io"
+resources:
+  - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+  <form class="form-inline">
+    <label for="epsg-query">Search projection:</label>
+    <input type="text" id="epsg-query" placeholder="4326, 27700, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
+    <button id="epsg-search" class="btn">Search</button>
+    <span id="epsg-result"></span>
+    <div>
+      <label for="render-edges"><input type="checkbox" id="render-edges" />Render reprojection edges</label>
+    </div>
+  </form>
+</div>

examples/reprojection-by-code.js

@@ -0,0 +1,112 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.extent');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.TileImage');
+
+
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.MapQuest({layer: 'osm'})
+    })
+  ],
+  renderer: common.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    projection: 'EPSG:3857',
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+
+var queryInput = document.getElementById('epsg-query');
+var searchButton = document.getElementById('epsg-search');
+var resultSpan = document.getElementById('epsg-result');
+var renderEdgesCheckbox = document.getElementById('render-edges');
+
+function setProjection(code, name, proj4def, bbox) {
+  if (code === null || name === null || proj4def === null || bbox === null) {
+    resultSpan.innerHTML = 'Nothing usable found, using EPSG:3857...';
+    map.setView(new ol.View({
+      projection: 'EPSG:3857',
+      center: [0, 0],
+      zoom: 1
+    }));
+    return;
+  }
+
+  resultSpan.innerHTML = '(' + code + ') ' + name;
+
+  var newProjCode = 'EPSG:' + code;
+  proj4.defs(newProjCode, proj4def);
+  var newProj = ol.proj.get(newProjCode);
+  var fromLonLat = ol.proj.getTransform('EPSG:4326', newProj);
+
+  // very approximate calculation of projection extent
+  var extent = ol.extent.applyTransform(
+      [bbox[1], bbox[2], bbox[3], bbox[0]], fromLonLat);
+  newProj.setExtent(extent);
+  var newView = new ol.View({
+    projection: newProj
+  });
+  map.setView(newView);
+
+  var size = map.getSize();
+  if (size) {
+    newView.fit(extent, size);
+  }
+}
+
+
+function search(query) {
+  resultSpan.innerHTML = 'Searching...';
+  $.ajax('http://epsg.io/?format=json&q=' + query).then(function(response) {
+    if (response) {
+      var results = response['results'];
+      if (results && results.length > 0) {
+        for (var i = 0; i < results.length; i++) {
+          var result = results[i];
+          if (result) {
+            var code = result['code'], name = result['name'],
+                proj4def = result['proj4'], bbox = result['bbox'];
+            if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
+                bbox && bbox.length == 4) {
+              setProjection(code, name, proj4def, bbox);
+              return;
+            }
+          }
+        }
+      }
+    }
+    setProjection(null, null, null, null);
+  });
+}
+
+
+/**
+ * @param {Event} e Change event.
+ */
+searchButton.onclick = function(e) {
+  search(queryInput.value);
+  e.preventDefault();
+};
+
+
+/**
+ * @param {Event} e Change event.
+ */
+renderEdgesCheckbox.onchange = function(e) {
+  map.getLayers().forEach(function(layer) {
+    if (layer instanceof ol.layer.Tile) {
+      var source = layer.getSource();
+      if (source instanceof ol.source.TileImage) {
+        source.setRenderReprojectionEdges(renderEdgesCheckbox.checked);
+      }
+    }
+  });
+};