Adding mapbox-gl branch

mapbox-gl/resources/display-frame-rate.js

@@ -0,0 +1,39 @@
+/**
+ * Display frame rate in a span element added to the navigation bar.
+ */
+(function() {
+
+  var container = document.querySelector('.navbar .navbar-inner .container');
+  if (!container) {
+    return;
+  }
+
+  if (!window.requestAnimationFrame) {
+    return;
+  }
+
+  var fpsElement = document.createElement('span');
+  fpsElement.style.color = 'white';
+
+  container.appendChild(fpsElement);
+
+  var frameCount = 0;
+  var begin = +new Date();
+
+  window.setInterval(function() {
+    var end = +new Date();
+    var milliseconds = end - begin;
+    var seconds = milliseconds / 1000.0;
+    var frameRate = frameCount / seconds;
+    fpsElement.innerHTML = frameRate.toPrecision(4) + ' fps';
+    frameCount = 0;
+    begin = end;
+  }, 500);
+
+  var go = function() {
+    frameCount++;
+    window.requestAnimationFrame(go);
+  };
+  go();
+
+})();

mapbox-gl/resources/example-behaviour.js

@@ -0,0 +1,263 @@
+;(function() {
+  if (window.location.host === 'localhost:3000') {
+    return;
+  }
+  var container = $('.navbar .navbar-inner .container')[0],
+      form = document.createElement('form'),
+      select = document.createElement('select'),
+      possibleModes = {
+        'raw' : 'Development',
+        'advanced': 'Production'
+      },
+      urlMode = window.location.href.match(/mode=([a-z0-9\-]+)\&?/i),
+      curMode = urlMode ? urlMode[1] : 'advanced',
+      option,
+      modeIdx,
+      mode,
+      modeTxt,
+      modeChangedMethod;
+
+  if (!container) {
+    return;
+  }
+
+  modeChangedMethod = function() {
+    var newMode = this.value,
+        search = window.location.search.substring(1),
+        baseUrl = window.location.href.split('?')[0],
+        chunks = search ? search.split('&') : [],
+        pairs = [],
+        i,
+        pair,
+        adjusted,
+        modeFound = false;
+    for (i = chunks.length - 1; i >= 0; --i) {
+      pair = chunks[i].split('=');
+      if (pair[0].toLowerCase() === 'mode') {
+        pair[1] = newMode;
+        modeFound = true;
+      }
+      adjusted = encodeURIComponent(pair[0]);
+      if (typeof pair[1] !== undefined) {
+        adjusted += '=' + encodeURIComponent(pair[1] || '');
+      }
+      pairs.push(adjusted);
+    }
+    if (!modeFound) {
+      pairs.push('mode=' + encodeURIComponent(newMode));
+    }
+    location.href = baseUrl + '?' + pairs.join('&');
+  };
+
+  for (mode in possibleModes) {
+    if ( possibleModes.hasOwnProperty(mode) ) {
+      option = document.createElement('option');
+      modeTxt = possibleModes[mode];
+      option.value = mode;
+      option.innerHTML = modeTxt;
+      option.selected = curMode === mode;
+      select.appendChild(option);
+    }
+  }
+
+  $(select).change(modeChangedMethod);
+  select.className = 'input-medium';
+
+  form.className = 'navbar-form pull-right';
+  form.appendChild(select);
+
+  container.appendChild(form);
+})();
+
+var exampleNS = {};
+
+exampleNS.getRendererFromQueryString = function() {
+  var obj = {}, queryString = location.search.slice(1),
+      re = /([^&=]+)=([^&]*)/g, m;
+
+  while (m = re.exec(queryString)) {
+    obj[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
+  }
+  if ('renderers' in obj) {
+    return obj['renderers'].split(',');
+  } else if ('renderer' in obj) {
+    return [obj['renderer']];
+  } else {
+    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;
+
+}
+
+exampleNS.strToBase64 = function(str) {
+  return base64EncArr(strToUTF8Arr(str));
+};

mapbox-gl/resources/layout.css

@@ -0,0 +1,31 @@
+@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700);
+
+body {
+  padding-top: 60px;
+}
+.map {
+  height: 400px;
+  width: 100%;
+  background: url(textured_paper.jpeg) repeat;
+}
+.ol-attribution {
+  max-width: calc(100% - 3em);
+}
+.ol-control button, .ol-attribution, .ol-scale-line-inner {
+  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+}
+
+#tags {
+  display: none;
+}
+
+body, h1, h2, h3, h4, p, li, td, th {
+  font-family: Quattrocento Sans;
+}
+.navbar-inverse .navbar-inner {
+  background: #1F6B75;
+}
+.navbar-inverse .brand {
+  color: white;
+  padding: 5px;
+}