Use module paths in example docs

examples/arcgis-tiled.html

@@ -6,7 +6,7 @@ docs: >
   This example shows how to use an ArcGIS REST MapService as tiles.
   This source type supports Map and Image Services. For cached ArcGIS
   services, better performance is available by using
-  <code>ol.source.XYZ</code> instead.
+  <code>ol/source/XYZ</code> instead.
 tags: arcgis, tile, tilelayer"
 ---
 <div id="map" class="map"></div>

examples/bing-maps.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Bing Maps
 shortdesc: Example of a Bing Maps layer.
 docs: >
-  <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
+  <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol/source/BingMaps</code>.</p>
 tags: "bing, bing-maps"
 cloak:
   - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5

examples/box-selection.html

@@ -4,7 +4,7 @@ title: Box Selection
 shortdesc: Using a DragBox interaction to select features.
 docs: >
   <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
-  to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
+  to the feature overlay of a select interaction (<code>ol/interaction/Select</code>) for highlighting.</p>
   <p>Use <code>Ctrl+Drag</code> (<code>Command+Drag</code> on Mac) to draw boxes.</p>
 tags: "DragBox, feature, selection, box"
 ---

examples/cluster.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Clustered Features
-shortdesc: Example of using ol.source.Cluster.
+shortdesc: Example of using ol/source/Cluster.
 docs: >
   This example shows how to do clustering on point features.
 tags: "cluster, vector"

examples/custom-interactions.html

@@ -3,8 +3,8 @@ layout: example.html
 title: Custom Interactions
 shortdesc: Example of a custom interaction.
 docs: >
-  This example demonstrates creating a custom interaction by subclassing `ol.interaction.Pointer`.
+  This example demonstrates creating a custom interaction by subclassing `ol/interaction/Pointer`.
-  Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features.
+  Note that the built in interaction `ol/interaction/Translate` might be a better option for moving features.
 tags: "drag, feature, vector, editing, custom, interaction"
 ---
 <div id="map" class="map"></div>

examples/d3.js

@@ -24,7 +24,7 @@ const map = new Map({
 
 
 /**
- * Load the topojson data and create an ol.layer.Image for that data.
+ * Load the topojson data and create an ol/layer/Image for that data.
  */
 d3.json('data/topojson/us.json', function(error, us) {
   const features = topojson.feature(us, us.objects.counties);

examples/drag-and-drop-image-vector.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Drag-and-Drop Image Vector
 shortdesc: Example of using the drag-and-drop interaction with image vector rendering.
 docs: >
-  Example of using the drag-and-drop interaction with an `ol.layer.Vector` with `renderMode: 'image'``. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
+  Example of using the drag-and-drop interaction with an `ol/layer/Vector` with `renderMode: 'image'``. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
 tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
 cloak:
   - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5

examples/draw-and-modify-features.html

@@ -1,9 +1,9 @@
 ---
 layout: example.html
 title: Draw and Modify Features
-shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
+shortdesc: Example of using the ol/interaction/Draw interaction together with the ol/interaction/Modify interaction.
 docs: >
-  Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
+  Example of using the ol/interaction/Draw interaction together with the ol/interaction/Modify interaction.
 tags: "draw, edit, modify, vector, featureoverlay"
 ---
 <div id="map" class="map"></div>

examples/draw-features.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Draw Features
-shortdesc: Example of using the ol.interaction.Draw interaction.
+shortdesc: Example of using the ol/interaction/Draw interaction.
 docs: >
   Example of using the Draw interaction. Select a geometry type from the
   dropdown above to start drawing. To finish drawing, click the last

examples/draw-freehand.html

@@ -1,13 +1,13 @@
 ---
 layout: example.html
 title: Freehand Drawing
-shortdesc: Example using the ol.interaction.Draw interaction in freehand mode.
+shortdesc: Example using the ol/interaction/Draw interaction in freehand mode.
 docs: >
-  This example demonstrates the `ol.interaction.Draw` in freehand mode.  During
+  This example demonstrates the `ol/interaction/Draw` in freehand mode.  During
   freehand drawing, points are added while dragging.  Set `freehand: true` to
   enable freehand mode.  Note that freehand mode can be conditionally enabled
   by using the `freehandCondition` option.  For example to toggle freehand mode
-  with the `Shift` key, use `freehandCondition: ol.events.condition.shiftKeyOnly`.
+  with the `Shift` key, use `freehandCondition: shiftKeyOnly`.
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>

examples/draw-shapes.html

@@ -1,10 +1,10 @@
 ---
 layout: example.html
 title: Draw Shapes
-shortdesc: Using the ol.interaction.Draw to create regular shapes
+shortdesc: Using the ol/interaction/Draw to create regular shapes
 docs: >
   This demonstrates the use of the `geometryFunction` option for the
-  `ol.interaction.Draw`. Select a shape type from the dropdown above to start
+  `ol/interaction/Draw`. Select a shape type from the dropdown above to start
   drawing. To activate freehand drawing, hold the `Shift` key. Square drawing is
   achieved by using `type: 'Circle'` type with a `geometryFunction` that creates
   a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'`

examples/earthquake-clusters.html

@@ -6,7 +6,7 @@ docs: >
   <p>This example parses a KML file and renders the features as clusters on a vector layer.  The styling in this example is quite involved. Single earthquake locations
   (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents
   the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.</p>
-  <p>To achieve this, we make heavy use of style functions and <code>ol.style.Style#geometry</code>.</p>
+  <p>To achieve this, we make heavy use of style functions.</p>
 tags: "KML, vector, style, geometry, cluster"
 ---
 <div id="map" class="map"></div>

examples/earthquake-custom-symbol.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Earthquakes with custom symbols
-shortdesc: Demonstrates the use of `ol.render.toCanvas` to create custom icon symbols.
+shortdesc: Demonstrates the use of `toCanvas` to create custom icon symbols.
 docs: >
   This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>style</code> that renders earthquake locations with a custom lightning symbol and a size relative to their magnitude.
 tags: "KML, vector, style, canvas, symbol"

examples/getfeatureinfo-layers.html

@@ -6,7 +6,7 @@ shortdesc: >
   request
 docs: >
   Demonstrates the use of the `layers` option in the
-  `ol.format.WMSGetFeatureInfo` format object, which allows features returned
+  `ol/format/WMSGetFeatureInfo` format object, which allows features returned
   by a single WMS GetFeatureInfo request that asks for more than one layer
   to be read by layer name.
 ---

examples/heatmap-earthquakes.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Earthquakes Heatmap
 shortdesc: Demonstrates the use of a heatmap layer.
 docs: >
-  This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
+  This example parses a KML file and renders the features as a <code>ol/layer/Heatmap</code> layer.
 tags: "heatmap, kml, vector, style"
 ---
 <div id="map" class="map"></div>

examples/here-maps.html

@@ -3,7 +3,7 @@ layout: example.html
 title: HERE Map Tile API
 shortdesc: Example of a map with map tiles from HERE.
 docs: >
-  <p><a href="https://developer.here.com/rest-apis/documentation/enterprise-map-tile">HERE Map Tile API</a> used with <code>ol.source.XYZ</code>.</p>
+  <p><a href="https://developer.here.com/rest-apis/documentation/enterprise-map-tile">HERE Map Tile API</a> used with <code>ol/source/XYZ</code>.</p>
   <p>Be sure to respect the <a href="https://legal.here.com/en/terms/serviceterms/us/">HERE Service Terms</a> when using their tile API.</p>
 tags: "here, here-maps, here-tile-api"
 cloak:

examples/icon-color.html

@@ -4,7 +4,7 @@ title: Icon Colors
 shortdesc: Example assigning a custom color to an icon
 docs: >
   Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file.
-  Note that icon files need to obey the same origin policy or send proper CORS headers for this to work. When relying on CORS headers, the `ol.style.Icon` must be configured with `crossOrigin: 'anonymous'`.
+  Note that icon files need to obey the same origin policy or send proper CORS headers for this to work. When relying on CORS headers, the `ol/style/Icon` must be configured with `crossOrigin: 'anonymous'`.
 tags: "vector, style, icon, marker"
 resources:
 ---

examples/image-vector-layer.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Image Vector Layer
 shortdesc: Example of an image vector layer.
 docs: >
-  <p>This example uses <code>ol.layer.Vector</code> with `renderMode: 'image'`. This mode results in faster rendering during interaction and animations, at the cost of less accurate rendering.</p>
+  <p>This example uses <code>ol/layer/Vector</code> with `renderMode: 'image'`. This mode results in faster rendering during interaction and animations, at the cost of less accurate rendering.</p>
 tags: "vector, image"
 ---
 <div id="map" class="map"></div>

examples/kml-timezones.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Timezones in KML
 shortdesc: Demonstrates rendering timezones from KML.
 docs: >
-  This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>ol.style.Style</code> that fills timezones
+  This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>ol/style/Style</code> that fills timezones
   yellow with an opacity calculated based on the current offset to local noon.
 tags: "KML, vector, style"
 resources:

examples/kml.html

@@ -3,7 +3,7 @@ layout: example.html
 title: KML
 shortdesc: Rendering KML with a vector source.
 docs: >
-  This example uses the <code>ol.format.KML</code> to parse KML for rendering with a vector source.
+  This example uses the <code>ol/format/KML</code> to parse KML for rendering with a vector source.
 tags: "KML"
 cloak:
   - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5

examples/mousewheel-zoom.html

@@ -3,12 +3,12 @@ layout: example.html
 title: Mousewheel/Trackpad Zoom
 shortdesc: Shows advanced wheel/trackpad zoom options.
 docs: >
-  This example uses a custom `ol.interaction.MouseWheelZoom` configuration:
+  This example uses a custom `ol/interaction/MouseWheelZoom` configuration:
 
    * By default, wheel/trackpad zoom is always active, which can be unexpected
      on pages with a lot of scrollable content and an embedded map. To perform
      wheel/trackpad zoom actions only when the map has the focus, set
-     `condition: ol.events.condition.focus` as constructor option. This requires
+     `condition: focus` as constructor option. This requires
      a map div with a `tabindex` attribute set.
    * By default, the interaction can leave the map at fractional zoom levels. If
      instead you want to constrain wheel/trackpad zooming to integer zoom

examples/navigation-controls.html

@@ -3,11 +3,11 @@ layout: example.html
 title: Navigation Controls
 shortdesc: Shows how to add navigation controls.
 docs: >
-  <p>This example shows how to use the <code>ol.control.ZoomToExtent</code> control.</p>
+  <p>This example shows how to use the <code>ol/control/ZoomToExtent</code> control.</p>
   <p>The following navigation controls are added to the map:</p>
   <ul>
-    <li><code>ol.control.Zoom</code> (added by default)</li>
+    <li><code>ol/control/Zoom</code> (added by default)</li>
-    <li><code>ol.control.ZoomToExtent</code></li>
+    <li><code>ol/control/ZoomToExtent</code></li>
   </ul>
 tags: "control, navigation, extent"
 ---

examples/osm-vector-tiles.html

@@ -3,7 +3,7 @@ layout: example.html
 title: OSM Vector Tiles
 shortdesc: Using OpenStreetMap vector tiles.
 docs: >
-  A simple vector tiles map with Mapzen vector tiles. This example uses the TopoJSON format's `layerName` option to determine the layer ("water", "roads", "buildings") for styling. **Note**: [`ol.format.MVT`](../apidoc/ol.format.MVT.html) is an even more efficient format for vector tiles.
+  A simple vector tiles map with Mapzen vector tiles. This example uses the TopoJSON format's `layerName` option to determine the layer ("water", "roads", "buildings") for styling. **Note**: [`ol/format/MVT`] is an even more efficient format for vector tiles.
 tags: "vector, tiles, osm, mapzen"
 cloak:
   - key: vector-tiles-5eJz6JX

examples/pinch-zoom.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Pinch Zoom
 shortdesc: Restrict pinch zooming to integer zoom levels.
 docs: >
-  By default, the `ol.interaction.PinchZoom` can leave the map at fractional zoom levels.
+  By default, the `ol/interaction/PinchZoom` can leave the map at fractional zoom levels.
   If instead you want to constrain pinch zooming to integer zoom levels, set
   <code>constrainResolution: true</code> when constructing the interaction.
 tags: "pinch, zoom, interaction"

examples/popup.html

@@ -4,7 +4,7 @@ title: Popup
 shortdesc: Uses an overlay to create a popup.
 docs: >
   <p>
-    Click on the map to get a popup.  The popup is composed of a few basic elements: a container, a close button, and a place for the content.  To anchor the popup to the map, an <code>ol.Overlay</code> is created with the popup container.  A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
+    Click on the map to get a popup.  The popup is composed of a few basic elements: a container, a close button, and a place for the content.  To anchor the popup to the map, an <code>ol/Overlay</code> is created with the popup container.  A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
   </p>
 tags: "overlay, popup"
 ---

examples/raster.html

@@ -4,7 +4,7 @@ title: Raster Source
 shortdesc: Demonstrates pixelwise operations with a raster source.
 docs: >
   <p>
-    This example uses a <code>ol.source.Raster</code> to generate data
+    This example uses a <code>ol/source/Raster</code> to generate data
     based on another source.  The raster source accepts any number of
     input sources (tile or image based) and runs a pipeline of
     operations on the input pixels.  The return from the final

examples/region-growing.html

@@ -5,7 +5,7 @@ shortdesc: Grow a region from a seed pixel
 docs: >
   <p>Click a region on the map. The computed region will be red.</p>
   <p>
-    This example uses a <code>ol.source.Raster</code> to generate data
+    This example uses a <code>ol/source/Raster</code> to generate data
     based on another source.  The raster source accepts any number of
     input sources (tile or image based) and runs a pipeline of
     operations on the input data.  The return from the final

examples/sea-level.html

@@ -4,7 +4,7 @@ title: Sea Level
 shortdesc: Render sea level at different elevations
 docs: >
   <p>
-    This example uses a <code>ol.source.Raster</code> with
+    This example uses a <code>ol/source/Raster</code> with
     <a href="https://www.mapbox.com/blog/terrain-rgb/">Mapbox Terrain-RGB tiles</a>
     to "flood" areas below the elevation shown on the sea level slider.
   </p>

examples/shaded-relief.html

@@ -4,7 +4,7 @@ title: Shaded Relief
 shortdesc: Calculate shaded relief from elevation data
 docs: >
   <p>
-    This example uses a <code>ol.source.Raster</code> to generate data
+    This example uses a <code>ol/source/Raster</code> to generate data
     based on another source.  The raster source accepts any number of
     input sources (tile or image based) and runs a pipeline of
     operations on the input data.  The return from the final

examples/topojson.html

@@ -3,7 +3,7 @@ layout: example.html
 title: TopoJSON
 shortdesc: Demonstrates rendering of features from a TopoJSON topology.
 docs: >
-  This example uses a vector layer with `ol.format.TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki).
+  This example uses a vector layer with `ol/format/TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki).
 tags: "topojson, vector, style"
 ---
 <div id="map" class="map"></div>

examples/wms-custom-proj.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Custom Tiled WMS
 shortdesc: Example of using custom coordinate transform functions.
 docs: >
-  With `ol.proj.addCoordinateTransforms()`, custom coordinate transform functions can be added to configured projections.
+  With `addCoordinateTransforms()`, custom coordinate transform functions can be added to configured projections.
 tags: "wms, tile, tilelayer, projection"
 ---
 <div id="map" class="map"></div>

examples/xyz-esri-4326-512.html

@@ -3,7 +3,7 @@ layout: example.html
 title: ArcGIS REST with 512x512 Tiles
 shortdesc: Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles.
 docs: >
-  ArcGIS REST tile services with custom tile sizes (here: 512x512 pixels) and projection (here: EPSG:4326) are supported by `ol.source.XYZ`. A custom tile url function is used to handle zoom level offsets.
+  ArcGIS REST tile services with custom tile sizes (here: 512x512 pixels) and projection (here: EPSG:4326) are supported by `ol/source/XYZ`. A custom tile url function is used to handle zoom level offsets.
 tags: "xyz, esri, tilesize, custom projection"
 ---
 <div id="map" class="map"></div>

examples/xyz-esri.html

@@ -3,7 +3,7 @@ layout: example.html
 title: XYZ Esri
 shortdesc: Example of a XYZ source using Esri tiles.
 docs: >
-  ArcGIS REST tile services are supported by `ol.source.XYZ`.
+  ArcGIS REST tile services are supported by `ol/source/XYZ`.
 tags: "xyz, esri, arcgis rest"
 ---
 <div id="map" class="map"></div>

examples/zoomslider.js

@@ -9,7 +9,7 @@ import OSM from '../src/ol/source/OSM.js';
  * Helper method for map-creation.
  *
  * @param {string} divId The id of the div for the map.
- * @return {ol.PluggableMap} The ol.Map instance.
+ * @return {ol.PluggableMap} The map instance.
  */
 function createMap(divId) {
   const source = new OSM();