ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Keep the examples simple

Browse Source 
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.
This commit is contained in:
Tim Schaub
2015-04-17 09:55:31 -06:00
parent c5cf709c55
commit 14b7edb140
6 changed files with 10 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
examples/gpx.html
View File

@@ -6,7 +6,7 @@ docs: >
Example of using the GPX source.
tags: "GPX"
---
<div class="row-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
@@ -14,12 +14,5 @@ tags: "GPX"
&nbsp;
</div>
</div>
<div id="no-download" class="alert alert-error" style="display: none">
The "Export GPX" functionality requires a browser that supports the
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
</div>
<a id="export-gpx" class="btn" download="map.gpx"><i class="icon-download"></i>Export GPX</a>
</div>
</div>
</div>
</div>

25
examples/gpx.js
View File

@@ -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 = '';
}

5
examples/kml.html
View File

@@ -14,10 +14,5 @@ tags: "KML"
&nbsp;
</div>
</div>
<div id="no-download" class="alert alert-error" style="display: none">
The "Export KML" functionality requires a browser that supports the
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
</div>
<a id="export-kml" class="btn" download="map.kml"><i class="icon-download"></i>Export KML</a>
</div>
</div>

26
examples/kml.js
View File

@@ -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 = '';
}

175
examples/resources/common.js
View File

@@ -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));
};

7
externs/example.js
View File

@@ -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) {};