From 14b7edb140596c879bed716f7defd257c8ea7df8 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 17 Apr 2015 09:55:31 -0600 Subject: [PATCH] Keep the examples simple Please write blog posts, create tutorials, or develop workshops that show off cool ways to develop applications that use OL3. The examples should be kept very simple. This download functionality is neat, but it's really a gratuitous use of non-map related functionality. While it does demonstrate the use of `format.writeFeatures()`, this is buried in too much additional code that is not accessible (buried in resources/common.js) and not really related to mapping things. If we want to have examples that demonstrate how formats can be used to serialize features, a simple textarea would suffice as the target. --- examples/gpx.html | 27 ++---- examples/gpx.js | 25 ----- examples/kml.html | 5 - examples/kml.js | 26 ------ examples/resources/common.js | 175 ----------------------------------- externs/example.js | 7 -- 6 files changed, 10 insertions(+), 255 deletions(-) diff --git a/examples/gpx.html b/examples/gpx.html index 5a1b5fb180..b17550b139 100644 --- a/examples/gpx.html +++ b/examples/gpx.html @@ -6,20 +6,13 @@ docs: > Example of using the GPX source. tags: "GPX" --- -
-
-
-
-
-   -
-
- - Export GPX -
-
- - +
+
+
+
+
+   +
+
+
+
diff --git a/examples/gpx.js b/examples/gpx.js index f08929c7e4..71ccc31a82 100644 --- a/examples/gpx.js +++ b/examples/gpx.js @@ -96,28 +96,3 @@ map.on('pointermove', function(evt) { map.on('click', function(evt) { displayFeatureInfo(evt.pixel); }); - -var exportGPXElement = document.getElementById('export-gpx'); -if ('download' in exportGPXElement) { - var vectorSource = vector.getSource(); - exportGPXElement.addEventListener('click', function(e) { - if (!exportGPXElement.href) { - var features = []; - vectorSource.forEachFeature(function(feature) { - var clone = feature.clone(); - clone.getGeometry().transform(projection, 'EPSG:4326'); - features.push(clone); - }); - var string = new ol.format.GPX().writeFeatures(features); - var base64 = common.strToBase64(string); - exportGPXElement.href = - 'data:text/gpx+xml;base64,' + base64; - } - }, false); -} else { - var info = document.getElementById('no-download'); - /** - * display error message - */ - info.style.display = ''; -} diff --git a/examples/kml.html b/examples/kml.html index d23ec7ceb3..a7f632b69f 100644 --- a/examples/kml.html +++ b/examples/kml.html @@ -14,10 +14,5 @@ tags: "KML"   - - Export KML diff --git a/examples/kml.js b/examples/kml.js index 47d45f3579..dd4c2ad2c9 100644 --- a/examples/kml.js +++ b/examples/kml.js @@ -63,29 +63,3 @@ map.on('pointermove', function(evt) { map.on('click', function(evt) { displayFeatureInfo(evt.pixel); }); - -var exportKMLElement = document.getElementById('export-kml'); -if ('download' in exportKMLElement) { - var vectorSource = vector.getSource(); - exportKMLElement.addEventListener('click', function(e) { - if (!exportKMLElement.href) { - var features = []; - vectorSource.forEachFeature(function(feature) { - var clone = feature.clone(); - clone.setId(feature.getId()); // clone does not set the id - clone.getGeometry().transform(projection, 'EPSG:4326'); - features.push(clone); - }); - var string = new ol.format.KML().writeFeatures(features); - var base64 = common.strToBase64(string); - exportKMLElement.href = - 'data:application/vnd.google-earth.kml+xml;base64,' + base64; - } - }, false); -} else { - var info = document.getElementById('no-download'); - /** - * display error message - */ - info.style.display = ''; -} diff --git a/examples/resources/common.js b/examples/resources/common.js index aa8da6de1e..2609dbbd7c 100644 --- a/examples/resources/common.js +++ b/examples/resources/common.js @@ -93,178 +93,3 @@ common.getRendererFromQueryString = function() { return undefined; } }; - -/*\ -|*| -|*| Base64 / binary data / UTF-8 strings utilities -|*| -|*| https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding -|*| -\*/ - -/* Array of bytes to base64 string decoding */ - -function b64ToUint6 (nChr) { - - return nChr > 64 && nChr < 91 ? - nChr - 65 - : nChr > 96 && nChr < 123 ? - nChr - 71 - : nChr > 47 && nChr < 58 ? - nChr + 4 - : nChr === 43 ? - 62 - : nChr === 47 ? - 63 - : - 0; - -} - -function base64DecToArr (sBase64, nBlocksSize) { - - var - sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, - nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen); - - for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { - nMod4 = nInIdx & 3; - nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; - if (nMod4 === 3 || nInLen - nInIdx === 1) { - for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { - taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; - } - nUint24 = 0; - - } - } - - return taBytes; -} - -/* Base64 string to array encoding */ - -function uint6ToB64 (nUint6) { - - return nUint6 < 26 ? - nUint6 + 65 - : nUint6 < 52 ? - nUint6 + 71 - : nUint6 < 62 ? - nUint6 - 4 - : nUint6 === 62 ? - 43 - : nUint6 === 63 ? - 47 - : - 65; - -} - -function base64EncArr (aBytes) { - - var nMod3 = 2, sB64Enc = ""; - - for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) { - nMod3 = nIdx % 3; - if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; } - nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24); - if (nMod3 === 2 || aBytes.length - nIdx === 1) { - sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63)); - nUint24 = 0; - } - } - - return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '=='); - -} - -/* UTF-8 array to DOMString and vice versa */ - -function UTF8ArrToStr (aBytes) { - - var sView = ""; - - for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) { - nPart = aBytes[nIdx]; - sView += String.fromCharCode( - nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */ - /* (nPart - 252 << 32) is not possible in ECMAScript! So...: */ - (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */ - (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */ - (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */ - (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */ - (nPart - 192 << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* one byte */ - nPart - ); - } - - return sView; - -} - -function strToUTF8Arr (sDOMStr) { - - var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0; - - /* mapping... */ - - for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) { - nChr = sDOMStr.charCodeAt(nMapIdx); - nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6; - } - - aBytes = new Uint8Array(nArrLen); - - /* transcription... */ - - for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) { - nChr = sDOMStr.charCodeAt(nChrIdx); - if (nChr < 128) { - /* one byte */ - aBytes[nIdx++] = nChr; - } else if (nChr < 0x800) { - /* two bytes */ - aBytes[nIdx++] = 192 + (nChr >>> 6); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x10000) { - /* three bytes */ - aBytes[nIdx++] = 224 + (nChr >>> 12); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x200000) { - /* four bytes */ - aBytes[nIdx++] = 240 + (nChr >>> 18); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x4000000) { - /* five bytes */ - aBytes[nIdx++] = 248 + (nChr >>> 24); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else /* if (nChr <= 0x7fffffff) */ { - /* six bytes */ - aBytes[nIdx++] = 252 + /* (nChr >>> 32) is not possible in ECMAScript! So...: */ (nChr / 1073741824); - aBytes[nIdx++] = 128 + (nChr >>> 24 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } - } - - return aBytes; - -} - -common.strToBase64 = function(str) { - return base64EncArr(strToUTF8Arr(str)); -}; diff --git a/externs/example.js b/externs/example.js index 51bc480083..5f114e6387 100644 --- a/externs/example.js +++ b/externs/example.js @@ -9,10 +9,3 @@ var common; * @return {string} Renderer type. */ common.getRendererFromQueryString = function() {}; - - -/** - * @param {string} str String. - * @return {string} Base64 string. - */ -common.strToBase64 = function(str) {};