Merge branch 'master' into patch-4

2020-03-11 17:10:03 +00:00
parent 7af9697b40 f448d7179a
commit 874b850d76
35 changed files with 1034 additions and 1364 deletions
--- a/config/jsdoc/api/plugins/api.js
+++ b/config/jsdoc/api/plugins/api.js
@@ -106,6 +106,33 @@ function includeTypes(doclet) {
  }
 }

+const defaultExports = {};
+const path = require('path');
+const moduleRoot = path.join(process.cwd(), 'src');
+
+// Tag default exported Identifiers because their name should be the same as the module name.
+exports.astNodeVisitor = {
+  visitNode: function(node, e, parser, currentSourceName) {
+    if (node.type === 'Identifier' && node.parent.type === 'ExportDefaultDeclaration') {
+      const modulePath = path.relative(moduleRoot, currentSourceName).replace(/\.js$/, '');
+      defaultExports['module:' + modulePath.replace(/\\/g, '/') + '~' + node.name] = true;
+    }
+  }
+};
+
+function sortOtherMembers(doclet) {
+  if (doclet.fires) {
+    doclet.fires.sort(function(a, b) {
+      return a.split(/#?event:/)[1] < b.split(/#?event:/)[1] ? -1 : 1;
+    });
+  }
+  if (doclet.observables) {
+    doclet.observables.sort(function(a, b) {
+      return a.name < b.name ? -1 : 1;
+    });
+  }
+}
+
 exports.handlers = {

  newDoclet: function(e) {
@@ -135,16 +162,7 @@ exports.handlers = {
        if (doclet.kind == 'class') {
          includeAugments(doclet);
        }
-        if (doclet.fires) {
-          doclet.fires.sort(function(a, b) {
-            return a.split(/#?event:/)[1] < b.split(/#?event:/)[1] ? -1 : 1;
-          });
-        }
-        if (doclet.observables) {
-          doclet.observables.sort(function(a, b) {
-            return a.name < b.name ? -1 : 1;
-          });
-        }
+        sortOtherMembers(doclet);
        // Always document namespaces and items with stability annotation
        continue;
      }
@@ -161,6 +179,7 @@ exports.handlers = {
        // constructor from the docs.
        doclet._hideConstructor = true;
        includeAugments(doclet);
+        sortOtherMembers(doclet);
      } else if (!doclet._hideConstructor && !(doclet.kind == 'typedef' && doclet.longname in types)) {
        // Remove all other undocumented symbols
        doclet.undocumented = true;
@@ -169,6 +188,15 @@ exports.handlers = {
        delete doclet.undocumented;
      }
    }
+  },
+
+  processingComplete(e) {
+    const byLongname = e.doclets.index.longname;
+    for (const name in defaultExports) {
+      byLongname[name].forEach(function(doclet) {
+        doclet.isDefaultExport = true;
+      });
+    }
  }

 };
--- a/config/jsdoc/api/template/publish.js
+++ b/config/jsdoc/api/template/publish.js
@@ -14,7 +14,6 @@ const path = require('jsdoc/lib/jsdoc/path');
 const taffy = require('taffydb').taffy;
 const handle = require('jsdoc/lib/jsdoc/util/error').handle;
 const helper = require('jsdoc/lib/jsdoc/util/templateHelper');
-const _ = require('underscore');
 const htmlsafe = helper.htmlsafe;
 const linkto = helper.linkto;
 const resolveAuthorLinks = helper.resolveAuthorLinks;
@@ -188,10 +187,12 @@ function attachModuleSymbols(doclets, modules) {
  });
 }

-function getPrettyName(longname) {
-  return longname
-    .split('~')[0]
-    .replace('module:', '');
+function getPrettyName(doclet) {
+  const fullname = doclet.longname.replace('module:', '');
+  if (doclet.isDefaultExport) {
+    return fullname.split('~')[0];
+  }
+  return fullname;
 }

 /**
@@ -209,27 +210,13 @@ function getPrettyName(longname) {
 */
 function buildNav(members) {
  const nav = [];
-  // merge namespaces and classes, then sort
-  const merged = members.modules.concat(members.classes);
-  merged.sort(function(a, b) {
-    const prettyNameA = getPrettyName(a.longname).toLowerCase();
-    const prettyNameB = getPrettyName(b.longname).toLowerCase();
-    if (prettyNameA > prettyNameB) {
-      return 1;
-    }
-    if (prettyNameA < prettyNameB) {
-      return -1;
-    }
-    return 0;
-  });
-
-  _.each(merged, function(v) {
+  members.classes.forEach(function(v) {
    // exclude interfaces from sidebar
-    if (v.interface !== true && v.kind === 'class') {
+    if (v.interface !== true) {
      nav.push({
        type: 'class',
        longname: v.longname,
-        prettyname: getPrettyName(v.longname),
+        prettyname: getPrettyName(v),
        name: v.name,
        module: find({
          kind: 'module',
@@ -253,44 +240,57 @@ function buildNav(members) {
          memberof: v.longname
        })
      });
-    } else if (v.kind == 'module') {
-      const classes = find({
-        kind: 'class',
-        memberof: v.longname
-      });
-      const members = find({
-        kind: 'member',
-        memberof: v.longname
-      });
-      const methods = find({
-        kind: 'function',
-        memberof: v.longname
-      });
-      const typedefs = find({
-        kind: 'typedef',
-        memberof: v.longname
-      });
-      const events = find({
-        kind: 'event',
-        memberof: v.longname
-      });
-      // Only add modules that contain more than just classes with their
-      // associated Options typedef
-      if (typedefs.length > classes.length || members.length + methods.length > 0) {
-        nav.push({
-          type: 'module',
-          longname: v.longname,
-          prettyname: getPrettyName(v.longname),
-          name: v.name,
-          members: members,
-          methods: methods,
-          typedefs: typedefs,
-          fires: v.fires,
-          events: events
-        });
-      }
    }
  });
+  members.modules.forEach(function(v) {
+    const classes = find({
+      kind: 'class',
+      memberof: v.longname
+    });
+    const members = find({
+      kind: 'member',
+      memberof: v.longname
+    });
+    const methods = find({
+      kind: 'function',
+      memberof: v.longname
+    });
+    const typedefs = find({
+      kind: 'typedef',
+      memberof: v.longname
+    });
+    const events = find({
+      kind: 'event',
+      memberof: v.longname
+    });
+    // Only add modules that contain more than just classes with their
+    // associated Options typedef
+    if (typedefs.length > classes.length || members.length + methods.length > 0) {
+      nav.push({
+        type: 'module',
+        longname: v.longname,
+        prettyname: getPrettyName(v),
+        name: v.name,
+        members: members,
+        methods: methods,
+        typedefs: typedefs,
+        fires: v.fires,
+        events: events
+      });
+    }
+  });
+
+  nav.sort(function(a, b) {
+    const prettyNameA = a.prettyname.toLowerCase();
+    const prettyNameB = b.prettyname.toLowerCase();
+    if (prettyNameA > prettyNameB) {
+      return 1;
+    }
+    if (prettyNameA < prettyNameB) {
+      return -1;
+    }
+    return 0;
+  });
  return nav;
 }

--- a/config/jsdoc/api/template/static/scripts/main.js
+++ b/config/jsdoc/api/template/static/scripts/main.js
@@ -1,99 +1,258 @@
 $(function () {
-  // Search Items
-  $('#include_modules').change(function (e) {
-    console.log('change');
-    if ($(this).is(':checked')) {
+  'use strict';

+  // Allow user configuration?
+  const allowRegex = true;
+  const minInputForSearch = 1;
+  const minInputForFullText = 2;
+  const expandAllOnInputWithoutSearch = true;
+
+  function constructRegex(searchTerm, makeRe, allowRegex) {
+    try {
+      if (allowRegex) {
+        return makeRe(searchTerm);
+      }
+    } catch (e) {
+    }
+    // In case of invalid regexp fall back to non-regexp, but still allow . to match /
+    return makeRe(searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/\\\./g, '[./]'));
+  }
+
+  function getWeightFunction(searchTerm, allowRegex) {
+    function makeRe(searchTerm) {
+      return {
+        begin: new RegExp('\\b' + searchTerm), // Begin matches word boundary
+        baseName: new RegExp('\\b' + searchTerm + '[^/]*$'), // Begin matches word boundary of class / module name
+        fullName: new RegExp('\\b' + searchTerm + '(?:[~.]|$)'), // Complete word(s) of class / module matches
+        completeName: new RegExp('^' + searchTerm + '$') // Match from start to finish
+      }
+    }
+    const re = constructRegex(searchTerm, makeRe, allowRegex);
+    return function (matchedItem, beginOnly) {
+      // We could get smarter on the weight here
+      const name = matchedItem.dataset.name;
+      if (beginOnly) {
+        return re.baseName.test(name) ? 100 : 1;
+      }
+      // If everything else is equal, prefer shorter names, and prefer classes over modules
+      let weight = 10000 + matchedItem.dataset.longname.length - name.length * 100;
+      if (name.match(re.begin)) {
+        weight += 10000;
+        if (re.baseName.test(name)) {
+          weight += 10000;
+          if (re.fullName.test(name)) {
+            weight += 10000;
+            if (re.completeName.test(name)) {
+              weight += 10000;
+            }
+          }
+        }
+      }
+      return weight;
+    }
+  }
+
+  const search = (function () {
+    const $navList = $('.navigation-list');
+    const navListNode = $navList.get(0);
+    let $classItems;
+    let $members;
+    let stateClass = (function () {
+      $navList.removeClass('search-started searching');
+      $navList.addClass('search-empty');
+      return 'search-empty';
+    })();
+    let manualToggles = {};
+
+    // Show an item related a current documentation automatically
+    const longname = $('.page-title').data('filename')
+      .replace(/\.[a-z]+$/, '')
+      .replace('module-', 'module:')
+      .replace(/_/g, '/')
+      .replace(/-/g, '~');
+    const currentItem = navListNode.querySelector('.item[data-longname="' + longname + '"]');
+    if (currentItem) {
+      $navList.prepend(currentItem);
+    }
+    return {
+      $navList: $navList,
+      $currentItem: currentItem ? $(currentItem) : undefined,
+      lastSearchTerm: undefined,
+      lastState: {},
+      getClassList: function () {
+        return $classItems || ($classItems = $navList.find('li.item'));
+      },
+      getMembers: function () {
+        return $members || ($members = $navList.find('.item li'));
+      },
+      changeStateClass: function (newClass) {
+        if (newClass !== stateClass) {
+          navListNode.classList.remove(stateClass);
+          navListNode.classList.add(newClass);
+          stateClass = newClass;
+        }
+      },
+      manualToggle: function ($node, show) {
+        $node.addClass('toggle-manual');
+        $node.toggleClass('toggle-manual-hide', !show);
+        $node.toggleClass('toggle-manual-show', show);
+        manualToggles[$node.data('longname')] = $node;
+      },
+      clearManualToggles: function() {
+        for (let clsName in manualToggles) {
+          manualToggles[clsName].removeClass('toggle-manual toggle-manual-show toggle-manual-hide');
+        }
+        manualToggles = {};
+      },
+    };
+  })();
+
+  const dummy = {subItems: {}};
+  function clearOldMatches(lastState, searchState) {
+    for (let itemName in lastState) {
+      const lastItem = lastState[itemName];
+      const item = searchState[itemName];
+      if (!item) {
+        lastItem.item.classList.remove('match');
+      }
+      if (lastItem.subItems) {
+        clearOldMatches(lastItem.subItems, (item || dummy).subItems);
+      }
+    }
+  }
+
+  function doSearch(searchTerm) {
+    searchTerm = searchTerm.toLowerCase();
+    const lastSearchTerm = search.lastSearchTerm;
+    if (searchTerm === lastSearchTerm) {
+      return;
+    }
+
+    // Avoid layout reflow by scrolling to top first.
+    search.$navList.scrollTop(0);
+    search.lastSearchTerm = searchTerm;
+    search.clearManualToggles();
+
+    if (searchTerm.length < minInputForSearch) {
+      const state = searchTerm.length && expandAllOnInputWithoutSearch ? 'search-started' : 'search-empty';
+      search.changeStateClass(state);
+      if (lastSearchTerm !== undefined && lastSearchTerm.length >= minInputForSearch) {
+        // Restore the original, sorted order
+        search.$navList.append(search.getClassList());
+      }
+      if (state === 'search-empty' && search.$currentItem) {
+        search.manualToggle(search.$currentItem, true);
+      }
    } else {
-
-    }
-  });
-
-  var getSearchWeight = function (searchTerm, $matchedItem) {
-    let weight = 0;
-    // We could get smarter on the weight here
-    if ($matchedItem.data('shortname')
-      && $matchedItem.data('shortname').toLowerCase() === searchTerm.toLowerCase()) {
-      weight++;
-    }
-    return weight;
-  };
-
-  // sort function callback
-  var weightSorter = function (a, b) {
-    var aW = $(a).data('weight') || 0;
-    var bW = $(b).data('weight') || 0;
-    return bW - aW;
-  };
-
-  // Search Items
-  $('#search').on('keyup', function (e) {
-    var value = $(this).val();
-    var $el = $('.navigation');
-
-    if (value && value.length > 1) {
-      var regexp = new RegExp(value, 'i');
-      $el.find('li, .member-list').hide();
-
-      $el.find('li').each(function (i, v) {
-        const $item = $(v);
-        const name = $item.data('name');
-
-        if (name && regexp.test(name)) {
-          const $classEntry = $item.closest('.item');
-          const $members = $item.closest('.member-list');
-
-          // Do the weight thing
-          $classEntry.removeData('weight');
-          $classEntry.show();
-          const weight = getSearchWeight(value, $classEntry);
-          $classEntry.data('weight', weight);
-
-          $members.show();
-          $classEntry.show();
-          $item.show();
+      search.changeStateClass('searching');
+      searchTerm = searchTerm.toLowerCase();
+      const beginOnly = searchTerm.length < minInputForFullText;
+      const getSearchWeight = getWeightFunction(searchTerm, allowRegex);
+      const re = constructRegex(searchTerm, function (searchTerm) {
+        return new RegExp((beginOnly ? '\\b' : '') + searchTerm);
+      }, allowRegex);
+      const navList = search.$navList.get(0);
+      const classes = [];
+      const searchState = {};
+      search.getClassList().each(function (i, classEntry) {
+        const className = classEntry.dataset.longname;
+        if (!(className in searchState) && re.test(classEntry.dataset.name)) {
+          const cls = searchState[className] = {
+            item: classEntry,
+            // Do the weight thing
+            weight: getSearchWeight(classEntry, beginOnly) * 100000,
+            subItems: {}
+          };
+          classes.push(cls);
+          classEntry.classList.add('match');
        }
      });
+      search.getMembers().each(function (i, li) {
+        const name = li.dataset.name;
+        if (re.test(name)) {
+          const itemMember = li.parentElement.parentElement;
+          const classEntry = itemMember.parentElement;
+          const className = classEntry.dataset.longname;
+          let cls = searchState[className];
+          if (!cls) {
+            cls = searchState[className] = {
+              item: classEntry,
+              weight: 0,
+              subItems: {}
+            };
+            classes.push(cls);
+            classEntry.classList.add('match');
+          }
+          cls.weight += getSearchWeight(li, true);
+          const memberType = itemMember.dataset.type;
+          let members = cls.subItems[memberType];
+          if (!members) {
+            members = cls.subItems[memberType] = {
+              item: itemMember,
+              subItems: {}
+            };
+            itemMember.classList.add('match');
+          }
+          members.subItems[name] = { item: li };
+          li.classList.add('match');
+        }
+      });
+      clearOldMatches(search.lastState, searchState);
+      search.lastState = searchState;

-      $(".navigation ul.list li.item:visible")
-        .sort(weightSorter) // sort elements
-        .appendTo(".navigation ul.list"); // append again to the list
-
-    } else {
-      $el.find('.item, .member-list').show();
+      classes.sort(function (a, b) {
+        return a.weight - b.weight;
+      });
+      for (let i = classes.length - 1; i >= 0; --i) {
+        navList.appendChild(classes[i].item);
+      }
    }
+  }

-    $el.find('.list').scrollTop(0);
-  });
+  const searchInput = $('#search').get(0);
+  // Skip searches when typing fast.
+  let key;
+  function queueSearch() {
+    if (!key) {
+      key = setTimeout(function () {
+        key = undefined;
+
+        const searchTerm = searchInput.value;
+        doSearch(searchTerm);
+      }, 0);
+    }
+  }
+
+  // Search Items
+  searchInput.addEventListener('input', queueSearch);
+  doSearch(searchInput.value);

  // Toggle when click an item element
-  $('.navigation').on('click', '.toggle', function (e) {
-    $(this).parent().parent().find('.member-list').toggle();
+  search.$navList.on('click', '.toggle', function (e) {
+    if (event.target.tagName.toLowerCase() === 'a') {
+      return;
+    }
+    const clsItem = $(this).closest('.item');
+    let show;
+    if (clsItem.hasClass('toggle-manual-show')) {
+      show = false;
+    } else if (clsItem.hasClass('toggle-manual-hide')) {
+      show = true;
+    } else {
+      clsItem.find('.member-list li').each(function (i, v) {
+        show = $(v).is(':hidden');
+        return !show;
+      });
+    }
+    search.manualToggle(clsItem, !!show);
  });

-  // Show an item related a current documentation automatically
-  var filename = $('.page-title').data('filename')
-    .replace(/\.[a-z]+$/, '')
-    .replace('module-', 'module:')
-    .replace(/_/g, '/')
-    .replace(/-/g, '~');
-  var $currentItem = $('.navigation .item[data-name*="' + filename + '"]:eq(0)');
-
-  if ($currentItem.length) {
-    $currentItem
-      .remove()
-      .prependTo('.navigation .list')
-      .show()
-      .find('.member-list')
-      .show();
-  }
-
  // Auto resizing on navigation
  var _onResize = function () {
    var height = $(window).height();
    var $el = $('.navigation');

-    $el.height(height).find('.list').height(height - 133);
+    $el.height(height).find('.navigation-list').height(height - 133);
  };

  $(window).on('resize', _onResize);
@@ -137,22 +296,4 @@ $(function () {
      '<a href="' + link + textParts[1].replace('line ', '#L') + '">' +
      textParts[1] + '</a>';
  });
-
-  // Highlighting current anchor
-
-  var anchors = $('.anchor');
-  var _onHashChange = function () {
-    var activeHash = window.document.location.hash
-      .replace(/\./g, '\\.') // Escape dot in element id
-      .replace(/\~/g, '\\~'); // Escape tilde in element id
-
-    anchors.removeClass('highlighted');
-
-    if (activeHash.length > 0) {
-      anchors.filter(activeHash).addClass('highlighted');
-    }
-  };
-
-  $(window).on('hashchange', _onHashChange);
-  _onHashChange();
 });
--- a/config/jsdoc/api/template/static/styles/jaguar.css
+++ b/config/jsdoc/api/template/static/styles/jaguar.css
@@ -51,7 +51,8 @@ body {
  width: 0px;
  height: 0px;
 }
-.nameContainer .anchor.highlighted + h4 {
+/* Highlighting current anchor */
+.nameContainer .anchor:target + h4 {
  background-color: #faebcc;
 }
 a {
@@ -123,7 +124,7 @@ li {
  color: #fff;
  border-color: #555;
 }
-.navigation .list {
+.navigation .navigation-list {
  padding: 10px 15px 0 15px;
  position: relative;
  overflow: auto;
@@ -135,6 +136,24 @@ li {
  border-bottom: 1px solid #333;
 }

+.navigation .glyphicon {
+  margin-right: 3px;
+  flex-shrink: 0;
+}
+.navigation .item .glyphicon:before {
+  display: inline-block;
+}
+.navigation .item.toggle-manual .glyphicon:before {
+  transition: transform .1s;
+}
+.navigation .item-class.toggle-manual-show .glyphicon:before {
+  /* With 90deg the icon slightly slides left at transition end */
+  transform: rotate(89.9deg);
+}
+.navigation .item-module.toggle-manual-show .glyphicon:before {
+  transform: rotate(45deg);
+}
+
 .navigation li.perfect-match {
  border: 5px solid orange;
 }
@@ -147,8 +166,8 @@ li {
 }
 .navigation li.item .title {
  cursor: pointer;
-  position: relative;
-  display: block;
+  display: -ms-flexbox;
+  display: flex;
  font-size: 0.85em;
 }
 .navigation li.item .title a {
@@ -184,9 +203,41 @@ li {
  margin-top: 2px;
 }
 .navigation li.item .member-list {
-  display: none;
  padding-left: 8px;
 }
+
+/* search state */
+/* show all classes when search is empty */
+.navigation-list.search-empty .item {
+  display: block;
+}
+/* hide all members by default when search is empty */
+.navigation-list.search-empty .item .member-list {
+  display: none;
+}
+/* expand all members when input in search field available but too short to search */
+.navigation-list.search-started li,
+.navigation-list.search-started .member-list {
+  display: block;
+}
+/* when searching hide everything that is not a match */
+.navigation-list.searching li,
+.navigation-list.searching .member-list {
+  display: none;
+}
+.navigation-list.searching .match {
+  display: block;
+}
+/* allow user to hide / show members */
+.navigation-list .item.toggle-manual-show li,
+.navigation-list .item.toggle-manual-show .member-list {
+  display: block!important;
+}
+.navigation-list:not(.searching) .item.toggle-manual-hide li,
+.navigation-list:not(.searching) .item.toggle-manual-hide .member-list {
+    display: none!important;
+}
+
 .main {
  padding: 20px 20px;
  margin-left: 250px;
--- a/config/jsdoc/api/template/tmpl/navigation.tmpl
+++ b/config/jsdoc/api/template/tmpl/navigation.tmpl
@@ -15,17 +15,17 @@ function getItemCssClass(type) {
 }

 const printList = v => { ?>
-                    <li data-name="<?js= v.longname ?>"><?js
+                    <li data-name="<?js= toShortName(v.name).toLowerCase() ?>"><?js
 }
 const printListWithStability = v => {
    const cls = v.stability && v.stability !== 'stable' ? ' class="unstable"' : ''; ?>
-                    <li data-name="<?js= v.longname ?>"<?js= cls ?>><?js
+                    <li data-name="<?js= toShortName(v.name).toLowerCase() ?>"<?js= cls ?>><?js
 }

 function listContent(item, title, listItemPrinter) {
    const type = title.toLowerCase();
    if (item[type] && item[type].length) { ?>
-            <div class="member-list">
+            <div class="member-list" data-type="<?js= type ?>">
                <span class="subtitle"><?js= title ?></span>
                <ul><?js
        item[type].forEach(function (v) {
@@ -40,12 +40,12 @@ function listContent(item, title, listItemPrinter) {
    <div class="search">
        <input id="search" type="text" class="form-control input-sm" placeholder="Search Documentation">
    </div>
-    <ul class="list"><?js
+    <ul class="navigation-list search-empty"><?js
        this.nav.forEach(function (item) { ?>
-        <li class="item" data-name="<?js= item.longname ?>" data-shortname="<?js= item.name.toLowerCase() ?>">
-            <span class="title">
-                <span class="glyphicon <?js= getItemCssClass(item.type) ?> toggle"></span>
-                <?js= self.linkto(item.longname, item.prettyname) ?>
+        <li class="item item-<?js= item.type ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
+            <span class="title toggle">
+                <span class="glyphicon <?js= getItemCssClass(item.type) ?>"></span>
+                <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~]/g, '\u200b$&')) ?></span>
            </span><?js
                listContent(item, 'Members', printList);
                listContent(item, 'Typedefs', printListWithStability);
--- a/examples/geolocation-orientation.js
+++ b/examples/geolocation-orientation.js
@@ -147,6 +147,7 @@ function updateView() {
    view.setCenter(getCenterWithHeading(c, -c[2], view.getResolution()));
    view.setRotation(-c[2]);
    marker.setPosition(c);
+    map.render();
  }
 }

--- a/examples/modify-test.js
+++ b/examples/modify-test.js
@@ -232,6 +232,7 @@ const map = new Map({
  target: 'map',
  view: new View({
    center: [0, 1000000],
-    zoom: 2
+    zoom: 2,
+    multiWorld: true
  })
 });
--- a/examples/reprojection-by-code.html
+++ b/examples/reprojection-by-code.html
@@ -6,12 +6,12 @@ docs: >
  This example shows client-side raster reprojection capabilities from
  OSM (EPSG:3857) to arbitrary projection by searching
  in <a href="https://epsg.io/">EPSG.io</a> database.
-tags: "reprojection, projection, proj4js, epsg.io"
+tags: "reprojection, projection, proj4js, epsg.io, graticule"
 ---
 <div id="map" class="map"></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" />
+  <input type="text" id="epsg-query" placeholder="4326, 27700, 3031, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
  <button id="epsg-search" class="btn">Search</button>
  <span id="epsg-result"></span>
  <div>
@@ -19,5 +19,9 @@ tags: "reprojection, projection, proj4js, epsg.io"
      Render reprojection edges
      <input type="checkbox" id="render-edges">
    </label>
+    <label for="show-graticule">
+      &nbsp;&nbsp;&nbsp;Show graticule
+      <input type="checkbox" id="show-graticule" />
+    </label>
  </div>
 </form>
--- a/examples/reprojection-by-code.js
+++ b/examples/reprojection-by-code.js
@@ -1,19 +1,34 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {applyTransform} from '../src/ol/extent.js';
+import Graticule from '../src/ol/layer/Graticule.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {get as getProjection, getTransform} from '../src/ol/proj.js';
 import {register} from '../src/ol/proj/proj4.js';
 import OSM from '../src/ol/source/OSM.js';
 import TileImage from '../src/ol/source/TileImage.js';
+import Stroke from '../src/ol/style/Stroke.js';
 import proj4 from 'proj4';


+const graticule = new Graticule({
+  // the style to use for the lines, optional.
+  strokeStyle: new Stroke({
+    color: 'rgba(255,120,0,0.9)',
+    width: 2,
+    lineDash: [0.5, 4]
+  }),
+  showLabels: true,
+  visible: false,
+  wrapX: false
+});
+
 const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
-    })
+    }),
+    graticule
  ],
  target: 'map',
  view: new View({
@@ -28,6 +43,7 @@ const queryInput = document.getElementById('epsg-query');
 const searchButton = document.getElementById('epsg-search');
 const resultSpan = document.getElementById('epsg-result');
 const renderEdgesCheckbox = document.getElementById('render-edges');
+const showGraticuleCheckbox = document.getElementById('show-graticule');

 function setProjection(code, name, proj4def, bbox) {
  if (code === null || name === null || proj4def === null || bbox === null) {
@@ -48,9 +64,15 @@ function setProjection(code, name, proj4def, bbox) {
  const newProj = getProjection(newProjCode);
  const fromLonLat = getTransform('EPSG:4326', newProj);

-  // very approximate calculation of projection extent
-  const extent = applyTransform(
-    [bbox[1], bbox[2], bbox[3], bbox[0]], fromLonLat);
+  let worldExtent = [bbox[1], bbox[2], bbox[3], bbox[0]];
+  newProj.setWorldExtent(worldExtent);
+
+  // approximate calculation of projection extent,
+  // checking if the world extent crosses the dateline
+  if (bbox[1] > bbox[3]) {
+    worldExtent = [bbox[1], bbox[2], bbox[3] + 360, bbox[0]];
+  }
+  const extent = applyTransform(worldExtent, fromLonLat, undefined, 8);
  newProj.setExtent(extent);
  const newView = new View({
    projection: newProj
@@ -98,7 +120,7 @@ searchButton.onclick = function(event) {


 /**
- * Handle change event.
+ * Handle checkbox change event.
 */
 renderEdgesCheckbox.onchange = function() {
  map.getLayers().forEach(function(layer) {
@@ -110,3 +132,10 @@ renderEdgesCheckbox.onchange = function() {
    }
  });
 };
+
+/**
+ * Handle checkbox change event.
+ */
+showGraticuleCheckbox.onchange = function() {
+  graticule.setVisible(showGraticuleCheckbox.checked);
+};
--- a/examples/sphere-mollweide.js
+++ b/examples/sphere-mollweide.js
@@ -17,8 +17,8 @@ register(proj4);
 // and a world extent. These are required for the Graticule.
 const sphereMollweideProjection = new Projection({
  code: 'ESRI:53009',
-  extent: [-9009954.605703328, -9009954.605703328,
-    9009954.605703328, 9009954.605703328],
+  extent: [-18019909.21177587, -9009954.605703328,
+    18019909.21177587, 9009954.605703328],
  worldExtent: [-179, -89.99, 179, 89.99]
 });

@@ -37,6 +37,6 @@ const map = new Map({
  view: new View({
    center: [0, 0],
    projection: sphereMollweideProjection,
-    zoom: 0
+    zoom: 1
  })
 });
--- a/examples/vector-wfs-getfeature.html
+++ b/examples/vector-wfs-getfeature.html
@@ -6,9 +6,9 @@ docs: >
  This example generates a `GetFeature` request which uses a `PropertyIsEqualTo`
  and a `PropertyIsLike` filter, and then posts the request to load the features
  that match the query.
-tags: "vector, WFS, GetFeature, filter"
+tags: "vector, WFS, GetFeature, filter, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
--- a/examples/vector-wfs-getfeature.js
+++ b/examples/vector-wfs-getfeature.js
@@ -7,7 +7,7 @@ import {
 } from '../src/ol/format/filter.js';
 import {WFS, GeoJSON} from '../src/ol/format.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Stroke, Style} from '../src/ol/style.js';

@@ -23,10 +23,15 @@ const vector = new VectorLayer({
  })
 });

+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const raster = new TileLayer({
-  source: new BingMaps({
-    imagerySet: 'Aerial',
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
  })
 });

--- a/examples/vector-wfs.html
+++ b/examples/vector-wfs.html
@@ -4,9 +4,9 @@ title: WFS
 shortdesc: Example of using WFS with a BBOX strategy.
 docs: >
  This example loads new features from GeoServer WFS when the view extent changes.
-tags: "vector, WFS, bbox, loading, server"
+tags: "vector, WFS, bbox, loading, server, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
--- a/examples/vector-wfs.js
+++ b/examples/vector-wfs.js
@@ -3,7 +3,7 @@ import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {bbox as bboxStrategy} from '../src/ol/loadingstrategy.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Stroke, Style} from '../src/ol/style.js';

@@ -30,10 +30,15 @@ const vector = new VectorLayer({
  })
 });

+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const raster = new TileLayer({
-  source: new BingMaps({
-    imagerySet: 'Aerial',
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
  })
 });

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
    "karma-webpack": "^4.0.0-rc.2",
    "loglevelnext": "^3.0.1",
    "marked": "0.8.0",
-    "mocha": "7.0.1",
+    "mocha": "7.1.0",
    "ol-mapbox-style": "^6.0.0",
    "pixelmatch": "^5.1.0",
    "pngjs": "^3.4.0",
@@ -96,7 +96,7 @@
    "typescript": "3.5.3",
    "url-polyfill": "^1.1.5",
    "walk": "^2.3.9",
-    "webpack": "4.41.6",
+    "webpack": "4.42.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-middleware": "^3.6.2",
    "webpack-dev-server": "^3.3.1",
--- a/src/ol/MapBrowserEventHandler.js
+++ b/src/ol/MapBrowserEventHandler.js
@@ -275,7 +275,9 @@ class MapBrowserEventHandler extends EventTarget {
   * @private
   */
  handleTouchMove_(event) {
-    if (this.originalPointerMoveEvent_.defaultPrevented) {
+    // Due to https://github.com/mpizenberg/elm-pep/issues/2, `this.originalPointerMoveEvent_`
+    // may not be initialized yet when we get here on a platform without native pointer events.
+    if (!this.originalPointerMoveEvent_ || this.originalPointerMoveEvent_.defaultPrevented) {
      event.preventDefault();
    }
  }
--- a/src/ol/Observable.js
+++ b/src/ol/Observable.js
@@ -51,7 +51,7 @@ class Observable extends EventTarget {
  /**
   * Listen for a certain type of event.
   * @param {string|Array<string>} type The event type or array of event types.
-   * @param {function(?): ?} listener The listener function.
+   * @param {import("./events.js").ListenerFunction} listener The listener function.
   * @return {import("./events.js").EventsKey|Array<import("./events.js").EventsKey>} Unique key for the listener. If
   *     called with an array of event types as the first argument, the return
   *     will be an array of keys.
--- a/src/ol/View.js
+++ b/src/ol/View.js
@@ -405,7 +405,6 @@ class View extends BaseObject {
    } else if (options.zoom !== undefined) {
      this.setZoom(options.zoom);
    }
-    this.resolveConstraints(0);

    this.setProperties(properties);

@@ -609,10 +608,15 @@ class View extends BaseObject {
      if (series[0].callback) {
        animationCallback(series[0].callback, false);
      }
-      anchor = anchor ||
-        series.filter(function(animation) {
-          return !animation.complete;
-        })[0].anchor;
+      if (!anchor) {
+        for (let j = 0, jj = series.length; j < jj; ++j) {
+          const animation = series[j];
+          if (!animation.complete) {
+            anchor = animation.anchor;
+            break;
+          }
+        }
+      }
    }
    this.animations_.length = 0;
    this.cancelAnchor_ = anchor;
@@ -762,6 +766,7 @@ class View extends BaseObject {
   */
  setViewportSize(opt_size) {
    this.viewportSize_ = Array.isArray(opt_size) ? opt_size.slice() : [100, 100];
+    this.resolveConstraints(0);
  }

  /**
--- a/src/ol/events.js
+++ b/src/ol/events.js
@@ -13,7 +13,6 @@ import {clear} from './obj.js';
 * @api
 */

-
 /**
 * Listener function. This function is called with an event object as argument.
 * When the function returns `false`, event propagation will stop.
@@ -22,6 +21,14 @@ import {clear} from './obj.js';
 * @api
 */

+/**
+ * @typedef {Object} ListenerObject
+ * @property {ListenerFunction} handleEvent
+ */
+
+/**
+ * @typedef {ListenerFunction|ListenerObject} Listener
+ */

 /**
 * Registers an event listener on an event target. Inspired by
--- a/src/ol/events/Target.js
+++ b/src/ol/events/Target.js
@@ -56,7 +56,7 @@ class Target extends Disposable {

    /**
     * @private
-     * @type {!Object<string, Array<import("../events.js").ListenerFunction>>}
+     * @type {!Object<string, Array<import("../events.js").Listener>>}
     */
    this.listeners_ = {};

@@ -64,7 +64,7 @@ class Target extends Disposable {

  /**
   * @param {string} type Type.
-   * @param {import("../events.js").ListenerFunction} listener Listener.
+   * @param {import("../events.js").Listener} listener Listener.
   */
  addEventListener(type, listener) {
    if (!type || !listener) {
@@ -85,15 +85,13 @@ class Target extends Disposable {
   * of this type. The event parameter can either be a string or an
   * Object with a `type` property.
   *
-   * @param {{type: string,
-   *     target: (EventTargetLike|undefined),
-   *     propagationStopped: (boolean|undefined)}|
-   *     import("./Event.js").default|string} event Event object.
+   * @param {import("./Event.js").default|string} event Event object.
   * @return {boolean|undefined} `false` if anyone called preventDefault on the
   *     event object or if any of the listeners returned false.
   * @api
   */
  dispatchEvent(event) {
+    /** @type {import("./Event.js").default|Event} */
    const evt = typeof event === 'string' ? new Event(event) : event;
    const type = evt.type;
    if (!evt.target) {
@@ -108,7 +106,12 @@ class Target extends Disposable {
      }
      ++this.dispatching_[type];
      for (let i = 0, ii = listeners.length; i < ii; ++i) {
-        if (listeners[i].call(this, evt) === false || evt.propagationStopped) {
+        if ('handleEvent' in listeners[i]) {
+          propagate = /** @type {import("../events.js").ListenerObject} */ (listeners[i]).handleEvent(evt);
+        } else {
+          propagate = /** @type {import("../events.js").ListenerFunction} */ (listeners[i]).call(this, evt);
+        }
+        if (propagate === false || evt.propagationStopped) {
          propagate = false;
          break;
        }
@@ -138,7 +141,7 @@ class Target extends Disposable {
   * order that they will be called in.
   *
   * @param {string} type Type.
-   * @return {Array<import("../events.js").ListenerFunction>} Listeners.
+   * @return {Array<import("../events.js").Listener>} Listeners.
   */
  getListeners(type) {
    return this.listeners_[type];
@@ -157,7 +160,7 @@ class Target extends Disposable {

  /**
   * @param {string} type Type.
-   * @param {import("../events.js").ListenerFunction} listener Listener.
+   * @param {import("../events.js").Listener} listener Listener.
   */
  removeEventListener(type, listener) {
    const listeners = this.listeners_[type];
--- a/src/ol/extent.js
+++ b/src/ol/extent.js
@@ -778,18 +778,38 @@ export function intersectsSegment(extent, start, end) {
 * @param {import("./proj.js").TransformFunction} transformFn Transform function.
 * Called with `[minX, minY, maxX, maxY]` extent coordinates.
 * @param {Extent=} opt_extent Destination extent.
+ * @param {number=} opt_stops Number of stops per side used for the transform.
+ * By default only the corners are used.
 * @return {Extent} Extent.
 * @api
 */
-export function applyTransform(extent, transformFn, opt_extent) {
-  const coordinates = [
-    extent[0], extent[1],
-    extent[0], extent[3],
-    extent[2], extent[1],
-    extent[2], extent[3]
-  ];
+export function applyTransform(extent, transformFn, opt_extent, opt_stops) {
+  let coordinates = [];
+  if (opt_stops > 1) {
+    const width = extent[2] - extent[0];
+    const height = extent[3] - extent[1];
+    for (let i = 0; i < opt_stops; ++i) {
+      coordinates.push(
+        extent[0] + width * i / opt_stops, extent[1],
+        extent[2], extent[1] + height * i / opt_stops,
+        extent[2] - width * i / opt_stops, extent[3],
+        extent[0], extent[3] - height * i / opt_stops
+      );
+    }
+  } else {
+    coordinates = [
+      extent[0], extent[1],
+      extent[2], extent[1],
+      extent[2], extent[3],
+      extent[0], extent[3]
+    ];
+  }
  transformFn(coordinates, coordinates, 2);
-  const xs = [coordinates[0], coordinates[2], coordinates[4], coordinates[6]];
-  const ys = [coordinates[1], coordinates[3], coordinates[5], coordinates[7]];
+  const xs = [];
+  const ys = [];
+  for (let i = 0, l = coordinates.length; i < l; i += 2) {
+    xs.push(coordinates[i]);
+    ys.push(coordinates[i + 1]);
+  }
  return _boundingExtentXYs(xs, ys, opt_extent);
 }
--- a/src/ol/interaction/Draw.js
+++ b/src/ol/interaction/Draw.js
@@ -110,7 +110,7 @@ import {fromUserCoordinate, getUserProjection} from '../proj.js';
 * geometry is the geometry that is returned when the function is called without
 * a second argument.
 * @typedef {function(!SketchCoordType, import("../geom/SimpleGeometry.js").default=,
- *     import("../proj/Projection.js").default):
+ *     import("../proj/Projection.js").default=):
 *     import("../geom/SimpleGeometry.js").default} GeometryFunction
 */

--- a/src/ol/layer/Graticule.js
+++ b/src/ol/layer/Graticule.js
@@ -12,10 +12,19 @@ import VectorSource from '../source/Vector.js';
 import {
  equivalent as equivalentProjection,
  get as getProjection,
-  getTransform,
-  transformExtent
+  getTransform
 } from '../proj.js';
-import {getCenter, getHeight, getWidth, intersects, equals, getIntersection, isEmpty} from '../extent.js';
+import {
+  applyTransform,
+  containsCoordinate,
+  equals,
+  getCenter,
+  getHeight,
+  getIntersection,
+  getWidth,
+  intersects,
+  isEmpty
+} from '../extent.js';
 import {clamp} from '../math.js';
 import Style from '../style/Style.js';
 import Feature from '../Feature.js';
@@ -144,7 +153,8 @@ const INTERVALS = [

 /**
 * @classdesc
- * Layer that renders a grid for a coordinate system.
+ * Layer that renders a grid for a coordinate system (currently only EPSG:4326 is supported).
+ * Note that the view projection must define both extent and worldExtent.
 *
 * @fires import("../render/Event.js").RenderEvent
 * @api
@@ -208,25 +218,25 @@ class Graticule extends VectorLayer {
     * @type {number}
     * @private
     */
-    this.maxLatP_ = Infinity;
+    this.maxX_ = Infinity;

    /**
     * @type {number}
     * @private
     */
-    this.maxLonP_ = Infinity;
+    this.maxY_ = Infinity;

    /**
     * @type {number}
     * @private
     */
-    this.minLatP_ = -Infinity;
+    this.minX_ = -Infinity;

    /**
     * @type {number}
     * @private
     */
-    this.minLonP_ = -Infinity;
+    this.minY_ = -Infinity;

    /**
     * @type {number}
@@ -276,6 +286,30 @@ class Graticule extends VectorLayer {
     */
    this.projectionCenterLonLat_ = null;

+    /**
+     * @type {import("../coordinate.js").Coordinate}
+     * @private
+     */
+    this.bottomLeft_ = null;
+
+    /**
+     * @type {import("../coordinate.js").Coordinate}
+     * @private
+     */
+    this.bottomRight_ = null;
+
+    /**
+     * @type {import("../coordinate.js").Coordinate}
+     * @private
+     */
+    this.topLeft_ = null;
+
+    /**
+     * @type {import("../coordinate.js").Coordinate}
+     * @private
+     */
+    this.topRight_ = null;
+
    /**
     * @type {Array<GraticuleLabelDataType>}
     * @private
@@ -664,24 +698,67 @@ class Graticule extends VectorLayer {
      return;
    }

-    const centerLonLat = this.toLonLatTransform_(center);
-    let centerLon = centerLonLat[0];
-    let centerLat = centerLonLat[1];
+    // Constrain the center to fit into the extent available to the graticule
+
+    const validCenterP = [
+      clamp(center[0], this.minX_, this.maxX_),
+      clamp(center[1], this.minY_, this.maxY_)
+    ];
+
+    // Transform the center to lon lat
+    // Some projections may have a void area at the poles
+    // so replace any NaN latitudes with the min or max value closest to a pole
+
+    const centerLonLat = this.toLonLatTransform_(validCenterP);
+    if (isNaN(centerLonLat[1])) {
+      centerLonLat[1] = Math.abs(this.maxLat_) >= Math.abs(this.minLat_) ?
+        this.maxLat_ : this.minLat_;
+    }
+    let centerLon = clamp(centerLonLat[0], this.minLon_, this.maxLon_);
+    let centerLat = clamp(centerLonLat[1], this.minLat_, this.maxLat_);
    const maxLines = this.maxLines_;
    let cnt, idx, lat, lon;

-    let validExtent = [
-      Math.max(extent[0], this.minLonP_),
-      Math.max(extent[1], this.minLatP_),
-      Math.min(extent[2], this.maxLonP_),
-      Math.min(extent[3], this.maxLatP_)
+    // Limit the extent to fit into the extent available to the graticule
+
+    const validExtentP = [
+      clamp(extent[0], this.minX_, this.maxX_),
+      clamp(extent[1], this.minY_, this.maxY_),
+      clamp(extent[2], this.minX_, this.maxX_),
+      clamp(extent[3], this.minY_, this.maxY_)
    ];

-    validExtent = transformExtent(validExtent, this.projection_, 'EPSG:4326');
-    const maxLat = validExtent[3];
-    const maxLon = validExtent[2];
-    const minLat = validExtent[1];
-    const minLon = validExtent[0];
+    // Transform the extent to get the lon lat ranges for the edges of the extent
+
+    const validExtent = applyTransform(validExtentP, this.toLonLatTransform_, undefined, 8);
+
+    // Check if extremities of the world extent lie inside the extent
+    // (for example the pole in a polar projection)
+    // and extend the extent as appropriate
+
+    if (containsCoordinate(validExtentP, this.bottomLeft_)) {
+      validExtent[0] = this.minLon_;
+      validExtent[1] = this.minLat_;
+    }
+    if (containsCoordinate(validExtentP, this.bottomRight_)) {
+      validExtent[2] = this.maxLon_;
+      validExtent[1] = this.minLat_;
+    }
+    if (containsCoordinate(validExtentP, this.topLeft_)) {
+      validExtent[0] = this.minLon_;
+      validExtent[3] = this.maxLat_;
+    }
+    if (containsCoordinate(validExtentP, this.topRight_)) {
+      validExtent[2] = this.maxLon_;
+      validExtent[3] = this.maxLat_;
+    }
+
+    // The transformed center may also extend the lon lat ranges used for rendering
+
+    const maxLat = clamp(validExtent[3], centerLat, this.maxLat_);
+    const maxLon = clamp(validExtent[2], centerLon, this.maxLon_);
+    const minLat = clamp(validExtent[1], this.minLat_, centerLat);
+    const minLon = clamp(validExtent[0], this.minLon_, centerLon);

    // Create meridians

@@ -752,11 +829,13 @@ class Graticule extends VectorLayer {
    /** @type {Array<number>} **/
    const p2 = [];
    for (let i = 0, ii = this.intervals_.length; i < ii; ++i) {
-      const delta = this.intervals_[i] / 2;
+      const delta = clamp(this.intervals_[i] / 2, 0, 90);
+      // Don't attempt to transform latitudes beyond the poles!
+      const clampedLat = clamp(centerLat, -90 + delta, 90 - delta);
      p1[0] = centerLon - delta;
-      p1[1] = centerLat - delta;
+      p1[1] = clampedLat - delta;
      p2[0] = centerLon + delta;
-      p2[1] = centerLat + delta;
+      p2[1] = clampedLat + delta;
      this.fromLonLatTransform_(p1, p1);
      this.fromLonLatTransform_(p2, p2);
      const dist = Math.pow(p2[0] - p1[0], 2) + Math.pow(p2[1] - p1[1], 2);
@@ -896,23 +975,66 @@ class Graticule extends VectorLayer {
    const epsg4326Projection = getProjection('EPSG:4326');

    const worldExtent = projection.getWorldExtent();
-    const worldExtentP = transformExtent(worldExtent, epsg4326Projection, projection);

    this.maxLat_ = worldExtent[3];
    this.maxLon_ = worldExtent[2];
    this.minLat_ = worldExtent[1];
    this.minLon_ = worldExtent[0];

-    this.maxLatP_ = worldExtentP[3];
-    this.maxLonP_ = worldExtentP[2];
-    this.minLatP_ = worldExtentP[1];
-    this.minLonP_ = worldExtentP[0];
+    // If the world extent crosses the dateline define a custom transform to
+    // return longitudes which wrap the dateline
+
+    const toLonLatTransform = getTransform(projection, epsg4326Projection);
+    if (this.minLon_ < this.maxLon_) {
+      this.toLonLatTransform_ = toLonLatTransform;
+    } else {
+      const split = this.minLon_ + this.maxLon_ / 2;
+      this.maxLon_ += 360;
+      this.toLonLatTransform_ = function(coordinates, opt_output, opt_dimension) {
+        const dimension = opt_dimension || 2;
+        const lonLatCoordinates = toLonLatTransform(coordinates, opt_output, dimension);
+        for (let i = 0, l = lonLatCoordinates.length; i < l; i += dimension) {
+          if (lonLatCoordinates[i] < split) {
+            lonLatCoordinates[i] += 360;
+          }
+        }
+        return lonLatCoordinates;
+      };
+    }
+
+    // Transform the extent to get the limits of the view projection extent
+    // which should be available to the graticule

    this.fromLonLatTransform_ = getTransform(epsg4326Projection, projection);
+    const worldExtentP = applyTransform(
+      [this.minLon_, this.minLat_, this.maxLon_, this.maxLat_],
+      this.fromLonLatTransform_,
+      undefined,
+      8
+    );

-    this.toLonLatTransform_ = getTransform(projection, epsg4326Projection);
+    this.minX_ = worldExtentP[0];
+    this.maxX_ = worldExtentP[2];
+    this.minY_ = worldExtentP[1];
+    this.maxY_ = worldExtentP[3];
+
+    // Determine the view projection coordinates of the extremities of the world extent
+    // as these may lie inside a view extent (for example the pole in a polar projection)
+
+    this.bottomLeft_ = this.fromLonLatTransform_([this.minLon_, this.minLat_]);
+    this.bottomRight_ = this.fromLonLatTransform_([this.maxLon_, this.minLat_]);
+    this.topLeft_ = this.fromLonLatTransform_([this.minLon_, this.maxLat_]);
+    this.topRight_ = this.fromLonLatTransform_([this.maxLon_, this.maxLat_]);
+
+    // Transform the projection center to lon lat
+    // Some projections may have a void area at the poles
+    // so replace any NaN latitudes with the min or max value closest to a pole

    this.projectionCenterLonLat_ = this.toLonLatTransform_(getCenter(projection.getExtent()));
+    if (isNaN(this.projectionCenterLonLat_[1])) {
+      this.projectionCenterLonLat_[1] = Math.abs(this.maxLat_) >= Math.abs(this.minLat_) ?
+        this.maxLat_ : this.minLat_;
+    }

    this.projection_ = projection;
  }
--- a/src/ol/proj.js
+++ b/src/ol/proj.js
@@ -476,12 +476,14 @@ export function transform(coordinate, source, destination) {
 * @param {import("./extent.js").Extent} extent The extent to transform.
 * @param {ProjectionLike} source Source projection-like.
 * @param {ProjectionLike} destination Destination projection-like.
+ * @param {number=} opt_stops Number of stops per side used for the transform.
+ * By default only the corners are used.
 * @return {import("./extent.js").Extent} The transformed extent.
 * @api
 */
-export function transformExtent(extent, source, destination) {
+export function transformExtent(extent, source, destination, opt_stops) {
  const transformFunc = getTransform(source, destination);
-  return applyTransform(extent, transformFunc);
+  return applyTransform(extent, transformFunc, undefined, opt_stops);
 }


--- a/src/ol/renderer/webgl/PointsLayer.js
+++ b/src/ol/renderer/webgl/PointsLayer.js
@@ -290,7 +290,8 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
    this.sourceListenKeys_ = [
      listen(source, VectorEventType.ADDFEATURE, this.handleSourceFeatureAdded_, this),
      listen(source, VectorEventType.CHANGEFEATURE, this.handleSourceFeatureChanged_, this),
-      listen(source, VectorEventType.REMOVEFEATURE, this.handleSourceFeatureDelete_, this)
+      listen(source, VectorEventType.REMOVEFEATURE, this.handleSourceFeatureDelete_, this),
+      listen(source, VectorEventType.CLEAR, this.handleSourceFeatureClear_, this)
    ];
    source.forEachFeature(function(feature) {
      this.featureCache_[getUid(feature)] = {
@@ -339,6 +340,14 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
    this.featureCount_--;
  }

+  /**
+   * @private
+   */
+  handleSourceFeatureClear_() {
+    this.featureCache_ = {};
+    this.featureCount_ = 0;
+  }
+
  /**
   * @inheritDoc
   */
--- a/src/ol/source/ImageCanvas.js
+++ b/src/ol/source/ImageCanvas.js
@@ -33,7 +33,7 @@ import ImageSource from './Image.js';
 * the value returned by the function is later changed then
 * `changed` should be called on the source for the source to
 * invalidate the current cached image. See: {@link module:ol/Observable~Observable#changed}
- * @property {import("../proj.js").ProjectionLike} projection Projection.
+ * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection.
 * @property {number} [ratio=1.5] Ratio. 1 means canvases are the size of the map viewport, 2 means twice the
 * width and height of the map viewport, and so on. Must be `1` or higher.
 * @property {Array<number>} [resolutions] Resolutions.
--- a/src/ol/source/ImageMapGuide.js
+++ b/src/ol/source/ImageMapGuide.js
@@ -20,7 +20,7 @@ import {appendParams} from '../uri.js';
 * @property {boolean} [hidpi=true] Use the `ol/Map#pixelRatio` value when requesting
 * the image from the remote server.
 * @property {boolean} [useOverlay] If `true`, will use `GETDYNAMICMAPOVERLAYIMAGE`.
- * @property {import("../proj.js").ProjectionLike} projection Projection.
+ * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection.
 * @property {number} [ratio=1] Ratio. `1` means image requests are the size of the map viewport, `2` means
 * twice the width and height of the map viewport, and so on. Must be `1` or higher.
 * @property {Array<number>} [resolutions] Resolutions.
--- a/src/ol/source/ImageStatic.js
+++ b/src/ol/source/ImageStatic.js
@@ -19,7 +19,7 @@ import ImageSource, {defaultImageLoadFunction} from './Image.js';
 * @property {import("../extent.js").Extent} [imageExtent] Extent of the image in map coordinates.
 * This is the [left, bottom, right, top] map coordinates of your image.
 * @property {import("../Image.js").LoadFunction} [imageLoadFunction] Optional function to load an image given a URL.
- * @property {import("../proj.js").ProjectionLike} projection Projection.
+ * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection.
 * @property {import("../size.js").Size} [imageSize] Size of the image in pixels. Usually the image size is auto-detected, so this
 * only needs to be set if auto-detection fails for some reason.
 * @property {string} url Image URL.
--- a/src/ol/source/Zoomify.js
+++ b/src/ol/source/Zoomify.js
@@ -11,6 +11,7 @@ import {createCanvasContext2D} from '../dom.js';
 import {toSize} from '../size.js';
 import TileImage from './TileImage.js';
 import TileGrid from '../tilegrid/TileGrid.js';
+import {getCenter} from '../extent.js';


 /**
@@ -90,7 +91,7 @@ export class CustomTile extends ImageTile {
 * Higher values can increase reprojection performance, but decrease precision.
 * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used
 * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing.
- * @property {string} [url] URL template or base URL of the Zoomify service.
+ * @property {string} url URL template or base URL of the Zoomify service.
 * A base URL is the fixed part
 * of the URL, excluding the tile group, z, x, and y folder structure, e.g.
 * `http://my.zoomify.info/IMAGE.TIF/`. A URL template must include
@@ -102,7 +103,7 @@ export class CustomTile extends ImageTile {
 * A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be
 * used instead of defining each one separately in the `urls` option.
 * @property {string} [tierSizeCalculation] Tier size calculation method: `default` or `truncated`.
- * @property {import("../size.js").Size} [size] Size of the image.
+ * @property {import("../size.js").Size} size
 * @property {import("../extent.js").Extent} [extent] Extent for the TileGrid that is created.
 * Default sets the TileGrid in the
 * fourth quadrant, meaning extent is `[0, -height, width, 0]`. To change the
@@ -127,11 +128,11 @@ export class CustomTile extends ImageTile {
 class Zoomify extends TileImage {

  /**
-   * @param {Options=} opt_options Options.
+   * @param {Options} opt_options Options.
   */
  constructor(opt_options) {

-    const options = opt_options || {};
+    const options = opt_options;

    const size = options.size;
    const tierSizeCalculation = options.tierSizeCalculation !== undefined ?
@@ -198,7 +199,7 @@ class Zoomify extends TileImage {
    }
    const urls = expandUrl(url);

-    const tileWidth = tileSize * tilePixelRatio;
+    let tileWidth = tileSize * tilePixelRatio;

    /**
     * @param {string} template Template.
@@ -262,6 +263,19 @@ class Zoomify extends TileImage {
     */
    this.zDirection = options.zDirection;

+    // Server retina tile detection (non-standard):
+    // Try loading the center tile for the highest resolution. If it is not
+    // available, we are dealing with retina tiles, and need to adjust the
+    // tile url calculation.
+    const tileUrl = tileGrid.getTileCoordForCoordAndResolution(getCenter(tileGrid.getExtent()), resolutions[resolutions.length - 1]);
+    const testTileUrl = tileUrlFunction(tileUrl, 1, null);
+    const image = new Image();
+    image.addEventListener('error', function() {
+      tileWidth = tileSize;
+      this.changed();
+    }.bind(this));
+    image.src = testTileUrl;
+
  }

 }
--- a/src/ol/webgl/ShaderBuilder.js
+++ b/src/ol/webgl/ShaderBuilder.js
@@ -427,6 +427,7 @@ export function parseLiteralStyle(style) {
  const parsedSize = expressionToGlsl(vertContext, size, ValueTypes.NUMBER_ARRAY | ValueTypes.NUMBER);
  const parsedOffset = expressionToGlsl(vertContext, offset, ValueTypes.NUMBER_ARRAY);
  const parsedTexCoord = expressionToGlsl(vertContext, texCoord, ValueTypes.NUMBER_ARRAY);
+  const parsedRotation = expressionToGlsl(vertContext, rotation, ValueTypes.NUMBER);

  /**
   * @type {import("../style/expressions.js").ParsingContext}
@@ -439,7 +440,6 @@ export function parseLiteralStyle(style) {
  };
  const parsedColor = expressionToGlsl(fragContext, color, ValueTypes.COLOR);
  const parsedOpacity = expressionToGlsl(fragContext, opacity, ValueTypes.NUMBER);
-  const parsedRotation = expressionToGlsl(fragContext, rotation, ValueTypes.NUMBER);

  let opacityFilter = '1.0';
  const visibleSize = `vec2(${expressionToGlsl(fragContext, size, ValueTypes.NUMBER_ARRAY | ValueTypes.NUMBER)}).x`;
--- a/test/spec/ol/extent.test.js
+++ b/test/spec/ol/extent.test.js
@@ -1,5 +1,6 @@
 import * as _ol_extent_ from '../../../src/ol/extent.js';
 import {getTransform} from '../../../src/ol/proj.js';
+import {register} from '../../../src/ol/proj/proj4.js';


 describe('ol.extent', function() {
@@ -783,6 +784,38 @@ describe('ol.extent', function() {
      expect(destinationExtent[3]).to.be(30);
    });

+    it('can use the stops option', function() {
+      proj4.defs('EPSG:32632', '+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs');
+      register(proj4);
+      const transformFn = getTransform('EPSG:4326', 'EPSG:32632');
+      const sourceExtentN = [6, 0, 12, 84];
+      const destinationExtentN = _ol_extent_.applyTransform(
+        sourceExtentN, transformFn);
+      expect(destinationExtentN).not.to.be(undefined);
+      expect(destinationExtentN).not.to.be(null);
+      expect(destinationExtentN[0]).to.roughlyEqual(166021.44308053964, 1e-8);
+      expect(destinationExtentN[2]).to.roughlyEqual(833978.5569194605, 1e-8);
+      expect(destinationExtentN[1]).to.roughlyEqual(0, 1e-8);
+      expect(destinationExtentN[3]).to.roughlyEqual(9329005.182447437, 1e-8);
+      const sourceExtentNS = [6, -84, 12, 84];
+      const destinationExtentNS = _ol_extent_.applyTransform(
+        sourceExtentNS, transformFn);
+      expect(destinationExtentNS).not.to.be(undefined);
+      expect(destinationExtentNS).not.to.be(null);
+      expect(destinationExtentNS[0]).to.roughlyEqual(465005.34493886377, 1e-8);
+      expect(destinationExtentNS[2]).to.roughlyEqual(534994.6550611362, 1e-8);
+      expect(destinationExtentNS[1]).to.roughlyEqual(-destinationExtentN[3], 1e-8);
+      expect(destinationExtentNS[3]).to.roughlyEqual(destinationExtentN[3], 1e-8);
+      const destinationExtentNS2 = _ol_extent_.applyTransform(
+        sourceExtentNS, transformFn, undefined, 2);
+      expect(destinationExtentNS2).not.to.be(undefined);
+      expect(destinationExtentNS2).not.to.be(null);
+      expect(destinationExtentNS2[0]).to.roughlyEqual(destinationExtentN[0], 1e-8);
+      expect(destinationExtentNS2[2]).to.roughlyEqual(destinationExtentN[2], 1e-8);
+      expect(destinationExtentNS2[1]).to.roughlyEqual(-destinationExtentN[3], 1e-8);
+      expect(destinationExtentNS2[3]).to.roughlyEqual(destinationExtentN[3], 1e-8);
+    });
+
  });

 });
--- a/test/spec/ol/source/zoomify.test.js
+++ b/test/spec/ol/source/zoomify.test.js
@@ -45,7 +45,7 @@ describe('ol.source.Zoomify', function() {

  describe('constructor', function() {

-    it('requires config "size"', function() {
+    it('requires config "size" and "url"', function() {
      let source;

      // undefined config object
@@ -58,7 +58,7 @@ describe('ol.source.Zoomify', function() {
        source = new Zoomify({});
      }).to.throwException();

-      // not passing "size" in config object
+      // passing "url" in config object
      expect(function() {
        source = new Zoomify({
          url: 'some-url'
@@ -70,6 +70,14 @@ describe('ol.source.Zoomify', function() {
        source = new Zoomify({
          size: [47, 11]
        });
+      }).to.throwException();
+
+      // passing "size" and "url" in config object
+      expect(function() {
+        source = new Zoomify({
+          url: '',
+          size: [47, 11]
+        });
      }).to.not.throwException();
      // we got a source
      expect(source).to.be.a(Zoomify);
@@ -88,6 +96,7 @@ describe('ol.source.Zoomify', function() {
    it('does not need "tierSizeCalculation" option', function() {
      expect(function() {
        new Zoomify({
+          url: '',
          size: [47, 11]
        });
      }).to.not.throwException();
@@ -96,6 +105,7 @@ describe('ol.source.Zoomify', function() {
    it('accepts "tierSizeCalculation" option "default"', function() {
      expect(function() {
        new Zoomify({
+          url: '',
          size: [47, 11],
          tierSizeCalculation: 'default'
        });
@@ -105,6 +115,7 @@ describe('ol.source.Zoomify', function() {
    it('accepts "tierSizeCalculation" option "truncated"', function() {
      expect(function() {
        new Zoomify({
+          url: '',
          size: [47, 11],
          tierSizeCalculation: 'truncated'
        });
@@ -115,6 +126,7 @@ describe('ol.source.Zoomify', function() {
      // passing unknown string will throw
      expect(function() {
        new Zoomify({
+          url: '',
          size: [47, 11],
          tierSizeCalculation: 'ace-of-spades'
        });
--- a/test/spec/ol/view.test.js
+++ b/test/spec/ol/view.test.js
@@ -35,6 +35,7 @@ describe('ol.View', function() {
        maxResolution: 1000,
        resolution: 1200
      });
+      view.setViewportSize();
      expect(view.getResolution()).to.eql(1000);
      expect(view.targetResolution_).to.eql(1000);
    });
@@ -45,6 +46,7 @@ describe('ol.View', function() {
        minResolution: 128,
        resolution: 50
      });
+      view.setViewportSize();
      expect(view.getResolution()).to.eql(128);
      expect(view.targetResolution_).to.eql(128);
    });
@@ -54,6 +56,7 @@ describe('ol.View', function() {
        resolutions: [1024, 512, 256, 128, 64, 32],
        resolution: 1200
      });
+      view.setViewportSize();
      expect(view.getResolution()).to.eql(1024);
      expect(view.targetResolution_).to.eql(1024);

@@ -61,6 +64,7 @@ describe('ol.View', function() {
        resolutions: [1024, 512, 256, 128, 64, 32],
        resolution: 10
      });
+      view.setViewportSize();
      expect(view.getResolution()).to.eql(32);
      expect(view.targetResolution_).to.eql(32);
    });
@@ -70,6 +74,7 @@ describe('ol.View', function() {
        minZoom: 3,
        zoom: 2
      });
+      view.setViewportSize();
      expect(view.getZoom()).to.eql(3);
      expect(view.targetResolution_).to.eql(view.getMaxResolution());
    });
@@ -79,6 +84,7 @@ describe('ol.View', function() {
        maxZoom: 4,
        zoom: 5
      });
+      view.setViewportSize();
      expect(view.getZoom()).to.eql(4);
      expect(view.targetResolution_).to.eql(view.getMaxResolution() / Math.pow(2, 4));
    });
@@ -89,6 +95,7 @@ describe('ol.View', function() {
        extent: [0, 0, 50, 50],
        resolution: 1
      });
+      view.setViewportSize();
      expect(view.getResolution()).to.eql(0.5);
      expect(view.targetResolution_).to.eql(0.5);
    });
--- a/test/spec/ol/webgl/shaderbuilder.test.js
+++ b/test/spec/ol/webgl/shaderbuilder.test.js
@@ -511,6 +511,20 @@ void main(void) {
      expect(result.uniforms).to.have.property('u_ratio');
    });

+    it('parses a style with a rotation expression using an attribute', function() {
+      const result = parseLiteralStyle({
+        symbol: {
+          symbolType: 'square',
+          size: 6,
+          rotation: ['get', 'heading']
+        }
+      });
+
+      expect(result.builder.attributes).to.eql(['float a_heading']);
+      expect(result.builder.varyings).to.eql([]);
+      expect(result.builder.rotationExpression).to.eql('a_heading');
+    });
+
    it('correctly adds string variables to the string literals mapping', function() {
      const result = parseLiteralStyle({
        variables: {