From 054af0903281760daa80a289d1c1d50481be59cc Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 6 Apr 2020 12:25:12 -0600 Subject: [PATCH] Make code prettier This updates ESLint and our shared eslint-config-openlayers to use Prettier. Most formatting changes were automatically applied with this: npm run lint -- --fix A few manual changes were required: * In `examples/offscreen-canvas.js`, the `//eslint-disable-line` comment needed to be moved to the appropriate line to disable the error about the `'worker-loader!./offscreen-canvas.worker.js'` import. * In `examples/webpack/exapmle-builder.js`, spaces could not be added after a couple `function`s for some reason. While editing this, I reworked `ExampleBuilder` to be a class. * In `src/ol/format/WMSGetFeatureInfo.js`, the `// @ts-ignore` comment needed to be moved down one line so it applied to the `parsersNS` argument. --- config/jsdoc/api/plugins/api.js | 49 +- config/jsdoc/api/plugins/events.js | 8 +- config/jsdoc/api/plugins/inline-options.js | 21 +- config/jsdoc/api/plugins/markdown.js | 42 +- config/jsdoc/api/plugins/observable.js | 18 +- config/jsdoc/api/template/publish.js | 205 +- config/jsdoc/info/api-plugin.js | 10 +- config/jsdoc/info/define-plugin.js | 12 +- config/jsdoc/info/publish.js | 237 +- config/jsdoc/info/virtual-plugin.js | 8 +- config/webpack-config-legacy-build.js | 4 +- examples/accessible.js | 17 +- examples/animation.js | 135 +- examples/arcgis-image.js | 21 +- examples/arcgis-tiled.js | 19 +- examples/attributions.js | 16 +- examples/bing-maps.js | 36 +- examples/box-selection.js | 35 +- examples/button-title.js | 17 +- examples/canvas-gradient-pattern.js | 32 +- examples/canvas-tiles.js | 13 +- examples/cartodb.js | 37 +- examples/center.js | 77 +- examples/chaikin.js | 20 +- examples/cluster.js | 41 +- examples/color-manipulation.js | 59 +- examples/custom-controls.js | 25 +- examples/custom-interactions.js | 78 +- examples/d3.js | 41 +- examples/device-orientation.js | 19 +- examples/disable-image-smoothing.js | 60 +- examples/drag-and-drop-image-vector.js | 56 +- examples/drag-and-drop.js | 51 +- examples/drag-rotate-and-zoom.js | 22 +- examples/draw-and-modify-features.js | 29 +- examples/draw-features.js | 17 +- examples/draw-freehand.js | 17 +- examples/draw-shapes.js | 26 +- examples/dynamic-data.js | 34 +- examples/earthquake-clusters.js | 93 +- examples/earthquake-custom-symbol.js | 57 +- examples/edit-geographic.js | 24 +- examples/epsg-4326.js | 21 +- examples/es2015-custom-element.js | 14 +- examples/export-map.js | 51 +- examples/export-pdf.js | 126 +- examples/extent-constrained.js | 15 +- examples/extent-interaction.js | 22 +- examples/feature-animation.js | 32 +- examples/feature-move-animation.js | 86 +- examples/filter-points-webgl.js | 89 +- examples/flight-animation.js | 92 +- examples/fractal.js | 31 +- examples/full-screen-drag-rotate-and-zoom.js | 34 +- examples/full-screen-source.js | 19 +- examples/full-screen.js | 25 +- examples/geographic.js | 38 +- examples/geojson-vt.js | 92 +- examples/geojson.js | 255 +- examples/geolocation-orientation.js | 105 +- examples/geolocation.js | 57 +- examples/getfeatureinfo-image.js | 26 +- examples/getfeatureinfo-layers.js | 42 +- examples/getfeatureinfo-tile.js | 24 +- examples/gpx.js | 51 +- examples/graticule.js | 21 +- examples/heatmap-earthquakes.js | 26 +- examples/here-maps.js | 44 +- examples/hit-tolerance.js | 55 +- examples/hitdetect-vector.js | 53 +- examples/icon-color.js | 72 +- examples/icon-negative.js | 32 +- examples/icon-sprite-webgl.js | 115 +- examples/icon.js | 38 +- examples/igc.js | 80 +- examples/iiif.js | 74 +- examples/image-filter.js | 80 +- examples/image-load-events.js | 42 +- examples/image-vector-layer.js | 76 +- examples/immediate-geographic.js | 22 +- examples/jsts.js | 75 +- examples/kml-earthquakes.js | 46 +- examples/kml-timezones.js | 51 +- examples/kml.js | 31 +- examples/layer-clipping-vector.js | 31 +- examples/layer-clipping.js | 18 +- examples/layer-extent.js | 33 +- examples/layer-group.js | 57 +- examples/layer-spy.js | 40 +- examples/layer-swipe.js | 31 +- examples/layer-z-index.js | 29 +- examples/layer-zoom-limits.js | 23 +- examples/lazy-source.js | 12 +- examples/line-arrows.js | 56 +- examples/localized-openstreetmap.js | 30 +- examples/magnify.js | 34 +- examples/mapbox-layer.js | 34 +- examples/mapbox-style.js | 7 +- examples/mapbox-vector-tiles-advanced.js | 44 +- examples/mapbox-vector-tiles.js | 25 +- examples/mapguide-untiled.js | 21 +- examples/measure.js | 149 +- examples/min-max-resolution.js | 23 +- examples/min-zoom.js | 14 +- examples/mobile-full-screen.js | 22 +- examples/modify-features.js | 25 +- examples/modify-test.js | 334 +- examples/mouse-position.js | 22 +- examples/moveend.js | 15 +- examples/navigation-controls.js | 25 +- examples/offscreen-canvas.js | 68 +- examples/offscreen-canvas.worker.js | 159 +- examples/osm-vector-tiles.js | 55 +- examples/overlay.js | 27 +- examples/overviewmap-custom.js | 41 +- examples/overviewmap.js | 24 +- examples/page-scroll.js | 13 +- examples/permalink.js | 37 +- examples/pinch-zoom.js | 22 +- examples/polygon-styles.js | 122 +- examples/popup.js | 40 +- examples/preload.js | 31 +- examples/print-to-scale.js | 132 +- examples/raster.js | 102 +- examples/region-growing.js | 36 +- examples/regularshape.js | 48 +- examples/render-geometry.js | 25 +- examples/reprojection-by-code.js | 99 +- examples/reprojection-image.js | 36 +- examples/reprojection-wgs84.js | 12 +- examples/reprojection.js | 193 +- examples/reusable-source.js | 22 +- examples/rotation.js | 13 +- examples/scale-line.js | 22 +- examples/scaleline-indiana-east.js | 30 +- examples/sea-level.js | 44 +- examples/select-features.js | 45 +- examples/select-hover-features.js | 34 +- examples/select-multiple-features.js | 34 +- examples/semi-transparent-layer.js | 25 +- examples/shaded-relief.js | 47 +- examples/side-by-side.js | 19 +- examples/simple.js | 13 +- examples/snap.js | 59 +- examples/sphere-mollweide.js | 36 +- examples/stamen.js | 21 +- examples/static-image.js | 19 +- examples/street-labels.js | 59 +- examples/svg-layer.js | 44 +- examples/synthetic-lines.js | 19 +- examples/synthetic-points.js | 49 +- examples/teleport.js | 25 +- examples/tile-load-events.js | 49 +- examples/tile-transitions.js | 29 +- examples/tilejson.js | 15 +- examples/tissot.js | 34 +- examples/topojson.js | 31 +- examples/topolis.js | 88 +- examples/tracing.js | 88 +- examples/translate-features.js | 25 +- examples/turf.js | 61 +- examples/two-finger-pan-scroll.js | 22 +- examples/utfgrid.js | 39 +- examples/vector-esri-edit.js | 144 +- examples/vector-esri.js | 136 +- examples/vector-label-decluttering.js | 28 +- examples/vector-labels.js | 103 +- examples/vector-layer.js | 53 +- examples/vector-osm.js | 89 +- examples/vector-tile-info.js | 21 +- examples/vector-tile-selection.js | 49 +- examples/vector-tiles-4326.js | 41 +- examples/vector-wfs-getfeature.js | 50 +- examples/vector-wfs.js | 45 +- examples/webgl-points-layer.js | 140 +- examples/webpack/config.js | 68 +- examples/webpack/example-builder.js | 387 +- examples/webpack/worker-loader.js | 2 +- examples/wkt.js | 21 +- examples/wms-capabilities.js | 14 +- examples/wms-custom-proj.js | 130 +- examples/wms-custom-tilegrid-512x256.js | 25 +- examples/wms-getlegendgraphic.js | 20 +- examples/wms-image-custom-proj.js | 51 +- examples/wms-image.js | 17 +- examples/wms-no-proj.js | 35 +- examples/wms-tiled-wrap-180.js | 17 +- examples/wms-tiled.js | 17 +- examples/wms-time.js | 24 +- examples/wmts-capabilities.js | 14 +- examples/wmts-dimensions.js | 31 +- examples/wmts-hidpi.js | 42 +- examples/wmts-ign.js | 22 +- examples/wmts-layer-from-capabilities.js | 56 +- examples/wmts.js | 33 +- examples/worker.js | 19 +- examples/xyz-esri-4326-512.js | 17 +- examples/xyz-esri.js | 23 +- examples/xyz-retina.js | 26 +- examples/xyz.js | 16 +- examples/zoom-constrained.js | 17 +- examples/zoomify.js | 16 +- examples/zoomslider.js | 11 +- package-lock.json | 818 +-- package.json | 4 +- rendering/cases/circle-style/main.js | 35 +- rendering/cases/geometry-geographic/main.js | 31 +- rendering/cases/heatmap-layer/main.js | 24 +- rendering/cases/icon-opacity/main.js | 39 +- rendering/cases/icon-symbol-svg/main.js | 75 +- rendering/cases/icon-symbol/main.js | 39 +- rendering/cases/immediate-geographic/main.js | 30 +- rendering/cases/layer-clipping/main.js | 44 +- rendering/cases/layer-group/main.js | 18 +- .../main.js | 30 +- .../cases/layer-image-extent-rotation/main.js | 36 +- rendering/cases/layer-image/main.js | 30 +- .../layer-tile-extent-geographic/main.js | 16 +- rendering/cases/layer-tile-extent/main.js | 18 +- .../cases/layer-tile-none-square/main.js | 12 +- rendering/cases/layer-tile-opacity/main.js | 14 +- .../cases/layer-tile-render-listener/main.js | 42 +- rendering/cases/layer-tile-simple/main.js | 14 +- rendering/cases/layer-tile-transition/main.js | 14 +- rendering/cases/layer-tile-two-layers/main.js | 16 +- .../cases/layer-vector-decluttering/main.js | 186 +- .../layer-vector-extent-geographic/main.js | 14 +- .../main.js | 29 +- .../layer-vector-polygon-partial/main.js | 62 +- rendering/cases/layer-vector-polygon/main.js | 48 +- rendering/cases/layer-vector/main.js | 103 +- .../layer-vectorimage-decluttering/main.js | 186 +- rendering/cases/layer-vectorimage/main.js | 105 +- .../main.js | 20 +- .../layer-vectortile-rotate-hidpi/main.js | 20 +- .../layer-vectortile-rotate-vector/main.js | 44 +- .../cases/layer-vectortile-rotate/main.js | 18 +- .../cases/layer-vectortile-simple/main.js | 20 +- .../cases/linestring-style-css-filter/main.js | 80 +- .../cases/linestring-style-opacity/main.js | 80 +- .../cases/linestring-style-rotation/main.js | 80 +- rendering/cases/linestring-style/main.js | 80 +- rendering/cases/map-pan/main.js | 20 +- rendering/cases/map-text-align/main.js | 15 +- rendering/cases/map/main.js | 20 +- rendering/cases/multiple-layers/main.js | 37 +- rendering/cases/multipoint-style/main.js | 256 +- rendering/cases/point-style/main.js | 256 +- .../polygon-style-gradient-pattern/main.js | 84 +- rendering/cases/polygon-style/main.js | 168 +- rendering/cases/regularshape-style/main.js | 115 +- rendering/cases/render-context/main.js | 151 +- rendering/cases/reproj-image/main.js | 27 +- rendering/cases/reproj-tile-4326/main.js | 21 +- rendering/cases/reproj-tile-5070/main.js | 20 +- rendering/cases/reproj-tile-54009/main.js | 19 +- .../cases/reproj-tile-dateline-merc/main.js | 16 +- .../reproj-tile-disable-smoothing/main.js | 12 +- .../cases/reproj-tile-none-square/main.js | 19 +- rendering/cases/reproj-tile-northpole/main.js | 21 +- rendering/cases/rotated-view/main.js | 31 +- rendering/cases/single-layer/main.js | 12 +- rendering/cases/source-raster/main.js | 23 +- .../cases/source-tilewms-gutter0/main.js | 11 +- .../cases/source-tilewms-gutter20/main.js | 11 +- rendering/cases/stacking/main.js | 50 +- .../cases/text-style-linestring-nice/main.js | 187 +- .../cases/text-style-linestring-ugly/main.js | 165 +- rendering/cases/text-style-overlap/main.js | 96 +- rendering/cases/text-style/main.js | 172 +- .../cases/tile-disable-smoothing/main.js | 10 +- rendering/cases/vector-zindex/main.js | 46 +- rendering/cases/webgl-points/main.js | 30 +- rendering/cases/zoomify-no-zdirection/main.js | 10 +- rendering/cases/zoomify-zdirection/main.js | 10 +- rendering/test.js | 136 +- rendering/webpack.config.js | 22 +- src/ol/AssertionError.js | 10 +- src/ol/Collection.js | 26 +- src/ol/CollectionEventType.js | 2 +- src/ol/Disposable.js | 1 - src/ol/Feature.js | 44 +- src/ol/Geolocation.js | 83 +- src/ol/Image.js | 56 +- src/ol/ImageBase.js | 6 +- src/ol/ImageCanvas.js | 9 +- src/ol/ImageState.js | 2 +- src/ol/ImageTile.js | 14 +- src/ol/Kinetic.js | 2 - src/ol/Map.js | 6 +- src/ol/MapBrowserEvent.js | 4 - src/ol/MapBrowserEventHandler.js | 144 +- src/ol/MapBrowserEventType.js | 3 +- src/ol/MapBrowserPointerEvent.js | 4 - src/ol/MapEvent.js | 4 - src/ol/MapEventType.js | 4 +- src/ol/MapProperty.js | 2 +- src/ol/Object.js | 19 +- src/ol/ObjectEventType.js | 2 +- src/ol/Observable.js | 6 +- src/ol/Overlay.js | 153 +- src/ol/OverlayPositioning.js | 2 +- src/ol/PluggableMap.js | 479 +- src/ol/Tile.js | 18 +- src/ol/TileCache.js | 16 +- src/ol/TileQueue.js | 45 +- src/ol/TileRange.js | 31 +- src/ol/TileState.js | 2 +- src/ol/VectorRenderTile.js | 8 +- src/ol/VectorTile.js | 3 - src/ol/View.js | 474 +- src/ol/ViewHint.js | 2 +- src/ol/ViewProperty.js | 2 +- src/ol/array.js | 29 +- src/ol/centerconstraint.js | 11 +- src/ol/color.js | 103 +- src/ol/colorlike.js | 2 - src/ol/control.js | 8 +- src/ol/control/Attribution.js | 58 +- src/ol/control/Control.js | 27 +- src/ol/control/FullScreen.js | 74 +- src/ol/control/MousePosition.js | 52 +- src/ol/control/OverviewMap.js | 159 +- src/ol/control/Rotate.js | 24 +- src/ol/control/ScaleLine.js | 144 +- src/ol/control/Zoom.js | 54 +- src/ol/control/ZoomSlider.js | 82 +- src/ol/control/ZoomToExtent.js | 28 +- src/ol/coordinate.js | 69 +- src/ol/css.js | 33 +- src/ol/dom.js | 14 +- src/ol/easing.js | 5 - src/ol/events.js | 7 +- src/ol/events/Event.js | 5 - src/ol/events/EventType.js | 2 +- src/ol/events/KeyCode.js | 2 +- src/ol/events/Target.js | 22 +- src/ol/events/condition.js | 93 +- src/ol/extent.js | 197 +- src/ol/extent/Corner.js | 2 +- src/ol/extent/Relationship.js | 2 +- src/ol/featureloader.js | 51 +- src/ol/format/EsriJSON.js | 129 +- src/ol/format/Feature.js | 85 +- src/ol/format/FormatType.js | 2 +- src/ol/format/GML.js | 2 - src/ol/format/GML2.js | 331 +- src/ol/format/GML3.js | 544 +- src/ol/format/GML32.js | 211 +- src/ol/format/GMLBase.js | 223 +- src/ol/format/GPX.js | 602 ++- src/ol/format/GeoJSON.js | 133 +- src/ol/format/IGC.js | 27 +- src/ol/format/IIIFInfo.js | 298 +- src/ol/format/JSONFeature.js | 16 +- src/ol/format/KML.js | 1727 ++++--- src/ol/format/MVT.js | 102 +- src/ol/format/OSMXML.js | 103 +- src/ol/format/OWS.js | 241 +- src/ol/format/Polyline.js | 62 +- src/ol/format/TextFeature.js | 19 +- src/ol/format/TopoJSON.js | 100 +- src/ol/format/WFS.js | 412 +- src/ol/format/WKT.js | 87 +- src/ol/format/WMSCapabilities.js | 390 +- src/ol/format/WMSGetFeatureInfo.js | 39 +- src/ol/format/WMTSCapabilities.js | 188 +- src/ol/format/XLink.js | 2 - src/ol/format/XMLFeature.js | 40 +- src/ol/format/filter.js | 38 +- src/ol/format/filter/And.js | 2 - src/ol/format/filter/Bbox.js | 7 +- src/ol/format/filter/Comparison.js | 3 - src/ol/format/filter/ComparisonBinary.js | 3 - src/ol/format/filter/Contains.js | 4 - src/ol/format/filter/During.js | 2 - src/ol/format/filter/EqualTo.js | 2 - src/ol/format/filter/Filter.js | 2 - src/ol/format/filter/GreaterThan.js | 2 - src/ol/format/filter/GreaterThanOrEqualTo.js | 2 - src/ol/format/filter/Intersects.js | 2 - src/ol/format/filter/IsBetween.js | 2 - src/ol/format/filter/IsLike.js | 17 +- src/ol/format/filter/IsNull.js | 2 - src/ol/format/filter/LessThan.js | 2 - src/ol/format/filter/LessThanOrEqualTo.js | 2 - src/ol/format/filter/LogicalNary.js | 5 +- src/ol/format/filter/Not.js | 4 - src/ol/format/filter/NotEqualTo.js | 2 - src/ol/format/filter/Or.js | 2 - src/ol/format/filter/Spatial.js | 3 - src/ol/format/filter/Within.js | 2 - src/ol/format/xsd.js | 35 +- src/ol/functions.js | 2 +- src/ol/geom/Circle.js | 27 +- src/ol/geom/Geometry.js | 75 +- src/ol/geom/GeometryCollection.js | 43 +- src/ol/geom/GeometryLayout.js | 2 +- src/ol/geom/GeometryType.js | 2 +- src/ol/geom/LineString.js | 115 +- src/ol/geom/LinearRing.js | 73 +- src/ol/geom/MultiLineString.js | 136 +- src/ol/geom/MultiPoint.js | 52 +- src/ol/geom/MultiPolygon.js | 174 +- src/ol/geom/Point.js | 17 +- src/ol/geom/Polygon.js | 184 +- src/ol/geom/SimpleGeometry.js | 83 +- src/ol/geom/flat/area.js | 3 - src/ol/geom/flat/center.js | 8 +- src/ol/geom/flat/closest.js | 157 +- src/ol/geom/flat/contains.js | 64 +- src/ol/geom/flat/deflate.js | 40 +- src/ol/geom/flat/flip.js | 10 +- src/ol/geom/flat/geodesic.js | 53 +- src/ol/geom/flat/inflate.js | 44 +- src/ol/geom/flat/interiorpoint.js | 36 +- src/ol/geom/flat/interpolate.js | 76 +- src/ol/geom/flat/intersectsextent.js | 159 +- src/ol/geom/flat/length.js | 2 - src/ol/geom/flat/orient.js | 68 +- src/ol/geom/flat/reverse.js | 1 - src/ol/geom/flat/segments.js | 3 +- src/ol/geom/flat/simplify.js | 189 +- src/ol/geom/flat/straightchunk.js | 1 - src/ol/geom/flat/textpath.js | 21 +- src/ol/geom/flat/topology.js | 7 +- src/ol/geom/flat/transform.js | 44 +- src/ol/has.js | 21 +- src/ol/interaction.js | 84 +- src/ol/interaction/DoubleClickZoom.js | 10 +- src/ol/interaction/DragAndDrop.js | 48 +- src/ol/interaction/DragBox.js | 56 +- src/ol/interaction/DragPan.js | 31 +- src/ol/interaction/DragRotate.js | 27 +- src/ol/interaction/DragRotateAndZoom.js | 7 +- src/ol/interaction/DragZoom.js | 25 +- src/ol/interaction/Draw.js | 307 +- src/ol/interaction/Extent.js | 112 +- src/ol/interaction/Interaction.js | 9 +- src/ol/interaction/KeyboardPan.js | 40 +- src/ol/interaction/KeyboardZoom.js | 24 +- src/ol/interaction/Modify.js | 354 +- src/ol/interaction/MouseWheelZoom.js | 51 +- src/ol/interaction/PinchRotate.js | 14 +- src/ol/interaction/PinchZoom.js | 9 +- src/ol/interaction/Pointer.js | 26 +- src/ol/interaction/Property.js | 2 +- src/ol/interaction/Select.js | 175 +- src/ol/interaction/Snap.js | 182 +- src/ol/interaction/Translate.js | 67 +- src/ol/layer.js | 1 - src/ol/layer/Base.js | 45 +- src/ol/layer/BaseImage.js | 4 - src/ol/layer/BaseTile.js | 55 +- src/ol/layer/BaseVector.js | 42 +- src/ol/layer/Graticule.js | 364 +- src/ol/layer/Group.js | 79 +- src/ol/layer/Heatmap.js | 49 +- src/ol/layer/Image.js | 3 - src/ol/layer/Layer.js | 62 +- src/ol/layer/Property.js | 2 +- src/ol/layer/Tile.js | 3 - src/ol/layer/TileProperty.js | 2 +- src/ol/layer/Vector.js | 2 - src/ol/layer/VectorImage.js | 8 +- src/ol/layer/VectorTile.js | 27 +- src/ol/layer/VectorTileRenderType.js | 2 +- src/ol/layer/WebGLPoints.js | 16 +- src/ol/loadingstrategy.js | 17 +- src/ol/math.js | 16 +- src/ol/net.js | 13 +- src/ol/obj.js | 56 +- src/ol/pointer/EventType.js | 2 +- src/ol/proj.js | 155 +- src/ol/proj/Projection.js | 11 +- src/ol/proj/Units.js | 5 +- src/ol/proj/epsg3857.js | 35 +- src/ol/proj/epsg4326.js | 14 +- src/ol/proj/proj4.js | 30 +- src/ol/proj/projections.js | 4 - src/ol/proj/transforms.js | 5 - src/ol/render.js | 42 +- src/ol/render/Box.js | 9 +- src/ol/render/Event.js | 4 - src/ol/render/EventType.js | 4 +- src/ol/render/Feature.js | 102 +- src/ol/render/canvas.js | 96 +- src/ol/render/canvas/Builder.js | 225 +- src/ol/render/canvas/BuilderGroup.js | 15 +- src/ol/render/canvas/BuilderType.js | 2 +- src/ol/render/canvas/Executor.js | 354 +- src/ol/render/canvas/ExecutorGroup.js | 131 +- src/ol/render/canvas/ImageBuilder.js | 102 +- src/ol/render/canvas/Immediate.js | 342 +- src/ol/render/canvas/Instruction.js | 7 +- src/ol/render/canvas/LineStringBuilder.js | 80 +- src/ol/render/canvas/PolygonBuilder.js | 85 +- src/ol/render/canvas/TextBuilder.js | 239 +- src/ol/render/canvas/hitdetect.js | 67 +- src/ol/renderer/Composite.js | 43 +- src/ol/renderer/Layer.js | 22 +- src/ol/renderer/Map.js | 66 +- src/ol/renderer/canvas/ImageLayer.js | 83 +- src/ol/renderer/canvas/Layer.js | 68 +- src/ol/renderer/canvas/TileLayer.js | 193 +- src/ol/renderer/canvas/VectorImageLayer.js | 125 +- src/ol/renderer/canvas/VectorLayer.js | 401 +- src/ol/renderer/canvas/VectorTileLayer.js | 442 +- src/ol/renderer/vector.js | 142 +- src/ol/renderer/webgl/Layer.js | 37 +- src/ol/renderer/webgl/PointsLayer.js | 301 +- src/ol/reproj.js | 169 +- src/ol/reproj/Image.js | 91 +- src/ol/reproj/Tile.js | 156 +- src/ol/reproj/Triangulation.js | 283 +- src/ol/resolutionconstraint.js | 115 +- src/ol/rotationconstraint.js | 17 +- src/ol/size.js | 5 - src/ol/source/BingMaps.js | 152 +- src/ol/source/CartoDB.js | 27 +- src/ol/source/Cluster.js | 29 +- src/ol/source/IIIF.js | 163 +- src/ol/source/Image.js | 86 +- src/ol/source/ImageArcGISRest.js | 77 +- src/ol/source/ImageCanvas.js | 62 +- src/ol/source/ImageMapGuide.js | 89 +- src/ol/source/ImageStatic.js | 51 +- src/ol/source/ImageWMS.js | 128 +- src/ol/source/OSM.js | 25 +- src/ol/source/Raster.js | 117 +- src/ol/source/Source.js | 26 +- src/ol/source/Stamen.js | 65 +- src/ol/source/State.js | 2 +- src/ol/source/Tile.js | 47 +- src/ol/source/TileArcGISRest.js | 42 +- src/ol/source/TileDebug.js | 59 +- src/ol/source/TileEventType.js | 4 +- src/ol/source/TileImage.js | 120 +- src/ol/source/TileJSON.js | 45 +- src/ol/source/TileWMS.js | 84 +- src/ol/source/UTFGrid.js | 150 +- src/ol/source/UrlTile.js | 31 +- src/ol/source/Vector.js | 185 +- src/ol/source/VectorEventType.js | 2 +- src/ol/source/VectorTile.js | 237 +- src/ol/source/WMSServerType.js | 2 +- src/ol/source/WMTS.js | 154 +- src/ol/source/WMTSRequestEncoding.js | 2 +- src/ol/source/XYZ.js | 27 +- src/ol/source/Zoomify.js | 101 +- src/ol/source/common.js | 2 +- src/ol/sphere.js | 39 +- src/ol/string.js | 8 +- src/ol/structs/LRUCache.js | 33 +- src/ol/structs/LinkedList.js | 17 +- src/ol/structs/PriorityQueue.js | 32 +- src/ol/structs/RBush.js | 36 +- src/ol/style/Circle.js | 10 +- src/ol/style/Fill.js | 6 +- src/ol/style/Icon.js | 107 +- src/ol/style/IconAnchorUnits.js | 2 +- src/ol/style/IconImage.js | 14 +- src/ol/style/IconImageCache.js | 62 +- src/ol/style/IconOrigin.js | 2 +- src/ol/style/Image.js | 6 +- src/ol/style/LiteralStyle.js | 3 +- src/ol/style/RegularShape.js | 83 +- src/ol/style/Stroke.js | 6 +- src/ol/style/Style.js | 102 +- src/ol/style/Text.js | 34 +- src/ol/style/TextPlacement.js | 2 +- src/ol/style/expressions.js | 330 +- src/ol/tilecoord.js | 7 - src/ol/tilegrid.js | 63 +- src/ol/tilegrid/TileGrid.js | 134 +- src/ol/tilegrid/WMTS.js | 48 +- src/ol/tileurlfunction.js | 14 +- src/ol/transform.js | 12 - src/ol/uri.js | 3 +- src/ol/util.js | 2 +- src/ol/vec/mat4.js | 2 - src/ol/webgl.js | 36 +- src/ol/webgl/Buffer.js | 8 +- src/ol/webgl/ContextEventType.js | 2 +- src/ol/webgl/Helper.js | 334 +- src/ol/webgl/PostProcessingPass.js | 142 +- src/ol/webgl/RenderTarget.js | 22 +- src/ol/webgl/ShaderBuilder.js | 145 +- src/ol/worker/version.js | 2 +- src/ol/worker/webgl.js | 29 +- src/ol/xml.js | 184 +- tasks/generate-index.js | 37 +- tasks/generate-info.js | 35 +- tasks/prepare-package.js | 10 +- tasks/serialize-workers.js | 17 +- test/karma.config.js | 119 +- test/spec/ol/MapBrowserEvent.test.js | 25 +- test/spec/ol/MapBrowserEventHandler.test.js | 75 +- test/spec/ol/array.test.js | 537 +- test/spec/ol/assertionerror.test.js | 21 +- test/spec/ol/asserts.test.js | 11 +- test/spec/ol/collection.test.js | 165 +- test/spec/ol/color.test.js | 129 +- test/spec/ol/control/attribution.test.js | 80 +- test/spec/ol/control/control.test.js | 36 +- test/spec/ol/control/fullscreen.test.js | 10 +- test/spec/ol/control/mouseposition.test.js | 54 +- test/spec/ol/control/overviewmap.test.js | 81 +- test/spec/ol/control/rotate.test.js | 10 +- test/spec/ol/control/scaleline.test.js | 466 +- test/spec/ol/control/zoom.test.js | 10 +- test/spec/ol/control/zoomslider.test.js | 78 +- test/spec/ol/control/zoomtoextent.test.js | 10 +- test/spec/ol/coordinate.test.js | 213 +- test/spec/ol/css.test.js | 80 +- test/spec/ol/disposable.test.js | 25 +- test/spec/ol/dom/dom.test.js | 213 +- test/spec/ol/events.test.js | 56 +- test/spec/ol/events/event.test.js | 33 +- test/spec/ol/events/eventtarget.test.js | 81 +- test/spec/ol/expect.test.js | 85 +- test/spec/ol/extent.test.js | 585 ++- test/spec/ol/feature.test.js | 201 +- test/spec/ol/featureloader.test.js | 28 +- test/spec/ol/format/esrijson.test.js | 1596 ++++-- test/spec/ol/format/geojson.test.js | 776 +-- test/spec/ol/format/gml.test.js | 3421 ++++++------ test/spec/ol/format/gpx.test.js | 687 +-- test/spec/ol/format/igc.test.js | 137 +- test/spec/ol/format/iiif.test.js | 299 +- test/spec/ol/format/kml.test.js | 4569 +++++++++-------- test/spec/ol/format/mvt.test.js | 129 +- test/spec/ol/format/osmxml.test.js | 144 +- test/spec/ol/format/ows.test.js | 161 +- test/spec/ol/format/polyline.test.js | 235 +- test/spec/ol/format/topojson.test.js | 144 +- test/spec/ol/format/wfs.test.js | 1369 ++--- test/spec/ol/format/wkt.test.js | 790 ++- test/spec/ol/format/wmscapabilities.test.js | 134 +- test/spec/ol/format/wmsgetfeatureinfo.test.js | 300 +- test/spec/ol/format/wmtscapabilities.test.js | 121 +- test/spec/ol/format/xsd.test.js | 13 +- test/spec/ol/functions.test.js | 15 +- test/spec/ol/geolocation.test.js | 11 +- test/spec/ol/geom/circle.test.js | 165 +- test/spec/ol/geom/flat/area.test.js | 24 +- test/spec/ol/geom/flat/center.test.js | 71 +- test/spec/ol/geom/flat/closest.test.js | 443 +- test/spec/ol/geom/flat/contains.test.js | 104 +- test/spec/ol/geom/flat/deflate.test.js | 52 +- test/spec/ol/geom/flat/flip.test.js | 32 +- test/spec/ol/geom/flat/inflate.test.js | 44 +- test/spec/ol/geom/flat/interpolate.test.js | 95 +- .../ol/geom/flat/intersectsextent.test.js | 194 +- test/spec/ol/geom/flat/length.test.js | 39 +- test/spec/ol/geom/flat/orient.test.js | 337 +- test/spec/ol/geom/flat/reverse.test.js | 91 +- test/spec/ol/geom/flat/segments.test.js | 20 +- test/spec/ol/geom/flat/simplify.test.js | 978 +++- test/spec/ol/geom/flat/straightchunk.test.js | 51 +- test/spec/ol/geom/flat/textpath.test.js | 200 +- .../ol/geom/flat/topologyflatgeom.test.js | 42 +- test/spec/ol/geom/flat/transform.test.js | 175 +- test/spec/ol/geom/geometrycollection.test.js | 204 +- test/spec/ol/geom/linestring.test.js | 387 +- test/spec/ol/geom/multilinestring.test.js | 694 ++- test/spec/ol/geom/multipoint.test.js | 252 +- test/spec/ol/geom/multipolygon.test.js | 516 +- test/spec/ol/geom/point.test.js | 133 +- test/spec/ol/geom/polygon.test.js | 587 ++- test/spec/ol/graticule.test.js | 151 +- test/spec/ol/image.test.js | 22 +- test/spec/ol/imagetile.test.js | 25 +- test/spec/ol/index.test.js | 6 +- test/spec/ol/interaction/draganddrop.test.js | 68 +- .../ol/interaction/dragrotateandzoom.test.js | 51 +- test/spec/ol/interaction/dragzoom.test.js | 54 +- test/spec/ol/interaction/draw.test.js | 602 ++- test/spec/ol/interaction/extent.test.js | 43 +- test/spec/ol/interaction/interaction.test.js | 51 +- test/spec/ol/interaction/keyboardpan.test.js | 19 +- test/spec/ol/interaction/keyboardzoom.test.js | 24 +- test/spec/ol/interaction/modify.test.js | 329 +- .../ol/interaction/mousewheelzoom.test.js | 64 +- test/spec/ol/interaction/pointer.test.js | 47 +- test/spec/ol/interaction/select.test.js | 225 +- test/spec/ol/interaction/snap.test.js | 167 +- test/spec/ol/interaction/translate.test.js | 102 +- test/spec/ol/layer/group.test.js | 200 +- test/spec/ol/layer/heatmap.test.js | 43 +- test/spec/ol/layer/layer.test.js | 556 +- test/spec/ol/layer/tile.test.js | 54 +- test/spec/ol/layer/vector.test.js | 110 +- test/spec/ol/layer/vectorimage.test.js | 38 +- test/spec/ol/layer/vectortile.test.js | 107 +- test/spec/ol/map.test.js | 504 +- test/spec/ol/math.test.js | 87 +- test/spec/ol/net.test.js | 35 +- test/spec/ol/object.test.js | 100 +- test/spec/ol/objectutil.test.js | 47 +- test/spec/ol/observable.test.js | 55 +- test/spec/ol/overlay.test.js | 44 +- test/spec/ol/proj.test.js | 528 +- test/spec/ol/proj/epsg3857.test.js | 96 +- test/spec/ol/proj/transforms.test.js | 15 +- test/spec/ol/render.test.js | 44 +- test/spec/ol/render/box.test.js | 31 +- .../ol/render/canvas/executorgroup.test.js | 9 +- test/spec/ol/render/canvas/hitdetect.test.js | 38 +- test/spec/ol/render/canvas/immediate.test.js | 260 +- test/spec/ol/render/canvas/index.test.js | 93 +- .../spec/ol/render/canvas/textbuilder.test.js | 105 +- test/spec/ol/render/feature.test.js | 260 +- test/spec/ol/renderer/canvas/builder.test.js | 308 +- .../ol/renderer/canvas/imagelayer.test.js | 89 +- .../spec/ol/renderer/canvas/tilelayer.test.js | 54 +- .../ol/renderer/canvas/vectorimage.test.js | 33 +- .../ol/renderer/canvas/vectorlayer.test.js | 363 +- .../renderer/canvas/vectortilelayer.test.js | 278 +- test/spec/ol/renderer/layer.test.js | 75 +- test/spec/ol/renderer/map.test.js | 11 +- test/spec/ol/renderer/vector.test.js | 174 +- test/spec/ol/renderer/webgl/layer.test.js | 94 +- .../ol/renderer/webgl/pointslayer.test.js | 331 +- test/spec/ol/reproj/image.test.js | 90 +- test/spec/ol/reproj/reproj.test.js | 44 +- test/spec/ol/reproj/tile.test.js | 105 +- test/spec/ol/reproj/triangulation.test.js | 57 +- test/spec/ol/resolutionconstraint.test.js | 224 +- test/spec/ol/rotationconstraint.test.js | 10 +- test/spec/ol/size.test.js | 44 +- test/spec/ol/source/bingmaps.test.js | 66 +- test/spec/ol/source/cartodb.test.js | 9 +- test/spec/ol/source/cluster.test.js | 74 +- test/spec/ol/source/iiif.test.js | 526 +- test/spec/ol/source/imagearcgisrest.test.js | 106 +- test/spec/ol/source/imagestatic.test.js | 55 +- test/spec/ol/source/imagewms.test.js | 212 +- test/spec/ol/source/raster.test.js | 204 +- test/spec/ol/source/source.test.js | 65 +- test/spec/ol/source/stamen.test.js | 18 +- test/spec/ol/source/tile.test.js | 164 +- test/spec/ol/source/tilearcgisrest.test.js | 147 +- test/spec/ol/source/tileimage.test.js | 193 +- test/spec/ol/source/tilejson.test.js | 126 +- test/spec/ol/source/tilewms.test.js | 160 +- test/spec/ol/source/urltile.test.js | 125 +- test/spec/ol/source/utfgrid.test.js | 123 +- test/spec/ol/source/vector.test.js | 474 +- test/spec/ol/source/vectortile.test.js | 286 +- test/spec/ol/source/wmts.test.js | 438 +- test/spec/ol/source/xyz.test.js | 161 +- test/spec/ol/source/zoomify.test.js | 218 +- test/spec/ol/sphere.test.js | 316 +- test/spec/ol/string.test.js | 20 +- test/spec/ol/structs/linkedlist.test.js | 98 +- test/spec/ol/structs/lrucache.test.js | 123 +- test/spec/ol/structs/priorityqueue.test.js | 59 +- test/spec/ol/structs/rbush.test.js | 176 +- test/spec/ol/style/circle.test.js | 65 +- test/spec/ol/style/expressions.test.js | 973 ++-- test/spec/ol/style/fill.test.js | 17 +- test/spec/ol/style/icon.test.js | 141 +- test/spec/ol/style/iconimagecache.test.js | 20 +- test/spec/ol/style/regularshape.test.js | 79 +- test/spec/ol/style/stroke.test.js | 17 +- test/spec/ol/style/style.test.js | 175 +- test/spec/ol/style/text.test.js | 67 +- test/spec/ol/tile.test.js | 37 +- test/spec/ol/tilecache.test.js | 19 +- test/spec/ol/tilecoord.test.js | 59 +- test/spec/ol/tilegrid/tilegrid.test.js | 473 +- test/spec/ol/tilegrid/wmts.test.js | 417 +- test/spec/ol/tilequeue.test.js | 59 +- test/spec/ol/tilerange.test.js | 32 +- test/spec/ol/tileurlfunction.test.js | 65 +- test/spec/ol/transform.test.js | 96 +- test/spec/ol/uri.test.js | 41 +- test/spec/ol/vec/mat4.test.js | 39 +- test/spec/ol/vectorrendertile.test.js | 51 +- test/spec/ol/vectortile.test.js | 33 +- test/spec/ol/view.test.js | 1547 +++--- test/spec/ol/webgl/buffer.test.js | 45 +- test/spec/ol/webgl/helper.test.js | 169 +- test/spec/ol/webgl/rendertarget.test.js | 44 +- test/spec/ol/webgl/shaderbuilder.test.js | 214 +- test/spec/ol/worker/version.test.js | 17 +- test/spec/ol/worker/webgl.test.js | 29 +- test/spec/util.js | 7 +- test/test-extensions.js | 251 +- 790 files changed, 46833 insertions(+), 33765 deletions(-) diff --git a/config/jsdoc/api/plugins/api.js b/config/jsdoc/api/plugins/api.js index 53e0a8c174..fcc6434864 100644 --- a/config/jsdoc/api/plugins/api.js +++ b/config/jsdoc/api/plugins/api.js @@ -2,19 +2,18 @@ * Define an @api tag * @param {Object} dictionary The tag dictionary. */ -exports.defineTags = function(dictionary) { +exports.defineTags = function (dictionary) { dictionary.defineTag('api', { mustNotHaveValue: true, canHaveType: false, canHaveName: false, - onTagged: function(doclet, tag) { + onTagged: function (doclet, tag) { includeTypes(doclet); doclet.stability = 'stable'; - } + }, }); }; - /* * Based on @api annotations, and assuming that items with no @api annotation * should not be documented, this plugin removes undocumented symbols @@ -56,7 +55,7 @@ function includeAugments(doclet) { if (!doclet.fires) { doclet.fires = []; } - cls.fires.forEach(function(f) { + cls.fires.forEach(function (f) { if (doclet.fires.indexOf(f) == -1) { doclet.fires.push(f); } @@ -66,7 +65,7 @@ function includeAugments(doclet) { if (!doclet.observables) { doclet.observables = []; } - cls.observables.forEach(function(f) { + cls.observables.forEach(function (f) { if (doclet.observables.indexOf(f) == -1) { doclet.observables.push(f); } @@ -79,7 +78,7 @@ function includeAugments(doclet) { } function extractTypes(item) { - item.type.names.forEach(function(type) { + item.type.names.forEach(function (type) { const match = type.match(/^(.*<)?([^>]*)>?$/); if (match) { modules[match[2]] = true; @@ -109,31 +108,35 @@ 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) { + visitNode: function (node, e, parser, currentSourceName) { if (node.parent && node.parent.type === 'ExportDefaultDeclaration') { - const modulePath = path.relative(moduleRoot, currentSourceName).replace(/\.js$/, ''); - const exportName = 'module:' + modulePath.replace(/\\/g, '/') + (node.name ? '~' + node.name : ''); + const modulePath = path + .relative(moduleRoot, currentSourceName) + .replace(/\.js$/, ''); + const exportName = + 'module:' + + modulePath.replace(/\\/g, '/') + + (node.name ? '~' + node.name : ''); defaultExports[exportName] = true; } - } + }, }; function sortOtherMembers(doclet) { if (doclet.fires) { - doclet.fires.sort(function(a, b) { + 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) { + doclet.observables.sort(function (a, b) { return a.name < b.name ? -1 : 1; }); } } exports.handlers = { - - newDoclet: function(e) { + newDoclet: function (e) { const doclet = e.doclet; if (doclet.stability) { modules[doclet.longname.split(/[~\.]/).shift()] = true; @@ -152,7 +155,7 @@ exports.handlers = { } }, - parseComplete: function(e) { + parseComplete: function (e) { const doclets = e.doclets; const byLongname = doclets.index.longname; for (let i = doclets.length - 1; i >= 0; --i) { @@ -183,9 +186,12 @@ exports.handlers = { // Remove all other undocumented symbols doclet.undocumented = true; } - if (doclet.memberof && byLongname[doclet.memberof] && - byLongname[doclet.memberof][0].isEnum && - !byLongname[doclet.memberof][0].properties.some(p => p.stability)) { + if ( + doclet.memberof && + byLongname[doclet.memberof] && + byLongname[doclet.memberof][0].isEnum && + !byLongname[doclet.memberof][0].properties.some((p) => p.stability) + ) { byLongname[doclet.memberof][0].undocumented = true; } } @@ -194,10 +200,9 @@ exports.handlers = { processingComplete(e) { const byLongname = e.doclets.index.longname; for (const name in defaultExports) { - byLongname[name].forEach(function(doclet) { + byLongname[name].forEach(function (doclet) { doclet.isDefaultExport = true; }); } - } - + }, }; diff --git a/config/jsdoc/api/plugins/events.js b/config/jsdoc/api/plugins/events.js index 8caa3e9ff7..6ce80dd5e2 100644 --- a/config/jsdoc/api/plugins/events.js +++ b/config/jsdoc/api/plugins/events.js @@ -1,8 +1,7 @@ const events = {}; exports.handlers = { - - newDoclet: function(e) { + newDoclet: function (e) { const doclet = e.doclet; if (doclet.kind !== 'event') { return; @@ -15,7 +14,7 @@ exports.handlers = { events[cls].push(doclet.longname); }, - parseComplete: function(e) { + parseComplete: function (e) { const doclets = e.doclets; for (let i = 0, ii = doclets.length - 1; i < ii; ++i) { const doclet = doclets[i]; @@ -34,6 +33,5 @@ exports.handlers = { } } } - } - + }, }; diff --git a/config/jsdoc/api/plugins/inline-options.js b/config/jsdoc/api/plugins/inline-options.js index 02d6cb8ea6..b3ea474cae 100644 --- a/config/jsdoc/api/plugins/inline-options.js +++ b/config/jsdoc/api/plugins/inline-options.js @@ -6,12 +6,11 @@ const properties = {}; exports.handlers = { - /** * Collects all typedefs, keyed by longname * @param {Object} e Event object. */ - newDoclet: function(e) { + newDoclet: function (e) { if (e.doclet.kind == 'typedef' && e.doclet.properties) { properties[e.doclet.longname] = e.doclet.properties; } @@ -22,7 +21,7 @@ exports.handlers = { * collected typedefs. * @param {Object} e Event object. */ - parseComplete: function(e) { + parseComplete: function (e) { const doclets = e.doclets; for (let i = 0, ii = doclets.length; i < ii; ++i) { const doclet = doclets[i]; @@ -34,16 +33,18 @@ exports.handlers = { const type = param.type.names[0]; if (type in properties) { param.type.names[0] = type; - params.push.apply(params, properties[type].map(p => { - const property = Object.assign({}, p); - property.name = `${param.name}.${property.name}`; - return property; - })); + params.push.apply( + params, + properties[type].map((p) => { + const property = Object.assign({}, p); + property.name = `${param.name}.${property.name}`; + return property; + }) + ); } } } } } - } - + }, }; diff --git a/config/jsdoc/api/plugins/markdown.js b/config/jsdoc/api/plugins/markdown.js index 5508d495dc..d5e5c486f8 100644 --- a/config/jsdoc/api/plugins/markdown.js +++ b/config/jsdoc/api/plugins/markdown.js @@ -19,7 +19,7 @@ const tags = [ 'properties', 'returns', 'see', - 'summary' + 'summary', ]; const hasOwnProp = Object.prototype.hasOwnProperty; @@ -27,32 +27,32 @@ const hasOwnProp = Object.prototype.hasOwnProperty; const markedRenderer = new marked.Renderer(); // Allow prettyprint to work on inline code samples -markedRenderer.code = function(code, language) { +markedRenderer.code = function (code, language) { const langClass = language ? ' lang-' + language : ''; - return format('
%s
', - langClass, escapeCode(code)); + return format( + '
%s
', + langClass, + escapeCode(code) + ); }; function escapeCode(source) { - return source.replace(/'; if (returnTypes.length) { - f.signature += '' + (returnTypes.length ? '{' + returnTypes.join('|') + '}' : '') + ''; + f.signature += + '' + + (returnTypes.length ? '{' + returnTypes.join('|') + '}' : '') + + ''; } } function addSignatureTypes(f) { const types = helper.getSignatureTypes(f); - f.signature = (f.signature || '') + '' + (types.length ? ' :' + types.join('|') : '') + ' '; + f.signature = + (f.signature || '') + + '' + + (types.length ? ' :' + types.join('|') : '') + + ' '; } function shortenPaths(files, commonPrefix) { // always use forward slashes const regexp = new RegExp('\\\\', 'g'); - Object.keys(files).forEach(function(file) { - files[file].shortened = files[file].resolved.replace(commonPrefix, '') + Object.keys(files).forEach(function (file) { + files[file].shortened = files[file].resolved + .replace(commonPrefix, '') .replace(regexp, '/'); }); @@ -112,9 +128,10 @@ function getPathFromDoclet(doclet) { return; } - const filepath = doclet.meta.path && doclet.meta.path !== 'null' ? - doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop() : - doclet.meta.filename; + const filepath = + doclet.meta.path && doclet.meta.path !== 'null' + ? doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop() + : doclet.meta.filename; return filepath; } @@ -126,7 +143,7 @@ function generate(title, docs, filename, resolveLinks) { filename: filename, title: title, docs: docs, - packageInfo: (find({kind: 'package'}) || []) [0] + packageInfo: (find({kind: 'package'}) || [])[0], }; const outpath = path.join(outdir, filename); @@ -140,7 +157,7 @@ function generate(title, docs, filename, resolveLinks) { } function generateSourceFiles(sourceFiles) { - Object.keys(sourceFiles).forEach(function(file) { + Object.keys(sourceFiles).forEach(function (file) { let source; // links are keyed to the shortened path in each doclet's `meta.filename` property const sourceOutfile = helper.getUniqueFilename(sourceFiles[file].shortened); @@ -149,14 +166,20 @@ function generateSourceFiles(sourceFiles) { try { source = { kind: 'source', - code: helper.htmlsafe(fs.readFileSync(sourceFiles[file].resolved, 'utf8')) + code: helper.htmlsafe( + fs.readFileSync(sourceFiles[file].resolved, 'utf8') + ), }; } catch (e) { handle(e); } - generate('Source: ' + sourceFiles[file].shortened, [source], sourceOutfile, - false); + generate( + 'Source: ' + sourceFiles[file].shortened, + [source], + sourceOutfile, + false + ); }); } @@ -175,14 +198,15 @@ function attachModuleSymbols(doclets, modules) { const symbols = {}; // build a lookup table - doclets.forEach(function(symbol) { + doclets.forEach(function (symbol) { symbols[symbol.longname] = symbol; }); - modules.forEach(function(module) { + modules.forEach(function (module) { if (symbols[module.longname]) { module.module = symbols[module.longname]; - module.module.name = module.module.name.replace('module:', 'require("') + '")'; + module.module.name = + module.module.name.replace('module:', 'require("') + '")'; } }); } @@ -210,7 +234,7 @@ function getPrettyName(doclet) { */ function buildNav(members) { const nav = []; - members.classes.forEach(function(v) { + members.classes.forEach(function (v) { // exclude interfaces from sidebar if (v.interface !== true) { nav.push({ @@ -220,52 +244,55 @@ function buildNav(members) { name: v.name, module: find({ kind: 'module', - longname: v.memberof + longname: v.memberof, })[0], members: find({ kind: 'member', - memberof: v.longname + memberof: v.longname, }), methods: find({ kind: 'function', - memberof: v.longname + memberof: v.longname, }), typedefs: find({ kind: 'typedef', - memberof: v.longname + memberof: v.longname, }), fires: v.fires, events: find({ kind: 'event', - memberof: v.longname - }) + memberof: v.longname, + }), }); } }); - members.modules.forEach(function(v) { + members.modules.forEach(function (v) { const classes = find({ kind: 'class', - memberof: v.longname + memberof: v.longname, }); const members = find({ kind: 'member', - memberof: v.longname + memberof: v.longname, }); const methods = find({ kind: 'function', - memberof: v.longname + memberof: v.longname, }); const typedefs = find({ kind: 'typedef', - memberof: v.longname + memberof: v.longname, }); const events = find({ kind: 'event', - memberof: v.longname + 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) { + if ( + typedefs.length > classes.length || + members.length + methods.length > 0 + ) { nav.push({ type: 'module', longname: v.longname, @@ -275,12 +302,12 @@ function buildNav(members) { methods: methods, typedefs: typedefs, fires: v.fires, - events: events + events: events, }); } }); - nav.sort(function(a, b) { + nav.sort(function (a, b) { const prettyNameA = a.prettyname.toLowerCase(); const prettyNameB = b.prettyname.toLowerCase(); if (prettyNameA > prettyNameB) { @@ -294,13 +321,12 @@ function buildNav(members) { return nav; } - /** * @param {Object} taffyData See . * @param {Object} opts Options. * @param {Object} tutorials Tutorials. */ -exports.publish = function(taffyData, opts, tutorials) { +exports.publish = function (taffyData, opts, tutorials) { data = taffyData; const conf = env.conf.templates || {}; @@ -329,26 +355,30 @@ exports.publish = function(taffyData, opts, tutorials) { let sourceFiles = {}; const sourceFilePaths = []; - data().each(function(doclet) { + data().each(function (doclet) { doclet.attribs = ''; if (doclet.examples) { - doclet.examples = doclet.examples.map(function(example) { + doclet.examples = doclet.examples.map(function (example) { let caption, code; - if (example.match(/^\s*([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i)) { + if ( + example.match( + /^\s*([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i + ) + ) { caption = RegExp.$1; code = RegExp.$3; } return { caption: caption || '', - code: code || example + code: code || example, }; }); } if (doclet.see) { - doclet.see.forEach(function(seeItem, i) { + doclet.see.forEach(function (seeItem, i) { doclet.see[i] = hashToLink(doclet, seeItem); }); } @@ -361,7 +391,7 @@ exports.publish = function(taffyData, opts, tutorials) { resolvedSourcePath = resolveSourcePath(sourcePath); sourceFiles[sourcePath] = { resolved: resolvedSourcePath, - shortened: null + shortened: null, }; sourceFilePaths.push(resolvedSourcePath); } @@ -373,7 +403,7 @@ exports.publish = function(taffyData, opts, tutorials) { const fromDir = path.join(templatePath, 'static'); const staticFiles = fs.ls(fromDir, 3); - staticFiles.forEach(function(fileName) { + staticFiles.forEach(function (fileName) { const toDir = fs.toDir(fileName.replace(fromDir, outdir)); fs.mkPath(toDir); fs.copyFileSync(fileName, toDir); @@ -385,15 +415,22 @@ exports.publish = function(taffyData, opts, tutorials) { let staticFileScanner; if (conf['default'].staticFiles) { staticFilePaths = conf['default'].staticFiles.paths || []; - staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter')).Filter(conf['default'].staticFiles); - staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner')).Scanner(); + staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter').Filter)( + conf['default'].staticFiles + ); + staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner').Scanner)(); - staticFilePaths.forEach(function(filePath) { - const extraStaticFiles = staticFileScanner.scan([filePath], 10, staticFileFilter); + staticFilePaths.forEach(function (filePath) { + const extraStaticFiles = staticFileScanner.scan( + [filePath], + 10, + staticFileFilter + ); - extraStaticFiles.forEach(function(fileName) { - const sourcePath = fs.statSync(filePath).isDirectory() ? filePath : - path.dirname(filePath); + extraStaticFiles.forEach(function (fileName) { + const sourcePath = fs.statSync(filePath).isDirectory() + ? filePath + : path.dirname(filePath); const toDir = fs.toDir(fileName.replace(sourcePath, outdir)); fs.mkPath(toDir); fs.copyFileSync(fileName, toDir); @@ -404,7 +441,7 @@ exports.publish = function(taffyData, opts, tutorials) { if (sourceFilePaths.length) { sourceFiles = shortenPaths(sourceFiles, path.commonPrefix(sourceFilePaths)); } - data().each(function(doclet) { + data().each(function (doclet) { const url = helper.createLink(doclet); helper.registerLink(doclet.longname, url); @@ -419,7 +456,7 @@ exports.publish = function(taffyData, opts, tutorials) { } }); - data().each(function(doclet) { + data().each(function (doclet) { const url = helper.longnameToUrl[doclet.longname]; if (url.indexOf('#') > -1) { @@ -435,7 +472,7 @@ exports.publish = function(taffyData, opts, tutorials) { }); // do this after the urls have all been generated - data().each(function(doclet) { + data().each(function (doclet) { doclet.ancestors = getAncestorLinks(doclet); if (doclet.kind === 'member') { @@ -461,8 +498,10 @@ exports.publish = function(taffyData, opts, tutorials) { // once for all view.nav = buildNav(members); - attachModuleSymbols(find({kind: ['class', 'function'], longname: {left: 'module:'}}), - members.modules); + attachModuleSymbols( + find({kind: ['class', 'function'], longname: {left: 'module:'}}), + members.modules + ); // only output pretty-printed source files if requested; do this before generating any other // pages, so the other pages can link to the source files @@ -478,9 +517,17 @@ exports.publish = function(taffyData, opts, tutorials) { const files = find({kind: 'file'}); view.navigationHtml = helper.resolveLinks(view.partial('navigation.tmpl')); - generate('Index', - [{kind: 'mainpage', readme: opts.readme, longname: (opts.mainpagetitle) ? opts.mainpagetitle : 'Main Page'}].concat(files), - indexUrl); + generate( + 'Index', + [ + { + kind: 'mainpage', + readme: opts.readme, + longname: opts.mainpagetitle ? opts.mainpagetitle : 'Main Page', + }, + ].concat(files), + indexUrl + ); // set up the lists that we'll use to generate pages const classes = taffy(members.classes); @@ -493,27 +540,47 @@ exports.publish = function(taffyData, opts, tutorials) { if (hasOwnProp.call(helper.longnameToUrl, longname)) { const myClasses = helper.find(classes, {longname: longname}); if (myClasses.length) { - generate('Class: ' + myClasses[0].name, myClasses, helper.longnameToUrl[longname]); + generate( + 'Class: ' + myClasses[0].name, + myClasses, + helper.longnameToUrl[longname] + ); } const myModules = helper.find(modules, {longname: longname}); if (myModules.length) { - generate('Module: ' + myModules[0].name, myModules, helper.longnameToUrl[longname]); + generate( + 'Module: ' + myModules[0].name, + myModules, + helper.longnameToUrl[longname] + ); } const myNamespaces = helper.find(namespaces, {longname: longname}); if (myNamespaces.length) { - generate('Namespace: ' + myNamespaces[0].name, myNamespaces, helper.longnameToUrl[longname]); + generate( + 'Namespace: ' + myNamespaces[0].name, + myNamespaces, + helper.longnameToUrl[longname] + ); } const myMixins = helper.find(mixins, {longname: longname}); if (myMixins.length) { - generate('Mixin: ' + myMixins[0].name, myMixins, helper.longnameToUrl[longname]); + generate( + 'Mixin: ' + myMixins[0].name, + myMixins, + helper.longnameToUrl[longname] + ); } const myExternals = helper.find(externals, {longname: longname}); if (myExternals.length) { - generate('External: ' + myExternals[0].name, myExternals, helper.longnameToUrl[longname]); + generate( + 'External: ' + myExternals[0].name, + myExternals, + helper.longnameToUrl[longname] + ); } } } @@ -524,7 +591,7 @@ exports.publish = function(taffyData, opts, tutorials) { title: title, header: tutorial.title, content: tutorial.parse(), - children: tutorial.children + children: tutorial.children, }; let html = view.render('tutorial.tmpl', tutorialData); @@ -537,8 +604,12 @@ exports.publish = function(taffyData, opts, tutorials) { // tutorials can have only one parent so there is no risk for loops function saveChildren(node) { - node.children.forEach(function(child) { - generateTutorial('Tutorial: ' + child.title, child, helper.tutorialToUrl(child.name)); + node.children.forEach(function (child) { + generateTutorial( + 'Tutorial: ' + child.title, + child, + helper.tutorialToUrl(child.name) + ); saveChildren(child); }); } diff --git a/config/jsdoc/info/api-plugin.js b/config/jsdoc/info/api-plugin.js index afef0dc34e..2a3dd96610 100644 --- a/config/jsdoc/info/api-plugin.js +++ b/config/jsdoc/info/api-plugin.js @@ -1,15 +1,11 @@ - - /** * Handle the api annotation. * @param {Object} dictionary The tag dictionary. */ -exports.defineTags = function(dictionary) { - +exports.defineTags = function (dictionary) { dictionary.defineTag('api', { - onTagged: function(doclet, tag) { + onTagged: function (doclet, tag) { doclet.api = true; - } + }, }); - }; diff --git a/config/jsdoc/info/define-plugin.js b/config/jsdoc/info/define-plugin.js index 78634499ba..3d604db19a 100644 --- a/config/jsdoc/info/define-plugin.js +++ b/config/jsdoc/info/define-plugin.js @@ -5,31 +5,27 @@ * insensitive, with or without ticks). */ - const DEFAULT_VALUE = /default\s+is\s+`?(true|false)`?/i; - /** * Hook to define new tags. * @param {Object} dictionary The tag dictionary. */ -exports.defineTags = function(dictionary) { - +exports.defineTags = function (dictionary) { dictionary.defineTag('define', { canHaveType: true, mustHaveValue: true, - onTagged: function(doclet, tag) { + onTagged: function (doclet, tag) { const types = tag.value.type.names; if (types.length === 1 && types[0] === 'boolean') { const match = tag.value.description.match(DEFAULT_VALUE); if (match) { doclet.define = { - default: match[1] === 'true' + default: match[1] === 'true', }; doclet.description = tag.value.description; } } - } + }, }); - }; diff --git a/config/jsdoc/info/publish.js b/config/jsdoc/info/publish.js index bc01c31f89..f57c4dec57 100644 --- a/config/jsdoc/info/publish.js +++ b/config/jsdoc/info/publish.js @@ -5,18 +5,16 @@ const assert = require('assert'); const path = require('path'); - /** * Publish hook for the JSDoc template. Writes to JSON stdout. * @param {function} data The root of the Taffy DB containing doclet records. * @param {Object} opts Options. * @return {Promise} A promise that resolves when writing is complete. */ -exports.publish = function(data, opts) { - +exports.publish = function (data, opts) { function getTypes(data) { const types = []; - data.forEach(function(name) { + data.forEach(function (name) { types.push(name.replace(/^function$/, 'Function')); }); return types; @@ -27,19 +25,22 @@ exports.publish = function(data, opts) { const docs = data( [ {define: {isObject: true}}, - function() { + function () { if (this.kind == 'class') { if (!('extends' in this) || typeof this.api == 'boolean') { classes[this.longname] = this; return true; } } - return (typeof this.api == 'boolean' || - this.meta && (/[\\\/]externs$/).test(this.meta.path)); - } + return ( + typeof this.api == 'boolean' || + (this.meta && /[\\\/]externs$/.test(this.meta.path)) + ); + }, ], {kind: {'!is': 'file'}}, - {kind: {'!is': 'event'}}).get(); + {kind: {'!is': 'event'}} + ).get(); // get symbols data, filter out those that are members of private classes const symbols = []; @@ -49,117 +50,133 @@ exports.publish = function(data, opts) { let base = []; const augments = {}; const symbolsByName = {}; - docs.filter(function(doc) { - let include = true; - const constructor = doc.memberof; - if (constructor && constructor.substr(-1) === '_' && constructor.indexOf('module:') === -1) { - assert.strictEqual(doc.inherited, true, - 'Unexpected export on private class: ' + doc.longname); - include = false; - } - return include; - }).forEach(function(doc) { - const isExterns = (/[\\\/]externs$/).test(doc.meta.path); - if (doc.define) { - defines.push({ - name: doc.longname, - description: doc.description, - path: path.join(doc.meta.path, doc.meta.filename), - default: doc.define.default - }); - } else if (doc.kind == 'typedef' || doc.isEnum === true) { - typedefs.push({ - name: doc.longname, - types: getTypes(doc.type.names) - }); - } else { - const symbol = { - name: doc.longname, - kind: doc.kind, - description: doc.classdesc || doc.description, - path: path.join(doc.meta.path, doc.meta.filename) - }; - if (doc.augments) { - symbol.extends = doc.augments[0]; + docs + .filter(function (doc) { + let include = true; + const constructor = doc.memberof; + if ( + constructor && + constructor.substr(-1) === '_' && + constructor.indexOf('module:') === -1 + ) { + assert.strictEqual( + doc.inherited, + true, + 'Unexpected export on private class: ' + doc.longname + ); + include = false; } - if (doc.virtual) { - symbol.virtual = true; - } - if (doc.type) { - symbol.types = getTypes(doc.type.names); - } - if (doc.params) { - const params = []; - doc.params.forEach(function(param) { - const paramInfo = { - name: param.name - }; - params.push(paramInfo); - paramInfo.types = getTypes(param.type.names); - if (typeof param.variable == 'boolean') { - paramInfo.variable = param.variable; - } - if (typeof param.optional == 'boolean') { - paramInfo.optional = param.optional; - } - if (typeof param.nullable == 'boolean') { - paramInfo.nullable = param.nullable; - } + return include; + }) + .forEach(function (doc) { + const isExterns = /[\\\/]externs$/.test(doc.meta.path); + if (doc.define) { + defines.push({ + name: doc.longname, + description: doc.description, + path: path.join(doc.meta.path, doc.meta.filename), + default: doc.define.default, }); - symbol.params = params; - } - if (doc.returns) { - symbol.returns = { - types: getTypes(doc.returns[0].type.names) + } else if (doc.kind == 'typedef' || doc.isEnum === true) { + typedefs.push({ + name: doc.longname, + types: getTypes(doc.type.names), + }); + } else { + const symbol = { + name: doc.longname, + kind: doc.kind, + description: doc.classdesc || doc.description, + path: path.join(doc.meta.path, doc.meta.filename), }; - if (typeof doc.returns[0].nullable == 'boolean') { - symbol.returns.nullable = doc.returns[0].nullable; + if (doc.augments) { + symbol.extends = doc.augments[0]; } - } - if (doc.tags) { - doc.tags.every(function(tag) { - if (tag.title == 'template') { - symbol.template = tag.value; - return false; + if (doc.virtual) { + symbol.virtual = true; + } + if (doc.type) { + symbol.types = getTypes(doc.type.names); + } + if (doc.params) { + const params = []; + doc.params.forEach(function (param) { + const paramInfo = { + name: param.name, + }; + params.push(paramInfo); + paramInfo.types = getTypes(param.type.names); + if (typeof param.variable == 'boolean') { + paramInfo.variable = param.variable; + } + if (typeof param.optional == 'boolean') { + paramInfo.optional = param.optional; + } + if (typeof param.nullable == 'boolean') { + paramInfo.nullable = param.nullable; + } + }); + symbol.params = params; + } + if (doc.returns) { + symbol.returns = { + types: getTypes(doc.returns[0].type.names), + }; + if (typeof doc.returns[0].nullable == 'boolean') { + symbol.returns.nullable = doc.returns[0].nullable; } - return true; - }); - } - - const target = isExterns ? externs : (doc.api ? symbols : base); - const existingSymbol = symbolsByName[symbol.name]; - if (existingSymbol) { - const idx = target.indexOf(existingSymbol); - target.splice(idx, 1); - } - target.push(symbol); - symbolsByName[symbol.name] = symbol; - - if (doc.api && symbol.extends) { - while (symbol.extends in classes && !classes[symbol.extends].api && - classes[symbol.extends].augments) { - symbol.extends = classes[symbol.extends].augments[0]; } - if (symbol.extends) { - augments[symbol.extends] = true; + if (doc.tags) { + doc.tags.every(function (tag) { + if (tag.title == 'template') { + symbol.template = tag.value; + return false; + } + return true; + }); + } + + const target = isExterns ? externs : doc.api ? symbols : base; + const existingSymbol = symbolsByName[symbol.name]; + if (existingSymbol) { + const idx = target.indexOf(existingSymbol); + target.splice(idx, 1); + } + target.push(symbol); + symbolsByName[symbol.name] = symbol; + + if (doc.api && symbol.extends) { + while ( + symbol.extends in classes && + !classes[symbol.extends].api && + classes[symbol.extends].augments + ) { + symbol.extends = classes[symbol.extends].augments[0]; + } + if (symbol.extends) { + augments[symbol.extends] = true; + } } } - } + }); + + base = base.filter(function (symbol) { + return symbol.name in augments || symbol.virtual; }); - base = base.filter(function(symbol) { - return (symbol.name in augments || symbol.virtual); - }); - - return new Promise(function(resolve, reject) { + return new Promise(function (resolve, reject) { process.stdout.write( - JSON.stringify({ - symbols: symbols, - defines: defines, - typedefs: typedefs, - externs: externs, - base: base - }, null, 2)); + JSON.stringify( + { + symbols: symbols, + defines: defines, + typedefs: typedefs, + externs: externs, + base: base, + }, + null, + 2 + ) + ); }); - }; diff --git a/config/jsdoc/info/virtual-plugin.js b/config/jsdoc/info/virtual-plugin.js index a1cb8ee8ec..f83a2dba26 100644 --- a/config/jsdoc/info/virtual-plugin.js +++ b/config/jsdoc/info/virtual-plugin.js @@ -2,15 +2,13 @@ * Handle the interface and abstract annotations. * @param {Object} dictionary The tag dictionary. */ -exports.defineTags = function(dictionary) { - +exports.defineTags = function (dictionary) { const classTag = dictionary.lookUp('class'); dictionary.defineTag('interface', { mustNotHaveValue: true, - onTagged: function(doclet, tag) { + onTagged: function (doclet, tag) { classTag.onTagged.apply(this, arguments); doclet.virtual = true; - } + }, }); - }; diff --git a/config/webpack-config-legacy-build.js b/config/webpack-config-legacy-build.js index ca374a0e61..33634de5b2 100644 --- a/config/webpack-config-legacy-build.js +++ b/config/webpack-config-legacy-build.js @@ -8,6 +8,6 @@ module.exports = { filename: 'ol.js', library: 'ol', libraryTarget: 'umd', - libraryExport: 'default' - } + libraryExport: 'default', + }, }; diff --git a/examples/accessible.js b/examples/accessible.js index 6eb92a4da1..0feda2138f 100644 --- a/examples/accessible.js +++ b/examples/accessible.js @@ -1,29 +1,28 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -document.getElementById('zoom-out').onclick = function() { +document.getElementById('zoom-out').onclick = function () { const view = map.getView(); const zoom = view.getZoom(); view.setZoom(zoom - 1); }; -document.getElementById('zoom-in').onclick = function() { +document.getElementById('zoom-in').onclick = function () { const view = map.getView(); const zoom = view.getZoom(); view.setZoom(zoom + 1); diff --git a/examples/animation.js b/examples/animation.js index ad59685ab5..7d07a41306 100644 --- a/examples/animation.js +++ b/examples/animation.js @@ -1,9 +1,9 @@ import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; import View from '../src/ol/View.js'; import {easeIn, easeOut} from '../src/ol/easing.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import {fromLonLat} from '../src/ol/proj.js'; -import OSM from '../src/ol/source/OSM.js'; const london = fromLonLat([-0.12755, 51.507222]); const moscow = fromLonLat([37.6178, 55.7517]); @@ -13,7 +13,7 @@ const bern = fromLonLat([7.4458, 46.95]); const view = new View({ center: istanbul, - zoom: 6 + zoom: 6, }); const map = new Map({ @@ -21,10 +21,10 @@ const map = new Map({ layers: [ new TileLayer({ preload: 4, - source: new OSM() - }) + source: new OSM(), + }), ], - view: view + view: view, }); // A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael). @@ -32,18 +32,18 @@ function bounce(t) { const s = 7.5625; const p = 2.75; let l; - if (t < (1 / p)) { + if (t < 1 / p) { l = s * t * t; } else { - if (t < (2 / p)) { - t -= (1.5 / p); + if (t < 2 / p) { + t -= 1.5 / p; l = s * t * t + 0.75; } else { - if (t < (2.5 / p)) { - t -= (2.25 / p); + if (t < 2.5 / p) { + t -= 2.25 / p; l = s * t * t + 0.9375; } else { - t -= (2.625 / p); + t -= 2.625 / p; l = s * t * t + 0.984375; } } @@ -53,77 +53,85 @@ function bounce(t) { // An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael). function elastic(t) { - return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1; + return ( + Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1 + ); } function onClick(id, callback) { document.getElementById(id).addEventListener('click', callback); } -onClick('rotate-left', function() { +onClick('rotate-left', function () { view.animate({ - rotation: view.getRotation() + Math.PI / 2 + rotation: view.getRotation() + Math.PI / 2, }); }); -onClick('rotate-right', function() { +onClick('rotate-right', function () { view.animate({ - rotation: view.getRotation() - Math.PI / 2 + rotation: view.getRotation() - Math.PI / 2, }); }); -onClick('rotate-around-rome', function() { +onClick('rotate-around-rome', function () { // Rotation animation takes the shortest arc, so animate in two parts const rotation = view.getRotation(); - view.animate({ - rotation: rotation + Math.PI, - anchor: rome, - easing: easeIn - }, { - rotation: rotation + 2 * Math.PI, - anchor: rome, - easing: easeOut - }); + view.animate( + { + rotation: rotation + Math.PI, + anchor: rome, + easing: easeIn, + }, + { + rotation: rotation + 2 * Math.PI, + anchor: rome, + easing: easeOut, + } + ); }); -onClick('pan-to-london', function() { +onClick('pan-to-london', function () { view.animate({ center: london, - duration: 2000 + duration: 2000, }); }); -onClick('elastic-to-moscow', function() { +onClick('elastic-to-moscow', function () { view.animate({ center: moscow, duration: 2000, - easing: elastic + easing: elastic, }); }); -onClick('bounce-to-istanbul', function() { +onClick('bounce-to-istanbul', function () { view.animate({ center: istanbul, duration: 2000, - easing: bounce + easing: bounce, }); }); -onClick('spin-to-rome', function() { +onClick('spin-to-rome', function () { // Rotation animation takes the shortest arc, so animate in two parts const center = view.getCenter(); - view.animate({ - center: [ - center[0] + (rome[0] - center[0]) / 2, - center[1] + (rome[1] - center[1]) / 2 - ], - rotation: Math.PI, - easing: easeIn - }, { - center: rome, - rotation: 2 * Math.PI, - easing: easeOut - }); + view.animate( + { + center: [ + center[0] + (rome[0] - center[0]) / 2, + center[1] + (rome[1] - center[1]) / 2, + ], + rotation: Math.PI, + easing: easeIn, + }, + { + center: rome, + rotation: 2 * Math.PI, + easing: easeOut, + } + ); }); function flyTo(location, done) { @@ -141,21 +149,28 @@ function flyTo(location, done) { done(complete); } } - view.animate({ - center: location, - duration: duration - }, callback); - view.animate({ - zoom: zoom - 1, - duration: duration / 2 - }, { - zoom: zoom, - duration: duration / 2 - }, callback); + view.animate( + { + center: location, + duration: duration, + }, + callback + ); + view.animate( + { + zoom: zoom - 1, + duration: duration / 2, + }, + { + zoom: zoom, + duration: duration / 2, + }, + callback + ); } -onClick('fly-to-bern', function() { - flyTo(bern, function() {}); +onClick('fly-to-bern', function () { + flyTo(bern, function () {}); }); function tour() { @@ -166,7 +181,7 @@ function tour() { ++index; if (index < locations.length) { const delay = index === 0 ? 0 : 750; - setTimeout(function() { + setTimeout(function () { flyTo(locations[index], next); }, delay); } else { diff --git a/examples/arcgis-image.js b/examples/arcgis-image.js index aff5b8f2ee..321b39f25b 100644 --- a/examples/arcgis-image.js +++ b/examples/arcgis-image.js @@ -1,28 +1,29 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {Tile as TileLayer, Image as ImageLayer} from '../src/ol/layer.js'; -import {OSM, ImageArcGISRest} from '../src/ol/source.js'; +import {ImageArcGISRest, OSM} from '../src/ol/source.js'; +import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -const url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' + - 'Specialty/ESRI_StateCityHighway_USA/MapServer'; +const url = + 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' + + 'Specialty/ESRI_StateCityHighway_USA/MapServer'; const layers = [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new ImageLayer({ source: new ImageArcGISRest({ ratio: 1, params: {}, - url: url - }) - }) + url: url, + }), + }), ]; const map = new Map({ layers: layers, target: 'map', view: new View({ center: [-10997148, 4569099], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/arcgis-tiled.js b/examples/arcgis-tiled.js index 4377963891..64f98e4aae 100644 --- a/examples/arcgis-tiled.js +++ b/examples/arcgis-tiled.js @@ -1,27 +1,28 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import {OSM, TileArcGISRest} from '../src/ol/source.js'; -const url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' + - 'Specialty/ESRI_StateCityHighway_USA/MapServer'; +const url = + 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' + + 'Specialty/ESRI_StateCityHighway_USA/MapServer'; const layers = [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ extent: [-13884991, 2870341, -7455066, 6338219], source: new TileArcGISRest({ - url: url - }) - }) + url: url, + }), + }), ]; const map = new Map({ layers: layers, target: 'map', view: new View({ center: [-10997148, 4569099], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/attributions.js b/examples/attributions.js index 360a918917..9ee484c4af 100644 --- a/examples/attributions.js +++ b/examples/attributions.js @@ -1,24 +1,24 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, Attribution} from '../src/ol/control.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {Attribution, defaults as defaultControls} from '../src/ol/control.js'; const attribution = new Attribution({ - collapsible: false + collapsible: false, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], controls: defaultControls({attribution: false}).extend([attribution]), target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); function checkSize() { diff --git a/examples/bing-maps.js b/examples/bing-maps.js index 1823ab4740..13f988fc6a 100644 --- a/examples/bing-maps.js +++ b/examples/bing-maps.js @@ -1,38 +1,40 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import BingMaps from '../src/ol/source/BingMaps.js'; - +import Map from '../src/ol/Map.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const styles = [ 'RoadOnDemand', 'Aerial', 'AerialWithLabelsOnDemand', 'CanvasDark', - 'OrdnanceSurvey' + 'OrdnanceSurvey', ]; const layers = []; let i, ii; for (i = 0, ii = styles.length; i < ii; ++i) { - layers.push(new TileLayer({ - visible: false, - preload: Infinity, - source: new BingMaps({ - key: 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ', - imagerySet: styles[i] - // use maxZoom 19 to see stretched tiles instead of the BingMaps - // "no photos at this zoom level" tiles - // maxZoom: 19 + layers.push( + new TileLayer({ + visible: false, + preload: Infinity, + source: new BingMaps({ + key: + 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ', + imagerySet: styles[i], + // use maxZoom 19 to see stretched tiles instead of the BingMaps + // "no photos at this zoom level" tiles + // maxZoom: 19 + }), }) - })); + ); } const map = new Map({ layers: layers, target: 'map', view: new View({ center: [-6655.5402445057125, 6709968.258934638], - zoom: 13 - }) + zoom: 13, + }), }); const select = document.getElementById('layer-select'); diff --git a/examples/box-selection.js b/examples/box-selection.js index 5f6b3de1a8..61962b310d 100644 --- a/examples/box-selection.js +++ b/examples/box-selection.js @@ -1,33 +1,31 @@ +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {platformModifierKeyOnly} from '../src/ol/events/condition.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; import {DragBox, Select} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {platformModifierKeyOnly} from '../src/ol/events/condition.js'; const vectorSource = new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }); - const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], zoom: 2, - constrainRotation: 16 - }) + constrainRotation: 16, + }), }); // a normal select interaction to handle click @@ -38,12 +36,12 @@ const selectedFeatures = select.getFeatures(); // a DragBox interaction used to select features by drawing boxes const dragBox = new DragBox({ - condition: platformModifierKeyOnly + condition: platformModifierKeyOnly, }); map.addInteraction(dragBox); -dragBox.on('boxend', function() { +dragBox.on('boxend', function () { // features that intersect the box geometry are added to the // collection of selected features @@ -54,7 +52,7 @@ dragBox.on('boxend', function() { const oblique = rotation % (Math.PI / 2) !== 0; const candidateFeatures = oblique ? [] : selectedFeatures; const extent = dragBox.getGeometry().getExtent(); - vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) { + vectorSource.forEachFeatureIntersectingExtent(extent, function (feature) { candidateFeatures.push(feature); }); @@ -68,7 +66,7 @@ dragBox.on('boxend', function() { const geometry = dragBox.getGeometry().clone(); geometry.rotate(-rotation, anchor); const extent = geometry.getExtent(); - candidateFeatures.forEach(function(feature) { + candidateFeatures.forEach(function (feature) { const geometry = feature.getGeometry().clone(); geometry.rotate(-rotation, anchor); if (geometry.intersectsExtent(extent)) { @@ -76,18 +74,17 @@ dragBox.on('boxend', function() { } }); } - }); // clear selection when drawing a new box and when clicking on the map -dragBox.on('boxstart', function() { +dragBox.on('boxstart', function () { selectedFeatures.clear(); }); const infoBox = document.getElementById('info'); -selectedFeatures.on(['add', 'remove'], function() { - const names = selectedFeatures.getArray().map(function(feature) { +selectedFeatures.on(['add', 'remove'], function () { + const names = selectedFeatures.getArray().map(function (feature) { return feature.get('name'); }); if (names.length > 0) { diff --git a/examples/button-title.js b/examples/button-title.js index c48462a62f..b42183ea5d 100644 --- a/examples/button-title.js +++ b/examples/button-title.js @@ -1,26 +1,25 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [-8730000, 5930000], rotation: Math.PI / 5, - zoom: 8 - }) + zoom: 8, + }), }); - $('.ol-zoom-in, .ol-zoom-out').tooltip({ - placement: 'right' + placement: 'right', }); $('.ol-rotate-reset, .ol-attribution button[title]').tooltip({ - placement: 'left' + placement: 'left', }); diff --git a/examples/canvas-gradient-pattern.js b/examples/canvas-gradient-pattern.js index 1b91b8593d..3504e5e964 100644 --- a/examples/canvas-gradient-pattern.js +++ b/examples/canvas-gradient-pattern.js @@ -1,11 +1,11 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js'; +import Map from '../src/ol/Map.js'; import VectorLayer from '../src/ol/layer/Vector.js'; -import {fromLonLat} from '../src/ol/proj.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js'; import {Fill, Stroke, Style} from '../src/ol/style.js'; +import {fromLonLat} from '../src/ol/proj.js'; const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); @@ -15,7 +15,7 @@ const context = canvas.getContext('2d'); const pixelRatio = DEVICE_PIXEL_RATIO; // Generate a rainbow gradient -const gradient = (function() { +const gradient = (function () { const grad = context.createLinearGradient(0, 0, 512 * pixelRatio, 0); grad.addColorStop(0, 'red'); grad.addColorStop(1 / 6, 'orange'); @@ -28,7 +28,7 @@ const gradient = (function() { })(); // Generate a canvasPattern with two circles on white background -const pattern = (function() { +const pattern = (function () { canvas.width = 8 * pixelRatio; canvas.height = 8 * pixelRatio; // white background @@ -45,7 +45,7 @@ const pattern = (function() { context.arc(4 * pixelRatio, 4 * pixelRatio, 1.5 * pixelRatio, 0, 2 * Math.PI); context.fill(); return context.createPattern(canvas, 'repeat'); -}()); +})(); // Generate style for gradient or pattern fill const fill = new Fill(); @@ -53,8 +53,8 @@ const style = new Style({ fill: fill, stroke: new Stroke({ color: '#333', - width: 2 - }) + width: 2, + }), }); /** @@ -64,7 +64,7 @@ const style = new Style({ * @param {import("../src/ol/Feature.js").default} feature The feature to style. * @return {Style} The style to use for the feature. */ -const getStackedStyle = function(feature) { +const getStackedStyle = function (feature) { const id = feature.getId(); fill.setColor(id > 'J' ? gradient : pattern); return style; @@ -74,19 +74,17 @@ const getStackedStyle = function(feature) { const vectorLayer = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: getStackedStyle + style: getStackedStyle, }); // … finally create a map with that layer. const map = new Map({ - layers: [ - vectorLayer - ], + layers: [vectorLayer], target: 'map', view: new View({ center: fromLonLat([16, 48]), - zoom: 3 - }) + zoom: 3, + }), }); diff --git a/examples/canvas-tiles.js b/examples/canvas-tiles.js index b8fcb00220..df852b27e9 100644 --- a/examples/canvas-tiles.js +++ b/examples/canvas-tiles.js @@ -1,21 +1,20 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import {OSM, TileDebug} from '../src/ol/source.js'; - const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ - source: new TileDebug() - }) + source: new TileDebug(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); diff --git a/examples/cartodb.js b/examples/cartodb.js index 81a27bca1b..c385fe1c5c 100644 --- a/examples/cartodb.js +++ b/examples/cartodb.js @@ -1,47 +1,48 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import {CartoDB, OSM} from '../src/ol/source.js'; const mapConfig = { - 'layers': [{ - 'type': 'cartodb', - 'options': { - 'cartocss_version': '2.1.1', - 'cartocss': '#layer { polygon-fill: #F00; }', - 'sql': 'select * from european_countries_e where area > 0' - } - }] + 'layers': [ + { + 'type': 'cartodb', + 'options': { + 'cartocss_version': '2.1.1', + 'cartocss': '#layer { polygon-fill: #F00; }', + 'sql': 'select * from european_countries_e where area > 0', + }, + }, + ], }; const cartoDBSource = new CartoDB({ account: 'documentation', - config: mapConfig + config: mapConfig, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ - source: cartoDBSource - }) + source: cartoDBSource, + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); function setArea(n) { mapConfig.layers[0].options.sql = - 'select * from european_countries_e where area > ' + n; + 'select * from european_countries_e where area > ' + n; cartoDBSource.setConfig(mapConfig); } - -document.getElementById('country-area').addEventListener('change', function() { +document.getElementById('country-area').addEventListener('change', function () { setArea(this.value); }); diff --git a/examples/center.js b/examples/center.js index 7f5ca270ad..df4d8fab3f 100644 --- a/examples/center.js +++ b/examples/center.js @@ -1,72 +1,83 @@ +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; 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 {OSM, Vector as VectorSource} from '../src/ol/source.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; /** @type {VectorSource} */ const source = new VectorSource({ url: 'data/geojson/switzerland.geojson', - format: new GeoJSON() + format: new GeoJSON(), }); const style = new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.6)' + color: 'rgba(255, 255, 255, 0.6)', }), stroke: new Stroke({ color: '#319FD3', - width: 1 + width: 1, }), image: new CircleStyle({ radius: 5, fill: new Fill({ - color: 'rgba(255, 255, 255, 0.6)' + color: 'rgba(255, 255, 255, 0.6)', }), stroke: new Stroke({ color: '#319FD3', - width: 1 - }) - }) + width: 1, + }), + }), }); const vectorLayer = new VectorLayer({ source: source, - style: style + style: style, }); const view = new View({ center: [0, 0], - zoom: 1 + zoom: 1, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), - vectorLayer + vectorLayer, ], target: 'map', - view: view + view: view, }); -const zoomtoswitzerland = - document.getElementById('zoomtoswitzerland'); -zoomtoswitzerland.addEventListener('click', function() { - const feature = source.getFeatures()[0]; - const polygon = feature.getGeometry(); - view.fit(polygon, {padding: [170, 50, 30, 150]}); -}, false); +const zoomtoswitzerland = document.getElementById('zoomtoswitzerland'); +zoomtoswitzerland.addEventListener( + 'click', + function () { + const feature = source.getFeatures()[0]; + const polygon = feature.getGeometry(); + view.fit(polygon, {padding: [170, 50, 30, 150]}); + }, + false +); const zoomtolausanne = document.getElementById('zoomtolausanne'); -zoomtolausanne.addEventListener('click', function() { - const feature = source.getFeatures()[1]; - const point = feature.getGeometry(); - view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50}); -}, false); +zoomtolausanne.addEventListener( + 'click', + function () { + const feature = source.getFeatures()[1]; + const point = feature.getGeometry(); + view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50}); + }, + false +); const centerlausanne = document.getElementById('centerlausanne'); -centerlausanne.addEventListener('click', function() { - const feature = source.getFeatures()[1]; - const point = feature.getGeometry(); - const size = map.getSize(); - view.centerOn(point.getCoordinates(), size, [570, 500]); -}, false); +centerlausanne.addEventListener( + 'click', + function () { + const feature = source.getFeatures()[1]; + const point = feature.getGeometry(); + const size = map.getSize(); + view.centerOn(point.getCoordinates(), size, [570, 500]); + }, + false +); diff --git a/examples/chaikin.js b/examples/chaikin.js index 15112b9721..6f4406356b 100644 --- a/examples/chaikin.js +++ b/examples/chaikin.js @@ -1,8 +1,8 @@ +import Draw from '../src/ol/interaction/Draw.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; -import Draw from '../src/ol/interaction/Draw.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import smooth from 'chaikin-smooth'; @@ -21,17 +21,17 @@ const map = new Map({ layers: [ new TileLayer({ source: new OSM(), - opacity: 0.5 + opacity: 0.5, }), new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ - center: [1078373.5950, 6871994.5910], - zoom: 5 - }) + center: [1078373.595, 6871994.591], + zoom: 5, + }), }); const shallSmoothen = document.getElementById('shall-smoothen'); @@ -39,10 +39,10 @@ const numIterations = document.getElementById('iterations'); const draw = new Draw({ source: vectorSource, - type: 'LineString' + type: 'LineString', }); map.addInteraction(draw); -draw.on('drawend', function(event) { +draw.on('drawend', function (event) { if (!shallSmoothen.checked) { return; } diff --git a/examples/cluster.js b/examples/cluster.js index b74f9194ab..944e1116b2 100644 --- a/examples/cluster.js +++ b/examples/cluster.js @@ -1,11 +1,16 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import View from '../src/ol/View.js'; +import { + Circle as CircleStyle, + Fill, + Stroke, + Style, + Text, +} from '../src/ol/style.js'; import {Cluster, OSM, Vector as VectorSource} from '../src/ol/source.js'; -import {Circle as CircleStyle, Fill, Stroke, Style, Text} from '../src/ol/style.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const distance = document.getElementById('distance'); @@ -18,18 +23,18 @@ for (let i = 0; i < count; ++i) { } const source = new VectorSource({ - features: features + features: features, }); const clusterSource = new Cluster({ distance: parseInt(distance.value, 10), - source: source + source: source, }); const styleCache = {}; const clusters = new VectorLayer({ source: clusterSource, - style: function(feature) { + style: function (feature) { const size = feature.get('features').length; let style = styleCache[size]; if (!style) { @@ -37,27 +42,27 @@ const clusters = new VectorLayer({ image: new CircleStyle({ radius: 10, stroke: new Stroke({ - color: '#fff' + color: '#fff', }), fill: new Fill({ - color: '#3399CC' - }) + color: '#3399CC', + }), }), text: new Text({ text: size.toString(), fill: new Fill({ - color: '#fff' - }) - }) + color: '#fff', + }), + }), }); styleCache[size] = style; } return style; - } + }, }); const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const map = new Map({ @@ -65,10 +70,10 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -distance.addEventListener('input', function() { +distance.addEventListener('input', function () { clusterSource.setDistance(parseInt(distance.value, 10)); }); diff --git a/examples/color-manipulation.js b/examples/color-manipulation.js index e249762850..dade6aeed2 100644 --- a/examples/color-manipulation.js +++ b/examples/color-manipulation.js @@ -1,23 +1,21 @@ +import ImageLayer from '../src/ol/layer/Image.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import ImageLayer from '../src/ol/layer/Image.js'; import {Raster as RasterSource, Stamen} from '../src/ol/source.js'; - /** * Color manipulation functions below are adapted from * https://github.com/d3/d3-color. */ -const Xn = 0.950470; +const Xn = 0.95047; const Yn = 1; -const Zn = 1.088830; +const Zn = 1.08883; const t0 = 4 / 29; const t1 = 6 / 29; const t2 = 3 * t1 * t1; const t3 = t1 * t1 * t1; const twoPi = 2 * Math.PI; - /** * Convert an RGB pixel into an HCL pixel. * @param {Array} pixel A pixel in RGB space. @@ -29,11 +27,14 @@ function rgb2hcl(pixel) { const blue = rgb2xyz(pixel[2]); const x = xyz2lab( - (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn); + (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn + ); const y = xyz2lab( - (0.2126729 * red + 0.7151522 * green + 0.0721750 * blue) / Yn); + (0.2126729 * red + 0.7151522 * green + 0.072175 * blue) / Yn + ); const z = xyz2lab( - (0.0193339 * red + 0.1191920 * green + 0.9503041 * blue) / Zn); + (0.0193339 * red + 0.119192 * green + 0.9503041 * blue) / Zn + ); const l = 116 * y - 16; const a = 500 * (x - y); @@ -52,7 +53,6 @@ function rgb2hcl(pixel) { return pixel; } - /** * Convert an HCL pixel into an RGB pixel. * @param {Array} pixel A pixel in HCL space. @@ -75,7 +75,7 @@ function hcl2rgb(pixel) { z = Zn * lab2xyz(z); pixel[0] = xyz2rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z); - pixel[1] = xyz2rgb(-0.9692660 * x + 1.8760108 * y + 0.0415560 * z); + pixel[1] = xyz2rgb(-0.969266 * x + 1.8760108 * y + 0.041556 * z); pixel[2] = xyz2rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z); return pixel; @@ -94,18 +94,21 @@ function rgb2xyz(x) { } function xyz2rgb(x) { - return 255 * (x <= 0.0031308 ? - 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055); + return ( + 255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055) + ); } const raster = new RasterSource({ - sources: [new Stamen({ - layer: 'watercolor' - })], - operation: function(pixels, data) { + sources: [ + new Stamen({ + layer: 'watercolor', + }), + ], + operation: function (pixels, data) { const hcl = rgb2hcl(pixels[0]); - let h = hcl[0] + Math.PI * data.hue / 180; + let h = hcl[0] + (Math.PI * data.hue) / 180; if (h < 0) { h += twoPi; } else if (h > twoPi) { @@ -113,8 +116,8 @@ const raster = new RasterSource({ } hcl[0] = h; - hcl[1] *= (data.chroma / 100); - hcl[2] *= (data.lightness / 100); + hcl[1] *= data.chroma / 100; + hcl[2] *= data.lightness / 100; return hcl2rgb(hcl); }, @@ -132,13 +135,13 @@ const raster = new RasterSource({ t1: t1, t2: t2, t3: t3, - twoPi: twoPi - } + twoPi: twoPi, + }, }); const controls = {}; -raster.on('beforeoperations', function(event) { +raster.on('beforeoperations', function (event) { const data = event.data; for (const id in controls) { data[id] = Number(controls[id].value); @@ -148,22 +151,22 @@ raster.on('beforeoperations', function(event) { const map = new Map({ layers: [ new ImageLayer({ - source: raster - }) + source: raster, + }), ], target: 'map', view: new View({ center: [0, 2500000], zoom: 2, - maxZoom: 18 - }) + maxZoom: 18, + }), }); const controlIds = ['hue', 'chroma', 'lightness']; -controlIds.forEach(function(id) { +controlIds.forEach(function (id) { const control = document.getElementById(id); const output = document.getElementById(id + 'Out'); - control.addEventListener('input', function() { + control.addEventListener('input', function () { output.innerText = control.value; raster.changed(); }); diff --git a/examples/custom-controls.js b/examples/custom-controls.js index f39be07a83..10c578229f 100644 --- a/examples/custom-controls.js +++ b/examples/custom-controls.js @@ -1,16 +1,14 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, Control} from '../src/ol/control.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {Control, defaults as defaultControls} from '../src/ol/control.js'; // // Define rotate to north control. // class RotateNorthControl extends Control { - /** * @param {Object=} opt_options Control options. */ @@ -26,7 +24,7 @@ class RotateNorthControl extends Control { super({ element: element, - target: options.target + target: options.target, }); button.addEventListener('click', this.handleRotateNorth.bind(this), false); @@ -35,28 +33,23 @@ class RotateNorthControl extends Control { handleRotateNorth() { this.getMap().getView().setRotation(0); } - } - // // Create map, giving it a rotate to north control. // - const map = new Map({ - controls: defaultControls().extend([ - new RotateNorthControl() - ]), + controls: defaultControls().extend([new RotateNorthControl()]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], zoom: 3, - rotation: 1 - }) + rotation: 1, + }), }); diff --git a/examples/custom-interactions.js b/examples/custom-interactions.js index 9fa87a1b5f..ca75edf3ea 100644 --- a/examples/custom-interactions.js +++ b/examples/custom-interactions.js @@ -1,12 +1,14 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {LineString, Point, Polygon} from '../src/ol/geom.js'; -import {defaults as defaultInteractions, Pointer as PointerInteraction} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {TileJSON, Vector as VectorSource} from '../src/ol/source.js'; import {Fill, Icon, Stroke, Style} from '../src/ol/style.js'; - +import {LineString, Point, Polygon} from '../src/ol/geom.js'; +import { + Pointer as PointerInteraction, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; +import {TileJSON, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; class Drag extends PointerInteraction { constructor() { @@ -14,7 +16,7 @@ class Drag extends PointerInteraction { handleDownEvent: handleDownEvent, handleDragEvent: handleDragEvent, handleMoveEvent: handleMoveEvent, - handleUpEvent: handleUpEvent + handleUpEvent: handleUpEvent, }); /** @@ -43,7 +45,6 @@ class Drag extends PointerInteraction { } } - /** * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event. * @return {boolean} `true` to start the drag sequence. @@ -51,10 +52,9 @@ class Drag extends PointerInteraction { function handleDownEvent(evt) { const map = evt.map; - const feature = map.forEachFeatureAtPixel(evt.pixel, - function(feature) { - return feature; - }); + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); if (feature) { this.coordinate_ = evt.coordinate; @@ -64,7 +64,6 @@ function handleDownEvent(evt) { return !!feature; } - /** * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event. */ @@ -79,17 +78,15 @@ function handleDragEvent(evt) { this.coordinate_[1] = evt.coordinate[1]; } - /** * @param {import("../src/ol/MapBrowserEvent.js").default} evt Event. */ function handleMoveEvent(evt) { if (this.cursor_) { const map = evt.map; - const feature = map.forEachFeatureAtPixel(evt.pixel, - function(feature) { - return feature; - }); + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); const element = evt.map.getTargetElement(); if (feature) { if (element.style.cursor != this.cursor_) { @@ -103,7 +100,6 @@ function handleMoveEvent(evt) { } } - /** * @return {boolean} `false` to stop the drag sequence. */ @@ -113,29 +109,43 @@ function handleUpEvent() { return false; } - const pointFeature = new Feature(new Point([0, 0])); const lineFeature = new Feature( - new LineString([[-1e7, 1e6], [-1e6, 3e6]])); + new LineString([ + [-1e7, 1e6], + [-1e6, 3e6], + ]) +); const polygonFeature = new Feature( - new Polygon([[[-3e6, -1e6], [-3e6, 1e6], - [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]])); + new Polygon([ + [ + [-3e6, -1e6], + [-3e6, 1e6], + [-1e6, 1e6], + [-1e6, -1e6], + [-3e6, -1e6], + ], + ]) +); -const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const key = + 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; const map = new Map({ interactions: defaultInteractions().extend([new Drag()]), layers: [ new TileLayer({ source: new TileJSON({ - url: 'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?access_token=' + key - }) + url: + 'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?access_token=' + + key, + }), }), new VectorLayer({ source: new VectorSource({ - features: [pointFeature, lineFeature, polygonFeature] + features: [pointFeature, lineFeature, polygonFeature], }), style: new Style({ image: new Icon({ @@ -143,21 +153,21 @@ const map = new Map({ anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.95, - src: 'data/icon.png' + src: 'data/icon.png', }), stroke: new Stroke({ width: 3, - color: [255, 0, 0, 1] + color: [255, 0, 0, 1], }), fill: new Fill({ - color: [0, 0, 255, 0.6] - }) - }) - }) + color: [0, 0, 255, 0.6], + }), + }), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/d3.js b/examples/d3.js index e15fe1da8d..ae6b352f71 100644 --- a/examples/d3.js +++ b/examples/d3.js @@ -1,24 +1,23 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {getWidth, getCenter} from '../src/ol/extent.js'; -import {Layer, Tile as TileLayer} from '../src/ol/layer.js'; import SourceState from '../src/ol/source/State.js'; -import {fromLonLat, toLonLat} from '../src/ol/proj.js'; import Stamen from '../src/ol/source/Stamen.js'; +import View from '../src/ol/View.js'; +import {Layer, Tile as TileLayer} from '../src/ol/layer.js'; +import {fromLonLat, toLonLat} from '../src/ol/proj.js'; +import {getCenter, getWidth} from '../src/ol/extent.js'; class CanvasLayer extends Layer { - constructor(options) { super(options); this.features = options.features; - this.svg = d3.select(document.createElement('div')).append('svg') + this.svg = d3 + .select(document.createElement('div')) + .append('svg') .style('position', 'absolute'); - this.svg.append('path') - .datum(this.features) - .attr('class', 'boundary'); + this.svg.append('path').datum(this.features).attr('class', 'boundary'); } getSourceState() { @@ -51,7 +50,10 @@ class CanvasLayer extends Layer { const scale = r / frameState.viewState.resolution; const center = toLonLat(getCenter(frameState.extent), projection); - d3Projection.scale(scale).center(center).translate([width / 2, height / 2]); + d3Projection + .scale(scale) + .center(center) + .translate([width / 2, height / 2]); d3Path = d3Path.projection(d3Projection); d3Path(this.features); @@ -59,8 +61,7 @@ class CanvasLayer extends Layer { this.svg.attr('width', width); this.svg.attr('height', height); - this.svg.select('path') - .attr('d', d3Path); + this.svg.select('path').attr('d', d3Path); return this.svg.node(); } @@ -70,25 +71,23 @@ const map = new Map({ layers: [ new TileLayer({ source: new Stamen({ - layer: 'watercolor' - }) - }) + layer: 'watercolor', + }), + }), ], target: 'map', view: new View({ center: fromLonLat([-97, 38]), - zoom: 4 - }) + zoom: 4, + }), }); - /** * Load the topojson data and create an ol/layer/Image for that data. */ -d3.json('data/topojson/us.json').then(function(us) { - +d3.json('data/topojson/us.json').then(function (us) { const layer = new CanvasLayer({ - features: topojson.feature(us, us.objects.counties) + features: topojson.feature(us, us.objects.counties), }); map.addLayer(layer); diff --git a/examples/device-orientation.js b/examples/device-orientation.js index 8f7fd602d6..d45579d23d 100644 --- a/examples/device-orientation.js +++ b/examples/device-orientation.js @@ -1,32 +1,31 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {toRadians} from '../src/ol/math.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {toRadians} from '../src/ol/math.js'; const view = new View({ center: [0, 0], - zoom: 2 + zoom: 2, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', - view: view + view: view, }); function el(id) { return document.getElementById(id); } - const gn = new GyroNorm(); -gn.init().then(function() { - gn.start(function(event) { +gn.init().then(function () { + gn.start(function (event) { const center = view.getCenter(); const resolution = view.getResolution(); const alpha = toRadians(event.do.alpha); diff --git a/examples/disable-image-smoothing.js b/examples/disable-image-smoothing.js index 5c231e8e49..0a6b23923a 100644 --- a/examples/disable-image-smoothing.js +++ b/examples/disable-image-smoothing.js @@ -1,10 +1,11 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const disabledLayer = new TileLayer({ @@ -12,11 +13,12 @@ const disabledLayer = new TileLayer({ className: 'ol-layer-dem', source: new XYZ({ attributions: attributions, - url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key, + url: + 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key, maxZoom: 10, crossOrigin: '', - imageSmoothing: false - }) + imageSmoothing: false, + }), }); const imagery = new TileLayer({ @@ -25,30 +27,36 @@ const imagery = new TileLayer({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, maxZoom: 20, - crossOrigin: '' - }) + crossOrigin: '', + }), }); const enabledLayer = new TileLayer({ source: new XYZ({ attributions: attributions, - url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key, + url: + 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key, maxZoom: 10, - crossOrigin: '' - }) + crossOrigin: '', + }), }); -imagery.on('prerender', function(evt) { +imagery.on('prerender', function (evt) { // use opaque background to conceal DEM while fully opaque imagery renders if (imagery.getOpacity() === 1) { evt.context.fillStyle = 'white'; - evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height); + evt.context.fillRect( + 0, + 0, + evt.context.canvas.width, + evt.context.canvas.height + ); } }); const control = document.getElementById('opacity'); const output = document.getElementById('output'); -control.addEventListener('input', function() { +control.addEventListener('input', function () { output.innerText = control.value; imagery.setOpacity(control.value / 100); }); @@ -58,50 +66,52 @@ imagery.setOpacity(control.value / 100); const view = new View({ center: [6.893, 45.8295], zoom: 16, - projection: 'EPSG:4326' + projection: 'EPSG:4326', }); const map1 = new Map({ target: 'map1', layers: [disabledLayer, imagery], - view: view + view: view, }); const map2 = new Map({ target: 'map2', layers: [enabledLayer], - view: view + view: view, }); const info1 = document.getElementById('info1'); const info2 = document.getElementById('info2'); -const showElevations = function(evt) { +const showElevations = function (evt) { if (evt.dragging) { return; } map1.forEachLayerAtPixel( evt.pixel, - function(layer, pixel) { - const height = -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1; + function (layer, pixel) { + const height = + -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1; info1.innerText = height.toFixed(1); }, { - layerFilter: function(layer) { + layerFilter: function (layer) { return layer === disabledLayer; - } + }, } ); map2.forEachLayerAtPixel( evt.pixel, - function(layer, pixel) { - const height = -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1; + function (layer, pixel) { + const height = + -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1; info2.innerText = height.toFixed(1); }, { - layerFilter: function(layer) { + layerFilter: function (layer) { return layer === enabledLayer; - } + }, } ); }; diff --git a/examples/drag-and-drop-image-vector.js b/examples/drag-and-drop-image-vector.js index 56491c33dd..d230d1c7b6 100644 --- a/examples/drag-and-drop-image-vector.js +++ b/examples/drag-and-drop-image-vector.js @@ -1,22 +1,23 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; +import { + DragAndDrop, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js'; -import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js'; -import {VectorImage as VectorImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -import {XYZ, Vector as VectorSource} from '../src/ol/source.js'; +import { + Tile as TileLayer, + VectorImage as VectorImageLayer, +} from '../src/ol/layer.js'; +import {Vector as VectorSource, XYZ} from '../src/ol/source.js'; const dragAndDropInteraction = new DragAndDrop({ - formatConstructors: [ - GPX, - GeoJSON, - IGC, - KML, - TopoJSON - ] + formatConstructors: [GPX, GeoJSON, IGC, KML, TopoJSON], }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const map = new Map({ @@ -25,31 +26,34 @@ const map = new Map({ new TileLayer({ source: new XYZ({ attributions: attributions, - url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) - }) + url: + 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + }), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -dragAndDropInteraction.on('addfeatures', function(event) { +dragAndDropInteraction.on('addfeatures', function (event) { const vectorSource = new VectorSource({ - features: event.features + features: event.features, }); - map.addLayer(new VectorImageLayer({ - source: vectorSource - })); + map.addLayer( + new VectorImageLayer({ + source: vectorSource, + }) + ); map.getView().fit(vectorSource.getExtent()); }); -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { const features = []; - map.forEachFeatureAtPixel(pixel, function(feature) { + map.forEachFeatureAtPixel(pixel, function (feature) { features.push(feature); }); if (features.length > 0) { @@ -64,7 +68,7 @@ const displayFeatureInfo = function(pixel) { } }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -72,6 +76,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/drag-and-drop.js b/examples/drag-and-drop.js index 0f407fec82..04ba089aee 100644 --- a/examples/drag-and-drop.js +++ b/examples/drag-and-drop.js @@ -1,22 +1,20 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; +import { + DragAndDrop, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js'; -import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {XYZ, Vector as VectorSource} from '../src/ol/source.js'; +import {Vector as VectorSource, XYZ} from '../src/ol/source.js'; const dragAndDropInteraction = new DragAndDrop({ - formatConstructors: [ - GPX, - GeoJSON, - IGC, - KML, - TopoJSON - ] + formatConstructors: [GPX, GeoJSON, IGC, KML, TopoJSON], }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const map = new Map({ @@ -25,31 +23,34 @@ const map = new Map({ new TileLayer({ source: new XYZ({ attributions: attributions, - url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) - }) + url: + 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + }), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -dragAndDropInteraction.on('addfeatures', function(event) { +dragAndDropInteraction.on('addfeatures', function (event) { const vectorSource = new VectorSource({ - features: event.features + features: event.features, }); - map.addLayer(new VectorLayer({ - source: vectorSource - })); + map.addLayer( + new VectorLayer({ + source: vectorSource, + }) + ); map.getView().fit(vectorSource.getExtent()); }); -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { const features = []; - map.forEachFeatureAtPixel(pixel, function(feature) { + map.forEachFeatureAtPixel(pixel, function (feature) { features.push(feature); }); if (features.length > 0) { @@ -64,7 +65,7 @@ const displayFeatureInfo = function(pixel) { } }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -72,6 +73,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/drag-rotate-and-zoom.js b/examples/drag-rotate-and-zoom.js index 88e58a4f8a..f552b25553 100644 --- a/examples/drag-rotate-and-zoom.js +++ b/examples/drag-rotate-and-zoom.js @@ -1,22 +1,22 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import { + DragRotateAndZoom, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; const map = new Map({ - interactions: defaultInteractions().extend([ - new DragRotateAndZoom() - ]), + interactions: defaultInteractions().extend([new DragRotateAndZoom()]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/draw-and-modify-features.js b/examples/draw-and-modify-features.js index 0863a752fb..bc2a56773c 100644 --- a/examples/draw-and-modify-features.js +++ b/examples/draw-and-modify-features.js @@ -1,12 +1,12 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {Draw, Modify, Snap} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {Draw, Modify, Snap} from '../src/ol/interaction.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const source = new VectorSource(); @@ -14,19 +14,19 @@ const vector = new VectorLayer({ source: source, style: new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.2)' + color: 'rgba(255, 255, 255, 0.2)', }), stroke: new Stroke({ color: '#ffcc33', - width: 2 + width: 2, }), image: new CircleStyle({ radius: 7, fill: new Fill({ - color: '#ffcc33' - }) - }) - }) + color: '#ffcc33', + }), + }), + }), }); const map = new Map({ @@ -34,8 +34,8 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 4 - }) + zoom: 4, + }), }); const modify = new Modify({source: source}); @@ -47,18 +47,17 @@ const typeSelect = document.getElementById('type'); function addInteractions() { draw = new Draw({ source: source, - type: typeSelect.value + type: typeSelect.value, }); map.addInteraction(draw); snap = new Snap({source: source}); map.addInteraction(snap); - } /** * Handle change event. */ -typeSelect.onchange = function() { +typeSelect.onchange = function () { map.removeInteraction(draw); map.removeInteraction(snap); addInteractions(); diff --git a/examples/draw-features.js b/examples/draw-features.js index 4d0d200b8f..cefff36c35 100644 --- a/examples/draw-features.js +++ b/examples/draw-features.js @@ -1,17 +1,17 @@ +import Draw from '../src/ol/interaction/Draw.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import Draw from '../src/ol/interaction/Draw.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const source = new VectorSource({wrapX: false}); const vector = new VectorLayer({ - source: source + source: source, }); const map = new Map({ @@ -19,8 +19,8 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 4 - }) + zoom: 4, + }), }); const typeSelect = document.getElementById('type'); @@ -31,17 +31,16 @@ function addInteraction() { if (value !== 'None') { draw = new Draw({ source: source, - type: typeSelect.value + type: typeSelect.value, }); map.addInteraction(draw); } } - /** * Handle change event. */ -typeSelect.onchange = function() { +typeSelect.onchange = function () { map.removeInteraction(draw); addInteraction(); }; diff --git a/examples/draw-freehand.js b/examples/draw-freehand.js index 92cefa6c89..d7d2b08057 100644 --- a/examples/draw-freehand.js +++ b/examples/draw-freehand.js @@ -1,17 +1,17 @@ +import Draw from '../src/ol/interaction/Draw.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import Draw from '../src/ol/interaction/Draw.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const source = new VectorSource({wrapX: false}); const vector = new VectorLayer({ - source: source + source: source, }); const map = new Map({ @@ -19,8 +19,8 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 4 - }) + zoom: 4, + }), }); const typeSelect = document.getElementById('type'); @@ -32,17 +32,16 @@ function addInteraction() { draw = new Draw({ source: source, type: typeSelect.value, - freehand: true + freehand: true, }); map.addInteraction(draw); } } - /** * Handle change event. */ -typeSelect.onchange = function() { +typeSelect.onchange = function () { map.removeInteraction(draw); addInteraction(); }; diff --git a/examples/draw-shapes.js b/examples/draw-shapes.js index 7ed90d5be0..f02fba2ac8 100644 --- a/examples/draw-shapes.js +++ b/examples/draw-shapes.js @@ -1,18 +1,21 @@ +import Draw, { + createBox, + createRegularPolygon, +} from '../src/ol/interaction/Draw.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Polygon from '../src/ol/geom/Polygon.js'; -import Draw, {createRegularPolygon, createBox} from '../src/ol/interaction/Draw.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import View from '../src/ol/View.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const source = new VectorSource({wrapX: false}); const vector = new VectorLayer({ - source: source + source: source, }); const map = new Map({ @@ -20,8 +23,8 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 4 - }) + zoom: 4, + }), }); const typeSelect = document.getElementById('type'); @@ -39,7 +42,7 @@ function addInteraction() { geometryFunction = createBox(); } else if (value === 'Star') { value = 'Circle'; - geometryFunction = function(coordinates, geometry) { + geometryFunction = function (coordinates, geometry) { const center = coordinates[0]; const last = coordinates[1]; const dx = center[0] - last[0]; @@ -49,7 +52,7 @@ function addInteraction() { const newCoordinates = []; const numPoints = 12; for (let i = 0; i < numPoints; ++i) { - const angle = rotation + i * 2 * Math.PI / numPoints; + const angle = rotation + (i * 2 * Math.PI) / numPoints; const fraction = i % 2 === 0 ? 1 : 0.5; const offsetX = radius * fraction * Math.cos(angle); const offsetY = radius * fraction * Math.sin(angle); @@ -67,17 +70,16 @@ function addInteraction() { draw = new Draw({ source: source, type: value, - geometryFunction: geometryFunction + geometryFunction: geometryFunction, }); map.addInteraction(draw); } } - /** * Handle change event. */ -typeSelect.onchange = function() { +typeSelect.onchange = function () { map.removeInteraction(draw); addInteraction(); }; diff --git a/examples/dynamic-data.js b/examples/dynamic-data.js index e65a0d21f7..deca3b51aa 100644 --- a/examples/dynamic-data.js +++ b/examples/dynamic-data.js @@ -1,13 +1,13 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {MultiPoint, Point} from '../src/ol/geom.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {MultiPoint, Point} from '../src/ol/geom.js'; import {getVectorContext} from '../src/ol/render.js'; const tileLayer = new TileLayer({ - source: new OSM() + source: new OSM(), }); const map = new Map({ @@ -15,30 +15,30 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const imageStyle = new Style({ image: new CircleStyle({ radius: 5, fill: new Fill({color: 'yellow'}), - stroke: new Stroke({color: 'red', width: 1}) - }) + stroke: new Stroke({color: 'red', width: 1}), + }), }); const headInnerImageStyle = new Style({ image: new CircleStyle({ radius: 2, - fill: new Fill({color: 'blue'}) - }) + fill: new Fill({color: 'blue'}), + }), }); const headOuterImageStyle = new Style({ image: new CircleStyle({ radius: 5, - fill: new Fill({color: 'black'}) - }) + fill: new Fill({color: 'black'}), + }), }); const n = 200; @@ -46,16 +46,16 @@ const omegaTheta = 30000; // Rotation period in ms const R = 7e6; const r = 2e6; const p = 2e6; -tileLayer.on('postrender', function(event) { +tileLayer.on('postrender', function (event) { const vectorContext = getVectorContext(event); const frameState = event.frameState; - const theta = 2 * Math.PI * frameState.time / omegaTheta; + const theta = (2 * Math.PI * frameState.time) / omegaTheta; const coordinates = []; let i; for (i = 0; i < n; ++i) { - const t = theta + 2 * Math.PI * i / n; - const x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r); - const y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r); + const t = theta + (2 * Math.PI * i) / n; + const x = (R + r) * Math.cos(t) + p * Math.cos(((R + r) * t) / r); + const y = (R + r) * Math.sin(t) + p * Math.sin(((R + r) * t) / r); coordinates.push([x, y]); } vectorContext.setStyle(imageStyle); diff --git a/examples/earthquake-clusters.js b/examples/earthquake-clusters.js index e328f75562..8ffd0602a0 100644 --- a/examples/earthquake-clusters.js +++ b/examples/earthquake-clusters.js @@ -1,29 +1,38 @@ +import KML from '../src/ol/format/KML.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {createEmpty, getWidth, getHeight, extend} from '../src/ol/extent.js'; -import KML from '../src/ol/format/KML.js'; -import {defaults as defaultInteractions, Select} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import { + Circle as CircleStyle, + Fill, + RegularShape, + Stroke, + Style, + Text, +} from '../src/ol/style.js'; import {Cluster, Stamen, Vector as VectorSource} from '../src/ol/source.js'; -import {Circle as CircleStyle, Fill, RegularShape, Stroke, Style, Text} from '../src/ol/style.js'; - +import { + Select, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {createEmpty, extend, getHeight, getWidth} from '../src/ol/extent.js'; const earthquakeFill = new Fill({ - color: 'rgba(255, 153, 0, 0.8)' + color: 'rgba(255, 153, 0, 0.8)', }); const earthquakeStroke = new Stroke({ color: 'rgba(255, 204, 0, 0.2)', - width: 1 + width: 1, }); const textFill = new Fill({ - color: '#fff' + color: '#fff', }); const textStroke = new Stroke({ color: 'rgba(0, 0, 0, 0.6)', - width: 3 + width: 3, }); const invisibleFill = new Fill({ - color: 'rgba(255, 255, 255, 0.01)' + color: 'rgba(255, 255, 255, 0.01)', }); function createEarthquakeStyle(feature) { @@ -42,14 +51,14 @@ function createEarthquakeStyle(feature) { points: 5, angle: Math.PI, fill: earthquakeFill, - stroke: earthquakeStroke - }) + stroke: earthquakeStroke, + }), }); } let maxFeatureCount; let vector = null; -const calculateClusterInfo = function(resolution) { +const calculateClusterInfo = function (resolution) { maxFeatureCount = 0; const features = vector.getSource().getFeatures(); let feature, radius; @@ -62,8 +71,7 @@ const calculateClusterInfo = function(resolution) { extend(extent, originalFeatures[j].getGeometry().getExtent()); } maxFeatureCount = Math.max(maxFeatureCount, jj); - radius = 0.25 * (getWidth(extent) + getHeight(extent)) / - resolution; + radius = (0.25 * (getWidth(extent) + getHeight(extent))) / resolution; feature.set('radius', radius); } }; @@ -81,14 +89,14 @@ function styleFunction(feature, resolution) { image: new CircleStyle({ radius: feature.get('radius'), fill: new Fill({ - color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))] - }) + color: [255, 153, 0, Math.min(0.8, 0.4 + size / maxFeatureCount)], + }), }), text: new Text({ text: size.toString(), fill: textFill, - stroke: textStroke - }) + stroke: textStroke, + }), }); } else { const originalFeature = feature.get('features')[0]; @@ -98,12 +106,14 @@ function styleFunction(feature, resolution) { } function selectStyleFunction(feature) { - const styles = [new Style({ - image: new CircleStyle({ - radius: feature.get('radius'), - fill: invisibleFill - }) - })]; + const styles = [ + new Style({ + image: new CircleStyle({ + radius: feature.get('radius'), + fill: invisibleFill, + }), + }), + ]; const originalFeatures = feature.get('features'); let originalFeature; for (let i = originalFeatures.length - 1; i >= 0; --i) { @@ -119,31 +129,32 @@ vector = new VectorLayer({ source: new VectorSource({ url: 'data/kml/2012_Earthquakes_Mag5.kml', format: new KML({ - extractStyles: false - }) - }) + extractStyles: false, + }), + }), }), - style: styleFunction + style: styleFunction, }); const raster = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); const map = new Map({ layers: [raster, vector], - interactions: defaultInteractions().extend([new Select({ - condition: function(evt) { - return evt.type == 'pointermove' || - evt.type == 'singleclick'; - }, - style: selectStyleFunction - })]), + interactions: defaultInteractions().extend([ + new Select({ + condition: function (evt) { + return evt.type == 'pointermove' || evt.type == 'singleclick'; + }, + style: selectStyleFunction, + }), + ]), target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/earthquake-custom-symbol.js b/examples/earthquake-custom-symbol.js index 917c1ada8e..45659589b4 100644 --- a/examples/earthquake-custom-symbol.js +++ b/examples/earthquake-custom-symbol.js @@ -1,22 +1,29 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import KML from '../src/ol/format/KML.js'; +import Map from '../src/ol/Map.js'; import Polygon from '../src/ol/geom/Polygon.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {toContext} from '../src/ol/render.js'; import Stamen from '../src/ol/source/Stamen.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Icon, Stroke, Style} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {toContext} from '../src/ol/render.js'; - -const symbol = [[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]]; +const symbol = [ + [0, 0], + [4, 2], + [6, 0], + [10, 5], + [6, 3], + [4, 5], + [0, 0], +]; let scale; -const scaleFunction = function(coordinate) { +const scaleFunction = function (coordinate) { return [coordinate[0] * scale, coordinate[1] * scale]; }; const styleCache = {}; -const styleFunction = function(feature) { +const styleFunction = function (feature) { // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a // standards-violating tag in each Placemark. We extract it from // the Placemark's name instead. @@ -27,19 +34,23 @@ const styleFunction = function(feature) { let style = styleCache[size]; if (!style) { const canvas = document.createElement('canvas'); - const vectorContext = toContext(canvas.getContext('2d'), - {size: [size, size], pixelRatio: 1}); - vectorContext.setStyle(new Style({ - fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}), - stroke: new Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 2}) - })); + const vectorContext = toContext(canvas.getContext('2d'), { + size: [size, size], + pixelRatio: 1, + }); + vectorContext.setStyle( + new Style({ + fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}), + stroke: new Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 2}), + }) + ); vectorContext.drawGeometry(new Polygon([symbol.map(scaleFunction)])); style = new Style({ image: new Icon({ img: canvas, imgSize: [size, size], - rotation: 1.2 - }) + rotation: 1.2, + }), }); styleCache[size] = style; } @@ -50,16 +61,16 @@ const vector = new VectorLayer({ source: new VectorSource({ url: 'data/kml/2012_Earthquakes_Mag5.kml', format: new KML({ - extractStyles: false - }) + extractStyles: false, + }), }), - style: styleFunction + style: styleFunction, }); const raster = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); const map = new Map({ @@ -67,6 +78,6 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/edit-geographic.js b/examples/edit-geographic.js index 6c0cd07c1f..857e06ee20 100644 --- a/examples/edit-geographic.js +++ b/examples/edit-geographic.js @@ -1,46 +1,46 @@ -import {Map, View} from '../src/ol/index.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {Modify, Select, Draw, Snap} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {Draw, Modify, Select, Snap} from '../src/ol/interaction.js'; +import {Map, View} from '../src/ol/index.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {useGeographic} from '../src/ol/proj.js'; useGeographic(); const source = new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }); const map = new Map({ target: 'map', layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new VectorLayer({ - source: source - }) + source: source, + }), ], view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const select = new Select(); const modify = new Modify({ - features: select.getFeatures() + features: select.getFeatures(), }); const draw = new Draw({ type: 'Polygon', - source: source + source: source, }); const snap = new Snap({ - source: source + source: source, }); function removeInteractions() { diff --git a/examples/epsg-4326.js b/examples/epsg-4326.js index 86cf815629..9ac4146e40 100644 --- a/examples/epsg-4326.js +++ b/examples/epsg-4326.js @@ -1,9 +1,8 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, ScaleLine} from '../src/ol/control.js'; import TileLayer from '../src/ol/layer/Tile.js'; import TileWMS from '../src/ol/source/TileWMS.js'; - +import View from '../src/ol/View.js'; +import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js'; const layers = [ new TileLayer({ @@ -11,23 +10,23 @@ const layers = [ url: 'https://ahocevar.com/geoserver/wms', params: { 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR', - 'TILED': true - } - }) - }) + 'TILED': true, + }, + }), + }), ]; const map = new Map({ controls: defaultControls().extend([ new ScaleLine({ - units: 'degrees' - }) + units: 'degrees', + }), ]), layers: layers, target: 'map', view: new View({ projection: 'EPSG:4326', center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/es2015-custom-element.js b/examples/es2015-custom-element.js index ff632b2b2e..4a4dbd8901 100644 --- a/examples/es2015-custom-element.js +++ b/examples/es2015-custom-element.js @@ -1,10 +1,9 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; class OLComponent extends HTMLElement { - constructor() { super(); this.shadow = this.attachShadow({mode: 'open'}); @@ -28,15 +27,14 @@ class OLComponent extends HTMLElement { target: div, layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); - } } diff --git a/examples/export-map.js b/examples/export-map.js index 0039f0f1d8..ca3836b8ef 100644 --- a/examples/export-map.js +++ b/examples/export-map.js @@ -1,48 +1,57 @@ +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; 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 {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - opacity: 0.5 - }) + opacity: 0.5, + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -document.getElementById('export-png').addEventListener('click', function() { - map.once('rendercomplete', function() { +document.getElementById('export-png').addEventListener('click', function () { + map.once('rendercomplete', function () { const mapCanvas = document.createElement('canvas'); const size = map.getSize(); mapCanvas.width = size[0]; mapCanvas.height = size[1]; const mapContext = mapCanvas.getContext('2d'); - Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) { - if (canvas.width > 0) { - const opacity = canvas.parentNode.style.opacity; - mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); - const transform = canvas.style.transform; - // Get the transform parameters from the style's transform matrix - const matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number); - // Apply the transform to the export map context - CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix); - mapContext.drawImage(canvas, 0, 0); + Array.prototype.forEach.call( + document.querySelectorAll('.ol-layer canvas'), + function (canvas) { + if (canvas.width > 0) { + const opacity = canvas.parentNode.style.opacity; + mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); + const transform = canvas.style.transform; + // Get the transform parameters from the style's transform matrix + const matrix = transform + .match(/^matrix\(([^\(]*)\)$/)[1] + .split(',') + .map(Number); + // Apply the transform to the export map context + CanvasRenderingContext2D.prototype.setTransform.apply( + mapContext, + matrix + ); + mapContext.drawImage(canvas, 0, 0); + } } - }); + ); if (navigator.msSaveBlob) { // link download attribuute does not work on MS browsers navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png'); diff --git a/examples/export-pdf.js b/examples/export-pdf.js index 97dac9b59e..3d1bb4fcc0 100644 --- a/examples/export-pdf.js +++ b/examples/export-pdf.js @@ -1,94 +1,110 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; import WKT from '../src/ol/format/WKT.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const format = new WKT(); const feature = format.readFeature( 'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' + - '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' + - '-39.1552734375, 10.689697265625 -25.0927734375))'); + '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' + + '-39.1552734375, 10.689697265625 -25.0927734375))' +); feature.getGeometry().transform('EPSG:4326', 'EPSG:3857'); const vector = new VectorLayer({ source: new VectorSource({ - features: [feature] + features: [feature], }), - opacity: 0.5 + opacity: 0.5, }); - const map = new Map({ layers: [raster, vector], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); - const dims = { a0: [1189, 841], a1: [841, 594], a2: [594, 420], a3: [420, 297], a4: [297, 210], - a5: [210, 148] + a5: [210, 148], }; - const exportButton = document.getElementById('export-pdf'); -exportButton.addEventListener('click', function() { +exportButton.addEventListener( + 'click', + function () { + exportButton.disabled = true; + document.body.style.cursor = 'progress'; - exportButton.disabled = true; - document.body.style.cursor = 'progress'; + const format = document.getElementById('format').value; + const resolution = document.getElementById('resolution').value; + const dim = dims[format]; + const width = Math.round((dim[0] * resolution) / 25.4); + const height = Math.round((dim[1] * resolution) / 25.4); + const size = map.getSize(); + const viewResolution = map.getView().getResolution(); - const format = document.getElementById('format').value; - const resolution = document.getElementById('resolution').value; - const dim = dims[format]; - const width = Math.round(dim[0] * resolution / 25.4); - const height = Math.round(dim[1] * resolution / 25.4); - const size = map.getSize(); - const viewResolution = map.getView().getResolution(); - - map.once('rendercomplete', function() { - const mapCanvas = document.createElement('canvas'); - mapCanvas.width = width; - mapCanvas.height = height; - const mapContext = mapCanvas.getContext('2d'); - Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) { - if (canvas.width > 0) { - const opacity = canvas.parentNode.style.opacity; - mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); - const transform = canvas.style.transform; - // Get the transform parameters from the style's transform matrix - const matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number); - // Apply the transform to the export map context - CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix); - mapContext.drawImage(canvas, 0, 0); - } + map.once('rendercomplete', function () { + const mapCanvas = document.createElement('canvas'); + mapCanvas.width = width; + mapCanvas.height = height; + const mapContext = mapCanvas.getContext('2d'); + Array.prototype.forEach.call( + document.querySelectorAll('.ol-layer canvas'), + function (canvas) { + if (canvas.width > 0) { + const opacity = canvas.parentNode.style.opacity; + mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); + const transform = canvas.style.transform; + // Get the transform parameters from the style's transform matrix + const matrix = transform + .match(/^matrix\(([^\(]*)\)$/)[1] + .split(',') + .map(Number); + // Apply the transform to the export map context + CanvasRenderingContext2D.prototype.setTransform.apply( + mapContext, + matrix + ); + mapContext.drawImage(canvas, 0, 0); + } + } + ); + const pdf = new jsPDF('landscape', undefined, format); + pdf.addImage( + mapCanvas.toDataURL('image/jpeg'), + 'JPEG', + 0, + 0, + dim[0], + dim[1] + ); + pdf.save('map.pdf'); + // Reset original map size + map.setSize(size); + map.getView().setResolution(viewResolution); + exportButton.disabled = false; + document.body.style.cursor = 'auto'; }); - const pdf = new jsPDF('landscape', undefined, format); - pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]); - pdf.save('map.pdf'); - // Reset original map size - map.setSize(size); - map.getView().setResolution(viewResolution); - exportButton.disabled = false; - document.body.style.cursor = 'auto'; - }); - // Set print size - const printSize = [width, height]; - map.setSize(printSize); - const scaling = Math.min(width / size[0], height / size[1]); - map.getView().setResolution(viewResolution / scaling); - -}, false); + // Set print size + const printSize = [width, height]; + map.setSize(printSize); + const scaling = Math.min(width / size[0], height / size[1]); + map.getView().setResolution(viewResolution / scaling); + }, + false +); diff --git a/examples/extent-constrained.js b/examples/extent-constrained.js index 70613dd536..1fbdb14ac9 100644 --- a/examples/extent-constrained.js +++ b/examples/extent-constrained.js @@ -1,25 +1,24 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; -import {defaults as defaultControls} from '../src/ol/control.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import ZoomSlider from '../src/ol/control/ZoomSlider.js'; +import {defaults as defaultControls} from '../src/ol/control.js'; const view = new View({ center: [328627.563458, 5921296.662223], zoom: 8, - extent: [-572513.341856, 5211017.966314, - 916327.095083, 6636950.728974] + extent: [-572513.341856, 5211017.966314, 916327.095083, 6636950.728974], }); new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], keyboardEventTarget: document, target: 'map', view: view, - controls: defaultControls().extend([new ZoomSlider()]) + controls: defaultControls().extend([new ZoomSlider()]), }); diff --git a/examples/extent-interaction.js b/examples/extent-interaction.js index 0925665abf..907e702f04 100644 --- a/examples/extent-interaction.js +++ b/examples/extent-interaction.js @@ -1,29 +1,29 @@ +import ExtentInteraction from '../src/ol/interaction/Extent.js'; +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; -import ExtentInteraction from '../src/ol/interaction/Extent.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const vectorSource = new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const extent = new ExtentInteraction(); @@ -31,12 +31,12 @@ map.addInteraction(extent); extent.setActive(false); //Enable interaction by holding shift -window.addEventListener('keydown', function(event) { +window.addEventListener('keydown', function (event) { if (event.keyCode == 16) { extent.setActive(true); } }); -window.addEventListener('keyup', function(event) { +window.addEventListener('keyup', function (event) { if (event.keyCode == 16) { extent.setActive(false); } diff --git a/examples/feature-animation.js b/examples/feature-animation.js index 27fcec3eed..c1391ff2a1 100644 --- a/examples/feature-animation.js +++ b/examples/feature-animation.js @@ -1,19 +1,19 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import {unByKey} from '../src/ol/Observable.js'; -import View from '../src/ol/View.js'; -import {easeOut} from '../src/ol/easing.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {fromLonLat} from '../src/ol/proj.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Stroke, Style} from '../src/ol/style.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {easeOut} from '../src/ol/easing.js'; +import {fromLonLat} from '../src/ol/proj.js'; import {getVectorContext} from '../src/ol/render.js'; +import {unByKey} from '../src/ol/Observable.js'; const tileLayer = new TileLayer({ source: new OSM({ - wrapX: false - }) + wrapX: false, + }), }); const map = new Map({ @@ -22,15 +22,15 @@ const map = new Map({ view: new View({ center: [0, 0], zoom: 1, - multiWorld: true - }) + multiWorld: true, + }), }); const source = new VectorSource({ - wrapX: false + wrapX: false, }); const vector = new VectorLayer({ - source: source + source: source, }); map.addLayer(vector); @@ -62,9 +62,9 @@ function flash(feature) { radius: radius, stroke: new Stroke({ color: 'rgba(255, 0, 0, ' + opacity + ')', - width: 0.25 + opacity - }) - }) + width: 0.25 + opacity, + }), + }), }); vectorContext.setStyle(style); @@ -78,7 +78,7 @@ function flash(feature) { } } -source.on('addfeature', function(e) { +source.on('addfeature', function (e) { flash(e.feature); }); diff --git a/examples/feature-move-animation.js b/examples/feature-move-animation.js index e3c38fdc9a..3210ad650d 100644 --- a/examples/feature-move-animation.js +++ b/examples/feature-move-animation.js @@ -1,12 +1,18 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import Polyline from '../src/ol/format/Polyline.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import XYZ from '../src/ol/source/XYZ.js'; +import Polyline from '../src/ol/format/Polyline.js'; import VectorSource from '../src/ol/source/Vector.js'; -import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from '../src/ol/style.js'; +import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; +import { + Circle as CircleStyle, + Fill, + Icon, + Stroke, + Style, +} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {getVectorContext} from '../src/ol/render.js'; // This long string is placed here due to jsFiddle limitations. @@ -50,14 +56,16 @@ const polyline = [ 'ab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@', 'mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJ', 'uEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m', - '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL' + '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL', ].join(''); -const route = /** @type {import("../src/ol/geom/LineString.js").default} */ (new Polyline({ - factor: 1e6 -}).readGeometry(polyline, { +const route = /** @type {import("../src/ol/geom/LineString.js").default} */ (new Polyline( + { + factor: 1e6, + } +).readGeometry(polyline, { dataProjection: 'EPSG:4326', - featureProjection: 'EPSG:3857' + featureProjection: 'EPSG:3857', })); const routeCoords = route.getCoordinates(); @@ -65,42 +73,46 @@ const routeLength = routeCoords.length; const routeFeature = new Feature({ type: 'route', - geometry: route + geometry: route, }); -const geoMarker = /** @type Feature */(new Feature({ - type: 'geoMarker', - geometry: new Point(routeCoords[0]) -})); +const geoMarker = /** @type Feature */ (new Feature( + { + type: 'geoMarker', + geometry: new Point(routeCoords[0]), + } +)); const startMarker = new Feature({ type: 'icon', - geometry: new Point(routeCoords[0]) + geometry: new Point(routeCoords[0]), }); const endMarker = new Feature({ type: 'icon', - geometry: new Point(routeCoords[routeLength - 1]) + geometry: new Point(routeCoords[routeLength - 1]), }); const styles = { 'route': new Style({ stroke: new Stroke({ - width: 6, color: [237, 212, 0, 0.8] - }) + width: 6, + color: [237, 212, 0, 0.8], + }), }), 'icon': new Style({ image: new Icon({ anchor: [0.5, 1], - src: 'data/icon.png' - }) + src: 'data/icon.png', + }), }), 'geoMarker': new Style({ image: new CircleStyle({ radius: 7, fill: new Fill({color: 'black'}), stroke: new Stroke({ - color: 'white', width: 2 - }) - }) - }) + color: 'white', + width: 2, + }), + }), + }), }; let animating = false; @@ -110,19 +122,20 @@ const startButton = document.getElementById('start-animation'); const vectorLayer = new VectorLayer({ source: new VectorSource({ - features: [routeFeature, geoMarker, startMarker, endMarker] + features: [routeFeature, geoMarker, startMarker, endMarker], }), - style: function(feature) { + style: function (feature) { // hide geoMarker if animation is active if (animating && feature.get('type') === 'geoMarker') { return null; } return styles[feature.get('type')]; - } + }, }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const center = [-5639523.95, -3501274.52]; @@ -132,21 +145,21 @@ const map = new Map({ center: center, zoom: 10, minZoom: 2, - maxZoom: 19 + maxZoom: 19, }), layers: [ new TileLayer({ source: new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=' + key, - tileSize: 512 - }) + tileSize: 512, + }), }), - vectorLayer - ] + vectorLayer, + ], }); -const moveFeature = function(event) { +const moveFeature = function (event) { const vectorContext = getVectorContext(event); const frameState = event.frameState; @@ -154,7 +167,7 @@ const moveFeature = function(event) { const elapsedTime = frameState.time - now; // here the trick to increase speed is to jump some indexes // on lineString coordinates - const index = Math.round(speed * elapsedTime / 1000); + const index = Math.round((speed * elapsedTime) / 1000); if (index >= routeLength) { stopAnimation(true); @@ -186,7 +199,6 @@ function startAnimation() { } } - /** * @param {boolean} ended end of animation. */ diff --git a/examples/filter-points-webgl.js b/examples/filter-points-webgl.js index b2d39f0bd6..2306684b78 100644 --- a/examples/filter-points-webgl.js +++ b/examples/filter-points-webgl.js @@ -1,61 +1,54 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import Feature from '../src/ol/Feature.js'; +import Map from '../src/ol/Map.js'; import Point from '../src/ol/geom/Point.js'; +import Stamen from '../src/ol/source/Stamen.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js'; import {Vector} from '../src/ol/source.js'; import {fromLonLat} from '../src/ol/proj.js'; -import Stamen from '../src/ol/source/Stamen.js'; -import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js'; const vectorSource = new Vector({ - attributions: 'NASA' + attributions: 'NASA', }); const oldColor = 'rgba(242,56,22,0.61)'; const newColor = '#ffe52c'; const period = 12; // animation period in seconds -const animRatio = - ['^', - ['/', - ['%', - ['+', - ['time'], - [ - 'interpolate', - ['linear'], - ['get', 'year'], - 1850, 0, - 2015, period - ] - ], - period +const animRatio = [ + '^', + [ + '/', + [ + '%', + [ + '+', + ['time'], + ['interpolate', ['linear'], ['get', 'year'], 1850, 0, 2015, period], ], - period + period, ], - 0.5 - ]; + period, + ], + 0.5, +]; const style = { variables: { minYear: 1850, - maxYear: 2015 + maxYear: 2015, }, filter: ['between', ['get', 'year'], ['var', 'minYear'], ['var', 'maxYear']], symbol: { symbolType: 'circle', - size: ['*', + size: [ + '*', ['interpolate', ['linear'], ['get', 'mass'], 0, 8, 200000, 26], - ['-', 1.75, ['*', animRatio, 0.75]] + ['-', 1.75, ['*', animRatio, 0.75]], ], - color: ['interpolate', - ['linear'], - animRatio, - 0, newColor, - 1, oldColor - ], - opacity: ['-', 1.0, ['*', animRatio, 0.75]] - } + color: ['interpolate', ['linear'], animRatio, 0, newColor, 1, oldColor], + opacity: ['-', 1.0, ['*', animRatio, 0.75]], + }, }; // handle input values & events @@ -85,7 +78,7 @@ updateStatusText(); // load data const client = new XMLHttpRequest(); client.open('GET', 'data/csv/meteorite_landings.csv'); -client.onload = function() { +client.onload = function () { const csv = client.responseText; const features = []; @@ -102,11 +95,13 @@ client.onload = function() { continue; } - features.push(new Feature({ - mass: parseFloat(line[1]) || 0, - year: parseInt(line[2]) || 0, - geometry: new Point(coords) - })); + features.push( + new Feature({ + mass: parseFloat(line[1]) || 0, + year: parseInt(line[2]) || 0, + geometry: new Point(coords), + }) + ); } vectorSource.addFeatures(features); @@ -117,20 +112,20 @@ const map = new Map({ layers: [ new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }), new WebGLPointsLayer({ style: style, source: vectorSource, - disableHitDetection: true - }) + disableHitDetection: true, + }), ], target: document.getElementById('map'), view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); // animate the map diff --git a/examples/flight-animation.js b/examples/flight-animation.js index 9445a8d14b..932c579108 100644 --- a/examples/flight-animation.js +++ b/examples/flight-animation.js @@ -1,79 +1,81 @@ import Feature from '../src/ol/Feature.js'; -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import LineString from '../src/ol/geom/LineString.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import Map from '../src/ol/Map.js'; import Stamen from '../src/ol/source/Stamen.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Stroke, Style} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {getVectorContext} from '../src/ol/render.js'; const tileLayer = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); const map = new Map({ - layers: [ - tileLayer - ], + layers: [tileLayer], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const style = new Style({ stroke: new Stroke({ color: '#EAE911', - width: 2 - }) + width: 2, + }), }); const flightsSource = new VectorSource({ wrapX: false, - attributions: 'Flight data by ' + - 'OpenFlights,', - loader: function() { + attributions: + 'Flight data by ' + + 'OpenFlights,', + loader: function () { const url = 'data/openflights/flights.json'; - fetch(url).then(function(response) { - return response.json(); - }).then(function(json) { - const flightsData = json.flights; - for (let i = 0; i < flightsData.length; i++) { - const flight = flightsData[i]; - const from = flight[0]; - const to = flight[1]; + fetch(url) + .then(function (response) { + return response.json(); + }) + .then(function (json) { + const flightsData = json.flights; + for (let i = 0; i < flightsData.length; i++) { + const flight = flightsData[i]; + const from = flight[0]; + const to = flight[1]; - // create an arc circle between the two locations - const arcGenerator = new arc.GreatCircle( - {x: from[1], y: from[0]}, - {x: to[1], y: to[0]}); + // create an arc circle between the two locations + const arcGenerator = new arc.GreatCircle( + {x: from[1], y: from[0]}, + {x: to[1], y: to[0]} + ); - const arcLine = arcGenerator.Arc(100, {offset: 10}); - if (arcLine.geometries.length === 1) { - const line = new LineString(arcLine.geometries[0].coords); - line.transform('EPSG:4326', 'EPSG:3857'); + const arcLine = arcGenerator.Arc(100, {offset: 10}); + if (arcLine.geometries.length === 1) { + const line = new LineString(arcLine.geometries[0].coords); + line.transform('EPSG:4326', 'EPSG:3857'); - const feature = new Feature({ - geometry: line, - finished: false - }); - // add the feature with a delay so that the animation - // for all features does not start at the same time - addLater(feature, i * 50); + const feature = new Feature({ + geometry: line, + finished: false, + }); + // add the feature with a delay so that the animation + // for all features does not start at the same time + addLater(feature, i * 50); + } } - } - tileLayer.on('postrender', animateFlights); - }); - } + tileLayer.on('postrender', animateFlights); + }); + }, }); const flightsLayer = new VectorLayer({ source: flightsSource, - style: function(feature) { + style: function (feature) { // if the animation is still active for a feature, do not // render the feature with the layer style if (feature.get('finished')) { @@ -81,7 +83,7 @@ const flightsLayer = new VectorLayer({ } else { return null; } - } + }, }); map.addLayer(flightsLayer); @@ -117,7 +119,7 @@ function animateFlights(event) { } function addLater(feature, timeout) { - window.setTimeout(function() { + window.setTimeout(function () { feature.set('start', new Date().getTime()); flightsSource.addFeature(feature); }, timeout); diff --git a/examples/fractal.js b/examples/fractal.js index 1953c417bd..d31f4ba1e5 100644 --- a/examples/fractal.js +++ b/examples/fractal.js @@ -1,9 +1,9 @@ import Feature from '../src/ol/Feature.js'; -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import LineString from '../src/ol/geom/LineString.js'; +import Map from '../src/ol/Map.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; const radius = 10e6; const cos30 = Math.cos(Math.PI / 6); @@ -12,15 +12,18 @@ const rise = radius * sin30; const run = radius * cos30; const triangle = new LineString([ - [0, radius], [run, -rise], [-run, -rise], [0, radius] + [0, radius], + [run, -rise], + [-run, -rise], + [0, radius], ]); const feature = new Feature(triangle); const layer = new VectorLayer({ source: new VectorSource({ - features: [feature] - }) + features: [feature], + }), }); const map = new Map({ @@ -28,8 +31,8 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); function makeFractal(depth) { @@ -59,19 +62,19 @@ function injectNodes(startNode) { // first point at 1/3 along the segment const firstNode = { - point: [start[0] + dx / 3, start[1] + dy / 3] + point: [start[0] + dx / 3, start[1] + dy / 3], }; // second point at peak of _/\_ const r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30); const a = Math.atan2(dy, dx) + Math.PI / 6; const secondNode = { - point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)] + point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)], }; // third point at 2/3 along the segment const thirdNode = { - point: [end[0] - dx / 3, end[1] - dy / 3] + point: [end[0] - dx / 3, end[1] - dy / 3], }; startNode.next = firstNode; @@ -80,15 +83,14 @@ function injectNodes(startNode) { thirdNode.next = endNode; } - function coordsToGraph(coordinates) { const graph = { - point: coordinates[0] + point: coordinates[0], }; const length = coordinates.length; for (let level = 0, node = graph; level < length - 1; ++level) { node.next = { - point: coordinates[level + 1] + point: coordinates[level + 1], }; node = node.next; } @@ -111,12 +113,11 @@ function update() { let updateTimer; - /** * Regenerate fractal on depth change. Change events are debounced so updates * only occur every 200ms. */ -depthInput.onchange = function() { +depthInput.onchange = function () { window.clearTimeout(updateTimer); updateTimer = window.setTimeout(update, 200); }; diff --git a/examples/full-screen-drag-rotate-and-zoom.js b/examples/full-screen-drag-rotate-and-zoom.js index b393feac6f..10b447f739 100644 --- a/examples/full-screen-drag-rotate-and-zoom.js +++ b/examples/full-screen-drag-rotate-and-zoom.js @@ -1,35 +1,35 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, FullScreen} from '../src/ol/control.js'; -import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; - +import { + DragRotateAndZoom, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; +import {FullScreen, defaults as defaultControls} from '../src/ol/control.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const map = new Map({ - controls: defaultControls().extend([ - new FullScreen() - ]), - interactions: defaultInteractions().extend([ - new DragRotateAndZoom() - ]), + controls: defaultControls().extend([new FullScreen()]), + interactions: defaultInteractions().extend([new DragRotateAndZoom()]), layers: [ new TileLayer({ source: new XYZ({ attributions: attributions, - url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) - }) + url: + 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + }), + }), ], target: 'map', view: new View({ center: [-33519607, 5616436], rotation: -Math.PI / 8, - zoom: 8 - }) + zoom: 8, + }), }); diff --git a/examples/full-screen-source.js b/examples/full-screen-source.js index ef2f46b068..1abdaecd12 100644 --- a/examples/full-screen-source.js +++ b/examples/full-screen-source.js @@ -1,26 +1,25 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, FullScreen} from '../src/ol/control.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {FullScreen, defaults as defaultControls} from '../src/ol/control.js'; const view = new View({ center: [-9101767, 2822912], - zoom: 14 + zoom: 14, }); const map = new Map({ controls: defaultControls().extend([ new FullScreen({ - source: 'fullscreen' - }) + source: 'fullscreen', + }), ]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', - view: view + view: view, }); diff --git a/examples/full-screen.js b/examples/full-screen.js index d11a409817..d16fe12055 100644 --- a/examples/full-screen.js +++ b/examples/full-screen.js @@ -1,32 +1,31 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, FullScreen} from '../src/ol/control.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; - +import {FullScreen, defaults as defaultControls} from '../src/ol/control.js'; const view = new View({ center: [-9101767, 2822912], - zoom: 14 + zoom: 14, }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const map = new Map({ - controls: defaultControls().extend([ - new FullScreen() - ]), + controls: defaultControls().extend([new FullScreen()]), layers: [ new TileLayer({ source: new XYZ({ attributions: attributions, - url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) - }) + url: + 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + }), + }), ], target: 'map', - view: view + view: view, }); diff --git a/examples/geographic.js b/examples/geographic.js index 44adf0f95a..462847a43b 100644 --- a/examples/geographic.js +++ b/examples/geographic.js @@ -1,9 +1,9 @@ -import {useGeographic} from '../src/ol/proj.js'; -import {Map, View, Feature, Overlay} from '../src/ol/index.js'; -import {Point} from '../src/ol/geom.js'; -import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js'; +import {Circle, Fill, Style} from '../src/ol/style.js'; +import {Feature, Map, Overlay, View} from '../src/ol/index.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; -import {Style, Circle, Fill} from '../src/ol/style.js'; +import {Point} from '../src/ol/geom.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {useGeographic} from '../src/ol/proj.js'; useGeographic(); @@ -15,26 +15,24 @@ const map = new Map({ target: 'map', view: new View({ center: place, - zoom: 8 + zoom: 8, }), layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new VectorLayer({ source: new VectorSource({ - features: [ - new Feature(point) - ] + features: [new Feature(point)], }), style: new Style({ image: new Circle({ radius: 9, - fill: new Fill({color: 'red'}) - }) - }) - }) - ] + fill: new Fill({color: 'red'}), + }), + }), + }), + ], }); const element = document.getElementById('popup'); @@ -43,7 +41,7 @@ const popup = new Overlay({ element: element, positioning: 'bottom-center', stopEvent: false, - offset: [0, -10] + offset: [0, -10], }); map.addOverlay(popup); @@ -58,13 +56,13 @@ function formatCoordinate(coordinate) { } const info = document.getElementById('info'); -map.on('moveend', function() { +map.on('moveend', function () { const view = map.getView(); const center = view.getCenter(); info.innerHTML = formatCoordinate(center); }); -map.on('click', function(event) { +map.on('click', function (event) { const feature = map.getFeaturesAtPixel(event.pixel)[0]; if (feature) { const coordinate = feature.getGeometry().getCoordinates(); @@ -72,7 +70,7 @@ map.on('click', function(event) { $(element).popover({ placement: 'top', html: true, - content: formatCoordinate(coordinate) + content: formatCoordinate(coordinate), }); $(element).popover('show'); } else { @@ -80,7 +78,7 @@ map.on('click', function(event) { } }); -map.on('pointermove', function(event) { +map.on('pointermove', function (event) { if (map.hasFeatureAtPixel(event.pixel)) { map.getViewport().style.cursor = 'pointer'; } else { diff --git a/examples/geojson-vt.js b/examples/geojson-vt.js index a61ca1fd50..d5627d6f08 100644 --- a/examples/geojson-vt.js +++ b/examples/geojson-vt.js @@ -1,13 +1,16 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; import OSM from '../src/ol/source/OSM.js'; -import VectorTileSource from '../src/ol/source/VectorTile.js'; -import {Tile as TileLayer, VectorTile as VectorTileLayer} from '../src/ol/layer.js'; import Projection from '../src/ol/proj/Projection.js'; +import VectorTileSource from '../src/ol/source/VectorTile.js'; +import View from '../src/ol/View.js'; +import { + Tile as TileLayer, + VectorTile as VectorTileLayer, +} from '../src/ol/layer.js'; // Converts geojson-vt data to GeoJSON -const replacer = function(key, value) { +const replacer = function (key, value) { if (value.geometry) { let type; const rawType = value.type; @@ -37,9 +40,9 @@ const replacer = function(key, value) { 'type': 'Feature', 'geometry': { 'type': type, - 'coordinates': geometry + 'coordinates': geometry, }, - 'properties': value.tags + 'properties': value.tags, }; } else { return value; @@ -49,44 +52,53 @@ const replacer = function(key, value) { const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const url = 'data/geojson/countries.geojson'; -fetch(url).then(function(response) { - return response.json(); -}).then(function(json) { - const tileIndex = geojsonvt(json, { - extent: 4096, - debug: 1 +fetch(url) + .then(function (response) { + return response.json(); + }) + .then(function (json) { + const tileIndex = geojsonvt(json, { + extent: 4096, + debug: 1, + }); + const vectorSource = new VectorTileSource({ + format: new GeoJSON({ + // Data returned from geojson-vt is in tile pixel units + dataProjection: new Projection({ + code: 'TILE_PIXELS', + units: 'tile-pixels', + extent: [0, 0, 4096, 4096], + }), + }), + tileUrlFunction: function (tileCoord) { + const data = tileIndex.getTile( + tileCoord[0], + tileCoord[1], + tileCoord[2] + ); + const geojson = JSON.stringify( + { + type: 'FeatureCollection', + features: data ? data.features : [], + }, + replacer + ); + return 'data:application/json;charset=UTF-8,' + geojson; + }, + }); + const vectorLayer = new VectorTileLayer({ + source: vectorSource, + }); + map.addLayer(vectorLayer); }); - const vectorSource = new VectorTileSource({ - format: new GeoJSON({ - // Data returned from geojson-vt is in tile pixel units - dataProjection: new Projection({ - code: 'TILE_PIXELS', - units: 'tile-pixels', - extent: [0, 0, 4096, 4096] - }) - }), - tileUrlFunction: function(tileCoord) { - const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]); - const geojson = JSON.stringify({ - type: 'FeatureCollection', - features: data ? data.features : [] - }, replacer); - return 'data:application/json;charset=UTF-8,' + geojson; - } - }); - const vectorLayer = new VectorTileLayer({ - source: vectorSource - }); - map.addLayer(vectorLayer); -}); diff --git a/examples/geojson.js b/examples/geojson.js index 28c69856c4..19d4b46f87 100644 --- a/examples/geojson.js +++ b/examples/geojson.js @@ -1,85 +1,84 @@ +import Circle from '../src/ol/geom/Circle.js'; import Feature from '../src/ol/Feature.js'; +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; -import Circle from '../src/ol/geom/Circle.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; - +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const image = new CircleStyle({ radius: 5, fill: null, - stroke: new Stroke({color: 'red', width: 1}) + stroke: new Stroke({color: 'red', width: 1}), }); const styles = { 'Point': new Style({ - image: image + image: image, }), 'LineString': new Style({ stroke: new Stroke({ color: 'green', - width: 1 - }) + width: 1, + }), }), 'MultiLineString': new Style({ stroke: new Stroke({ color: 'green', - width: 1 - }) + width: 1, + }), }), 'MultiPoint': new Style({ - image: image + image: image, }), 'MultiPolygon': new Style({ stroke: new Stroke({ color: 'yellow', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(255, 255, 0, 0.1)' - }) + color: 'rgba(255, 255, 0, 0.1)', + }), }), 'Polygon': new Style({ stroke: new Stroke({ color: 'blue', lineDash: [4], - width: 3 + width: 3, }), fill: new Fill({ - color: 'rgba(0, 0, 255, 0.1)' - }) + color: 'rgba(0, 0, 255, 0.1)', + }), }), 'GeometryCollection': new Style({ stroke: new Stroke({ color: 'magenta', - width: 2 + width: 2, }), fill: new Fill({ - color: 'magenta' + color: 'magenta', }), image: new CircleStyle({ radius: 10, fill: null, stroke: new Stroke({ - color: 'magenta' - }) - }) + color: 'magenta', + }), + }), }), 'Circle': new Style({ stroke: new Stroke({ color: 'red', - width: 2 + width: 2, }), fill: new Fill({ - color: 'rgba(255,0,0,0.2)' - }) - }) + color: 'rgba(255,0,0,0.2)', + }), + }), }; -const styleFunction = function(feature) { +const styleFunction = function (feature) { return styles[feature.getGeometry().getType()]; }; @@ -88,93 +87,159 @@ const geojsonObject = { 'crs': { 'type': 'name', 'properties': { - 'name': 'EPSG:3857' - } + 'name': 'EPSG:3857', + }, }, - 'features': [{ - 'type': 'Feature', - 'geometry': { - 'type': 'Point', - 'coordinates': [0, 0] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'LineString', - 'coordinates': [[4e6, -2e6], [8e6, 2e6]] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'LineString', - 'coordinates': [[4e6, 2e6], [8e6, -2e6]] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'MultiLineString', - 'coordinates': [ - [[-1e6, -7.5e5], [-1e6, 7.5e5]], - [[1e6, -7.5e5], [1e6, 7.5e5]], - [[-7.5e5, -1e6], [7.5e5, -1e6]], - [[-7.5e5, 1e6], [7.5e5, 1e6]] - ] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'MultiPolygon', - 'coordinates': [ - [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]], - [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]], - [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]] - ] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'GeometryCollection', - 'geometries': [{ - 'type': 'LineString', - 'coordinates': [[-5e6, -5e6], [0, -5e6]] - }, { + 'features': [ + { + 'type': 'Feature', + 'geometry': { 'type': 'Point', - 'coordinates': [4e6, -5e6] - }, { + 'coordinates': [0, 0], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'LineString', + 'coordinates': [ + [4e6, -2e6], + [8e6, 2e6], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'LineString', + 'coordinates': [ + [4e6, 2e6], + [8e6, -2e6], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { 'type': 'Polygon', - 'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]] - }] - } - }] + 'coordinates': [ + [ + [-5e6, -1e6], + [-4e6, 1e6], + [-3e6, -1e6], + ], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'MultiLineString', + 'coordinates': [ + [ + [-1e6, -7.5e5], + [-1e6, 7.5e5], + ], + [ + [1e6, -7.5e5], + [1e6, 7.5e5], + ], + [ + [-7.5e5, -1e6], + [7.5e5, -1e6], + ], + [ + [-7.5e5, 1e6], + [7.5e5, 1e6], + ], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'MultiPolygon', + 'coordinates': [ + [ + [ + [-5e6, 6e6], + [-5e6, 8e6], + [-3e6, 8e6], + [-3e6, 6e6], + ], + ], + [ + [ + [-2e6, 6e6], + [-2e6, 8e6], + [0, 8e6], + [0, 6e6], + ], + ], + [ + [ + [1e6, 6e6], + [1e6, 8e6], + [3e6, 8e6], + [3e6, 6e6], + ], + ], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'GeometryCollection', + 'geometries': [ + { + 'type': 'LineString', + 'coordinates': [ + [-5e6, -5e6], + [0, -5e6], + ], + }, + { + 'type': 'Point', + 'coordinates': [4e6, -5e6], + }, + { + 'type': 'Polygon', + 'coordinates': [ + [ + [1e6, -6e6], + [2e6, -4e6], + [3e6, -6e6], + ], + ], + }, + ], + }, + }, + ], }; const vectorSource = new VectorSource({ - features: (new GeoJSON()).readFeatures(geojsonObject) + features: new GeoJSON().readFeatures(geojsonObject), }); vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6))); const vectorLayer = new VectorLayer({ source: vectorSource, - style: styleFunction + style: styleFunction, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), - vectorLayer + vectorLayer, ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/geolocation-orientation.js b/examples/geolocation-orientation.js index e8934cf56c..adbc9091d8 100644 --- a/examples/geolocation-orientation.js +++ b/examples/geolocation-orientation.js @@ -1,27 +1,27 @@ import Geolocation from '../src/ol/Geolocation.js'; -import Map from '../src/ol/Map.js'; -import Overlay from '../src/ol/Overlay.js'; -import View from '../src/ol/View.js'; import LineString from '../src/ol/geom/LineString.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat} from '../src/ol/proj.js'; +import Map from '../src/ol/Map.js'; import OSM from '../src/ol/source/OSM.js'; +import Overlay from '../src/ol/Overlay.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {fromLonLat} from '../src/ol/proj.js'; // creating the view const view = new View({ center: fromLonLat([5.8713, 45.6452]), - zoom: 19 + zoom: 19, }); const tileLayer = new TileLayer({ - source: new OSM() + source: new OSM(), }); // creating the map const map = new Map({ layers: [tileLayer], target: 'map', - view: view + view: view, }); // Geolocation marker @@ -29,7 +29,7 @@ const markerEl = document.getElementById('geolocation_marker'); const marker = new Overlay({ positioning: 'center-center', element: markerEl, - stopEvent: false + stopEvent: false, }); map.addOverlay(marker); @@ -44,14 +44,14 @@ const geolocation = new Geolocation({ trackingOptions: { maximumAge: 10000, enableHighAccuracy: true, - timeout: 600000 - } + timeout: 600000, + }, }); let deltaMean = 500; // the geolocation sampling period mean in ms // Listen to position changes -geolocation.on('change', function() { +geolocation.on('change', function () { const position = geolocation.getPosition(); const accuracy = geolocation.getAccuracy(); const heading = geolocation.getHeading() || 0; @@ -71,27 +71,27 @@ geolocation.on('change', function() { 'Accuracy: ' + accuracy, 'Heading: ' + Math.round(radToDeg(heading)) + '°', 'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h', - 'Delta: ' + Math.round(deltaMean) + 'ms' + 'Delta: ' + Math.round(deltaMean) + 'ms', ].join('
'); document.getElementById('info').innerHTML = html; }); -geolocation.on('error', function() { +geolocation.on('error', function () { alert('geolocation error'); // FIXME we should remove the coordinates in positions }); // convert radians to degrees function radToDeg(rad) { - return rad * 360 / (Math.PI * 2); + return (rad * 360) / (Math.PI * 2); } // convert degrees to radians function degToRad(deg) { - return deg * Math.PI * 2 / 360; + return (deg * Math.PI * 2) / 360; } // modulo for negative values function mod(n) { - return ((n % (2 * Math.PI)) + (2 * Math.PI)) % (2 * Math.PI); + return ((n % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI); } function addPosition(position, heading, m, speed) { @@ -105,7 +105,7 @@ function addPosition(position, heading, m, speed) { // force the rotation change to be less than 180° if (Math.abs(headingDiff) > Math.PI) { - const sign = (headingDiff >= 0) ? 1 : -1; + const sign = headingDiff >= 0 ? 1 : -1; headingDiff = -sign * (2 * Math.PI - Math.abs(headingDiff)); } heading = prevHeading + headingDiff; @@ -130,8 +130,8 @@ function getCenterWithHeading(position, rotation, resolution) { const height = size[1]; return [ - position[0] - Math.sin(rotation) * height * resolution * 1 / 4, - position[1] + Math.cos(rotation) * height * resolution * 1 / 4 + position[0] - (Math.sin(rotation) * height * resolution * 1) / 4, + position[1] + (Math.cos(rotation) * height * resolution * 1) / 4, ]; } @@ -153,56 +153,63 @@ function updateView() { // geolocate device const geolocateBtn = document.getElementById('geolocate'); -geolocateBtn.addEventListener('click', function() { - geolocation.setTracking(true); // Start position tracking +geolocateBtn.addEventListener( + 'click', + function () { + geolocation.setTracking(true); // Start position tracking - tileLayer.on('postrender', updateView); - map.render(); + tileLayer.on('postrender', updateView); + map.render(); - disableButtons(); -}, false); + disableButtons(); + }, + false +); // simulate device move let simulationData; const client = new XMLHttpRequest(); client.open('GET', 'data/geolocation-orientation.json'); - /** * Handle data loading. */ -client.onload = function() { +client.onload = function () { simulationData = JSON.parse(client.responseText).data; }; client.send(); const simulateBtn = document.getElementById('simulate'); -simulateBtn.addEventListener('click', function() { - const coordinates = simulationData; +simulateBtn.addEventListener( + 'click', + function () { + const coordinates = simulationData; - const first = coordinates.shift(); - simulatePositionChange(first); + const first = coordinates.shift(); + simulatePositionChange(first); - let prevDate = first.timestamp; - function geolocate() { - const position = coordinates.shift(); - if (!position) { - return; + let prevDate = first.timestamp; + function geolocate() { + const position = coordinates.shift(); + if (!position) { + return; + } + const newDate = position.timestamp; + simulatePositionChange(position); + window.setTimeout(function () { + prevDate = newDate; + geolocate(); + }, (newDate - prevDate) / 0.5); } - const newDate = position.timestamp; - simulatePositionChange(position); - window.setTimeout(function() { - prevDate = newDate; - geolocate(); - }, (newDate - prevDate) / 0.5); - } - geolocate(); + geolocate(); - tileLayer.on('postrender', updateView); - map.render(); + tileLayer.on('postrender', updateView); + map.render(); - disableButtons(); -}, false); + disableButtons(); + }, + false +); function simulatePositionChange(position) { const coords = position.coords; diff --git a/examples/geolocation.js b/examples/geolocation.js index 4ca461308f..625c25c682 100644 --- a/examples/geolocation.js +++ b/examples/geolocation.js @@ -1,45 +1,45 @@ import Feature from '../src/ol/Feature.js'; import Geolocation from '../src/ol/Geolocation.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const view = new View({ center: [0, 0], - zoom: 2 + zoom: 2, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', - view: view + view: view, }); const geolocation = new Geolocation({ // enableHighAccuracy must be set to true to have the heading value. trackingOptions: { - enableHighAccuracy: true + enableHighAccuracy: true, }, - projection: view.getProjection() + projection: view.getProjection(), }); function el(id) { return document.getElementById(id); } -el('track').addEventListener('change', function() { +el('track').addEventListener('change', function () { geolocation.setTracking(this.checked); }); // update the HTML page when the position changes. -geolocation.on('change', function() { +geolocation.on('change', function () { el('accuracy').innerText = geolocation.getAccuracy() + ' [m]'; el('altitude').innerText = geolocation.getAltitude() + ' [m]'; el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]'; @@ -48,40 +48,41 @@ geolocation.on('change', function() { }); // handle geolocation error. -geolocation.on('error', function(error) { +geolocation.on('error', function (error) { const info = document.getElementById('info'); info.innerHTML = error.message; info.style.display = ''; }); const accuracyFeature = new Feature(); -geolocation.on('change:accuracyGeometry', function() { +geolocation.on('change:accuracyGeometry', function () { accuracyFeature.setGeometry(geolocation.getAccuracyGeometry()); }); const positionFeature = new Feature(); -positionFeature.setStyle(new Style({ - image: new CircleStyle({ - radius: 6, - fill: new Fill({ - color: '#3399CC' +positionFeature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 6, + fill: new Fill({ + color: '#3399CC', + }), + stroke: new Stroke({ + color: '#fff', + width: 2, + }), }), - stroke: new Stroke({ - color: '#fff', - width: 2 - }) }) -})); +); -geolocation.on('change:position', function() { +geolocation.on('change:position', function () { const coordinates = geolocation.getPosition(); - positionFeature.setGeometry(coordinates ? - new Point(coordinates) : null); + positionFeature.setGeometry(coordinates ? new Point(coordinates) : null); }); new VectorLayer({ map: map, source: new VectorSource({ - features: [accuracyFeature, positionFeature] - }) + features: [accuracyFeature, positionFeature], + }), }); diff --git a/examples/getfeatureinfo-image.js b/examples/getfeatureinfo-image.js index 109b2eabea..aa2cc832d7 100644 --- a/examples/getfeatureinfo-image.js +++ b/examples/getfeatureinfo-image.js @@ -1,37 +1,39 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import ImageLayer from '../src/ol/layer/Image.js'; import ImageWMS from '../src/ol/source/ImageWMS.js'; - +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; const wmsSource = new ImageWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'ne:ne'}, serverType: 'geoserver', - crossOrigin: 'anonymous' + crossOrigin: 'anonymous', }); const wmsLayer = new ImageLayer({ - source: wmsSource + source: wmsSource, }); const view = new View({ center: [0, 0], - zoom: 1 + zoom: 1, }); const map = new Map({ layers: [wmsLayer], target: 'map', - view: view + view: view, }); -map.on('singleclick', function(evt) { +map.on('singleclick', function (evt) { document.getElementById('info').innerHTML = ''; const viewResolution = /** @type {number} */ (view.getResolution()); const url = wmsSource.getFeatureInfoUrl( - evt.coordinate, viewResolution, 'EPSG:3857', - {'INFO_FORMAT': 'text/html'}); + evt.coordinate, + viewResolution, + 'EPSG:3857', + {'INFO_FORMAT': 'text/html'} + ); if (url) { fetch(url) .then((response) => response.text()) @@ -41,12 +43,12 @@ map.on('singleclick', function(evt) { } }); -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } const pixel = map.getEventPixel(evt.originalEvent); - const hit = map.forEachLayerAtPixel(pixel, function() { + const hit = map.forEachLayerAtPixel(pixel, function () { return true; }); map.getTargetElement().style.cursor = hit ? 'pointer' : ''; diff --git a/examples/getfeatureinfo-layers.js b/examples/getfeatureinfo-layers.js index f3e779bd9e..650ed91f55 100644 --- a/examples/getfeatureinfo-layers.js +++ b/examples/getfeatureinfo-layers.js @@ -1,23 +1,27 @@ import WMSGetFeatureInfo from '../src/ol/format/WMSGetFeatureInfo.js'; -fetch('data/wmsgetfeatureinfo/osm-restaurant-hotel.xml').then(function(response) { - return response.text(); -}).then(function(response) { +fetch('data/wmsgetfeatureinfo/osm-restaurant-hotel.xml') + .then(function (response) { + return response.text(); + }) + .then(function (response) { + // this is the standard way to read the features + const allFeatures = new WMSGetFeatureInfo().readFeatures(response); + document.getElementById('all').innerText = allFeatures.length.toString(); - // this is the standard way to read the features - const allFeatures = new WMSGetFeatureInfo().readFeatures(response); - document.getElementById('all').innerText = allFeatures.length.toString(); + // when specifying the 'layers' options, only the features of those + // layers are returned by the format + const hotelFeatures = new WMSGetFeatureInfo({ + layers: ['hotel'], + }).readFeatures(response); + document.getElementById( + 'hotel' + ).innerText = hotelFeatures.length.toString(); - // when specifying the 'layers' options, only the features of those - // layers are returned by the format - const hotelFeatures = new WMSGetFeatureInfo({ - layers: ['hotel'] - }).readFeatures(response); - document.getElementById('hotel').innerText = hotelFeatures.length.toString(); - - const restaurantFeatures = new WMSGetFeatureInfo({ - layers: ['restaurant'] - }).readFeatures(response); - document.getElementById('restaurant').innerText = restaurantFeatures.length.toString(); - -}); + const restaurantFeatures = new WMSGetFeatureInfo({ + layers: ['restaurant'], + }).readFeatures(response); + document.getElementById( + 'restaurant' + ).innerText = restaurantFeatures.length.toString(); + }); diff --git a/examples/getfeatureinfo-tile.js b/examples/getfeatureinfo-tile.js index 574535bbe4..db354c3808 100644 --- a/examples/getfeatureinfo-tile.js +++ b/examples/getfeatureinfo-tile.js @@ -1,37 +1,39 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; import TileWMS from '../src/ol/source/TileWMS.js'; - +import View from '../src/ol/View.js'; const wmsSource = new TileWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'ne:ne', 'TILED': true}, serverType: 'geoserver', - crossOrigin: 'anonymous' + crossOrigin: 'anonymous', }); const wmsLayer = new TileLayer({ - source: wmsSource + source: wmsSource, }); const view = new View({ center: [0, 0], - zoom: 1 + zoom: 1, }); const map = new Map({ layers: [wmsLayer], target: 'map', - view: view + view: view, }); -map.on('singleclick', function(evt) { +map.on('singleclick', function (evt) { document.getElementById('info').innerHTML = ''; const viewResolution = /** @type {number} */ (view.getResolution()); const url = wmsSource.getFeatureInfoUrl( - evt.coordinate, viewResolution, 'EPSG:3857', - {'INFO_FORMAT': 'text/html'}); + evt.coordinate, + viewResolution, + 'EPSG:3857', + {'INFO_FORMAT': 'text/html'} + ); if (url) { fetch(url) .then((response) => response.text()) @@ -41,12 +43,12 @@ map.on('singleclick', function(evt) { } }); -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } const pixel = map.getEventPixel(evt.originalEvent); - const hit = map.forEachLayerAtPixel(pixel, function() { + const hit = map.forEachLayerAtPixel(pixel, function () { return true; }); map.getTargetElement().style.cursor = hit ? 'pointer' : ''; diff --git a/examples/gpx.js b/examples/gpx.js index 7570048b55..60803a680b 100644 --- a/examples/gpx.js +++ b/examples/gpx.js @@ -1,58 +1,59 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GPX from '../src/ol/format/GPX.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import XYZ from '../src/ol/source/XYZ.js'; +import Map from '../src/ol/Map.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const raster = new TileLayer({ source: new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) + maxZoom: 20, + }), }); const style = { 'Point': new Style({ image: new CircleStyle({ fill: new Fill({ - color: 'rgba(255,255,0,0.4)' + color: 'rgba(255,255,0,0.4)', }), radius: 5, stroke: new Stroke({ color: '#ff0', - width: 1 - }) - }) + width: 1, + }), + }), }), 'LineString': new Style({ stroke: new Stroke({ color: '#f00', - width: 3 - }) + width: 3, + }), }), 'MultiLineString': new Style({ stroke: new Stroke({ color: '#0f0', - width: 3 - }) - }) + width: 3, + }), + }), }; const vector = new VectorLayer({ source: new VectorSource({ url: 'data/gpx/fells_loop.gpx', - format: new GPX() + format: new GPX(), }), - style: function(feature) { + style: function (feature) { return style[feature.getGeometry().getType()]; - } + }, }); const map = new Map({ @@ -60,13 +61,13 @@ const map = new Map({ target: document.getElementById('map'), view: new View({ center: [-7916041.528716288, 5228379.045749711], - zoom: 12 - }) + zoom: 12, + }), }); -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { const features = []; - map.forEachFeatureAtPixel(pixel, function(feature) { + map.forEachFeatureAtPixel(pixel, function (feature) { features.push(feature); }); if (features.length > 0) { @@ -83,7 +84,7 @@ const displayFeatureInfo = function(pixel) { } }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -91,6 +92,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/graticule.js b/examples/graticule.js index 32d2196b9b..812829c054 100644 --- a/examples/graticule.js +++ b/examples/graticule.js @@ -1,33 +1,32 @@ import Graticule from '../src/ol/layer/Graticule.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat} from '../src/ol/proj.js'; import OSM from '../src/ol/source/OSM.js'; import Stroke from '../src/ol/style/Stroke.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {fromLonLat} from '../src/ol/proj.js'; const map = new Map({ layers: [ new TileLayer({ source: new OSM({ - wrapX: false - }) + wrapX: false, + }), }), 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] + lineDash: [0.5, 4], }), showLabels: true, - wrapX: false - }) + wrapX: false, + }), ], target: 'map', view: new View({ center: fromLonLat([4.8, 47.75]), - zoom: 5 - }) + zoom: 5, + }), }); diff --git a/examples/heatmap-earthquakes.js b/examples/heatmap-earthquakes.js index 93256ab1a8..c07661b088 100644 --- a/examples/heatmap-earthquakes.js +++ b/examples/heatmap-earthquakes.js @@ -1,9 +1,9 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import KML from '../src/ol/format/KML.js'; -import {Heatmap as HeatmapLayer, Tile as TileLayer} from '../src/ol/layer.js'; +import Map from '../src/ol/Map.js'; import Stamen from '../src/ol/source/Stamen.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import {Heatmap as HeatmapLayer, Tile as TileLayer} from '../src/ol/layer.js'; const blur = document.getElementById('blur'); const radius = document.getElementById('radius'); @@ -12,25 +12,25 @@ const vector = new HeatmapLayer({ source: new VectorSource({ url: 'data/kml/2012_Earthquakes_Mag5.kml', format: new KML({ - extractStyles: false - }) + extractStyles: false, + }), }), blur: parseInt(blur.value, 10), radius: parseInt(radius.value, 10), - weight: function(feature) { + weight: function (feature) { // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a // standards-violating tag in each Placemark. We extract it from // the Placemark's name instead. const name = feature.get('name'); const magnitude = parseFloat(name.substr(2)); return magnitude - 5; - } + }, }); const raster = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); new Map({ @@ -38,17 +38,17 @@ new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -const blurHandler = function() { +const blurHandler = function () { vector.setBlur(parseInt(blur.value, 10)); }; blur.addEventListener('input', blurHandler); blur.addEventListener('change', blurHandler); -const radiusHandler = function() { +const radiusHandler = function () { vector.setRadius(parseInt(radius.value, 10)); }; radius.addEventListener('input', radiusHandler); diff --git a/examples/here-maps.js b/examples/here-maps.js index 94112d64b1..341ae2bb10 100644 --- a/examples/here-maps.js +++ b/examples/here-maps.js @@ -1,6 +1,6 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; const appId = 'kDm0Jq1K4Ak7Bwtn8uvk'; @@ -11,60 +11,66 @@ const hereLayers = [ type: 'maptile', scheme: 'normal.day', app_id: appId, - app_code: appCode + app_code: appCode, }, { base: 'base', type: 'maptile', scheme: 'normal.day.transit', app_id: appId, - app_code: appCode + app_code: appCode, }, { base: 'base', type: 'maptile', scheme: 'pedestrian.day', app_id: appId, - app_code: appCode + app_code: appCode, }, { base: 'aerial', type: 'maptile', scheme: 'terrain.day', app_id: appId, - app_code: appCode + app_code: appCode, }, { base: 'aerial', type: 'maptile', scheme: 'satellite.day', app_id: appId, - app_code: appCode + app_code: appCode, }, { base: 'aerial', type: 'maptile', scheme: 'hybrid.day', app_id: appId, - app_code: appCode - } + app_code: appCode, + }, ]; -const urlTpl = 'https://{1-4}.{base}.maps.cit.api.here.com' + +const urlTpl = + 'https://{1-4}.{base}.maps.cit.api.here.com' + '/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' + '?app_id={app_id}&app_code={app_code}'; const layers = []; let i, ii; for (i = 0, ii = hereLayers.length; i < ii; ++i) { const layerDesc = hereLayers[i]; - layers.push(new TileLayer({ - visible: false, - preload: Infinity, - source: new XYZ({ - url: createUrl(urlTpl, layerDesc), - attributions: 'Map Tiles © ' + new Date().getFullYear() + ' ' + - 'HERE' + layers.push( + new TileLayer({ + visible: false, + preload: Infinity, + source: new XYZ({ + url: createUrl(urlTpl, layerDesc), + attributions: + 'Map Tiles © ' + + new Date().getFullYear() + + ' ' + + 'HERE', + }), }) - })); + ); } const map = new Map({ @@ -72,8 +78,8 @@ const map = new Map({ target: 'map', view: new View({ center: [921371.9389, 6358337.7609], - zoom: 10 - }) + zoom: 10, + }), }); function createUrl(tpl, layerDesc) { diff --git a/examples/hit-tolerance.js b/examples/hit-tolerance.js index a337485f8e..443abb7ee5 100644 --- a/examples/hit-tolerance.js +++ b/examples/hit-tolerance.js @@ -1,29 +1,34 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import Feature from '../src/ol/Feature.js'; import LineString from '../src/ol/geom/LineString.js'; +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import {Stroke, Style} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const style = new Style({ stroke: new Stroke({ color: 'black', - width: 1 - }) + width: 1, + }), }); -const feature = new Feature(new LineString([[-4000000, 0], [4000000, 0]])); +const feature = new Feature( + new LineString([ + [-4000000, 0], + [4000000, 0], + ]) +); const vector = new VectorLayer({ source: new VectorSource({ - features: [feature] + features: [feature], }), - style: style + style: style, }); const map = new Map({ @@ -31,21 +36,25 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); let hitTolerance; const statusElement = document.getElementById('status'); -map.on('singleclick', function(e) { +map.on('singleclick', function (e) { let hit = false; - map.forEachFeatureAtPixel(e.pixel, function() { - hit = true; - }, { - hitTolerance: hitTolerance - }); + map.forEachFeatureAtPixel( + e.pixel, + function () { + hit = true; + }, + { + hitTolerance: hitTolerance, + } + ); if (hit) { style.getStroke().setColor('green'); statusElement.innerHTML = ' A feature got hit!'; @@ -59,7 +68,7 @@ map.on('singleclick', function(e) { const selectHitToleranceElement = document.getElementById('hitTolerance'); const circleCanvas = document.getElementById('circle'); -const changeHitTolerance = function() { +const changeHitTolerance = function () { hitTolerance = parseInt(selectHitToleranceElement.value, 10); const size = 2 * hitTolerance + 2; @@ -68,7 +77,13 @@ const changeHitTolerance = function() { const ctx = circleCanvas.getContext('2d'); ctx.clearRect(0, 0, size, size); ctx.beginPath(); - ctx.arc(hitTolerance + 1, hitTolerance + 1, hitTolerance + 0.5, 0, 2 * Math.PI); + ctx.arc( + hitTolerance + 1, + hitTolerance + 1, + hitTolerance + 0.5, + 0, + 2 * Math.PI + ); ctx.fill(); ctx.stroke(); }; diff --git a/examples/hitdetect-vector.js b/examples/hitdetect-vector.js index d09cc96c4e..df9620f014 100644 --- a/examples/hitdetect-vector.js +++ b/examples/hitdetect-vector.js @@ -1,40 +1,39 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Stroke, Style, Text} from '../src/ol/style.js'; - const style = new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.6)' + color: 'rgba(255, 255, 255, 0.6)', }), stroke: new Stroke({ color: '#319FD3', - width: 1 + width: 1, }), text: new Text({ font: '12px Calibri,sans-serif', fill: new Fill({ - color: '#000' + color: '#000', }), stroke: new Stroke({ color: '#fff', - width: 3 - }) - }) + width: 3, + }), + }), }); const vectorLayer = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: function(feature) { + style: function (feature) { style.getText().setText(feature.get('name')); return style; - } + }, }); const map = new Map({ @@ -42,43 +41,42 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); const highlightStyle = new Style({ stroke: new Stroke({ color: '#f00', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(255,0,0,0.1)' + color: 'rgba(255,0,0,0.1)', }), text: new Text({ font: '12px Calibri,sans-serif', fill: new Fill({ - color: '#000' + color: '#000', }), stroke: new Stroke({ color: '#f00', - width: 3 - }) - }) + width: 3, + }), + }), }); const featureOverlay = new VectorLayer({ source: new VectorSource(), map: map, - style: function(feature) { + style: function (feature) { highlightStyle.getText().setText(feature.get('name')); return highlightStyle; - } + }, }); let highlight; -const displayFeatureInfo = function(pixel) { - - vectorLayer.getFeatures(pixel).then(function(features) { +const displayFeatureInfo = function (pixel) { + vectorLayer.getFeatures(pixel).then(function (features) { const feature = features.length ? features[0] : undefined; const info = document.getElementById('info'); if (features.length) { @@ -97,10 +95,9 @@ const displayFeatureInfo = function(pixel) { highlight = feature; } }); - }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -108,6 +105,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/icon-color.js b/examples/icon-color.js index 11b30dd50e..098319a119 100644 --- a/examples/icon-color.js +++ b/examples/icon-color.js @@ -1,72 +1,76 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {fromLonLat} from '../src/ol/proj.js'; import TileJSON from '../src/ol/source/TileJSON.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Icon, Style} from '../src/ol/style.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {fromLonLat} from '../src/ol/proj.js'; const rome = new Feature({ - geometry: new Point(fromLonLat([12.5, 41.9])) + geometry: new Point(fromLonLat([12.5, 41.9])), }); const london = new Feature({ - geometry: new Point(fromLonLat([-0.12755, 51.507222])) + geometry: new Point(fromLonLat([-0.12755, 51.507222])), }); const madrid = new Feature({ - geometry: new Point(fromLonLat([-3.683333, 40.4])) + geometry: new Point(fromLonLat([-3.683333, 40.4])), }); -rome.setStyle(new Style({ - image: new Icon({ - color: '#8959A8', - crossOrigin: 'anonymous', - imgSize: [20, 20], - src: 'data/square.svg' +rome.setStyle( + new Style({ + image: new Icon({ + color: '#8959A8', + crossOrigin: 'anonymous', + imgSize: [20, 20], + src: 'data/square.svg', + }), }) -})); +); -london.setStyle(new Style({ - image: new Icon({ - color: '#4271AE', - crossOrigin: 'anonymous', - src: 'data/dot.png' +london.setStyle( + new Style({ + image: new Icon({ + color: '#4271AE', + crossOrigin: 'anonymous', + src: 'data/dot.png', + }), }) -})); +); -madrid.setStyle(new Style({ - image: new Icon({ - color: [113, 140, 0], - crossOrigin: 'anonymous', - src: 'data/dot.png' +madrid.setStyle( + new Style({ + image: new Icon({ + color: [113, 140, 0], + crossOrigin: 'anonymous', + src: 'data/dot.png', + }), }) -})); - +); const vectorSource = new VectorSource({ - features: [rome, london, madrid] + features: [rome, london, madrid], }); const vectorLayer = new VectorLayer({ - source: vectorSource + source: vectorSource, }); const rasterLayer = new TileLayer({ source: new TileJSON({ url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json', - crossOrigin: '' - }) + crossOrigin: '', + }), }); const map = new Map({ layers: [rasterLayer, vectorLayer], target: document.getElementById('map'), view: new View({ - center: fromLonLat([2.896372, 44.60240]), - zoom: 3 - }) + center: fromLonLat([2.896372, 44.6024]), + zoom: 3, + }), }); diff --git a/examples/icon-negative.js b/examples/icon-negative.js index dfa83db624..3380580d18 100644 --- a/examples/icon-negative.js +++ b/examples/icon-negative.js @@ -1,13 +1,12 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; import Select from '../src/ol/interaction/Select.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import Stamen from '../src/ol/source/Stamen.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Icon, Style} from '../src/ol/style.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; function createStyle(src, img) { return new Style({ @@ -16,8 +15,8 @@ function createStyle(src, img) { crossOrigin: 'anonymous', src: src, img: img, - imgSize: img ? [img.width, img.height] : undefined - }) + imgSize: img ? [img.width, img.height] : undefined, + }), }); } @@ -27,25 +26,25 @@ iconFeature.set('style', createStyle('data/icon.png', undefined)); const map = new Map({ layers: [ new TileLayer({ - source: new Stamen({layer: 'watercolor'}) + source: new Stamen({layer: 'watercolor'}), }), new VectorLayer({ - style: function(feature) { + style: function (feature) { return feature.get('style'); }, - source: new VectorSource({features: [iconFeature]}) - }) + source: new VectorSource({features: [iconFeature]}), + }), ], target: document.getElementById('map'), view: new View({ center: [0, 0], - zoom: 3 - }) + zoom: 3, + }), }); const selectStyle = {}; const select = new Select({ - style: function(feature) { + style: function (feature) { const image = feature.get('style').getImage().getImage(); if (!selectStyle[image.src]) { const canvas = document.createElement('canvas'); @@ -62,11 +61,12 @@ const select = new Select({ selectStyle[image.src] = createStyle(undefined, canvas); } return selectStyle[image.src]; - } + }, }); map.addInteraction(select); -map.on('pointermove', function(evt) { - map.getTargetElement().style.cursor = - map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : ''; +map.on('pointermove', function (evt) { + map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) + ? 'pointer' + : ''; }); diff --git a/examples/icon-sprite-webgl.js b/examples/icon-sprite-webgl.js index ce2adb7649..4a09fb18dc 100644 --- a/examples/icon-sprite-webgl.js +++ b/examples/icon-sprite-webgl.js @@ -1,34 +1,37 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import TileJSON from '../src/ol/source/TileJSON.js'; import Feature from '../src/ol/Feature.js'; +import Map from '../src/ol/Map.js'; import Point from '../src/ol/geom/Point.js'; +import TileJSON from '../src/ol/source/TileJSON.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js'; import {Vector} from '../src/ol/source.js'; import {fromLonLat} from '../src/ol/proj.js'; -import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js'; -const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; +const key = + 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; const map = new Map({ layers: [ new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + key, - crossOrigin: 'anonymous' - }) - }) + url: + 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + + key, + crossOrigin: 'anonymous', + }), + }), ], target: document.getElementById('map'), view: new View({ center: [0, 4000000], - zoom: 2 - }) + zoom: 2, + }), }); const vectorSource = new Vector({ features: [], - attributions: 'National UFO Reporting Center' + attributions: 'National UFO Reporting Center', }); const oldColor = [255, 160, 110]; @@ -37,13 +40,13 @@ const size = 16; const style = { variables: { - filterShape: 'all' + filterShape: 'all', }, filter: [ 'case', ['!=', ['var', 'filterShape'], 'all'], ['==', ['get', 'shape'], ['var', 'filterShape']], - true + true, ], symbol: { symbolType: 'image', @@ -53,44 +56,51 @@ const style = { 'interpolate', ['linear'], ['get', 'year'], - 1950, oldColor, - 2013, newColor + 1950, + oldColor, + 2013, + newColor, ], rotateWithView: false, - offset: [ - 0, - 0 - ], + offset: [0, 0], textureCoord: [ 'match', ['get', 'shape'], - 'light', [0, 0, 0.25, 0.5], - 'sphere', [0.25, 0, 0.5, 0.5], - 'circle', [0.25, 0, 0.5, 0.5], - 'disc', [0.5, 0, 0.75, 0.5], - 'oval', [0.5, 0, 0.75, 0.5], - 'triangle', [0.75, 0, 1, 0.5], - 'fireball', [0, 0.5, 0.25, 1], - [0.75, 0.5, 1, 1] - ] - } + 'light', + [0, 0, 0.25, 0.5], + 'sphere', + [0.25, 0, 0.5, 0.5], + 'circle', + [0.25, 0, 0.5, 0.5], + 'disc', + [0.5, 0, 0.75, 0.5], + 'oval', + [0.5, 0, 0.75, 0.5], + 'triangle', + [0.75, 0, 1, 0.5], + 'fireball', + [0, 0.5, 0.25, 1], + [0.75, 0.5, 1, 1], + ], + }, }; // key is shape name, value is sightings count const shapeTypes = { - all: 0 + all: 0, }; const shapeSelect = document.getElementById('shape-filter'); -shapeSelect.addEventListener('input', function() { - style.variables.filterShape = shapeSelect.options[shapeSelect.selectedIndex].value; +shapeSelect.addEventListener('input', function () { + style.variables.filterShape = + shapeSelect.options[shapeSelect.selectedIndex].value; map.render(); }); function fillShapeSelect() { Object.keys(shapeTypes) - .sort(function(a, b) { + .sort(function (a, b) { return shapeTypes[b] - shapeTypes[a]; }) - .forEach(function(shape) { + .forEach(function (shape) { const option = document.createElement('option'); option.text = `${shape} (${shapeTypes[shape]} sightings)`; option.value = shape; @@ -100,7 +110,7 @@ function fillShapeSelect() { const client = new XMLHttpRequest(); client.open('GET', 'data/csv/ufo_sighting_data.csv'); -client.onload = function() { +client.onload = function () { const csv = client.responseText; const features = []; @@ -122,13 +132,15 @@ client.onload = function() { shapeTypes[shape] = (shapeTypes[shape] ? shapeTypes[shape] : 0) + 1; shapeTypes['all']++; - features.push(new Feature({ - datetime: line[0], - year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int - shape: shape, - duration: line[3], - geometry: new Point(coords) - })); + features.push( + new Feature({ + datetime: line[0], + year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int + shape: shape, + duration: line[3], + geometry: new Point(coords), + }) + ); } vectorSource.addFeatures(features); fillShapeSelect(); @@ -138,21 +150,28 @@ client.send(); map.addLayer( new WebGLPointsLayer({ source: vectorSource, - style: style + style: style, }) ); const info = document.getElementById('info'); -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (map.getView().getInteracting() || map.getView().getAnimating()) { return; } const pixel = evt.pixel; info.innerText = ''; - map.forEachFeatureAtPixel(pixel, function(feature) { + map.forEachFeatureAtPixel(pixel, function (feature) { const datetime = feature.get('datetime'); const duration = feature.get('duration'); const shape = feature.get('shape'); - info.innerText = 'On ' + datetime + ', lasted ' + duration + ' seconds and had a "' + shape + '" shape.'; + info.innerText = + 'On ' + + datetime + + ', lasted ' + + duration + + ' seconds and had a "' + + shape + + '" shape.'; }); }); diff --git a/examples/icon.js b/examples/icon.js index cb427a5984..1c9a79a0b3 100644 --- a/examples/icon.js +++ b/examples/icon.js @@ -1,19 +1,18 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; import Overlay from '../src/ol/Overlay.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import TileJSON from '../src/ol/source/TileJSON.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Icon, Style} from '../src/ol/style.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const iconFeature = new Feature({ geometry: new Point([0, 0]), name: 'Null Island', population: 4000, - rainfall: 500 + rainfall: 500, }); const iconStyle = new Style({ @@ -21,25 +20,25 @@ const iconStyle = new Style({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', - src: 'data/icon.png' - }) + src: 'data/icon.png', + }), }); iconFeature.setStyle(iconStyle); const vectorSource = new VectorSource({ - features: [iconFeature] + features: [iconFeature], }); const vectorLayer = new VectorLayer({ - source: vectorSource + source: vectorSource, }); const rasterLayer = new TileLayer({ source: new TileJSON({ url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json', - crossOrigin: '' - }) + crossOrigin: '', + }), }); const map = new Map({ @@ -47,8 +46,8 @@ const map = new Map({ target: document.getElementById('map'), view: new View({ center: [0, 0], - zoom: 3 - }) + zoom: 3, + }), }); const element = document.getElementById('popup'); @@ -57,23 +56,22 @@ const popup = new Overlay({ element: element, positioning: 'bottom-center', stopEvent: false, - offset: [0, -50] + offset: [0, -50], }); map.addOverlay(popup); // display popup on click -map.on('click', function(evt) { - const feature = map.forEachFeatureAtPixel(evt.pixel, - function(feature) { - return feature; - }); +map.on('click', function (evt) { + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); if (feature) { const coordinates = feature.getGeometry().getCoordinates(); popup.setPosition(coordinates); $(element).popover({ placement: 'top', html: true, - content: feature.get('name') + content: feature.get('name'), }); $(element).popover('show'); } else { @@ -82,7 +80,7 @@ map.on('click', function(evt) { }); // change mouse cursor when over marker -map.on('pointermove', function(e) { +map.on('pointermove', function (e) { if (e.dragging) { $(element).popover('destroy'); return; diff --git a/examples/igc.js b/examples/igc.js index 261108f59a..9fb6719696 100644 --- a/examples/igc.js +++ b/examples/igc.js @@ -1,33 +1,32 @@ import Feature from '../src/ol/Feature.js'; -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import IGC from '../src/ol/format/IGC.js'; -import {LineString, Point} from '../src/ol/geom.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import Map from '../src/ol/Map.js'; import OSM, {ATTRIBUTION} from '../src/ol/source/OSM.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {LineString, Point} from '../src/ol/geom.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {getVectorContext} from '../src/ol/render.js'; - const colors = { 'Clement Latour': 'rgba(0, 0, 255, 0.7)', 'Damien de Baesnt': 'rgba(0, 215, 255, 0.7)', 'Sylvain Dhonneur': 'rgba(0, 165, 255, 0.7)', 'Tom Payne': 'rgba(0, 255, 255, 0.7)', - 'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)' + 'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)', }; const styleCache = {}; -const styleFunction = function(feature) { +const styleFunction = function (feature) { const color = colors[feature.get('PLT')]; let style = styleCache[color]; if (!style) { style = new Style({ stroke: new Stroke({ color: color, - width: 3 - }) + width: 3, + }), }); styleCache[color] = style; } @@ -41,13 +40,13 @@ const igcUrls = [ 'data/igc/Damien-de-Baenst.igc', 'data/igc/Sylvain-Dhonneur.igc', 'data/igc/Tom-Payne.igc', - 'data/igc/Ulrich-Prinz.igc' + 'data/igc/Ulrich-Prinz.igc', ]; function get(url, callback) { const client = new XMLHttpRequest(); client.open('GET', url); - client.onload = function() { + client.onload = function () { callback(client.responseText); }; client.send(); @@ -55,9 +54,10 @@ function get(url, callback) { const igcFormat = new IGC(); for (let i = 0; i < igcUrls.length; ++i) { - get(igcUrls[i], function(data) { - const features = igcFormat.readFeatures(data, - {featureProjection: 'EPSG:3857'}); + get(igcUrls[i], function (data) { + const features = igcFormat.readFeatures(data, { + featureProjection: 'EPSG:3857', + }); vectorSource.addFeatures(features); }); } @@ -65,9 +65,9 @@ for (let i = 0; i < igcUrls.length; ++i) { const time = { start: Infinity, stop: -Infinity, - duration: 0 + duration: 0, }; -vectorSource.on('addfeature', function(event) { +vectorSource.on('addfeature', function (event) { const geometry = event.feature.getGeometry(); time.start = Math.min(time.start, geometry.getFirstCoordinate()[2]); time.stop = Math.max(time.stop, geometry.getLastCoordinate()[2]); @@ -76,7 +76,7 @@ vectorSource.on('addfeature', function(event) { const vectorLayer = new VectorLayer({ source: vectorSource, - style: styleFunction + style: styleFunction, }); const map = new Map({ @@ -85,25 +85,25 @@ const map = new Map({ source: new OSM({ attributions: [ 'All maps © OpenCycleMap', - ATTRIBUTION + ATTRIBUTION, ], - url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + - '?apikey=0e6fc415256d4fbb9b5166a718591d71' - }) + url: + 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + + '?apikey=0e6fc415256d4fbb9b5166a718591d71', + }), }), - vectorLayer + vectorLayer, ], target: 'map', view: new View({ center: [703365.7089403362, 5714629.865071137], - zoom: 9 - }) + zoom: 9, + }), }); - let point = null; let line = null; -const displaySnap = function(coordinate) { +const displaySnap = function (coordinate) { const closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate); const info = document.getElementById('info'); if (closestFeature === null) { @@ -120,7 +120,7 @@ const displaySnap = function(coordinate) { } const date = new Date(closestPoint[2] * 1000); info.innerHTML = - closestFeature.get('PLT') + ' (' + date.toUTCString() + ')'; + closestFeature.get('PLT') + ' (' + date.toUTCString() + ')'; const coordinates = [coordinate, [closestPoint[0], closestPoint[1]]]; if (line === null) { line = new LineString(coordinates); @@ -131,7 +131,7 @@ const displaySnap = function(coordinate) { map.render(); }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -139,23 +139,23 @@ map.on('pointermove', function(evt) { displaySnap(coordinate); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displaySnap(evt.coordinate); }); const stroke = new Stroke({ color: 'rgba(255,0,0,0.9)', - width: 1 + width: 1, }); const style = new Style({ stroke: stroke, image: new CircleStyle({ radius: 5, fill: null, - stroke: stroke - }) + stroke: stroke, + }), }); -vectorLayer.on('postrender', function(evt) { +vectorLayer.on('postrender', function (evt) { const vectorContext = getVectorContext(evt); vectorContext.setStyle(style); if (point !== null) { @@ -173,16 +173,16 @@ const featureOverlay = new VectorLayer({ image: new CircleStyle({ radius: 5, fill: new Fill({ - color: 'rgba(255,0,0,0.9)' - }) - }) - }) + color: 'rgba(255,0,0,0.9)', + }), + }), + }), }); -document.getElementById('time').addEventListener('input', function() { +document.getElementById('time').addEventListener('input', function () { const value = parseInt(this.value, 10) / 100; - const m = time.start + (time.duration * value); - vectorSource.forEachFeature(function(feature) { + const m = time.start + time.duration * value; + vectorSource.forEachFeature(function (feature) { const geometry = /** @type {import("../src/ol/geom/LineString.js").default} */ (feature.getGeometry()); const coordinate = geometry.getCoordinateAtM(m, true); let highlight = feature.get('highlight'); diff --git a/examples/iiif.js b/examples/iiif.js index b2fc4e4e59..882e67fcbc 100644 --- a/examples/iiif.js +++ b/examples/iiif.js @@ -1,45 +1,53 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import IIIF from '../src/ol/source/IIIF.js'; import IIIFInfo from '../src/ol/format/IIIFInfo.js'; +import Map from '../src/ol/Map.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const layer = new TileLayer(), - map = new Map({ - layers: [layer], - target: 'map' - }), - notifyDiv = document.getElementById('iiif-notification'), - urlInput = document.getElementById('imageInfoUrl'), - displayButton = document.getElementById('display'); + map = new Map({ + layers: [layer], + target: 'map', + }), + notifyDiv = document.getElementById('iiif-notification'), + urlInput = document.getElementById('imageInfoUrl'), + displayButton = document.getElementById('display'); function refreshMap(imageInfoUrl) { - fetch(imageInfoUrl).then(function(response) { - response.json().then(function(imageInfo) { - const options = new IIIFInfo(imageInfo).getTileSourceOptions(); - if (options === undefined || options.version === undefined) { - notifyDiv.textContent = 'Data seems to be no valid IIIF image information.'; - return; - } - options.zDirection = -1; - const iiifTileSource = new IIIF(options); - layer.setSource(iiifTileSource); - map.setView(new View({ - resolutions: iiifTileSource.getTileGrid().getResolutions(), - extent: iiifTileSource.getTileGrid().getExtent(), - constrainOnlyCenter: true - })); - map.getView().fit(iiifTileSource.getTileGrid().getExtent()); - notifyDiv.textContent = ''; - }).catch(function(body) { - notifyDiv.textContent = 'Could not read image info json. ' + body; + fetch(imageInfoUrl) + .then(function (response) { + response + .json() + .then(function (imageInfo) { + const options = new IIIFInfo(imageInfo).getTileSourceOptions(); + if (options === undefined || options.version === undefined) { + notifyDiv.textContent = + 'Data seems to be no valid IIIF image information.'; + return; + } + options.zDirection = -1; + const iiifTileSource = new IIIF(options); + layer.setSource(iiifTileSource); + map.setView( + new View({ + resolutions: iiifTileSource.getTileGrid().getResolutions(), + extent: iiifTileSource.getTileGrid().getExtent(), + constrainOnlyCenter: true, + }) + ); + map.getView().fit(iiifTileSource.getTileGrid().getExtent()); + notifyDiv.textContent = ''; + }) + .catch(function (body) { + notifyDiv.textContent = 'Could not read image info json. ' + body; + }); + }) + .catch(function () { + notifyDiv.textContent = 'Could not read data from URL.'; }); - }).catch(function() { - notifyDiv.textContent = 'Could not read data from URL.'; - }); } -displayButton.addEventListener('click', function() { +displayButton.addEventListener('click', function () { refreshMap(urlInput.value); }); diff --git a/examples/image-filter.js b/examples/image-filter.js index db6a8105f6..d798f39e49 100644 --- a/examples/image-filter.js +++ b/examples/image-filter.js @@ -1,11 +1,12 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat} from '../src/ol/proj.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; +import {fromLonLat} from '../src/ol/proj.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const imagery = new TileLayer({ @@ -13,8 +14,8 @@ const imagery = new TileLayer({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, maxZoom: 20, - crossOrigin: '' - }) + crossOrigin: '', + }), }); const map = new Map({ @@ -22,52 +23,25 @@ const map = new Map({ target: 'map', view: new View({ center: fromLonLat([-120, 50]), - zoom: 6 - }) + zoom: 6, + }), }); const kernels = { - none: [ - 0, 0, 0, - 0, 1, 0, - 0, 0, 0 - ], - sharpen: [ - 0, -1, 0, - -1, 5, -1, - 0, -1, 0 - ], - sharpenless: [ - 0, -1, 0, - -1, 10, -1, - 0, -1, 0 - ], - blur: [ - 1, 1, 1, - 1, 1, 1, - 1, 1, 1 - ], - shadow: [ - 1, 2, 1, - 0, 1, 0, - -1, -2, -1 - ], - emboss: [ - -2, 1, 0, - -1, 1, 1, - 0, 1, 2 - ], - edge: [ - 0, 1, 0, - 1, -4, 1, - 0, 1, 0 - ] + none: [0, 0, 0, 0, 1, 0, 0, 0, 0], + sharpen: [0, -1, 0, -1, 5, -1, 0, -1, 0], + sharpenless: [0, -1, 0, -1, 10, -1, 0, -1, 0], + blur: [1, 1, 1, 1, 1, 1, 1, 1, 1], + shadow: [1, 2, 1, 0, 1, 0, -1, -2, -1], + emboss: [-2, 1, 0, -1, 1, 1, 0, 1, 2], + edge: [0, 1, 0, 1, -4, 1, 0, 1, 0], }; function normalize(kernel) { const len = kernel.length; const normal = new Array(len); - let i, sum = 0; + let i, + sum = 0; for (i = 0; i < len; ++i) { sum += kernel[i]; } @@ -86,24 +60,21 @@ function normalize(kernel) { const select = document.getElementById('kernel'); let selectedKernel = normalize(kernels[select.value]); - /** * Update the kernel and re-render on change. */ -select.onchange = function() { +select.onchange = function () { selectedKernel = normalize(kernels[select.value]); map.render(); }; - /** * Apply a filter on "postrender" events. */ -imagery.on('postrender', function(event) { +imagery.on('postrender', function (event) { convolve(event.context, selectedKernel); }); - /** * Apply a convolution kernel to canvas. This works for any size kernel, but * performance starts degrading above 3 x 3. @@ -126,14 +97,21 @@ function convolve(context, kernel) { for (let pixelY = 0; pixelY < height; ++pixelY) { const pixelsAbove = pixelY * width; for (let pixelX = 0; pixelX < width; ++pixelX) { - let r = 0, g = 0, b = 0, a = 0; + let r = 0, + g = 0, + b = 0, + a = 0; for (let kernelY = 0; kernelY < size; ++kernelY) { for (let kernelX = 0; kernelX < size; ++kernelX) { const weight = kernel[kernelY * size + kernelX]; const neighborY = Math.min( - height - 1, Math.max(0, pixelY + kernelY - half)); + height - 1, + Math.max(0, pixelY + kernelY - half) + ); const neighborX = Math.min( - width - 1, Math.max(0, pixelX + kernelX - half)); + width - 1, + Math.max(0, pixelX + kernelX - half) + ); const inputIndex = (neighborY * width + neighborX) * 4; r += inputData[inputIndex] * weight; g += inputData[inputIndex + 1] * weight; diff --git a/examples/image-load-events.js b/examples/image-load-events.js index 5d2518da22..7bc8725591 100644 --- a/examples/image-load-events.js +++ b/examples/image-load-events.js @@ -1,8 +1,7 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import ImageLayer from '../src/ol/layer/Image.js'; import ImageWMS from '../src/ol/source/ImageWMS.js'; - +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; /** * Renders a progress bar. @@ -15,11 +14,10 @@ function Progress(el) { this.loaded = 0; } - /** * Increment the count of loading tiles. */ -Progress.prototype.addLoading = function() { +Progress.prototype.addLoading = function () { if (this.loading === 0) { this.show(); } @@ -27,48 +25,44 @@ Progress.prototype.addLoading = function() { this.update(); }; - /** * Increment the count of loaded tiles. */ -Progress.prototype.addLoaded = function() { +Progress.prototype.addLoaded = function () { const this_ = this; - setTimeout(function() { + setTimeout(function () { ++this_.loaded; this_.update(); }, 100); }; - /** * Update the progress bar. */ -Progress.prototype.update = function() { - const width = (this.loaded / this.loading * 100).toFixed(1) + '%'; +Progress.prototype.update = function () { + const width = ((this.loaded / this.loading) * 100).toFixed(1) + '%'; this.el.style.width = width; if (this.loading === this.loaded) { this.loading = 0; this.loaded = 0; const this_ = this; - setTimeout(function() { + setTimeout(function () { this_.hide(); }, 500); } }; - /** * Show the progress bar. */ -Progress.prototype.show = function() { +Progress.prototype.show = function () { this.el.style.visibility = 'visible'; }; - /** * Hide the progress bar. */ -Progress.prototype.hide = function() { +Progress.prototype.hide = function () { if (this.loading === this.loaded) { this.el.style.visibility = 'hidden'; this.el.style.width = 0; @@ -80,27 +74,25 @@ const progress = new Progress(document.getElementById('progress')); const source = new ImageWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'topp:states'}, - serverType: 'geoserver' + serverType: 'geoserver', }); -source.on('imageloadstart', function() { +source.on('imageloadstart', function () { progress.addLoading(); }); -source.on('imageloadend', function() { +source.on('imageloadend', function () { progress.addLoaded(); }); -source.on('imageloaderror', function() { +source.on('imageloaderror', function () { progress.addLoaded(); }); const map = new Map({ - layers: [ - new ImageLayer({source: source}) - ], + layers: [new ImageLayer({source: source})], target: 'map', view: new View({ center: [-10997148, 4569099], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/image-vector-layer.js b/examples/image-vector-layer.js index cd24c917b4..5339c43cbc 100644 --- a/examples/image-vector-layer.js +++ b/examples/image-vector-layer.js @@ -1,21 +1,20 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; import VectorImageLayer from '../src/ol/layer/VectorImage.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Stroke, Style, Text} from '../src/ol/style.js'; - const style = new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.6)' + color: 'rgba(255, 255, 255, 0.6)', }), stroke: new Stroke({ color: '#319FD3', - width: 1 + width: 1, }), - text: new Text() + text: new Text(), }); const map = new Map({ @@ -24,19 +23,19 @@ const map = new Map({ imageRatio: 2, source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: function(feature) { + style: function (feature) { style.getText().setText(feature.get('name')); return style; - } - }) + }, + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); const featureOverlay = new VectorLayer({ @@ -45,45 +44,48 @@ const featureOverlay = new VectorLayer({ style: new Style({ stroke: new Stroke({ color: '#f00', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(255,0,0,0.1)' - }) - }) + color: 'rgba(255,0,0,0.1)', + }), + }), }); let highlight; -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { + map + .getLayers() + .item(0) + .getFeatures(pixel) + .then(function (features) { + const feature = features.length > 0 ? features[0] : undefined; - map.getLayers().item(0).getFeatures(pixel).then(function(features) { - const feature = features.length > 0 ? features[0] : undefined; - - const info = document.getElementById('info'); - if (feature) { - info.innerHTML = feature.getId() + ': ' + feature.get('name'); - } else { - info.innerHTML = ' '; - } - - if (feature !== highlight) { - if (highlight) { - featureOverlay.getSource().removeFeature(highlight); - } + const info = document.getElementById('info'); if (feature) { - featureOverlay.getSource().addFeature(feature); + info.innerHTML = feature.getId() + ': ' + feature.get('name'); + } else { + info.innerHTML = ' '; } - highlight = feature; - } - }); + + if (feature !== highlight) { + if (highlight) { + featureOverlay.getSource().removeFeature(highlight); + } + if (feature) { + featureOverlay.getSource().addFeature(feature); + } + highlight = feature; + } + }); }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (!evt.dragging) { displayFeatureInfo(evt.pixel); } }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/immediate-geographic.js b/examples/immediate-geographic.js index 7c92cf0459..cc21f14383 100644 --- a/examples/immediate-geographic.js +++ b/examples/immediate-geographic.js @@ -1,18 +1,18 @@ +import Stamen from '../src/ol/source/Stamen.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import {Circle, Fill, Style} from '../src/ol/style.js'; import {Map, View} from '../src/ol/index.js'; import {Point} from '../src/ol/geom.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import Stamen from '../src/ol/source/Stamen.js'; -import {Circle, Fill, Style} from '../src/ol/style.js'; import {getVectorContext} from '../src/ol/render.js'; -import {useGeographic} from '../src/ol/proj.js'; import {upAndDown} from '../src/ol/easing.js'; +import {useGeographic} from '../src/ol/proj.js'; useGeographic(); const layer = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); const map = new Map({ @@ -20,17 +20,17 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const image = new Circle({ radius: 8, - fill: new Fill({color: 'rgb(255, 153, 0)'}) + fill: new Fill({color: 'rgb(255, 153, 0)'}), }); const style = new Style({ - image: image + image: image, }); const n = 1000; @@ -42,7 +42,7 @@ for (let i = 0; i < n; ++i) { geometries[i] = new Point([lon, lat]); } -layer.on('postrender', function(event) { +layer.on('postrender', function (event) { const vectorContext = getVectorContext(event); for (let i = 0; i < n; ++i) { diff --git a/examples/jsts.js b/examples/jsts.js index 1d64cc2281..ebe4af642a 100644 --- a/examples/jsts.js +++ b/examples/jsts.js @@ -1,43 +1,62 @@ -import Map from '../src/ol/Map.js'; -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 {fromLonLat} from '../src/ol/proj.js'; +import LinearRing from '../src/ol/geom/LinearRing.js'; +import Map from '../src/ol/Map.js'; import OSM from '../src/ol/source/OSM.js'; import VectorSource from '../src/ol/source/Vector.js'; -import LinearRing from '../src/ol/geom/LinearRing.js'; -import {Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon} from '../src/ol/geom.js'; +import View from '../src/ol/View.js'; +import { + LineString, + MultiLineString, + MultiPoint, + MultiPolygon, + Point, + Polygon, +} from '../src/ol/geom.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {fromLonLat} from '../src/ol/proj.js'; const source = new VectorSource(); -fetch('data/geojson/roads-seoul.geojson').then(function(response) { - return response.json(); -}).then(function(json) { - const format = new GeoJSON(); - const features = format.readFeatures(json, {featureProjection: 'EPSG:3857'}); +fetch('data/geojson/roads-seoul.geojson') + .then(function (response) { + return response.json(); + }) + .then(function (json) { + const format = new GeoJSON(); + const features = format.readFeatures(json, { + featureProjection: 'EPSG:3857', + }); - const parser = new jsts.io.OL3Parser(); - parser.inject(Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon); + const parser = new jsts.io.OL3Parser(); + parser.inject( + Point, + LineString, + LinearRing, + Polygon, + MultiPoint, + MultiLineString, + MultiPolygon + ); - for (let i = 0; i < features.length; i++) { - const feature = features[i]; - // convert the OpenLayers geometry to a JSTS geometry - const jstsGeom = parser.read(feature.getGeometry()); + for (let i = 0; i < features.length; i++) { + const feature = features[i]; + // convert the OpenLayers geometry to a JSTS geometry + const jstsGeom = parser.read(feature.getGeometry()); - // create a buffer of 40 meters around each line - const buffered = jstsGeom.buffer(40); + // create a buffer of 40 meters around each line + const buffered = jstsGeom.buffer(40); - // convert back from JSTS and replace the geometry on the feature - feature.setGeometry(parser.write(buffered)); - } + // convert back from JSTS and replace the geometry on the feature + feature.setGeometry(parser.write(buffered)); + } - source.addFeatures(features); -}); + source.addFeatures(features); + }); const vectorLayer = new VectorLayer({ - source: source + source: source, }); const rasterLayer = new TileLayer({ - source: new OSM() + source: new OSM(), }); const map = new Map({ @@ -45,6 +64,6 @@ const map = new Map({ target: document.getElementById('map'), view: new View({ center: fromLonLat([126.979293, 37.528787]), - zoom: 15 - }) + zoom: 15, + }), }); diff --git a/examples/kml-earthquakes.js b/examples/kml-earthquakes.js index 3ccd3ae988..b2ea2b175d 100644 --- a/examples/kml-earthquakes.js +++ b/examples/kml-earthquakes.js @@ -1,14 +1,13 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import KML from '../src/ol/format/KML.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import Map from '../src/ol/Map.js'; import Stamen from '../src/ol/source/Stamen.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const styleCache = {}; -const styleFunction = function(feature) { +const styleFunction = function (feature) { // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a // standards-violating tag in each Placemark. We extract it from // the Placemark's name instead. @@ -21,13 +20,13 @@ const styleFunction = function(feature) { image: new CircleStyle({ radius: radius, fill: new Fill({ - color: 'rgba(255, 153, 0, 0.4)' + color: 'rgba(255, 153, 0, 0.4)', }), stroke: new Stroke({ color: 'rgba(255, 204, 0, 0.2)', - width: 1 - }) - }) + width: 1, + }), + }), }); styleCache[radius] = style; } @@ -38,16 +37,16 @@ const vector = new VectorLayer({ source: new VectorSource({ url: 'data/kml/2012_Earthquakes_Mag5.kml', format: new KML({ - extractStyles: false - }) + extractStyles: false, + }), }), - style: styleFunction + style: styleFunction, }); const raster = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); const map = new Map({ @@ -55,26 +54,27 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const info = $('#info'); info.tooltip({ animation: false, - trigger: 'manual' + trigger: 'manual', }); -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { info.css({ left: pixel[0] + 'px', - top: (pixel[1] - 15) + 'px' + top: pixel[1] - 15 + 'px', }); - const feature = map.forEachFeatureAtPixel(pixel, function(feature) { + const feature = map.forEachFeatureAtPixel(pixel, function (feature) { return feature; }); if (feature) { - info.tooltip('hide') + info + .tooltip('hide') .attr('data-original-title', feature.get('name')) .tooltip('fixTitle') .tooltip('show'); @@ -83,7 +83,7 @@ const displayFeatureInfo = function(pixel) { } }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { info.tooltip('hide'); return; @@ -91,6 +91,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(map.getEventPixel(evt.originalEvent)); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js index 7c60c0a01e..497cf87c47 100644 --- a/examples/kml-timezones.js +++ b/examples/kml-timezones.js @@ -1,11 +1,10 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import KML from '../src/ol/format/KML.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import Map from '../src/ol/Map.js'; import Stamen from '../src/ol/source/Stamen.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Stroke, Style} from '../src/ol/style.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; /* * Compute the style of the feature. Here we want the opacity of polygons to @@ -14,7 +13,7 @@ import {Fill, Stroke, Style} from '../src/ol/style.js'; * currently midnight would have an opacity of 0. This doesn't account for * daylight savings, so don't use it to plan your vacation. */ -const styleFunction = function(feature) { +const styleFunction = function (feature) { let offset = 0; const name = feature.get('name'); // e.g. GMT -08:30 const match = name.match(/([\-+]\d{2}):(\d{2})$/); @@ -24,21 +23,22 @@ const styleFunction = function(feature) { offset = 60 * hours + minutes; } const date = new Date(); - const local = new Date(date.getTime() + - (date.getTimezoneOffset() + offset) * 60000); + const local = new Date( + date.getTime() + (date.getTimezoneOffset() + offset) * 60000 + ); // offset from local noon (in hours) - let delta = Math.abs(12 - local.getHours() + (local.getMinutes() / 60)); + let delta = Math.abs(12 - local.getHours() + local.getMinutes() / 60); if (delta > 12) { delta = 24 - delta; } const opacity = 0.75 * (1 - delta / 12); return new Style({ fill: new Fill({ - color: [0xff, 0xff, 0x33, opacity] + color: [0xff, 0xff, 0x33, opacity], }), stroke: new Stroke({ - color: '#ffffff' - }) + color: '#ffffff', + }), }); }; @@ -46,16 +46,16 @@ const vector = new VectorLayer({ source: new VectorSource({ url: 'data/kml/timezones.kml', format: new KML({ - extractStyles: false - }) + extractStyles: false, + }), }), - style: styleFunction + style: styleFunction, }); const raster = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); const map = new Map({ @@ -63,26 +63,27 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const info = $('#info'); info.tooltip({ animation: false, - trigger: 'manual' + trigger: 'manual', }); -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { info.css({ left: pixel[0] + 'px', - top: (pixel[1] - 15) + 'px' + top: pixel[1] - 15 + 'px', }); - const feature = map.forEachFeatureAtPixel(pixel, function(feature) { + const feature = map.forEachFeatureAtPixel(pixel, function (feature) { return feature; }); if (feature) { - info.tooltip('hide') + info + .tooltip('hide') .attr('data-original-title', feature.get('name')) .tooltip('fixTitle') .tooltip('show'); @@ -91,7 +92,7 @@ const displayFeatureInfo = function(pixel) { } }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { info.tooltip('hide'); return; @@ -99,6 +100,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(map.getEventPixel(evt.originalEvent)); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/kml.js b/examples/kml.js index 611cd5beaa..3d16eda6a8 100644 --- a/examples/kml.js +++ b/examples/kml.js @@ -1,27 +1,28 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import KML from '../src/ol/format/KML.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import XYZ from '../src/ol/source/XYZ.js'; +import Map from '../src/ol/Map.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const raster = new TileLayer({ source: new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) + maxZoom: 20, + }), }); const vector = new VectorLayer({ source: new VectorSource({ url: 'data/kml/2012-02-10.kml', - format: new KML() - }) + format: new KML(), + }), }); const map = new Map({ @@ -30,13 +31,13 @@ const map = new Map({ view: new View({ center: [876970.8463461736, 5859807.853963373], projection: 'EPSG:3857', - zoom: 10 - }) + zoom: 10, + }), }); -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { const features = []; - map.forEachFeatureAtPixel(pixel, function(feature) { + map.forEachFeatureAtPixel(pixel, function (feature) { features.push(feature); }); if (features.length > 0) { @@ -53,7 +54,7 @@ const displayFeatureInfo = function(pixel) { } }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -61,6 +62,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/layer-clipping-vector.js b/examples/layer-clipping-vector.js index 13c416b477..46d922acbc 100644 --- a/examples/layer-clipping-vector.js +++ b/examples/layer-clipping-vector.js @@ -1,36 +1,35 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import VectorSource from '../src/ol/source/Vector.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; import OSM from '../src/ol/source/OSM.js'; +import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Style} from '../src/ol/style.js'; -import {getVectorContext} from '../src/ol/render.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {fromLonLat} from '../src/ol/proj.js'; +import {getVectorContext} from '../src/ol/render.js'; const base = new TileLayer({ - source: new OSM() + source: new OSM(), }); const clipLayer = new VectorLayer({ style: null, source: new VectorSource({ - url: - './data/geojson/switzerland.geojson', - format: new GeoJSON() - }) + url: './data/geojson/switzerland.geojson', + format: new GeoJSON(), + }), }); const style = new Style({ fill: new Fill({ - color: 'black' - }) + color: 'black', + }), }); -base.on('postrender', function(e) { +base.on('postrender', function (e) { e.context.globalCompositeOperation = 'destination-in'; const vectorContext = getVectorContext(e); - clipLayer.getSource().forEachFeature(function(feature) { + clipLayer.getSource().forEachFeature(function (feature) { vectorContext.drawFeature(feature, style); }); e.context.globalCompositeOperation = 'source-over'; @@ -41,6 +40,6 @@ const map = new Map({ target: 'map', view: new View({ center: fromLonLat([8.23, 46.86]), - zoom: 7 - }) + zoom: 7, + }), }); diff --git a/examples/layer-clipping.js b/examples/layer-clipping.js index a6805fdac5..6bb1b6a25a 100644 --- a/examples/layer-clipping.js +++ b/examples/layer-clipping.js @@ -1,10 +1,10 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const osm = new TileLayer({ - source: new OSM() + source: new OSM(), }); const map = new Map({ @@ -12,16 +12,18 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -osm.on('prerender', function(event) { +osm.on('prerender', function (event) { const ctx = event.context; // calculate the pixel ratio and rotation of the canvas const matrix = event.inversePixelTransform; - const canvasPixelRatio = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]); + const canvasPixelRatio = Math.sqrt( + matrix[0] * matrix[0] + matrix[1] * matrix[1] + ); const canvasRotation = -Math.atan2(matrix[1], matrix[0]); ctx.save(); // center the canvas and remove rotation to position clipping @@ -47,7 +49,7 @@ osm.on('prerender', function(event) { ctx.translate(-ctx.canvas.width / 2, -ctx.canvas.height / 2); }); -osm.on('postrender', function(event) { +osm.on('postrender', function (event) { const ctx = event.context; ctx.restore(); }); diff --git a/examples/layer-extent.js b/examples/layer-extent.js index 6aa6a45075..ae8c5ca411 100644 --- a/examples/layer-extent.js +++ b/examples/layer-extent.js @@ -1,8 +1,8 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {transformExtent} from '../src/ol/proj.js'; import TileJSON from '../src/ol/source/TileJSON.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {transformExtent} from '../src/ol/proj.js'; function transform(extent) { return transformExtent(extent, 'EPSG:4326', 'EPSG:3857'); @@ -12,24 +12,29 @@ const extents = { India: transform([68.17665, 7.96553, 97.40256, 35.49401]), Argentina: transform([-73.41544, -55.25, -53.62835, -21.83231]), Nigeria: transform([2.6917, 4.24059, 14.57718, 13.86592]), - Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625]) + Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625]), }; -const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const key = + 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; const base = new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' + key, - crossOrigin: 'anonymous' - }) + url: + 'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' + + key, + crossOrigin: 'anonymous', + }), }); const overlay = new TileLayer({ extent: extents.India, source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=' + key, - crossOrigin: 'anonymous' - }) + url: + 'https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=' + + key, + crossOrigin: 'anonymous', + }), }); const map = new Map({ @@ -37,12 +42,12 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); for (const key in extents) { - document.getElementById(key).onclick = function(event) { + document.getElementById(key).onclick = function (event) { overlay.setExtent(extents[event.target.id]); }; } diff --git a/examples/layer-group.js b/examples/layer-group.js index 112dc7d951..c6fd6b524b 100644 --- a/examples/layer-group.js +++ b/examples/layer-group.js @@ -1,62 +1,71 @@ import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; +import TileJSON from '../src/ol/source/TileJSON.js'; import View from '../src/ol/View.js'; import {Group as LayerGroup, Tile as TileLayer} from '../src/ol/layer.js'; import {fromLonLat} from '../src/ol/proj.js'; -import OSM from '../src/ol/source/OSM.js'; -import TileJSON from '../src/ol/source/TileJSON.js'; -const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const key = + 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }), new LayerGroup({ + source: new OSM(), + }), + new LayerGroup({ layers: [ new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.20110804-hoa-foodinsecurity-3month.json?secure&access_token=' + key, - crossOrigin: 'anonymous' - }) + url: + 'https://api.tiles.mapbox.com/v4/mapbox.20110804-hoa-foodinsecurity-3month.json?secure&access_token=' + + key, + crossOrigin: 'anonymous', + }), }), new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.world-borders-light.json?secure&access_token=' + key, - crossOrigin: 'anonymous' - }) - }) - ] - }) + url: + 'https://api.tiles.mapbox.com/v4/mapbox.world-borders-light.json?secure&access_token=' + + key, + crossOrigin: 'anonymous', + }), + }), + ], + }), ], target: 'map', view: new View({ - center: fromLonLat([37.40570, 8.81566]), - zoom: 4 - }) + center: fromLonLat([37.4057, 8.81566]), + zoom: 4, + }), }); function bindInputs(layerid, layer) { const visibilityInput = $(layerid + ' input.visible'); - visibilityInput.on('change', function() { + visibilityInput.on('change', function () { layer.setVisible(this.checked); }); visibilityInput.prop('checked', layer.getVisible()); const opacityInput = $(layerid + ' input.opacity'); - opacityInput.on('input change', function() { + opacityInput.on('input change', function () { layer.setOpacity(parseFloat(this.value)); }); opacityInput.val(String(layer.getOpacity())); } -map.getLayers().forEach(function(layer, i) { +map.getLayers().forEach(function (layer, i) { bindInputs('#layer' + i, layer); if (layer instanceof LayerGroup) { - layer.getLayers().forEach(function(sublayer, j) { + layer.getLayers().forEach(function (sublayer, j) { bindInputs('#layer' + i + j, sublayer); }); } }); -$('#layertree li > span').click(function() { - $(this).siblings('fieldset').toggle(); -}).siblings('fieldset').hide(); +$('#layertree li > span') + .click(function () { + $(this).siblings('fieldset').toggle(); + }) + .siblings('fieldset') + .hide(); diff --git a/examples/layer-spy.js b/examples/layer-spy.js index 4418e7a5ca..bdb7d8f1cd 100644 --- a/examples/layer-spy.js +++ b/examples/layer-spy.js @@ -1,12 +1,13 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat} from '../src/ol/proj.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; +import {fromLonLat} from '../src/ol/proj.js'; import {getRenderPixel} from '../src/ol/render.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const roads = new TileLayer({ @@ -14,16 +15,16 @@ const roads = new TileLayer({ attributions: attributions, url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key, tileSize: 512, - maxZoom: 22 - }) + maxZoom: 22, + }), }); const imagery = new TileLayer({ source: new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) + maxZoom: 20, + }), }); const container = document.getElementById('map'); @@ -33,12 +34,12 @@ const map = new Map({ target: container, view: new View({ center: fromLonLat([-109, 46.5]), - zoom: 6 - }) + zoom: 6, + }), }); let radius = 75; -document.addEventListener('keydown', function(evt) { +document.addEventListener('keydown', function (evt) { if (evt.which === 38) { radius = Math.min(radius + 5, 150); map.render(); @@ -53,28 +54,33 @@ document.addEventListener('keydown', function(evt) { // get the pixel position with every move let mousePosition = null; -container.addEventListener('mousemove', function(event) { +container.addEventListener('mousemove', function (event) { mousePosition = map.getEventPixel(event); map.render(); }); -container.addEventListener('mouseout', function() { +container.addEventListener('mouseout', function () { mousePosition = null; map.render(); }); // before rendering the layer, do some clipping -imagery.on('prerender', function(event) { +imagery.on('prerender', function (event) { const ctx = event.context; ctx.save(); ctx.beginPath(); if (mousePosition) { // only show a circle around the mouse const pixel = getRenderPixel(event, mousePosition); - const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]); - const canvasRadius = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)); + const offset = getRenderPixel(event, [ + mousePosition[0] + radius, + mousePosition[1], + ]); + const canvasRadius = Math.sqrt( + Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2) + ); ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI); - ctx.lineWidth = 5 * canvasRadius / radius; + ctx.lineWidth = (5 * canvasRadius) / radius; ctx.strokeStyle = 'rgba(0,0,0,0.5)'; ctx.stroke(); } @@ -82,7 +88,7 @@ imagery.on('prerender', function(event) { }); // after rendering the layer, restore the canvas context -imagery.on('postrender', function(event) { +imagery.on('postrender', function (event) { const ctx = event.context; ctx.restore(); }); diff --git a/examples/layer-swipe.js b/examples/layer-swipe.js index 5d6a20b274..cf457a4b94 100644 --- a/examples/layer-swipe.js +++ b/examples/layer-swipe.js @@ -1,24 +1,25 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; import {getRenderPixel} from '../src/ol/render.js'; const osm = new TileLayer({ - source: new OSM() + source: new OSM(), }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const aerial = new TileLayer({ source: new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) + maxZoom: 20, + }), }); const map = new Map({ @@ -26,13 +27,13 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const swipe = document.getElementById('swipe'); -aerial.on('prerender', function(event) { +aerial.on('prerender', function (event) { const ctx = event.context; const mapSize = map.getSize(); const width = mapSize[0] * (swipe.value / 100); @@ -51,11 +52,15 @@ aerial.on('prerender', function(event) { ctx.clip(); }); -aerial.on('postrender', function(event) { +aerial.on('postrender', function (event) { const ctx = event.context; ctx.restore(); }); -swipe.addEventListener('input', function() { - map.render(); -}, false); +swipe.addEventListener( + 'input', + function () { + map.render(); + }, + false +); diff --git a/examples/layer-z-index.js b/examples/layer-z-index.js index 12cbfc3b7c..8e967a30e5 100644 --- a/examples/layer-z-index.js +++ b/examples/layer-z-index.js @@ -1,12 +1,11 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, RegularShape, Stroke, Style} from '../src/ol/style.js'; - const stroke = new Stroke({color: 'black', width: 1}); const styles = { @@ -16,8 +15,8 @@ const styles = { stroke: stroke, points: 4, radius: 80, - angle: Math.PI / 4 - }) + angle: Math.PI / 4, + }), }), 'triangle': new Style({ image: new RegularShape({ @@ -26,8 +25,8 @@ const styles = { points: 3, radius: 80, rotation: Math.PI / 4, - angle: 0 - }) + angle: 0, + }), }), 'star': new Style({ image: new RegularShape({ @@ -36,22 +35,21 @@ const styles = { points: 5, radius: 80, radius2: 4, - angle: 0 - }) - }) + angle: 0, + }), + }), }; - function createLayer(coordinates, style, zIndex) { const feature = new Feature(new Point(coordinates)); feature.setStyle(style); const source = new VectorSource({ - features: [feature] + features: [feature], }); const vectorLayer = new VectorLayer({ - source: source + source: source, }); vectorLayer.setZIndex(zIndex); @@ -71,16 +69,15 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 18 - }) + zoom: 18, + }), }); layer0.setMap(map); - function bindInputs(id, layer) { const idxInput = document.getElementById('idx' + id); - idxInput.onchange = function() { + idxInput.onchange = function () { layer.setZIndex(parseInt(this.value, 10) || 0); }; idxInput.value = String(layer.getZIndex()); diff --git a/examples/layer-zoom-limits.js b/examples/layer-zoom-limits.js index 0fa5ab4ada..04eb24c786 100644 --- a/examples/layer-zoom-limits.js +++ b/examples/layer-zoom-limits.js @@ -1,9 +1,9 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; -import {transformExtent, fromLonLat} from '../src/ol/proj.js'; +import {fromLonLat, transformExtent} from '../src/ol/proj.js'; const mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062]; @@ -12,22 +12,23 @@ const map = new Map({ layers: [ new TileLayer({ maxZoom: 14, // visible at zoom levels 14 and below - source: new OSM() + source: new OSM(), }), new TileLayer({ minZoom: 14, // visible at zoom levels above 14 source: new XYZ({ - attributions: 'Tiles © USGS, rendered with ' + - 'MapTiler', - url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png' - }) - }) + attributions: + 'Tiles © USGS, rendered with ' + + 'MapTiler', + url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png', + }), + }), ], view: new View({ center: fromLonLat([-112.18688965, 36.057944835]), zoom: 15, maxZoom: 18, extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'), - constrainOnlyCenter: true - }) + constrainOnlyCenter: true, + }), }); diff --git a/examples/lazy-source.js b/examples/lazy-source.js index 04a16fea66..8ab7821812 100644 --- a/examples/lazy-source.js +++ b/examples/lazy-source.js @@ -1,7 +1,7 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const source = new OSM(); @@ -12,14 +12,14 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -document.getElementById('set-source').onclick = function() { +document.getElementById('set-source').onclick = function () { layer.setSource(source); }; -document.getElementById('unset-source').onclick = function() { +document.getElementById('unset-source').onclick = function () { layer.setSource(null); }; diff --git a/examples/line-arrows.js b/examples/line-arrows.js index e99b259d69..5d583ca97c 100644 --- a/examples/line-arrows.js +++ b/examples/line-arrows.js @@ -1,50 +1,52 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import Point from '../src/ol/geom/Point.js'; import Draw from '../src/ol/interaction/Draw.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import Map from '../src/ol/Map.js'; +import Point from '../src/ol/geom/Point.js'; +import View from '../src/ol/View.js'; import {Icon, Stroke, Style} from '../src/ol/style.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const source = new VectorSource(); -const styleFunction = function(feature) { +const styleFunction = function (feature) { const geometry = feature.getGeometry(); const styles = [ // linestring new Style({ stroke: new Stroke({ color: '#ffcc33', - width: 2 - }) - }) + width: 2, + }), + }), ]; - geometry.forEachSegment(function(start, end) { + geometry.forEachSegment(function (start, end) { const dx = end[0] - start[0]; const dy = end[1] - start[1]; const rotation = Math.atan2(dy, dx); // arrows - styles.push(new Style({ - geometry: new Point(end), - image: new Icon({ - src: 'data/arrow.png', - anchor: [0.75, 0.5], - rotateWithView: true, - rotation: -rotation + styles.push( + new Style({ + geometry: new Point(end), + image: new Icon({ + src: 'data/arrow.png', + anchor: [0.75, 0.5], + rotateWithView: true, + rotation: -rotation, + }), }) - })); + ); }); return styles; }; const vector = new VectorLayer({ source: source, - style: styleFunction + style: styleFunction, }); const map = new Map({ @@ -52,11 +54,13 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 4 - }) + zoom: 4, + }), }); -map.addInteraction(new Draw({ - source: source, - type: 'LineString' -})); +map.addInteraction( + new Draw({ + source: source, + type: 'LineString', + }) +); diff --git a/examples/localized-openstreetmap.js b/examples/localized-openstreetmap.js index a37db45fdd..2da7932a7e 100644 --- a/examples/localized-openstreetmap.js +++ b/examples/localized-openstreetmap.js @@ -1,41 +1,37 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM, {ATTRIBUTION} from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const openCycleMapLayer = new TileLayer({ source: new OSM({ attributions: [ 'All maps © OpenCycleMap', - ATTRIBUTION + ATTRIBUTION, ], - url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + - '?apikey=0e6fc415256d4fbb9b5166a718591d71' - }) + url: + 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + + '?apikey=0e6fc415256d4fbb9b5166a718591d71', + }), }); const openSeaMapLayer = new TileLayer({ source: new OSM({ attributions: [ 'All maps © OpenSeaMap', - ATTRIBUTION + ATTRIBUTION, ], opaque: false, - url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png' - }) + url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', + }), }); - const map = new Map({ - layers: [ - openCycleMapLayer, - openSeaMapLayer - ], + layers: [openCycleMapLayer, openSeaMapLayer], target: 'map', view: new View({ maxZoom: 18, center: [-244780.24508882355, 5986452.183179816], - zoom: 15 - }) + zoom: 15, + }), }); diff --git a/examples/magnify.js b/examples/magnify.js index 17c3a6c963..4eafe2db1b 100644 --- a/examples/magnify.js +++ b/examples/magnify.js @@ -1,12 +1,13 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat} from '../src/ol/proj.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; +import {fromLonLat} from '../src/ol/proj.js'; import {getRenderPixel} from '../src/ol/render.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const imagery = new TileLayer({ @@ -14,8 +15,8 @@ const imagery = new TileLayer({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, maxZoom: 20, - crossOrigin: '' - }) + crossOrigin: '', + }), }); const container = document.getElementById('map'); @@ -25,12 +26,12 @@ const map = new Map({ target: container, view: new View({ center: fromLonLat([-109, 46.5]), - zoom: 6 - }) + zoom: 6, + }), }); let radius = 75; -document.addEventListener('keydown', function(evt) { +document.addEventListener('keydown', function (evt) { if (evt.which === 38) { radius = Math.min(radius + 5, 150); map.render(); @@ -45,22 +46,27 @@ document.addEventListener('keydown', function(evt) { // get the pixel position with every move let mousePosition = null; -container.addEventListener('mousemove', function(event) { +container.addEventListener('mousemove', function (event) { mousePosition = map.getEventPixel(event); map.render(); }); -container.addEventListener('mouseout', function() { +container.addEventListener('mouseout', function () { mousePosition = null; map.render(); }); // after rendering the layer, show an oversampled version around the pointer -imagery.on('postrender', function(event) { +imagery.on('postrender', function (event) { if (mousePosition) { const pixel = getRenderPixel(event, mousePosition); - const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]); - const half = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)); + const offset = getRenderPixel(event, [ + mousePosition[0] + radius, + mousePosition[1], + ]); + const half = Math.sqrt( + Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2) + ); const context = event.context; const centerX = pixel[0]; const centerY = pixel[1]; @@ -91,7 +97,7 @@ imagery.on('postrender', function(event) { } context.beginPath(); context.arc(centerX, centerY, half, 0, 2 * Math.PI); - context.lineWidth = 3 * half / radius; + context.lineWidth = (3 * half) / radius; context.strokeStyle = 'rgba(255,255,255,0.5)'; context.putImageData(dest, originX, originY); context.stroke(); diff --git a/examples/mapbox-layer.js b/examples/mapbox-layer.js index 2bb3e4fa4c..5da67e8fb8 100644 --- a/examples/mapbox-layer.js +++ b/examples/mapbox-layer.js @@ -1,11 +1,11 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Layer from '../src/ol/layer/Layer.js'; -import {toLonLat, fromLonLat} from '../src/ol/proj.js'; -import {Stroke, Style} from '../src/ol/style.js'; +import Map from '../src/ol/Map.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; +import View from '../src/ol/View.js'; +import {Stroke, Style} from '../src/ol/style.js'; +import {fromLonLat, toLonLat} from '../src/ol/proj.js'; const center = [-98.8, 37.9]; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; @@ -23,11 +23,11 @@ const mbMap = new mapboxgl.Map({ keyboard: false, pitchWithRotate: false, scrollZoom: false, - touchZoomRotate: false + touchZoomRotate: false, }); const mbLayer = new Layer({ - render: function(frameState) { + render: function (frameState) { const canvas = mbMap.getCanvas(); const viewState = frameState.viewState; @@ -40,14 +40,14 @@ const mbLayer = new Layer({ // adjust view parameters in mapbox const rotation = viewState.rotation; if (rotation) { - mbMap.rotateTo(-rotation * 180 / Math.PI, { - animate: false + mbMap.rotateTo((-rotation * 180) / Math.PI, { + animate: false, }); } mbMap.jumpTo({ center: toLonLat(viewState.center), zoom: viewState.zoom - 1, - animate: false + animate: false, }); // cancel the scheduled update & trigger synchronous redraw @@ -60,29 +60,29 @@ const mbLayer = new Layer({ mbMap._render(); return canvas; - } + }, }); const style = new Style({ stroke: new Stroke({ color: '#319FD3', - width: 2 - }) + width: 2, + }), }); const vectorLayer = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: style + style: style, }); const map = new Map({ target: 'map', view: new View({ center: fromLonLat(center), - zoom: 4 + zoom: 4, }), - layers: [mbLayer, vectorLayer] + layers: [mbLayer, vectorLayer], }); diff --git a/examples/mapbox-style.js b/examples/mapbox-style.js index a774155526..03f712e594 100644 --- a/examples/mapbox-style.js +++ b/examples/mapbox-style.js @@ -1,6 +1,9 @@ -import apply from 'ol-mapbox-style'; import FullScreen from '../src/ol/control/FullScreen.js'; +import apply from 'ol-mapbox-style'; -apply('map', 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB').then(function(map) { +apply( + 'map', + 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB' +).then(function (map) { map.addControl(new FullScreen()); }); diff --git a/examples/mapbox-vector-tiles-advanced.js b/examples/mapbox-vector-tiles-advanced.js index f8b15fd20a..037b3f76eb 100644 --- a/examples/mapbox-vector-tiles-advanced.js +++ b/examples/mapbox-vector-tiles-advanced.js @@ -1,14 +1,14 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import MVT from '../src/ol/format/MVT.js'; -import VectorTileLayer from '../src/ol/layer/VectorTile.js'; -import {get as getProjection} from '../src/ol/proj.js'; -import VectorTileSource from '../src/ol/source/VectorTile.js'; -import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js'; +import Map from '../src/ol/Map.js'; import TileGrid from '../src/ol/tilegrid/TileGrid.js'; +import VectorTileLayer from '../src/ol/layer/VectorTile.js'; +import VectorTileSource from '../src/ol/source/VectorTile.js'; +import View from '../src/ol/View.js'; +import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js'; +import {get as getProjection} from '../src/ol/proj.js'; - -const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const key = + 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; // Calculation of resolutions that match zoom levels 1, 3, 5, 7, 9, 11, 13, 15. const resolutions = []; @@ -17,37 +17,43 @@ for (let i = 0; i <= 8; ++i) { } // Calculation of tile urls for zoom levels 1, 3, 5, 7, 9, 11, 13, 15. function tileUrlFunction(tileCoord) { - return ('https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' + - '{z}/{x}/{y}.vector.pbf?access_token=' + key) + return ( + 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' + + '{z}/{x}/{y}.vector.pbf?access_token=' + + key + ) .replace('{z}', String(tileCoord[0] * 2 - 1)) .replace('{x}', String(tileCoord[1])) .replace('{y}', String(tileCoord[2])) - .replace('{a-d}', 'abcd'.substr( - ((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1)); + .replace( + '{a-d}', + 'abcd'.substr(((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1) + ); } const map = new Map({ layers: [ new VectorTileLayer({ source: new VectorTileSource({ - attributions: '© Mapbox ' + + attributions: + '© Mapbox ' + '© ' + 'OpenStreetMap contributors', format: new MVT(), tileGrid: new TileGrid({ extent: getProjection('EPSG:3857').getExtent(), resolutions: resolutions, - tileSize: 512 + tileSize: 512, }), - tileUrlFunction: tileUrlFunction + tileUrlFunction: tileUrlFunction, }), - style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text) - }) + style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text), + }), ], target: 'map', view: new View({ center: [0, 0], minZoom: 1, - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/mapbox-vector-tiles.js b/examples/mapbox-vector-tiles.js index ac5e796a61..f4aaea324c 100644 --- a/examples/mapbox-vector-tiles.js +++ b/examples/mapbox-vector-tiles.js @@ -1,31 +1,34 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import MVT from '../src/ol/format/MVT.js'; +import Map from '../src/ol/Map.js'; import VectorTileLayer from '../src/ol/layer/VectorTile.js'; import VectorTileSource from '../src/ol/source/VectorTile.js'; +import View from '../src/ol/View.js'; import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js'; - -const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const key = + 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; const map = new Map({ layers: [ new VectorTileLayer({ declutter: true, source: new VectorTileSource({ - attributions: '© Mapbox ' + + attributions: + '© Mapbox ' + '© ' + 'OpenStreetMap contributors', format: new MVT(), - url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' + - '{z}/{x}/{y}.vector.pbf?access_token=' + key + url: + 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' + + '{z}/{x}/{y}.vector.pbf?access_token=' + + key, }), - style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text) - }) + style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/mapguide-untiled.js b/examples/mapguide-untiled.js index a9e3846cf4..474b0d3cd6 100644 --- a/examples/mapguide-untiled.js +++ b/examples/mapguide-untiled.js @@ -1,16 +1,15 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import ImageLayer from '../src/ol/layer/Image.js'; import ImageMapGuide from '../src/ol/source/ImageMapGuide.js'; +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; const mdf = 'Library://Samples/Sheboygan/Maps/Sheboygan.MapDefinition'; -const agentUrl = - 'http://138.197.230.93:8008/mapguide/mapagent/mapagent.fcgi?'; +const agentUrl = 'http://138.197.230.93:8008/mapguide/mapagent/mapagent.fcgi?'; const bounds = [ -87.865114442365922, 43.665065564837931, -87.595394059497067, - 43.823852564430069 + 43.823852564430069, ]; const map = new Map({ layers: [ @@ -26,16 +25,16 @@ const map = new Map({ FORMAT: 'PNG', VERSION: '3.0.0', USERNAME: 'OLGuest', - PASSWORD: 'olguest' + PASSWORD: 'olguest', }, - ratio: 2 - }) - }) + ratio: 2, + }), + }), ], target: 'map', view: new View({ center: [-87.7302542509315, 43.744459064634], projection: 'EPSG:4326', - zoom: 12 - }) + zoom: 12, + }), }); diff --git a/examples/measure.js b/examples/measure.js index 37666f4251..6e4b1e2530 100644 --- a/examples/measure.js +++ b/examples/measure.js @@ -1,17 +1,16 @@ -import Map from '../src/ol/Map.js'; -import {unByKey} from '../src/ol/Observable.js'; -import Overlay from '../src/ol/Overlay.js'; -import {getArea, getLength} from '../src/ol/sphere.js'; -import View from '../src/ol/View.js'; -import {LineString, Polygon} from '../src/ol/geom.js'; import Draw from '../src/ol/interaction/Draw.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import Map from '../src/ol/Map.js'; +import Overlay from '../src/ol/Overlay.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; - +import {LineString, Polygon} from '../src/ol/geom.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {getArea, getLength} from '../src/ol/sphere.js'; +import {unByKey} from '../src/ol/Observable.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const source = new VectorSource(); @@ -20,76 +19,68 @@ const vector = new VectorLayer({ source: source, style: new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.2)' + color: 'rgba(255, 255, 255, 0.2)', }), stroke: new Stroke({ color: '#ffcc33', - width: 2 + width: 2, }), image: new CircleStyle({ radius: 7, fill: new Fill({ - color: '#ffcc33' - }) - }) - }) + color: '#ffcc33', + }), + }), + }), }); - /** * Currently drawn feature. * @type {import("../src/ol/Feature.js").default} */ let sketch; - /** * The help tooltip element. * @type {HTMLElement} */ let helpTooltipElement; - /** * Overlay to show the help messages. * @type {Overlay} */ let helpTooltip; - /** * The measure tooltip element. * @type {HTMLElement} */ let measureTooltipElement; - /** * Overlay to show the measurement. * @type {Overlay} */ let measureTooltip; - /** * Message to show when the user is drawing a polygon. * @type {string} */ const continuePolygonMsg = 'Click to continue drawing the polygon'; - /** * Message to show when the user is drawing a line. * @type {string} */ const continueLineMsg = 'Click to continue drawing the line'; - /** * Handle pointer move. * @param {import("../src/ol/MapBrowserEvent").default} evt The event. */ -const pointerMoveHandler = function(evt) { +const pointerMoveHandler = function (evt) { if (evt.dragging) { return; } @@ -111,19 +102,18 @@ const pointerMoveHandler = function(evt) { helpTooltipElement.classList.remove('hidden'); }; - const map = new Map({ layers: [raster, vector], target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 15 - }) + zoom: 15, + }), }); map.on('pointermove', pointerMoveHandler); -map.getViewport().addEventListener('mouseout', function() { +map.getViewport().addEventListener('mouseout', function () { helpTooltipElement.classList.add('hidden'); }); @@ -131,68 +121,62 @@ const typeSelect = document.getElementById('type'); let draw; // global so we can remove it later - /** * Format length output. * @param {LineString} line The line. * @return {string} The formatted length. */ -const formatLength = function(line) { +const formatLength = function (line) { const length = getLength(line); let output; if (length > 100) { - output = (Math.round(length / 1000 * 100) / 100) + - ' ' + 'km'; + output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km'; } else { - output = (Math.round(length * 100) / 100) + - ' ' + 'm'; + output = Math.round(length * 100) / 100 + ' ' + 'm'; } return output; }; - /** * Format area output. * @param {Polygon} polygon The polygon. * @return {string} Formatted area. */ -const formatArea = function(polygon) { +const formatArea = function (polygon) { const area = getArea(polygon); let output; if (area > 10000) { - output = (Math.round(area / 1000000 * 100) / 100) + - ' ' + 'km2'; + output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km2'; } else { - output = (Math.round(area * 100) / 100) + - ' ' + 'm2'; + output = Math.round(area * 100) / 100 + ' ' + 'm2'; } return output; }; function addInteraction() { - const type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString'); + const type = typeSelect.value == 'area' ? 'Polygon' : 'LineString'; draw = new Draw({ source: source, type: type, style: new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.2)' + color: 'rgba(255, 255, 255, 0.2)', }), stroke: new Stroke({ color: 'rgba(0, 0, 0, 0.5)', lineDash: [10, 10], - width: 2 + width: 2, }), image: new CircleStyle({ radius: 5, stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.7)' + color: 'rgba(0, 0, 0, 0.7)', }), fill: new Fill({ - color: 'rgba(255, 255, 255, 0.2)' - }) - }) - }) + color: 'rgba(255, 255, 255, 0.2)', + }), + }), + }), }); map.addInteraction(draw); @@ -200,43 +184,40 @@ function addInteraction() { createHelpTooltip(); let listener; - draw.on('drawstart', - function(evt) { - // set sketch - sketch = evt.feature; + draw.on('drawstart', function (evt) { + // set sketch + sketch = evt.feature; - /** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */ - let tooltipCoord = evt.coordinate; + /** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */ + let tooltipCoord = evt.coordinate; - listener = sketch.getGeometry().on('change', function(evt) { - const geom = evt.target; - let output; - if (geom instanceof Polygon) { - output = formatArea(geom); - tooltipCoord = geom.getInteriorPoint().getCoordinates(); - } else if (geom instanceof LineString) { - output = formatLength(geom); - tooltipCoord = geom.getLastCoordinate(); - } - measureTooltipElement.innerHTML = output; - measureTooltip.setPosition(tooltipCoord); - }); + listener = sketch.getGeometry().on('change', function (evt) { + const geom = evt.target; + let output; + if (geom instanceof Polygon) { + output = formatArea(geom); + tooltipCoord = geom.getInteriorPoint().getCoordinates(); + } else if (geom instanceof LineString) { + output = formatLength(geom); + tooltipCoord = geom.getLastCoordinate(); + } + measureTooltipElement.innerHTML = output; + measureTooltip.setPosition(tooltipCoord); }); + }); - draw.on('drawend', - function() { - measureTooltipElement.className = 'ol-tooltip ol-tooltip-static'; - measureTooltip.setOffset([0, -7]); - // unset sketch - sketch = null; - // unset tooltip so that a new one can be created - measureTooltipElement = null; - createMeasureTooltip(); - unByKey(listener); - }); + draw.on('drawend', function () { + measureTooltipElement.className = 'ol-tooltip ol-tooltip-static'; + measureTooltip.setOffset([0, -7]); + // unset sketch + sketch = null; + // unset tooltip so that a new one can be created + measureTooltipElement = null; + createMeasureTooltip(); + unByKey(listener); + }); } - /** * Creates a new help tooltip */ @@ -249,12 +230,11 @@ function createHelpTooltip() { helpTooltip = new Overlay({ element: helpTooltipElement, offset: [15, 0], - positioning: 'center-left' + positioning: 'center-left', }); map.addOverlay(helpTooltip); } - /** * Creates a new measure tooltip */ @@ -267,16 +247,15 @@ function createMeasureTooltip() { measureTooltip = new Overlay({ element: measureTooltipElement, offset: [0, -15], - positioning: 'bottom-center' + positioning: 'bottom-center', }); map.addOverlay(measureTooltip); } - /** * Let user change the geometry type. */ -typeSelect.onchange = function() { +typeSelect.onchange = function () { map.removeInteraction(draw); addInteraction(); }; diff --git a/examples/min-max-resolution.js b/examples/min-max-resolution.js index 062c22b837..27b67b6ab3 100644 --- a/examples/min-max-resolution.js +++ b/examples/min-max-resolution.js @@ -1,10 +1,11 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; import TileJSON from '../src/ol/source/TileJSON.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; -const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const key = + 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; /** * Create the map. @@ -14,20 +15,22 @@ const map = new Map({ new TileLayer({ source: new OSM(), minResolution: 200, - maxResolution: 2000 + maxResolution: 2000, }), new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?secure&access_token=' + key, - crossOrigin: 'anonymous' + url: + 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?secure&access_token=' + + key, + crossOrigin: 'anonymous', }), minResolution: 2000, - maxResolution: 20000 - }) + maxResolution: 20000, + }), ], target: 'map', view: new View({ center: [653600, 5723680], - zoom: 5 - }) + zoom: 5, + }), }); diff --git a/examples/min-zoom.js b/examples/min-zoom.js index f37740f9ce..38b0260c93 100644 --- a/examples/min-zoom.js +++ b/examples/min-zoom.js @@ -1,7 +1,7 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const viewport = document.getElementById('map'); @@ -15,20 +15,20 @@ const initialZoom = getMinZoom(); const view = new View({ center: [0, 0], minZoom: initialZoom, - zoom: initialZoom + zoom: initialZoom, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', - view: view + view: view, }); -window.addEventListener('resize', function() { +window.addEventListener('resize', function () { const minZoom = getMinZoom(); if (minZoom !== view.getMinZoom()) { view.setMinZoom(minZoom); diff --git a/examples/mobile-full-screen.js b/examples/mobile-full-screen.js index 80d03d2a5f..1c3bbb701f 100644 --- a/examples/mobile-full-screen.js +++ b/examples/mobile-full-screen.js @@ -1,33 +1,33 @@ +import BingMaps from '../src/ol/source/BingMaps.js'; import Geolocation from '../src/ol/Geolocation.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; -import BingMaps from '../src/ol/source/BingMaps.js'; - +import View from '../src/ol/View.js'; const view = new View({ center: [0, 0], - zoom: 2 + zoom: 2, }); const map = new Map({ layers: [ new TileLayer({ source: new BingMaps({ - key: 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ', - imagerySet: 'RoadOnDemand' - }) - }) + key: + 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ', + imagerySet: 'RoadOnDemand', + }), + }), ], target: 'map', - view: view + view: view, }); const geolocation = new Geolocation({ projection: view.getProjection(), - tracking: true + tracking: true, }); -geolocation.once('change:position', function() { +geolocation.once('change:position', function () { view.setCenter(geolocation.getPosition()); view.setResolution(2.388657133911758); }); diff --git a/examples/modify-features.js b/examples/modify-features.js index 3be37f11dc..488508fe35 100644 --- a/examples/modify-features.js +++ b/examples/modify-features.js @@ -1,29 +1,32 @@ +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {defaults as defaultInteractions, Modify, Select} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import { + Modify, + Select, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const vector = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', format: new GeoJSON(), - wrapX: false - }) + wrapX: false, + }), }); const select = new Select({ - wrapX: false + wrapX: false, }); const modify = new Modify({ - features: select.getFeatures() + features: select.getFeatures(), }); const map = new Map({ @@ -32,6 +35,6 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/modify-test.js b/examples/modify-test.js index b816f467a3..ef141d096e 100644 --- a/examples/modify-test.js +++ b/examples/modify-test.js @@ -1,55 +1,58 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {defaults as defaultInteractions, Modify, Select} from '../src/ol/interaction.js'; +import Map from '../src/ol/Map.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import { + Modify, + Select, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; - -const styleFunction = (function() { +const styleFunction = (function () { const styles = {}; const image = new CircleStyle({ radius: 5, fill: null, - stroke: new Stroke({color: 'orange', width: 2}) + stroke: new Stroke({color: 'orange', width: 2}), }); styles['Point'] = new Style({image: image}); styles['Polygon'] = new Style({ stroke: new Stroke({ color: 'blue', - width: 3 + width: 3, }), fill: new Fill({ - color: 'rgba(0, 0, 255, 0.1)' - }) + color: 'rgba(0, 0, 255, 0.1)', + }), }); styles['MultiLineString'] = new Style({ stroke: new Stroke({ color: 'green', - width: 3 - }) + width: 3, + }), }); styles['MultiPolygon'] = new Style({ stroke: new Stroke({ color: 'yellow', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(255, 255, 0, 0.1)' - }) + color: 'rgba(255, 255, 0, 0.1)', + }), }); styles['default'] = new Style({ stroke: new Stroke({ color: 'red', - width: 3 + width: 3, }), fill: new Fill({ - color: 'rgba(255, 0, 0, 0.1)' + color: 'rgba(255, 0, 0, 0.1)', }), - image: image + image: image, }); - return function(feature) { + return function (feature) { return styles[feature.getGeometry().getType()] || styles['default']; }; })(); @@ -59,115 +62,198 @@ const geojsonObject = { 'crs': { 'type': 'name', 'properties': { - 'name': 'EPSG:3857' - } + 'name': 'EPSG:3857', + }, }, - 'features': [{ - 'type': 'Feature', - 'geometry': { - 'type': 'Point', - 'coordinates': [0, 0] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'MultiPoint', - 'coordinates': [[-2e6, 0], [0, -2e6]] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'LineString', - 'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'LineString', - 'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], - [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6], - [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'MultiLineString', - 'coordinates': [ - [[-1e6, -7.5e5], [-1e6, 7.5e5]], - [[-1e6, -7.5e5], [-1e6, 7.5e5], [-5e5, 0], [-1e6, -7.5e5]], - [[1e6, -7.5e5], [15e5, 0], [15e5, 0], [1e6, 7.5e5]], - [[-7.5e5, -1e6], [7.5e5, -1e6]], - [[-7.5e5, 1e6], [7.5e5, 1e6]] - ] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'MultiPolygon', - 'coordinates': [ - [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], - [-3e6, 6e6], [-5e6, 6e6]]], - [[[-3e6, 6e6], [-2e6, 8e6], [0, 8e6], - [0, 6e6], [-3e6, 6e6]]], - [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], - [3e6, 6e6], [1e6, 6e6]]] - ] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'GeometryCollection', - 'geometries': [{ - 'type': 'LineString', - 'coordinates': [[-5e6, -5e6], [0, -5e6]] - }, { + 'features': [ + { + 'type': 'Feature', + 'geometry': { 'type': 'Point', - 'coordinates': [4e6, -5e6] - }, { + 'coordinates': [0, 0], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'MultiPoint', + 'coordinates': [ + [-2e6, 0], + [0, -2e6], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'LineString', + 'coordinates': [ + [4e6, -2e6], + [8e6, 2e6], + [9e6, 2e6], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'LineString', + 'coordinates': [ + [4e6, -2e6], + [8e6, 2e6], + [8e6, 3e6], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { 'type': 'Polygon', 'coordinates': [ - [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]] - ] - }] - } - }] + [ + [-5e6, -1e6], + [-4e6, 1e6], + [-3e6, -1e6], + [-5e6, -1e6], + ], + [ + [-4.5e6, -0.5e6], + [-3.5e6, -0.5e6], + [-4e6, 0.5e6], + [-4.5e6, -0.5e6], + ], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'MultiLineString', + 'coordinates': [ + [ + [-1e6, -7.5e5], + [-1e6, 7.5e5], + ], + [ + [-1e6, -7.5e5], + [-1e6, 7.5e5], + [-5e5, 0], + [-1e6, -7.5e5], + ], + [ + [1e6, -7.5e5], + [15e5, 0], + [15e5, 0], + [1e6, 7.5e5], + ], + [ + [-7.5e5, -1e6], + [7.5e5, -1e6], + ], + [ + [-7.5e5, 1e6], + [7.5e5, 1e6], + ], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'MultiPolygon', + 'coordinates': [ + [ + [ + [-5e6, 6e6], + [-5e6, 8e6], + [-3e6, 8e6], + [-3e6, 6e6], + [-5e6, 6e6], + ], + ], + [ + [ + [-3e6, 6e6], + [-2e6, 8e6], + [0, 8e6], + [0, 6e6], + [-3e6, 6e6], + ], + ], + [ + [ + [1e6, 6e6], + [1e6, 8e6], + [3e6, 8e6], + [3e6, 6e6], + [1e6, 6e6], + ], + ], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'GeometryCollection', + 'geometries': [ + { + 'type': 'LineString', + 'coordinates': [ + [-5e6, -5e6], + [0, -5e6], + ], + }, + { + 'type': 'Point', + 'coordinates': [4e6, -5e6], + }, + { + 'type': 'Polygon', + 'coordinates': [ + [ + [1e6, -6e6], + [2e6, -4e6], + [3e6, -6e6], + [1e6, -6e6], + ], + ], + }, + ], + }, + }, + ], }; const source = new VectorSource({ - features: (new GeoJSON()).readFeatures(geojsonObject) + features: new GeoJSON().readFeatures(geojsonObject), }); const layer = new VectorLayer({ source: source, - style: styleFunction + style: styleFunction, }); -const overlayStyle = (function() { +const overlayStyle = (function () { const styles = {}; styles['Polygon'] = [ new Style({ fill: new Fill({ - color: [255, 255, 255, 0.5] - }) + color: [255, 255, 255, 0.5], + }), }), new Style({ stroke: new Stroke({ color: [255, 255, 255, 1], - width: 5 - }) + width: 5, + }), }), new Style({ stroke: new Stroke({ color: [0, 153, 255, 1], - width: 3 - }) - }) + width: 3, + }), + }), ]; styles['MultiPolygon'] = styles['Polygon']; @@ -175,15 +261,15 @@ const overlayStyle = (function() { new Style({ stroke: new Stroke({ color: [255, 255, 255, 1], - width: 5 - }) + width: 5, + }), }), new Style({ stroke: new Stroke({ color: [0, 153, 255, 1], - width: 3 - }) - }) + width: 3, + }), + }), ]; styles['MultiLineString'] = styles['LineString']; @@ -192,38 +278,44 @@ const overlayStyle = (function() { image: new CircleStyle({ radius: 7, fill: new Fill({ - color: [0, 153, 255, 1] + color: [0, 153, 255, 1], }), stroke: new Stroke({ color: [255, 255, 255, 0.75], - width: 1.5 - }) + width: 1.5, + }), }), - zIndex: 100000 - }) + zIndex: 100000, + }), ]; styles['MultiPoint'] = styles['Point']; styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']); - return function(feature) { + return function (feature) { return styles[feature.getGeometry().getType()]; }; })(); const select = new Select({ - style: overlayStyle + style: overlayStyle, }); const modify = new Modify({ features: select.getFeatures(), style: overlayStyle, - insertVertexCondition: function() { + insertVertexCondition: function () { // prevent new vertices to be added to the polygons - return !select.getFeatures().getArray().every(function(feature) { - return feature.getGeometry().getType().match(/Polygon/); - }); - } + return !select + .getFeatures() + .getArray() + .every(function (feature) { + return feature + .getGeometry() + .getType() + .match(/Polygon/); + }); + }, }); const map = new Map({ @@ -233,6 +325,6 @@ const map = new Map({ view: new View({ center: [0, 1000000], zoom: 2, - multiWorld: true - }) + multiWorld: true, + }), }); diff --git a/examples/mouse-position.js b/examples/mouse-position.js index aaf4d51c89..5b198c3030 100644 --- a/examples/mouse-position.js +++ b/examples/mouse-position.js @@ -1,10 +1,10 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls} from '../src/ol/control.js'; import MousePosition from '../src/ol/control/MousePosition.js'; -import {createStringXY} from '../src/ol/coordinate.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {createStringXY} from '../src/ol/coordinate.js'; +import {defaults as defaultControls} from '../src/ol/control.js'; const mousePositionControl = new MousePosition({ coordinateFormat: createStringXY(4), @@ -13,30 +13,30 @@ const mousePositionControl = new MousePosition({ // be placed within the map. className: 'custom-mouse-position', target: document.getElementById('mouse-position'), - undefinedHTML: ' ' + undefinedHTML: ' ', }); const map = new Map({ controls: defaultControls().extend([mousePositionControl]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const projectionSelect = document.getElementById('projection'); -projectionSelect.addEventListener('change', function(event) { +projectionSelect.addEventListener('change', function (event) { mousePositionControl.setProjection(event.target.value); }); const precisionInput = document.getElementById('precision'); -precisionInput.addEventListener('change', function(event) { +precisionInput.addEventListener('change', function (event) { const format = createStringXY(event.target.valueAsNumber); mousePositionControl.setCoordinateFormat(format); }); diff --git a/examples/moveend.js b/examples/moveend.js index da762ed600..17d69ef0c2 100644 --- a/examples/moveend.js +++ b/examples/moveend.js @@ -1,22 +1,21 @@ import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; import View from '../src/ol/View.js'; import {getBottomLeft, getTopRight} from '../src/ol/extent.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import {toLonLat} from '../src/ol/proj.js'; -import OSM from '../src/ol/source/OSM.js'; - const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); function display(id, value) { @@ -25,7 +24,7 @@ function display(id, value) { function wrapLon(value) { const worlds = Math.floor((value + 180) / 360); - return value - (worlds * 360); + return value - worlds * 360; } function onMoveEnd(evt) { diff --git a/examples/navigation-controls.js b/examples/navigation-controls.js index 9b4ed18b34..6d63b19139 100644 --- a/examples/navigation-controls.js +++ b/examples/navigation-controls.js @@ -1,27 +1,28 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, ZoomToExtent} from '../src/ol/control.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {ZoomToExtent, defaults as defaultControls} from '../src/ol/control.js'; const map = new Map({ controls: defaultControls().extend([ new ZoomToExtent({ extent: [ - 813079.7791264898, 5929220.284081122, - 848966.9639063801, 5936863.986909639 - ] - }) + 813079.7791264898, + 5929220.284081122, + 848966.9639063801, + 5936863.986909639, + ], + }), ]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/offscreen-canvas.js b/examples/offscreen-canvas.js index 180e5c990e..c70de0afcb 100644 --- a/examples/offscreen-canvas.js +++ b/examples/offscreen-canvas.js @@ -1,17 +1,22 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Layer from '../src/ol/layer/Layer.js'; +import Map from '../src/ol/Map.js'; +import Source from '../src/ol/source/Source.js'; +import View from '../src/ol/View.js'; import Worker from 'worker-loader!./offscreen-canvas.worker.js'; //eslint-disable-line +import stringify from 'json-stringify-safe'; +import {FullScreen} from '../src/ol/control.js'; import {compose, create} from '../src/ol/transform.js'; import {createTransformString} from '../src/ol/render/canvas.js'; import {createXYZ} from '../src/ol/tilegrid.js'; -import {FullScreen} from '../src/ol/control.js'; -import stringify from 'json-stringify-safe'; -import Source from '../src/ol/source/Source.js'; const worker = new Worker(); -let container, transformContainer, canvas, rendering, workerFrameState, mainThreadFrameState; +let container, + transformContainer, + canvas, + rendering, + workerFrameState, + mainThreadFrameState; // Transform the container to account for the differnece between the (newer) // main thread frameState and the (older) worker frameState @@ -29,12 +34,16 @@ function updateContainerTransform() { // Skip the extra transform for rotated views, because it will not work // correctly in that case if (!rotation) { - compose(transform, + compose( + transform, (renderedCenter[0] - center[0]) / resolution, (center[1] - renderedCenter[1]) / resolution, - renderedResolution / resolution, renderedResolution / resolution, + renderedResolution / resolution, + renderedResolution / resolution, rotation - renderedRotation, - 0, 0); + 0, + 0 + ); } transformContainer.style.transform = createTransformString(transform); } @@ -43,7 +52,7 @@ function updateContainerTransform() { const map = new Map({ layers: [ new Layer({ - render: function(frameState) { + render: function (frameState) { if (!container) { container = document.createElement('div'); container.style.position = 'absolute'; @@ -66,7 +75,7 @@ const map = new Map({ rendering = true; worker.postMessage({ action: 'render', - frameState: JSON.parse(stringify(frameState)) + frameState: JSON.parse(stringify(frameState)), }); } else { frameState.animate = true; @@ -76,34 +85,39 @@ const map = new Map({ source: new Source({ attributions: [ '© MapTiler', - '© OpenStreetMap contributors' - ] - }) - }) + '© OpenStreetMap contributors', + ], + }), + }), ], target: 'map', view: new View({ resolutions: createXYZ({tileSize: 512}).getResolutions89, center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); map.addControl(new FullScreen()); // Worker messaging and actions -worker.addEventListener('message', message => { +worker.addEventListener('message', (message) => { if (message.data.action === 'loadImage') { // Image loader for ol-mapbox-style const image = new Image(); image.crossOrigin = 'anonymous'; - image.addEventListener('load', function() { - createImageBitmap(image, 0, 0, image.width, image.height).then(imageBitmap => { - worker.postMessage({ - action: 'imageLoaded', - image: imageBitmap, - src: message.data.src - }, [imageBitmap]); - }); + image.addEventListener('load', function () { + createImageBitmap(image, 0, 0, image.width, image.height).then( + (imageBitmap) => { + worker.postMessage( + { + action: 'imageLoaded', + image: imageBitmap, + src: message.data.src, + }, + [imageBitmap] + ); + } + ); }); image.src = event.data.src; } else if (message.data.action === 'requestRender') { @@ -111,7 +125,7 @@ worker.addEventListener('message', message => { map.render(); } else if (canvas && message.data.action === 'rendered') { // Worker provies a new render frame - requestAnimationFrame(function() { + requestAnimationFrame(function () { const imageData = message.data.imageData; canvas.width = imageData.width; canvas.height = imageData.height; diff --git a/examples/offscreen-canvas.worker.js b/examples/offscreen-canvas.worker.js index b03f0be61d..ce33a656c5 100644 --- a/examples/offscreen-canvas.worker.js +++ b/examples/offscreen-canvas.worker.js @@ -1,13 +1,13 @@ +import MVT from '../src/ol/format/MVT.js'; +import TileQueue from '../src/ol/TileQueue.js'; import VectorTileLayer from '../src/ol/layer/VectorTile.js'; import VectorTileSource from '../src/ol/source/VectorTile.js'; -import MVT from '../src/ol/format/MVT.js'; -import {Projection} from '../src/ol/proj.js'; -import TileQueue from '../src/ol/TileQueue.js'; -import {getTilePriority as tilePriorityFunction} from '../src/ol/TileQueue.js'; -import {renderDeclutterItems} from '../src/ol/render.js'; -import styleFunction from 'ol-mapbox-style/dist/stylefunction.js'; -import {inView} from '../src/ol/layer/Layer.js'; import stringify from 'json-stringify-safe'; +import styleFunction from 'ol-mapbox-style/dist/stylefunction.js'; +import {Projection} from '../src/ol/proj.js'; +import {inView} from '../src/ol/layer/Layer.js'; +import {renderDeclutterItems} from '../src/ol/render.js'; +import {getTilePriority as tilePriorityFunction} from '../src/ol/TileQueue.js'; /** @type {any} */ const worker = self; @@ -22,89 +22,113 @@ const sources = { landcover: new VectorTileSource({ maxZoom: 9, format: new MVT(), - url: 'https://api.maptiler.com/tiles/landcover/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB' + url: + 'https://api.maptiler.com/tiles/landcover/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB', }), contours: new VectorTileSource({ minZoom: 9, maxZoom: 14, format: new MVT(), - url: 'https://api.maptiler.com/tiles/contours/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB' + url: + 'https://api.maptiler.com/tiles/contours/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB', }), openmaptiles: new VectorTileSource({ format: new MVT(), maxZoom: 14, - url: 'https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB' - }) + url: + 'https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB', + }), }; const layers = []; // Font replacement so we do not need to load web fonts in the worker function getFont(font) { - return font[0] - .replace('Noto Sans', 'serif') - .replace('Roboto', 'sans-serif'); + return font[0].replace('Noto Sans', 'serif').replace('Roboto', 'sans-serif'); } function loadStyles() { - const styleUrl = 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB'; + const styleUrl = + 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB'; - fetch(styleUrl).then(data => data.json()).then(styleJson => { - const buckets = []; - let currentSource; - styleJson.layers.forEach(layer => { - if (!layer.source) { - return; - } - if (currentSource !== layer.source) { - currentSource = layer.source; - buckets.push({ - source: layer.source, - layers: [] - }); - } - buckets[buckets.length - 1].layers.push(layer.id); - }); - - const spriteUrl = styleJson.sprite + (pixelRatio > 1 ? '@2x' : '') + '.json'; - const spriteImageUrl = styleJson.sprite + (pixelRatio > 1 ? '@2x' : '') + '.png'; - fetch(spriteUrl).then(data => data.json()).then(spriteJson => { - buckets.forEach(bucket => { - const source = sources[bucket.source]; - if (!source) { + fetch(styleUrl) + .then((data) => data.json()) + .then((styleJson) => { + const buckets = []; + let currentSource; + styleJson.layers.forEach((layer) => { + if (!layer.source) { return; } - const layer = new VectorTileLayer({ - declutter: true, - source, - minZoom: source.getTileGrid().getMinZoom() - }); - layer.getRenderer().useContainer = function(target, transform) { - this.containerReused = this.getLayer() !== layers[0]; - this.canvas = canvas; - this.context = context; - this.container = { - firstElementChild: canvas - }; - rendererTransform = transform; - }; - styleFunction(layer, styleJson, bucket.layers, undefined, spriteJson, spriteImageUrl, getFont); - layers.push(layer); + if (currentSource !== layer.source) { + currentSource = layer.source; + buckets.push({ + source: layer.source, + layers: [], + }); + } + buckets[buckets.length - 1].layers.push(layer.id); }); - worker.postMessage({action: 'requestRender'}); + + const spriteUrl = + styleJson.sprite + (pixelRatio > 1 ? '@2x' : '') + '.json'; + const spriteImageUrl = + styleJson.sprite + (pixelRatio > 1 ? '@2x' : '') + '.png'; + fetch(spriteUrl) + .then((data) => data.json()) + .then((spriteJson) => { + buckets.forEach((bucket) => { + const source = sources[bucket.source]; + if (!source) { + return; + } + const layer = new VectorTileLayer({ + declutter: true, + source, + minZoom: source.getTileGrid().getMinZoom(), + }); + layer.getRenderer().useContainer = function (target, transform) { + this.containerReused = this.getLayer() !== layers[0]; + this.canvas = canvas; + this.context = context; + this.container = { + firstElementChild: canvas, + }; + rendererTransform = transform; + }; + styleFunction( + layer, + styleJson, + bucket.layers, + undefined, + spriteJson, + spriteImageUrl, + getFont + ); + layers.push(layer); + }); + worker.postMessage({action: 'requestRender'}); + }); }); - }); } // Minimal map-like functionality for rendering const tileQueue = new TileQueue( - (tile, tileSourceKey, tileCenter, tileResolution) => tilePriorityFunction(frameState, tile, tileSourceKey, tileCenter, tileResolution), - () => worker.postMessage({action: 'requestRender'})); + (tile, tileSourceKey, tileCenter, tileResolution) => + tilePriorityFunction( + frameState, + tile, + tileSourceKey, + tileCenter, + tileResolution + ), + () => worker.postMessage({action: 'requestRender'}) +); const maxTotalLoading = 8; const maxNewLoads = 2; -worker.addEventListener('message', event => { +worker.addEventListener('message', (event) => { if (event.data.action !== 'render') { return; } @@ -115,7 +139,7 @@ worker.addEventListener('message', event => { } frameState.tileQueue = tileQueue; frameState.viewState.projection.__proto__ = Projection.prototype; - layers.forEach(layer => { + layers.forEach((layer) => { if (inView(layer.getLayerState(), frameState.viewState)) { const renderer = layer.getRenderer(); renderer.renderFrame(frameState, canvas); @@ -127,10 +151,13 @@ worker.addEventListener('message', event => { tileQueue.loadMoreTiles(maxTotalLoading, maxNewLoads); } const imageData = canvas.transferToImageBitmap(); - worker.postMessage({ - action: 'rendered', - imageData: imageData, - transform: rendererTransform, - frameState: JSON.parse(stringify(frameState)) - }, [imageData]); + worker.postMessage( + { + action: 'rendered', + imageData: imageData, + transform: rendererTransform, + frameState: JSON.parse(stringify(frameState)), + }, + [imageData] + ); }); diff --git a/examples/osm-vector-tiles.js b/examples/osm-vector-tiles.js index e7211986fd..5ca899ddc3 100644 --- a/examples/osm-vector-tiles.js +++ b/examples/osm-vector-tiles.js @@ -1,10 +1,10 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TopoJSON from '../src/ol/format/TopoJSON.js'; import VectorTileLayer from '../src/ol/layer/VectorTile.js'; -import {fromLonLat} from '../src/ol/proj.js'; import VectorTileSource from '../src/ol/source/VectorTile.js'; +import View from '../src/ol/View.js'; import {Fill, Stroke, Style} from '../src/ol/style.js'; +import {fromLonLat} from '../src/ol/proj.js'; const key = 'uZNs91nMR-muUTP99MyBSg'; @@ -12,24 +12,24 @@ const roadStyleCache = {}; const roadColor = { 'major_road': '#776', 'minor_road': '#ccb', - 'highway': '#f39' + 'highway': '#f39', }; const buildingStyle = new Style({ fill: new Fill({ color: '#666', - opacity: 0.4 + opacity: 0.4, }), stroke: new Stroke({ color: '#444', - width: 1 - }) + width: 1, + }), }); const waterStyle = new Style({ fill: new Fill({ - color: '#9db9e8' - }) + color: '#9db9e8', + }), }); -const roadStyle = function(feature) { +const roadStyle = function (feature) { const kind = feature.get('kind'); const railway = feature.get('railway'); const sort_key = feature.get('sort_key'); @@ -47,9 +47,9 @@ const roadStyle = function(feature) { style = new Style({ stroke: new Stroke({ color: color, - width: width + width: width, }), - zIndex: sort_key + zIndex: sort_key, }); roadStyleCache[styleKey] = style; } @@ -60,29 +60,36 @@ const map = new Map({ layers: [ new VectorTileLayer({ source: new VectorTileSource({ - attributions: '© OpenStreetMap contributors, Who’s On First, ' + - 'Natural Earth, and openstreetmapdata.com', + attributions: + '© OpenStreetMap contributors, Who’s On First, ' + + 'Natural Earth, and openstreetmapdata.com', format: new TopoJSON({ layerName: 'layer', - layers: ['water', 'roads', 'buildings'] + layers: ['water', 'roads', 'buildings'], }), maxZoom: 19, - url: 'https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key + url: + 'https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + + key, }), - style: function(feature, resolution) { + style: function (feature, resolution) { switch (feature.get('layer')) { - case 'water': return waterStyle; - case 'roads': return roadStyle(feature); - case 'buildings': return (resolution < 10) ? buildingStyle : null; - default: return null; + case 'water': + return waterStyle; + case 'roads': + return roadStyle(feature); + case 'buildings': + return resolution < 10 ? buildingStyle : null; + default: + return null; } - } - }) + }, + }), ], target: 'map', view: new View({ center: fromLonLat([-74.0064, 40.7142]), maxZoom: 19, - zoom: 15 - }) + zoom: 15, + }), }); diff --git a/examples/overlay.js b/examples/overlay.js index be9a65040d..6c1d2fd08a 100644 --- a/examples/overlay.js +++ b/examples/overlay.js @@ -1,14 +1,13 @@ import Map from '../src/ol/Map.js'; -import Overlay from '../src/ol/Overlay.js'; -import View from '../src/ol/View.js'; -import {toStringHDMS} from '../src/ol/coordinate.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat, toLonLat} from '../src/ol/proj.js'; import OSM from '../src/ol/source/OSM.js'; - +import Overlay from '../src/ol/Overlay.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {fromLonLat, toLonLat} from '../src/ol/proj.js'; +import {toStringHDMS} from '../src/ol/coordinate.js'; const layer = new TileLayer({ - source: new OSM() + source: new OSM(), }); const map = new Map({ @@ -16,8 +15,8 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const pos = fromLonLat([16.3725, 48.208889]); @@ -27,24 +26,24 @@ const marker = new Overlay({ position: pos, positioning: 'center-center', element: document.getElementById('marker'), - stopEvent: false + stopEvent: false, }); map.addOverlay(marker); // Vienna label const vienna = new Overlay({ position: pos, - element: document.getElementById('vienna') + element: document.getElementById('vienna'), }); map.addOverlay(vienna); // Popup showing the position the user clicked const popup = new Overlay({ - element: document.getElementById('popup') + element: document.getElementById('popup'), }); map.addOverlay(popup); -map.on('click', function(evt) { +map.on('click', function (evt) { const element = popup.getElement(); const coordinate = evt.coordinate; const hdms = toStringHDMS(toLonLat(coordinate)); @@ -55,7 +54,7 @@ map.on('click', function(evt) { placement: 'top', animation: false, html: true, - content: '

The location you clicked was:

' + hdms + '' + content: '

The location you clicked was:

' + hdms + '', }); $(element).popover('show'); }); diff --git a/examples/overviewmap-custom.js b/examples/overviewmap-custom.js index e82ff9ceb4..96844c83cc 100644 --- a/examples/overviewmap-custom.js +++ b/examples/overviewmap-custom.js @@ -1,10 +1,12 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, OverviewMap} from '../src/ol/control.js'; -import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import { + DragRotateAndZoom, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; +import {OverviewMap, defaults as defaultControls} from '../src/ol/control.js'; const rotateWithView = document.getElementById('rotateWithView'); @@ -14,35 +16,32 @@ const overviewMapControl = new OverviewMap({ layers: [ new TileLayer({ source: new OSM({ - 'url': 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + - '?apikey=0e6fc415256d4fbb9b5166a718591d71' - }) - }) + 'url': + 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + + '?apikey=0e6fc415256d4fbb9b5166a718591d71', + }), + }), ], collapseLabel: '\u00BB', label: '\u00AB', - collapsed: false + collapsed: false, }); -rotateWithView.addEventListener('change', function() { +rotateWithView.addEventListener('change', function () { overviewMapControl.setRotateWithView(this.checked); }); const map = new Map({ - controls: defaultControls().extend([ - overviewMapControl - ]), - interactions: defaultInteractions().extend([ - new DragRotateAndZoom() - ]), + controls: defaultControls().extend([overviewMapControl]), + interactions: defaultInteractions().extend([new DragRotateAndZoom()]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [500000, 6000000], - zoom: 7 - }) + zoom: 7, + }), }); diff --git a/examples/overviewmap.js b/examples/overviewmap.js index a740254a40..d468729bba 100644 --- a/examples/overviewmap.js +++ b/examples/overviewmap.js @@ -1,30 +1,28 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, OverviewMap} from '../src/ol/control.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {OverviewMap, defaults as defaultControls} from '../src/ol/control.js'; const source = new OSM(); const overviewMapControl = new OverviewMap({ layers: [ new TileLayer({ - source: source - }) - ] + source: source, + }), + ], }); const map = new Map({ - controls: defaultControls().extend([ - overviewMapControl - ]), + controls: defaultControls().extend([overviewMapControl]), layers: [ new TileLayer({ - source: source - }) + source: source, + }), ], target: 'map', view: new View({ center: [500000, 6000000], - zoom: 7 - }) + zoom: 7, + }), }); diff --git a/examples/page-scroll.js b/examples/page-scroll.js index e128b8e9ec..3c60ab0748 100644 --- a/examples/page-scroll.js +++ b/examples/page-scroll.js @@ -1,18 +1,17 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/permalink.js b/examples/permalink.js index c41d25846a..c62ee3e4f7 100644 --- a/examples/permalink.js +++ b/examples/permalink.js @@ -1,7 +1,7 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; // default zoom, center and rotation let zoom = 2; @@ -14,10 +14,7 @@ if (window.location.hash !== '') { const parts = hash.split('/'); if (parts.length === 4) { zoom = parseInt(parts[0], 10); - center = [ - parseFloat(parts[1]), - parseFloat(parts[2]) - ]; + center = [parseFloat(parts[1]), parseFloat(parts[2])]; rotation = parseFloat(parts[3]); } } @@ -25,20 +22,20 @@ if (window.location.hash !== '') { const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: center, zoom: zoom, - rotation: rotation - }) + rotation: rotation, + }), }); let shouldUpdate = true; const view = map.getView(); -const updatePermalink = function() { +const updatePermalink = function () { if (!shouldUpdate) { // do not update the URL when the view was changed in the 'popstate' handler shouldUpdate = true; @@ -46,15 +43,19 @@ const updatePermalink = function() { } const center = view.getCenter(); - const hash = '#map=' + - view.getZoom() + '/' + - Math.round(center[0] * 100) / 100 + '/' + - Math.round(center[1] * 100) / 100 + '/' + - view.getRotation(); + const hash = + '#map=' + + view.getZoom() + + '/' + + Math.round(center[0] * 100) / 100 + + '/' + + Math.round(center[1] * 100) / 100 + + '/' + + view.getRotation(); const state = { zoom: view.getZoom(), center: view.getCenter(), - rotation: view.getRotation() + rotation: view.getRotation(), }; window.history.pushState(state, 'map', hash); }; @@ -63,7 +64,7 @@ map.on('moveend', updatePermalink); // restore the view state when navigating through the history, see // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate -window.addEventListener('popstate', function(event) { +window.addEventListener('popstate', function (event) { if (event.state === null) { return; } diff --git a/examples/pinch-zoom.js b/examples/pinch-zoom.js index 0fba1794c9..0a750dc82f 100644 --- a/examples/pinch-zoom.js +++ b/examples/pinch-zoom.js @@ -1,23 +1,23 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultInteractions, PinchZoom} from '../src/ol/interaction.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import { + PinchZoom, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; const map = new Map({ - interactions: defaultInteractions().extend([ - new PinchZoom() - ]), + interactions: defaultInteractions().extend([new PinchZoom()]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], zoom: 2, - constrainResolution: true - }) + constrainResolution: true, + }), }); diff --git a/examples/polygon-styles.js b/examples/polygon-styles.js index 7f1a03e1c2..edc37b892f 100644 --- a/examples/polygon-styles.js +++ b/examples/polygon-styles.js @@ -1,9 +1,9 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; import MultiPoint from '../src/ol/geom/MultiPoint.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; const styles = [ @@ -17,25 +17,25 @@ const styles = [ new Style({ stroke: new Stroke({ color: 'blue', - width: 3 + width: 3, }), fill: new Fill({ - color: 'rgba(0, 0, 255, 0.1)' - }) + color: 'rgba(0, 0, 255, 0.1)', + }), }), new Style({ image: new CircleStyle({ radius: 5, fill: new Fill({ - color: 'orange' - }) + color: 'orange', + }), }), - geometry: function(feature) { + geometry: function (feature) { // return the coordinates of the first ring of the polygon const coordinates = feature.getGeometry().getCoordinates()[0]; return new MultiPoint(coordinates); - } - }) + }, + }), ]; const geojsonObject = { @@ -43,47 +43,79 @@ const geojsonObject = { 'crs': { 'type': 'name', 'properties': { - 'name': 'EPSG:3857' - } + 'name': 'EPSG:3857', + }, }, - 'features': [{ - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], - [-3e6, 6e6], [-5e6, 6e6]]] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], - [0, 6e6], [-2e6, 6e6]]] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], - [3e6, 6e6], [1e6, 6e6]]] - } - }, { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[-2e6, -1e6], [-1e6, 1e6], - [0, -1e6], [-2e6, -1e6]]] - } - }] + 'features': [ + { + 'type': 'Feature', + 'geometry': { + 'type': 'Polygon', + 'coordinates': [ + [ + [-5e6, 6e6], + [-5e6, 8e6], + [-3e6, 8e6], + [-3e6, 6e6], + [-5e6, 6e6], + ], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'Polygon', + 'coordinates': [ + [ + [-2e6, 6e6], + [-2e6, 8e6], + [0, 8e6], + [0, 6e6], + [-2e6, 6e6], + ], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'Polygon', + 'coordinates': [ + [ + [1e6, 6e6], + [1e6, 8e6], + [3e6, 8e6], + [3e6, 6e6], + [1e6, 6e6], + ], + ], + }, + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'Polygon', + 'coordinates': [ + [ + [-2e6, -1e6], + [-1e6, 1e6], + [0, -1e6], + [-2e6, -1e6], + ], + ], + }, + }, + ], }; const source = new VectorSource({ - features: (new GeoJSON()).readFeatures(geojsonObject) + features: new GeoJSON().readFeatures(geojsonObject), }); const layer = new VectorLayer({ source: source, - style: styles + style: styles, }); const map = new Map({ @@ -91,6 +123,6 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 3000000], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/popup.js b/examples/popup.js index bb50da8fed..122e50f5dc 100644 --- a/examples/popup.js +++ b/examples/popup.js @@ -1,12 +1,13 @@ import Map from '../src/ol/Map.js'; import Overlay from '../src/ol/Overlay.js'; -import View from '../src/ol/View.js'; -import {toStringHDMS} from '../src/ol/coordinate.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {toLonLat} from '../src/ol/proj.js'; import TileJSON from '../src/ol/source/TileJSON.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {toLonLat} from '../src/ol/proj.js'; +import {toStringHDMS} from '../src/ol/coordinate.js'; -const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; +const key = + 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; /** * Elements that make up the popup. @@ -15,7 +16,6 @@ const container = document.getElementById('popup'); const content = document.getElementById('popup-content'); const closer = document.getElementById('popup-closer'); - /** * Create an overlay to anchor the popup to the map. */ @@ -23,22 +23,20 @@ const overlay = new Overlay({ element: container, autoPan: true, autoPanAnimation: { - duration: 250 - } + duration: 250, + }, }); - /** * Add a click handler to hide the popup. * @return {boolean} Don't follow the href. */ -closer.onclick = function() { +closer.onclick = function () { overlay.setPosition(undefined); closer.blur(); return false; }; - /** * Create the map. */ @@ -46,28 +44,28 @@ const map = new Map({ layers: [ new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?access_token=' + key, - crossOrigin: 'anonymous' - }) - }) + url: + 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?access_token=' + + key, + crossOrigin: 'anonymous', + }), + }), ], overlays: [overlay], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); - /** * Add a click handler to the map to render the popup. */ -map.on('singleclick', function(evt) { +map.on('singleclick', function (evt) { const coordinate = evt.coordinate; const hdms = toStringHDMS(toLonLat(coordinate)); - content.innerHTML = '

You clicked here:

' + hdms + - ''; + content.innerHTML = '

You clicked here:

' + hdms + ''; overlay.setPosition(coordinate); }); diff --git a/examples/preload.js b/examples/preload.js index 6bf91a82ad..4ee22ba30c 100644 --- a/examples/preload.js +++ b/examples/preload.js @@ -1,12 +1,11 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import BingMaps from '../src/ol/source/BingMaps.js'; - +import Map from '../src/ol/Map.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const view = new View({ center: [-4808600, -2620936], - zoom: 8 + zoom: 8, }); const map1 = new Map({ @@ -14,13 +13,14 @@ const map1 = new Map({ new TileLayer({ preload: Infinity, source: new BingMaps({ - key: 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ', - imagerySet: 'Aerial' - }) - }) + key: + 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ', + imagerySet: 'Aerial', + }), + }), ], target: 'map1', - view: view + view: view, }); const map2 = new Map({ @@ -28,11 +28,12 @@ const map2 = new Map({ new TileLayer({ preload: 0, // default value source: new BingMaps({ - key: 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ', - imagerySet: 'AerialWithLabelsOnDemand' - }) - }) + key: + 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ', + imagerySet: 'AerialWithLabelsOnDemand', + }), + }), ], target: 'map2', - view: view + view: view, }); diff --git a/examples/print-to-scale.js b/examples/print-to-scale.js index ec8ef2ae23..75f702ec99 100644 --- a/examples/print-to-scale.js +++ b/examples/print-to-scale.js @@ -1,18 +1,20 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, ScaleLine} from '../src/ol/control.js'; -import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js'; import TileLayer from '../src/ol/layer/Tile.js'; -import {get as getProjection, getPointResolution} from '../src/ol/proj.js'; -import {register} from '../src/ol/proj/proj4.js'; +import View from '../src/ol/View.js'; import WMTS, {optionsFromCapabilities} from '../src/ol/source/WMTS.js'; +import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js'; import proj4 from 'proj4'; +import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js'; +import {getPointResolution, get as getProjection} from '../src/ol/proj.js'; +import {register} from '../src/ol/proj/proj4.js'; - -proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' + +proj4.defs( + 'EPSG:27700', + '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' + '+x_0=400000 +y_0=-100000 +ellps=airy ' + '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' + - '+units=m +no_defs'); + '+units=m +no_defs' +); register(proj4); @@ -21,55 +23,55 @@ proj27700.setExtent([0, 0, 700000, 1300000]); const raster = new TileLayer(); -const url = 'https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Raster/MapServer/WMTS'; +const url = + 'https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Raster/MapServer/WMTS'; fetch(url) - .then(function(response) { + .then(function (response) { return response.text(); }) - .then(function(text) { + .then(function (text) { const result = new WMTSCapabilities().read(text); const options = optionsFromCapabilities(result, { - layer: 'OS_Open_Raster' + layer: 'OS_Open_Raster', }); - options.attributions = 'Contains OS data © Crown Copyright and database right ' + new Date().getFullYear(); + options.attributions = + 'Contains OS data © Crown Copyright and database right ' + + new Date().getFullYear(); options.crossOrigin = ''; options.projection = proj27700; options.wrapX = false; raster.setSource(new WMTS(options)); }); - const map = new Map({ layers: [raster], controls: defaultControls({ - attributionOptions: {collapsible: false} + attributionOptions: {collapsible: false}, }), target: 'map', view: new View({ center: [373500, 436500], projection: proj27700, - zoom: 7 - }) + zoom: 7, + }), }); const scaleLine = new ScaleLine({bar: true, text: true, minWidth: 125}); map.addControl(scaleLine); - const dims = { a0: [1189, 841], a1: [841, 594], a2: [594, 420], a3: [420, 297], a4: [297, 210], - a5: [210, 148] + a5: [210, 148], }; - // export options for html-to-image. // See: https://github.com/bubkoo/html-to-image#options const exportOptions = { - filter: function(element) { + filter: function (element) { const className = element.className || ''; return ( className.indexOf('ol-control') === -1 || @@ -77,52 +79,58 @@ const exportOptions = { (className.indexOf('ol-attribution') > -1 && className.indexOf('ol-uncollapsible')) ); - } + }, }; const exportButton = document.getElementById('export-pdf'); -exportButton.addEventListener('click', function() { +exportButton.addEventListener( + 'click', + function () { + exportButton.disabled = true; + document.body.style.cursor = 'progress'; - exportButton.disabled = true; - document.body.style.cursor = 'progress'; + const format = document.getElementById('format').value; + const resolution = document.getElementById('resolution').value; + const scale = document.getElementById('scale').value; + const dim = dims[format]; + const width = Math.round((dim[0] * resolution) / 25.4); + const height = Math.round((dim[1] * resolution) / 25.4); + const viewResolution = map.getView().getResolution(); + const scaleResolution = + scale / + getPointResolution( + map.getView().getProjection(), + resolution / 25.4, + map.getView().getCenter() + ); - const format = document.getElementById('format').value; - const resolution = document.getElementById('resolution').value; - const scale = document.getElementById('scale').value; - const dim = dims[format]; - const width = Math.round(dim[0] * resolution / 25.4); - const height = Math.round(dim[1] * resolution / 25.4); - const viewResolution = map.getView().getResolution(); - const scaleResolution = scale / getPointResolution( - map.getView().getProjection(), - resolution / 25.4, - map.getView().getCenter() - ); - - map.once('rendercomplete', function() { - exportOptions.width = width; - exportOptions.height = height; - domtoimage.toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) { - const pdf = new jsPDF('landscape', undefined, format); - pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]); - pdf.save('map.pdf'); - // Reset original map size - scaleLine.setDpi(); - map.getTargetElement().style.width = ''; - map.getTargetElement().style.height = ''; - map.updateSize(); - map.getView().setResolution(viewResolution); - exportButton.disabled = false; - document.body.style.cursor = 'auto'; + map.once('rendercomplete', function () { + exportOptions.width = width; + exportOptions.height = height; + domtoimage + .toJpeg(map.getViewport(), exportOptions) + .then(function (dataUrl) { + const pdf = new jsPDF('landscape', undefined, format); + pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]); + pdf.save('map.pdf'); + // Reset original map size + scaleLine.setDpi(); + map.getTargetElement().style.width = ''; + map.getTargetElement().style.height = ''; + map.updateSize(); + map.getView().setResolution(viewResolution); + exportButton.disabled = false; + document.body.style.cursor = 'auto'; + }); }); - }); - // Set print size - scaleLine.setDpi(resolution); - map.getTargetElement().style.width = width + 'px'; - map.getTargetElement().style.height = height + 'px'; - map.updateSize(); - map.getView().setResolution(scaleResolution); - -}, false); + // Set print size + scaleLine.setDpi(resolution); + map.getTargetElement().style.width = width + 'px'; + map.getTargetElement().style.height = height + 'px'; + map.updateSize(); + map.getView().setResolution(scaleResolution); + }, + false +); diff --git a/examples/raster.js b/examples/raster.js index b62bb8796d..2abdfd463a 100644 --- a/examples/raster.js +++ b/examples/raster.js @@ -1,14 +1,13 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -import XYZ from '../src/ol/source/XYZ.js'; import RasterSource from '../src/ol/source/Raster.js'; +import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; +import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; const minVgi = 0; const maxVgi = 0.25; const bins = 10; - /** * Calculate the Vegetation Greenness Index (VGI) from an input pixel. This * is a rough estimate assuming that pixel values correspond to reflectance. @@ -22,7 +21,6 @@ function vgi(pixel) { return (2 * g - r - b) / (2 * g + r + b); } - /** * Summarize values for a histogram. * @param {numver} value A VGI value. @@ -42,23 +40,22 @@ function summarize(value, counts) { } } - /** * Use aerial imagery as the input data for the raster source. */ const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const aerial = new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, maxZoom: 20, - crossOrigin: '' + crossOrigin: '', }); - /** * Create a raster source where pixels with VGI values above a threshold will * be colored green. @@ -71,7 +68,7 @@ const raster = new RasterSource({ * @param {Object} data User data object. * @return {Array} The output pixel. */ - operation: function(pixels, data) { + operation: function (pixels, data) { const pixel = pixels[0]; const value = vgi(pixel); summarize(value, data.counts); @@ -87,8 +84,8 @@ const raster = new RasterSource({ }, lib: { vgi: vgi, - summarize: summarize - } + summarize: summarize, + }, }); raster.set('threshold', 0.1); @@ -101,38 +98,37 @@ function createCounts(min, max, num) { min: min, max: max, values: values, - delta: (max - min) / num + delta: (max - min) / num, }; } -raster.on('beforeoperations', function(event) { +raster.on('beforeoperations', function (event) { event.data.counts = createCounts(minVgi, maxVgi, bins); event.data.threshold = raster.get('threshold'); }); -raster.on('afteroperations', function(event) { +raster.on('afteroperations', function (event) { schedulePlot(event.resolution, event.data.counts, event.data.threshold); }); const map = new Map({ layers: [ new TileLayer({ - source: aerial + source: aerial, }), new ImageLayer({ - source: raster - }) + source: raster, + }), ], target: 'map', view: new View({ center: [-9651695, 4937351], zoom: 13, minZoom: 12, - maxZoom: 19 - }) + maxZoom: 19, + }), }); - let timer = null; function schedulePlot(resolution, counts, threshold) { if (timer) { @@ -144,17 +140,19 @@ function schedulePlot(resolution, counts, threshold) { const barWidth = 15; const plotHeight = 150; -const chart = d3.select('#plot').append('svg') +const chart = d3 + .select('#plot') + .append('svg') .attr('width', barWidth * bins) .attr('height', plotHeight); const chartRect = chart.node().getBoundingClientRect(); -const tip = d3.select(document.body).append('div') - .attr('class', 'tip'); +const tip = d3.select(document.body).append('div').attr('class', 'tip'); function plot(resolution, counts, threshold) { - const yScale = d3.scaleLinear() + const yScale = d3 + .scaleLinear() .domain([0, d3.max(counts.values)]) .range([0, plotHeight]); @@ -162,49 +160,61 @@ function plot(resolution, counts, threshold) { bar.enter().append('rect'); - bar.attr('class', function(count, index) { - const value = counts.min + (index * counts.delta); - return 'bar' + (value >= threshold ? ' selected' : ''); - }) + bar + .attr('class', function (count, index) { + const value = counts.min + index * counts.delta; + return 'bar' + (value >= threshold ? ' selected' : ''); + }) .attr('width', barWidth - 2); - bar.transition().attr('transform', function(value, index) { - return 'translate(' + (index * barWidth) + ', ' + - (plotHeight - yScale(value)) + ')'; - }) + bar + .transition() + .attr('transform', function (value, index) { + return ( + 'translate(' + + index * barWidth + + ', ' + + (plotHeight - yScale(value)) + + ')' + ); + }) .attr('height', yScale); - bar.on('mousemove', function(count, index) { - const threshold = counts.min + (index * counts.delta); + bar.on('mousemove', function (count, index) { + const threshold = counts.min + index * counts.delta; if (raster.get('threshold') !== threshold) { raster.set('threshold', threshold); raster.changed(); } }); - bar.on('mouseover', function(count, index) { + bar.on('mouseover', function (count, index) { let area = 0; for (let i = counts.values.length - 1; i >= index; --i) { area += resolution * resolution * counts.values[i]; } - tip.html(message(counts.min + (index * counts.delta), area)); + tip.html(message(counts.min + index * counts.delta, area)); tip.style('display', 'block'); tip.transition().style({ - left: (chartRect.left + (index * barWidth) + (barWidth / 2)) + 'px', - top: (d3.event.y - 60) + 'px', - opacity: 1 + left: chartRect.left + index * barWidth + barWidth / 2 + 'px', + top: d3.event.y - 60 + 'px', + opacity: 1, }); }); - bar.on('mouseout', function() { - tip.transition().style('opacity', 0).each('end', function() { - tip.style('display', 'none'); - }); + bar.on('mouseout', function () { + tip + .transition() + .style('opacity', 0) + .each('end', function () { + tip.style('display', 'none'); + }); }); - } function message(value, area) { - const acres = (area / 4046.86).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ','); + const acres = (area / 4046.86) + .toFixed(0) + .replace(/\B(?=(\d{3})+(?!\d))/g, ','); return acres + ' acres at
' + value.toFixed(2) + ' VGI or above'; } diff --git a/examples/region-growing.js b/examples/region-growing.js index 9d0a9a3a26..c8e293b26e 100644 --- a/examples/region-growing.js +++ b/examples/region-growing.js @@ -1,9 +1,9 @@ import Map from '../src/ol/Map.js'; +import RasterSource from '../src/ol/source/Raster.js'; import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; import {fromLonLat} from '../src/ol/proj.js'; -import XYZ from '../src/ol/source/XYZ.js'; -import RasterSource from '../src/ol/source/Raster.js'; function growRegion(inputs, data) { const image = inputs[0]; @@ -43,8 +43,11 @@ function growRegion(inputs, data) { if (ca === 0) { continue; } - if (Math.abs(seedR - cr) < delta && Math.abs(seedG - cg) < delta && - Math.abs(seedB - cb) < delta) { + if ( + Math.abs(seedR - cr) < delta && + Math.abs(seedG - cg) < delta && + Math.abs(seedB - cb) < delta + ) { outputData[ci] = 255; outputData[ci + 1] = 0; outputData[ci + 2] = 0; @@ -68,12 +71,13 @@ function next4Edges(edge) { [x + 1, y], [x - 1, y], [x, y + 1], - [x, y - 1] + [x, y - 1], ]; } const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const imagery = new TileLayer({ @@ -81,8 +85,8 @@ const imagery = new TileLayer({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, maxZoom: 20, - crossOrigin: '' - }) + crossOrigin: '', + }), }); const raster = new RasterSource({ @@ -92,13 +96,13 @@ const raster = new RasterSource({ // Functions in the `lib` object will be available to the operation run in // the web worker. lib: { - next4Edges: next4Edges - } + next4Edges: next4Edges, + }, }); const rasterImage = new ImageLayer({ opacity: 0.7, - source: raster + source: raster, }); const map = new Map({ @@ -106,20 +110,20 @@ const map = new Map({ target: 'map', view: new View({ center: fromLonLat([-119.07, 47.65]), - zoom: 11 - }) + zoom: 11, + }), }); let coordinate; -map.on('click', function(event) { +map.on('click', function (event) { coordinate = event.coordinate; raster.changed(); }); const thresholdControl = document.getElementById('threshold'); -raster.on('beforeoperations', function(event) { +raster.on('beforeoperations', function (event) { // the event.data object will be passed to operations const data = event.data; data.delta = thresholdControl.value; @@ -133,7 +137,7 @@ function updateControlValue() { } updateControlValue(); -thresholdControl.addEventListener('input', function() { +thresholdControl.addEventListener('input', function () { updateControlValue(); raster.changed(); }); diff --git a/examples/regularshape.js b/examples/regularshape.js index 0c194892d3..83eab335d1 100644 --- a/examples/regularshape.js +++ b/examples/regularshape.js @@ -1,12 +1,11 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, RegularShape, Stroke, Style} from '../src/ol/style.js'; - const stroke = new Stroke({color: 'black', width: 2}); const fill = new Fill({color: 'red'}); @@ -17,8 +16,8 @@ const styles = { stroke: stroke, points: 4, radius: 10, - angle: Math.PI / 4 - }) + angle: Math.PI / 4, + }), }), 'triangle': new Style({ image: new RegularShape({ @@ -27,8 +26,8 @@ const styles = { points: 3, radius: 10, rotation: Math.PI / 4, - angle: 0 - }) + angle: 0, + }), }), 'star': new Style({ image: new RegularShape({ @@ -37,8 +36,8 @@ const styles = { points: 5, radius: 10, radius2: 4, - angle: 0 - }) + angle: 0, + }), }), 'cross': new Style({ image: new RegularShape({ @@ -47,8 +46,8 @@ const styles = { points: 4, radius: 10, radius2: 0, - angle: 0 - }) + angle: 0, + }), }), 'x': new Style({ image: new RegularShape({ @@ -57,8 +56,8 @@ const styles = { points: 4, radius: 10, radius2: 0, - angle: Math.PI / 4 - }) + angle: Math.PI / 4, + }), }), 'stacked': [ new Style({ @@ -68,8 +67,8 @@ const styles = { points: 4, radius: 5, angle: Math.PI / 4, - displacement: [0, 10] - }) + displacement: [0, 10], + }), }), new Style({ image: new RegularShape({ @@ -77,13 +76,12 @@ const styles = { stroke: stroke, points: 4, radius: 10, - angle: Math.PI / 4 - }) - }) - ] + angle: Math.PI / 4, + }), + }), + ], }; - const styleKeys = ['x', 'cross', 'star', 'triangle', 'square', 'stacked']; const count = 250; const features = new Array(count); @@ -95,20 +93,18 @@ for (let i = 0; i < count; ++i) { } const source = new VectorSource({ - features: features + features: features, }); const vectorLayer = new VectorLayer({ - source: source + source: source, }); const map = new Map({ - layers: [ - vectorLayer - ], + layers: [vectorLayer], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/render-geometry.js b/examples/render-geometry.js index d3e1be366a..f21c4d9308 100644 --- a/examples/render-geometry.js +++ b/examples/render-geometry.js @@ -1,7 +1,6 @@ +import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; import {LineString, Point, Polygon} from '../src/ol/geom.js'; import {toContext} from '../src/ol/render.js'; -import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; - const canvas = document.getElementById('canvas'); const vectorContext = toContext(canvas.getContext('2d'), {size: [100, 100]}); @@ -14,11 +13,25 @@ const style = new Style({ image: new CircleStyle({ radius: 10, fill: fill, - stroke: stroke - }) + stroke: stroke, + }), }); vectorContext.setStyle(style); -vectorContext.drawGeometry(new LineString([[10, 10], [90, 90]])); -vectorContext.drawGeometry(new Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]])); +vectorContext.drawGeometry( + new LineString([ + [10, 10], + [90, 90], + ]) +); +vectorContext.drawGeometry( + new Polygon([ + [ + [2, 2], + [98, 2], + [2, 98], + [2, 2], + ], + ]) +); vectorContext.drawGeometry(new Point([88, 88])); diff --git a/examples/reprojection-by-code.js b/examples/reprojection-by-code.js index 0f72fa3a48..2926a94486 100644 --- a/examples/reprojection-by-code.js +++ b/examples/reprojection-by-code.js @@ -1,44 +1,42 @@ -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 Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; +import Stroke from '../src/ol/style/Stroke.js'; +import TileImage from '../src/ol/source/TileImage.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import proj4 from 'proj4'; +import {applyTransform} from '../src/ol/extent.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] + lineDash: [0.5, 4], }), showLabels: true, visible: false, - wrapX: false + wrapX: false, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), - graticule + graticule, ], target: 'map', view: new View({ projection: 'EPSG:3857', center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); - const queryInput = document.getElementById('epsg-query'); const searchButton = document.getElementById('epsg-search'); const resultSpan = document.getElementById('epsg-result'); @@ -48,11 +46,13 @@ const showGraticuleCheckbox = document.getElementById('show-graticule'); function setProjection(code, name, proj4def, bbox) { if (code === null || name === null || proj4def === null || bbox === null) { resultSpan.innerHTML = 'Nothing usable found, using EPSG:3857...'; - map.setView(new View({ - projection: 'EPSG:3857', - center: [0, 0], - zoom: 1 - })); + map.setView( + new View({ + projection: 'EPSG:3857', + center: [0, 0], + zoom: 1, + }) + ); return; } @@ -75,55 +75,60 @@ function setProjection(code, name, proj4def, bbox) { const extent = applyTransform(worldExtent, fromLonLat, undefined, 8); newProj.setExtent(extent); const newView = new View({ - projection: newProj + projection: newProj, }); map.setView(newView); newView.fit(extent); } - function search(query) { resultSpan.innerHTML = 'Searching ...'; - fetch('https://epsg.io/?format=json&q=' + query).then(function(response) { - return response.json(); - }).then(function(json) { - const results = json['results']; - if (results && results.length > 0) { - for (let i = 0, ii = results.length; i < ii; i++) { - const result = results[i]; - if (result) { - const code = result['code']; - const name = result['name']; - const proj4def = result['proj4']; - const bbox = result['bbox']; - if (code && code.length > 0 && proj4def && proj4def.length > 0 && - bbox && bbox.length == 4) { - setProjection(code, name, proj4def, bbox); - return; + fetch('https://epsg.io/?format=json&q=' + query) + .then(function (response) { + return response.json(); + }) + .then(function (json) { + const results = json['results']; + if (results && results.length > 0) { + for (let i = 0, ii = results.length; i < ii; i++) { + const result = results[i]; + if (result) { + const code = result['code']; + const name = result['name']; + const proj4def = result['proj4']; + const bbox = result['bbox']; + if ( + code && + code.length > 0 && + proj4def && + proj4def.length > 0 && + bbox && + bbox.length == 4 + ) { + setProjection(code, name, proj4def, bbox); + return; + } } } } - } - setProjection(null, null, null, null); - }); + setProjection(null, null, null, null); + }); } - /** * Handle click event. * @param {Event} event The event. */ -searchButton.onclick = function(event) { +searchButton.onclick = function (event) { search(queryInput.value); event.preventDefault(); }; - /** * Handle checkbox change event. */ -renderEdgesCheckbox.onchange = function() { - map.getLayers().forEach(function(layer) { +renderEdgesCheckbox.onchange = function () { + map.getLayers().forEach(function (layer) { if (layer instanceof TileLayer) { const source = layer.getSource(); if (source instanceof TileImage) { @@ -136,6 +141,6 @@ renderEdgesCheckbox.onchange = function() { /** * Handle checkbox change event. */ -showGraticuleCheckbox.onchange = function() { +showGraticuleCheckbox.onchange = function () { graticule.setVisible(showGraticuleCheckbox.checked); }; diff --git a/examples/reprojection-image.js b/examples/reprojection-image.js index 642ca466ee..2d6c815b03 100644 --- a/examples/reprojection-image.js +++ b/examples/reprojection-image.js @@ -1,17 +1,20 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {getCenter} from '../src/ol/extent.js'; -import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -import {transform} from '../src/ol/proj.js'; -import Static from '../src/ol/source/ImageStatic.js'; import OSM from '../src/ol/source/OSM.js'; -import {register} from '../src/ol/proj/proj4.js'; +import Static from '../src/ol/source/ImageStatic.js'; +import View from '../src/ol/View.js'; import proj4 from 'proj4'; +import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; +import {getCenter} from '../src/ol/extent.js'; +import {register} from '../src/ol/proj/proj4.js'; +import {transform} from '../src/ol/proj.js'; -proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' + +proj4.defs( + 'EPSG:27700', + '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' + '+x_0=400000 +y_0=-100000 +ellps=airy ' + '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' + - '+units=m +no_defs'); + '+units=m +no_defs' +); register(proj4); const imageExtent = [0, 0, 700000, 1300000]; @@ -19,21 +22,22 @@ const imageExtent = [0, 0, 700000, 1300000]; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new ImageLayer({ source: new Static({ - url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/' + - 'British_National_Grid.svg/2000px-British_National_Grid.svg.png', + url: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/' + + 'British_National_Grid.svg/2000px-British_National_Grid.svg.png', crossOrigin: '', projection: 'EPSG:27700', - imageExtent: imageExtent - }) - }) + imageExtent: imageExtent, + }), + }), ], target: 'map', view: new View({ center: transform(getCenter(imageExtent), 'EPSG:27700', 'EPSG:3857'), - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/reprojection-wgs84.js b/examples/reprojection-wgs84.js index 0811ef85b3..e512bef6f8 100644 --- a/examples/reprojection-wgs84.js +++ b/examples/reprojection-wgs84.js @@ -1,18 +1,18 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ projection: 'EPSG:4326', center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/reprojection.js b/examples/reprojection.js index 0d4dd4d9a9..10146f47fc 100644 --- a/examples/reprojection.js +++ b/examples/reprojection.js @@ -1,44 +1,63 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {getWidth, getCenter} from '../src/ol/extent.js'; -import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js'; +import TileGrid from '../src/ol/tilegrid/TileGrid.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import WMTS, {optionsFromCapabilities} from '../src/ol/source/WMTS.js'; +import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js'; +import proj4 from 'proj4'; +import {OSM, TileImage, TileWMS, XYZ} from '../src/ol/source.js'; +import {getCenter, getWidth} from '../src/ol/extent.js'; import {get as getProjection} from '../src/ol/proj.js'; import {register} from '../src/ol/proj/proj4.js'; -import {OSM, TileImage, TileWMS, XYZ} from '../src/ol/source.js'; -import WMTS, {optionsFromCapabilities} from '../src/ol/source/WMTS.js'; -import TileGrid from '../src/ol/tilegrid/TileGrid.js'; -import proj4 from 'proj4'; - -proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' + +proj4.defs( + 'EPSG:27700', + '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' + '+x_0=400000 +y_0=-100000 +ellps=airy ' + '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' + - '+units=m +no_defs'); -proj4.defs('EPSG:23032', '+proj=utm +zone=32 +ellps=intl ' + - '+towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs'); -proj4.defs('EPSG:5479', '+proj=lcc +lat_1=-76.66666666666667 +lat_2=' + + '+units=m +no_defs' +); +proj4.defs( + 'EPSG:23032', + '+proj=utm +zone=32 +ellps=intl ' + + '+towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs' +); +proj4.defs( + 'EPSG:5479', + '+proj=lcc +lat_1=-76.66666666666667 +lat_2=' + '-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 ' + - '+ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'); -proj4.defs('EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 ' + + '+ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs' +); +proj4.defs( + 'EPSG:21781', + '+proj=somerc +lat_0=46.95240555555556 ' + '+lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel ' + - '+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs'); -proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 ' + - '+x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'); -proj4.defs('EPSG:2163', '+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 ' + - '+a=6370997 +b=6370997 +units=m +no_defs'); -proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 ' + - '+units=m +no_defs'); + '+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs' +); +proj4.defs( + 'EPSG:3413', + '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 ' + + '+x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs' +); +proj4.defs( + 'EPSG:2163', + '+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 ' + + '+a=6370997 +b=6370997 +units=m +no_defs' +); +proj4.defs( + 'ESRI:54009', + '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 ' + '+units=m +no_defs' +); register(proj4); const proj27700 = getProjection('EPSG:27700'); proj27700.setExtent([0, 0, 700000, 1300000]); const proj23032 = getProjection('EPSG:23032'); -proj23032.setExtent([-1206118.71, 4021309.92, 1295389.00, 8051813.28]); +proj23032.setExtent([-1206118.71, 4021309.92, 1295389.0, 8051813.28]); const proj5479 = getProjection('EPSG:5479'); -proj5479.setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]); +proj5479.setExtent([6825737.53, 4189159.8, 9633741.96, 5782472.71]); const proj21781 = getProjection('EPSG:21781'); proj21781.setExtent([485071.54, 75346.36, 828515.78, 299941.84]); @@ -47,16 +66,15 @@ const proj3413 = getProjection('EPSG:3413'); proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]); const proj2163 = getProjection('EPSG:2163'); -proj2163.setExtent([-8040784.5135, -2577524.9210, 3668901.4484, 4785105.1096]); +proj2163.setExtent([-8040784.5135, -2577524.921, 3668901.4484, 4785105.1096]); const proj54009 = getProjection('ESRI:54009'); proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]); - const layers = {}; layers['osm'] = new TileLayer({ - source: new OSM() + source: new OSM(), }); layers['wms4326'] = new TileLayer({ @@ -65,60 +83,68 @@ layers['wms4326'] = new TileLayer({ crossOrigin: '', params: { 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR', - 'TILED': true + 'TILED': true, }, - projection: 'EPSG:4326' - }) + projection: 'EPSG:4326', + }), }); layers['wms21781'] = new TileLayer({ source: new TileWMS({ - attributions: '© Pixelmap 1:1000000 / geo.admin.ch', crossOrigin: 'anonymous', params: { 'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale', - 'FORMAT': 'image/jpeg' + 'FORMAT': 'image/jpeg', }, url: 'https://wms.geo.admin.ch/', - projection: 'EPSG:21781' - }) + projection: 'EPSG:21781', + }), }); const parser = new WMTSCapabilities(); layers['wmts3413'] = new TileLayer(); -const urlA = 'https://map1.vis.earthdata.nasa.gov/wmts-arctic/' + - 'wmts.cgi?SERVICE=WMTS&request=GetCapabilities'; -fetch(urlA).then(function(response) { - return response.text(); -}).then(function(text) { - const result = parser.read(text); - const options = optionsFromCapabilities(result, { - layer: 'OSM_Land_Mask', - matrixSet: 'EPSG3413_250m' +const urlA = + 'https://map1.vis.earthdata.nasa.gov/wmts-arctic/' + + 'wmts.cgi?SERVICE=WMTS&request=GetCapabilities'; +fetch(urlA) + .then(function (response) { + return response.text(); + }) + .then(function (text) { + const result = parser.read(text); + const options = optionsFromCapabilities(result, { + layer: 'OSM_Land_Mask', + matrixSet: 'EPSG3413_250m', + }); + options.crossOrigin = ''; + options.projection = 'EPSG:3413'; + options.wrapX = false; + layers['wmts3413'].setSource(new WMTS(options)); }); - options.crossOrigin = ''; - options.projection = 'EPSG:3413'; - options.wrapX = false; - layers['wmts3413'].setSource(new WMTS(options)); -}); layers['bng'] = new TileLayer(); -const urlB = 'https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Raster/MapServer/WMTS'; -fetch(urlB).then(function(response) { - return response.text(); -}).then(function(text) { - const result = parser.read(text); - const options = optionsFromCapabilities(result, { - layer: 'OS_Open_Raster' +const urlB = + 'https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Raster/MapServer/WMTS'; +fetch(urlB) + .then(function (response) { + return response.text(); + }) + .then(function (text) { + const result = parser.read(text); + const options = optionsFromCapabilities(result, { + layer: 'OS_Open_Raster', + }); + options.attributions = + 'Contains OS data © Crown Copyright and database right 2019'; + options.crossOrigin = ''; + options.projection = 'EPSG:27700'; + options.wrapX = false; + layers['bng'].setSource(new WMTS(options)); }); - options.attributions = 'Contains OS data © Crown Copyright and database right 2019'; - options.crossOrigin = ''; - options.projection = 'EPSG:27700'; - options.wrapX = false; - layers['bng'].setSource(new WMTS(options)); -}); layers['grandcanyon'] = new TileLayer({ source: new XYZ({ @@ -126,13 +152,13 @@ layers['grandcanyon'] = new TileLayer({ crossOrigin: '', tilePixelRatio: 2, maxZoom: 15, - attributions: 'Tiles © USGS, rendered with ' + - 'MapTiler' - }) + attributions: + 'Tiles © USGS, rendered with ' + + 'MapTiler', + }), }); -const startResolution = - getWidth(getProjection('EPSG:3857').getExtent()) / 256; +const startResolution = getWidth(getProjection('EPSG:3857').getExtent()) / 256; const resolutions = new Array(22); for (let i = 0, ii = resolutions.length; i < ii; ++i) { resolutions[i] = startResolution / Math.pow(2, i); @@ -147,27 +173,22 @@ layers['states'] = new TileLayer({ tileGrid: new TileGrid({ extent: [-13884991, 2870341, -7455066, 6338219], resolutions: resolutions, - tileSize: [512, 256] + tileSize: [512, 256], }), - projection: 'EPSG:3857' - }) + projection: 'EPSG:3857', + }), }); - const map = new Map({ - layers: [ - layers['osm'], - layers['bng'] - ], + layers: [layers['osm'], layers['bng']], target: 'map', view: new View({ projection: 'EPSG:3857', center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); - const baseLayerSelect = document.getElementById('base-layer'); const overlayLayerSelect = document.getElementById('overlay-layer'); const viewProjSelect = document.getElementById('view-projection'); @@ -181,7 +202,7 @@ function updateViewProjection() { projection: newProj, center: getCenter(newProjExtent || [0, 0, 0, 0]), zoom: 0, - extent: newProjExtent || undefined + extent: newProjExtent || undefined, }); map.setView(newView); @@ -193,17 +214,16 @@ function updateViewProjection() { } } - /** * Handle change event. */ -viewProjSelect.onchange = function() { +viewProjSelect.onchange = function () { updateViewProjection(); }; updateViewProjection(); -const updateRenderEdgesOnLayer = function(layer) { +const updateRenderEdgesOnLayer = function (layer) { if (layer instanceof TileLayer) { const source = layer.getSource(); if (source instanceof TileImage) { @@ -212,11 +232,10 @@ const updateRenderEdgesOnLayer = function(layer) { } }; - /** * Handle change event. */ -baseLayerSelect.onchange = function() { +baseLayerSelect.onchange = function () { const layer = layers[baseLayerSelect.value]; if (layer) { layer.setOpacity(1); @@ -225,11 +244,10 @@ baseLayerSelect.onchange = function() { } }; - /** * Handle change event. */ -overlayLayerSelect.onchange = function() { +overlayLayerSelect.onchange = function () { const layer = layers[overlayLayerSelect.value]; if (layer) { layer.setOpacity(0.7); @@ -238,13 +256,12 @@ overlayLayerSelect.onchange = function() { } }; - /** * Handle change event. */ -renderEdgesCheckbox.onchange = function() { +renderEdgesCheckbox.onchange = function () { renderEdges = renderEdgesCheckbox.checked; - map.getLayers().forEach(function(layer) { + map.getLayers().forEach(function (layer) { updateRenderEdgesOnLayer(layer); }); }; diff --git a/examples/reusable-source.js b/examples/reusable-source.js index 862ee919f9..516c4d268b 100644 --- a/examples/reusable-source.js +++ b/examples/reusable-source.js @@ -1,15 +1,20 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; -const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const key = + 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; const baseUrl = 'https://{a-c}.tiles.mapbox.com/v4'; const urls = [ baseUrl + '/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png?access_token=' + key, - baseUrl + '/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png?access_token=' + key, + baseUrl + + '/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png?access_token=' + + key, baseUrl + '/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png?access_token=' + key, - baseUrl + '/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png?access_token=' + key + baseUrl + + '/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png?access_token=' + + key, ]; const source = new XYZ(); @@ -18,16 +23,15 @@ const map = new Map({ target: 'map', layers: [ new TileLayer({ - source: source - }) + source: source, + }), ], view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); - function updateUrl(index) { source.setUrl(urls[index]); } diff --git a/examples/rotation.js b/examples/rotation.js index 4a1d8b6956..8ca856222a 100644 --- a/examples/rotation.js +++ b/examples/rotation.js @@ -1,19 +1,18 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [14200000, 4130000], rotation: Math.PI / 6, - zoom: 10 - }) + zoom: 10, + }), }); diff --git a/examples/scale-line.js b/examples/scale-line.js index 0fad817b12..d961b13d41 100644 --- a/examples/scale-line.js +++ b/examples/scale-line.js @@ -1,8 +1,8 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, ScaleLine} from '../src/ol/control.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js'; const unitsSelect = document.getElementById('units'); const typeSelect = document.getElementById('type'); @@ -18,7 +18,7 @@ let control; function scaleControl() { if (scaleType === 'scaleline') { control = new ScaleLine({ - units: unitsSelect.value + units: unitsSelect.value, }); return control; } @@ -27,24 +27,22 @@ function scaleControl() { bar: true, steps: scaleBarSteps, text: scaleBarText, - minWidth: 140 + minWidth: 140, }); return control; } const map = new Map({ - controls: defaultControls().extend([ - scaleControl() - ]), + controls: defaultControls().extend([scaleControl()]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); function onChange() { diff --git a/examples/scaleline-indiana-east.js b/examples/scaleline-indiana-east.js index b0c2aa3f07..af5173e0f7 100644 --- a/examples/scaleline-indiana-east.js +++ b/examples/scaleline-indiana-east.js @@ -1,13 +1,15 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {ScaleLine} from '../src/ol/control.js'; +import OSM from '../src/ol/source/OSM.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import proj4 from 'proj4'; +import {ScaleLine} from '../src/ol/control.js'; import {fromLonLat, transformExtent} from '../src/ol/proj.js'; import {register} from '../src/ol/proj/proj4.js'; -import OSM from '../src/ol/source/OSM.js'; -import proj4 from 'proj4'; -proj4.defs('Indiana-East', 'PROJCS["IN83-EF",GEOGCS["LL83",DATUM["NAD83",' + +proj4.defs( + 'Indiana-East', + 'PROJCS["IN83-EF",GEOGCS["LL83",DATUM["NAD83",' + 'SPHEROID["GRS1980",6378137.000,298.25722210]],PRIMEM["Greenwich",0],' + 'UNIT["Degree",0.017453292519943295]],PROJECTION["Transverse_Mercator"],' + 'PARAMETER["false_easting",328083.333],' + @@ -15,24 +17,28 @@ proj4.defs('Indiana-East', 'PROJCS["IN83-EF",GEOGCS["LL83",DATUM["NAD83",' + 'PARAMETER["scale_factor",0.999966666667],' + 'PARAMETER["central_meridian",-85.66666666666670],' + 'PARAMETER["latitude_of_origin",37.50000000000000],' + - 'UNIT["Foot_US",0.30480060960122]]'); + 'UNIT["Foot_US",0.30480060960122]]' +); register(proj4); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ projection: 'Indiana-East', center: fromLonLat([-85.685, 39.891], 'Indiana-East'), zoom: 7, - extent: transformExtent([-172.54, 23.81, -47.74, 86.46], - 'EPSG:4326', 'Indiana-East'), - minZoom: 6 - }) + extent: transformExtent( + [-172.54, 23.81, -47.74, 86.46], + 'EPSG:4326', + 'Indiana-East' + ), + minZoom: 6, + }), }); map.addControl(new ScaleLine({units: 'us'})); diff --git a/examples/sea-level.js b/examples/sea-level.js index f52cdb0aad..aeb5416684 100644 --- a/examples/sea-level.js +++ b/examples/sea-level.js @@ -1,14 +1,15 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -import {fromLonLat} from '../src/ol/proj.js'; -import {Raster as RasterSource, TileJSON} from '../src/ol/source.js'; import XYZ from '../src/ol/source/XYZ.js'; +import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; +import {Raster as RasterSource, TileJSON} from '../src/ol/source.js'; +import {fromLonLat} from '../src/ol/proj.js'; function flood(pixels, data) { const pixel = pixels[0]; if (pixel[3]) { - const height = -10000 + ((pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1); + const height = + -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1; if (height <= data.level) { pixel[0] = 145; pixel[1] = 175; @@ -21,21 +22,24 @@ function flood(pixels, data) { return pixel; } -const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; +const key = + 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; const elevation = new TileLayer({ source: new XYZ({ - url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key, - crossOrigin: 'anonymous' - }) + url: + 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + + key, + crossOrigin: 'anonymous', + }), }); -elevation.on('prerender', function(evt) { +elevation.on('prerender', function (evt) { evt.context.imageSmoothingEnabled = false; evt.context.msImageSmoothingEnabled = false; }); const raster = new RasterSource({ sources: [elevation], - operation: flood + operation: flood, }); const map = new Map({ @@ -43,30 +47,32 @@ const map = new Map({ layers: [ new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' + key, - crossOrigin: 'anonymous' - }) + url: + 'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' + + key, + crossOrigin: 'anonymous', + }), }), new ImageLayer({ opacity: 0.6, - source: raster - }) + source: raster, + }), ], view: new View({ center: fromLonLat([-122.3267, 37.8377]), - zoom: 11 - }) + zoom: 11, + }), }); const control = document.getElementById('level'); const output = document.getElementById('output'); -control.addEventListener('input', function() { +control.addEventListener('input', function () { output.innerText = control.value; raster.changed(); }); output.innerText = control.value; -raster.on('beforeoperations', function(event) { +raster.on('beforeoperations', function (event) { event.data.level = control.value; }); diff --git a/examples/select-features.js b/examples/select-features.js index 0303c58896..3196fe96f4 100644 --- a/examples/select-features.js +++ b/examples/select-features.js @@ -1,21 +1,21 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {click, pointerMove, altKeyOnly} from '../src/ol/events/condition.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; -import Select from '../src/ol/interaction/Select.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import Map from '../src/ol/Map.js'; import OSM from '../src/ol/source/OSM.js'; +import Select from '../src/ol/interaction/Select.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {altKeyOnly, click, pointerMove} from '../src/ol/events/condition.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const vector = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() - }) + format: new GeoJSON(), + }), }); const map = new Map({ @@ -23,8 +23,8 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); let select = null; // ref to currently selected interaction @@ -34,23 +34,23 @@ const selectSingleClick = new Select(); // select interaction working on "click" const selectClick = new Select({ - condition: click + condition: click, }); // select interaction working on "pointermove" const selectPointerMove = new Select({ - condition: pointerMove + condition: pointerMove, }); const selectAltClick = new Select({ - condition: function(mapBrowserEvent) { + condition: function (mapBrowserEvent) { return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent); - } + }, }); const selectElement = document.getElementById('type'); -const changeInteraction = function() { +const changeInteraction = function () { if (select !== null) { map.removeInteraction(select); } @@ -68,16 +68,19 @@ const changeInteraction = function() { } if (select !== null) { map.addInteraction(select); - select.on('select', function(e) { - document.getElementById('status').innerHTML = ' ' + - e.target.getFeatures().getLength() + - ' selected features (last operation selected ' + e.selected.length + - ' and deselected ' + e.deselected.length + ' features)'; + select.on('select', function (e) { + document.getElementById('status').innerHTML = + ' ' + + e.target.getFeatures().getLength() + + ' selected features (last operation selected ' + + e.selected.length + + ' and deselected ' + + e.deselected.length + + ' features)'; }); } }; - /** * onchange callback on the select element. */ diff --git a/examples/select-hover-features.js b/examples/select-hover-features.js index 00a0ace04a..4244481382 100644 --- a/examples/select-hover-features.js +++ b/examples/select-hover-features.js @@ -1,32 +1,32 @@ -import Map from '../src/ol/Map.js'; -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 OSM from '../src/ol/source/OSM.js'; -import VectorSource from '../src/ol/source/Vector.js'; -import Style from '../src/ol/style/Style.js'; import Fill from '../src/ol/style/Fill.js'; +import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; import Stroke from '../src/ol/style/Stroke.js'; +import Style from '../src/ol/style/Style.js'; +import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const highlightStyle = new Style({ fill: new Fill({ - color: 'rgba(255,255,255,0.7)' + color: 'rgba(255,255,255,0.7)', }), stroke: new Stroke({ color: '#3399CC', - width: 3 - }) + width: 3, + }), }); const vector = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() - }) + format: new GeoJSON(), + }), }); const map = new Map({ @@ -34,20 +34,20 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); let selected = null; const status = document.getElementById('status'); -map.on('pointermove', function(e) { +map.on('pointermove', function (e) { if (selected !== null) { selected.setStyle(undefined); selected = null; } - map.forEachFeatureAtPixel(e.pixel, function(f) { + map.forEachFeatureAtPixel(e.pixel, function (f) { selected = f; f.setStyle(highlightStyle); return true; diff --git a/examples/select-multiple-features.js b/examples/select-multiple-features.js index e28864d637..49feaff100 100644 --- a/examples/select-multiple-features.js +++ b/examples/select-multiple-features.js @@ -1,32 +1,32 @@ -import Map from '../src/ol/Map.js'; -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 OSM from '../src/ol/source/OSM.js'; -import VectorSource from '../src/ol/source/Vector.js'; -import Style from '../src/ol/style/Style.js'; import Fill from '../src/ol/style/Fill.js'; +import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; import Stroke from '../src/ol/style/Stroke.js'; +import Style from '../src/ol/style/Style.js'; +import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const highlightStyle = new Style({ fill: new Fill({ - color: 'rgba(255,255,255,0.7)' + color: 'rgba(255,255,255,0.7)', }), stroke: new Stroke({ color: '#3399CC', - width: 3 - }) + width: 3, + }), }); const vector = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() - }) + format: new GeoJSON(), + }), }); const map = new Map({ @@ -35,16 +35,16 @@ const map = new Map({ view: new View({ center: [0, 0], zoom: 2, - multiWorld: true - }) + multiWorld: true, + }), }); const selected = []; const status = document.getElementById('status'); -map.on('singleclick', function(e) { - map.forEachFeatureAtPixel(e.pixel, function(f) { +map.on('singleclick', function (e) { + map.forEachFeatureAtPixel(e.pixel, function (f) { const selIndex = selected.indexOf(f); if (selIndex < 0) { selected.push(f); diff --git a/examples/semi-transparent-layer.js b/examples/semi-transparent-layer.js index e2ff9941b0..136cd65f1b 100644 --- a/examples/semi-transparent-layer.js +++ b/examples/semi-transparent-layer.js @@ -1,30 +1,33 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat} from '../src/ol/proj.js'; import OSM from '../src/ol/source/OSM.js'; import TileJSON from '../src/ol/source/TileJSON.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {fromLonLat} from '../src/ol/proj.js'; -const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const key = + 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; const map = new Map({ layers: [ new TileLayer({ className: 'bw', - source: new OSM() + source: new OSM(), }), new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.va-quake-aug.json?secure&access_token=' + key, + url: + 'https://api.tiles.mapbox.com/v4/mapbox.va-quake-aug.json?secure&access_token=' + + key, crossOrigin: 'anonymous', // this layer has transparency, so do not fade tiles: - transition: 0 - }) - }) + transition: 0, + }), + }), ], target: 'map', view: new View({ center: fromLonLat([-77.93255, 37.9555]), - zoom: 7 - }) + zoom: 7, + }), }); diff --git a/examples/shaded-relief.js b/examples/shaded-relief.js index f0e2c4f796..d28545d6ae 100644 --- a/examples/shaded-relief.js +++ b/examples/shaded-relief.js @@ -3,7 +3,6 @@ import View from '../src/ol/View.js'; import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; import {OSM, Raster, XYZ} from '../src/ol/source.js'; - /** * Generates a shaded relief image given elevation data. Uses a 3x3 * neighborhood for determining slope and aspect. @@ -23,12 +22,25 @@ function shade(inputs, data) { const pixel = [0, 0, 0, 0]; const twoPi = 2 * Math.PI; const halfPi = Math.PI / 2; - const sunEl = Math.PI * data.sunEl / 180; - const sunAz = Math.PI * data.sunAz / 180; + const sunEl = (Math.PI * data.sunEl) / 180; + const sunAz = (Math.PI * data.sunAz) / 180; const cosSunEl = Math.cos(sunEl); const sinSunEl = Math.sin(sunEl); - let pixelX, pixelY, x0, x1, y0, y1, offset, - z0, z1, dzdx, dzdy, slope, aspect, cosIncidence, scaled; + let pixelX, + pixelY, + x0, + x1, + y0, + y1, + offset, + z0, + z1, + dzdx, + dzdy, + slope, + aspect, + cosIncidence, + scaled; for (pixelY = 0; pixelY <= maxY; ++pixelY) { y0 = pixelY === 0 ? 0 : pixelY - 1; y1 = pixelY === maxY ? maxY : pixelY + 1; @@ -83,8 +95,9 @@ function shade(inputs, data) { aspect = halfPi - aspect; } - cosIncidence = sinSunEl * Math.cos(slope) + - cosSunEl * Math.sin(slope) * Math.cos(sunAz - aspect); + cosIncidence = + sinSunEl * Math.cos(slope) + + cosSunEl * Math.sin(slope) * Math.cos(sunAz - aspect); offset = (pixelY * width + pixelX) * 4; scaled = 255 * cosIncidence; @@ -100,41 +113,41 @@ function shade(inputs, data) { const elevation = new XYZ({ url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png', - crossOrigin: 'anonymous' + crossOrigin: 'anonymous', }); const raster = new Raster({ sources: [elevation], operationType: 'image', - operation: shade + operation: shade, }); const map = new Map({ target: 'map', layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new ImageLayer({ opacity: 0.3, - source: raster - }) + source: raster, + }), ], view: new View({ extent: [-13675026, 4439648, -13580856, 4580292], center: [-13615645, 4497969], minZoom: 10, maxZoom: 16, - zoom: 13 - }) + zoom: 13, + }), }); const controlIds = ['vert', 'sunEl', 'sunAz']; const controls = {}; -controlIds.forEach(function(id) { +controlIds.forEach(function (id) { const control = document.getElementById(id); const output = document.getElementById(id + 'Out'); - control.addEventListener('input', function() { + control.addEventListener('input', function () { output.innerText = control.value; raster.changed(); }); @@ -142,7 +155,7 @@ controlIds.forEach(function(id) { controls[id] = control; }); -raster.on('beforeoperations', function(event) { +raster.on('beforeoperations', function (event) { // the event.data object will be passed to operations const data = event.data; data.resolution = event.resolution; diff --git a/examples/side-by-side.js b/examples/side-by-side.js index 3c8883e3e1..60a445fa0b 100644 --- a/examples/side-by-side.js +++ b/examples/side-by-side.js @@ -1,10 +1,11 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const roadLayer = new TileLayer({ @@ -12,31 +13,31 @@ const roadLayer = new TileLayer({ attributions: attributions, url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key, tileSize: 512, - maxZoom: 22 - }) + maxZoom: 22, + }), }); const aerialLayer = new TileLayer({ source: new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) + maxZoom: 20, + }), }); const view = new View({ center: [-6655.5402445057125, 6709968.258934638], - zoom: 13 + zoom: 13, }); const map1 = new Map({ target: 'roadMap', layers: [roadLayer], - view: view + view: view, }); const map2 = new Map({ target: 'aerialMap', layers: [aerialLayer], - view: view + view: view, }); diff --git a/examples/simple.js b/examples/simple.js index e128b8e9ec..3c60ab0748 100644 --- a/examples/simple.js +++ b/examples/simple.js @@ -1,18 +1,17 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/snap.js b/examples/snap.js index ab5d16d24c..80cf489d11 100644 --- a/examples/snap.js +++ b/examples/snap.js @@ -1,31 +1,31 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {Draw, Modify, Select, Snap} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {Draw, Modify, Select, Snap} from '../src/ol/interaction.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const vector = new VectorLayer({ source: new VectorSource(), style: new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.2)' + color: 'rgba(255, 255, 255, 0.2)', }), stroke: new Stroke({ color: '#ffcc33', - width: 2 + width: 2, }), image: new CircleStyle({ radius: 7, fill: new Fill({ - color: '#ffcc33' - }) - }) - }) + color: '#ffcc33', + }), + }), + }), }); const map = new Map({ @@ -33,42 +33,42 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 4 - }) + zoom: 4, + }), }); const ExampleModify = { - init: function() { + init: function () { this.select = new Select(); map.addInteraction(this.select); this.modify = new Modify({ - features: this.select.getFeatures() + features: this.select.getFeatures(), }); map.addInteraction(this.modify); this.setEvents(); }, - setEvents: function() { + setEvents: function () { const selectedFeatures = this.select.getFeatures(); - this.select.on('change:active', function() { - selectedFeatures.forEach(function(each) { + this.select.on('change:active', function () { + selectedFeatures.forEach(function (each) { selectedFeatures.remove(each); }); }); }, - setActive: function(active) { + setActive: function (active) { this.select.setActive(active); this.modify.setActive(active); - } + }, }; ExampleModify.init(); const optionsForm = document.getElementById('options-form'); const ExampleDraw = { - init: function() { + init: function () { map.addInteraction(this.Point); this.Point.setActive(false); map.addInteraction(this.LineString); @@ -80,24 +80,24 @@ const ExampleDraw = { }, Point: new Draw({ source: vector.getSource(), - type: 'Point' + type: 'Point', }), LineString: new Draw({ source: vector.getSource(), - type: 'LineString' + type: 'LineString', }), Polygon: new Draw({ source: vector.getSource(), - type: 'Polygon' + type: 'Polygon', }), Circle: new Draw({ source: vector.getSource(), - type: 'Circle' + type: 'Circle', }), - getActive: function() { + getActive: function () { return this.activeType ? this[this.activeType].getActive() : false; }, - setActive: function(active) { + setActive: function (active) { const type = optionsForm.elements['draw-type'].value; if (active) { this.activeType && this[this.activeType].setActive(false); @@ -107,16 +107,15 @@ const ExampleDraw = { this.activeType && this[this.activeType].setActive(false); this.activeType = null; } - } + }, }; ExampleDraw.init(); - /** * Let user change the geometry type. * @param {Event} e Change event. */ -optionsForm.onchange = function(e) { +optionsForm.onchange = function (e) { const type = e.target.getAttribute('name'); const value = e.target.value; if (type == 'draw-type') { @@ -139,6 +138,6 @@ ExampleModify.setActive(false); // in order for its map browser event handlers to be fired first. Its handlers // are responsible of doing the snapping. const snap = new Snap({ - source: vector.getSource() + source: vector.getSource(), }); map.addInteraction(snap); diff --git a/examples/sphere-mollweide.js b/examples/sphere-mollweide.js index 83fc6adcc4..b96b8dec46 100644 --- a/examples/sphere-mollweide.js +++ b/examples/sphere-mollweide.js @@ -1,25 +1,31 @@ +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Graticule from '../src/ol/layer/Graticule.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; -import VectorLayer from '../src/ol/layer/Vector.js'; import Projection from '../src/ol/proj/Projection.js'; +import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; -import {register} from '../src/ol/proj/proj4.js'; +import View from '../src/ol/View.js'; import proj4 from 'proj4'; +import {register} from '../src/ol/proj/proj4.js'; - -proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' + - '+b=6371000 +units=m +no_defs'); +proj4.defs( + 'ESRI:53009', + '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' + + '+b=6371000 +units=m +no_defs' +); register(proj4); // Configure the Sphere Mollweide projection object with an extent, // and a world extent. These are required for the Graticule. const sphereMollweideProjection = new Projection({ code: 'ESRI:53009', - extent: [-18019909.21177587, -9009954.605703328, - 18019909.21177587, 9009954.605703328], - worldExtent: [-179, -89.99, 179, 89.99] + extent: [ + -18019909.21177587, + -9009954.605703328, + 18019909.21177587, + 9009954.605703328, + ], + worldExtent: [-179, -89.99, 179, 89.99], }); const map = new Map({ @@ -28,15 +34,15 @@ const map = new Map({ new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries-110m.geojson', - format: new GeoJSON() - }) + format: new GeoJSON(), + }), }), - new Graticule() + new Graticule(), ], target: 'map', view: new View({ center: [0, 0], projection: sphereMollweideProjection, - zoom: 1 - }) + zoom: 1, + }), }); diff --git a/examples/stamen.js b/examples/stamen.js index 6b68a0eee1..5335eb8928 100644 --- a/examples/stamen.js +++ b/examples/stamen.js @@ -1,26 +1,25 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat} from '../src/ol/proj.js'; import Stamen from '../src/ol/source/Stamen.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {fromLonLat} from '../src/ol/proj.js'; const map = new Map({ layers: [ new TileLayer({ source: new Stamen({ - layer: 'watercolor' - }) + layer: 'watercolor', + }), }), new TileLayer({ source: new Stamen({ - layer: 'terrain-labels' - }) - }) + layer: 'terrain-labels', + }), + }), ], target: 'map', view: new View({ center: fromLonLat([-122.416667, 37.783333]), - zoom: 12 - }) + zoom: 12, + }), }); diff --git a/examples/static-image.js b/examples/static-image.js index 5c937e7e97..79930d648f 100644 --- a/examples/static-image.js +++ b/examples/static-image.js @@ -1,10 +1,9 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {getCenter} from '../src/ol/extent.js'; import ImageLayer from '../src/ol/layer/Image.js'; +import Map from '../src/ol/Map.js'; import Projection from '../src/ol/proj/Projection.js'; import Static from '../src/ol/source/ImageStatic.js'; - +import View from '../src/ol/View.js'; +import {getCenter} from '../src/ol/extent.js'; // Map views always need a projection. Here we just want to map image // coordinates directly to map coordinates, so we create a projection that uses @@ -13,7 +12,7 @@ const extent = [0, 0, 1024, 968]; const projection = new Projection({ code: 'xkcd-image', units: 'pixels', - extent: extent + extent: extent, }); const map = new Map({ @@ -23,15 +22,15 @@ const map = new Map({ attributions: '© xkcd', url: 'https://imgs.xkcd.com/comics/online_communities.png', projection: projection, - imageExtent: extent - }) - }) + imageExtent: extent, + }), + }), ], target: 'map', view: new View({ projection: projection, center: getCenter(extent), zoom: 2, - maxZoom: 8 - }) + maxZoom: 8, + }), }); diff --git a/examples/street-labels.js b/examples/street-labels.js index c3b7910f18..7e07d4026e 100644 --- a/examples/street-labels.js +++ b/examples/street-labels.js @@ -1,50 +1,55 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {getCenter} from '../src/ol/extent.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import XYZ from '../src/ol/source/XYZ.js'; +import Map from '../src/ol/Map.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; import {Fill, Style, Text} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {getCenter} from '../src/ol/extent.js'; const style = new Style({ text: new Text({ font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"', placement: 'line', fill: new Fill({ - color: 'white' - }) - }) + color: 'white', + }), + }), }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const viewExtent = [1817379, 6139595, 1827851, 6143616]; const map = new Map({ - layers: [new TileLayer({ - source: new XYZ({ - attributions: attributions, - url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) - }), new VectorLayer({ - declutter: true, - source: new VectorSource({ - format: new GeoJSON(), - url: 'data/geojson/vienna-streets.geojson' + layers: [ + new TileLayer({ + source: new XYZ({ + attributions: attributions, + url: + 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + }), }), - style: function(feature) { - style.getText().setText(feature.get('name')); - return style; - } - })], + new VectorLayer({ + declutter: true, + source: new VectorSource({ + format: new GeoJSON(), + url: 'data/geojson/vienna-streets.geojson', + }), + style: function (feature) { + style.getText().setText(feature.get('name')); + return style; + }, + }), + ], target: 'map', view: new View({ extent: viewExtent, center: getCenter(viewExtent), zoom: 17, - minZoom: 14 - }) + minZoom: 14, + }), }); diff --git a/examples/svg-layer.js b/examples/svg-layer.js index 6c56a53706..c6f2b9028a 100644 --- a/examples/svg-layer.js +++ b/examples/svg-layer.js @@ -1,6 +1,6 @@ +import Layer from '../src/ol/layer/Layer.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import Layer from '../src/ol/layer/Layer.js'; import {composeCssTransform} from '../src/ol/transform.js'; const map = new Map({ @@ -9,14 +9,14 @@ const map = new Map({ center: [0, 0], extent: [-180, -90, 180, 90], projection: 'EPSG:4326', - zoom: 2 - }) + zoom: 2, + }), }); const svgContainer = document.createElement('div'); const xhr = new XMLHttpRequest(); xhr.open('GET', 'data/world.svg'); -xhr.addEventListener('load', function() { +xhr.addEventListener('load', function () { const svg = xhr.responseXML.documentElement; svgContainer.ownerDocument.importNode(svg); svgContainer.appendChild(svg); @@ -31,18 +31,24 @@ svgContainer.style.height = height + 'px'; svgContainer.style.transformOrigin = 'top left'; svgContainer.className = 'svg-layer'; -map.addLayer(new Layer({ - render: function(frameState) { - const scale = svgResolution / frameState.viewState.resolution; - const center = frameState.viewState.center; - const size = frameState.size; - const cssTransform = composeCssTransform( - size[0] / 2, size[1] / 2, - scale, scale, - frameState.viewState.rotation, - -center[0] / svgResolution - width / 2, center[1] / svgResolution - height / 2); - svgContainer.style.transform = cssTransform; - svgContainer.style.opacity = this.getOpacity(); - return svgContainer; - } -})); +map.addLayer( + new Layer({ + render: function (frameState) { + const scale = svgResolution / frameState.viewState.resolution; + const center = frameState.viewState.center; + const size = frameState.size; + const cssTransform = composeCssTransform( + size[0] / 2, + size[1] / 2, + scale, + scale, + frameState.viewState.rotation, + -center[0] / svgResolution - width / 2, + center[1] / svgResolution - height / 2 + ); + svgContainer.style.transform = cssTransform; + svgContainer.style.opacity = this.getOpacity(); + return svgContainer; + }, + }) +); diff --git a/examples/synthetic-lines.js b/examples/synthetic-lines.js index c2ae45df83..f6a1291855 100644 --- a/examples/synthetic-lines.js +++ b/examples/synthetic-lines.js @@ -1,12 +1,11 @@ import Feature from '../src/ol/Feature.js'; -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import LineString from '../src/ol/geom/LineString.js'; +import Map from '../src/ol/Map.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Stroke, Style} from '../src/ol/style.js'; - const count = 10000; const features = new Array(count); @@ -30,7 +29,7 @@ for (i = 0; i < count; ++i) { deltaY = delta * signY; endPoint = [startPoint[0] + deltaX, startPoint[1] + deltaY]; features[i] = new Feature({ - 'geometry': new LineString([startPoint, endPoint]) + 'geometry': new LineString([startPoint, endPoint]), }); startPoint = endPoint; } @@ -38,23 +37,23 @@ for (i = 0; i < count; ++i) { const vector = new VectorLayer({ source: new VectorSource({ features: features, - wrapX: false + wrapX: false, }), style: new Style({ stroke: new Stroke({ color: '#666666', - width: 1 - }) - }) + width: 1, + }), + }), }); const view = new View({ center: [0, 0], - zoom: 0 + zoom: 0, }); const map = new Map({ layers: [vector], target: 'map', - view: view + view: view, }); diff --git a/examples/synthetic-points.js b/examples/synthetic-points.js index 1eceb86fdf..4c92d24c2e 100644 --- a/examples/synthetic-points.js +++ b/examples/synthetic-points.js @@ -1,22 +1,23 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {LineString, Point} from '../src/ol/geom.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {LineString, Point} from '../src/ol/geom.js'; import {getVectorContext} from '../src/ol/render.js'; - const count = 20000; const features = new Array(count); const e = 18000000; for (let i = 0; i < count; ++i) { features[i] = new Feature({ - 'geometry': new Point( - [2 * e * Math.random() - e, 2 * e * Math.random() - e]), + 'geometry': new Point([ + 2 * e * Math.random() - e, + 2 * e * Math.random() - e, + ]), 'i': i, - 'size': i % 2 ? 10 : 20 + 'size': i % 2 ? 10 : 20, }); } @@ -25,27 +26,27 @@ const styles = { image: new CircleStyle({ radius: 5, fill: new Fill({color: '#666666'}), - stroke: new Stroke({color: '#bada55', width: 1}) - }) + stroke: new Stroke({color: '#bada55', width: 1}), + }), }), '20': new Style({ image: new CircleStyle({ radius: 10, fill: new Fill({color: '#666666'}), - stroke: new Stroke({color: '#bada55', width: 1}) - }) - }) + stroke: new Stroke({color: '#bada55', width: 1}), + }), + }), }; const vectorSource = new VectorSource({ features: features, - wrapX: false + wrapX: false, }); const vector = new VectorLayer({ source: vectorSource, - style: function(feature) { + style: function (feature) { return styles[feature.get('size')]; - } + }, }); const map = new Map({ @@ -53,13 +54,13 @@ const map = new Map({ target: document.getElementById('map'), view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); let point = null; let line = null; -const displaySnap = function(coordinate) { +const displaySnap = function (coordinate) { const closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate); if (closestFeature === null) { point = null; @@ -81,7 +82,7 @@ const displaySnap = function(coordinate) { map.render(); }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -89,23 +90,23 @@ map.on('pointermove', function(evt) { displaySnap(coordinate); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displaySnap(evt.coordinate); }); const stroke = new Stroke({ color: 'rgba(255,255,0,0.9)', - width: 3 + width: 3, }); const style = new Style({ stroke: stroke, image: new CircleStyle({ radius: 10, - stroke: stroke - }) + stroke: stroke, + }), }); -vector.on('postrender', function(evt) { +vector.on('postrender', function (evt) { const vectorContext = getVectorContext(evt); vectorContext.setStyle(style); if (point !== null) { @@ -116,7 +117,7 @@ vector.on('postrender', function(evt) { } }); -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } diff --git a/examples/teleport.js b/examples/teleport.js index 3a8aa60d08..1336d68b8e 100644 --- a/examples/teleport.js +++ b/examples/teleport.js @@ -1,26 +1,29 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); map.setTarget('map1'); const teleportButton = document.getElementById('teleport'); -teleportButton.addEventListener('click', function() { - const target = map.getTarget() === 'map1' ? 'map2' : 'map1'; - map.setTarget(target); -}, false); +teleportButton.addEventListener( + 'click', + function () { + const target = map.getTarget() === 'map1' ? 'map2' : 'map1'; + map.setTarget(target); + }, + false +); diff --git a/examples/tile-load-events.js b/examples/tile-load-events.js index 80244d455e..3e0f4a4fad 100644 --- a/examples/tile-load-events.js +++ b/examples/tile-load-events.js @@ -1,8 +1,7 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import TileJSON from '../src/ol/source/TileJSON.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; /** * Renders a progress bar. @@ -15,11 +14,10 @@ function Progress(el) { this.loaded = 0; } - /** * Increment the count of loading tiles. */ -Progress.prototype.addLoading = function() { +Progress.prototype.addLoading = function () { if (this.loading === 0) { this.show(); } @@ -27,48 +25,44 @@ Progress.prototype.addLoading = function() { this.update(); }; - /** * Increment the count of loaded tiles. */ -Progress.prototype.addLoaded = function() { +Progress.prototype.addLoaded = function () { const this_ = this; - setTimeout(function() { + setTimeout(function () { ++this_.loaded; this_.update(); }, 100); }; - /** * Update the progress bar. */ -Progress.prototype.update = function() { - const width = (this.loaded / this.loading * 100).toFixed(1) + '%'; +Progress.prototype.update = function () { + const width = ((this.loaded / this.loading) * 100).toFixed(1) + '%'; this.el.style.width = width; if (this.loading === this.loaded) { this.loading = 0; this.loaded = 0; const this_ = this; - setTimeout(function() { + setTimeout(function () { this_.hide(); }, 500); } }; - /** * Show the progress bar. */ -Progress.prototype.show = function() { +Progress.prototype.show = function () { this.el.style.visibility = 'visible'; }; - /** * Hide the progress bar. */ -Progress.prototype.hide = function() { +Progress.prototype.hide = function () { if (this.loading === this.loaded) { this.el.style.visibility = 'hidden'; this.el.style.width = 0; @@ -77,30 +71,31 @@ Progress.prototype.hide = function() { const progress = new Progress(document.getElementById('progress')); -const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; +const key = + 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; const source = new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.world-bright.json?secure&access_token=' + key, - crossOrigin: 'anonymous' + url: + 'https://api.tiles.mapbox.com/v4/mapbox.world-bright.json?secure&access_token=' + + key, + crossOrigin: 'anonymous', }); -source.on('tileloadstart', function() { +source.on('tileloadstart', function () { progress.addLoading(); }); -source.on('tileloadend', function() { +source.on('tileloadend', function () { progress.addLoaded(); }); -source.on('tileloaderror', function() { +source.on('tileloaderror', function () { progress.addLoaded(); }); const map = new Map({ - layers: [ - new TileLayer({source: source}) - ], + layers: [new TileLayer({source: source})], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/tile-transitions.js b/examples/tile-transitions.js index b2b1721d3b..59bd1cd030 100644 --- a/examples/tile-transitions.js +++ b/examples/tile-transitions.js @@ -1,18 +1,21 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; -const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; -const url = 'https://{a-c}.tiles.mapbox.com/v4/mapbox.world-bright/{z}/{x}/{y}.png?access_token=' + key; +const key = + 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; +const url = + 'https://{a-c}.tiles.mapbox.com/v4/mapbox.world-bright/{z}/{x}/{y}.png?access_token=' + + key; const withTransition = new TileLayer({ - source: new XYZ({url: url}) + source: new XYZ({url: url}), }); const withoutTransition = new TileLayer({ source: new XYZ({url: url, transition: 0}), - visible: false + visible: false, }); const map = new Map({ @@ -21,12 +24,14 @@ const map = new Map({ view: new View({ center: [0, 0], zoom: 2, - maxZoom: 11 - }) + maxZoom: 11, + }), }); -document.getElementById('transition').addEventListener('change', function(event) { - const transition = event.target.checked; - withTransition.setVisible(transition); - withoutTransition.setVisible(!transition); -}); +document + .getElementById('transition') + .addEventListener('change', function (event) { + const transition = event.target.checked; + withTransition.setVisible(transition); + withoutTransition.setVisible(!transition); + }); diff --git a/examples/tilejson.js b/examples/tilejson.js index 684b25aca3..7b17267828 100644 --- a/examples/tilejson.js +++ b/examples/tilejson.js @@ -1,21 +1,20 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import TileJSON from '../src/ol/source/TileJSON.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const map = new Map({ layers: [ new TileLayer({ source: new TileJSON({ url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json', - crossOrigin: 'anonymous' - }) - }) + crossOrigin: 'anonymous', + }), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/tissot.js b/examples/tissot.js index c5ecf3a123..6388b0cfeb 100644 --- a/examples/tissot.js +++ b/examples/tissot.js @@ -1,17 +1,17 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {circular as circularPolygon} from '../src/ol/geom/Polygon.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import TileWMS from '../src/ol/source/TileWMS.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {circular as circularPolygon} from '../src/ol/geom/Polygon.js'; const vectorLayer4326 = new VectorLayer({ - source: new VectorSource() + source: new VectorSource(), }); const vectorLayer3857 = new VectorLayer({ - source: new VectorSource() + source: new VectorSource(), }); const map4326 = new Map({ @@ -21,18 +21,18 @@ const map4326 = new Map({ url: 'https://ahocevar.com/geoserver/wms', params: { 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR', - 'TILED': true - } - }) + 'TILED': true, + }, + }), }), - vectorLayer4326 + vectorLayer4326, ], target: 'map4326', view: new View({ projection: 'EPSG:4326', center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const map3857 = new Map({ @@ -42,17 +42,17 @@ const map3857 = new Map({ url: 'https://ahocevar.com/geoserver/wms', params: { 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR', - 'TILED': true - } - }) + 'TILED': true, + }, + }), }), - vectorLayer3857 + vectorLayer3857, ], target: 'map3857', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const radius = 800000; diff --git a/examples/topojson.js b/examples/topojson.js index d60c8ba316..4ddb63689b 100644 --- a/examples/topojson.js +++ b/examples/topojson.js @@ -1,26 +1,29 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TopoJSON from '../src/ol/format/TopoJSON.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import TileJSON from '../src/ol/source/TileJSON.js'; +import TopoJSON from '../src/ol/format/TopoJSON.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Stroke, Style} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; +const key = + 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; const raster = new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + key - }) + url: + 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + + key, + }), }); const style = new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.6)' + color: 'rgba(255, 255, 255, 0.6)', }), stroke: new Stroke({ color: '#319FD3', - width: 1 - }) + width: 1, + }), }); const vector = new VectorLayer({ @@ -29,11 +32,11 @@ const vector = new VectorLayer({ format: new TopoJSON({ // don't want to render the full world polygon (stored as 'land' layer), // which repeats all countries - layers: ['countries'] + layers: ['countries'], }), - overlaps: false + overlaps: false, }), - style: style + style: style, }); const map = new Map({ @@ -41,6 +44,6 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); diff --git a/examples/topolis.js b/examples/topolis.js index 71102b20cf..823026477b 100644 --- a/examples/topolis.js +++ b/examples/topolis.js @@ -1,73 +1,79 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {Point, LineString, Polygon} from '../src/ol/geom.js'; -import {Draw, Snap} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; -import {Fill, Circle as CircleStyle, Stroke, Style, Text} from '../src/ol/style.js'; import MousePosition from '../src/ol/control/MousePosition.js'; +import View from '../src/ol/View.js'; +import { + Circle as CircleStyle, + Fill, + Stroke, + Style, + Text, +} from '../src/ol/style.js'; +import {Draw, Snap} from '../src/ol/interaction.js'; +import {LineString, Point, Polygon} from '../src/ol/geom.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const nodes = new VectorSource({wrapX: false}); const nodesLayer = new VectorLayer({ source: nodes, - style: function(f) { + style: function (f) { const style = new Style({ image: new CircleStyle({ radius: 8, fill: new Fill({color: 'rgba(255, 0, 0, 0.2)'}), - stroke: new Stroke({color: 'red', width: 1}) + stroke: new Stroke({color: 'red', width: 1}), }), text: new Text({ text: f.get('node').id.toString(), fill: new Fill({color: 'red'}), stroke: new Stroke({ color: 'white', - width: 3 - }) - }) + width: 3, + }), + }), }); return [style]; - } + }, }); const edges = new VectorSource({wrapX: false}); const edgesLayer = new VectorLayer({ source: edges, - style: function(f) { + style: function (f) { const style = new Style({ stroke: new Stroke({ color: 'blue', - width: 1 + width: 1, }), text: new Text({ text: f.get('edge').id.toString(), fill: new Fill({color: 'blue'}), stroke: new Stroke({ color: 'white', - width: 2 - }) - }) + width: 2, + }), + }), }); return [style]; - } + }, }); const faces = new VectorSource({wrapX: false}); const facesLayer = new VectorLayer({ source: faces, - style: function(f) { + style: function (f) { const style = new Style({ stroke: new Stroke({ color: 'black', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(0, 255, 0, 0.2)' + color: 'rgba(0, 255, 0, 0.2)', }), text: new Text({ font: 'bold 12px sans-serif', @@ -75,12 +81,12 @@ const facesLayer = new VectorLayer({ fill: new Fill({color: 'green'}), stroke: new Stroke({ color: 'white', - width: 2 - }) - }) + width: 2, + }), + }), }); return [style]; - } + }, }); const map = new Map({ @@ -88,26 +94,26 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 16 - }) + zoom: 16, + }), }); const topo = topolis.createTopology(); topo.on('addnode', nodeToFeature); -topo.on('removenode', function(e) { +topo.on('removenode', function (e) { removeElementFeature(nodes, e); }); topo.on('addedge', edgeToFeature); -topo.on('modedge', function(e) { +topo.on('modedge', function (e) { const feature = edges.getFeatureById(e.id); feature.setGeometry(new LineString(e.coordinates)); }); -topo.on('removeedge', function(e) { +topo.on('removeedge', function (e) { removeElementFeature(edges, e); }); topo.on('addface', faceToFeature); -topo.on('removeface', function(e) { +topo.on('removeface', function (e) { removeElementFeature(faces, e); }); @@ -119,7 +125,7 @@ function removeElementFeature(source, element) { function nodeToFeature(node) { const feature = new Feature({ geometry: new Point(node.coordinate), - node: node + node: node, }); feature.setId(node.id); nodes.addFeature(feature); @@ -128,7 +134,7 @@ function nodeToFeature(node) { function edgeToFeature(edge) { const feature = new Feature({ geometry: new LineString(edge.coordinates), - edge: edge + edge: edge, }); feature.setId(edge.id); edges.addFeature(feature); @@ -138,7 +144,7 @@ function faceToFeature(face) { const coordinates = topo.getFaceGeometry(face); const feature = new Feature({ geometry: new Polygon(coordinates), - face: face + face: face, }); feature.setId(face.id); faces.addFeature(feature); @@ -166,7 +172,13 @@ function onDrawend(e) { const edgesAtStart = topo.getEdgeByPoint(startCoord, 5); const edgesAtEnd = topo.getEdgeByPoint(endCoord, 5); const crossing = topo.getEdgesByLine(edgeGeom); - if (crossing.length === 1 && !start && !end && edgesAtStart.length === 0 && edgesAtEnd.length === 0) { + if ( + crossing.length === 1 && + !start && + !end && + edgesAtStart.length === 0 && + edgesAtEnd.length === 0 + ) { topo.remEdgeNewFace(crossing[0]); start = crossing[0].start; if (start.face) { @@ -193,12 +205,12 @@ function onDrawend(e) { } const draw = new Draw({ - type: 'LineString' + type: 'LineString', }); draw.on('drawend', onDrawend); map.addInteraction(draw); const snap = new Snap({ - source: edges + source: edges, }); map.addInteraction(snap); map.addControl(new MousePosition()); diff --git a/examples/tracing.js b/examples/tracing.js index 3379631b0c..87b3fa19f8 100644 --- a/examples/tracing.js +++ b/examples/tracing.js @@ -1,28 +1,31 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Draw from '../src/ol/interaction/Draw.js'; -import Snap from '../src/ol/interaction/Snap.js'; -import Style from '../src/ol/style/Style.js'; -import Stroke from '../src/ol/style/Stroke.js'; +import Feature from '../src/ol/Feature.js'; import Fill from '../src/ol/style/Fill.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import LineString from '../src/ol/geom/LineString.js'; -import Feature from '../src/ol/Feature.js'; +import Map from '../src/ol/Map.js'; +import Snap from '../src/ol/interaction/Snap.js'; +import Stroke from '../src/ol/style/Stroke.js'; +import Style from '../src/ol/style/Style.js'; +import View from '../src/ol/View.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; // math utilities // coordinates; will return the length of the [a, b] segment function length(a, b) { - return Math.sqrt((b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1])); + return Math.sqrt( + (b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1]) + ); } // coordinates; will return true if c is on the [a, b] segment function isOnSegment(c, a, b) { const lengthAc = length(a, c); const lengthAb = length(a, b); - const dot = ((c[0] - a[0]) * (b[0] - a[0]) + (c[1] - a[1]) * (b[1] - a[1])) / lengthAb; + const dot = + ((c[0] - a[0]) * (b[0] - a[0]) + (c[1] - a[1]) * (b[1] - a[1])) / lengthAb; return Math.abs(lengthAc - dot) < 1e-6 && lengthAc < lengthAb; } @@ -41,7 +44,10 @@ function getPartialRingCoords(feature, startPoint, endPoint) { } const ringCoords = polygon.getLinearRing().getCoordinates(); - let i, pointA, pointB, startSegmentIndex = -1; + let i, + pointA, + pointB, + startSegmentIndex = -1; for (i = 0; i < ringCoords.length; i++) { pointA = ringCoords[i]; pointB = ringCoords[mod(i + 1, ringCoords.length)]; @@ -60,7 +66,10 @@ function getPartialRingCoords(feature, startPoint, endPoint) { // build clockwise coordinates for (i = 0; i < ringCoords.length; i++) { - pointA = i === 0 ? startPoint : ringCoords[mod(i + startSegmentIndex, ringCoords.length)]; + pointA = + i === 0 + ? startPoint + : ringCoords[mod(i + startSegmentIndex, ringCoords.length)]; pointB = ringCoords[mod(i + startSegmentIndex + 1, ringCoords.length)]; cwCoordinates.push(pointA); @@ -76,7 +85,10 @@ function getPartialRingCoords(feature, startPoint, endPoint) { // build counter-clockwise coordinates for (i = 0; i < ringCoords.length; i++) { pointA = ringCoords[mod(startSegmentIndex - i, ringCoords.length)]; - pointB = i === 0 ? startPoint : ringCoords[mod(startSegmentIndex - i + 1, ringCoords.length)]; + pointB = + i === 0 + ? startPoint + : ringCoords[mod(startSegmentIndex - i + 1, ringCoords.length)]; ccwCoordinates.push(pointB); if (isOnSegment(endPoint, pointA, pointB)) { @@ -92,19 +104,19 @@ function getPartialRingCoords(feature, startPoint, endPoint) { return ccwLength < cwLength ? ccwCoordinates : cwCoordinates; } - // layers definition const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); // features in this layer will be snapped to const baseVector = new VectorLayer({ source: new VectorSource({ format: new GeoJSON(), - url: 'https://ahocevar.com/geoserver/wfs?service=wfs&request=getfeature&typename=topp:states&cql_filter=STATE_NAME=\'Idaho\'&outputformat=application/json' - }) + url: + "https://ahocevar.com/geoserver/wfs?service=wfs&request=getfeature&typename=topp:states&cql_filter=STATE_NAME='Idaho'&outputformat=application/json", + }), }); // this is were the drawn features go @@ -113,28 +125,28 @@ const drawVector = new VectorLayer({ style: new Style({ stroke: new Stroke({ color: 'rgba(100, 255, 0, 1)', - width: 2 + width: 2, }), fill: new Fill({ - color: 'rgba(100, 255, 0, 0.3)' - }) - }) + color: 'rgba(100, 255, 0, 0.3)', + }), + }), }); // this line only appears when we're tracing a feature outer ring const previewLine = new Feature({ - geometry: new LineString([]) + geometry: new LineString([]), }); const previewVector = new VectorLayer({ source: new VectorSource({ - features: [previewLine] + features: [previewLine], }), style: new Style({ stroke: new Stroke({ color: 'rgba(255, 0, 0, 1)', - width: 2 - }) - }) + width: 2, + }), + }), }); const map = new Map({ @@ -142,8 +154,8 @@ const map = new Map({ target: 'map', view: new View({ center: [-12986427, 5678422], - zoom: 5 - }) + zoom: 5, + }), }); let drawInteraction, tracingFeature, startPoint, endPoint; @@ -153,7 +165,7 @@ const getFeatureOptions = { hitTolerance: 10, layerFilter: (layer) => { return layer === baseVector; - } + }, }; // the click event is used to start/end tracing around a feature @@ -176,7 +188,11 @@ map.on('click', (event) => { // second click on the tracing feature: append the ring coordinates if (feature === tracingFeature) { endPoint = tracingFeature.getGeometry().getClosestPoint(coord); - const appendCoords = getPartialRingCoords(tracingFeature, startPoint, endPoint); + const appendCoords = getPartialRingCoords( + tracingFeature, + startPoint, + endPoint + ); drawInteraction.removeLastPoint(); drawInteraction.appendCoordinates(appendCoords); tracingFeature = null; @@ -213,14 +229,18 @@ map.on('pointermove', (event) => { let previewCoords = []; if (coord) { endPoint = tracingFeature.getGeometry().getClosestPoint(coord); - previewCoords = getPartialRingCoords(tracingFeature, startPoint, endPoint); + previewCoords = getPartialRingCoords( + tracingFeature, + startPoint, + endPoint + ); } previewLine.getGeometry().setCoordinates(previewCoords); } }); const snapInteraction = new Snap({ - source: baseVector.getSource() + source: baseVector.getSource(), }); const typeSelect = document.getElementById('type'); @@ -230,7 +250,7 @@ function addInteraction() { if (value !== 'None') { drawInteraction = new Draw({ source: drawVector.getSource(), - type: typeSelect.value + type: typeSelect.value, }); drawInteraction.on('drawstart', () => { drawing = true; @@ -245,7 +265,7 @@ function addInteraction() { } } -typeSelect.onchange = function() { +typeSelect.onchange = function () { map.removeInteraction(drawInteraction); map.removeInteraction(snapInteraction); addInteraction(); diff --git a/examples/translate-features.js b/examples/translate-features.js index fa2aa4d57a..29d9965726 100644 --- a/examples/translate-features.js +++ b/examples/translate-features.js @@ -1,27 +1,30 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {defaults as defaultInteractions, Select, Translate} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import Map from '../src/ol/Map.js'; import OSM from '../src/ol/source/OSM.js'; import VectorSource from '../src/ol/source/Vector.js'; - +import View from '../src/ol/View.js'; +import { + Select, + Translate, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const vector = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() - }) + format: new GeoJSON(), + }), }); const select = new Select(); const translate = new Translate({ - features: select.getFeatures() + features: select.getFeatures(), }); const map = new Map({ @@ -30,6 +33,6 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/turf.js b/examples/turf.js index a9e3fa6f35..0d245cdc14 100644 --- a/examples/turf.js +++ b/examples/turf.js @@ -1,52 +1,53 @@ +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {fromLonLat} from '../src/ol/proj.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; - const source = new VectorSource(); -fetch('data/geojson/roads-seoul.geojson').then(function(response) { - return response.json(); -}).then(function(json) { - const format = new GeoJSON(); - const features = format.readFeatures(json); - const street = features[0]; +fetch('data/geojson/roads-seoul.geojson') + .then(function (response) { + return response.json(); + }) + .then(function (json) { + const format = new GeoJSON(); + const features = format.readFeatures(json); + const street = features[0]; - // convert to a turf.js feature - const turfLine = format.writeFeatureObject(street); + // convert to a turf.js feature + const turfLine = format.writeFeatureObject(street); - // show a marker every 200 meters - const distance = 0.2; + // show a marker every 200 meters + const distance = 0.2; - // get the line length in kilometers - const length = turf.lineDistance(turfLine, 'kilometers'); - for (let i = 1; i <= length / distance; i++) { - const turfPoint = turf.along(turfLine, i * distance, 'kilometers'); + // get the line length in kilometers + const length = turf.lineDistance(turfLine, 'kilometers'); + for (let i = 1; i <= length / distance; i++) { + const turfPoint = turf.along(turfLine, i * distance, 'kilometers'); - // convert the generated point to a OpenLayers feature - const marker = format.readFeature(turfPoint); - marker.getGeometry().transform('EPSG:4326', 'EPSG:3857'); - source.addFeature(marker); - } + // convert the generated point to a OpenLayers feature + const marker = format.readFeature(turfPoint); + marker.getGeometry().transform('EPSG:4326', 'EPSG:3857'); + source.addFeature(marker); + } - street.getGeometry().transform('EPSG:4326', 'EPSG:3857'); - source.addFeature(street); -}); + street.getGeometry().transform('EPSG:4326', 'EPSG:3857'); + source.addFeature(street); + }); const vectorLayer = new VectorLayer({ - source: source + source: source, }); const rasterLayer = new TileLayer({ - source: new OSM() + source: new OSM(), }); const map = new Map({ layers: [rasterLayer, vectorLayer], target: document.getElementById('map'), view: new View({ - center: fromLonLat([126.980366, 37.526540]), - zoom: 15 - }) + center: fromLonLat([126.980366, 37.52654]), + zoom: 15, + }), }); diff --git a/examples/two-finger-pan-scroll.js b/examples/two-finger-pan-scroll.js index 1207d28799..09eef263ab 100644 --- a/examples/two-finger-pan-scroll.js +++ b/examples/two-finger-pan-scroll.js @@ -1,29 +1,29 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; -import {defaults, DragPan, MouseWheelZoom} from '../src/ol/interaction.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {DragPan, MouseWheelZoom, defaults} from '../src/ol/interaction.js'; import {platformModifierKeyOnly} from '../src/ol/events/condition.js'; const map = new Map({ interactions: defaults({dragPan: false, mouseWheelZoom: false}).extend([ new DragPan({ - condition: function(event) { + condition: function (event) { return this.getPointerCount() === 2 || platformModifierKeyOnly(event); - } + }, }), new MouseWheelZoom({ - condition: platformModifierKeyOnly - }) + condition: platformModifierKeyOnly, + }), ]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/utfgrid.js b/examples/utfgrid.js index 92b117c100..86a05ca6e7 100644 --- a/examples/utfgrid.js +++ b/examples/utfgrid.js @@ -1,35 +1,39 @@ import Map from '../src/ol/Map.js'; import Overlay from '../src/ol/Overlay.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import TileJSON from '../src/ol/source/TileJSON.js'; +import TileLayer from '../src/ol/layer/Tile.js'; import UTFGrid from '../src/ol/source/UTFGrid.js'; +import View from '../src/ol/View.js'; -const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const key = + 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; const mapLayer = new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=' + key - }) + url: + 'https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=' + + key, + }), }); - const gridSource = new UTFGrid({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=' + key + url: + 'https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=' + + key, }); const gridLayer = new TileLayer({source: gridSource}); const view = new View({ center: [0, 0], - zoom: 1 + zoom: 1, }); const mapElement = document.getElementById('map'); const map = new Map({ layers: [mapLayer, gridLayer], target: mapElement, - view: view + view: view, }); const infoElement = document.getElementById('country-info'); @@ -39,14 +43,16 @@ const nameElement = document.getElementById('country-name'); const infoOverlay = new Overlay({ element: infoElement, offset: [15, 15], - stopEvent: false + stopEvent: false, }); map.addOverlay(infoOverlay); -const displayCountryInfo = function(coordinate) { +const displayCountryInfo = function (coordinate) { const viewResolution = /** @type {number} */ (view.getResolution()); - gridSource.forDataAtCoordinateAndResolution(coordinate, viewResolution, - function(data) { + gridSource.forDataAtCoordinateAndResolution( + coordinate, + viewResolution, + function (data) { // If you want to use the template from the TileJSON, // load the mustache.js library separately and call // info.innerHTML = Mustache.render(gridSource.getTemplate(), data); @@ -56,10 +62,11 @@ const displayCountryInfo = function(coordinate) { nameElement.innerHTML = data['admin']; } infoOverlay.setPosition(data ? coordinate : undefined); - }); + } + ); }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -67,6 +74,6 @@ map.on('pointermove', function(evt) { displayCountryInfo(coordinate); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayCountryInfo(evt.coordinate); }); diff --git a/examples/vector-esri-edit.js b/examples/vector-esri-edit.js index 6fa31162f4..41837a5713 100644 --- a/examples/vector-esri-edit.js +++ b/examples/vector-esri-edit.js @@ -1,66 +1,91 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import EsriJSON from '../src/ol/format/EsriJSON.js'; -import {defaults as defaultInteractions, Draw, Modify, Select} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {tile as tileStrategy} from '../src/ol/loadingstrategy.js'; -import {fromLonLat} from '../src/ol/proj.js'; +import Map from '../src/ol/Map.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; +import { + Draw, + Modify, + Select, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {createXYZ} from '../src/ol/tilegrid.js'; +import {fromLonLat} from '../src/ol/proj.js'; +import {tile as tileStrategy} from '../src/ol/loadingstrategy.js'; - -const serviceUrl = 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/' + - 'services/PDX_Pedestrian_Districts/FeatureServer/'; +const serviceUrl = + 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/' + + 'services/PDX_Pedestrian_Districts/FeatureServer/'; const layer = '0'; const esrijsonFormat = new EsriJSON(); const vectorSource = new VectorSource({ - loader: function(extent, resolution, projection) { - const url = serviceUrl + layer + '/query/?f=json&' + - 'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' + - encodeURIComponent('{"xmin":' + extent[0] + ',"ymin":' + - extent[1] + ',"xmax":' + extent[2] + ',"ymax":' + extent[3] + - ',"spatialReference":{"wkid":102100}}') + - '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' + - '&outSR=102100'; - $.ajax({url: url, dataType: 'jsonp', success: function(response) { - if (response.error) { - alert(response.error.message + '\n' + - response.error.details.join('\n')); - } else { - // dataProjection will be read from document - const features = esrijsonFormat.readFeatures(response, { - featureProjection: projection - }); - if (features.length > 0) { - vectorSource.addFeatures(features); + loader: function (extent, resolution, projection) { + const url = + serviceUrl + + layer + + '/query/?f=json&' + + 'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' + + encodeURIComponent( + '{"xmin":' + + extent[0] + + ',"ymin":' + + extent[1] + + ',"xmax":' + + extent[2] + + ',"ymax":' + + extent[3] + + ',"spatialReference":{"wkid":102100}}' + ) + + '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' + + '&outSR=102100'; + $.ajax({ + url: url, + dataType: 'jsonp', + success: function (response) { + if (response.error) { + alert( + response.error.message + '\n' + response.error.details.join('\n') + ); + } else { + // dataProjection will be read from document + const features = esrijsonFormat.readFeatures(response, { + featureProjection: projection, + }); + if (features.length > 0) { + vectorSource.addFeatures(features); + } } - } - }}); + }, + }); }, - strategy: tileStrategy(createXYZ({ - tileSize: 512 - })) + strategy: tileStrategy( + createXYZ({ + tileSize: 512, + }) + ), }); const vector = new VectorLayer({ - source: vectorSource + source: vectorSource, }); const raster = new TileLayer({ source: new XYZ({ - attributions: 'Tiles © ArcGIS', - url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' + - 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}' - }) + attributions: + 'Tiles © ArcGIS', + url: + 'https://server.arcgisonline.com/ArcGIS/rest/services/' + + 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}', + }), }); const draw = new Draw({ source: vectorSource, - type: 'Polygon' + type: 'Polygon', }); const select = new Select(); @@ -68,7 +93,7 @@ select.setActive(false); const selected = select.getFeatures(); const modify = new Modify({ - features: selected + features: selected, }); modify.setActive(false); @@ -78,17 +103,16 @@ const map = new Map({ target: document.getElementById('map'), view: new View({ center: fromLonLat([-122.619, 45.512]), - zoom: 12 - }) + zoom: 12, + }), }); const typeSelect = document.getElementById('type'); - /** * Let user change the interaction type. */ -typeSelect.onchange = function() { +typeSelect.onchange = function () { draw.setActive(typeSelect.value === 'DRAW'); select.setActive(typeSelect.value === 'MODIFY'); modify.setActive(typeSelect.value === 'MODIFY'); @@ -96,22 +120,25 @@ typeSelect.onchange = function() { const dirty = {}; -selected.on('add', function(evt) { +selected.on('add', function (evt) { const feature = evt.element; - feature.on('change', function(evt) { + feature.on('change', function (evt) { dirty[evt.target.getId()] = true; }); }); -selected.on('remove', function(evt) { +selected.on('remove', function (evt) { const feature = evt.element; const fid = feature.getId(); if (dirty[fid] === true) { - const payload = '[' + esrijsonFormat.writeFeature(feature, { - featureProjection: map.getView().getProjection() - }) + ']'; + const payload = + '[' + + esrijsonFormat.writeFeature(feature, { + featureProjection: map.getView().getProjection(), + }) + + ']'; const url = serviceUrl + layer + '/updateFeatures'; - $.post(url, {f: 'json', features: payload}).done(function(data) { + $.post(url, {f: 'json', features: payload}).done(function (data) { const result = JSON.parse(data); if (result.updateResults && result.updateResults.length > 0) { if (result.updateResults[0].success !== true) { @@ -125,13 +152,16 @@ selected.on('remove', function(evt) { } }); -draw.on('drawend', function(evt) { +draw.on('drawend', function (evt) { const feature = evt.feature; - const payload = '[' + esrijsonFormat.writeFeature(feature, { - featureProjection: map.getView().getProjection() - }) + ']'; + const payload = + '[' + + esrijsonFormat.writeFeature(feature, { + featureProjection: map.getView().getProjection(), + }) + + ']'; const url = serviceUrl + layer + '/addFeatures'; - $.post(url, {f: 'json', features: payload}).done(function(data) { + $.post(url, {f: 'json', features: payload}).done(function (data) { const result = JSON.parse(data); if (result.addResults && result.addResults.length > 0) { if (result.addResults[0].success === true) { diff --git a/examples/vector-esri.js b/examples/vector-esri.js index 729387a186..cb28556a4d 100644 --- a/examples/vector-esri.js +++ b/examples/vector-esri.js @@ -1,17 +1,17 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import EsriJSON from '../src/ol/format/EsriJSON.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {tile as tileStrategy} from '../src/ol/loadingstrategy.js'; -import {fromLonLat} from '../src/ol/proj.js'; +import Map from '../src/ol/Map.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; import {Fill, Stroke, Style} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {createXYZ} from '../src/ol/tilegrid.js'; +import {fromLonLat} from '../src/ol/proj.js'; +import {tile as tileStrategy} from '../src/ol/loadingstrategy.js'; - -const serviceUrl = 'https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/' + - 'Petroleum/KSFields/FeatureServer/'; +const serviceUrl = + 'https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/' + + 'Petroleum/KSFields/FeatureServer/'; const layer = '0'; const esrijsonFormat = new EsriJSON(); @@ -19,86 +19,106 @@ const esrijsonFormat = new EsriJSON(); const styleCache = { 'ABANDONED': new Style({ fill: new Fill({ - color: 'rgba(225, 225, 225, 255)' + color: 'rgba(225, 225, 225, 255)', }), stroke: new Stroke({ color: 'rgba(0, 0, 0, 255)', - width: 0.4 - }) + width: 0.4, + }), }), 'GAS': new Style({ fill: new Fill({ - color: 'rgba(255, 0, 0, 255)' + color: 'rgba(255, 0, 0, 255)', }), stroke: new Stroke({ color: 'rgba(110, 110, 110, 255)', - width: 0.4 - }) + width: 0.4, + }), }), 'OIL': new Style({ fill: new Fill({ - color: 'rgba(56, 168, 0, 255)' + color: 'rgba(56, 168, 0, 255)', }), stroke: new Stroke({ color: 'rgba(110, 110, 110, 255)', - width: 0 - }) + width: 0, + }), }), 'OILGAS': new Style({ fill: new Fill({ - color: 'rgba(168, 112, 0, 255)' + color: 'rgba(168, 112, 0, 255)', }), stroke: new Stroke({ color: 'rgba(110, 110, 110, 255)', - width: 0.4 - }) - }) + width: 0.4, + }), + }), }; const vectorSource = new VectorSource({ - loader: function(extent, resolution, projection) { - const url = serviceUrl + layer + '/query/?f=json&' + - 'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' + - encodeURIComponent('{"xmin":' + extent[0] + ',"ymin":' + - extent[1] + ',"xmax":' + extent[2] + ',"ymax":' + extent[3] + - ',"spatialReference":{"wkid":102100}}') + - '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' + - '&outSR=102100'; - $.ajax({url: url, dataType: 'jsonp', success: function(response) { - if (response.error) { - alert(response.error.message + '\n' + - response.error.details.join('\n')); - } else { - // dataProjection will be read from document - const features = esrijsonFormat.readFeatures(response, { - featureProjection: projection - }); - if (features.length > 0) { - vectorSource.addFeatures(features); + loader: function (extent, resolution, projection) { + const url = + serviceUrl + + layer + + '/query/?f=json&' + + 'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' + + encodeURIComponent( + '{"xmin":' + + extent[0] + + ',"ymin":' + + extent[1] + + ',"xmax":' + + extent[2] + + ',"ymax":' + + extent[3] + + ',"spatialReference":{"wkid":102100}}' + ) + + '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' + + '&outSR=102100'; + $.ajax({ + url: url, + dataType: 'jsonp', + success: function (response) { + if (response.error) { + alert( + response.error.message + '\n' + response.error.details.join('\n') + ); + } else { + // dataProjection will be read from document + const features = esrijsonFormat.readFeatures(response, { + featureProjection: projection, + }); + if (features.length > 0) { + vectorSource.addFeatures(features); + } } - } - }}); + }, + }); }, - strategy: tileStrategy(createXYZ({ - tileSize: 512 - })) + strategy: tileStrategy( + createXYZ({ + tileSize: 512, + }) + ), }); const vector = new VectorLayer({ source: vectorSource, - style: function(feature) { + style: function (feature) { const classify = feature.get('activeprod'); return styleCache[classify]; - } + }, }); const raster = new TileLayer({ source: new XYZ({ - attributions: 'Tiles © ArcGIS', - url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' + - 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}' - }) + attributions: + 'Tiles © ArcGIS', + url: + 'https://server.arcgisonline.com/ArcGIS/rest/services/' + + 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}', + }), }); const map = new Map({ @@ -106,13 +126,13 @@ const map = new Map({ target: document.getElementById('map'), view: new View({ center: fromLonLat([-97.6114, 38.8403]), - zoom: 7 - }) + zoom: 7, + }), }); -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { const features = []; - map.forEachFeatureAtPixel(pixel, function(feature) { + map.forEachFeatureAtPixel(pixel, function (feature) { features.push(feature); }); if (features.length > 0) { @@ -129,7 +149,7 @@ const displayFeatureInfo = function(pixel) { } }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -137,6 +157,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/vector-label-decluttering.js b/examples/vector-label-decluttering.js index 5f8ad18bf3..9048e17523 100644 --- a/examples/vector-label-decluttering.js +++ b/examples/vector-label-decluttering.js @@ -1,16 +1,16 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Stroke, Style, Text} from '../src/ol/style.js'; const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); const labelStyle = new Style({ @@ -18,35 +18,35 @@ const labelStyle = new Style({ font: '12px Calibri,sans-serif', overflow: true, fill: new Fill({ - color: '#000' + color: '#000', }), stroke: new Stroke({ color: '#fff', - width: 3 - }) - }) + width: 3, + }), + }), }); const countryStyle = new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.6)' + color: 'rgba(255, 255, 255, 0.6)', }), stroke: new Stroke({ color: '#319FD3', - width: 1 - }) + width: 1, + }), }); const style = [countryStyle, labelStyle]; const vectorLayer = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: function(feature) { + style: function (feature) { labelStyle.getText().setText(feature.get('name')); return style; }, - declutter: true + declutter: true, }); map.addLayer(vectorLayer); diff --git a/examples/vector-labels.js b/examples/vector-labels.js index 9867b04dc6..2ee2625054 100644 --- a/examples/vector-labels.js +++ b/examples/vector-labels.js @@ -1,9 +1,15 @@ +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; 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 { + Circle as CircleStyle, + Fill, + Stroke, + Style, + Text, +} from '../src/ol/style.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; -import {Circle as CircleStyle, Fill, Stroke, Style, Text} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; let openSansAdded = false; @@ -22,7 +28,7 @@ const myDom = { color: document.getElementById('points-color'), outline: document.getElementById('points-outline'), outlineWidth: document.getElementById('points-outline-width'), - maxreso: document.getElementById('points-maxreso') + maxreso: document.getElementById('points-maxreso'), }, lines: { text: document.getElementById('lines-text'), @@ -41,7 +47,7 @@ const myDom = { color: document.getElementById('lines-color'), outline: document.getElementById('lines-outline'), outlineWidth: document.getElementById('lines-outline-width'), - maxreso: document.getElementById('lines-maxreso') + maxreso: document.getElementById('lines-maxreso'), }, polygons: { text: document.getElementById('polygons-text'), @@ -60,11 +66,11 @@ const myDom = { color: document.getElementById('polygons-color'), outline: document.getElementById('polygons-outline'), outlineWidth: document.getElementById('polygons-outline-width'), - maxreso: document.getElementById('polygons-maxreso') - } + maxreso: document.getElementById('polygons-maxreso'), + }, }; -const getText = function(feature, resolution, dom) { +const getText = function (feature, resolution, dom) { const type = dom.text.value; const maxResolution = dom.maxreso.value; let text = feature.get('name'); @@ -75,15 +81,17 @@ const getText = function(feature, resolution, dom) { text = ''; } else if (type == 'shorten') { text = text.trunc(12); - } else if (type == 'wrap' && (!dom.placement || dom.placement.value != 'line')) { + } else if ( + type == 'wrap' && + (!dom.placement || dom.placement.value != 'line') + ) { text = stringDivider(text, 16, '\n'); } return text; }; - -const createTextStyle = function(feature, resolution, dom) { +const createTextStyle = function (feature, resolution, dom) { const align = dom.align.value; const baseline = dom.baseline.value; const size = dom.size.value; @@ -93,9 +101,9 @@ const createTextStyle = function(feature, resolution, dom) { const weight = dom.weight.value; const placement = dom.placement ? dom.placement.value : undefined; const maxAngle = dom.maxangle ? parseFloat(dom.maxangle.value) : undefined; - const overflow = dom.overflow ? (dom.overflow.value == 'true') : undefined; + const overflow = dom.overflow ? dom.overflow.value == 'true' : undefined; const rotation = parseFloat(dom.rotation.value); - if (dom.font.value == '\'Open Sans\'' && !openSansAdded) { + if (dom.font.value == "'Open Sans'" && !openSansAdded) { const openSans = document.createElement('link'); openSans.href = 'https://fonts.googleapis.com/css?family=Open+Sans'; openSans.rel = 'stylesheet'; @@ -119,121 +127,118 @@ const createTextStyle = function(feature, resolution, dom) { placement: placement, maxAngle: maxAngle, overflow: overflow, - rotation: rotation + rotation: rotation, }); }; - // Polygons function polygonStyleFunction(feature, resolution) { return new Style({ stroke: new Stroke({ color: 'blue', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(0, 0, 255, 0.1)' + color: 'rgba(0, 0, 255, 0.1)', }), - text: createTextStyle(feature, resolution, myDom.polygons) + text: createTextStyle(feature, resolution, myDom.polygons), }); } const vectorPolygons = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/polygon-samples.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: polygonStyleFunction + style: polygonStyleFunction, }); - // Lines function lineStyleFunction(feature, resolution) { return new Style({ stroke: new Stroke({ color: 'green', - width: 2 + width: 2, }), - text: createTextStyle(feature, resolution, myDom.lines) + text: createTextStyle(feature, resolution, myDom.lines), }); } const vectorLines = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/line-samples.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: lineStyleFunction + style: lineStyleFunction, }); - // Points function pointStyleFunction(feature, resolution) { return new Style({ image: new CircleStyle({ radius: 10, fill: new Fill({color: 'rgba(255, 0, 0, 0.1)'}), - stroke: new Stroke({color: 'red', width: 1}) + stroke: new Stroke({color: 'red', width: 1}), }), - text: createTextStyle(feature, resolution, myDom.points) + text: createTextStyle(feature, resolution, myDom.points), }); } const vectorPoints = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/point-samples.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: pointStyleFunction + style: pointStyleFunction, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), vectorPolygons, vectorLines, - vectorPoints + vectorPoints, ], target: 'map', view: new View({ center: [-8161939, 6095025], - zoom: 8 - }) + zoom: 8, + }), }); -document.getElementById('refresh-points') - .addEventListener('click', function() { +document + .getElementById('refresh-points') + .addEventListener('click', function () { vectorPoints.setStyle(pointStyleFunction); }); -document.getElementById('refresh-lines') - .addEventListener('click', function() { - vectorLines.setStyle(lineStyleFunction); - }); +document.getElementById('refresh-lines').addEventListener('click', function () { + vectorLines.setStyle(lineStyleFunction); +}); -document.getElementById('refresh-polygons') - .addEventListener('click', function() { +document + .getElementById('refresh-polygons') + .addEventListener('click', function () { vectorPolygons.setStyle(polygonStyleFunction); }); - /** * @param {number} n The max number of characters to keep. * @return {string} Truncated string. */ -String.prototype.trunc = String.prototype.trunc || - function(n) { - return this.length > n ? this.substr(0, n - 1) + '...' : this.substr(0); - }; - +String.prototype.trunc = + String.prototype.trunc || + function (n) { + return this.length > n ? this.substr(0, n - 1) + '...' : this.substr(0); + }; // http://stackoverflow.com/questions/14484787/wrap-text-in-javascript function stringDivider(str, width, spaceReplacer) { if (str.length > width) { let p = width; - while (p > 0 && (str[p] != ' ' && str[p] != '-')) { + while (p > 0 && str[p] != ' ' && str[p] != '-') { p--; } if (p > 0) { diff --git a/examples/vector-layer.js b/examples/vector-layer.js index 7e2e72c539..2c1606cfc8 100644 --- a/examples/vector-layer.js +++ b/examples/vector-layer.js @@ -1,40 +1,39 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Stroke, Style, Text} from '../src/ol/style.js'; - const style = new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.6)' + color: 'rgba(255, 255, 255, 0.6)', }), stroke: new Stroke({ color: '#319FD3', - width: 1 + width: 1, }), text: new Text({ font: '12px Calibri,sans-serif', fill: new Fill({ - color: '#000' + color: '#000', }), stroke: new Stroke({ color: '#fff', - width: 3 - }) - }) + width: 3, + }), + }), }); const vectorLayer = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: function(feature) { + style: function (feature) { style.getText().setText(feature.get('name')); return style; - } + }, }); const map = new Map({ @@ -42,43 +41,42 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); const highlightStyle = new Style({ stroke: new Stroke({ color: '#f00', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(255,0,0,0.1)' + color: 'rgba(255,0,0,0.1)', }), text: new Text({ font: '12px Calibri,sans-serif', fill: new Fill({ - color: '#000' + color: '#000', }), stroke: new Stroke({ color: '#f00', - width: 3 - }) - }) + width: 3, + }), + }), }); const featureOverlay = new VectorLayer({ source: new VectorSource(), map: map, - style: function(feature) { + style: function (feature) { highlightStyle.getText().setText(feature.get('name')); return highlightStyle; - } + }, }); let highlight; -const displayFeatureInfo = function(pixel) { - - const feature = map.forEachFeatureAtPixel(pixel, function(feature) { +const displayFeatureInfo = function (pixel) { + const feature = map.forEachFeatureAtPixel(pixel, function (feature) { return feature; }); @@ -98,10 +96,9 @@ const displayFeatureInfo = function(pixel) { } highlight = feature; } - }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -109,6 +106,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/vector-osm.js b/examples/vector-osm.js index d67d520205..a5ad295b26 100644 --- a/examples/vector-osm.js +++ b/examples/vector-osm.js @@ -1,12 +1,12 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import OSMXML from '../src/ol/format/OSMXML.js'; +import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; +import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {bbox as bboxStrategy} from '../src/ol/loadingstrategy.js'; import {transformExtent} from '../src/ol/proj.js'; -import XYZ from '../src/ol/source/XYZ.js'; -import VectorSource from '../src/ol/source/Vector.js'; -import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; let map = null; @@ -15,87 +15,93 @@ const styles = { 'parking': new Style({ stroke: new Stroke({ color: 'rgba(170, 170, 170, 1.0)', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(170, 170, 170, 0.3)' - }) - }) + color: 'rgba(170, 170, 170, 0.3)', + }), + }), }, 'building': { '.*': new Style({ zIndex: 100, stroke: new Stroke({ color: 'rgba(246, 99, 79, 1.0)', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(246, 99, 79, 0.3)' - }) - }) + color: 'rgba(246, 99, 79, 0.3)', + }), + }), }, 'highway': { 'service': new Style({ stroke: new Stroke({ color: 'rgba(255, 255, 255, 1.0)', - width: 2 - }) + width: 2, + }), }), '.*': new Style({ stroke: new Stroke({ color: 'rgba(255, 255, 255, 1.0)', - width: 3 - }) - }) + width: 3, + }), + }), }, 'landuse': { 'forest|grass|allotments': new Style({ stroke: new Stroke({ color: 'rgba(140, 208, 95, 1.0)', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(140, 208, 95, 0.3)' - }) - }) + color: 'rgba(140, 208, 95, 0.3)', + }), + }), }, 'natural': { 'tree': new Style({ image: new CircleStyle({ radius: 2, fill: new Fill({ - color: 'rgba(140, 208, 95, 1.0)' + color: 'rgba(140, 208, 95, 1.0)', }), - stroke: null - }) - }) - } + stroke: null, + }), + }), + }, }; const vectorSource = new VectorSource({ format: new OSMXML(), - loader: function(extent, resolution, projection) { + loader: function (extent, resolution, projection) { const epsg4326Extent = transformExtent(extent, projection, 'EPSG:4326'); const client = new XMLHttpRequest(); client.open('POST', 'https://overpass-api.de/api/interpreter'); - client.addEventListener('load', function() { + client.addEventListener('load', function () { const features = new OSMXML().readFeatures(client.responseText, { - featureProjection: map.getView().getProjection() + featureProjection: map.getView().getProjection(), }); vectorSource.addFeatures(features); }); - const query = '(node(' + - epsg4326Extent[1] + ',' + Math.max(epsg4326Extent[0], -180) + ',' + - epsg4326Extent[3] + ',' + Math.min(epsg4326Extent[2], 180) + - ');rel(bn)->.foo;way(bn);node(w)->.foo;rel(bw););out meta;'; + const query = + '(node(' + + epsg4326Extent[1] + + ',' + + Math.max(epsg4326Extent[0], -180) + + ',' + + epsg4326Extent[3] + + ',' + + Math.min(epsg4326Extent[2], 180) + + ');rel(bn)->.foo;way(bn);node(w)->.foo;rel(bw););out meta;'; client.send(query); }, - strategy: bboxStrategy + strategy: bboxStrategy, }); const vector = new VectorLayer({ source: vectorSource, - style: function(feature) { + style: function (feature) { for (const key in styles) { const value = feature.get(key); if (value !== undefined) { @@ -107,19 +113,20 @@ const vector = new VectorLayer({ } } return null; - } + }, }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const raster = new TileLayer({ source: new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) + maxZoom: 20, + }), }); map = new Map({ @@ -128,6 +135,6 @@ map = new Map({ view: new View({ center: [739218, 5906096], maxZoom: 19, - zoom: 17 - }) + zoom: 17, + }), }); diff --git a/examples/vector-tile-info.js b/examples/vector-tile-info.js index 18a7aafd6d..8ac28f9996 100644 --- a/examples/vector-tile-info.js +++ b/examples/vector-tile-info.js @@ -1,21 +1,24 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import MVT from '../src/ol/format/MVT.js'; +import Map from '../src/ol/Map.js'; import VectorTileLayer from '../src/ol/layer/VectorTile.js'; import VectorTileSource from '../src/ol/source/VectorTile.js'; +import View from '../src/ol/View.js'; const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 + zoom: 2, }), - layers: [new VectorTileLayer({ - source: new VectorTileSource({ - format: new MVT(), - url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf' - }) - })] + layers: [ + new VectorTileLayer({ + source: new VectorTileSource({ + format: new MVT(), + url: + 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf', + }), + }), + ], }); map.on('pointermove', showInfo); diff --git a/examples/vector-tile-selection.js b/examples/vector-tile-selection.js index 79cf73cd7a..57325b7e4d 100644 --- a/examples/vector-tile-selection.js +++ b/examples/vector-tile-selection.js @@ -1,8 +1,8 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import MVT from '../src/ol/format/MVT.js'; +import Map from '../src/ol/Map.js'; import VectorTileLayer from '../src/ol/layer/VectorTile.js'; import VectorTileSource from '../src/ol/source/VectorTile.js'; +import View from '../src/ol/View.js'; import {Fill, Stroke, Style} from '../src/ol/style.js'; // lookup for selection objects @@ -11,20 +11,20 @@ let selection = {}; const country = new Style({ stroke: new Stroke({ color: 'gray', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(20,20,20,0.9)' - }) + color: 'rgba(20,20,20,0.9)', + }), }); const selectedCountry = new Style({ stroke: new Stroke({ color: 'rgba(200,20,20,0.8)', - width: 2 + width: 2, }), fill: new Fill({ - color: 'rgba(200,20,20,0.4)' - }) + color: 'rgba(200,20,20,0.4)', + }), }); const vtLayer = new VectorTileLayer({ @@ -32,24 +32,23 @@ const vtLayer = new VectorTileLayer({ source: new VectorTileSource({ maxZoom: 15, format: new MVT({ - idProperty: 'iso_a3' + idProperty: 'iso_a3', }), - url: 'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/' + - 'ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf' + url: + 'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/' + + 'ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf', }), - style: country + style: country, }); const map = new Map({ - layers: [ - vtLayer - ], + layers: [vtLayer], target: 'map', view: new View({ center: [0, 0], zoom: 2, - multiWorld: true - }) + multiWorld: true, + }), }); // Selection @@ -57,21 +56,25 @@ const selectionLayer = new VectorTileLayer({ map: map, renderMode: 'vector', source: vtLayer.getSource(), - style: function(feature) { + style: function (feature) { if (feature.getId() in selection) { return selectedCountry; } - } + }, }); const selectElement = document.getElementById('type'); -map.on(['click', 'pointermove'], function(event) { - if (selectElement.value === 'singleselect-hover' && event.type !== 'pointermove' || - selectElement.value !== 'singleselect-hover' && event.type === 'pointermove') { +map.on(['click', 'pointermove'], function (event) { + if ( + (selectElement.value === 'singleselect-hover' && + event.type !== 'pointermove') || + (selectElement.value !== 'singleselect-hover' && + event.type === 'pointermove') + ) { return; } - vtLayer.getFeatures(event.pixel).then(function(features) { + vtLayer.getFeatures(event.pixel).then(function (features) { if (!features.length) { selection = {}; selectionLayer.changed(); diff --git a/examples/vector-tiles-4326.js b/examples/vector-tiles-4326.js index eeb0f4ab67..d527140ea9 100644 --- a/examples/vector-tiles-4326.js +++ b/examples/vector-tiles-4326.js @@ -1,7 +1,7 @@ -import View from '../src/ol/View.js'; import MVT from '../src/ol/format/MVT.js'; -import VectorTileSource from '../src/ol/source/VectorTile.js'; import TileGrid from '../src/ol/tilegrid/TileGrid.js'; +import VectorTileSource from '../src/ol/source/VectorTile.js'; +import View from '../src/ol/View.js'; import olms from 'ol-mapbox-style'; import {defaultResolutions} from 'ol-mapbox-style/dist/util.js'; @@ -15,36 +15,41 @@ for (let i = 0; i < 14; ++i) { defaultResolutions[i] = maxResolution / Math.pow(2, i + 1); } -olms('map', 'https://api.maptiler.com/maps/basic-4326/style.json?key=' + key).then(function(map) { - +olms( + 'map', + 'https://api.maptiler.com/maps/basic-4326/style.json?key=' + key +).then(function (map) { // Custom tile grid for the EPSG:4326 projection const tileGrid = new TileGrid({ extent: [-180, -90, 180, 90], tileSize: 512, - resolutions: defaultResolutions + resolutions: defaultResolutions, }); const mapboxStyle = map.get('mapbox-style'); // Replace the source with a EPSG:4326 projection source for each vector tile layer - map.getLayers().forEach(function(layer) { + map.getLayers().forEach(function (layer) { const mapboxSource = layer.get('mapbox-source'); if (mapboxSource && mapboxStyle.sources[mapboxSource].type === 'vector') { const source = layer.getSource(); - layer.setSource(new VectorTileSource({ - format: new MVT(), - projection: 'EPSG:4326', - urls: source.getUrls(), - tileGrid: tileGrid - })); + layer.setSource( + new VectorTileSource({ + format: new MVT(), + projection: 'EPSG:4326', + urls: source.getUrls(), + tileGrid: tileGrid, + }) + ); } }); // Configure the map with a view with EPSG:4326 projection - map.setView(new View({ - projection: 'EPSG:4326', - zoom: mapboxStyle.zoom, - center: mapboxStyle.center - })); - + map.setView( + new View({ + projection: 'EPSG:4326', + zoom: mapboxStyle.zoom, + center: mapboxStyle.center, + }) + ); }); diff --git a/examples/vector-wfs-getfeature.js b/examples/vector-wfs-getfeature.js index 6f7a3e88f4..791648e9f7 100644 --- a/examples/vector-wfs-getfeature.js +++ b/examples/vector-wfs-getfeature.js @@ -1,16 +1,15 @@ import Map from '../src/ol/Map.js'; +import VectorSource from '../src/ol/source/Vector.js'; import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; +import {GeoJSON, WFS} from '../src/ol/format.js'; +import {Stroke, Style} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import { + and as andFilter, equalTo as equalToFilter, like as likeFilter, - and as andFilter } 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 XYZ from '../src/ol/source/XYZ.js'; -import VectorSource from '../src/ol/source/Vector.js'; -import {Stroke, Style} from '../src/ol/style.js'; - const vectorSource = new VectorSource(); const vector = new VectorLayer({ @@ -18,21 +17,22 @@ const vector = new VectorLayer({ style: new Style({ stroke: new Stroke({ color: 'rgba(0, 0, 255, 1.0)', - width: 2 - }) - }) + width: 2, + }), + }), }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const raster = new TileLayer({ source: new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) + maxZoom: 20, + }), }); const map = new Map({ @@ -41,8 +41,8 @@ const map = new Map({ view: new View({ center: [-8908887.277395891, 5381918.072437216], maxZoom: 19, - zoom: 12 - }) + zoom: 12, + }), }); // generate a GetFeature request @@ -55,17 +55,19 @@ const featureRequest = new WFS().writeGetFeature({ filter: andFilter( likeFilter('name', 'Mississippi*'), equalToFilter('waterway', 'riverbank') - ) + ), }); // then post the request and add the received features to a layer fetch('https://ahocevar.com/geoserver/wfs', { method: 'POST', - body: new XMLSerializer().serializeToString(featureRequest) -}).then(function(response) { - return response.json(); -}).then(function(json) { - const features = new GeoJSON().readFeatures(json); - vectorSource.addFeatures(features); - map.getView().fit(vectorSource.getExtent()); -}); + body: new XMLSerializer().serializeToString(featureRequest), +}) + .then(function (response) { + return response.json(); + }) + .then(function (json) { + const features = new GeoJSON().readFeatures(json); + vectorSource.addFeatures(features); + map.getView().fit(vectorSource.getExtent()); + }); diff --git a/examples/vector-wfs.js b/examples/vector-wfs.js index fdf003beb9..546806bc4a 100644 --- a/examples/vector-wfs.js +++ b/examples/vector-wfs.js @@ -1,45 +1,48 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; +import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; +import {Stroke, Style} from '../src/ol/style.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {bbox as bboxStrategy} from '../src/ol/loadingstrategy.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'; - const vectorSource = new VectorSource({ format: new GeoJSON(), - url: function(extent) { - return 'https://ahocevar.com/geoserver/wfs?service=WFS&' + - 'version=1.1.0&request=GetFeature&typename=osm:water_areas&' + - 'outputFormat=application/json&srsname=EPSG:3857&' + - 'bbox=' + extent.join(',') + ',EPSG:3857'; + url: function (extent) { + return ( + 'https://ahocevar.com/geoserver/wfs?service=WFS&' + + 'version=1.1.0&request=GetFeature&typename=osm:water_areas&' + + 'outputFormat=application/json&srsname=EPSG:3857&' + + 'bbox=' + + extent.join(',') + + ',EPSG:3857' + ); }, - strategy: bboxStrategy + strategy: bboxStrategy, }); - const vector = new VectorLayer({ source: vectorSource, style: new Style({ stroke: new Stroke({ color: 'rgba(0, 0, 255, 1.0)', - width: 2 - }) - }) + width: 2, + }), + }), }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const raster = new TileLayer({ source: new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) + maxZoom: 20, + }), }); const map = new Map({ @@ -48,6 +51,6 @@ const map = new Map({ view: new View({ center: [-8908887.277395891, 5381918.072437216], maxZoom: 19, - zoom: 12 - }) + zoom: 12, + }), }); diff --git a/examples/webgl-points-layer.js b/examples/webgl-points-layer.js index 1db76814c4..efcde2a0d2 100644 --- a/examples/webgl-points-layer.js +++ b/examples/webgl-points-layer.js @@ -1,14 +1,14 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; -import Vector from '../src/ol/source/Vector.js'; +import Map from '../src/ol/Map.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import Vector from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js'; const vectorSource = new Vector({ url: 'data/geojson/world-cities.geojson', - format: new GeoJSON() + format: new GeoJSON(), }); const predefinedStyles = { @@ -19,8 +19,8 @@ const predefinedStyles = { size: [18, 28], color: 'lightyellow', rotateWithView: false, - offset: [0, 9] - } + offset: [0, 9], + }, }, 'triangles': { symbol: { @@ -30,11 +30,13 @@ const predefinedStyles = { 'interpolate', ['linear'], ['get', 'population'], - 20000, '#5aca5b', - 300000, '#ff6a19' + 20000, + '#5aca5b', + 300000, + '#ff6a19', ], - rotateWithView: true - } + rotateWithView: true, + }, }, 'triangles-latitude': { symbol: { @@ -43,21 +45,27 @@ const predefinedStyles = { 'interpolate', ['linear'], ['get', 'population'], - 40000, 12, - 2000000, 24 + 40000, + 12, + 2000000, + 24, ], color: [ 'interpolate', ['linear'], ['get', 'latitude'], - -60, '#ff14c3', - -20, '#ff621d', - 20, '#ffed02', - 60, '#00ff67' + -60, + '#ff14c3', + -20, + '#ff621d', + 20, + '#ffed02', + 60, + '#00ff67', ], offset: [0, 0], - opacity: 0.95 - } + opacity: 0.95, + }, }, 'circles': { symbol: { @@ -66,8 +74,10 @@ const predefinedStyles = { 'interpolate', ['linear'], ['get', 'population'], - 40000, 8, - 2000000, 28 + 40000, + 8, + 2000000, + 28, ], color: '#006688', rotateWithView: false, @@ -76,68 +86,76 @@ const predefinedStyles = { 'interpolate', ['linear'], ['get', 'population'], - 40000, 0.6, - 2000000, 0.92 - ] - } + 40000, + 0.6, + 2000000, + 0.92, + ], + }, }, 'circles-zoom': { symbol: { symbolType: 'circle', - size: [ - 'interpolate', - ['exponential', 2.5], - ['zoom'], - 2, 1, - 14, 32 - ], + size: ['interpolate', ['exponential', 2.5], ['zoom'], 2, 1, 14, 32], color: '#240572', offset: [0, 0], - opacity: 0.95 - } + opacity: 0.95, + }, }, 'rotating-bars': { symbol: { symbolType: 'square', - rotation: ['*', [ - 'time' - ], 0.1], - size: ['array', 4, [ - 'interpolate', - ['linear'], - ['get', 'population'], - 20000, 4, - 300000, 28] + rotation: ['*', ['time'], 0.1], + size: [ + 'array', + 4, + [ + 'interpolate', + ['linear'], + ['get', 'population'], + 20000, + 4, + 300000, + 28, + ], ], color: [ 'interpolate', ['linear'], ['get', 'population'], - 20000, '#ffdc00', - 300000, '#ff5b19' + 20000, + '#ffdc00', + 300000, + '#ff5b19', ], - offset: ['array', 0, [ - 'interpolate', - ['linear'], - ['get', 'population'], - 20000, 2, - 300000, 14] - ] - } - } + offset: [ + 'array', + 0, + [ + 'interpolate', + ['linear'], + ['get', 'population'], + 20000, + 2, + 300000, + 14, + ], + ], + }, + }, }; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: document.getElementById('map'), view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); let literalStyle; @@ -147,7 +165,7 @@ function refreshLayer(newStyle) { pointsLayer = new WebGLPointsLayer({ source: vectorSource, style: newStyle, - disableHitDetection: true + disableHitDetection: true, }); map.addLayer(pointsLayer); @@ -168,7 +186,7 @@ function setStyleStatus(errorMsg) { } const editor = document.getElementById('style-editor'); -editor.addEventListener('input', function() { +editor.addEventListener('input', function () { const textStyle = editor.value; try { const newLiteralStyle = JSON.parse(textStyle); diff --git a/examples/webpack/config.js b/examples/webpack/config.js index 5ff92a550d..e6e7bc7a80 100644 --- a/examples/webpack/config.js +++ b/examples/webpack/config.js @@ -6,12 +6,13 @@ const path = require('path'); const src = path.join(__dirname, '..'); -const examples = fs.readdirSync(src) - .filter(name => /^(?!index).*\.html$/.test(name)) - .map(name => name.replace(/\.html$/, '')); +const examples = fs + .readdirSync(src) + .filter((name) => /^(?!index).*\.html$/.test(name)) + .map((name) => name.replace(/\.html$/, '')); const entry = {}; -examples.forEach(example => { +examples.forEach((example) => { entry[example] = `./${example}.js`; }); @@ -21,67 +22,68 @@ module.exports = { entry: entry, stats: 'minimal', module: { - rules: [{ - test: /^((?!es2015-)[\s\S])*\.js$/, - use: { - loader: 'buble-loader' + rules: [ + { + test: /^((?!es2015-)[\s\S])*\.js$/, + use: { + loader: 'buble-loader', + }, + include: [ + path.join(__dirname, '..', '..', 'src'), + path.join(__dirname, '..'), + ], }, - include: [ - path.join(__dirname, '..', '..', 'src'), - path.join(__dirname, '..') - ] - }, { - test: /\.js$/, - use: { - loader: path.join(__dirname, './worker-loader.js') + { + test: /\.js$/, + use: { + loader: path.join(__dirname, './worker-loader.js'), + }, + include: [path.join(__dirname, '../../src/ol/worker')], }, - include: [ - path.join(__dirname, '../../src/ol/worker') - ] - }] + ], }, optimization: { minimizer: [ new TerserPlugin({ sourceMap: true, // Do not minify examples that inject code into workers - exclude: [/(color-manipulation|region-growing|raster)\.js/] - }) + exclude: [/(color-manipulation|region-growing|raster)\.js/], + }), ], runtimeChunk: { - name: 'common' + name: 'common', }, splitChunks: { name: 'common', chunks: 'initial', - minChunks: 2 - } + minChunks: 2, + }, }, plugins: [ new ExampleBuilder({ templates: path.join(__dirname, '..', 'templates'), - common: 'common' + common: 'common', }), new CopyPlugin([ {from: '../src/ol/ol.css', to: 'css'}, {from: 'data', to: 'data'}, {from: 'resources', to: 'resources'}, {from: 'Jugl.js', to: 'Jugl.js'}, - {from: 'index.html', to: 'index.html'} - ]) + {from: 'index.html', to: 'index.html'}, + ]), ], devtool: 'source-map', output: { filename: '[name].js', - path: path.join(__dirname, '..', '..', 'build', 'examples') + path: path.join(__dirname, '..', '..', 'build', 'examples'), }, node: { - fs: 'empty' // required by ol-mapbox-stlye + fs: 'empty', // required by ol-mapbox-stlye }, resolve: { alias: { // allow imports from 'ol/module' instead of specifiying the source path - ol: path.join(__dirname, '..', '..', 'src', 'ol') - } - } + ol: path.join(__dirname, '..', '..', 'src', 'ol'), + }, + }, }; diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js index 37148fb303..6af08b69ad 100644 --- a/examples/webpack/example-builder.js +++ b/examples/webpack/example-builder.js @@ -12,7 +12,10 @@ const isCssRegEx = /\.css$/; const isJsRegEx = /\.js(\?.*)?$/; const importRegEx = /^import .* from '(.*)';$/; -handlebars.registerHelper('md', str => new handlebars.SafeString(marked(str))); +handlebars.registerHelper( + 'md', + (str) => new handlebars.SafeString(marked(str)) +); handlebars.registerHelper('indent', (text, options) => { if (!text) { @@ -20,7 +23,10 @@ handlebars.registerHelper('indent', (text, options) => { } const count = options.hash.spaces || 2; const spaces = new Array(count + 1).join(' '); - return text.split('\n').map(line => line ? spaces + line : '').join('\n'); + return text + .split('\n') + .map((line) => (line ? spaces + line : '')) + .join('\n'); }); /** @@ -34,13 +40,13 @@ function createWordIndex(exampleData) { const index = {}; const keys = ['shortdesc', 'title', 'tags']; exampleData.forEach((data, i) => { - keys.forEach(key => { + keys.forEach((key) => { let text = data[key]; if (Array.isArray(text)) { text = text.join(' '); } const words = text ? text.split(/\W+/) : []; - words.forEach(word => { + words.forEach((word) => { if (word) { word = word.toLowerCase(); let counts = index[word]; @@ -92,7 +98,7 @@ function getJsSource(chunk, jsName) { function getDependencies(jsSource) { const lines = jsSource.split('\n'); const dependencies = { - ol: pkg.version + ol: pkg.version, }; for (let i = 0, ii = lines.length; i < ii; ++i) { const line = lines[i]; @@ -116,202 +122,225 @@ function getDependencies(jsSource) { return dependencies; } -/** - * A webpack plugin that builds the html files for our examples. - * @param {Object} config Plugin configuration. Requires a `templates` property - * with the path to templates and a `common` property with the name of the - * common chunk. - * @constructor - */ -function ExampleBuilder(config) { - this.templates = config.templates; - this.common = config.common; -} +class ExampleBuilder { + /** + * A webpack plugin that builds the html files for our examples. + * @param {Object} config Plugin configuration. Requires a `templates` property + * with the path to templates and a `common` property with the name of the + * common chunk. + */ + constructor(config) { + this.templates = config.templates; + this.common = config.common; + } -/** - * Called by webpack. - * @param {Object} compiler The webpack compiler. - */ -ExampleBuilder.prototype.apply = function(compiler) { - compiler.hooks.emit.tapPromise('ExampleBuilder', async (compilation) => { - const chunks = compilation.getStats().toJson().chunks - .filter(chunk => chunk.names[0] !== this.common); + /** + * Called by webpack. + * @param {Object} compiler The webpack compiler. + */ + apply(compiler) { + compiler.hooks.emit.tapPromise('ExampleBuilder', async (compilation) => { + const chunks = compilation + .getStats() + .toJson() + .chunks.filter((chunk) => chunk.names[0] !== this.common); - const exampleData = []; - const uniqueTags = new Set(); - const promises = chunks.map(async chunk => { - const [assets, data] = await this.render(compiler.context, chunk); + const exampleData = []; + const uniqueTags = new Set(); + const promises = chunks.map(async (chunk) => { + const [assets, data] = await this.render(compiler.context, chunk); - // collect tags for main page... TODO: implement index tag links - data.tags.forEach(tag => uniqueTags.add(tag)); + // collect tags for main page... TODO: implement index tag links + data.tags.forEach((tag) => uniqueTags.add(tag)); - exampleData.push({ - link: data.filename, - example: data.filename, - title: data.title, - shortdesc: data.shortdesc, - tags: data.tags + exampleData.push({ + link: data.filename, + example: data.filename, + title: data.title, + shortdesc: data.shortdesc, + tags: data.tags, + }); + + for (const file in assets) { + compilation.assets[file] = new RawSource(assets[file]); + } }); - for (const file in assets) { - compilation.assets[file] = new RawSource(assets[file]); - } + await Promise.all(promises); + + const info = { + examples: exampleData, + index: createWordIndex(exampleData), + tags: Array.from(uniqueTags), + }; + + const indexSource = `var info = ${JSON.stringify(info)}`; + compilation.assets['index.js'] = new RawSource(indexSource); }); - - await Promise.all(promises); - - const info = { - examples: exampleData, - index: createWordIndex(exampleData), - tags: Array.from(uniqueTags) - }; - - const indexSource = `var info = ${JSON.stringify(info)}`; - compilation.assets['index.js'] = new RawSource(indexSource); - }); -}; - -ExampleBuilder.prototype.render = async function(dir, chunk) { - const name = chunk.names[0]; - - const assets = {}; - const readOptions = {encoding: 'utf8'}; - - const htmlName = `${name}.html`; - const htmlPath = path.join(dir, htmlName); - const htmlSource = await readFile(htmlPath, readOptions); - - const {attributes, body} = frontMatter(htmlSource); - const data = Object.assign(attributes, {contents: body}); - - data.olVersion = pkg.version; - data.filename = htmlName; - - // process tags - if (data.tags) { - data.tags = data.tags.replace(/[\s"]+/g, '').split(','); - } else { - data.tags = []; } - // add in script tag - const jsName = `${name}.js`; - let jsSource = getJsSource(chunk, path.join('.', jsName)); - if (!jsSource) { - throw new Error(`No .js source for ${jsName}`); - } - // remove "../src/" prefix and ".js" to have the same import syntax as the documentation - jsSource = jsSource.replace(/'\.\.\/src\//g, '\''); - jsSource = jsSource.replace(/\.js';/g, '\';'); - if (data.cloak) { - for (const entry of data.cloak) { - jsSource = jsSource.replace(new RegExp(entry.key, 'g'), entry.value); + async render(dir, chunk) { + const name = chunk.names[0]; + + const assets = {}; + const readOptions = {encoding: 'utf8'}; + + const htmlName = `${name}.html`; + const htmlPath = path.join(dir, htmlName); + const htmlSource = await readFile(htmlPath, readOptions); + + const {attributes, body} = frontMatter(htmlSource); + const data = Object.assign(attributes, {contents: body}); + + data.olVersion = pkg.version; + data.filename = htmlName; + + // process tags + if (data.tags) { + data.tags = data.tags.replace(/[\s"]+/g, '').split(','); + } else { + data.tags = []; } - } - // Remove worker loader import and modify `new Worker()` to add source - jsSource = jsSource.replace(/import Worker from 'worker-loader![^\n]*\n/g, ''); - jsSource = jsSource.replace('new Worker()', 'new Worker(\'./worker.js\')'); - data.js = { - tag: ``, - source: jsSource - }; - - if (data.experimental) { - const prelude = ''; - data.js.tag = prelude + data.js.tag; - } - - // check for worker js - const workerName = `${name}.worker.js`; - const workerPath = path.join(dir, workerName); - let workerSource; - try { - workerSource = await readFile(workerPath, readOptions); - } catch (err) { - // pass - } - if (workerSource) { + // add in script tag + const jsName = `${name}.js`; + let jsSource = getJsSource(chunk, path.join('.', jsName)); + if (!jsSource) { + throw new Error(`No .js source for ${jsName}`); + } // remove "../src/" prefix and ".js" to have the same import syntax as the documentation - workerSource = workerSource.replace(/'\.\.\/src\//g, '\''); - workerSource = workerSource.replace(/\.js';/g, '\';'); + jsSource = jsSource.replace(/'\.\.\/src\//g, "'"); + jsSource = jsSource.replace(/\.js';/g, "';"); if (data.cloak) { for (const entry of data.cloak) { - workerSource = workerSource.replace(new RegExp(entry.key, 'g'), entry.value); + jsSource = jsSource.replace(new RegExp(entry.key, 'g'), entry.value); } } - data.worker = { - source: workerSource - }; - assets[workerName] = workerSource; - } + // Remove worker loader import and modify `new Worker()` to add source + jsSource = jsSource.replace( + /import Worker from 'worker-loader![^\n]*\n/g, + '' + ); + jsSource = jsSource.replace('new Worker()', "new Worker('./worker.js')"); - data.pkgJson = JSON.stringify({ - name: name, - dependencies: getDependencies(jsSource + (workerSource ? `\n${workerSource}` : '')), - devDependencies: { - parcel: '1.11.0' - }, - scripts: { - start: 'parcel index.html', - build: 'parcel build --experimental-scope-hoisting --public-url . index.html' + data.js = { + tag: ``, + source: jsSource, + }; + + if (data.experimental) { + const prelude = ''; + data.js.tag = prelude + data.js.tag; } - }, null, 2); - // check for example css - const cssName = `${name}.css`; - const cssPath = path.join(dir, cssName); - let cssSource; - try { - cssSource = await readFile(cssPath, readOptions); - } catch (err) { - // pass - } - if (cssSource) { - data.css = { - tag: ``, - source: cssSource - }; - assets[cssName] = cssSource; - } - - // add additional resources - if (data.resources) { - const resources = []; - const remoteResources = []; - const codePenResources = []; - for (let i = 0, ii = data.resources.length; i < ii; ++i) { - const resource = data.resources[i]; - const remoteResource = resource.indexOf('//') === -1 ? - `https://openlayers.org/en/v${pkg.version}/examples/${resource}` : resource; - codePenResources[i] = remoteResource; - if (isJsRegEx.test(resource)) { - resources[i] = ``; - remoteResources[i] = ``; - } else if (isCssRegEx.test(resource)) { - if (resource.indexOf('bootstrap.min.css') === -1) { - resources[i] = ''; + // check for worker js + const workerName = `${name}.worker.js`; + const workerPath = path.join(dir, workerName); + let workerSource; + try { + workerSource = await readFile(workerPath, readOptions); + } catch (err) { + // pass + } + if (workerSource) { + // remove "../src/" prefix and ".js" to have the same import syntax as the documentation + workerSource = workerSource.replace(/'\.\.\/src\//g, "'"); + workerSource = workerSource.replace(/\.js';/g, "';"); + if (data.cloak) { + for (const entry of data.cloak) { + workerSource = workerSource.replace( + new RegExp(entry.key, 'g'), + entry.value + ); } - remoteResources[i] = ''; - } else { - throw new Error('Invalid value for resource: ' + - resource + ' is not .js or .css: ' + htmlName); } + data.worker = { + source: workerSource, + }; + assets[workerName] = workerSource; } - data.extraHead = { - local: resources.join('\n'), - remote: remoteResources.join('\n') - }; - data.extraResources = data.resources.length ? - ',' + codePenResources.join(',') : ''; + + data.pkgJson = JSON.stringify( + { + name: name, + dependencies: getDependencies( + jsSource + (workerSource ? `\n${workerSource}` : '') + ), + devDependencies: { + parcel: '1.11.0', + }, + scripts: { + start: 'parcel index.html', + build: + 'parcel build --experimental-scope-hoisting --public-url . index.html', + }, + }, + null, + 2 + ); + + // check for example css + const cssName = `${name}.css`; + const cssPath = path.join(dir, cssName); + let cssSource; + try { + cssSource = await readFile(cssPath, readOptions); + } catch (err) { + // pass + } + if (cssSource) { + data.css = { + tag: ``, + source: cssSource, + }; + assets[cssName] = cssSource; + } + + // add additional resources + if (data.resources) { + const resources = []; + const remoteResources = []; + const codePenResources = []; + for (let i = 0, ii = data.resources.length; i < ii; ++i) { + const resource = data.resources[i]; + const remoteResource = + resource.indexOf('//') === -1 + ? `https://openlayers.org/en/v${pkg.version}/examples/${resource}` + : resource; + codePenResources[i] = remoteResource; + if (isJsRegEx.test(resource)) { + resources[i] = ``; + remoteResources[i] = ``; + } else if (isCssRegEx.test(resource)) { + if (resource.indexOf('bootstrap.min.css') === -1) { + resources[i] = ''; + } + remoteResources[i] = + ''; + } else { + throw new Error( + 'Invalid value for resource: ' + + resource + + ' is not .js or .css: ' + + htmlName + ); + } + } + data.extraHead = { + local: resources.join('\n'), + remote: remoteResources.join('\n'), + }; + data.extraResources = data.resources.length + ? ',' + codePenResources.join(',') + : ''; + } + + const templatePath = path.join(this.templates, attributes.layout); + const templateSource = await readFile(templatePath, readOptions); + + assets[htmlName] = handlebars.compile(templateSource)(data); + return [assets, data]; } - - const templatePath = path.join(this.templates, attributes.layout); - const templateSource = await readFile(templatePath, readOptions); - - assets[htmlName] = handlebars.compile(templateSource)(data); - return [assets, data]; -}; +} module.exports = ExampleBuilder; diff --git a/examples/webpack/worker-loader.js b/examples/webpack/worker-loader.js index d03e126a32..cdaa577f07 100644 --- a/examples/webpack/worker-loader.js +++ b/examples/webpack/worker-loader.js @@ -5,7 +5,7 @@ function loader() { const minify = this.mode === 'production'; build(this.resource, {minify}) - .then(chunk => { + .then((chunk) => { for (const filePath in chunk.modules) { this.addDependency(filePath); } diff --git a/examples/wkt.js b/examples/wkt.js index ced8bb4242..8dcece066c 100644 --- a/examples/wkt.js +++ b/examples/wkt.js @@ -1,28 +1,29 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; import WKT from '../src/ol/format/WKT.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); -const wkt = 'POLYGON((10.689 -25.092, 34.595 ' + - '-20.170, 38.814 -35.639, 13.502 ' + - '-39.155, 10.689 -25.092))'; +const wkt = + 'POLYGON((10.689 -25.092, 34.595 ' + + '-20.170, 38.814 -35.639, 13.502 ' + + '-39.155, 10.689 -25.092))'; const format = new WKT(); const feature = format.readFeature(wkt, { dataProjection: 'EPSG:4326', - featureProjection: 'EPSG:3857' + featureProjection: 'EPSG:3857', }); const vector = new VectorLayer({ source: new VectorSource({ - features: [feature] - }) + features: [feature], + }), }); const map = new Map({ @@ -30,6 +31,6 @@ const map = new Map({ target: 'map', view: new View({ center: [2952104.0199, -3277504.823], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/wms-capabilities.js b/examples/wms-capabilities.js index 22ff6ab91c..07bc4115d1 100644 --- a/examples/wms-capabilities.js +++ b/examples/wms-capabilities.js @@ -2,9 +2,11 @@ import WMSCapabilities from '../src/ol/format/WMSCapabilities.js'; const parser = new WMSCapabilities(); -fetch('data/ogcsample.xml').then(function(response) { - return response.text(); -}).then(function(text) { - const result = parser.read(text); - document.getElementById('log').innerText = JSON.stringify(result, null, 2); -}); +fetch('data/ogcsample.xml') + .then(function (response) { + return response.text(); + }) + .then(function (text) { + const result = parser.read(text); + document.getElementById('log').innerText = JSON.stringify(result, null, 2); + }); diff --git a/examples/wms-custom-proj.js b/examples/wms-custom-proj.js index 7b5d09c134..21f5611400 100644 --- a/examples/wms-custom-proj.js +++ b/examples/wms-custom-proj.js @@ -1,11 +1,14 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, ScaleLine} from '../src/ol/control.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {addProjection, addCoordinateTransforms, transform} from '../src/ol/proj.js'; import Projection from '../src/ol/proj/Projection.js'; +import TileLayer from '../src/ol/layer/Tile.js'; import TileWMS from '../src/ol/source/TileWMS.js'; - +import View from '../src/ol/View.js'; +import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js'; +import { + addCoordinateTransforms, + addProjection, + transform, +} from '../src/ol/proj.js'; // By default OpenLayers does not know about the EPSG:21781 (Swiss) projection. // So we create a projection instance for EPSG:21781 and pass it to @@ -17,7 +20,7 @@ const projection = new Projection({ // The extent is used to determine zoom level 0. Recommended values for a // projection's validity extent can be found at https://epsg.io/. extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864], - units: 'm' + units: 'm', }); addProjection(projection); @@ -25,19 +28,22 @@ addProjection(projection); // are necessary for the ScaleLine control and when calling ol/proj~transform // for setting the view's initial center (see below). -addCoordinateTransforms('EPSG:4326', projection, - function(coordinate) { +addCoordinateTransforms( + 'EPSG:4326', + projection, + function (coordinate) { return [ WGStoCHy(coordinate[1], coordinate[0]), - WGStoCHx(coordinate[1], coordinate[0]) + WGStoCHx(coordinate[1], coordinate[0]), ]; }, - function(coordinate) { + function (coordinate) { return [ CHtoWGSlng(coordinate[0], coordinate[1]), - CHtoWGSlat(coordinate[0], coordinate[1]) + CHtoWGSlat(coordinate[0], coordinate[1]), ]; - }); + } +); const extent = [420000, 30000, 900000, 350000]; const layers = [ @@ -46,33 +52,35 @@ const layers = [ source: new TileWMS({ url: 'https://wms.geo.admin.ch/', crossOrigin: 'anonymous', - attributions: '© Pixelmap 1:1000000 / geo.admin.ch', + attributions: + '© Pixelmap 1:1000000 / geo.admin.ch', params: { 'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale', - 'FORMAT': 'image/jpeg' + 'FORMAT': 'image/jpeg', }, - serverType: 'mapserver' - }) + serverType: 'mapserver', + }), }), new TileLayer({ extent: extent, source: new TileWMS({ url: 'https://wms.geo.admin.ch/', crossOrigin: 'anonymous', - attributions: '© National parks / geo.admin.ch', + attributions: + '© National parks / geo.admin.ch', params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}, - serverType: 'mapserver' - }) - }) + serverType: 'mapserver', + }), + }), ]; const map = new Map({ controls: defaultControls().extend([ new ScaleLine({ - units: 'metric' - }) + units: 'metric', + }), ]), layers: layers, target: 'map', @@ -80,11 +88,10 @@ const map = new Map({ projection: projection, center: transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781'), extent: extent, - zoom: 2 - }) + zoom: 2, + }), }); - /* * Swiss projection transform functions downloaded from * http://www.swisstopo.admin.ch/internet/swisstopo/en/home/products/software/products/skripts.html @@ -92,7 +99,6 @@ const map = new Map({ // Convert WGS lat/long (° dec) to CH y function WGStoCHy(lat, lng) { - // Converts degrees dec to sex lat = DECtoSEX(lat); lng = DECtoSEX(lng); @@ -106,18 +112,18 @@ function WGStoCHy(lat, lng) { const lng_aux = (lng - 26782.5) / 10000; // Process Y - const y = 600072.37 + - 211455.93 * lng_aux - - 10938.51 * lng_aux * lat_aux - - 0.36 * lng_aux * Math.pow(lat_aux, 2) - - 44.54 * Math.pow(lng_aux, 3); + const y = + 600072.37 + + 211455.93 * lng_aux - + 10938.51 * lng_aux * lat_aux - + 0.36 * lng_aux * Math.pow(lat_aux, 2) - + 44.54 * Math.pow(lng_aux, 3); return y; } // Convert WGS lat/long (° dec) to CH x function WGStoCHx(lat, lng) { - // Converts degrees dec to sex lat = DECtoSEX(lat); lng = DECtoSEX(lng); @@ -131,84 +137,77 @@ function WGStoCHx(lat, lng) { const lng_aux = (lng - 26782.5) / 10000; // Process X - const x = 200147.07 + - 308807.95 * lat_aux + - 3745.25 * Math.pow(lng_aux, 2) + - 76.63 * Math.pow(lat_aux, 2) - - 194.56 * Math.pow(lng_aux, 2) * lat_aux + - 119.79 * Math.pow(lat_aux, 3); + const x = + 200147.07 + + 308807.95 * lat_aux + + 3745.25 * Math.pow(lng_aux, 2) + + 76.63 * Math.pow(lat_aux, 2) - + 194.56 * Math.pow(lng_aux, 2) * lat_aux + + 119.79 * Math.pow(lat_aux, 3); return x; - } - // Convert CH y/x to WGS lat function CHtoWGSlat(y, x) { - // Converts militar to civil and to unit = 1000km // Axiliary values (% Bern) const y_aux = (y - 600000) / 1000000; const x_aux = (x - 200000) / 1000000; // Process lat - let lat = 16.9023892 + - 3.238272 * x_aux - - 0.270978 * Math.pow(y_aux, 2) - - 0.002528 * Math.pow(x_aux, 2) - - 0.0447 * Math.pow(y_aux, 2) * x_aux - - 0.0140 * Math.pow(x_aux, 3); + let lat = + 16.9023892 + + 3.238272 * x_aux - + 0.270978 * Math.pow(y_aux, 2) - + 0.002528 * Math.pow(x_aux, 2) - + 0.0447 * Math.pow(y_aux, 2) * x_aux - + 0.014 * Math.pow(x_aux, 3); // Unit 10000" to 1 " and converts seconds to degrees (dec) - lat = lat * 100 / 36; + lat = (lat * 100) / 36; return lat; - } // Convert CH y/x to WGS long function CHtoWGSlng(y, x) { - // Converts militar to civil and to unit = 1000km // Axiliary values (% Bern) const y_aux = (y - 600000) / 1000000; const x_aux = (x - 200000) / 1000000; // Process long - let lng = 2.6779094 + - 4.728982 * y_aux + - 0.791484 * y_aux * x_aux + - 0.1306 * y_aux * Math.pow(x_aux, 2) - - 0.0436 * Math.pow(y_aux, 3); + let lng = + 2.6779094 + + 4.728982 * y_aux + + 0.791484 * y_aux * x_aux + + 0.1306 * y_aux * Math.pow(x_aux, 2) - + 0.0436 * Math.pow(y_aux, 3); // Unit 10000" to 1 " and converts seconds to degrees (dec) - lng = lng * 100 / 36; + lng = (lng * 100) / 36; return lng; - } - // Convert DEC angle to SEX DMS function DECtoSEX(angle) { - // Extract DMS const deg = parseInt(angle, 10); const min = parseInt((angle - deg) * 60, 10); - const sec = (((angle - deg) * 60) - min) * 60; + const sec = ((angle - deg) * 60 - min) * 60; // Result in degrees sex (dd.mmss) return deg + min / 100 + sec / 10000; - } // Convert Degrees angle to seconds function DEGtoSEC(angle) { - // Extract DMS const deg = parseInt(angle, 10); let min = parseInt((angle - deg) * 100, 10); - let sec = (((angle - deg) * 100) - min) * 100; + let sec = ((angle - deg) * 100 - min) * 100; // Avoid rounding problems with seconds=0 const parts = String(angle).split('.'); @@ -219,5 +218,4 @@ function DEGtoSEC(angle) { // Result in degrees sex (dd.mmss) return sec + min * 60 + deg * 3600; - } diff --git a/examples/wms-custom-tilegrid-512x256.js b/examples/wms-custom-tilegrid-512x256.js index cdffd2d696..cc2b5a7d07 100644 --- a/examples/wms-custom-tilegrid-512x256.js +++ b/examples/wms-custom-tilegrid-512x256.js @@ -1,12 +1,11 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {getWidth} from '../src/ol/extent.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {get as getProjection} from '../src/ol/proj.js'; import OSM from '../src/ol/source/OSM.js'; -import TileWMS from '../src/ol/source/TileWMS.js'; import TileGrid from '../src/ol/tilegrid/TileGrid.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import TileWMS from '../src/ol/source/TileWMS.js'; +import View from '../src/ol/View.js'; +import {get as getProjection} from '../src/ol/proj.js'; +import {getWidth} from '../src/ol/extent.js'; const projExtent = getProjection('EPSG:3857').getExtent(); const startResolution = getWidth(projExtent) / 256; @@ -17,27 +16,27 @@ for (let i = 0, ii = resolutions.length; i < ii; ++i) { const tileGrid = new TileGrid({ extent: [-13884991, 2870341, -7455066, 6338219], resolutions: resolutions, - tileSize: [512, 256] + tileSize: [512, 256], }); const layers = [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ source: new TileWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'topp:states', 'TILED': true}, serverType: 'geoserver', - tileGrid: tileGrid - }) - }) + tileGrid: tileGrid, + }), + }), ]; const map = new Map({ layers: layers, target: 'map', view: new View({ center: [-10997148, 4569099], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/wms-getlegendgraphic.js b/examples/wms-getlegendgraphic.js index 76b847874f..2181307f61 100644 --- a/examples/wms-getlegendgraphic.js +++ b/examples/wms-getlegendgraphic.js @@ -1,17 +1,17 @@ +import ImageWMS from '../src/ol/source/ImageWMS.js'; import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; import View from '../src/ol/View.js'; import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -import ImageWMS from '../src/ol/source/ImageWMS.js'; -import OSM from '../src/ol/source/OSM.js'; const wmsSource = new ImageWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'topp:states'}, ratio: 1, - serverType: 'geoserver' + serverType: 'geoserver', }); -const updateLegend = function(resolution) { +const updateLegend = function (resolution) { const graphicUrl = wmsSource.getLegendUrl(resolution); const img = document.getElementById('legend'); img.src = graphicUrl; @@ -19,12 +19,12 @@ const updateLegend = function(resolution) { const layers = [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new ImageLayer({ extent: [-13884991, 2870341, -7455066, 6338219], - source: wmsSource - }) + source: wmsSource, + }), ]; const map = new Map({ @@ -32,8 +32,8 @@ const map = new Map({ target: 'map', view: new View({ center: [-10997148, 4569099], - zoom: 4 - }) + zoom: 4, + }), }); // Initial legend @@ -41,7 +41,7 @@ const resolution = map.getView().getResolution(); updateLegend(resolution); // Update the legend when the resolution changes -map.getView().on('change:resolution', function(event) { +map.getView().on('change:resolution', function (event) { const resolution = event.target.getResolution(); updateLegend(resolution); }); diff --git a/examples/wms-image-custom-proj.js b/examples/wms-image-custom-proj.js index 9637b5d357..a52125d80a 100644 --- a/examples/wms-image-custom-proj.js +++ b/examples/wms-image-custom-proj.js @@ -1,13 +1,12 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, ScaleLine} from '../src/ol/control.js'; import ImageLayer from '../src/ol/layer/Image.js'; -import {fromLonLat} from '../src/ol/proj.js'; -import Projection from '../src/ol/proj/Projection.js'; import ImageWMS from '../src/ol/source/ImageWMS.js'; -import {register} from '../src/ol/proj/proj4.js'; +import Map from '../src/ol/Map.js'; +import Projection from '../src/ol/proj/Projection.js'; +import View from '../src/ol/View.js'; import proj4 from 'proj4'; - +import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js'; +import {fromLonLat} from '../src/ol/proj.js'; +import {register} from '../src/ol/proj/proj4.js'; // Transparent Proj4js support: // @@ -22,15 +21,17 @@ import proj4 from 'proj4'; // determine the view resolution for zoom level 0. Recommended values for a // projection's validity extent can be found at https://epsg.io/. -proj4.defs('EPSG:21781', +proj4.defs( + 'EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 ' + '+x_0=600000 +y_0=200000 +ellps=bessel ' + - '+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs'); + '+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs' +); register(proj4); const projection = new Projection({ code: 'EPSG:21781', - extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864] + extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864], }); const extent = [420000, 30000, 900000, 350000]; @@ -40,38 +41,38 @@ const layers = [ source: new ImageWMS({ url: 'https://wms.geo.admin.ch/', crossOrigin: 'anonymous', - attributions: '© Pixelmap 1:1000000 / geo.admin.ch', + attributions: + '© Pixelmap 1:1000000 / geo.admin.ch', params: { 'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale', - 'FORMAT': 'image/jpeg' + 'FORMAT': 'image/jpeg', }, - serverType: 'mapserver' - }) + serverType: 'mapserver', + }), }), new ImageLayer({ extent: extent, source: new ImageWMS({ url: 'https://wms.geo.admin.ch/', crossOrigin: 'anonymous', - attributions: '© National parks / geo.admin.ch', + attributions: + '© National parks / geo.admin.ch', params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}, - serverType: 'mapserver' - }) - }) + serverType: 'mapserver', + }), + }), ]; const map = new Map({ - controls: defaultControls().extend([ - new ScaleLine() - ]), + controls: defaultControls().extend([new ScaleLine()]), layers: layers, target: 'map', view: new View({ projection: projection, center: fromLonLat([8.23, 46.86], projection), extent: extent, - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/wms-image.js b/examples/wms-image.js index ebadd9351d..1f19d1e334 100644 --- a/examples/wms-image.js +++ b/examples/wms-image.js @@ -1,13 +1,12 @@ +import ImageWMS from '../src/ol/source/ImageWMS.js'; import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; import View from '../src/ol/View.js'; import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -import ImageWMS from '../src/ol/source/ImageWMS.js'; -import OSM from '../src/ol/source/OSM.js'; - const layers = [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new ImageLayer({ extent: [-13884991, 2870341, -7455066, 6338219], @@ -15,15 +14,15 @@ const layers = [ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'topp:states'}, ratio: 1, - serverType: 'geoserver' - }) - }) + serverType: 'geoserver', + }), + }), ]; const map = new Map({ layers: layers, target: 'map', view: new View({ center: [-10997148, 4569099], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/wms-no-proj.js b/examples/wms-no-proj.js index ca1d270fff..2f515f8d3d 100644 --- a/examples/wms-no-proj.js +++ b/examples/wms-no-proj.js @@ -1,34 +1,35 @@ +import ImageWMS from '../src/ol/source/ImageWMS.js'; import Map from '../src/ol/Map.js'; +import Projection from '../src/ol/proj/Projection.js'; +import TileWMS from '../src/ol/source/TileWMS.js'; import View from '../src/ol/View.js'; import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -import Projection from '../src/ol/proj/Projection.js'; -import ImageWMS from '../src/ol/source/ImageWMS.js'; -import TileWMS from '../src/ol/source/TileWMS.js'; - const layers = [ new TileLayer({ source: new TileWMS({ - attributions: '© Pixelmap 1:1000000 / geo.admin.ch', + attributions: + '© Pixelmap 1:1000000 / geo.admin.ch', crossOrigin: 'anonymous', params: { 'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale', - 'FORMAT': 'image/jpeg' + 'FORMAT': 'image/jpeg', }, - url: 'https://wms.geo.admin.ch/' - }) + url: 'https://wms.geo.admin.ch/', + }), }), new ImageLayer({ source: new ImageWMS({ - attributions: '© National parks / geo.admin.ch', + attributions: + '© National parks / geo.admin.ch', crossOrigin: 'anonymous', params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}, serverType: 'mapserver', - url: 'https://wms.geo.admin.ch/' - }) - }) + url: 'https://wms.geo.admin.ch/', + }), + }), ]; // A minimal projection object is configured with only the SRS code and the map @@ -38,7 +39,7 @@ const layers = [ // coordinates relate to latitude or longitude. const projection = new Projection({ code: 'EPSG:21781', - units: 'm' + units: 'm', }); const map = new Map({ @@ -47,6 +48,6 @@ const map = new Map({ view: new View({ center: [660000, 190000], projection: projection, - zoom: 9 - }) + zoom: 9, + }), }); diff --git a/examples/wms-tiled-wrap-180.js b/examples/wms-tiled-wrap-180.js index 07ec52ac71..4463ae4c54 100644 --- a/examples/wms-tiled-wrap-180.js +++ b/examples/wms-tiled-wrap-180.js @@ -1,27 +1,26 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; import TileWMS from '../src/ol/source/TileWMS.js'; - +import View from '../src/ol/View.js'; const layers = [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ source: new TileWMS({ url: 'https://ahocevar.com/geoserver/ne/wms', params: {'LAYERS': 'ne:ne_10m_admin_0_countries', 'TILED': true}, - serverType: 'geoserver' - }) - }) + serverType: 'geoserver', + }), + }), ]; const map = new Map({ layers: layers, target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); diff --git a/examples/wms-tiled.js b/examples/wms-tiled.js index a7aacd5105..5bc7ce85b7 100644 --- a/examples/wms-tiled.js +++ b/examples/wms-tiled.js @@ -1,13 +1,12 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; import TileWMS from '../src/ol/source/TileWMS.js'; - +import View from '../src/ol/View.js'; const layers = [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ extent: [-13884991, 2870341, -7455066, 6338219], @@ -16,15 +15,15 @@ const layers = [ params: {'LAYERS': 'topp:states', 'TILED': true}, serverType: 'geoserver', // Countries have transparency, so do not fade tiles: - transition: 0 - }) - }) + transition: 0, + }), + }), ]; const map = new Map({ layers: layers, target: 'map', view: new View({ center: [-10997148, 4569099], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/wms-time.js b/examples/wms-time.js index 18bce02a25..356634a31a 100644 --- a/examples/wms-time.js +++ b/examples/wms-time.js @@ -1,10 +1,10 @@ import Map from '../src/ol/Map.js'; +import Stamen from '../src/ol/source/Stamen.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import TileWMS from '../src/ol/source/TileWMS.js'; import View from '../src/ol/View.js'; import {getCenter} from '../src/ol/extent.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import {transformExtent} from '../src/ol/proj.js'; -import Stamen from '../src/ol/source/Stamen.js'; -import TileWMS from '../src/ol/source/TileWMS.js'; function threeHoursAgo() { return new Date(Math.round(Date.now() / 3600000) * 3600000 - 3600000 * 3); @@ -18,25 +18,25 @@ let animationId = null; const layers = [ new TileLayer({ source: new Stamen({ - layer: 'terrain' - }) + layer: 'terrain', + }), }), new TileLayer({ extent: extent, source: new TileWMS({ attributions: ['Iowa State University'], url: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi', - params: {'LAYERS': 'nexrad-n0r-wmst'} - }) - }) + params: {'LAYERS': 'nexrad-n0r-wmst'}, + }), + }), ]; const map = new Map({ layers: layers, target: 'map', view: new View({ center: getCenter(extent), - zoom: 4 - }) + zoom: 4, + }), }); function updateInfo() { @@ -54,14 +54,14 @@ function setTime() { } setTime(); -const stop = function() { +const stop = function () { if (animationId !== null) { window.clearInterval(animationId); animationId = null; } }; -const play = function() { +const play = function () { stop(); animationId = window.setInterval(setTime, 1000 / frameRate); }; diff --git a/examples/wmts-capabilities.js b/examples/wmts-capabilities.js index c22f3c3c99..8650b863b3 100644 --- a/examples/wmts-capabilities.js +++ b/examples/wmts-capabilities.js @@ -2,9 +2,11 @@ import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js'; const parser = new WMTSCapabilities(); -fetch('data/WMTSCapabilities.xml').then(function(response) { - return response.text(); -}).then(function(text) { - const result = parser.read(text); - document.getElementById('log').innerText = JSON.stringify(result, null, 2); -}); +fetch('data/WMTSCapabilities.xml') + .then(function (response) { + return response.text(); + }) + .then(function (text) { + const result = parser.read(text); + document.getElementById('log').innerText = JSON.stringify(result, null, 2); + }); diff --git a/examples/wmts-dimensions.js b/examples/wmts-dimensions.js index f29313ac4d..6e1afc9e75 100644 --- a/examples/wmts-dimensions.js +++ b/examples/wmts-dimensions.js @@ -1,12 +1,11 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {getWidth, getTopLeft} from '../src/ol/extent.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {get as getProjection} from '../src/ol/proj.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import WMTS from '../src/ol/source/WMTS.js'; import WMTSTileGrid from '../src/ol/tilegrid/WMTS.js'; - +import {get as getProjection} from '../src/ol/proj.js'; +import {getTopLeft, getWidth} from '../src/ol/extent.js'; // create the WMTS tile grid in the google projection const projection = getProjection('EPSG:3857'); @@ -21,7 +20,7 @@ for (let i = 0; i <= 14; i++) { const tileGrid = new WMTSTileGrid({ origin: getTopLeft(projection.getExtent()), resolutions: resolutions, - matrixIds: matrixIds + matrixIds: matrixIds, }); const scalgoToken = 'CC5BF28A7D96B320C7DFBFD1236B5BEB'; @@ -34,13 +33,13 @@ const wmtsSource = new WMTS({ attributions: [ 'SCALGO', 'CGIAR-CSI SRTM' + 'srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM', ], tileGrid: tileGrid, style: 'default', dimensions: { - 'threshold': 100 - } + 'threshold': 100, + }, }); const map = new Map({ @@ -48,26 +47,26 @@ const map = new Map({ view: new View({ projection: projection, center: [-9871995, 3566245], - zoom: 6 + zoom: 6, }), layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ opacity: 0.5, - source: wmtsSource - }) - ] + source: wmtsSource, + }), + ], }); -const updateSourceDimension = function(source, sliderVal) { +const updateSourceDimension = function (source, sliderVal) { source.updateDimensions({'threshold': sliderVal}); document.getElementById('theinfo').innerHTML = sliderVal + ' meters'; }; updateSourceDimension(wmtsSource, 10); -document.getElementById('slider').addEventListener('input', function() { +document.getElementById('slider').addEventListener('input', function () { updateSourceDimension(wmtsSource, this.value); }); diff --git a/examples/wmts-hidpi.js b/examples/wmts-hidpi.js index 99766071e0..535fd8d0c0 100644 --- a/examples/wmts-hidpi.js +++ b/examples/wmts-hidpi.js @@ -1,12 +1,12 @@ import Map from '../src/ol/Map.js'; +import TileLayer from '../src/ol/layer/Tile.js'; import View from '../src/ol/View.js'; +import WMTS, {optionsFromCapabilities} from '../src/ol/source/WMTS.js'; import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js'; import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import WMTS, {optionsFromCapabilities} from '../src/ol/source/WMTS.js'; - -const capabilitiesUrl = 'https://www.basemap.at/wmts/1.0.0/WMTSCapabilities.xml'; +const capabilitiesUrl = + 'https://www.basemap.at/wmts/1.0.0/WMTSCapabilities.xml'; // HiDPI support: // * Use 'bmaphidpi' layer (pixel ratio 2) for device pixel ratio > 1 @@ -19,21 +19,25 @@ const map = new Map({ target: 'map', view: new View({ center: [1823849, 6143760], - zoom: 11 - }) + zoom: 11, + }), }); -fetch(capabilitiesUrl).then(function(response) { - return response.text(); -}).then(function(text) { - const result = new WMTSCapabilities().read(text); - const options = optionsFromCapabilities(result, { - layer: layer, - matrixSet: 'google3857', - style: 'normal' +fetch(capabilitiesUrl) + .then(function (response) { + return response.text(); + }) + .then(function (text) { + const result = new WMTSCapabilities().read(text); + const options = optionsFromCapabilities(result, { + layer: layer, + matrixSet: 'google3857', + style: 'normal', + }); + options.tilePixelRatio = tilePixelRatio; + map.addLayer( + new TileLayer({ + source: new WMTS(options), + }) + ); }); - options.tilePixelRatio = tilePixelRatio; - map.addLayer(new TileLayer({ - source: new WMTS(options) - })); -}); diff --git a/examples/wmts-ign.js b/examples/wmts-ign.js index 1c3f415485..7082640b96 100644 --- a/examples/wmts-ign.js +++ b/examples/wmts-ign.js @@ -1,18 +1,17 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {getWidth} from '../src/ol/extent.js'; import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat, get as getProjection} from '../src/ol/proj.js'; +import View from '../src/ol/View.js'; import WMTS from '../src/ol/source/WMTS.js'; import WMTSTileGrid from '../src/ol/tilegrid/WMTS.js'; - +import {fromLonLat, get as getProjection} from '../src/ol/proj.js'; +import {getWidth} from '../src/ol/extent.js'; const map = new Map({ target: 'map', view: new View({ zoom: 5, - center: fromLonLat([5, 45]) - }) + center: fromLonLat([5, 45]), + }), }); const resolutions = []; @@ -28,7 +27,7 @@ for (let i = 0; i < 18; i++) { const tileGrid = new WMTSTileGrid({ origin: [-20037508, 20037508], resolutions: resolutions, - matrixIds: matrixIds + matrixIds: matrixIds, }); // For more information about the IGN API key see @@ -42,13 +41,14 @@ const ign_source = new WMTS({ projection: 'EPSG:3857', tileGrid: tileGrid, style: 'normal', - attributions: '' + - '' + attributions: + '' + + '', }); const ign = new TileLayer({ - source: ign_source + source: ign_source, }); map.addLayer(ign); diff --git a/examples/wmts-layer-from-capabilities.js b/examples/wmts-layer-from-capabilities.js index 4faa8953f9..5ffc86ba44 100644 --- a/examples/wmts-layer-from-capabilities.js +++ b/examples/wmts-layer-from-capabilities.js @@ -1,37 +1,39 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import WMTS, {optionsFromCapabilities} from '../src/ol/source/WMTS.js'; +import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js'; const parser = new WMTSCapabilities(); let map; -fetch('data/WMTSCapabilities.xml').then(function(response) { - return response.text(); -}).then(function(text) { - const result = parser.read(text); - const options = optionsFromCapabilities(result, { - layer: 'layer-7328', - matrixSet: 'EPSG:3857' - }); +fetch('data/WMTSCapabilities.xml') + .then(function (response) { + return response.text(); + }) + .then(function (text) { + const result = parser.read(text); + const options = optionsFromCapabilities(result, { + layer: 'layer-7328', + matrixSet: 'EPSG:3857', + }); - map = new Map({ - layers: [ - new TileLayer({ - source: new OSM(), - opacity: 0.7 + map = new Map({ + layers: [ + new TileLayer({ + source: new OSM(), + opacity: 0.7, + }), + new TileLayer({ + opacity: 1, + source: new WMTS(options), + }), + ], + target: 'map', + view: new View({ + center: [19412406.33, -5050500.21], + zoom: 5, }), - new TileLayer({ - opacity: 1, - source: new WMTS(options) - }) - ], - target: 'map', - view: new View({ - center: [19412406.33, -5050500.21], - zoom: 5 - }) + }); }); -}); diff --git a/examples/wmts.js b/examples/wmts.js index 597c3d423b..be6e0e4f86 100644 --- a/examples/wmts.js +++ b/examples/wmts.js @@ -1,12 +1,11 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {getWidth, getTopLeft} from '../src/ol/extent.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {get as getProjection} from '../src/ol/proj.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import WMTS from '../src/ol/source/WMTS.js'; import WMTSTileGrid from '../src/ol/tilegrid/WMTS.js'; - +import {get as getProjection} from '../src/ol/proj.js'; +import {getTopLeft, getWidth} from '../src/ol/extent.js'; const projection = getProjection('EPSG:3857'); const projectionExtent = projection.getExtent(); @@ -23,15 +22,17 @@ const map = new Map({ layers: [ new TileLayer({ source: new OSM(), - opacity: 0.7 + opacity: 0.7, }), new TileLayer({ opacity: 0.7, source: new WMTS({ - attributions: 'Tiles © ArcGIS', - url: 'https://services.arcgisonline.com/arcgis/rest/' + - 'services/Demographics/USA_Population_Density/MapServer/WMTS/', + attributions: + 'Tiles © ArcGIS', + url: + 'https://services.arcgisonline.com/arcgis/rest/' + + 'services/Demographics/USA_Population_Density/MapServer/WMTS/', layer: '0', matrixSet: 'EPSG:3857', format: 'image/png', @@ -39,16 +40,16 @@ const map = new Map({ tileGrid: new WMTSTileGrid({ origin: getTopLeft(projectionExtent), resolutions: resolutions, - matrixIds: matrixIds + matrixIds: matrixIds, }), style: 'default', - wrapX: true - }) - }) + wrapX: true, + }), + }), ], target: 'map', view: new View({ center: [-11158582, 4813697], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/worker.js b/examples/worker.js index 3a0d212570..736d346a51 100644 --- a/examples/worker.js +++ b/examples/worker.js @@ -1,35 +1,34 @@ /* eslint-disable no-console */ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import {create as createVersionWorker} from '../src/ol/worker/version.js'; - const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const worker = createVersionWorker(); -worker.addEventListener('error', function(error) { +worker.addEventListener('error', function (error) { console.error('worker error', error); }); -worker.addEventListener('message', function(event) { +worker.addEventListener('message', function (event) { console.log('message from worker:', event.data); }); -map.on('moveend', function(event) { +map.on('moveend', function (event) { const state = event.frameState.viewState; worker.postMessage({zoom: state.zoom, center: state.center}); }); diff --git a/examples/xyz-esri-4326-512.js b/examples/xyz-esri-4326-512.js index 407e2e3e6e..67ea904866 100644 --- a/examples/xyz-esri-4326-512.js +++ b/examples/xyz-esri-4326-512.js @@ -1,6 +1,6 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; const map = new Map({ @@ -9,20 +9,21 @@ const map = new Map({ new TileLayer({ source: new XYZ({ attributions: 'Copyright:© 2013 ESRI, i-cubed, GeoEye', - url: 'https://services.arcgisonline.com/arcgis/rest/services/' + - 'ESRI_Imagery_World_2D/MapServer/tile/{z}/{y}/{x}', + url: + 'https://services.arcgisonline.com/arcgis/rest/services/' + + 'ESRI_Imagery_World_2D/MapServer/tile/{z}/{y}/{x}', maxZoom: 15, projection: 'EPSG:4326', tileSize: 512, // the tile size supported by the ArcGIS tile service maxResolution: 180 / 512, // Esri's tile grid fits 180 degrees on one 512 px tile - wrapX: true - }) - }) + wrapX: true, + }), + }), ], view: new View({ center: [0, 0], projection: 'EPSG:4326', zoom: 2, - minZoom: 2 - }) + minZoom: 2, + }), }); diff --git a/examples/xyz-esri.js b/examples/xyz-esri.js index 3e2ed8989d..2f6bbae7c0 100644 --- a/examples/xyz-esri.js +++ b/examples/xyz-esri.js @@ -1,24 +1,25 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat} from '../src/ol/proj.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; - +import {fromLonLat} from '../src/ol/proj.js'; const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new XYZ({ - attributions: 'Tiles © ArcGIS', - url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' + - 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}' - }) - }) + attributions: + 'Tiles © ArcGIS', + url: + 'https://server.arcgisonline.com/ArcGIS/rest/services/' + + 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}', + }), + }), ], view: new View({ center: fromLonLat([-121.1, 47.5]), - zoom: 7 - }) + zoom: 7, + }), }); diff --git a/examples/xyz-retina.js b/examples/xyz-retina.js index da93d9b099..05a2196f0b 100644 --- a/examples/xyz-retina.js +++ b/examples/xyz-retina.js @@ -1,9 +1,9 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {transform, transformExtent} from '../src/ol/proj.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; +import {transform, transformExtent} from '../src/ol/proj.js'; const mapMinZoom = 1; const mapMaxZoom = 15; @@ -13,24 +13,24 @@ const map = new Map({ target: 'map', layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'), source: new XYZ({ - attributions: 'Tiles © USGS, rendered with ' + - 'MapTiler', + attributions: + 'Tiles © USGS, rendered with ' + + 'MapTiler', url: 'https://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png', tilePixelRatio: 2, // THIS IS IMPORTANT minZoom: mapMinZoom, - maxZoom: mapMaxZoom - }) - }) + maxZoom: mapMaxZoom, + }), + }), ], view: new View({ projection: 'EPSG:3857', - center: transform([-112.18688965, 36.057944835], - 'EPSG:4326', 'EPSG:3857'), - zoom: 12 - }) + center: transform([-112.18688965, 36.057944835], 'EPSG:4326', 'EPSG:3857'), + zoom: 12, + }), }); diff --git a/examples/xyz.js b/examples/xyz.js index d687f69685..89f2d02271 100644 --- a/examples/xyz.js +++ b/examples/xyz.js @@ -1,21 +1,21 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; - const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new XYZ({ - url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + - '?apikey=0e6fc415256d4fbb9b5166a718591d71' - }) - }) + url: + 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + + '?apikey=0e6fc415256d4fbb9b5166a718591d71', + }), + }), ], view: new View({ center: [-472202, 7530279], - zoom: 12 - }) + zoom: 12, + }), }); diff --git a/examples/zoom-constrained.js b/examples/zoom-constrained.js index dab35e096e..d0e1f08743 100644 --- a/examples/zoom-constrained.js +++ b/examples/zoom-constrained.js @@ -1,11 +1,11 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; - const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const map = new Map({ @@ -14,14 +14,15 @@ const map = new Map({ new TileLayer({ source: new XYZ({ attributions: attributions, - url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key - }) - }) + url: + 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + }), + }), ], view: new View({ center: [-13553864, 5918250], zoom: 11, minZoom: 9, - maxZoom: 13 - }) + maxZoom: 13, + }), }); diff --git a/examples/zoomify.js b/examples/zoomify.js index 47a32ae0db..74011f2cb1 100644 --- a/examples/zoomify.js +++ b/examples/zoomify.js @@ -1,6 +1,6 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import Zoomify from '../src/ol/source/Zoomify.js'; const imgWidth = 4000; @@ -12,7 +12,7 @@ const source = new Zoomify({ url: zoomifyUrl, size: [imgWidth, imgHeight], crossOrigin: 'anonymous', - zDirection: -1 // Ensure we get a tile with the screen resolution or higher + zDirection: -1, // Ensure we get a tile with the screen resolution or higher }); const extent = source.getTileGrid().getExtent(); @@ -23,11 +23,11 @@ const retinaSource = new Zoomify({ crossOrigin: 'anonymous', zDirection: -1, // Ensure we get a tile with the screen resolution or higher tilePixelRatio: retinaPixelRatio, // Display retina tiles - tileSize: 256 / retinaPixelRatio // from a higher zoom level + tileSize: 256 / retinaPixelRatio, // from a higher zoom level }); const layer = new TileLayer({ - source: source + source: source, }); const map = new Map({ @@ -38,13 +38,13 @@ const map = new Map({ resolutions: layer.getSource().getTileGrid().getResolutions(), // constrain the center: center cannot be set outside this extent extent: extent, - constrainOnlyCenter: true - }) + constrainOnlyCenter: true, + }), }); map.getView().fit(extent); const control = document.getElementById('zoomifyProtocol'); -control.addEventListener('change', function(event) { +control.addEventListener('change', function (event) { const value = event.currentTarget.value; if (value === 'zoomify') { layer.setSource(source); @@ -52,5 +52,3 @@ control.addEventListener('change', function(event) { layer.setSource(retinaSource); } }); - - diff --git a/examples/zoomslider.js b/examples/zoomslider.js index 1e8f3b0ba9..5bc313e4bf 100644 --- a/examples/zoomslider.js +++ b/examples/zoomslider.js @@ -1,9 +1,8 @@ import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; import View from '../src/ol/View.js'; import {ZoomSlider} from '../src/ol/control.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import OSM from '../src/ol/source/OSM.js'; - /** * Helper method for map-creation. @@ -14,15 +13,15 @@ import OSM from '../src/ol/source/OSM.js'; function createMap(divId) { const source = new OSM(); const layer = new TileLayer({ - source: source + source: source, }); const map = new Map({ layers: [layer], target: divId, view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const zoomslider = new ZoomSlider(); map.addControl(zoomslider); diff --git a/package-lock.json b/package-lock.json index ac66522a85..e563f43b51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,12 +5,12 @@ "requires": true, "dependencies": { "@babel/code-frame": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", - "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz", + "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==", "dev": true, "requires": { - "@babel/highlight": "^7.0.0" + "@babel/highlight": "^7.8.3" } }, "@babel/compat-data": { @@ -877,13 +877,13 @@ } }, "@babel/highlight": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz", - "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==", + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz", + "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==", "dev": true, "requires": { + "@babel/helper-validator-identifier": "^7.9.0", "chalk": "^2.0.0", - "esutils": "^2.0.2", "js-tokens": "^4.0.0" } }, @@ -2103,12 +2103,20 @@ "dev": true }, "ansi-escapes": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.0.tgz", - "integrity": "sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz", + "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==", "dev": true, "requires": { - "type-fest": "^0.8.1" + "type-fest": "^0.11.0" + }, + "dependencies": { + "type-fest": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz", + "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==", + "dev": true + } } }, "ansi-html": { @@ -2202,13 +2210,14 @@ "dev": true }, "array-includes": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.0.3.tgz", - "integrity": "sha1-GEtI9i2S10UrsxsyMWXH+L0CJm0=", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.1.tgz", + "integrity": "sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==", "dev": true, "requires": { - "define-properties": "^1.1.2", - "es-abstract": "^1.7.0" + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0", + "is-string": "^1.0.5" } }, "array-union": { @@ -2232,6 +2241,16 @@ "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", "dev": true }, + "array.prototype.flat": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz", + "integrity": "sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1" + } + }, "arraybuffer.slice": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz", @@ -2749,6 +2768,16 @@ "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==", "dev": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "blob": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz", @@ -3024,6 +3053,12 @@ "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==", "dev": true }, + "buffer-crc32": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", + "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=", + "dev": true + }, "buffer-fill": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz", @@ -4288,17 +4323,84 @@ } }, "es-abstract": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.13.0.tgz", - "integrity": "sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==", + "version": "1.17.5", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz", + "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==", "dev": true, "requires": { - "es-to-primitive": "^1.2.0", + "es-to-primitive": "^1.2.1", "function-bind": "^1.1.1", "has": "^1.0.3", - "is-callable": "^1.1.4", - "is-regex": "^1.0.4", - "object-keys": "^1.0.12" + "has-symbols": "^1.0.1", + "is-callable": "^1.1.5", + "is-regex": "^1.0.5", + "object-inspect": "^1.7.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.0", + "string.prototype.trimleft": "^2.1.1", + "string.prototype.trimright": "^2.1.1" + }, + "dependencies": { + "es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "requires": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + } + }, + "has-symbols": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", + "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", + "dev": true + }, + "is-callable": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz", + "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==", + "dev": true + }, + "is-regex": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", + "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==", + "dev": true, + "requires": { + "has": "^1.0.3" + } + }, + "object-inspect": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz", + "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==", + "dev": true + }, + "string.prototype.trimleft": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz", + "integrity": "sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.5", + "string.prototype.trimstart": "^1.0.0" + } + }, + "string.prototype.trimright": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz", + "integrity": "sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.5", + "string.prototype.trimend": "^1.0.0" + } + } } }, "es-to-primitive": { @@ -4429,18 +4531,18 @@ } }, "glob-parent": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz", - "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", + "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", "dev": true, "requires": { "is-glob": "^4.0.1" } }, "globals": { - "version": "12.3.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-12.3.0.tgz", - "integrity": "sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==", + "version": "12.4.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz", + "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==", "dev": true, "requires": { "type-fest": "^0.8.1" @@ -4482,30 +4584,43 @@ } }, "strip-json-comments": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz", - "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz", + "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==", "dev": true } } }, "eslint-config-openlayers": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/eslint-config-openlayers/-/eslint-config-openlayers-13.0.0.tgz", - "integrity": "sha512-FlhPbUhrgh9nyIrcf6jX8cZHLOxl2Z4rmLnMrhwBhE+KQK2n3hywXpkNvUROWV9TQpxavzaA7punYHL4ggUpig==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/eslint-config-openlayers/-/eslint-config-openlayers-14.0.0.tgz", + "integrity": "sha512-/+dcW3RW5oVWSLNvAPlsx+sfDfyPMTvQV3oCmZjKcoa8PIzzby3J/gjAHdFiQsMzxPULcr/Q/GQKxSm0GxYroA==", "dev": true, "requires": { - "eslint-plugin-import": "^2.18.2" + "eslint-config-prettier": "^6.10.1", + "eslint-plugin-import": "^2.20.2", + "eslint-plugin-prettier": "^3.1.2", + "eslint-plugin-sort-imports-es6-autofix": "^0.5.0", + "prettier": "^2.0.2" + } + }, + "eslint-config-prettier": { + "version": "6.10.1", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.10.1.tgz", + "integrity": "sha512-svTy6zh1ecQojvpbJSgH3aei/Rt7C6i090l5f2WQ4aB05lYHeZIR1qL4wZyyILTbtmnbHP5Yn8MrsOJMGa8RkQ==", + "dev": true, + "requires": { + "get-stdin": "^6.0.0" } }, "eslint-import-resolver-node": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz", - "integrity": "sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==", + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.3.tgz", + "integrity": "sha512-b8crLDo0M5RSe5YG8Pu2DYBj71tSB6OvXkfzwbJU2w7y8P4/yo0MyF8jU26IEuEuHF2K5/gcAJE3LhQGqBBbVg==", "dev": true, "requires": { "debug": "^2.6.9", - "resolve": "^1.5.0" + "resolve": "^1.13.1" }, "dependencies": { "debug": { @@ -4522,16 +4637,25 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true + }, + "resolve": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz", + "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } } } }, "eslint-module-utils": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.4.1.tgz", - "integrity": "sha512-H6DOj+ejw7Tesdgbfs4jeS4YMFrT8uI8xwd1gtQqXssaR0EQ26L+2O/w6wkYFy2MymON0fTwHmXBvvfLNZVZEw==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz", + "integrity": "sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==", "dev": true, "requires": { - "debug": "^2.6.8", + "debug": "^2.6.9", "pkg-dir": "^2.0.0" }, "dependencies": { @@ -4605,22 +4729,23 @@ } }, "eslint-plugin-import": { - "version": "2.18.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz", - "integrity": "sha512-5ohpsHAiUBRNaBWAF08izwUGlbrJoJJ+W9/TBwsGoR1MnlgfwMIKrFeSjWbt6moabiXW9xNvtFz+97KHRfI4HQ==", + "version": "2.20.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.2.tgz", + "integrity": "sha512-FObidqpXrR8OnCh4iNsxy+WACztJLXAHBO5hK79T1Hc77PgQZkyDGA5Ag9xAvRpglvLNxhH/zSmZ70/pZ31dHg==", "dev": true, "requires": { "array-includes": "^3.0.3", + "array.prototype.flat": "^1.2.1", "contains-path": "^0.1.0", "debug": "^2.6.9", "doctrine": "1.5.0", "eslint-import-resolver-node": "^0.3.2", - "eslint-module-utils": "^2.4.0", + "eslint-module-utils": "^2.4.1", "has": "^1.0.3", "minimatch": "^3.0.4", "object.values": "^1.1.0", "read-pkg-up": "^2.0.0", - "resolve": "^1.11.0" + "resolve": "^1.12.0" }, "dependencies": { "debug": { @@ -4649,9 +4774,9 @@ "dev": true }, "resolve": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz", - "integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==", + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz", + "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==", "dev": true, "requires": { "path-parse": "^1.0.6" @@ -4659,6 +4784,24 @@ } } }, + "eslint-plugin-prettier": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.2.tgz", + "integrity": "sha512-GlolCC9y3XZfv3RQfwGew7NnuFDKsfI4lbvRK+PIIo23SFH+LemGs4cKwzAaRa+Mdb+lQO/STaIayno8T5sJJA==", + "dev": true, + "requires": { + "prettier-linter-helpers": "^1.0.0" + } + }, + "eslint-plugin-sort-imports-es6-autofix": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-sort-imports-es6-autofix/-/eslint-plugin-sort-imports-es6-autofix-0.5.0.tgz", + "integrity": "sha512-KEX2Uz6bAs67jDYiH/OT1xz1E7AzIJJOIRg1F7OnFAfUVlpws3ldSZj5oZySRHfoVkWqDX9GGExYxckdLrWhwg==", + "dev": true, + "requires": { + "eslint": "^6.2.2" + } + }, "eslint-scope": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz", @@ -4685,13 +4828,13 @@ "dev": true }, "espree": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/espree/-/espree-6.1.2.tgz", - "integrity": "sha512-2iUPuuPP+yW1PZaMSDM9eyVf8D5P0Hi8h83YtZ5bPc/zHYjII5khoixIUTMO794NOY8F/ThF1Bo8ncZILarUTA==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz", + "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==", "dev": true, "requires": { - "acorn": "^7.1.0", - "acorn-jsx": "^5.1.0", + "acorn": "^7.1.1", + "acorn-jsx": "^5.2.0", "eslint-visitor-keys": "^1.1.0" }, "dependencies": { @@ -4700,12 +4843,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz", "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==", "dev": true - }, - "acorn-jsx": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.1.0.tgz", - "integrity": "sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw==", - "dev": true } } }, @@ -4716,12 +4853,20 @@ "dev": true }, "esquery": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.1.tgz", - "integrity": "sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.2.0.tgz", + "integrity": "sha512-weltsSqdeWIX9G2qQZz7KlTRJdkkOCTPgLYJUz1Hacf48R4YOwGPHO3+ORfWedqJKbq5WQmsgK90n+pFLIKt/Q==", "dev": true, "requires": { - "estraverse": "^4.0.0" + "estraverse": "^5.0.0" + }, + "dependencies": { + "estraverse": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.0.0.tgz", + "integrity": "sha512-j3acdrMzqrxmJTNj5dbr1YbjacrYgAxVMeF0gK16E3j494mOe7xygM/ZLIguEQ0ETwAg2hlJCtHRGav+y0Ny5A==", + "dev": true + } } }, "esrecurse": { @@ -5057,15 +5202,15 @@ } }, "extract-zip": { - "version": "1.6.7", - "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz", - "integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.7.0.tgz", + "integrity": "sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==", "dev": true, "requires": { - "concat-stream": "1.6.2", - "debug": "2.6.9", - "mkdirp": "0.5.1", - "yauzl": "2.4.1" + "concat-stream": "^1.6.2", + "debug": "^2.6.9", + "mkdirp": "^0.5.4", + "yauzl": "^2.10.0" }, "dependencies": { "debug": { @@ -5097,6 +5242,12 @@ "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", "dev": true }, + "fast-diff": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", + "dev": true + }, "fast-glob": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz", @@ -5195,9 +5346,9 @@ } }, "fd-slicer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz", - "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", + "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=", "dev": true, "requires": { "pend": "~1.2.0" @@ -5210,9 +5361,9 @@ "dev": true }, "figures": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-3.1.0.tgz", - "integrity": "sha512-ravh8VRXqHuMvZt/d8GblBeqDMkdJMBdv/2KntFH+ra5MXkO7nxNKpzQ3n6QD/2da1kH0aWmNISdvhM7gl2gVg==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", + "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==", "dev": true, "requires": { "escape-string-regexp": "^1.0.5" @@ -5227,6 +5378,13 @@ "flat-cache": "^2.0.1" } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "fileset": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz", @@ -5521,41 +5679,38 @@ "dev": true }, "fsevents": { - "version": "1.2.9", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz", - "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==", + "version": "1.2.12", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.12.tgz", + "integrity": "sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==", "dev": true, "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1", - "node-pre-gyp": "^0.12.0" + "node-pre-gyp": "*" }, "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", - "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", + "bundled": true, "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "bundled": true, "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", - "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", + "bundled": true, "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", - "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5565,15 +5720,13 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "bundled": true, "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5582,44 +5735,38 @@ } }, "chownr": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz", - "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", + "version": "1.1.4", + "bundled": true, "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "bundled": true, "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "bundled": true, "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "bundled": true, "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", + "bundled": true, "dev": true, "optional": true }, "debug": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", - "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "version": "3.2.6", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5628,46 +5775,40 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", - "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", + "bundled": true, "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", - "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", + "bundled": true, "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", - "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", + "bundled": true, "dev": true, "optional": true }, "fs-minipass": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz", - "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", + "version": "1.2.7", + "bundled": true, "dev": true, "optional": true, "requires": { - "minipass": "^2.2.1" + "minipass": "^2.6.0" } }, "fs.realpath": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", + "bundled": true, "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", - "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5682,9 +5823,8 @@ } }, "glob": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz", - "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", + "version": "7.1.6", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5698,15 +5838,13 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", - "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", + "bundled": true, "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5714,9 +5852,8 @@ } }, "ignore-walk": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz", - "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", + "version": "3.0.3", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5725,8 +5862,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5735,23 +5871,20 @@ } }, "inherits": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "version": "2.0.4", + "bundled": true, "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "bundled": true, "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", - "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5760,15 +5893,13 @@ }, "isarray": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "bundled": true, "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5776,16 +5907,14 @@ } }, "minimist": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "version": "1.2.5", + "bundled": true, "dev": true, "optional": true }, "minipass": { - "version": "2.3.5", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", - "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", + "version": "2.9.0", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5794,48 +5923,43 @@ } }, "minizlib": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz", - "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==", + "version": "1.3.3", + "bundled": true, "dev": true, "optional": true, "requires": { - "minipass": "^2.2.1" + "minipass": "^2.9.0" } }, "mkdirp": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", - "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "version": "0.5.3", + "bundled": true, "dev": true, "optional": true, "requires": { - "minimist": "0.0.8" + "minimist": "^1.2.5" } }, "ms": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", - "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", + "version": "2.1.2", + "bundled": true, "dev": true, "optional": true }, "needle": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz", - "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==", + "version": "2.3.3", + "bundled": true, "dev": true, "optional": true, "requires": { - "debug": "^4.1.0", + "debug": "^3.2.6", "iconv-lite": "^0.4.4", "sax": "^1.2.4" } }, "node-pre-gyp": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz", - "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", + "version": "0.14.0", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5848,13 +5972,12 @@ "rc": "^1.2.7", "rimraf": "^2.6.1", "semver": "^5.3.0", - "tar": "^4" + "tar": "^4.4.2" } }, "nopt": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", - "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", + "version": "4.0.3", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5863,27 +5986,34 @@ } }, "npm-bundled": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz", - "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==", + "version": "1.1.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "npm-normalize-package-bin": "^1.0.1" + } + }, + "npm-normalize-package-bin": { + "version": "1.0.1", + "bundled": true, "dev": true, "optional": true }, "npm-packlist": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz", - "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==", + "version": "1.4.8", + "bundled": true, "dev": true, "optional": true, "requires": { "ignore-walk": "^3.0.1", - "npm-bundled": "^1.0.1" + "npm-bundled": "^1.0.1", + "npm-normalize-package-bin": "^1.0.1" } }, "npmlog": { "version": "4.1.2", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", - "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5895,22 +6025,19 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "bundled": true, "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "bundled": true, "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5919,22 +6046,19 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", - "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", + "bundled": true, "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", - "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", + "bundled": true, "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", - "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5944,22 +6068,19 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", + "bundled": true, "dev": true, "optional": true }, "process-nextick-args": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", - "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "version": "2.0.1", + "bundled": true, "dev": true, "optional": true }, "rc": { "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", - "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5967,21 +6088,11 @@ "ini": "~1.3.0", "minimist": "^1.2.0", "strip-json-comments": "~2.0.1" - }, - "dependencies": { - "minimist": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", - "dev": true, - "optional": true - } } }, "readable-stream": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "version": "2.3.7", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -5995,9 +6106,8 @@ } }, "rimraf": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", - "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", + "version": "2.7.1", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -6006,50 +6116,43 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "bundled": true, "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "bundled": true, "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", - "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", + "bundled": true, "dev": true, "optional": true }, "semver": { - "version": "5.7.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", - "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", + "version": "5.7.1", + "bundled": true, "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", + "bundled": true, "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", - "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", + "bundled": true, "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -6060,8 +6163,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -6070,8 +6172,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -6080,38 +6181,34 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", + "bundled": true, "dev": true, "optional": true }, "tar": { - "version": "4.4.8", - "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz", - "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==", + "version": "4.4.13", + "bundled": true, "dev": true, "optional": true, "requires": { "chownr": "^1.1.1", "fs-minipass": "^1.2.5", - "minipass": "^2.3.4", - "minizlib": "^1.1.1", + "minipass": "^2.8.6", + "minizlib": "^1.2.1", "mkdirp": "^0.5.0", "safe-buffer": "^5.1.2", - "yallist": "^3.0.2" + "yallist": "^3.0.3" } }, "util-deprecate": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", + "bundled": true, "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", - "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", + "bundled": true, "dev": true, "optional": true, "requires": { @@ -6120,15 +6217,13 @@ }, "wrappy": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "bundled": true, "dev": true, "optional": true }, "yallist": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", + "version": "3.1.1", + "bundled": true, "dev": true, "optional": true } @@ -6158,6 +6253,12 @@ "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", "dev": true }, + "get-stdin": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", + "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", + "dev": true + }, "get-stream": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", @@ -6494,9 +6595,9 @@ } }, "hosted-git-info": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", - "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==", + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==", "dev": true }, "hpack.js": { @@ -6685,23 +6786,23 @@ "dev": true }, "inquirer": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.1.tgz", - "integrity": "sha512-V1FFQ3TIO15det8PijPLFR9M9baSlnRs9nL7zWu1MNVA2T9YVl9ZbrHJhYs7e9X8jeMZ3lr2JH/rdHFgNCBdYw==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz", + "integrity": "sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==", "dev": true, "requires": { "ansi-escapes": "^4.2.1", - "chalk": "^2.4.2", + "chalk": "^3.0.0", "cli-cursor": "^3.1.0", "cli-width": "^2.0.0", "external-editor": "^3.0.3", "figures": "^3.0.0", "lodash": "^4.17.15", "mute-stream": "0.0.8", - "run-async": "^2.2.0", + "run-async": "^2.4.0", "rxjs": "^6.5.3", "string-width": "^4.1.0", - "strip-ansi": "^5.1.0", + "strip-ansi": "^6.0.0", "through": "^2.3.6" }, "dependencies": { @@ -6711,12 +6812,53 @@ "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", "dev": true }, + "ansi-styles": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "dev": true, + "requires": { + "@types/color-name": "^1.1.1", + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", "dev": true }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, "is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -6732,34 +6874,24 @@ "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.0" - }, - "dependencies": { - "strip-ansi": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", - "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", - "dev": true, - "requires": { - "ansi-regex": "^5.0.0" - } - } } }, "strip-ansi": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", - "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", + "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", "dev": true, "requires": { - "ansi-regex": "^4.1.0" - }, - "dependencies": { - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "dev": true - } + "ansi-regex": "^5.0.0" + } + }, + "supports-color": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", + "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" } } } @@ -7042,6 +7174,12 @@ "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", "dev": true }, + "is-string": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz", + "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==", + "dev": true + }, "is-symbol": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz", @@ -8315,20 +8453,12 @@ } }, "mkdirp": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", - "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", "dev": true, "requires": { - "minimist": "0.0.8" - }, - "dependencies": { - "minimist": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true - } + "minimist": "^1.2.5" } }, "mocha": { @@ -8636,9 +8766,9 @@ "dev": true }, "nan": { - "version": "2.13.2", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz", - "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==", + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz", + "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==", "dev": true, "optional": true }, @@ -8999,13 +9129,13 @@ } }, "object.values": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.0.tgz", - "integrity": "sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.1.tgz", + "integrity": "sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==", "dev": true, "requires": { "define-properties": "^1.1.3", - "es-abstract": "^1.12.0", + "es-abstract": "^1.17.0-next.1", "function-bind": "^1.1.1", "has": "^1.0.3" } @@ -9499,6 +9629,21 @@ "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", "dev": true }, + "prettier": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.4.tgz", + "integrity": "sha512-SVJIQ51spzFDvh4fIbCLvciiDMCrRhlN3mbZvv/+ycjvmF5E73bKdGfU8QDLNmjYJf+lsGnDBC4UUnvTe5OO0w==", + "dev": true + }, + "prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "requires": { + "fast-diff": "^1.1.2" + } + }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -10308,9 +10453,9 @@ } }, "run-async": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz", - "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz", + "integrity": "sha512-xJTbh/d7Lm7SBhc1tNvTpeCHaEzoyxPrqNlvSdMfBTYwaY++UJFyXUOxAtsRUXjlqOfj8luNaR9vjCh4KeV+pg==", "dev": true, "requires": { "is-promise": "^2.1.0" @@ -10338,9 +10483,9 @@ "dev": true }, "rxjs": { - "version": "6.5.3", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.3.tgz", - "integrity": "sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==", + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz", + "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==", "dev": true, "requires": { "tslib": "^1.9.0" @@ -11119,9 +11264,9 @@ } }, "spdx-license-ids": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.4.tgz", - "integrity": "sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz", + "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==", "dev": true }, "spdy": { @@ -11358,6 +11503,16 @@ } } }, + "string.prototype.trimend": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.0.tgz", + "integrity": "sha512-EEJnGqa/xNfIg05SxiPSqRS7S9qwDhYts1TSLR1BQfYUfPe1stofgGKvwERK9+9yf+PpfBMlpBaCHucXGPQfUA==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.5" + } + }, "string.prototype.trimleft": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz", @@ -11378,6 +11533,16 @@ "function-bind": "^1.1.1" } }, + "string.prototype.trimstart": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.0.tgz", + "integrity": "sha512-iCP8g01NFYiiBOnwG1Xc3WZLyoo+RuBymwIlWncShXDDJYWN6DbnM3odslBJdgCdRlq94B5s63NWAZlcn2CS4w==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.5" + } + }, "string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -11436,12 +11601,12 @@ }, "dependencies": { "ajv": { - "version": "6.10.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz", - "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==", + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz", + "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==", "dev": true, "requires": { - "fast-deep-equal": "^2.0.1", + "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" @@ -11453,6 +11618,12 @@ "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", "dev": true }, + "fast-deep-equal": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz", + "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==", + "dev": true + }, "string-width": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", @@ -13099,12 +13270,13 @@ } }, "yauzl": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz", - "integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=", + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", + "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=", "dev": true, "requires": { - "fd-slicer": "~1.0.1" + "buffer-crc32": "~0.2.3", + "fd-slicer": "~1.1.0" } }, "yeast": { diff --git a/package.json b/package.json index f3ae5a60d7..94075c7973 100644 --- a/package.json +++ b/package.json @@ -61,8 +61,8 @@ "clean-css-cli": "4.3.0", "copy-webpack-plugin": "^5.0.4", "coveralls": "3.0.11", - "eslint": "^6.0.0", - "eslint-config-openlayers": "^13.0.0", + "eslint": "^6.8.0", + "eslint-config-openlayers": "^14.0.0", "expect.js": "0.3.1", "front-matter": "^3.0.2", "fs-extra": "^9.0.0", diff --git a/rendering/cases/circle-style/main.js b/rendering/cases/circle-style/main.js index d4f743a627..7f9ac70aa7 100644 --- a/rendering/cases/circle-style/main.js +++ b/rendering/cases/circle-style/main.js @@ -1,29 +1,28 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; +import Circle from '../../../src/ol/style/Circle.js'; import Feature from '../../../src/ol/Feature.js'; +import Map from '../../../src/ol/Map.js'; import Point from '../../../src/ol/geom/Point.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Circle from '../../../src/ol/style/Circle.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; - +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); vectorSource.addFeatures([ new Feature({ geometry: new Point([-50, 50]), - radius: 10 + radius: 10, }), new Feature({ geometry: new Point([50, -50]), - radius: 20 + radius: 20, }), new Feature({ geometry: new Point([50, 50]), - radius: 30 - }) + radius: 30, + }), ]); const style = new Style({ @@ -31,9 +30,9 @@ const style = new Style({ radius: 1, stroke: new Stroke({ color: '#00f', - width: 3 - }) - }) + width: 3, + }), + }), }); new Map({ @@ -41,17 +40,17 @@ new Map({ layers: [ new VectorLayer({ source: vectorSource, - style: function(feature) { + style: function (feature) { style.getImage().setRadius(feature.get('radius')); return style; - } - }) + }, + }), ], target: 'map', view: new View({ center: [0, 0], - resolution: 1 - }) + resolution: 1, + }), }); render(); diff --git a/rendering/cases/geometry-geographic/main.js b/rendering/cases/geometry-geographic/main.js index 3c1cd68523..bb6418d329 100644 --- a/rendering/cases/geometry-geographic/main.js +++ b/rendering/cases/geometry-geographic/main.js @@ -1,9 +1,12 @@ -import {Map, View, Feature} from '../../../src/ol/index.js'; +import {Circle, Fill, Style} from '../../../src/ol/style.js'; +import {Feature, Map, View} from '../../../src/ol/index.js'; import {Point} from '../../../src/ol/geom.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../../../src/ol/layer.js'; +import { + Tile as TileLayer, + Vector as VectorLayer, +} from '../../../src/ol/layer.js'; +import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; import {useGeographic} from '../../../src/ol/proj.js'; -import {XYZ, Vector as VectorSource} from '../../../src/ol/source.js'; -import {Style, Circle, Fill} from '../../../src/ol/style.js'; useGeographic(); @@ -16,28 +19,26 @@ new Map({ new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - transition: 0 - }) + transition: 0, + }), }), new VectorLayer({ source: new VectorSource({ - features: [ - new Feature(point) - ] + features: [new Feature(point)], }), style: new Style({ image: new Circle({ radius: 5, - fill: new Fill({color: 'red'}) - }) - }) - }) + fill: new Fill({color: 'red'}), + }), + }), + }), ], target: 'map', view: new View({ center: center, - zoom: 3 - }) + zoom: 3, + }), }); render(); diff --git a/rendering/cases/heatmap-layer/main.js b/rendering/cases/heatmap-layer/main.js index 151744432c..4f74275760 100644 --- a/rendering/cases/heatmap-layer/main.js +++ b/rendering/cases/heatmap-layer/main.js @@ -1,23 +1,23 @@ +import KML from '../../../src/ol/format/KML.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; +import VectorSource from '../../../src/ol/source/Vector.js'; +import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; import {Heatmap as HeatmapLayer} from '../../../src/ol/layer.js'; -import VectorSource from '../../../src/ol/source/Vector.js'; -import KML from '../../../src/ol/format/KML.js'; const vector = new HeatmapLayer({ source: new VectorSource({ url: '/data/2012_Earthquakes_Mag5.kml', format: new KML({ - extractStyles: false - }) + extractStyles: false, + }), }), blur: 3, - radius: 3 + radius: 3, }); -vector.getSource().on('addfeature', function(event) { +vector.getSource().on('addfeature', function (event) { const name = event.feature.get('name'); const magnitude = parseFloat(name.substr(2)); event.feature.set('weight', magnitude - 5); @@ -26,8 +26,8 @@ vector.getSource().on('addfeature', function(event) { const raster = new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - transition: 0 - }) + transition: 0, + }), }); new Map({ @@ -35,10 +35,10 @@ new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 0 - }) + zoom: 0, + }), }); render({ - message: 'Heatmap layer renders properly using webgl' + message: 'Heatmap layer renders properly using webgl', }); diff --git a/rendering/cases/icon-opacity/main.js b/rendering/cases/icon-opacity/main.js index e6f0ce4627..5ed35d0515 100644 --- a/rendering/cases/icon-opacity/main.js +++ b/rendering/cases/icon-opacity/main.js @@ -1,11 +1,14 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js'; -import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; -import Point from '../../../src/ol/geom/Point.js'; import Feature from '../../../src/ol/Feature.js'; +import Map from '../../../src/ol/Map.js'; +import Point from '../../../src/ol/geom/Point.js'; +import View from '../../../src/ol/View.js'; +import {Icon, Style} from '../../../src/ol/style.js'; +import { + Tile as TileLayer, + Vector as VectorLayer, +} from '../../../src/ol/layer.js'; +import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; import {fromLonLat} from '../../../src/ol/proj.js'; -import {Style, Icon} from '../../../src/ol/style.js'; const center = fromLonLat([8.6, 50.1]); @@ -13,35 +16,31 @@ new Map({ layers: [ new TileLayer({ source: new XYZ({ - url: '/data/tiles/satellite/{z}/{x}/{y}.jpg' - }) + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', + }), }), new VectorLayer({ - style: function() { + style: function () { return new Style({ image: new Icon({ opacity: 0.5, src: '/data/icon.png', anchor: [0.5, 46], anchorXUnits: 'fraction', - anchorYUnits: 'pixels' - }) + anchorYUnits: 'pixels', + }), }); }, source: new VectorSource({ - features: [ - new Feature( - new Point(center) - ) - ] - }) - }) + features: [new Feature(new Point(center))], + }), + }), ], target: 'map', view: new View({ center: center, - zoom: 3 - }) + zoom: 3, + }), }); render(); diff --git a/rendering/cases/icon-symbol-svg/main.js b/rendering/cases/icon-symbol-svg/main.js index 312fa67f8c..355f72a499 100644 --- a/rendering/cases/icon-symbol-svg/main.js +++ b/rendering/cases/icon-symbol-svg/main.js @@ -1,11 +1,14 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js'; -import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; -import Point from '../../../src/ol/geom/Point.js'; import Feature from '../../../src/ol/Feature.js'; +import Map from '../../../src/ol/Map.js'; +import Point from '../../../src/ol/geom/Point.js'; +import View from '../../../src/ol/View.js'; +import {Icon, Style} from '../../../src/ol/style.js'; +import { + Tile as TileLayer, + Vector as VectorLayer, +} from '../../../src/ol/layer.js'; +import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; import {fromLonLat} from '../../../src/ol/proj.js'; -import {Style, Icon} from '../../../src/ol/style.js'; const center = fromLonLat([8, 50]); @@ -14,59 +17,65 @@ let feature; // scales svg correctly feature = new Feature({ - geometry: new Point(fromLonLat([3, 45])) + geometry: new Point(fromLonLat([3, 45])), }); -feature.setStyle(new Style({ - image: new Icon({ - src: '/data/me0.svg', - scale: 2 +feature.setStyle( + new Style({ + image: new Icon({ + src: '/data/me0.svg', + scale: 2, + }), }) -})); +); vectorSource.addFeature(feature); // uses offset correctly feature = new Feature({ - geometry: new Point(fromLonLat([3, 55])) + geometry: new Point(fromLonLat([3, 55])), }); -feature.setStyle(new Style({ - image: new Icon({ - src: '/data/me0.svg', - offset: [16, 0], - scale: 2 +feature.setStyle( + new Style({ + image: new Icon({ + src: '/data/me0.svg', + offset: [16, 0], + scale: 2, + }), }) -})); +); vectorSource.addFeature(feature); // uses offset correctly if it is larger than size feature = new Feature({ - geometry: new Point(fromLonLat([8, 55])) + geometry: new Point(fromLonLat([8, 55])), }); -feature.setStyle(new Style({ - image: new Icon({ - src: '/data/me0.svg', - offsetOrigin: 'bottom-left', - offset: [16, 0], - size: [64, 40] +feature.setStyle( + new Style({ + image: new Icon({ + src: '/data/me0.svg', + offsetOrigin: 'bottom-left', + offset: [16, 0], + size: [64, 40], + }), }) -})); +); vectorSource.addFeature(feature); new Map({ layers: [ new TileLayer({ source: new XYZ({ - url: '/data/tiles/satellite/{z}/{x}/{y}.jpg' - }) + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', + }), }), new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: center, - zoom: 3 - }) + zoom: 3, + }), }); render(); diff --git a/rendering/cases/icon-symbol/main.js b/rendering/cases/icon-symbol/main.js index 53fd2a59c2..0dcaf38dca 100644 --- a/rendering/cases/icon-symbol/main.js +++ b/rendering/cases/icon-symbol/main.js @@ -1,11 +1,14 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js'; -import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; -import Point from '../../../src/ol/geom/Point.js'; import Feature from '../../../src/ol/Feature.js'; +import Map from '../../../src/ol/Map.js'; +import Point from '../../../src/ol/geom/Point.js'; +import View from '../../../src/ol/View.js'; +import {Icon, Style} from '../../../src/ol/style.js'; +import { + Tile as TileLayer, + Vector as VectorLayer, +} from '../../../src/ol/layer.js'; +import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; import {fromLonLat} from '../../../src/ol/proj.js'; -import {Style, Icon} from '../../../src/ol/style.js'; const center = fromLonLat([8.6, 50.1]); @@ -13,34 +16,30 @@ new Map({ layers: [ new TileLayer({ source: new XYZ({ - url: '/data/tiles/satellite/{z}/{x}/{y}.jpg' - }) + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', + }), }), new VectorLayer({ - style: function() { + style: function () { return new Style({ image: new Icon({ src: '/data/icon.png', anchor: [0.5, 46], anchorXUnits: 'fraction', - anchorYUnits: 'pixels' - }) + anchorYUnits: 'pixels', + }), }); }, source: new VectorSource({ - features: [ - new Feature( - new Point(center) - ) - ] - }) - }) + features: [new Feature(new Point(center))], + }), + }), ], target: 'map', view: new View({ center: center, - zoom: 3 - }) + zoom: 3, + }), }); render(); diff --git a/rendering/cases/immediate-geographic/main.js b/rendering/cases/immediate-geographic/main.js index c877a7728e..82f6935737 100644 --- a/rendering/cases/immediate-geographic/main.js +++ b/rendering/cases/immediate-geographic/main.js @@ -1,10 +1,10 @@ +import TileLayer from '../../../src/ol/layer/Tile.js'; +import XYZ from '../../../src/ol/source/XYZ.js'; +import {Circle, Fill, Style} from '../../../src/ol/style.js'; import {Map, View} from '../../../src/ol/index.js'; import {Point} from '../../../src/ol/geom.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; -import {useGeographic} from '../../../src/ol/proj.js'; -import XYZ from '../../../src/ol/source/XYZ.js'; -import {Style, Circle, Fill} from '../../../src/ol/style.js'; import {getVectorContext} from '../../../src/ol/render.js'; +import {useGeographic} from '../../../src/ol/proj.js'; useGeographic(); @@ -13,18 +13,20 @@ const center = [8.6, 50.1]; const layer = new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - transition: 0 - }) + transition: 0, + }), }); -layer.on('postrender', event => { +layer.on('postrender', (event) => { const context = getVectorContext(event); - context.setStyle(new Style({ - image: new Circle({ - radius: 5, - fill: new Fill({color: 'red'}) + context.setStyle( + new Style({ + image: new Circle({ + radius: 5, + fill: new Fill({color: 'red'}), + }), }) - })); + ); context.drawGeometry(new Point(center)); }); @@ -33,8 +35,8 @@ new Map({ layers: [layer], view: new View({ center: center, - zoom: 3 - }) + zoom: 3, + }), }); render(); diff --git a/rendering/cases/layer-clipping/main.js b/rendering/cases/layer-clipping/main.js index 5b220936fe..23c1a27829 100644 --- a/rendering/cases/layer-clipping/main.js +++ b/rendering/cases/layer-clipping/main.js @@ -1,34 +1,50 @@ import Map from '../../../src/ol/Map.js'; +import MultiPolygon from '../../../src/ol/geom/MultiPolygon.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; -import MultiPolygon from '../../../src/ol/geom/MultiPolygon.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; import {getVectorContext} from '../../../src/ol/render.js'; const source = new XYZ({ url: '/data/tiles/osm/{z}/{x}/{y}.png', - transition: 0 + transition: 0, }); const layer = new TileLayer({ - source: source + source: source, }); const geometry = new MultiPolygon([ - [[[-80, -40], [-40, 0], [-80, 40], [-120, 0], [-80, -40]]], - [[[80, -40], [120, 0], [80, 40], [40, 0], [80, -40]]] + [ + [ + [-80, -40], + [-40, 0], + [-80, 40], + [-120, 0], + [-80, -40], + ], + ], + [ + [ + [80, -40], + [120, 0], + [80, 40], + [40, 0], + [80, -40], + ], + ], ]).transform('EPSG:4326', 'EPSG:3857'); const style = new Style({ stroke: new Stroke({ width: 2, - color: 'blue' - }) + color: 'blue', + }), }); -layer.on('prerender', function(event) { +layer.on('prerender', function (event) { const context = event.context; context.save(); @@ -39,7 +55,7 @@ layer.on('prerender', function(event) { context.clip(); }); -layer.on('postrender', function(event) { +layer.on('postrender', function (event) { const context = event.context; context.restore(); @@ -54,8 +70,8 @@ new Map({ layers: [layer], view: new View({ center: [0, 0], - zoom: 0 - }) + zoom: 0, + }), }); render(); diff --git a/rendering/cases/layer-group/main.js b/rendering/cases/layer-group/main.js index a6fae1260e..d61b52e2ac 100644 --- a/rendering/cases/layer-group/main.js +++ b/rendering/cases/layer-group/main.js @@ -1,13 +1,13 @@ import Map from '../../../src/ol/Map.js'; import View from '../../../src/ol/View.js'; -import {Group as LayerGroup, Tile as TileLayer} from '../../../src/ol/layer.js'; import XYZ from '../../../src/ol/source/XYZ.js'; +import {Group as LayerGroup, Tile as TileLayer} from '../../../src/ol/layer.js'; new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 3 + zoom: 3, }), layers: new LayerGroup({ opacity: 0.75, @@ -15,16 +15,16 @@ new Map({ new TileLayer({ opacity: 0.25, source: new XYZ({ - url: '/data/tiles/satellite/{z}/{x}/{y}.jpg' - }) + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', + }), }), new TileLayer({ source: new XYZ({ - url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png' - }) - }) - ] - }) + url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png', + }), + }), + ], + }), }); render(); diff --git a/rendering/cases/layer-image-extent-rotation-geographic/main.js b/rendering/cases/layer-image-extent-rotation-geographic/main.js index 41a59fffa4..3a3018e7fc 100644 --- a/rendering/cases/layer-image-extent-rotation-geographic/main.js +++ b/rendering/cases/layer-image-extent-rotation-geographic/main.js @@ -1,12 +1,12 @@ +import ImageLayer from '../../../src/ol/layer/Image.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Static from '../../../src/ol/source/ImageStatic.js'; +import View from '../../../src/ol/View.js'; import { get as getProjection, transformExtent, - useGeographic + useGeographic, } from '../../../src/ol/proj.js'; -import ImageLayer from '../../../src/ol/layer/Image.js'; useGeographic(); @@ -16,19 +16,25 @@ const extent = [-123.1, 37.1, -122.1, 37.9]; new Map({ pixelRatio: 1, target: 'map', - layers: [new ImageLayer({ - source: new Static({ - url: '/data/tiles/osm/5/5/12.png', - imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'), - projection: getProjection('EPSG:3857') + layers: [ + new ImageLayer({ + source: new Static({ + url: '/data/tiles/osm/5/5/12.png', + imageExtent: transformExtent( + [-123, 37, -122, 38], + 'EPSG:4326', + 'EPSG:3857' + ), + projection: getProjection('EPSG:3857'), + }), + extent, }), - extent - })], + ], view: new View({ center, zoom: 8, - rotation: Math.PI / 4 - }) + rotation: Math.PI / 4, + }), }); render(); diff --git a/rendering/cases/layer-image-extent-rotation/main.js b/rendering/cases/layer-image-extent-rotation/main.js index 2736a5beb3..43f505970c 100644 --- a/rendering/cases/layer-image-extent-rotation/main.js +++ b/rendering/cases/layer-image-extent-rotation/main.js @@ -1,31 +1,41 @@ +import ImageLayer from '../../../src/ol/layer/Image.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Static from '../../../src/ol/source/ImageStatic.js'; +import View from '../../../src/ol/View.js'; import { get as getProjection, transform, - transformExtent + transformExtent, } from '../../../src/ol/proj.js'; -import ImageLayer from '../../../src/ol/layer/Image.js'; const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'); -const extent = transformExtent([-123.1, 37.1, -122.1, 37.9], 'EPSG:4326', 'EPSG:3857'); +const extent = transformExtent( + [-123.1, 37.1, -122.1, 37.9], + 'EPSG:4326', + 'EPSG:3857' +); new Map({ pixelRatio: 1, target: 'map', - layers: [new ImageLayer({ - source: new Static({ - url: '/data/tiles/osm/5/5/12.png', - imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'), - projection: getProjection('EPSG:3857') + layers: [ + new ImageLayer({ + source: new Static({ + url: '/data/tiles/osm/5/5/12.png', + imageExtent: transformExtent( + [-123, 37, -122, 38], + 'EPSG:4326', + 'EPSG:3857' + ), + projection: getProjection('EPSG:3857'), + }), + extent, }), - extent - })], + ], view: new View({ center, zoom: 8, - rotation: Math.PI / 4 - }) + rotation: Math.PI / 4, + }), }); render(); diff --git a/rendering/cases/layer-image/main.js b/rendering/cases/layer-image/main.js index 14de5cd377..1582be0eda 100644 --- a/rendering/cases/layer-image/main.js +++ b/rendering/cases/layer-image/main.js @@ -1,28 +1,34 @@ +import ImageLayer from '../../../src/ol/layer/Image.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Static from '../../../src/ol/source/ImageStatic.js'; +import View from '../../../src/ol/View.js'; import { get as getProjection, transform, - transformExtent + transformExtent, } from '../../../src/ol/proj.js'; -import ImageLayer from '../../../src/ol/layer/Image.js'; const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'); new Map({ pixelRatio: 1, target: 'map', - layers: [new ImageLayer({ - source: new Static({ - url: '/data/tiles/osm/5/5/12.png', - imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'), - projection: getProjection('EPSG:3857') - }) - })], + layers: [ + new ImageLayer({ + source: new Static({ + url: '/data/tiles/osm/5/5/12.png', + imageExtent: transformExtent( + [-123, 37, -122, 38], + 'EPSG:4326', + 'EPSG:3857' + ), + projection: getProjection('EPSG:3857'), + }), + }), + ], view: new View({ center, - zoom: 8 - }) + zoom: 8, + }), }); render(); diff --git a/rendering/cases/layer-tile-extent-geographic/main.js b/rendering/cases/layer-tile-extent-geographic/main.js index ea56577f79..d7bd2c4d5d 100644 --- a/rendering/cases/layer-tile-extent-geographic/main.js +++ b/rendering/cases/layer-tile-extent-geographic/main.js @@ -3,8 +3,8 @@ */ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; +import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; import {useGeographic} from '../../../src/ol/proj.js'; @@ -17,25 +17,25 @@ new Map({ target: 'map', view: new View({ center: center, - zoom: 3 + zoom: 3, }), layers: [ new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - maxZoom: 3 + maxZoom: 3, }), - extent: extent + extent: extent, }), new TileLayer({ source: new XYZ({ url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png', minZoom: 3, - maxZoom: 5 + maxZoom: 5, }), - extent: extent - }) - ] + extent: extent, + }), + ], }); render(); diff --git a/rendering/cases/layer-tile-extent/main.js b/rendering/cases/layer-tile-extent/main.js index bb987178aa..04821c4aee 100644 --- a/rendering/cases/layer-tile-extent/main.js +++ b/rendering/cases/layer-tile-extent/main.js @@ -3,11 +3,11 @@ */ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; +import View from '../../../src/ol/View.js'; +import XYZ from '../../../src/ol/source/XYZ.js'; import {fromLonLat} from '../../../src/ol/proj.js'; import {transformExtent} from '../../../src/ol/proj.js'; -import XYZ from '../../../src/ol/source/XYZ.js'; const center = fromLonLat([7, 50]); const extent = transformExtent([2, 47, 10, 53], 'EPSG:4326', 'EPSG:3857'); @@ -16,25 +16,25 @@ new Map({ target: 'map', view: new View({ center: center, - zoom: 3 + zoom: 3, }), layers: [ new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - maxZoom: 3 + maxZoom: 3, }), - extent: extent + extent: extent, }), new TileLayer({ source: new XYZ({ url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png', minZoom: 3, - maxZoom: 5 + maxZoom: 5, }), - extent: extent - }) - ] + extent: extent, + }), + ], }); render(); diff --git a/rendering/cases/layer-tile-none-square/main.js b/rendering/cases/layer-tile-none-square/main.js index 70a8782eab..a4766ed4d2 100644 --- a/rendering/cases/layer-tile-none-square/main.js +++ b/rendering/cases/layer-tile-none-square/main.js @@ -1,6 +1,6 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; +import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; import {createXYZ} from '../../../src/ol/tilegrid.js'; @@ -10,10 +10,10 @@ const layer = new TileLayer({ source: new XYZ({ url: '/data/tiles/512x256/{z}/{x}/{y}.png', tileGrid: createXYZ({ - tileSize: [512, 256] + tileSize: [512, 256], }), - transition: 0 - }) + transition: 0, + }), }); const map = new Map({ @@ -21,8 +21,8 @@ const map = new Map({ pixelRatio: 1, view: new View({ center: center, - zoom: 5 - }) + zoom: 5, + }), }); map.addLayer(layer); diff --git a/rendering/cases/layer-tile-opacity/main.js b/rendering/cases/layer-tile-opacity/main.js index 9d96801692..de389c55c9 100644 --- a/rendering/cases/layer-tile-opacity/main.js +++ b/rendering/cases/layer-tile-opacity/main.js @@ -1,8 +1,8 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; -import {fromLonLat} from '../../../src/ol/proj.js'; +import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; +import {fromLonLat} from '../../../src/ol/proj.js'; const center = fromLonLat([8.6, 50.1]); @@ -11,16 +11,16 @@ new Map({ new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - transition: 0 + transition: 0, }), - opacity: 0.2 - }) + opacity: 0.2, + }), ], target: 'map', view: new View({ center: center, - zoom: 3 - }) + zoom: 3, + }), }); render(); diff --git a/rendering/cases/layer-tile-render-listener/main.js b/rendering/cases/layer-tile-render-listener/main.js index b5daf36b6a..2472a6a5c0 100644 --- a/rendering/cases/layer-tile-render-listener/main.js +++ b/rendering/cases/layer-tile-render-listener/main.js @@ -1,12 +1,12 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; -import {transform, fromLonLat} from '../../../src/ol/proj.js'; -import XYZ from '../../../src/ol/source/XYZ.js'; import CircleStyle from '../../../src/ol/style/Circle.js'; import Fill from '../../../src/ol/style/Fill.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; +import Map from '../../../src/ol/Map.js'; import Point from '../../../src/ol/geom/Point.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; +import View from '../../../src/ol/View.js'; +import XYZ from '../../../src/ol/source/XYZ.js'; +import {fromLonLat, transform} from '../../../src/ol/proj.js'; import {getVectorContext} from '../../../src/ol/render.js'; const center = fromLonLat([8.6, 50.1]); @@ -14,32 +14,34 @@ const center = fromLonLat([8.6, 50.1]); const layer = new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - transition: 0 - }) + transition: 0, + }), }); -const onRender = function(event) { +const onRender = function (event) { const context = event.context; context.restore(); const vectorContext = getVectorContext(event); - vectorContext.setImageStyle(new CircleStyle({ - radius: 12, - fill: new Fill({color: 'yellow'}), - stroke: new Stroke({color: 'red', width: 1}) - })); - vectorContext.drawPoint(new Point( - transform([13, 37], 'EPSG:4326', 'EPSG:3857'))); + vectorContext.setImageStyle( + new CircleStyle({ + radius: 12, + fill: new Fill({color: 'yellow'}), + stroke: new Stroke({color: 'red', width: 1}), + }) + ); + vectorContext.drawPoint( + new Point(transform([13, 37], 'EPSG:4326', 'EPSG:3857')) + ); }; layer.on('postrender', onRender); const map = new Map({ - layers: [ - ], + layers: [], target: 'map', view: new View({ center: center, - zoom: 3 - }) + zoom: 3, + }), }); map.addLayer(layer); diff --git a/rendering/cases/layer-tile-simple/main.js b/rendering/cases/layer-tile-simple/main.js index 02505651d1..0a329ac78e 100644 --- a/rendering/cases/layer-tile-simple/main.js +++ b/rendering/cases/layer-tile-simple/main.js @@ -1,8 +1,8 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; -import {fromLonLat} from '../../../src/ol/proj.js'; +import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; +import {fromLonLat} from '../../../src/ol/proj.js'; const center = fromLonLat([8.6, 50.1]); @@ -11,15 +11,15 @@ new Map({ new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - transition: 0 - }) - }) + transition: 0, + }), + }), ], target: 'map', view: new View({ center: center, - zoom: 3 - }) + zoom: 3, + }), }); render(); diff --git a/rendering/cases/layer-tile-transition/main.js b/rendering/cases/layer-tile-transition/main.js index 20835bfb23..846fdb888a 100644 --- a/rendering/cases/layer-tile-transition/main.js +++ b/rendering/cases/layer-tile-transition/main.js @@ -1,8 +1,8 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; -import {fromLonLat} from '../../../src/ol/proj.js'; +import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; +import {fromLonLat} from '../../../src/ol/proj.js'; const center = fromLonLat([8.6, 50.1]); @@ -10,15 +10,15 @@ new Map({ layers: [ new TileLayer({ source: new XYZ({ - url: '/data/tiles/satellite/{z}/{x}/{y}.jpg' - }) - }) + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', + }), + }), ], target: 'map', view: new View({ center: center, - zoom: 3 - }) + zoom: 3, + }), }); render(); diff --git a/rendering/cases/layer-tile-two-layers/main.js b/rendering/cases/layer-tile-two-layers/main.js index 84da9a005f..d316596210 100644 --- a/rendering/cases/layer-tile-two-layers/main.js +++ b/rendering/cases/layer-tile-two-layers/main.js @@ -1,23 +1,23 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; -import {fromLonLat} from '../../../src/ol/proj.js'; +import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; +import {fromLonLat} from '../../../src/ol/proj.js'; const center = fromLonLat([8.6, 50.1]); const layer1 = new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - transition: 0 + transition: 0, }), - opacity: 0.2 + opacity: 0.2, }); const layer2 = new TileLayer({ source: new XYZ({ url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png', - transition: 0 - }) + transition: 0, + }), }); const map = new Map({ @@ -26,8 +26,8 @@ const map = new Map({ target: 'map', view: new View({ center: center, - zoom: 3 - }) + zoom: 3, + }), }); map.getView().setRotation(Math.PI / 2); diff --git a/rendering/cases/layer-vector-decluttering/main.js b/rendering/cases/layer-vector-decluttering/main.js index d551f268dc..528e9cadd4 100644 --- a/rendering/cases/layer-vector-decluttering/main.js +++ b/rendering/cases/layer-vector-decluttering/main.js @@ -1,15 +1,15 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import VectorSource from '../../../src/ol/source/Vector.js'; -import VectorLayer from '../../../src/ol/layer/Vector.js'; +import CircleStyle from '../../../src/ol/style/Circle.js'; import Feature from '../../../src/ol/Feature.js'; +import Fill from '../../../src/ol/style/Fill.js'; +import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; import Point from '../../../src/ol/geom/Point.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; import Style from '../../../src/ol/style/Style.js'; import Text from '../../../src/ol/style/Text.js'; -import CircleStyle from '../../../src/ol/style/Circle.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; -import LineString from '../../../src/ol/geom/LineString.js'; +import VectorLayer from '../../../src/ol/layer/Vector.js'; +import VectorSource from '../../../src/ol/source/Vector.js'; +import View from '../../../src/ol/View.js'; let center = [1825927.7316762917, 6143091.089223046]; const map = new Map({ @@ -17,56 +17,60 @@ const map = new Map({ target: 'map', view: new View({ center: center, - zoom: 13 - }) + zoom: 13, + }), }); const source1 = new VectorSource(); const layer1 = new VectorLayer({ declutter: true, - source: source1 + source: source1, }); const source2 = new VectorSource(); const layer2 = new VectorLayer({ declutter: true, - source: source2 + source: source2, }); const source3 = new VectorSource(); const layer3 = new VectorLayer({ declutter: true, - source: source3 + source: source3, }); const source4 = new VectorSource(); const layer4 = new VectorLayer({ declutter: true, - source: source4 + source: source4, }); const feature1 = new Feature({ geometry: new Point(center), - zIndex: 2 + zIndex: 2, }); source1.addFeature(feature1); -source1.addFeature(new Feature({ - geometry: new Point([center[0] - 540, center[1]]), - zIndex: 3 -})); -source1.addFeature(new Feature({ - geometry: new Point([center[0] + 540, center[1]]), - zIndex: 1 -})); -layer1.setStyle(function(feature) { +source1.addFeature( + new Feature({ + geometry: new Point([center[0] - 540, center[1]]), + zIndex: 3, + }) +); +source1.addFeature( + new Feature({ + geometry: new Point([center[0] + 540, center[1]]), + zIndex: 1, + }) +); +layer1.setStyle(function (feature) { return new Style({ zIndex: feature.get('zIndex'), image: new CircleStyle({ radius: 15, fill: new Fill({ - color: 'blue' - }) - }) + color: 'blue', + }), + }), }); }); map.addLayer(layer1); @@ -75,91 +79,107 @@ center = [center[0] + 500, center[1] + 700]; const feature2 = new Feature({ geometry: new Point(center), text: 'center', - zIndex: 2 + zIndex: 2, }); source2.addFeature(feature2); -source2.addFeature(new Feature({ - geometry: new Point([center[0] - 540, center[1]]), - text: 'west', - zIndex: 3 -})); -source2.addFeature(new Feature({ - geometry: new Point([center[0] + 540, center[1]]), - text: 'east', - zIndex: 1 -})); -layer2.setStyle(function(feature) { +source2.addFeature( + new Feature({ + geometry: new Point([center[0] - 540, center[1]]), + text: 'west', + zIndex: 3, + }) +); +source2.addFeature( + new Feature({ + geometry: new Point([center[0] + 540, center[1]]), + text: 'east', + zIndex: 1, + }) +); +layer2.setStyle(function (feature) { return new Style({ zIndex: feature.get('zIndex'), text: new Text({ text: feature.get('text'), - font: 'italic bold 18px Ubuntu' - }) + font: 'italic bold 18px Ubuntu', + }), }); }); map.addLayer(layer2); center = [center[0] + 500, center[1] + 300]; -source3.addFeature(new Feature({ - geometry: new Point(center), - text: 'center' -})); -source3.addFeature(new Feature({ - geometry: new Point([center[0] - 540, center[1]]), - text: 'west' -})); -source3.addFeature(new Feature({ - geometry: new Point([center[0] + 540, center[1]]), - text: 'east' -})); -layer3.setStyle(function(feature) { +source3.addFeature( + new Feature({ + geometry: new Point(center), + text: 'center', + }) +); +source3.addFeature( + new Feature({ + geometry: new Point([center[0] - 540, center[1]]), + text: 'west', + }) +); +source3.addFeature( + new Feature({ + geometry: new Point([center[0] + 540, center[1]]), + text: 'east', + }) +); +layer3.setStyle(function (feature) { return new Style({ image: new CircleStyle({ radius: 10, stroke: new Stroke({ color: 'red', - width: 8 - }) + width: 8, + }), }), text: new Text({ text: feature.get('text'), font: 'italic bold 18px Ubuntu', textBaseline: 'bottom', - offsetY: -12 - }) + offsetY: -12, + }), }); }); map.addLayer(layer3); center = [center[0] - 2000, center[1] - 2000]; const point = new Feature(new Point(center)); -point.setStyle(new Style({ - zIndex: 1, - image: new CircleStyle({ - radius: 8, +point.setStyle( + new Style({ + zIndex: 1, + image: new CircleStyle({ + radius: 8, + stroke: new Stroke({ + color: 'blue', + width: 4, + }), + }), + }) +); +const line = new Feature( + new LineString([ + [center[0] - 650, center[1] - 200], + [center[0] + 650, center[1] - 200], + ]) +); +line.setStyle( + new Style({ + zIndex: 2, stroke: new Stroke({ - color: 'blue', - width: 4 - }) + color: '#CCC', + width: 12, + }), + text: new Text({ + placement: 'line', + text: 'east-west', + font: 'italic bold 18px Ubuntu', + overflow: true, + }), }) -})); -const line = new Feature(new LineString([ - [center[0] - 650, center[1] - 200], - [center[0] + 650, center[1] - 200] -])); -line.setStyle(new Style({ - zIndex: 2, - stroke: new Stroke({ - color: '#CCC', - width: 12 - }), - text: new Text({ - placement: 'line', - text: 'east-west', - font: 'italic bold 18px Ubuntu', - overflow: true - }) -})); +); source4.addFeature(point); source4.addFeature(line); map.addLayer(layer4); diff --git a/rendering/cases/layer-vector-extent-geographic/main.js b/rendering/cases/layer-vector-extent-geographic/main.js index e726a1c0c8..f24061bfe6 100644 --- a/rendering/cases/layer-vector-extent-geographic/main.js +++ b/rendering/cases/layer-vector-extent-geographic/main.js @@ -1,8 +1,8 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import GeoJSON from '../../../src/ol/format/GeoJSON.js'; +import Map from '../../../src/ol/Map.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; +import View from '../../../src/ol/View.js'; import {useGeographic} from '../../../src/ol/proj.js'; useGeographic(); @@ -11,17 +11,17 @@ new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 1 + zoom: 1, }), layers: [ new VectorLayer({ extent: [-50, -45, 50, 45], source: new VectorSource({ url: '/data/countries.json', - format: new GeoJSON() - }) - }) - ] + format: new GeoJSON(), + }), + }), + ], }); render(); diff --git a/rendering/cases/layer-vector-multigeometry-decluttering/main.js b/rendering/cases/layer-vector-multigeometry-decluttering/main.js index 5e903d8532..e8de340739 100644 --- a/rendering/cases/layer-vector-multigeometry-decluttering/main.js +++ b/rendering/cases/layer-vector-multigeometry-decluttering/main.js @@ -1,16 +1,16 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import GeoJSON from '../../../src/ol/format/GeoJSON.js'; +import Map from '../../../src/ol/Map.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; +import View from '../../../src/ol/View.js'; import {Fill, Stroke, Style, Text} from '../../../src/ol/style.js'; const map = new Map({ target: 'map', view: new View({ center: [-17465028, 2331736], - zoom: 5 - }) + zoom: 5, + }), }); const labelStyle = new Style({ @@ -18,38 +18,37 @@ const labelStyle = new Style({ font: '16px Ubuntu', overflow: true, fill: new Fill({ - color: '#000' + color: '#000', }), stroke: new Stroke({ color: '#fff', - width: 3 - }) - }) + width: 3, + }), + }), }); const countryStyle = new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.6)' + color: 'rgba(255, 255, 255, 0.6)', }), stroke: new Stroke({ color: '#319FD3', - width: 1 - }) + width: 1, + }), }); const style = [countryStyle, labelStyle]; const vectorLayer = new VectorLayer({ source: new VectorSource({ url: '/data/countries.json', - format: new GeoJSON() + format: new GeoJSON(), }), - style: function(feature) { + style: function (feature) { labelStyle.getText().setText(feature.get('name')); return style; }, - declutter: true + declutter: true, }); map.addLayer(vectorLayer); - render({tolerance: 0.007}); diff --git a/rendering/cases/layer-vector-polygon-partial/main.js b/rendering/cases/layer-vector-polygon-partial/main.js index b953ea3130..c35ab43021 100644 --- a/rendering/cases/layer-vector-polygon-partial/main.js +++ b/rendering/cases/layer-vector-polygon-partial/main.js @@ -1,30 +1,38 @@ +import Feature from '../../../src/ol/Feature.js'; +import Fill from '../../../src/ol/style/Fill.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; +import Polygon from '../../../src/ol/geom/Polygon.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Feature from '../../../src/ol/Feature.js'; -import Polygon from '../../../src/ol/geom/Polygon.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; -import Fill from '../../../src/ol/style/Fill.js'; +import View from '../../../src/ol/View.js'; const src = new VectorSource({ features: [ - new Feature(new Polygon([[ - [-22, 18], - [-22, 78], - [-9, 78], - [-9, 18], - [-22, 18] - ]])), - new Feature(new Polygon([[ - [-9, 18], - [-9, 78], - [4, 78], - [4, 18], - [-9, 18] - ]])) - ] + new Feature( + new Polygon([ + [ + [-22, 18], + [-22, 78], + [-9, 78], + [-9, 18], + [-22, 18], + ], + ]) + ), + new Feature( + new Polygon([ + [ + [-9, 18], + [-9, 78], + [4, 78], + [4, 18], + [-9, 18], + ], + ]) + ), + ], }); const layer = new VectorLayer({ renderBuffer: 0, @@ -32,24 +40,24 @@ const layer = new VectorLayer({ style: new Style({ stroke: new Stroke({ color: [0, 0, 0, 1], - width: 2 + width: 2, }), fill: new Fill({ - color: [255, 0, 0, 1] - }) - }) + color: [255, 0, 0, 1], + }), + }), }); const view = new View({ center: [-9.5, 78], zoom: 2, projection: 'EPSG:4326', - multiWorld: true + multiWorld: true, }); new Map({ pixelRatio: 1, layers: [layer], target: 'map', - view: view + view: view, }); render(); diff --git a/rendering/cases/layer-vector-polygon/main.js b/rendering/cases/layer-vector-polygon/main.js index 811c6d7673..22a16666bf 100644 --- a/rendering/cases/layer-vector-polygon/main.js +++ b/rendering/cases/layer-vector-polygon/main.js @@ -1,43 +1,59 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import VectorLayer from '../../../src/ol/layer/Vector.js'; -import VectorSource from '../../../src/ol/source/Vector.js'; import Feature from '../../../src/ol/Feature.js'; +import Fill from '../../../src/ol/style/Fill.js'; +import Map from '../../../src/ol/Map.js'; import Polygon from '../../../src/ol/geom/Polygon.js'; import Style from '../../../src/ol/style/Style.js'; -import Fill from '../../../src/ol/style/Fill.js'; +import VectorLayer from '../../../src/ol/layer/Vector.js'; +import VectorSource from '../../../src/ol/source/Vector.js'; +import View from '../../../src/ol/View.js'; const feature = new Feature({ geometry: new Polygon([ - [[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]], - [[0, 60], [-17.6336, 24.2705], [-57.0634, 18.5410], [-28.5317, -9.2705], [-35.2671, -48.5410], [0, -30], [35.2671, -48.5410], [28.5317, -9.2705], [57.0634, 18.5410], [17.6336, 24.2705], [0, 60]] - ]) + [ + [-180, -90], + [180, -90], + [180, 90], + [-180, 90], + [-180, -90], + ], + [ + [0, 60], + [-17.6336, 24.2705], + [-57.0634, 18.541], + [-28.5317, -9.2705], + [-35.2671, -48.541], + [0, -30], + [35.2671, -48.541], + [28.5317, -9.2705], + [57.0634, 18.541], + [17.6336, 24.2705], + [0, 60], + ], + ]), }); const src = new VectorSource({ - features: [ - feature - ] + features: [feature], }); const layer = new VectorLayer({ renderBuffer: 0, source: src, style: new Style({ fill: new Fill({ - color: 'blue' - }) - }) + color: 'blue', + }), + }), }); const view = new View({ center: [0, 0], zoom: 1, - projection: 'EPSG:4326' + projection: 'EPSG:4326', }); new Map({ pixelRatio: 1, layers: [layer], target: 'map', - view: view + view: view, }); render(); diff --git a/rendering/cases/layer-vector/main.js b/rendering/cases/layer-vector/main.js index 2b178d5351..db8448e67d 100644 --- a/rendering/cases/layer-vector/main.js +++ b/rendering/cases/layer-vector/main.js @@ -1,13 +1,13 @@ +import Circle from '../../../src/ol/geom/Circle.js'; import Feature from '../../../src/ol/Feature.js'; +import LineString from '../../../src/ol/geom/LineString.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; +import Polygon from '../../../src/ol/geom/Polygon.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; -import Polygon from '../../../src/ol/geom/Polygon.js'; -import Circle from '../../../src/ol/geom/Circle.js'; -import LineString from '../../../src/ol/geom/LineString.js'; +import View from '../../../src/ol/View.js'; const center = [1825927.7316762917, 6143091.089223046]; @@ -18,13 +18,13 @@ const vectorLayer1 = new VectorLayer({ style: new Style({ stroke: new Stroke({ color: '#3399CC', - width: 1.25 - }) - }) + width: 1.25, + }), + }), }); const vectorLayer2 = new VectorLayer({ source: source2, - opacity: 0.6 + opacity: 0.6, }); function addCircle(r, source) { @@ -32,25 +32,33 @@ function addCircle(r, source) { } function addPolygon(r, source) { - source.addFeature(new Feature(new Polygon([ - [ - [center[0] - r, center[1] - r], - [center[0] + r, center[1] - r], - [center[0] + r, center[1] + r], - [center[0] - r, center[1] + r], - [center[0] - r, center[1] - r] - ] - ]))); + source.addFeature( + new Feature( + new Polygon([ + [ + [center[0] - r, center[1] - r], + [center[0] + r, center[1] - r], + [center[0] + r, center[1] + r], + [center[0] - r, center[1] + r], + [center[0] - r, center[1] - r], + ], + ]) + ) + ); } -const smallLine = new Feature(new LineString([ - [center[0], center[1] - 1], - [center[0], center[1] + 1] -])); -smallLine.setStyle(new Style({ - zIndex: -99, - stroke: new Stroke({width: 75, color: 'red'}) -})); +const smallLine = new Feature( + new LineString([ + [center[0], center[1] - 1], + [center[0], center[1] + 1], + ]) +); +smallLine.setStyle( + new Style({ + zIndex: -99, + stroke: new Stroke({width: 75, color: 'red'}), + }) +); smallLine.getGeometry().translate(-1000, 1000); source1.addFeature(smallLine); addPolygon(100, source1); @@ -60,32 +68,36 @@ addCircle(500, source1); addPolygon(600, source1); addPolygon(720, source1); -const smallLine2 = new Feature(new LineString([ - [center[0], center[1] - 1000], - [center[0], center[1] + 1000] -])); +const smallLine2 = new Feature( + new LineString([ + [center[0], center[1] - 1000], + [center[0], center[1] + 1000], + ]) +); smallLine2.setStyle([ new Style({ - stroke: new Stroke({width: 35, color: 'blue'}) + stroke: new Stroke({width: 35, color: 'blue'}), }), new Style({ - stroke: new Stroke({width: 15, color: 'green'}) - }) + stroke: new Stroke({width: 15, color: 'green'}), + }), ]); smallLine2.getGeometry().translate(1000, 1000); source1.addFeature(smallLine2); -const smallLine3 = new Feature(new LineString([ - [center[0], center[1] - 1], - [center[0], center[1] + 1] -])); +const smallLine3 = new Feature( + new LineString([ + [center[0], center[1] - 1], + [center[0], center[1] + 1], + ]) +); smallLine3.setStyle([ new Style({ - stroke: new Stroke({width: 75, color: 'red'}) + stroke: new Stroke({width: 75, color: 'red'}), }), new Style({ - stroke: new Stroke({width: 45, color: 'white'}) - }) + stroke: new Stroke({width: 45, color: 'white'}), + }), ]); smallLine3.getGeometry().translate(-1000, -1000); @@ -94,15 +106,12 @@ addCircle(400, source2); source2.addFeature(smallLine3); const map = new Map({ - layers: [ - vectorLayer1, - vectorLayer2 - ], + layers: [vectorLayer1, vectorLayer2], target: 'map', view: new View({ center: center, - zoom: 13 - }) + zoom: 13, + }), }); map.getView().setRotation(Math.PI + Math.PI / 4); diff --git a/rendering/cases/layer-vectorimage-decluttering/main.js b/rendering/cases/layer-vectorimage-decluttering/main.js index 83428d97f0..e0c23c9e4b 100644 --- a/rendering/cases/layer-vectorimage-decluttering/main.js +++ b/rendering/cases/layer-vectorimage-decluttering/main.js @@ -1,15 +1,15 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import VectorSource from '../../../src/ol/source/Vector.js'; -import VectorImageLayer from '../../../src/ol/layer/VectorImage.js'; +import CircleStyle from '../../../src/ol/style/Circle.js'; import Feature from '../../../src/ol/Feature.js'; +import Fill from '../../../src/ol/style/Fill.js'; +import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; import Point from '../../../src/ol/geom/Point.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; import Style from '../../../src/ol/style/Style.js'; import Text from '../../../src/ol/style/Text.js'; -import CircleStyle from '../../../src/ol/style/Circle.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; -import LineString from '../../../src/ol/geom/LineString.js'; +import VectorImageLayer from '../../../src/ol/layer/VectorImage.js'; +import VectorSource from '../../../src/ol/source/Vector.js'; +import View from '../../../src/ol/View.js'; let center = [1825927.7316762917, 6143091.089223046]; const map = new Map({ @@ -17,56 +17,60 @@ const map = new Map({ target: 'map', view: new View({ center: center, - zoom: 13 - }) + zoom: 13, + }), }); const source1 = new VectorSource(); const layer1 = new VectorImageLayer({ declutter: true, - source: source1 + source: source1, }); const source2 = new VectorSource(); const layer2 = new VectorImageLayer({ declutter: true, - source: source2 + source: source2, }); const source3 = new VectorSource(); const layer3 = new VectorImageLayer({ declutter: true, - source: source3 + source: source3, }); const source4 = new VectorSource(); const layer4 = new VectorImageLayer({ declutter: true, - source: source4 + source: source4, }); const feature1 = new Feature({ geometry: new Point(center), - zIndex: 2 + zIndex: 2, }); source1.addFeature(feature1); -source1.addFeature(new Feature({ - geometry: new Point([center[0] - 540, center[1]]), - zIndex: 3 -})); -source1.addFeature(new Feature({ - geometry: new Point([center[0] + 540, center[1]]), - zIndex: 1 -})); -layer1.setStyle(function(feature) { +source1.addFeature( + new Feature({ + geometry: new Point([center[0] - 540, center[1]]), + zIndex: 3, + }) +); +source1.addFeature( + new Feature({ + geometry: new Point([center[0] + 540, center[1]]), + zIndex: 1, + }) +); +layer1.setStyle(function (feature) { return new Style({ zIndex: feature.get('zIndex'), image: new CircleStyle({ radius: 15, fill: new Fill({ - color: 'blue' - }) - }) + color: 'blue', + }), + }), }); }); map.addLayer(layer1); @@ -75,91 +79,107 @@ center = [center[0] + 500, center[1] + 700]; const feature2 = new Feature({ geometry: new Point(center), text: 'center', - zIndex: 2 + zIndex: 2, }); source2.addFeature(feature2); -source2.addFeature(new Feature({ - geometry: new Point([center[0] - 540, center[1]]), - text: 'west', - zIndex: 3 -})); -source2.addFeature(new Feature({ - geometry: new Point([center[0] + 540, center[1]]), - text: 'east', - zIndex: 1 -})); -layer2.setStyle(function(feature) { +source2.addFeature( + new Feature({ + geometry: new Point([center[0] - 540, center[1]]), + text: 'west', + zIndex: 3, + }) +); +source2.addFeature( + new Feature({ + geometry: new Point([center[0] + 540, center[1]]), + text: 'east', + zIndex: 1, + }) +); +layer2.setStyle(function (feature) { return new Style({ zIndex: feature.get('zIndex'), text: new Text({ text: feature.get('text'), - font: 'italic bold 18px Ubuntu' - }) + font: 'italic bold 18px Ubuntu', + }), }); }); map.addLayer(layer2); center = [center[0] + 500, center[1] + 300]; -source3.addFeature(new Feature({ - geometry: new Point(center), - text: 'center' -})); -source3.addFeature(new Feature({ - geometry: new Point([center[0] - 540, center[1]]), - text: 'west' -})); -source3.addFeature(new Feature({ - geometry: new Point([center[0] + 540, center[1]]), - text: 'east' -})); -layer3.setStyle(function(feature) { +source3.addFeature( + new Feature({ + geometry: new Point(center), + text: 'center', + }) +); +source3.addFeature( + new Feature({ + geometry: new Point([center[0] - 540, center[1]]), + text: 'west', + }) +); +source3.addFeature( + new Feature({ + geometry: new Point([center[0] + 540, center[1]]), + text: 'east', + }) +); +layer3.setStyle(function (feature) { return new Style({ image: new CircleStyle({ radius: 10, stroke: new Stroke({ color: 'red', - width: 8 - }) + width: 8, + }), }), text: new Text({ text: feature.get('text'), font: 'italic bold 18px Ubuntu', textBaseline: 'bottom', - offsetY: -12 - }) + offsetY: -12, + }), }); }); map.addLayer(layer3); center = [center[0] - 2000, center[1] - 2000]; const point = new Feature(new Point(center)); -point.setStyle(new Style({ - zIndex: 1, - image: new CircleStyle({ - radius: 8, +point.setStyle( + new Style({ + zIndex: 1, + image: new CircleStyle({ + radius: 8, + stroke: new Stroke({ + color: 'blue', + width: 4, + }), + }), + }) +); +const line = new Feature( + new LineString([ + [center[0] - 650, center[1] - 200], + [center[0] + 650, center[1] - 200], + ]) +); +line.setStyle( + new Style({ + zIndex: 2, stroke: new Stroke({ - color: 'blue', - width: 4 - }) + color: '#CCC', + width: 12, + }), + text: new Text({ + placement: 'line', + text: 'east-west', + font: 'italic bold 18px Ubuntu', + overflow: true, + }), }) -})); -const line = new Feature(new LineString([ - [center[0] - 650, center[1] - 200], - [center[0] + 650, center[1] - 200] -])); -line.setStyle(new Style({ - zIndex: 2, - stroke: new Stroke({ - color: '#CCC', - width: 12 - }), - text: new Text({ - placement: 'line', - text: 'east-west', - font: 'italic bold 18px Ubuntu', - overflow: true - }) -})); +); source4.addFeature(point); source4.addFeature(line); map.addLayer(layer4); diff --git a/rendering/cases/layer-vectorimage/main.js b/rendering/cases/layer-vectorimage/main.js index e14f3eaa2c..9719125c93 100644 --- a/rendering/cases/layer-vectorimage/main.js +++ b/rendering/cases/layer-vectorimage/main.js @@ -1,13 +1,13 @@ -import Feature from '../../../src/ol/Feature.js'; -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import VectorSource from '../../../src/ol/source/Vector.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; -import Polygon from '../../../src/ol/geom/Polygon.js'; import Circle from '../../../src/ol/geom/Circle.js'; +import Feature from '../../../src/ol/Feature.js'; import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; +import Polygon from '../../../src/ol/geom/Polygon.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorImageLayer from '../../../src/ol/layer/VectorImage.js'; +import VectorSource from '../../../src/ol/source/Vector.js'; +import View from '../../../src/ol/View.js'; const center = [1825927.7316762917, 6143091.089223046]; @@ -18,13 +18,13 @@ const vectorLayer1 = new VectorImageLayer({ style: new Style({ stroke: new Stroke({ color: '#3399CC', - width: 1.25 - }) - }) + width: 1.25, + }), + }), }); const vectorLayer2 = new VectorImageLayer({ source: source2, - opacity: 0.6 + opacity: 0.6, }); function addCircle(r, source) { @@ -32,25 +32,33 @@ function addCircle(r, source) { } function addPolygon(r, source) { - source.addFeature(new Feature(new Polygon([ - [ - [center[0] - r, center[1] - r], - [center[0] + r, center[1] - r], - [center[0] + r, center[1] + r], - [center[0] - r, center[1] + r], - [center[0] - r, center[1] - r] - ] - ]))); + source.addFeature( + new Feature( + new Polygon([ + [ + [center[0] - r, center[1] - r], + [center[0] + r, center[1] - r], + [center[0] + r, center[1] + r], + [center[0] - r, center[1] + r], + [center[0] - r, center[1] - r], + ], + ]) + ) + ); } -const smallLine = new Feature(new LineString([ - [center[0], center[1] - 1], - [center[0], center[1] + 1] -])); -smallLine.setStyle(new Style({ - zIndex: -99, - stroke: new Stroke({width: 75, color: 'red'}) -})); +const smallLine = new Feature( + new LineString([ + [center[0], center[1] - 1], + [center[0], center[1] + 1], + ]) +); +smallLine.setStyle( + new Style({ + zIndex: -99, + stroke: new Stroke({width: 75, color: 'red'}), + }) +); smallLine.getGeometry().translate(-1000, 1000); source1.addFeature(smallLine); addPolygon(100, source1); @@ -60,32 +68,36 @@ addCircle(500, source1); addPolygon(600, source1); addPolygon(720, source1); -const smallLine2 = new Feature(new LineString([ - [center[0], center[1] - 1000], - [center[0], center[1] + 1000] -])); +const smallLine2 = new Feature( + new LineString([ + [center[0], center[1] - 1000], + [center[0], center[1] + 1000], + ]) +); smallLine2.setStyle([ new Style({ - stroke: new Stroke({width: 35, color: 'blue'}) + stroke: new Stroke({width: 35, color: 'blue'}), }), new Style({ - stroke: new Stroke({width: 15, color: 'green'}) - }) + stroke: new Stroke({width: 15, color: 'green'}), + }), ]); smallLine2.getGeometry().translate(1000, 1000); source1.addFeature(smallLine2); -const smallLine3 = new Feature(new LineString([ - [center[0], center[1] - 1], - [center[0], center[1] + 1] -])); +const smallLine3 = new Feature( + new LineString([ + [center[0], center[1] - 1], + [center[0], center[1] + 1], + ]) +); smallLine3.setStyle([ new Style({ - stroke: new Stroke({width: 75, color: 'red'}) + stroke: new Stroke({width: 75, color: 'red'}), }), new Style({ - stroke: new Stroke({width: 45, color: 'white'}) - }) + stroke: new Stroke({width: 45, color: 'white'}), + }), ]); smallLine3.getGeometry().translate(-1000, -1000); @@ -94,15 +106,12 @@ addCircle(1000, source2); source2.addFeature(smallLine3); const map = new Map({ - layers: [ - vectorLayer1, - vectorLayer2 - ], + layers: [vectorLayer1, vectorLayer2], target: 'map', view: new View({ center: center, - zoom: 13 - }) + zoom: 13, + }), }); map.getView().setRotation(Math.PI + Math.PI / 4); diff --git a/rendering/cases/layer-vectortile-rendermode-vector/main.js b/rendering/cases/layer-vectortile-rendermode-vector/main.js index 0d136106df..e0c41558d9 100644 --- a/rendering/cases/layer-vectortile-rendermode-vector/main.js +++ b/rendering/cases/layer-vectortile-rendermode-vector/main.js @@ -1,10 +1,10 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import VectorTileSource from '../../../src/ol/source/VectorTile.js'; import MVT from '../../../src/ol/format/MVT.js'; -import {createXYZ} from '../../../src/ol/tilegrid.js'; +import Map from '../../../src/ol/Map.js'; import VectorTileLayer from '../../../src/ol/layer/VectorTile.js'; import VectorTileRenderType from '../../../src/ol/layer/VectorTileRenderType.js'; +import VectorTileSource from '../../../src/ol/source/VectorTile.js'; +import View from '../../../src/ol/View.js'; +import {createXYZ} from '../../../src/ol/tilegrid.js'; new Map({ layers: [ @@ -14,18 +14,18 @@ new Map({ format: new MVT(), tileGrid: createXYZ(), url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf', - transition: 0 - }) - }) + transition: 0, + }), + }), ], target: 'map', view: new View({ center: [1825927.7316762917, 6143091.089223046], - zoom: 14 - }) + zoom: 14, + }), }); render({ message: 'Vector tile layer renders with vector render mode', - tolerance: 0.01 + tolerance: 0.01, }); diff --git a/rendering/cases/layer-vectortile-rotate-hidpi/main.js b/rendering/cases/layer-vectortile-rotate-hidpi/main.js index 8fee48b26b..67ed651a06 100644 --- a/rendering/cases/layer-vectortile-rotate-hidpi/main.js +++ b/rendering/cases/layer-vectortile-rotate-hidpi/main.js @@ -1,9 +1,9 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import VectorTileSource from '../../../src/ol/source/VectorTile.js'; import MVT from '../../../src/ol/format/MVT.js'; -import {createXYZ} from '../../../src/ol/tilegrid.js'; +import Map from '../../../src/ol/Map.js'; import VectorTileLayer from '../../../src/ol/layer/VectorTile.js'; +import VectorTileSource from '../../../src/ol/source/VectorTile.js'; +import View from '../../../src/ol/View.js'; +import {createXYZ} from '../../../src/ol/tilegrid.js'; const map = new Map({ pixelRatio: 2, @@ -13,19 +13,19 @@ const map = new Map({ format: new MVT(), tileGrid: createXYZ(), url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf', - transition: 0 - }) - }) + transition: 0, + }), + }), ], target: 'map', view: new View({ center: [1825927.7316762917, 6143091.089223046], - zoom: 14 - }) + zoom: 14, + }), }); map.getView().setRotation(Math.PI / 4); render({ message: 'Vector tile layer rotates (hidip)', - tolerance: 0.01 + tolerance: 0.01, }); diff --git a/rendering/cases/layer-vectortile-rotate-vector/main.js b/rendering/cases/layer-vectortile-rotate-vector/main.js index 1b0cb77ee0..a7febf5779 100644 --- a/rendering/cases/layer-vectortile-rotate-vector/main.js +++ b/rendering/cases/layer-vectortile-rotate-vector/main.js @@ -1,21 +1,19 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import VectorTileSource from '../../../src/ol/source/VectorTile.js'; -import MVT from '../../../src/ol/format/MVT.js'; -import {createXYZ} from '../../../src/ol/tilegrid.js'; -import VectorTileLayer from '../../../src/ol/layer/VectorTile.js'; -import VectorSource from '../../../src/ol/source/Vector.js'; -import Feature from '../../../src/ol/Feature.js'; -import Point from '../../../src/ol/geom/Point.js'; -import VectorLayer from '../../../src/ol/layer/Vector.js'; -import Style from '../../../src/ol/style/Style.js'; import CircleStyle from '../../../src/ol/style/Circle.js'; +import Feature from '../../../src/ol/Feature.js'; import Fill from '../../../src/ol/style/Fill.js'; +import MVT from '../../../src/ol/format/MVT.js'; +import Map from '../../../src/ol/Map.js'; +import Point from '../../../src/ol/geom/Point.js'; +import Style from '../../../src/ol/style/Style.js'; +import VectorLayer from '../../../src/ol/layer/Vector.js'; +import VectorSource from '../../../src/ol/source/Vector.js'; +import VectorTileLayer from '../../../src/ol/layer/VectorTile.js'; +import VectorTileSource from '../../../src/ol/source/VectorTile.js'; +import View from '../../../src/ol/View.js'; +import {createXYZ} from '../../../src/ol/tilegrid.js'; const vectorSource = new VectorSource({ - features: [ - new Feature(new Point([1825727.7316762917, 6143091.089223046])) - ] + features: [new Feature(new Point([1825727.7316762917, 6143091.089223046]))], }); const layer = new VectorLayer({ zIndex: 1, @@ -24,10 +22,10 @@ const layer = new VectorLayer({ image: new CircleStyle({ radius: 10, fill: new Fill({ - color: 'red' - }) - }) - }) + color: 'red', + }), + }), + }), }); new Map({ @@ -38,16 +36,16 @@ new Map({ format: new MVT(), tileGrid: createXYZ(), url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf', - transition: 0 - }) - }) + transition: 0, + }), + }), ], target: 'map', view: new View({ center: [1825927.7316762917, 6143091.089223046], zoom: 14, - rotation: Math.PI / 4 - }) + rotation: Math.PI / 4, + }), }); render({message: 'Vector tile layer rotates with vector layer on top'}); diff --git a/rendering/cases/layer-vectortile-rotate/main.js b/rendering/cases/layer-vectortile-rotate/main.js index 3c81eac1f9..c8aa853f0e 100644 --- a/rendering/cases/layer-vectortile-rotate/main.js +++ b/rendering/cases/layer-vectortile-rotate/main.js @@ -1,9 +1,9 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import VectorTileSource from '../../../src/ol/source/VectorTile.js'; import MVT from '../../../src/ol/format/MVT.js'; -import {createXYZ} from '../../../src/ol/tilegrid.js'; +import Map from '../../../src/ol/Map.js'; import VectorTileLayer from '../../../src/ol/layer/VectorTile.js'; +import VectorTileSource from '../../../src/ol/source/VectorTile.js'; +import View from '../../../src/ol/View.js'; +import {createXYZ} from '../../../src/ol/tilegrid.js'; const map = new Map({ layers: [ @@ -12,15 +12,15 @@ const map = new Map({ format: new MVT(), tileGrid: createXYZ(), url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf', - transition: 0 - }) - }) + transition: 0, + }), + }), ], target: 'map', view: new View({ center: [1825927.7316762917, 6143091.089223046], - zoom: 14 - }) + zoom: 14, + }), }); map.getView().setRotation(Math.PI / 4); diff --git a/rendering/cases/layer-vectortile-simple/main.js b/rendering/cases/layer-vectortile-simple/main.js index e074fdfd13..8062f51340 100644 --- a/rendering/cases/layer-vectortile-simple/main.js +++ b/rendering/cases/layer-vectortile-simple/main.js @@ -1,9 +1,9 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import VectorTileSource from '../../../src/ol/source/VectorTile.js'; import MVT from '../../../src/ol/format/MVT.js'; -import {createXYZ} from '../../../src/ol/tilegrid.js'; +import Map from '../../../src/ol/Map.js'; import VectorTileLayer from '../../../src/ol/layer/VectorTile.js'; +import VectorTileSource from '../../../src/ol/source/VectorTile.js'; +import View from '../../../src/ol/View.js'; +import {createXYZ} from '../../../src/ol/tilegrid.js'; new Map({ layers: [ @@ -12,18 +12,18 @@ new Map({ format: new MVT(), tileGrid: createXYZ(), url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf', - transition: 0 - }) - }) + transition: 0, + }), + }), ], target: 'map', view: new View({ center: [1825927.7316762917, 6143091.089223046], - zoom: 14 - }) + zoom: 14, + }), }); render({ message: 'Vector tile layer renders', - tolerance: 0.01 + tolerance: 0.01, }); diff --git a/rendering/cases/linestring-style-css-filter/main.js b/rendering/cases/linestring-style-css-filter/main.js index 654a021118..ed5b469d36 100644 --- a/rendering/cases/linestring-style-css-filter/main.js +++ b/rendering/cases/linestring-style-css-filter/main.js @@ -1,70 +1,86 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; - +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); let feature; feature = new Feature({ - geometry: new LineString([[-60, 60], [45, 60]]) + geometry: new LineString([ + [-60, 60], + [45, 60], + ]), }); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new LineString([[-60, -50], [30, 10]]) + geometry: new LineString([ + [-60, -50], + [30, 10], + ]), }); -feature.setStyle(new Style({ - stroke: new Stroke({color: '#f00', width: 3}) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new LineString([[-110, -100], [0, 100], [100, -90]]) -}); -feature.setStyle(new Style({ - stroke: new Stroke({ - color: 'rgba(55, 55, 55, 0.75)', - width: 5, - lineCap: 'square', - lineDash: [4, 8], - lineJoin: 'round' +feature.setStyle( + new Style({ + stroke: new Stroke({color: '#f00', width: 3}), }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new LineString([[-80, 80], [80, 80], [-40, -90]]) + geometry: new LineString([ + [-110, -100], + [0, 100], + [100, -90], + ]), +}); +feature.setStyle( + new Style({ + stroke: new Stroke({ + color: 'rgba(55, 55, 55, 0.75)', + width: 5, + lineCap: 'square', + lineDash: [4, 8], + lineJoin: 'round', + }), + }) +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new LineString([ + [-80, 80], + [80, 80], + [-40, -90], + ]), }); feature.setStyle([ new Style({ - stroke: new Stroke({color: '#F2F211', width: 5}) + stroke: new Stroke({color: '#F2F211', width: 5}), }), new Style({ - stroke: new Stroke({color: '#292921', width: 1}) - }) + stroke: new Stroke({color: '#292921', width: 1}), + }), ]); vectorSource.addFeature(feature); - new Map({ pixelRatio: 1, layers: [ new VectorLayer({ className: 'bw', - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], - resolution: 1 - }) + resolution: 1, + }), }); render(); diff --git a/rendering/cases/linestring-style-opacity/main.js b/rendering/cases/linestring-style-opacity/main.js index 710ef11bec..54b1da06cb 100644 --- a/rendering/cases/linestring-style-opacity/main.js +++ b/rendering/cases/linestring-style-opacity/main.js @@ -1,70 +1,86 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; - +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); let feature; feature = new Feature({ - geometry: new LineString([[-60, 60], [45, 60]]) + geometry: new LineString([ + [-60, 60], + [45, 60], + ]), }); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new LineString([[-60, -50], [30, 10]]) + geometry: new LineString([ + [-60, -50], + [30, 10], + ]), }); -feature.setStyle(new Style({ - stroke: new Stroke({color: '#f00', width: 3}) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new LineString([[-110, -100], [0, 100], [100, -90]]) -}); -feature.setStyle(new Style({ - stroke: new Stroke({ - color: 'rgba(55, 55, 55, 0.75)', - width: 5, - lineCap: 'square', - lineDash: [4, 8], - lineJoin: 'round' +feature.setStyle( + new Style({ + stroke: new Stroke({color: '#f00', width: 3}), }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new LineString([[-80, 80], [80, 80], [-40, -90]]) + geometry: new LineString([ + [-110, -100], + [0, 100], + [100, -90], + ]), +}); +feature.setStyle( + new Style({ + stroke: new Stroke({ + color: 'rgba(55, 55, 55, 0.75)', + width: 5, + lineCap: 'square', + lineDash: [4, 8], + lineJoin: 'round', + }), + }) +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new LineString([ + [-80, 80], + [80, 80], + [-40, -90], + ]), }); feature.setStyle([ new Style({ - stroke: new Stroke({color: '#F2F211', width: 5}) + stroke: new Stroke({color: '#F2F211', width: 5}), }), new Style({ - stroke: new Stroke({color: '#292921', width: 1}) - }) + stroke: new Stroke({color: '#292921', width: 1}), + }), ]); vectorSource.addFeature(feature); - new Map({ pixelRatio: 1, layers: [ new VectorLayer({ opacity: 0.5, - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], - resolution: 1 - }) + resolution: 1, + }), }); render(); diff --git a/rendering/cases/linestring-style-rotation/main.js b/rendering/cases/linestring-style-rotation/main.js index 135be9bbb8..a7d4018e10 100644 --- a/rendering/cases/linestring-style-rotation/main.js +++ b/rendering/cases/linestring-style-rotation/main.js @@ -1,70 +1,86 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; - +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); let feature; feature = new Feature({ - geometry: new LineString([[-60, 60], [45, 60]]) + geometry: new LineString([ + [-60, 60], + [45, 60], + ]), }); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new LineString([[-60, -50], [30, 10]]) + geometry: new LineString([ + [-60, -50], + [30, 10], + ]), }); -feature.setStyle(new Style({ - stroke: new Stroke({color: '#f00', width: 3}) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new LineString([[-110, -100], [0, 100], [100, -90]]) -}); -feature.setStyle(new Style({ - stroke: new Stroke({ - color: 'rgba(55, 55, 55, 0.75)', - width: 5, - lineCap: 'square', - lineDash: [4, 8], - lineJoin: 'round' +feature.setStyle( + new Style({ + stroke: new Stroke({color: '#f00', width: 3}), }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new LineString([[-80, 80], [80, 80], [-40, -90]]) + geometry: new LineString([ + [-110, -100], + [0, 100], + [100, -90], + ]), +}); +feature.setStyle( + new Style({ + stroke: new Stroke({ + color: 'rgba(55, 55, 55, 0.75)', + width: 5, + lineCap: 'square', + lineDash: [4, 8], + lineJoin: 'round', + }), + }) +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new LineString([ + [-80, 80], + [80, 80], + [-40, -90], + ]), }); feature.setStyle([ new Style({ - stroke: new Stroke({color: '#F2F211', width: 5}) + stroke: new Stroke({color: '#F2F211', width: 5}), }), new Style({ - stroke: new Stroke({color: '#292921', width: 1}) - }) + stroke: new Stroke({color: '#292921', width: 1}), + }), ]); vectorSource.addFeature(feature); - new Map({ pixelRatio: 1, layers: [ new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], resolution: 1, - rotation: Math.PI / 4 - }) + rotation: Math.PI / 4, + }), }); render({tolerance: 0.01}); diff --git a/rendering/cases/linestring-style/main.js b/rendering/cases/linestring-style/main.js index 800659c76f..04032c21fb 100644 --- a/rendering/cases/linestring-style/main.js +++ b/rendering/cases/linestring-style/main.js @@ -1,69 +1,85 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; - +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); let feature; feature = new Feature({ - geometry: new LineString([[-60, 60], [45, 60]]) + geometry: new LineString([ + [-60, 60], + [45, 60], + ]), }); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new LineString([[-60, -50], [30, 10]]) + geometry: new LineString([ + [-60, -50], + [30, 10], + ]), }); -feature.setStyle(new Style({ - stroke: new Stroke({color: '#f00', width: 3}) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new LineString([[-110, -100], [0, 100], [100, -90]]) -}); -feature.setStyle(new Style({ - stroke: new Stroke({ - color: 'rgba(55, 55, 55, 0.75)', - width: 5, - lineCap: 'square', - lineDash: [4, 8], - lineJoin: 'round' +feature.setStyle( + new Style({ + stroke: new Stroke({color: '#f00', width: 3}), }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new LineString([[-80, 80], [80, 80], [-40, -90]]) + geometry: new LineString([ + [-110, -100], + [0, 100], + [100, -90], + ]), +}); +feature.setStyle( + new Style({ + stroke: new Stroke({ + color: 'rgba(55, 55, 55, 0.75)', + width: 5, + lineCap: 'square', + lineDash: [4, 8], + lineJoin: 'round', + }), + }) +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new LineString([ + [-80, 80], + [80, 80], + [-40, -90], + ]), }); feature.setStyle([ new Style({ - stroke: new Stroke({color: '#F2F211', width: 5}) + stroke: new Stroke({color: '#F2F211', width: 5}), }), new Style({ - stroke: new Stroke({color: '#292921', width: 1}) - }) + stroke: new Stroke({color: '#292921', width: 1}), + }), ]); vectorSource.addFeature(feature); - new Map({ pixelRatio: 1, layers: [ new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], - resolution: 1 - }) + resolution: 1, + }), }); render(); diff --git a/rendering/cases/map-pan/main.js b/rendering/cases/map-pan/main.js index 69334de26c..ac09f2eef4 100644 --- a/rendering/cases/map-pan/main.js +++ b/rendering/cases/map-pan/main.js @@ -1,9 +1,9 @@ import Feature from '../../../src/ol/Feature.js'; -import Point from '../../../src/ol/geom/Point.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; +import Point from '../../../src/ol/geom/Point.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; +import View from '../../../src/ol/View.js'; const map = new Map({ pixelRatio: 1, @@ -11,18 +11,20 @@ const map = new Map({ layers: [ new VectorLayer({ source: new VectorSource({ - features: [new Feature({ - geometry: new Point([0, 0]) - })] - }) - }) + features: [ + new Feature({ + geometry: new Point([0, 0]), + }), + ], + }), + }), ], view: new View({ projection: 'EPSG:4326', center: [0, 0], resolution: 1, - multiWorld: true - }) + multiWorld: true, + }), }); map.getView().setCenter([10, 10]); diff --git a/rendering/cases/map-text-align/main.js b/rendering/cases/map-text-align/main.js index 723ac2dabc..446a2dce6b 100644 --- a/rendering/cases/map-text-align/main.js +++ b/rendering/cases/map-text-align/main.js @@ -1,24 +1,23 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; -import {fromLonLat} from '../../../src/ol/proj.js'; +import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; - +import {fromLonLat} from '../../../src/ol/proj.js'; new Map({ layers: [ new TileLayer({ source: new XYZ({ - url: '/data/tiles/satellite/{z}/{x}/{y}.jpg' - }) - }) + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', + }), + }), ], target: 'map', view: new View({ rotation: Math.PI / 3, center: fromLonLat([8.6, 50.1]), - zoom: 3 - }) + zoom: 3, + }), }); render(); diff --git a/rendering/cases/map/main.js b/rendering/cases/map/main.js index 21b9d0c36f..ebed216202 100644 --- a/rendering/cases/map/main.js +++ b/rendering/cases/map/main.js @@ -1,9 +1,9 @@ import Feature from '../../../src/ol/Feature.js'; -import Point from '../../../src/ol/geom/Point.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; +import Point from '../../../src/ol/geom/Point.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; +import View from '../../../src/ol/View.js'; new Map({ pixelRatio: 1, @@ -11,17 +11,19 @@ new Map({ layers: [ new VectorLayer({ source: new VectorSource({ - features: [new Feature({ - geometry: new Point([0, 0]) - })] - }) - }) + features: [ + new Feature({ + geometry: new Point([0, 0]), + }), + ], + }), + }), ], view: new View({ projection: 'EPSG:4326', center: [0, 0], - resolution: 1 - }) + resolution: 1, + }), }); render(); diff --git a/rendering/cases/multiple-layers/main.js b/rendering/cases/multiple-layers/main.js index 0d2df97582..fd1e59cfc2 100644 --- a/rendering/cases/multiple-layers/main.js +++ b/rendering/cases/multiple-layers/main.js @@ -1,11 +1,14 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js'; -import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; -import GeoJSON from '../../../src/ol/format/GeoJSON.js'; -import {Style, Stroke} from '../../../src/ol/style.js'; import Feature from '../../../src/ol/Feature.js'; +import GeoJSON from '../../../src/ol/format/GeoJSON.js'; +import Map from '../../../src/ol/Map.js'; import Point from '../../../src/ol/geom/Point.js'; +import View from '../../../src/ol/View.js'; +import {Stroke, Style} from '../../../src/ol/style.js'; +import { + Tile as TileLayer, + Vector as VectorLayer, +} from '../../../src/ol/layer.js'; +import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; const map = new Map({ layers: [ @@ -14,32 +17,32 @@ const map = new Map({ style: new Style({ stroke: new Stroke({ color: 'rgba(255,255,255,0.5)', - width: 0.75 - }) + width: 0.75, + }), }), source: new VectorSource({ url: '/data/countries.json', - format: new GeoJSON() - }) + format: new GeoJSON(), + }), }), new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - maxZoom: 3 - }) - }) + maxZoom: 3, + }), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const unmanaged = new VectorLayer({ source: new VectorSource({ - features: [new Feature(new Point([0, 0]))] - }) + features: [new Feature(new Point([0, 0]))], + }), }); unmanaged.setMap(map); diff --git a/rendering/cases/multipoint-style/main.js b/rendering/cases/multipoint-style/main.js index a3e61c5b89..3dfd901872 100644 --- a/rendering/cases/multipoint-style/main.js +++ b/rendering/cases/multipoint-style/main.js @@ -1,169 +1,185 @@ +import CircleStyle from '../../../src/ol/style/Circle.js'; import Feature from '../../../src/ol/Feature.js'; -import MultiPoint from '../../../src/ol/geom/MultiPoint.js'; +import Fill from '../../../src/ol/style/Fill.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; +import MultiPoint from '../../../src/ol/geom/MultiPoint.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import CircleStyle from '../../../src/ol/style/Circle.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); let feature; feature = new Feature({ - geometry: new MultiPoint([[-20, 18]]) + geometry: new MultiPoint([[-20, 18]]), }); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 2, - fill: new Fill({ - color: '#91E339' - }) - }) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new MultiPoint([[-10, 18]]) -}); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 4, - fill: new Fill({ - color: '#5447E6' - }) - }) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new MultiPoint([[4, 18]]) -}); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 6, - fill: new Fill({ - color: '#92A8A6' - }) - }) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new MultiPoint([[-20, 3]]) -}); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 2, - fill: new Fill({ - color: '#91E339' +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 2, + fill: new Fill({ + color: '#91E339', + }), }), - stroke: new Stroke({ - color: '#000000', - width: 1 - }) }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new MultiPoint([[-10, 3]]) + geometry: new MultiPoint([[-10, 18]]), }); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 4, - fill: new Fill({ - color: '#5447E6' +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 4, + fill: new Fill({ + color: '#5447E6', + }), }), - stroke: new Stroke({ - color: '#000000', - width: 2 - }) }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new MultiPoint([[4, 3]]) + geometry: new MultiPoint([[4, 18]]), }); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 6, - fill: new Fill({ - color: '#92A8A6' +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 6, + fill: new Fill({ + color: '#92A8A6', + }), }), - stroke: new Stroke({ - color: '#000000', - width: 3 - }) }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new MultiPoint([[-20, -15]]) + geometry: new MultiPoint([[-20, 3]]), }); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 2, - stroke: new Stroke({ - color: '#256308', - width: 1 - }) - }) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new MultiPoint([[-10, -15]]) -}); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 4, - fill: new Fill({ - color: 'rgba(0, 0, 255, 0.3)' +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 2, + fill: new Fill({ + color: '#91E339', + }), + stroke: new Stroke({ + color: '#000000', + width: 1, + }), }), - stroke: new Stroke({ - color: '#256308', - width: 2 - }) }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new MultiPoint([[4, -15]]) + geometry: new MultiPoint([[-10, 3]]), }); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 6, - fill: new Fill({ - color: 'rgba(235, 45, 70, 0.6)' +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 4, + fill: new Fill({ + color: '#5447E6', + }), + stroke: new Stroke({ + color: '#000000', + width: 2, + }), }), - stroke: new Stroke({ - color: '#256308', - width: 3 - }) }) -})); +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new MultiPoint([[4, 3]]), +}); +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 6, + fill: new Fill({ + color: '#92A8A6', + }), + stroke: new Stroke({ + color: '#000000', + width: 3, + }), + }), + }) +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new MultiPoint([[-20, -15]]), +}); +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 2, + stroke: new Stroke({ + color: '#256308', + width: 1, + }), + }), + }) +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new MultiPoint([[-10, -15]]), +}); +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 4, + fill: new Fill({ + color: 'rgba(0, 0, 255, 0.3)', + }), + stroke: new Stroke({ + color: '#256308', + width: 2, + }), + }), + }) +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new MultiPoint([[4, -15]]), +}); +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 6, + fill: new Fill({ + color: 'rgba(235, 45, 70, 0.6)', + }), + stroke: new Stroke({ + color: '#256308', + width: 3, + }), + }), + }) +); vectorSource.addFeature(feature); const vectorLayer = new VectorLayer({ - source: vectorSource + source: vectorSource, }); new Map({ - layers: [ - vectorLayer - ], + layers: [vectorLayer], target: 'map', view: new View({ projection: 'EPSG:4326', center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); render(); diff --git a/rendering/cases/point-style/main.js b/rendering/cases/point-style/main.js index 7f1e425396..a07aad2fc4 100644 --- a/rendering/cases/point-style/main.js +++ b/rendering/cases/point-style/main.js @@ -1,169 +1,185 @@ +import CircleStyle from '../../../src/ol/style/Circle.js'; import Feature from '../../../src/ol/Feature.js'; -import Point from '../../../src/ol/geom/Point.js'; +import Fill from '../../../src/ol/style/Fill.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; +import Point from '../../../src/ol/geom/Point.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import CircleStyle from '../../../src/ol/style/Circle.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); let feature; feature = new Feature({ - geometry: new Point([-20, 18]) + geometry: new Point([-20, 18]), }); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 2, - fill: new Fill({ - color: '#91E339' - }) - }) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new Point([-10, 18]) -}); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 4, - fill: new Fill({ - color: '#5447E6' - }) - }) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new Point([4, 18]) -}); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 6, - fill: new Fill({ - color: '#92A8A6' - }) - }) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new Point([-20, 3]) -}); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 2, - fill: new Fill({ - color: '#91E339' +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 2, + fill: new Fill({ + color: '#91E339', + }), }), - stroke: new Stroke({ - color: '#000000', - width: 1 - }) }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new Point([-10, 3]) + geometry: new Point([-10, 18]), }); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 4, - fill: new Fill({ - color: '#5447E6' +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 4, + fill: new Fill({ + color: '#5447E6', + }), }), - stroke: new Stroke({ - color: '#000000', - width: 2 - }) }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new Point([4, 3]) + geometry: new Point([4, 18]), }); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 6, - fill: new Fill({ - color: '#92A8A6' +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 6, + fill: new Fill({ + color: '#92A8A6', + }), }), - stroke: new Stroke({ - color: '#000000', - width: 3 - }) }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new Point([-20, -15]) + geometry: new Point([-20, 3]), }); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 2, - stroke: new Stroke({ - color: '#256308', - width: 1 - }) - }) -})); -vectorSource.addFeature(feature); - -feature = new Feature({ - geometry: new Point([-10, -15]) -}); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 4, - fill: new Fill({ - color: 'rgba(0, 0, 255, 0.3)' +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 2, + fill: new Fill({ + color: '#91E339', + }), + stroke: new Stroke({ + color: '#000000', + width: 1, + }), }), - stroke: new Stroke({ - color: '#256308', - width: 2 - }) }) -})); +); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new Point([4, -15]) + geometry: new Point([-10, 3]), }); -feature.setStyle(new Style({ - image: new CircleStyle({ - radius: 6, - fill: new Fill({ - color: 'rgba(235, 45, 70, 0.6)' +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 4, + fill: new Fill({ + color: '#5447E6', + }), + stroke: new Stroke({ + color: '#000000', + width: 2, + }), }), - stroke: new Stroke({ - color: '#256308', - width: 3 - }) }) -})); +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new Point([4, 3]), +}); +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 6, + fill: new Fill({ + color: '#92A8A6', + }), + stroke: new Stroke({ + color: '#000000', + width: 3, + }), + }), + }) +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new Point([-20, -15]), +}); +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 2, + stroke: new Stroke({ + color: '#256308', + width: 1, + }), + }), + }) +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new Point([-10, -15]), +}); +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 4, + fill: new Fill({ + color: 'rgba(0, 0, 255, 0.3)', + }), + stroke: new Stroke({ + color: '#256308', + width: 2, + }), + }), + }) +); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new Point([4, -15]), +}); +feature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 6, + fill: new Fill({ + color: 'rgba(235, 45, 70, 0.6)', + }), + stroke: new Stroke({ + color: '#256308', + width: 3, + }), + }), + }) +); vectorSource.addFeature(feature); const vectorLayer = new VectorLayer({ - source: vectorSource + source: vectorSource, }); new Map({ - layers: [ - vectorLayer - ], + layers: [vectorLayer], target: 'map', view: new View({ projection: 'EPSG:4326', center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); render(); diff --git a/rendering/cases/polygon-style-gradient-pattern/main.js b/rendering/cases/polygon-style-gradient-pattern/main.js index 7c01b61d81..70035139f0 100644 --- a/rendering/cases/polygon-style-gradient-pattern/main.js +++ b/rendering/cases/polygon-style-gradient-pattern/main.js @@ -1,13 +1,12 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; +import Fill from '../../../src/ol/style/Fill.js'; +import Map from '../../../src/ol/Map.js'; import Polygon from '../../../src/ol/geom/Polygon.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Style from '../../../src/ol/style/Style.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; - +import View from '../../../src/ol/View.js'; // create gradient const canvas = document.createElement('canvas'); @@ -34,51 +33,84 @@ context.arc(5, 5, 2, 0, 2 * Math.PI); context.fill(); const pattern = context.createPattern(canvas, 'repeat'); - const vectorSource = new VectorSource(); let feature; // rectangle with 1 hole feature = new Feature({ geometry: new Polygon([ - [[-22.5, -5], [-22.5, 35], [37.5, 35], [37.5, -5], [-22.5, -5]], - [[-2.5, 7], [17.5, 7], [17.5, 23], [-2.5, 23], [-2.5, 7]] - ]) + [ + [-22.5, -5], + [-22.5, 35], + [37.5, 35], + [37.5, -5], + [-22.5, -5], + ], + [ + [-2.5, 7], + [17.5, 7], + [17.5, 23], + [-2.5, 23], + [-2.5, 7], + ], + ]), }); -feature.setStyle(new Style({ - fill: new Fill({color: pattern}), - stroke: new Stroke({color: gradient, width: 3}) -})); +feature.setStyle( + new Style({ + fill: new Fill({color: pattern}), + stroke: new Stroke({color: gradient, width: 3}), + }) +); vectorSource.addFeature(feature); // rectangle with 2 holes feature = new Feature({ geometry: new Polygon([ - [[-37.5, -32.5], [-37.5, 17.5], [32.5, 17.5], [32.5, -32.5], [-37.5, -32.5]], - [[-33.5, -28.5], [-21.5, -28.5], [-21.5, -16.5], [-33.5, -16.5], [-33.5, -28.5]], - [[12.5, -28.5], [26.5, -28.5], [26.5, -16.5], [12.5, -16.5], [12.5, -28.5]] - ]) + [ + [-37.5, -32.5], + [-37.5, 17.5], + [32.5, 17.5], + [32.5, -32.5], + [-37.5, -32.5], + ], + [ + [-33.5, -28.5], + [-21.5, -28.5], + [-21.5, -16.5], + [-33.5, -16.5], + [-33.5, -28.5], + ], + [ + [12.5, -28.5], + [26.5, -28.5], + [26.5, -16.5], + [12.5, -16.5], + [12.5, -28.5], + ], + ]), }); -feature.setStyle(new Style({ - fill: new Fill({color: gradient}), - stroke: new Stroke({color: pattern, width: 5}) -})); +feature.setStyle( + new Style({ + fill: new Fill({color: gradient}), + stroke: new Stroke({color: pattern, width: 5}), + }) +); vectorSource.addFeature(feature); new Map({ pixelRatio: 1, layers: [ new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], - resolution: 1 - }) + resolution: 1, + }), }); render(); diff --git a/rendering/cases/polygon-style/main.js b/rendering/cases/polygon-style/main.js index 1e85099865..58f415539d 100644 --- a/rendering/cases/polygon-style/main.js +++ b/rendering/cases/polygon-style/main.js @@ -1,12 +1,12 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; +import Fill from '../../../src/ol/style/Fill.js'; +import Map from '../../../src/ol/Map.js'; import Polygon from '../../../src/ol/geom/Polygon.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Style from '../../../src/ol/style/Style.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); let feature; @@ -14,87 +14,153 @@ let feature; // rectangle with 1 hole feature = new Feature({ geometry: new Polygon([ - [[-102.5, 75], [-102.5, 115], [-42.5, 115], [-42.5, 75], [-102.5, 75]], - [[-82.5, 87], [-62.5, 87], [-62.5, 103], [-82.5, 103], [-82.5, 87]] - ]) + [ + [-102.5, 75], + [-102.5, 115], + [-42.5, 115], + [-42.5, 75], + [-102.5, 75], + ], + [ + [-82.5, 87], + [-62.5, 87], + [-62.5, 103], + [-82.5, 103], + [-82.5, 87], + ], + ]), }); -feature.setStyle(new Style({ - stroke: new Stroke({ - width: 4, - color: '#000', - lineJoin: 'round', - lineCap: 'butt' +feature.setStyle( + new Style({ + stroke: new Stroke({ + width: 4, + color: '#000', + lineJoin: 'round', + lineCap: 'butt', + }), }) -})); +); vectorSource.addFeature(feature); // rectangle with 2 holes feature = new Feature({ geometry: new Polygon([ - [[-117.5, 47.5], [-117.5, 97.5], [-47.5, 97.5], [-47.5, 47.5], [-117.5, 47.5]], - [[-113.5, 51.5], [-101.5, 51.5], [-101.5, 63.5], [-113.5, 63.5], [-113.5, 51.5]], - [[-67.5, 51.5], [-53.5, 51.5], [-53.5, 63.5], [-67.5, 63.5], [-67.5, 51.5]] - ]) + [ + [-117.5, 47.5], + [-117.5, 97.5], + [-47.5, 97.5], + [-47.5, 47.5], + [-117.5, 47.5], + ], + [ + [-113.5, 51.5], + [-101.5, 51.5], + [-101.5, 63.5], + [-113.5, 63.5], + [-113.5, 51.5], + ], + [ + [-67.5, 51.5], + [-53.5, 51.5], + [-53.5, 63.5], + [-67.5, 63.5], + [-67.5, 51.5], + ], + ]), }); -feature.setStyle(new Style({ - zIndex: -1, - fill: new Fill({ - color: '#1A5E42' - }), - stroke: new Stroke({ - color: '#9696EB', - width: 3 +feature.setStyle( + new Style({ + zIndex: -1, + fill: new Fill({ + color: '#1A5E42', + }), + stroke: new Stroke({ + color: '#9696EB', + width: 3, + }), }) -})); +); vectorSource.addFeature(feature); - // rectangle with 1 hole feature = new Feature({ geometry: new Polygon([ - [[-22.5, -5], [-22.5, 35], [37.5, 35], [37.5, -5], [-22.5, -5]], - [[-2.5, 7], [17.5, 7], [17.5, 23], [-2.5, 23], [-2.5, 7]] - ]) + [ + [-22.5, -5], + [-22.5, 35], + [37.5, 35], + [37.5, -5], + [-22.5, -5], + ], + [ + [-2.5, 7], + [17.5, 7], + [17.5, 23], + [-2.5, 23], + [-2.5, 7], + ], + ]), }); -feature.setStyle(new Style({ - stroke: new Stroke({ - width: 3, - color: '#777', - lineDash: [2, 4] +feature.setStyle( + new Style({ + stroke: new Stroke({ + width: 3, + color: '#777', + lineDash: [2, 4], + }), }) -})); +); vectorSource.addFeature(feature); // rectangle with 2 holes feature = new Feature({ geometry: new Polygon([ - [[-37.5, -32.5], [-37.5, 17.5], [32.5, 17.5], [32.5, -32.5], [-37.5, -32.5]], - [[-33.5, -28.5], [-21.5, -28.5], [-21.5, -16.5], [-33.5, -16.5], [-33.5, -28.5]], - [[12.5, -28.5], [26.5, -28.5], [26.5, -16.5], [12.5, -16.5], [12.5, -28.5]] - ]) + [ + [-37.5, -32.5], + [-37.5, 17.5], + [32.5, 17.5], + [32.5, -32.5], + [-37.5, -32.5], + ], + [ + [-33.5, -28.5], + [-21.5, -28.5], + [-21.5, -16.5], + [-33.5, -16.5], + [-33.5, -28.5], + ], + [ + [12.5, -28.5], + [26.5, -28.5], + [26.5, -16.5], + [12.5, -16.5], + [12.5, -28.5], + ], + ]), }); -feature.setStyle(new Style({ - fill: new Fill({ - color: 'rgba(255, 0, 0, 0.85)' +feature.setStyle( + new Style({ + fill: new Fill({ + color: 'rgba(255, 0, 0, 0.85)', + }), }) -})); +); vectorSource.addFeature(feature); - new Map({ pixelRatio: 1, layers: [ new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], - resolution: 1 - }) + resolution: 1, + }), }); render(); diff --git a/rendering/cases/regularshape-style/main.js b/rendering/cases/regularshape-style/main.js index eec94e8c25..6c201fb030 100644 --- a/rendering/cases/regularshape-style/main.js +++ b/rendering/cases/regularshape-style/main.js @@ -1,89 +1,94 @@ import Feature from '../../../src/ol/Feature.js'; -import Point from '../../../src/ol/geom/Point.js'; +import Fill from '../../../src/ol/style/Fill.js'; import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; +import Point from '../../../src/ol/geom/Point.js'; +import RegularShape from '../../../src/ol/style/RegularShape.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import RegularShape from '../../../src/ol/style/RegularShape.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); function createFeatures(stroke, fill, offSet = [0, 0]) { let feature; feature = new Feature({ - geometry: new Point([offSet[0], offSet[1]]) + geometry: new Point([offSet[0], offSet[1]]), }); // square with offset - feature.setStyle(new Style({ - image: new RegularShape({ - fill: fill, - stroke: stroke, - points: 4, - radius: 10, - angle: Math.PI / 4, - displacement: [-15, 15] + feature.setStyle( + new Style({ + image: new RegularShape({ + fill: fill, + stroke: stroke, + points: 4, + radius: 10, + angle: Math.PI / 4, + displacement: [-15, 15], + }), }) - })); + ); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new Point([8 + offSet[0], 15 + offSet[1]]) + geometry: new Point([8 + offSet[0], 15 + offSet[1]]), }); // triangle - feature.setStyle(new Style({ - image: new RegularShape({ - fill: fill, - stroke: stroke, - points: 3, - radius: 10, - rotation: Math.PI / 4, - angle: 0 + feature.setStyle( + new Style({ + image: new RegularShape({ + fill: fill, + stroke: stroke, + points: 3, + radius: 10, + rotation: Math.PI / 4, + angle: 0, + }), }) - })); + ); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new Point([-10 + offSet[0], -8 + offSet[1]]) + geometry: new Point([-10 + offSet[0], -8 + offSet[1]]), }); // star - feature.setStyle(new Style({ - image: new RegularShape({ - fill: fill, - stroke: stroke, - points: 5, - radius: 10, - radius2: 4, - angle: 0 + feature.setStyle( + new Style({ + image: new RegularShape({ + fill: fill, + stroke: stroke, + points: 5, + radius: 10, + radius2: 4, + angle: 0, + }), }) - })); + ); vectorSource.addFeature(feature); feature = new Feature({ - geometry: new Point([12 + offSet[0], -8 + offSet[1]]) + geometry: new Point([12 + offSet[0], -8 + offSet[1]]), }); // cross - feature.setStyle(new Style({ - image: new RegularShape({ - fill: fill, - stroke: stroke, - points: 4, - radius: 10, - radius2: 0, - angle: 0 + feature.setStyle( + new Style({ + image: new RegularShape({ + fill: fill, + stroke: stroke, + points: 4, + radius: 10, + radius2: 0, + angle: 0, + }), }) - })); + ); vectorSource.addFeature(feature); } -createFeatures( - new Stroke({width: 2}), - new Fill({color: 'red'}) -); +createFeatures(new Stroke({width: 2}), new Fill({color: 'red'})); createFeatures( new Stroke({ - lineDash: [10, 5] + lineDash: [10, 5], }), null, [50, 50] @@ -91,7 +96,7 @@ createFeatures( createFeatures( new Stroke({ lineDash: [10, 5], - lineDashOffset: 5 + lineDashOffset: 5, }), null, [-50, -50] @@ -100,7 +105,7 @@ createFeatures( createFeatures(new Stroke(), new Fill(), [50, -50]); const vectorLayer = new VectorLayer({ - source: vectorSource + source: vectorSource, }); new Map({ @@ -108,8 +113,8 @@ new Map({ layers: [vectorLayer], view: new View({ center: [0, 0], - resolution: 1 - }) + resolution: 1, + }), }); render(); diff --git a/rendering/cases/render-context/main.js b/rendering/cases/render-context/main.js index 0902835534..a449e61e4c 100644 --- a/rendering/cases/render-context/main.js +++ b/rendering/cases/render-context/main.js @@ -1,77 +1,126 @@ +import CircleStyle from '../../../src/ol/style/Circle.js'; +import Fill from '../../../src/ol/style/Fill.js'; import LineString from '../../../src/ol/geom/LineString.js'; import Point from '../../../src/ol/geom/Point.js'; import Polygon from '../../../src/ol/geom/Polygon.js'; -import {toContext} from '../../../src/ol/render.js'; -import CircleStyle from '../../../src/ol/style/Circle.js'; -import Fill from '../../../src/ol/style/Fill.js'; import Stroke from '../../../src/ol/style/Stroke.js'; import Style from '../../../src/ol/style/Style.js'; +import {toContext} from '../../../src/ol/render.js'; const canvas = document.getElementById('canvas'); const vectorContext = toContext(canvas.getContext('2d'), { pixelRatio: 1, - size: [200, 200] + size: [200, 200], }); -vectorContext.setStyle(new Style({ - image: new CircleStyle({ - fill: new Fill({ - color: 'green' +vectorContext.setStyle( + new Style({ + image: new CircleStyle({ + fill: new Fill({ + color: 'green', + }), + radius: 10, }), - radius: 10 }) -})); +); vectorContext.drawGeometry(new Point([100, 100])); -vectorContext.setStyle(new Style({ - stroke: new Stroke({ - lineCap: 'butt', - color: 'red', - width: 14 +vectorContext.setStyle( + new Style({ + stroke: new Stroke({ + lineCap: 'butt', + color: 'red', + width: 14, + }), }) -})); -vectorContext.drawGeometry(new LineString([ - [10, 60], [30, 40], [50, 60], [70, 40], [90, 60] -])); +); +vectorContext.drawGeometry( + new LineString([ + [10, 60], + [30, 40], + [50, 60], + [70, 40], + [90, 60], + ]) +); -vectorContext.setStyle(new Style({ - stroke: new Stroke({ - lineJoin: 'bevel', - lineCap: 'butt', - color: '#111', - width: 14 +vectorContext.setStyle( + new Style({ + stroke: new Stroke({ + lineJoin: 'bevel', + lineCap: 'butt', + color: '#111', + width: 14, + }), }) -})); -vectorContext.drawGeometry(new LineString([ - [10, 140], [30, 120], [50, 140], [70, 120], [90, 140] -])); +); +vectorContext.drawGeometry( + new LineString([ + [10, 140], + [30, 120], + [50, 140], + [70, 120], + [90, 140], + ]) +); - -vectorContext.setStyle(new Style({ - stroke: new Stroke({ - color: 'blue', - width: 6 - }), - fill: new Fill({ - color: 'rgba(0,0,255,0.5)' +vectorContext.setStyle( + new Style({ + stroke: new Stroke({ + color: 'blue', + width: 6, + }), + fill: new Fill({ + color: 'rgba(0,0,255,0.5)', + }), }) -})); +); -vectorContext.drawGeometry(new Polygon([ - [[125, 25], [175, 25], [175, 75], [125, 75], [125, 25]], - [[140, 40], [140, 60], [160, 60], [160, 40], [140, 40]] -])); +vectorContext.drawGeometry( + new Polygon([ + [ + [125, 25], + [175, 25], + [175, 75], + [125, 75], + [125, 25], + ], + [ + [140, 40], + [140, 60], + [160, 60], + [160, 40], + [140, 40], + ], + ]) +); -vectorContext.setStyle(new Style({ - stroke: new Stroke({ - lineDash: [10, 5], - lineDashOffset: 5 +vectorContext.setStyle( + new Style({ + stroke: new Stroke({ + lineDash: [10, 5], + lineDashOffset: 5, + }), }) -})); +); -vectorContext.drawGeometry(new Polygon([ - [[125, 125], [175, 125], [175, 175], [125, 175], [125, 125]], - [[140, 140], [140, 160], [160, 160], [160, 140], [140, 140]] -])); +vectorContext.drawGeometry( + new Polygon([ + [ + [125, 125], + [175, 125], + [175, 175], + [125, 175], + [125, 125], + ], + [ + [140, 140], + [140, 160], + [160, 160], + [160, 140], + [140, 140], + ], + ]) +); render(); diff --git a/rendering/cases/reproj-image/main.js b/rendering/cases/reproj-image/main.js index 98553ed21f..08444e9120 100644 --- a/rendering/cases/reproj-image/main.js +++ b/rendering/cases/reproj-image/main.js @@ -1,31 +1,30 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import Static from '../../../src/ol/source/ImageStatic.js'; -import { - get as getProjection, - transformExtent -} from '../../../src/ol/proj.js'; import ImageLayer from '../../../src/ol/layer/Image.js'; +import Map from '../../../src/ol/Map.js'; +import Static from '../../../src/ol/source/ImageStatic.js'; +import View from '../../../src/ol/View.js'; +import {get as getProjection, transformExtent} from '../../../src/ol/proj.js'; const source = new Static({ url: '/data/tiles/osm/5/5/12.png', imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'), - projection: getProjection('EPSG:3857') + projection: getProjection('EPSG:3857'), }); new Map({ pixelRatio: 1, target: 'map', - layers: [new ImageLayer({ - source: source - })], + layers: [ + new ImageLayer({ + source: source, + }), + ], view: new View({ center: [-122.416667, 37.783333], zoom: 8, - projection: 'EPSG:4326' - }) + projection: 'EPSG:4326', + }), }); render({ - tolerance: 0.001 + tolerance: 0.001, }); diff --git a/rendering/cases/reproj-tile-4326/main.js b/rendering/cases/reproj-tile-4326/main.js index bf72c74090..66a6679195 100644 --- a/rendering/cases/reproj-tile-4326/main.js +++ b/rendering/cases/reproj-tile-4326/main.js @@ -1,9 +1,9 @@ import Map from '../../../src/ol/Map.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; -import {toLonLat, get} from '../../../src/ol/proj.js'; -import {createXYZ, createForProjection} from '../../../src/ol/tilegrid.js'; +import {createForProjection, createXYZ} from '../../../src/ol/tilegrid.js'; +import {get, toLonLat} from '../../../src/ol/proj.js'; const tileGrid = createXYZ(); const extent = tileGrid.getTileCoordExtent([5, 5, 12]); @@ -13,24 +13,27 @@ const source = new XYZ({ transition: 0, minZoom: 5, maxZoom: 5, - url: '/data/tiles/osm/{z}/{x}/{y}.png' + url: '/data/tiles/osm/{z}/{x}/{y}.png', }); -source.setTileGridForProjection(get('EPSG:4326'), createForProjection(get('EPSG:4326'), 7, [64, 64])); +source.setTileGridForProjection( + get('EPSG:4326'), + createForProjection(get('EPSG:4326'), 7, [64, 64]) +); new Map({ pixelRatio: 1, target: 'map', layers: [ new TileLayer({ - source: source - }) + source: source, + }), ], view: new View({ projection: 'EPSG:4326', center: toLonLat(center), - zoom: 5 - }) + zoom: 5, + }), }); render(); diff --git a/rendering/cases/reproj-tile-5070/main.js b/rendering/cases/reproj-tile-5070/main.js index 722cbaa73c..6f02f05df8 100644 --- a/rendering/cases/reproj-tile-5070/main.js +++ b/rendering/cases/reproj-tile-5070/main.js @@ -1,14 +1,16 @@ import Map from '../../../src/ol/Map.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; +import proj4 from 'proj4'; import {get, transform} from '../../../src/ol/proj.js'; import {register} from '../../../src/ol/proj/proj4.js'; -import proj4 from 'proj4'; -proj4.defs('EPSG:5070', +proj4.defs( + 'EPSG:5070', '+proj=aea +lat_1=29.5 +lat_2=45.5 +lat_0=23 +lon_0=-96 +x_0=0 ' + - '+y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'); + '+y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs' +); register(proj4); const proj5070 = get('EPSG:5070'); proj5070.setExtent([-6e6, 0, 4e6, 6e6]); @@ -20,7 +22,7 @@ const source = new XYZ({ transition: 0, minZoom: 5, maxZoom: 5, - url: '/data/tiles/osm/{z}/{x}/{y}.png' + url: '/data/tiles/osm/{z}/{x}/{y}.png', }); new Map({ @@ -28,14 +30,14 @@ new Map({ target: 'map', layers: [ new TileLayer({ - source: source - }) + source: source, + }), ], view: new View({ projection: 'EPSG:5070', center: center, - zoom: 4 - }) + zoom: 4, + }), }); render(); diff --git a/rendering/cases/reproj-tile-54009/main.js b/rendering/cases/reproj-tile-54009/main.js index eef8cc3f9e..f8763ec65e 100644 --- a/rendering/cases/reproj-tile-54009/main.js +++ b/rendering/cases/reproj-tile-54009/main.js @@ -1,12 +1,15 @@ import Map from '../../../src/ol/Map.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; +import proj4 from 'proj4'; import {get, transform} from '../../../src/ol/proj.js'; import {register} from '../../../src/ol/proj/proj4.js'; -import proj4 from 'proj4'; -proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'); +proj4.defs( + 'ESRI:54009', + '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs' +); register(proj4); const proj54009 = get('ESRI:54009'); @@ -19,7 +22,7 @@ const source = new XYZ({ transition: 0, minZoom: 5, maxZoom: 5, - url: '/data/tiles/osm/{z}/{x}/{y}.png' + url: '/data/tiles/osm/{z}/{x}/{y}.png', }); new Map({ @@ -27,14 +30,14 @@ new Map({ target: 'map', layers: [ new TileLayer({ - source: source - }) + source: source, + }), ], view: new View({ projection: 'ESRI:54009', center: center, - zoom: 6 - }) + zoom: 6, + }), }); render(); diff --git a/rendering/cases/reproj-tile-dateline-merc/main.js b/rendering/cases/reproj-tile-dateline-merc/main.js index 38e030a90b..06ac920635 100644 --- a/rendering/cases/reproj-tile-dateline-merc/main.js +++ b/rendering/cases/reproj-tile-dateline-merc/main.js @@ -1,16 +1,16 @@ import Map from '../../../src/ol/Map.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; +import proj4 from 'proj4'; import {get, transform} from '../../../src/ol/proj.js'; import {register} from '../../../src/ol/proj/proj4.js'; -import proj4 from 'proj4'; proj4.defs('merc_180', '+proj=merc +lon_0=180 +units=m +no_defs'); register(proj4); const merc = get('merc_180'); -merc.setExtent([-20026376.39, -20048966.10, 20026376.39, 20048966.10]); +merc.setExtent([-20026376.39, -20048966.1, 20026376.39, 20048966.1]); const center4326 = [180, 0]; const center = transform(center4326, 'EPSG:4326', 'merc_180'); @@ -19,7 +19,7 @@ const source = new XYZ({ projection: 'EPSG:4326', minZoom: 0, maxZoom: 0, - url: '/data/tiles/4326/{z}/{x}/{y}.png' + url: '/data/tiles/4326/{z}/{x}/{y}.png', }); new Map({ @@ -27,14 +27,14 @@ new Map({ target: 'map', layers: [ new TileLayer({ - source: source - }) + source: source, + }), ], view: new View({ projection: 'merc_180', center: center, - zoom: 0 - }) + zoom: 0, + }), }); render(); diff --git a/rendering/cases/reproj-tile-disable-smoothing/main.js b/rendering/cases/reproj-tile-disable-smoothing/main.js index fb194dfe0c..1826969898 100644 --- a/rendering/cases/reproj-tile-disable-smoothing/main.js +++ b/rendering/cases/reproj-tile-disable-smoothing/main.js @@ -1,9 +1,9 @@ import Map from '../../../src/ol/Map.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; -import {toLonLat} from '../../../src/ol/proj.js'; import {createXYZ} from '../../../src/ol/tilegrid.js'; +import {toLonLat} from '../../../src/ol/proj.js'; const tileGrid = createXYZ(); const extent = tileGrid.getTileCoordExtent([5, 5, 12]); @@ -14,11 +14,11 @@ const source = new XYZ({ minZoom: 5, maxZoom: 5, imageSmoothing: false, - url: '/data/tiles/osm/{z}/{x}/{y}.png' + url: '/data/tiles/osm/{z}/{x}/{y}.png', }); const layer = new TileLayer({ - source: source + source: source, }); new Map({ @@ -28,8 +28,8 @@ new Map({ view: new View({ projection: 'EPSG:4326', center: toLonLat(center), - zoom: 10 - }) + zoom: 10, + }), }); render(); diff --git a/rendering/cases/reproj-tile-none-square/main.js b/rendering/cases/reproj-tile-none-square/main.js index 2884f3c959..f40f8974d9 100644 --- a/rendering/cases/reproj-tile-none-square/main.js +++ b/rendering/cases/reproj-tile-none-square/main.js @@ -1,23 +1,20 @@ import Map from '../../../src/ol/Map.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; -import {toLonLat} from '../../../src/ol/proj.js'; import {createXYZ} from '../../../src/ol/tilegrid.js'; +import {toLonLat} from '../../../src/ol/proj.js'; const tileGrid = createXYZ({tileSize: [512, 256]}); const extent = tileGrid.getTileCoordExtent([5, 3, 12]); -const center = [ - (extent[0] + extent[2]) / 2, - (extent[1] + extent[3]) / 2 -]; +const center = [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2]; const source = new XYZ({ projection: 'EPSG:3857', minZoom: 5, maxZoom: 5, url: '/data/tiles/512x256/{z}/{x}/{y}.png', - tileSize: [512, 256] + tileSize: [512, 256], }); new Map({ @@ -25,14 +22,14 @@ new Map({ target: 'map', layers: [ new TileLayer({ - source: source - }) + source: source, + }), ], view: new View({ projection: 'EPSG:4326', center: toLonLat(center), - zoom: 5 - }) + zoom: 5, + }), }); render(); diff --git a/rendering/cases/reproj-tile-northpole/main.js b/rendering/cases/reproj-tile-northpole/main.js index f667fd8b18..8a0974bf22 100644 --- a/rendering/cases/reproj-tile-northpole/main.js +++ b/rendering/cases/reproj-tile-northpole/main.js @@ -1,13 +1,16 @@ import Map from '../../../src/ol/Map.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; +import proj4 from 'proj4'; import {get, transform} from '../../../src/ol/proj.js'; import {register} from '../../../src/ol/proj/proj4.js'; -import proj4 from 'proj4'; -proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 ' + - '+k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'); +proj4.defs( + 'EPSG:3413', + '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 ' + + '+k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs' +); register(proj4); const proj3413 = get('EPSG:3413'); @@ -19,7 +22,7 @@ const center = transform(center4326, 'EPSG:4326', 'EPSG:3413'); const source = new XYZ({ maxZoom: 0, projection: 'EPSG:4326', - url: '/data/tiles/4326/{z}/{x}/{y}.png' + url: '/data/tiles/4326/{z}/{x}/{y}.png', }); new Map({ @@ -27,14 +30,14 @@ new Map({ target: 'map', layers: [ new TileLayer({ - source: source - }) + source: source, + }), ], view: new View({ projection: 'EPSG:3413', center: center, - zoom: 0 - }) + zoom: 0, + }), }); render(); diff --git a/rendering/cases/rotated-view/main.js b/rendering/cases/rotated-view/main.js index 7c2faf2a4f..e561590ccf 100644 --- a/rendering/cases/rotated-view/main.js +++ b/rendering/cases/rotated-view/main.js @@ -1,9 +1,12 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js'; -import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; -import Point from '../../../src/ol/geom/Point.js'; import Feature from '../../../src/ol/Feature.js'; +import Map from '../../../src/ol/Map.js'; +import Point from '../../../src/ol/geom/Point.js'; +import View from '../../../src/ol/View.js'; +import { + Tile as TileLayer, + Vector as VectorLayer, +} from '../../../src/ol/layer.js'; +import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; import {fromLonLat} from '../../../src/ol/proj.js'; const center = fromLonLat([-111, 45.7]); @@ -12,25 +15,21 @@ new Map({ layers: [ new TileLayer({ source: new XYZ({ - url: '/data/tiles/satellite/{z}/{x}/{y}.jpg' - }) + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', + }), }), new VectorLayer({ source: new VectorSource({ - features: [ - new Feature( - new Point(center) - ) - ] - }) - }) + features: [new Feature(new Point(center))], + }), + }), ], target: 'map', view: new View({ center: center, zoom: 3, - rotation: Math.PI / 4 - }) + rotation: Math.PI / 4, + }), }); render(); diff --git a/rendering/cases/single-layer/main.js b/rendering/cases/single-layer/main.js index c1fcec8fe5..5800cc2cbf 100644 --- a/rendering/cases/single-layer/main.js +++ b/rendering/cases/single-layer/main.js @@ -1,21 +1,21 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; +import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; new Map({ layers: [ new TileLayer({ source: new XYZ({ - url: '/data/tiles/satellite/{z}/{x}/{y}.jpg' - }) - }) + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', + }), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 0 - }) + zoom: 0, + }), }); render({message: 'A single layer with a XZY source'}); diff --git a/rendering/cases/source-raster/main.js b/rendering/cases/source-raster/main.js index 215609e5dd..2804f03108 100644 --- a/rendering/cases/source-raster/main.js +++ b/rendering/cases/source-raster/main.js @@ -1,22 +1,24 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import ImageLayer from '../../../src/ol/layer/Image.js'; +import Map from '../../../src/ol/Map.js'; import RasterSource from '../../../src/ol/source/Raster.js'; +import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; const raster = new RasterSource({ - sources: [new XYZ({ - url: '/data/tiles/osm/{z}/{x}/{y}.png', - transition: 0 - })], + sources: [ + new XYZ({ + url: '/data/tiles/osm/{z}/{x}/{y}.png', + transition: 0, + }), + ], threads: 0, // Avoid using workers to work with puppeteer - operation: function(pixels) { + operation: function (pixels) { const pixel = pixels[0]; const red = pixel[0]; pixel[0] = pixel[2]; pixel[2] = red; return pixel; - } + }, }); new Map({ @@ -24,9 +26,8 @@ new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 0 - }) + zoom: 0, + }), }); render(); - diff --git a/rendering/cases/source-tilewms-gutter0/main.js b/rendering/cases/source-tilewms-gutter0/main.js index 101dee5322..3772e3d479 100644 --- a/rendering/cases/source-tilewms-gutter0/main.js +++ b/rendering/cases/source-tilewms-gutter0/main.js @@ -1,15 +1,15 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; import TileWMS from '../../../src/ol/source/TileWMS.js'; +import View from '../../../src/ol/View.js'; const tileWms = new TileWMS({ params: { - 'LAYERS': 'layer' + 'LAYERS': 'layer', }, gutter: 0, url: '/data/tiles/wms/wms0.png', - transition: 0 + transition: 0, }); new Map({ @@ -18,9 +18,8 @@ new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 5 - }) + zoom: 5, + }), }); render(); - diff --git a/rendering/cases/source-tilewms-gutter20/main.js b/rendering/cases/source-tilewms-gutter20/main.js index 060d2dcff5..9b0680db20 100644 --- a/rendering/cases/source-tilewms-gutter20/main.js +++ b/rendering/cases/source-tilewms-gutter20/main.js @@ -1,15 +1,15 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; import TileWMS from '../../../src/ol/source/TileWMS.js'; +import View from '../../../src/ol/View.js'; const tileWms = new TileWMS({ params: { - 'LAYERS': 'layer' + 'LAYERS': 'layer', }, gutter: 20, url: '/data/tiles/wms/wms20.png', - transition: 0 + transition: 0, }); new Map({ @@ -18,9 +18,8 @@ new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 5 - }) + zoom: 5, + }), }); render(); - diff --git a/rendering/cases/stacking/main.js b/rendering/cases/stacking/main.js index 44f24bfc67..0d784d373a 100644 --- a/rendering/cases/stacking/main.js +++ b/rendering/cases/stacking/main.js @@ -4,11 +4,11 @@ * above layers. */ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import Layer from '../../../src/ol/layer/Layer.js'; import Control from '../../../src/ol/control/Control.js'; +import Layer from '../../../src/ol/layer/Layer.js'; +import Map from '../../../src/ol/Map.js'; import SourceState from '../../../src/ol/source/State.js'; +import View from '../../../src/ol/View.js'; class Element extends Layer { constructor(options, style) { @@ -50,33 +50,39 @@ style2.zIndex = '-1'; new Map({ target: 'map', layers: [ - new Element({ - zIndex: 200 - }, { - background: 'red', - width: '50%', - height: '100%' - }), - new Element({ - zIndex: -200 - }, { - background: 'green', - width: '100%', - height: '50%' - }) + new Element( + { + zIndex: 200, + }, + { + background: 'red', + width: '50%', + height: '100%', + } + ), + new Element( + { + zIndex: -200, + }, + { + background: 'green', + width: '100%', + height: '50%', + } + ), ], controls: [ new Control({ - element: element1 + element: element1, }), new Control({ - element: element2 - }) + element: element2, + }), ], view: new View({ center: [0, 0], - zoom: 0 - }) + zoom: 0, + }), }); render(); diff --git a/rendering/cases/text-style-linestring-nice/main.js b/rendering/cases/text-style-linestring-nice/main.js index fbce6e2d13..7177b58459 100644 --- a/rendering/cases/text-style-linestring-nice/main.js +++ b/rendering/cases/text-style-linestring-nice/main.js @@ -1,133 +1,178 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; +import Fill from '../../../src/ol/style/Fill.js'; +import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; +import Text from '../../../src/ol/style/Text.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Text from '../../../src/ol/style/Text.js'; -import Style from '../../../src/ol/style/Style.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; -import LineString from '../../../src/ol/geom/LineString.js'; - +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); const nicePath = [ - 20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40, - 180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33 + 20, + 33, + 40, + 31, + 60, + 30, + 80, + 31, + 100, + 33, + 120, + 37, + 140, + 39, + 160, + 40, + 180, + 39, + 200, + 37, + 220, + 33, + 240, + 31, + 260, + 30, + 280, + 31, + 300, + 33, ]; const lineString1 = new LineString(nicePath, 'XY'); const feature1 = new Feature({geometry: lineString1}); -feature1.setStyle(new Style({ - stroke: new Stroke({color: 'blue'}), - text: new Text({ - text: 'Hello world', - font: '10px Ubuntu', - placement: 'line' +feature1.setStyle( + new Style({ + stroke: new Stroke({color: 'blue'}), + text: new Text({ + text: 'Hello world', + font: '10px Ubuntu', + placement: 'line', + }), }) -})); +); vectorSource.addFeature(feature1); const lineString2 = lineString1.clone(); lineString2.translate(0, 30); const feature2 = new Feature({geometry: lineString2}); -feature2.setStyle(new Style({ - stroke: new Stroke({color: 'blue'}), - text: new Text({ - text: 'Scale 2', - font: 'normal 400 12px/1 Ubuntu', - scale: 2, - textBaseline: 'bottom', - textAlign: 'right', - placement: 'line' +feature2.setStyle( + new Style({ + stroke: new Stroke({color: 'blue'}), + text: new Text({ + text: 'Scale 2', + font: 'normal 400 12px/1 Ubuntu', + scale: 2, + textBaseline: 'bottom', + textAlign: 'right', + placement: 'line', + }), }) -})); +); vectorSource.addFeature(feature2); const lineString3 = lineString2.clone(); lineString3.translate(0, 30); const feature3 = new Feature({geometry: lineString3}); -feature3.setStyle(new Style({ - stroke: new Stroke({color: 'blue'}), - text: new Text({ - font: 'italic bold 0.75em Ubuntu', - text: 'Set properties' +feature3.setStyle( + new Style({ + stroke: new Stroke({color: 'blue'}), + text: new Text({ + font: 'italic bold 0.75em Ubuntu', + text: 'Set properties', + }), }) -})); +); feature3.getStyle().getText().setTextAlign('left'); feature3.getStyle().getText().setOffsetX(10); feature3.getStyle().getText().setOffsetY(-10); feature3.getStyle().getText().setPlacement('line'); feature3.getStyle().getText().setScale(1.1); -feature3.getStyle().getText().setStroke(new Stroke({color: '#00F7F8'})); -feature3.getStyle().getText().setFill(new Fill({color: '#006772'})); +feature3 + .getStyle() + .getText() + .setStroke(new Stroke({color: '#00F7F8'})); +feature3 + .getStyle() + .getText() + .setFill(new Fill({color: '#006772'})); vectorSource.addFeature(feature3); const lineString4 = lineString3.clone(); lineString4.translate(0, 30); const feature4 = new Feature({geometry: lineString4}); -feature4.setStyle(new Style({ - stroke: new Stroke({color: 'blue'}), - text: new Text({ - text: 'negative offsetX', - font: 'normal 400 10px/1 Ubuntu', - offsetX: -10, - textAlign: 'start', - textBaseline: 'top', - placement: 'line' +feature4.setStyle( + new Style({ + stroke: new Stroke({color: 'blue'}), + text: new Text({ + text: 'negative offsetX', + font: 'normal 400 10px/1 Ubuntu', + offsetX: -10, + textAlign: 'start', + textBaseline: 'top', + placement: 'line', + }), }) -})); +); vectorSource.addFeature(feature4); const lineString5 = lineString4.clone(); lineString5.translate(0, 30); const feature5 = new Feature({geometry: lineString5}); -feature5.setStyle(new Style({ - stroke: new Stroke({color: 'blue'}), - text: new Text({ - text: 'Small text', - font: '10px Ubuntu', - offsetY: 5, - scale: 0.7, - textAlign: 'end', - placement: 'line' +feature5.setStyle( + new Style({ + stroke: new Stroke({color: 'blue'}), + text: new Text({ + text: 'Small text', + font: '10px Ubuntu', + offsetY: 5, + scale: 0.7, + textAlign: 'end', + placement: 'line', + }), }) -})); +); vectorSource.addFeature(feature5); const lineString6 = lineString5.clone(); lineString6.translate(0, 30); const feature6 = new Feature({geometry: lineString6}); -feature6.setStyle(new Style({ - stroke: new Stroke({color: 'blue'}), - text: new Text({ - text: 'FILL AND STROKE', - font: '10px Ubuntu', - placement: 'line', - fill: new Fill({color: '#FFC0CB'}), - stroke: new Stroke({ - color: '#00FF00', - width: 1 - }) +feature6.setStyle( + new Style({ + stroke: new Stroke({color: 'blue'}), + text: new Text({ + text: 'FILL AND STROKE', + font: '10px Ubuntu', + placement: 'line', + fill: new Fill({color: '#FFC0CB'}), + stroke: new Stroke({ + color: '#00FF00', + width: 1, + }), + }), }) -})); +); vectorSource.addFeature(feature6); const map = new Map({ pixelRatio: 1, layers: [ new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], resolution: 1, - rotation: Math.PI / 4 - }) + rotation: Math.PI / 4, + }), }); map.getView().fit(vectorSource.getExtent()); diff --git a/rendering/cases/text-style-linestring-ugly/main.js b/rendering/cases/text-style-linestring-ugly/main.js index 91a2d454bb..f974d86a74 100644 --- a/rendering/cases/text-style-linestring-ugly/main.js +++ b/rendering/cases/text-style-linestring-ugly/main.js @@ -1,14 +1,13 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; +import Fill from '../../../src/ol/style/Fill.js'; +import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; +import Text from '../../../src/ol/style/Text.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Text from '../../../src/ol/style/Text.js'; -import Style from '../../../src/ol/style/Style.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; -import LineString from '../../../src/ol/geom/LineString.js'; - +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); @@ -16,51 +15,63 @@ const uglyPath = [163, 22, 159, 30, 150, 30, 143, 24, 151, 17]; const lineString1 = new LineString(uglyPath, 'XY'); const feature1 = new Feature({geometry: lineString1}); -feature1.setStyle(new Style({ - stroke: new Stroke({color: 'blue'}), - text: new Text({ - text: 'Hello world', - font: '10px Ubuntu', - placement: 'line', - overflow: true +feature1.setStyle( + new Style({ + stroke: new Stroke({color: 'blue'}), + text: new Text({ + text: 'Hello world', + font: '10px Ubuntu', + placement: 'line', + overflow: true, + }), }) -})); +); vectorSource.addFeature(feature1); const lineString2 = lineString1.clone(); lineString2.translate(0, 30); const feature2 = new Feature({geometry: lineString2}); -feature2.setStyle(new Style({ - stroke: new Stroke({color: 'red'}), - text: new Text({ - text: 'Scale 2', - scale: 2, - textBaseline: 'bottom', - textAlign: 'right', - placement: 'line', - font: 'italic bold 0.5em Ubuntu', - overflow: true +feature2.setStyle( + new Style({ + stroke: new Stroke({color: 'red'}), + text: new Text({ + text: 'Scale 2', + scale: 2, + textBaseline: 'bottom', + textAlign: 'right', + placement: 'line', + font: 'italic bold 0.5em Ubuntu', + overflow: true, + }), }) -})); +); vectorSource.addFeature(feature2); const lineString3 = lineString2.clone(); lineString3.translate(0, 30); const feature3 = new Feature({geometry: lineString3}); -feature3.setStyle(new Style({ - stroke: new Stroke({color: 'blue'}), - text: new Text({ - text: 'Set properties' +feature3.setStyle( + new Style({ + stroke: new Stroke({color: 'blue'}), + text: new Text({ + text: 'Set properties', + }), }) -})); +); feature3.getStyle().getText().setTextAlign('left'); feature3.getStyle().getText().setOffsetX(10); feature3.getStyle().getText().setOffsetY(-10); feature3.getStyle().getText().setOverflow(true); feature3.getStyle().getText().setPlacement('line'); feature3.getStyle().getText().setScale(1.2); -feature3.getStyle().getText().setStroke(new Stroke({color: '#00F7F8'})); -feature3.getStyle().getText().setFill(new Fill({color: '#006772'})); +feature3 + .getStyle() + .getText() + .setStroke(new Stroke({color: '#00F7F8'})); +feature3 + .getStyle() + .getText() + .setFill(new Fill({color: '#006772'})); feature3.getStyle().getText().setMaxAngle(Math.PI); vectorSource.addFeature(feature3); @@ -68,70 +79,76 @@ vectorSource.addFeature(feature3); const lineString4 = lineString3.clone(); lineString4.translate(0, 30); const feature4 = new Feature({geometry: lineString4}); -feature4.setStyle(new Style({ - stroke: new Stroke({color: 'red'}), - text: new Text({ - text: 'PLEASE OMIT ME IM UGLY', - font: '10px Ubuntu', - offsetX: -10, - textAlign: 'start', - textBaseline: 'top', - placement: 'line', - overflow: true +feature4.setStyle( + new Style({ + stroke: new Stroke({color: 'red'}), + text: new Text({ + text: 'PLEASE OMIT ME IM UGLY', + font: '10px Ubuntu', + offsetX: -10, + textAlign: 'start', + textBaseline: 'top', + placement: 'line', + overflow: true, + }), }) -})); +); vectorSource.addFeature(feature4); const lineString5 = lineString4.clone(); lineString5.translate(0, 30); const feature5 = new Feature({geometry: lineString5}); -feature5.setStyle(new Style({ - stroke: new Stroke({color: 'blue'}), - text: new Text({ - text: 'Small text', - font: '10px Ubuntu', - offsetY: 5, - scale: 0.7, - rotation: 4, - textAlign: 'end', - placement: 'line', - maxAngle: Math.PI, - overflow: true +feature5.setStyle( + new Style({ + stroke: new Stroke({color: 'blue'}), + text: new Text({ + text: 'Small text', + font: '10px Ubuntu', + offsetY: 5, + scale: 0.7, + rotation: 4, + textAlign: 'end', + placement: 'line', + maxAngle: Math.PI, + overflow: true, + }), }) -})); +); vectorSource.addFeature(feature5); const lineString6 = lineString5.clone(); lineString6.translate(0, 30); const feature6 = new Feature({geometry: lineString6}); -feature6.setStyle(new Style({ - stroke: new Stroke({color: 'blue'}), - text: new Text({ - text: 'FILL AND STROKE', - font: '10px Ubuntu', - placement: 'line', - overflow: true, - fill: new Fill({color: '#FFC0CB'}), - stroke: new Stroke({ - color: '#00FF00' - }) +feature6.setStyle( + new Style({ + stroke: new Stroke({color: 'blue'}), + text: new Text({ + text: 'FILL AND STROKE', + font: '10px Ubuntu', + placement: 'line', + overflow: true, + fill: new Fill({color: '#FFC0CB'}), + stroke: new Stroke({ + color: '#00FF00', + }), + }), }) -})); +); vectorSource.addFeature(feature6); const map = new Map({ pixelRatio: 1, layers: [ new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], resolution: 1, - rotation: -(Math.PI / 4) - }) + rotation: -(Math.PI / 4), + }), }); map.getView().fit(vectorSource.getExtent()); diff --git a/rendering/cases/text-style-overlap/main.js b/rendering/cases/text-style-overlap/main.js index 9a750a3d99..9db5f4b6d6 100644 --- a/rendering/cases/text-style-overlap/main.js +++ b/rendering/cases/text-style-overlap/main.js @@ -1,18 +1,46 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; +import Fill from '../../../src/ol/style/Fill.js'; +import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; import Point from '../../../src/ol/geom/Point.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; +import Text from '../../../src/ol/style/Text.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Text from '../../../src/ol/style/Text.js'; -import Style from '../../../src/ol/style/Style.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; -import LineString from '../../../src/ol/geom/LineString.js'; +import View from '../../../src/ol/View.js'; const nicePath = [ - 20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40, - 180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33 + 20, + 33, + 40, + 31, + 60, + 30, + 80, + 31, + 100, + 33, + 120, + 37, + 140, + 39, + 160, + 40, + 180, + 39, + 200, + 37, + 220, + 33, + 240, + 31, + 260, + 30, + 280, + 31, + 300, + 33, ]; const vectorSource = new VectorSource(); @@ -21,12 +49,12 @@ const pointStyle = new Style({ text: 'Point Label', font: 'Ubuntu', fill: new Fill({ - color: 'red' + color: 'red', }), stroke: new Stroke({ - color: 'black' - }) - }) + color: 'black', + }), + }), }); const lineStyle = new Style({ stroke: new Stroke({color: 'blue'}), @@ -34,36 +62,42 @@ const lineStyle = new Style({ text: 'Line Label', font: 'Ubuntu', fill: new Fill({ - color: 'red' + color: 'red', }), stroke: new Stroke({ - color: 'black' + color: 'black', }), - placement: 'line' - }) + placement: 'line', + }), }); const pointFeature1 = new Feature({ - geometry: new Point([160, 100]) + geometry: new Point([160, 100]), }); pointFeature1.setStyle(pointStyle.clone()); pointFeature1.getStyle().getText().setText('POINT ONE'); vectorSource.addFeature(pointFeature1); const pointFeature2 = new Feature({ - geometry: new Point([170, 105]) + geometry: new Point([170, 105]), }); pointFeature2.setStyle(pointStyle.clone()); pointFeature2.getStyle().getText().setText('POINT TWO'); -pointFeature2.getStyle().getText().setFill(new Fill({color: 'green'})); +pointFeature2 + .getStyle() + .getText() + .setFill(new Fill({color: 'green'})); vectorSource.addFeature(pointFeature2); const pointFeature3 = new Feature({ - geometry: new Point([150, 95]) + geometry: new Point([150, 95]), }); pointFeature3.setStyle(pointStyle.clone()); pointFeature3.getStyle().getText().setText('POINT THREE'); -pointFeature3.getStyle().getText().setFill(new Fill({color: 'yellow'})); +pointFeature3 + .getStyle() + .getText() + .setFill(new Fill({color: 'yellow'})); vectorSource.addFeature(pointFeature3); const lineString1 = new LineString(nicePath, 'XY'); @@ -77,7 +111,10 @@ lineString2.translate(10, 10); const lineFeature2 = new Feature({geometry: lineString2}); lineFeature2.setStyle(lineStyle.clone()); lineFeature2.getStyle().getText().setText('LINE TWO'); -lineFeature2.getStyle().getText().setFill(new Fill({color: 'green'})); +lineFeature2 + .getStyle() + .getText() + .setFill(new Fill({color: 'green'})); vectorSource.addFeature(lineFeature2); const lineString3 = lineString1.clone(); @@ -85,21 +122,24 @@ lineString3.translate(-10, 10); const lineFeature3 = new Feature({geometry: lineString3}); lineFeature3.setStyle(lineStyle.clone()); lineFeature3.getStyle().getText().setText('LINE THREE'); -lineFeature3.getStyle().getText().setFill(new Fill({color: 'yellow'})); +lineFeature3 + .getStyle() + .getText() + .setFill(new Fill({color: 'yellow'})); vectorSource.addFeature(lineFeature3); const map = new Map({ pixelRatio: 1, layers: [ new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], - resolution: 1 - }) + resolution: 1, + }), }); map.getView().fit(vectorSource.getExtent()); diff --git a/rendering/cases/text-style/main.js b/rendering/cases/text-style/main.js index 654563d36b..f5befd9b42 100644 --- a/rendering/cases/text-style/main.js +++ b/rendering/cases/text-style/main.js @@ -1,140 +1,150 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; +import Fill from '../../../src/ol/style/Fill.js'; +import Map from '../../../src/ol/Map.js'; import Point from '../../../src/ol/geom/Point.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; +import Text from '../../../src/ol/style/Text.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Text from '../../../src/ol/style/Text.js'; -import Style from '../../../src/ol/style/Style.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; - +import View from '../../../src/ol/View.js'; const vectorSource = new VectorSource(); let feature; // scale feature = new Feature({ - geometry: new Point([-50, 50]) + geometry: new Point([-50, 50]), }); -feature.setStyle(new Style({ - text: new Text({ - text: 'hello', - font: '12px Ubuntu', - scale: 2, - fill: new Fill({ - color: 'red' +feature.setStyle( + new Style({ + text: new Text({ + text: 'hello', + font: '12px Ubuntu', + scale: 2, + fill: new Fill({ + color: 'red', + }), + stroke: new Stroke({ + color: '#000', + }), }), - stroke: new Stroke({ - color: '#000' - }) }) -})); +); vectorSource.addFeature(feature); // rotate feature = new Feature({ - geometry: new Point([50, -50]) + geometry: new Point([50, -50]), }); -feature.setStyle(new Style({ - text: new Text({ - text: 'upside down', - font: '12px Ubuntu', - rotation: Math.PI, - stroke: new Stroke({ - color: 'red', - width: 2 - }) +feature.setStyle( + new Style({ + text: new Text({ + text: 'upside down', + font: '12px Ubuntu', + rotation: Math.PI, + stroke: new Stroke({ + color: 'red', + width: 2, + }), + }), }) -})); +); vectorSource.addFeature(feature); // rotate with view feature = new Feature({ - geometry: new Point([50, 50]) + geometry: new Point([50, 50]), }); -feature.setStyle(new Style({ - text: new Text({ - font: 'Ubuntu', - text: 'rotateWithView', - rotateWithView: true, - stroke: new Stroke({ - color: [10, 10, 10, 0.5] - }) +feature.setStyle( + new Style({ + text: new Text({ + font: 'Ubuntu', + text: 'rotateWithView', + rotateWithView: true, + stroke: new Stroke({ + color: [10, 10, 10, 0.5], + }), + }), }) -})); +); vectorSource.addFeature(feature); // align left feature = new Feature({ - geometry: new Point([50, 50]) + geometry: new Point([50, 50]), }); -feature.setStyle(new Style({ - text: new Text({ - font: 'Ubuntu', - text: 'align left', - textAlign: 'left', - stroke: new Stroke({ - color: [10, 10, 10, 0.5] - }) +feature.setStyle( + new Style({ + text: new Text({ + font: 'Ubuntu', + text: 'align left', + textAlign: 'left', + stroke: new Stroke({ + color: [10, 10, 10, 0.5], + }), + }), }) -})); +); vectorSource.addFeature(feature); // background and padding feature = new Feature({ - geometry: new Point([-10, 0]) + geometry: new Point([-10, 0]), }); -feature.setStyle(new Style({ - text: new Text({ - text: 'hello', - font: '12px Ubuntu', - padding: [1, 2, 3, 5], - backgroundFill: new Fill({ - color: 'rgba(55, 55, 55, 0.25)' +feature.setStyle( + new Style({ + text: new Text({ + text: 'hello', + font: '12px Ubuntu', + padding: [1, 2, 3, 5], + backgroundFill: new Fill({ + color: 'rgba(55, 55, 55, 0.25)', + }), + backgroundStroke: new Stroke({ + color: '#000', + width: 1, + }), }), - backgroundStroke: new Stroke({ - color: '#000', - width: 1 - }) }) -})); +); vectorSource.addFeature(feature); // background and padding feature = new Feature({ - geometry: new Point([-10, 0]) + geometry: new Point([-10, 0]), }); -feature.setStyle(new Style({ - text: new Text({ - text: 'hello', - font: '12px Ubuntu', - padding: [1, 2, 3, 5], - backgroundFill: new Fill({ - color: 'rgba(55, 55, 55, 0.25)' +feature.setStyle( + new Style({ + text: new Text({ + text: 'hello', + font: '12px Ubuntu', + padding: [1, 2, 3, 5], + backgroundFill: new Fill({ + color: 'rgba(55, 55, 55, 0.25)', + }), + backgroundStroke: new Stroke({ + color: '#000', + width: 1, + }), }), - backgroundStroke: new Stroke({ - color: '#000', - width: 1 - }) }) -})); +); vectorSource.addFeature(feature); - new Map({ pixelRatio: 1, layers: [ new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], resolution: 1, - rotation: Math.PI / 4 - }) + rotation: Math.PI / 4, + }), }); render({tolerance: 0.02}); diff --git a/rendering/cases/tile-disable-smoothing/main.js b/rendering/cases/tile-disable-smoothing/main.js index 805344e9b2..e82db95336 100644 --- a/rendering/cases/tile-disable-smoothing/main.js +++ b/rendering/cases/tile-disable-smoothing/main.js @@ -1,7 +1,7 @@ import Map from '../../../src/ol/Map.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; import {createXYZ} from '../../../src/ol/tilegrid.js'; const tileGrid = createXYZ(); @@ -13,11 +13,11 @@ const source = new XYZ({ minZoom: 5, maxZoom: 5, imageSmoothing: false, - url: '/data/tiles/osm/{z}/{x}/{y}.png' + url: '/data/tiles/osm/{z}/{x}/{y}.png', }); const layer = new TileLayer({ - source: source + source: source, }); new Map({ @@ -26,8 +26,8 @@ new Map({ layers: [layer], view: new View({ center: center, - zoom: 10 - }) + zoom: 10, + }), }); render(); diff --git a/rendering/cases/vector-zindex/main.js b/rendering/cases/vector-zindex/main.js index 937284279c..5f833c16dd 100644 --- a/rendering/cases/vector-zindex/main.js +++ b/rendering/cases/vector-zindex/main.js @@ -1,32 +1,40 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import Feature from '../../../src/ol/Feature.js'; import LineString from '../../../src/ol/geom/LineString.js'; +import Map from '../../../src/ol/Map.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; -import Style from '../../../src/ol/style/Style.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; - +import View from '../../../src/ol/View.js'; const vectorSourceRed = new VectorSource(); const vectorSourceBlue = new VectorSource(); let feature; feature = new Feature({ - geometry: new LineString([[-60, 20], [45, 20]]) + geometry: new LineString([ + [-60, 20], + [45, 20], + ]), }); -feature.setStyle(new Style({ - stroke: new Stroke({color: '#f00', width: 10}) -})); +feature.setStyle( + new Style({ + stroke: new Stroke({color: '#f00', width: 10}), + }) +); vectorSourceRed.addFeature(feature); - feature = new Feature({ - geometry: new LineString([[0, -50], [0, 60]]) + geometry: new LineString([ + [0, -50], + [0, 60], + ]), }); -feature.setStyle(new Style({ - stroke: new Stroke({color: '#00f', width: 16}) -})); +feature.setStyle( + new Style({ + stroke: new Stroke({color: '#00f', width: 16}), + }) +); vectorSourceBlue.addFeature(feature); new Map({ @@ -34,17 +42,17 @@ new Map({ layers: [ new VectorLayer({ zIndex: 1, - source: vectorSourceRed + source: vectorSourceRed, }), new VectorLayer({ - source: vectorSourceBlue - }) + source: vectorSourceBlue, + }), ], target: 'map', view: new View({ center: [0, 0], - resolution: 1 - }) + resolution: 1, + }), }); render(); diff --git a/rendering/cases/webgl-points/main.js b/rendering/cases/webgl-points/main.js index cafb57a0e1..1067ff903b 100644 --- a/rendering/cases/webgl-points/main.js +++ b/rendering/cases/webgl-points/main.js @@ -1,32 +1,32 @@ -import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; -import TileLayer from '../../../src/ol/layer/Tile.js'; -import XYZ from '../../../src/ol/source/XYZ.js'; -import VectorSource from '../../../src/ol/source/Vector.js'; import KML from '../../../src/ol/format/KML.js'; +import Map from '../../../src/ol/Map.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; +import VectorSource from '../../../src/ol/source/Vector.js'; +import View from '../../../src/ol/View.js'; import WebGLPointsLayer from '../../../src/ol/layer/WebGLPoints.js'; +import XYZ from '../../../src/ol/source/XYZ.js'; const vector = new WebGLPointsLayer({ source: new VectorSource({ url: '/data/2012_Earthquakes_Mag5.kml', format: new KML({ - extractStyles: false - }) + extractStyles: false, + }), }), style: { symbol: { symbolType: 'square', size: 4, - color: 'white' - } - } + color: 'white', + }, + }, }); const raster = new TileLayer({ source: new XYZ({ url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', - transition: 0 - }) + transition: 0, + }), }); new Map({ @@ -34,10 +34,10 @@ new Map({ target: 'map', view: new View({ center: [15180597.9736, 2700366.3807], - zoom: 2 - }) + zoom: 2, + }), }); render({ - message: 'Points are rendered using webgl as 4px pixel squares' + message: 'Points are rendered using webgl as 4px pixel squares', }); diff --git a/rendering/cases/zoomify-no-zdirection/main.js b/rendering/cases/zoomify-no-zdirection/main.js index c954a64144..3226870f4a 100644 --- a/rendering/cases/zoomify-no-zdirection/main.js +++ b/rendering/cases/zoomify-no-zdirection/main.js @@ -1,14 +1,14 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; +import View from '../../../src/ol/View.js'; import Zoomify from '../../../src/ol/source/Zoomify.js'; const layer = new TileLayer({ source: new Zoomify({ url: '/data/tiles/zoomify/', size: [200, 200], - tileSize: 100 - }) + tileSize: 100, + }), }); new Map({ @@ -17,8 +17,8 @@ new Map({ view: new View({ resolutions: [2, 1], center: [100, -100], - zoom: 0.4 - }) + zoom: 0.4, + }), }); render(); diff --git a/rendering/cases/zoomify-zdirection/main.js b/rendering/cases/zoomify-zdirection/main.js index 6863e47579..e7dc380751 100644 --- a/rendering/cases/zoomify-zdirection/main.js +++ b/rendering/cases/zoomify-zdirection/main.js @@ -1,6 +1,6 @@ import Map from '../../../src/ol/Map.js'; -import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; +import View from '../../../src/ol/View.js'; import Zoomify from '../../../src/ol/source/Zoomify.js'; const layer = new TileLayer({ @@ -8,8 +8,8 @@ const layer = new TileLayer({ url: '/data/tiles/zoomify/', size: [200, 200], tileSize: 100, - zDirection: -1 - }) + zDirection: -1, + }), }); new Map({ @@ -18,8 +18,8 @@ new Map({ view: new View({ resolutions: [2, 1], center: [100, -100], - zoom: 0.4 - }) + zoom: 0.4, + }), }); render(); diff --git a/rendering/test.js b/rendering/test.js index d12b40082d..acbfe72a01 100755 --- a/rendering/test.js +++ b/rendering/test.js @@ -35,7 +35,7 @@ function indexHandler(req, res) { const markup = `
    ${items.join('')}
`; res.writeHead(404, { - 'Content-Type': 'text/html' + 'Content-Type': 'text/html', }); res.end(markup); } @@ -58,7 +58,7 @@ function serve(options) { const webpackHandler = webpackMiddleware(compiler, { lazy: true, logger: options.log, - stats: 'minimal' + stats: 'minimal', }); return new Promise((resolve, reject) => { @@ -78,12 +78,14 @@ function serve(options) { staticHandler(req, res, notFound(req, res)); }); - server.listen(options.port, options.host, err => { + server.listen(options.port, options.host, (err) => { if (err) { return reject(err); } const address = server.address(); - options.log.info(`test server listening http://${address.address}:${address.port}/`); + options.log.info( + `test server listening http://${address.address}:${address.port}/` + ); resolve(() => server.close()); }); }); @@ -104,7 +106,7 @@ function getPassFilePath(entry) { function parsePNG(filepath) { return new Promise((resolve, reject) => { const stream = fs.createReadStream(filepath); - stream.on('error', err => { + stream.on('error', (err) => { if (err.code === 'ENOENT') { return reject(new Error(`File not found: ${filepath}`)); } @@ -123,12 +125,22 @@ async function match(actual, expected) { const width = expectedImage.width; const height = expectedImage.height; if (actualImage.width != width) { - throw new Error(`Unexpected width for ${actual}: expected ${width}, got ${actualImage.width}`); + throw new Error( + `Unexpected width for ${actual}: expected ${width}, got ${actualImage.width}` + ); } if (actualImage.height != height) { - throw new Error(`Unexpected height for ${actual}: expected ${height}, got ${actualImage.height}`); + throw new Error( + `Unexpected height for ${actual}: expected ${height}, got ${actualImage.height}` + ); } - const count = pixelmatch(actualImage.data, expectedImage.data, null, width, height); + const count = pixelmatch( + actualImage.data, + expectedImage.data, + null, + width, + height + ); return count / (width * height); } @@ -155,14 +167,16 @@ async function exposeRender(page) { } async function renderPage(page, entry, options) { - const renderCalled = new Promise(resolve => { + const renderCalled = new Promise((resolve) => { handleRender = (config) => { handleRender = null; resolve(config || {}); }; }); options.log.debug('navigating', entry); - await page.goto(`http://${options.host}:${options.port}${getHref(entry)}`, {waitUntil: 'networkidle0'}); + await page.goto(`http://${options.host}:${options.port}${getHref(entry)}`, { + waitUntil: 'networkidle0', + }); const config = await renderCalled; options.log.debug('screenshot', entry); await page.screenshot({path: getActualScreenshotPath(entry)}); @@ -184,7 +198,11 @@ async function copyActualToExpected(entry) { async function renderEach(page, entries, options) { let fail = false; for (const entry of entries) { - const {tolerance = 0.005, message = ''} = await renderPage(page, entry, options); + const {tolerance = 0.005, message = ''} = await renderPage( + page, + entry, + options + ); if (options.fix) { await copyActualToExpected(entry); @@ -217,20 +235,20 @@ async function renderEach(page, entries, options) { async function render(entries, options) { const browser = await puppeteer.launch({ args: options.puppeteerArgs, - headless: options.headless + headless: options.headless, }); let fail = false; try { const page = await browser.newPage(); - page.on('error', err => { + page.on('error', (err) => { options.log.error('page crash', err); }); - page.on('pageerror', err => { + page.on('pageerror', (err) => { options.log.error('uncaught exception', err); }); - page.on('console', message => { + page.on('console', (message) => { const type = message.type(); if (options.log[type]) { options.log[type](message.text()); @@ -262,7 +280,9 @@ async function getLatest(patterns) { } async function getOutdated(entries, options) { - const libTime = await getLatest(path.join(__dirname, '..', 'src', 'ol', '**', '*')); + const libTime = await getLatest( + path.join(__dirname, '..', 'src', 'ol', '**', '*') + ); options.log.debug('library time', libTime); const outdated = []; for (const entry of entries) { @@ -274,7 +294,9 @@ async function getOutdated(entries, options) { continue; } - const caseTime = await getLatest(path.join(__dirname, path.dirname(entry), '**', '*')); + const caseTime = await getLatest( + path.join(__dirname, path.dirname(entry), '**', '*') + ); options.log.debug('case time', entry, caseTime); if (passTime < caseTime) { outdated.push(entry); @@ -292,7 +314,7 @@ async function main(entries, options) { } if (options.match) { const exp = new RegExp(options.match); - entries = entries.filter(entry => exp.test(entry)); + entries = entries.filter((entry) => exp.test(entry)); } if (!options.interactive && entries.length === 0) { return; @@ -309,63 +331,69 @@ async function main(entries, options) { } if (require.main === module) { - - const options = yargs. - option('fix', { + const options = yargs + .option('fix', { describe: 'Accept all screenshots as accepted', type: 'boolean', - default: false - }). - option('host', { + default: false, + }) + .option('host', { describe: 'The host for serving rendering cases', - default: '127.0.0.1' - }). - option('port', { + default: '127.0.0.1', + }) + .option('port', { describe: 'The port for serving rendering cases', type: 'number', - default: 3000 - }). - option('match', { + default: 3000, + }) + .option('match', { describe: 'Only run tests matching the provided string RegExp pattern', - type: 'string' - }). - option('force', { + type: 'string', + }) + .option('force', { describe: 'Run all tests (instead of just outdated tests)', type: 'boolean', - default: false - }). - option('interactive', { - describe: 'Run all tests and keep the test server running (this option will be reworked later)', + default: false, + }) + .option('interactive', { + describe: + 'Run all tests and keep the test server running (this option will be reworked later)', type: 'boolean', - default: false - }). - option('log-level', { + default: false, + }) + .option('log-level', { describe: 'The level for logging', choices: ['trace', 'debug', 'info', 'warn', 'error', 'silent'], - default: 'error' - }). - option('timeout', { + default: 'error', + }) + .option('timeout', { describe: 'The timeout for loading pages (in milliseconds)', type: 'number', - default: 60000 - }). - option('headless', { + default: 60000, + }) + .option('headless', { describe: 'Launch Puppeteer in headless mode', type: 'boolean', - default: false - }). - option('puppeteer-args', { + default: false, + }) + .option('puppeteer-args', { describe: 'Additional args for Puppeteer', type: 'array', - default: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'] : [] - }). - parse(); + default: process.env.CI + ? [ + '--no-sandbox', + '--disable-setuid-sandbox', + '--disable-dev-shm-usage', + ] + : [], + }) + .parse(); - const entries = Object.keys(config.entry).map(key => config.entry[key]); + const entries = Object.keys(config.entry).map((key) => config.entry[key]); options.log = log.create({name: 'rendering', level: options.logLevel}); - main(entries, options).catch(err => { + main(entries, options).catch((err) => { options.log.error(err.message); process.exit(1); }); diff --git a/rendering/webpack.config.js b/rendering/webpack.config.js index 64fbb63861..42836e49d7 100644 --- a/rendering/webpack.config.js +++ b/rendering/webpack.config.js @@ -3,7 +3,7 @@ const path = require('path'); const cases = path.join(__dirname, 'cases'); -const caseDirs = fs.readdirSync(cases).filter(name => { +const caseDirs = fs.readdirSync(cases).filter((name) => { let exists = true; try { fs.accessSync(path.join(cases, name, 'main.js')); @@ -14,7 +14,7 @@ const caseDirs = fs.readdirSync(cases).filter(name => { }); const entry = {}; -caseDirs.forEach(c => { +caseDirs.forEach((c) => { entry[`cases/${c}/main`] = `./cases/${c}/main.js`; }); @@ -24,14 +24,14 @@ module.exports = { entry: entry, devtool: 'source-map', module: { - rules: [{ - test: /\.js$/, - use: { - loader: path.join(__dirname, '../examples/webpack/worker-loader.js') + rules: [ + { + test: /\.js$/, + use: { + loader: path.join(__dirname, '../examples/webpack/worker-loader.js'), + }, + include: [path.join(__dirname, '../src/ol/worker')], }, - include: [ - path.join(__dirname, '../src/ol/worker') - ] - }] - } + ], + }, }; diff --git a/src/ol/AssertionError.js b/src/ol/AssertionError.js index 0e49b0ee98..19f70e16a5 100644 --- a/src/ol/AssertionError.js +++ b/src/ol/AssertionError.js @@ -9,14 +9,17 @@ import {VERSION} from './util.js'; * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error. */ class AssertionError extends Error { - /** * @param {number} code Error code. */ constructor(code) { const path = VERSION === 'latest' ? VERSION : 'v' + VERSION.split('-')[0]; - const message = 'Assertion failed. See https://openlayers.org/en/' + path + - '/doc/errors/#' + code + ' for details.'; + const message = + 'Assertion failed. See https://openlayers.org/en/' + + path + + '/doc/errors/#' + + code + + ' for details.'; super(message); @@ -38,7 +41,6 @@ class AssertionError extends Error { // Re-assign message, see https://github.com/Rich-Harris/buble/issues/40 this.message = message; } - } export default AssertionError; diff --git a/src/ol/Collection.js b/src/ol/Collection.js index bf5f0f9183..d2b90afb04 100644 --- a/src/ol/Collection.js +++ b/src/ol/Collection.js @@ -2,27 +2,24 @@ * @module ol/Collection */ import AssertionError from './AssertionError.js'; -import CollectionEventType from './CollectionEventType.js'; import BaseObject from './Object.js'; +import CollectionEventType from './CollectionEventType.js'; import Event from './events/Event.js'; - /** * @enum {string} * @private */ const Property = { - LENGTH: 'length' + LENGTH: 'length', }; - /** * @classdesc * Events emitted by {@link module:ol/Collection~Collection} instances are instances of this * type. */ export class CollectionEvent extends Event { - /** * @param {CollectionEventType} type Type. * @param {*=} opt_element Element. @@ -45,10 +42,8 @@ export class CollectionEvent extends Event { */ this.index = opt_index; } - } - /** * @typedef {Object} Options * @property {boolean} [unique=false] Disallow the same item from being added to @@ -69,13 +64,11 @@ export class CollectionEvent extends Event { * @api */ class Collection extends BaseObject { - /** * @param {Array=} opt_array Array. * @param {Options=} opt_options Collection options. */ constructor(opt_array, opt_options) { - super(); const options = opt_options || {}; @@ -99,7 +92,6 @@ class Collection extends BaseObject { } this.updateLength_(); - } /** @@ -185,7 +177,8 @@ class Collection extends BaseObject { this.array_.splice(index, 0, elem); this.updateLength_(); this.dispatchEvent( - new CollectionEvent(CollectionEventType.ADD, elem, index)); + new CollectionEvent(CollectionEventType.ADD, elem, index) + ); } /** @@ -240,7 +233,9 @@ class Collection extends BaseObject { const prev = this.array_[index]; this.array_.splice(index, 1); this.updateLength_(); - this.dispatchEvent(new CollectionEvent(CollectionEventType.REMOVE, prev, index)); + this.dispatchEvent( + new CollectionEvent(CollectionEventType.REMOVE, prev, index) + ); return prev; } @@ -259,9 +254,11 @@ class Collection extends BaseObject { const prev = this.array_[index]; this.array_[index] = elem; this.dispatchEvent( - new CollectionEvent(CollectionEventType.REMOVE, prev, index)); + new CollectionEvent(CollectionEventType.REMOVE, prev, index) + ); this.dispatchEvent( - new CollectionEvent(CollectionEventType.ADD, elem, index)); + new CollectionEvent(CollectionEventType.ADD, elem, index) + ); } else { for (let j = n; j < index; ++j) { this.insertAt(j, undefined); @@ -291,5 +288,4 @@ class Collection extends BaseObject { } } - export default Collection; diff --git a/src/ol/CollectionEventType.js b/src/ol/CollectionEventType.js index a54821b67f..91a20c1c8c 100644 --- a/src/ol/CollectionEventType.js +++ b/src/ol/CollectionEventType.js @@ -17,5 +17,5 @@ export default { * @event module:ol/Collection.CollectionEvent#remove * @api */ - REMOVE: 'remove' + REMOVE: 'remove', }; diff --git a/src/ol/Disposable.js b/src/ol/Disposable.js index d7800fa2b8..4af7978487 100644 --- a/src/ol/Disposable.js +++ b/src/ol/Disposable.js @@ -7,7 +7,6 @@ * Objects that need to clean up after themselves. */ class Disposable { - constructor() { /** * The object has already been disposed. diff --git a/src/ol/Feature.js b/src/ol/Feature.js index 7246a0a118..590094057f 100644 --- a/src/ol/Feature.js +++ b/src/ol/Feature.js @@ -1,10 +1,10 @@ /** * @module ol/Feature */ +import BaseObject, {getChangeEventType} from './Object.js'; +import EventType from './events/EventType.js'; import {assert} from './asserts.js'; import {listen, unlistenByKey} from './events.js'; -import EventType from './events/EventType.js'; -import BaseObject, {getChangeEventType} from './Object.js'; /** * @typedef {typeof Feature|typeof import("./render/Feature.js").default} FeatureClass @@ -67,7 +67,6 @@ class Feature extends BaseObject { * associated with a `geometry` key. */ constructor(opt_geometryOrProperties) { - super(); /** @@ -101,10 +100,17 @@ class Feature extends BaseObject { */ this.geometryChangeKey_ = null; - this.addEventListener(getChangeEventType(this.geometryName_), this.handleGeometryChanged_); + this.addEventListener( + getChangeEventType(this.geometryName_), + this.handleGeometryChanged_ + ); if (opt_geometryOrProperties) { - if (typeof /** @type {?} */ (opt_geometryOrProperties).getSimplifiedGeometry === 'function') { + if ( + typeof ( + /** @type {?} */ (opt_geometryOrProperties).getSimplifiedGeometry + ) === 'function' + ) { const geometry = /** @type {Geometry} */ (opt_geometryOrProperties); this.setGeometry(geometry); } else { @@ -144,9 +150,7 @@ class Feature extends BaseObject { * @observable */ getGeometry() { - return ( - /** @type {Geometry|undefined} */ (this.get(this.geometryName_)) - ); + return /** @type {Geometry|undefined} */ (this.get(this.geometryName_)); } /** @@ -208,8 +212,12 @@ class Feature extends BaseObject { } const geometry = this.getGeometry(); if (geometry) { - this.geometryChangeKey_ = listen(geometry, - EventType.CHANGE, this.handleGeometryChange_, this); + this.geometryChangeKey_ = listen( + geometry, + EventType.CHANGE, + this.handleGeometryChange_, + this + ); } this.changed(); } @@ -261,14 +269,19 @@ class Feature extends BaseObject { * @api */ setGeometryName(name) { - this.removeEventListener(getChangeEventType(this.geometryName_), this.handleGeometryChanged_); + this.removeEventListener( + getChangeEventType(this.geometryName_), + this.handleGeometryChanged_ + ); this.geometryName_ = name; - this.addEventListener(getChangeEventType(this.geometryName_), this.handleGeometryChanged_); + this.addEventListener( + getChangeEventType(this.geometryName_), + this.handleGeometryChanged_ + ); this.handleGeometryChanged_(); } } - /** * Convert the provided object into a feature style function. Functions passed * through unchanged. Arrays of Style or single style objects wrapped @@ -288,12 +301,11 @@ export function createStyleFunction(obj) { if (Array.isArray(obj)) { styles = obj; } else { - assert(typeof /** @type {?} */ (obj).getZIndex === 'function', - 41); // Expected an `import("./style/Style.js").Style` or an array of `import("./style/Style.js").Style` + assert(typeof (/** @type {?} */ (obj).getZIndex) === 'function', 41); // Expected an `import("./style/Style.js").Style` or an array of `import("./style/Style.js").Style` const style = /** @type {import("./style/Style.js").default} */ (obj); styles = [style]; } - return function() { + return function () { return styles; }; } diff --git a/src/ol/Geolocation.js b/src/ol/Geolocation.js index 094148bb94..1ded94d821 100644 --- a/src/ol/Geolocation.js +++ b/src/ol/Geolocation.js @@ -1,13 +1,16 @@ /** * @module ol/Geolocation */ -import BaseObject, {getChangeEventType} from './Object.js'; import BaseEvent from './events/Event.js'; +import BaseObject, {getChangeEventType} from './Object.js'; import EventType from './events/EventType.js'; import {circular as circularPolygon} from './geom/Polygon.js'; +import { + get as getProjection, + getTransformFromProjections, + identityTransform, +} from './proj.js'; import {toRadians} from './math.js'; -import {get as getProjection, getTransformFromProjections, identityTransform} from './proj.js'; - /** * @enum {string} @@ -22,10 +25,9 @@ const Property = { PROJECTION: 'projection', SPEED: 'speed', TRACKING: 'tracking', - TRACKING_OPTIONS: 'trackingOptions' + TRACKING_OPTIONS: 'trackingOptions', }; - /** * @classdesc * Events emitted on Geolocation error. @@ -49,7 +51,6 @@ class GeolocationError extends BaseEvent { } } - /** * @typedef {Object} Options * @property {boolean} [tracking=false] Start Tracking right after @@ -60,7 +61,6 @@ class GeolocationError extends BaseEvent { * is reported in. */ - /** * @classdesc * Helper class for providing HTML5 Geolocation capabilities. @@ -85,12 +85,10 @@ class GeolocationError extends BaseEvent { * @api */ class Geolocation extends BaseObject { - /** * @param {Options=} opt_options Options. */ constructor(opt_options) { - super(); const options = opt_options || {}; @@ -114,8 +112,14 @@ class Geolocation extends BaseObject { */ this.watchId_ = undefined; - this.addEventListener(getChangeEventType(Property.PROJECTION), this.handleProjectionChanged_); - this.addEventListener(getChangeEventType(Property.TRACKING), this.handleTrackingChanged_); + this.addEventListener( + getChangeEventType(Property.PROJECTION), + this.handleProjectionChanged_ + ); + this.addEventListener( + getChangeEventType(Property.TRACKING), + this.handleTrackingChanged_ + ); if (options.projection !== undefined) { this.setProjection(options.projection); @@ -125,7 +129,6 @@ class Geolocation extends BaseObject { } this.setTracking(options.tracking !== undefined ? options.tracking : false); - } /** @@ -143,7 +146,9 @@ class Geolocation extends BaseObject { const projection = this.getProjection(); if (projection) { this.transform_ = getTransformFromProjections( - getProjection('EPSG:4326'), projection); + getProjection('EPSG:4326'), + projection + ); if (this.position_) { this.set(Property.POSITION, this.transform_(this.position_)); } @@ -160,7 +165,8 @@ class Geolocation extends BaseObject { this.watchId_ = navigator.geolocation.watchPosition( this.positionChange_.bind(this), this.positionError_.bind(this), - this.getTrackingOptions()); + this.getTrackingOptions() + ); } else if (!tracking && this.watchId_ !== undefined) { navigator.geolocation.clearWatch(this.watchId_); this.watchId_ = undefined; @@ -175,13 +181,18 @@ class Geolocation extends BaseObject { positionChange_(position) { const coords = position.coords; this.set(Property.ACCURACY, coords.accuracy); - this.set(Property.ALTITUDE, - coords.altitude === null ? undefined : coords.altitude); - this.set(Property.ALTITUDE_ACCURACY, - coords.altitudeAccuracy === null ? - undefined : coords.altitudeAccuracy); - this.set(Property.HEADING, coords.heading === null ? - undefined : toRadians(coords.heading)); + this.set( + Property.ALTITUDE, + coords.altitude === null ? undefined : coords.altitude + ); + this.set( + Property.ALTITUDE_ACCURACY, + coords.altitudeAccuracy === null ? undefined : coords.altitudeAccuracy + ); + this.set( + Property.HEADING, + coords.heading === null ? undefined : toRadians(coords.heading) + ); if (!this.position_) { this.position_ = [coords.longitude, coords.latitude]; } else { @@ -190,8 +201,7 @@ class Geolocation extends BaseObject { } const projectedPosition = this.transform_(this.position_); this.set(Property.POSITION, projectedPosition); - this.set(Property.SPEED, - coords.speed === null ? undefined : coords.speed); + this.set(Property.SPEED, coords.speed === null ? undefined : coords.speed); const geometry = circularPolygon(this.position_, coords.accuracy); geometry.applyTransform(this.transform_); this.set(Property.ACCURACY_GEOMETRY, geometry); @@ -225,9 +235,9 @@ class Geolocation extends BaseObject { * @api */ getAccuracyGeometry() { - return ( - /** @type {?import("./geom/Polygon.js").default} */ (this.get(Property.ACCURACY_GEOMETRY) || null) - ); + return /** @type {?import("./geom/Polygon.js").default} */ (this.get( + Property.ACCURACY_GEOMETRY + ) || null); } /** @@ -249,7 +259,9 @@ class Geolocation extends BaseObject { * @api */ getAltitudeAccuracy() { - return /** @type {number|undefined} */ (this.get(Property.ALTITUDE_ACCURACY)); + return /** @type {number|undefined} */ (this.get( + Property.ALTITUDE_ACCURACY + )); } /** @@ -272,9 +284,9 @@ class Geolocation extends BaseObject { * @api */ getPosition() { - return ( - /** @type {import("./coordinate.js").Coordinate|undefined} */ (this.get(Property.POSITION)) - ); + return /** @type {import("./coordinate.js").Coordinate|undefined} */ (this.get( + Property.POSITION + )); } /** @@ -285,9 +297,9 @@ class Geolocation extends BaseObject { * @api */ getProjection() { - return ( - /** @type {import("./proj/Projection.js").default|undefined} */ (this.get(Property.PROJECTION)) - ); + return /** @type {import("./proj/Projection.js").default|undefined} */ (this.get( + Property.PROJECTION + )); } /** @@ -321,7 +333,9 @@ class Geolocation extends BaseObject { * @api */ getTrackingOptions() { - return /** @type {PositionOptions|undefined} */ (this.get(Property.TRACKING_OPTIONS)); + return /** @type {PositionOptions|undefined} */ (this.get( + Property.TRACKING_OPTIONS + )); } /** @@ -359,5 +373,4 @@ class Geolocation extends BaseObject { } } - export default Geolocation; diff --git a/src/ol/Image.js b/src/ol/Image.js index d8f9cbb09c..a40663eb44 100644 --- a/src/ol/Image.js +++ b/src/ol/Image.js @@ -1,13 +1,12 @@ /** * @module ol/Image */ +import EventType from './events/EventType.js'; import ImageBase from './ImageBase.js'; import ImageState from './ImageState.js'; -import {listenOnce, unlistenByKey} from './events.js'; -import EventType from './events/EventType.js'; -import {getHeight} from './extent.js'; import {IMAGE_DECODE} from './has.js'; - +import {getHeight} from './extent.js'; +import {listenOnce, unlistenByKey} from './events.js'; /** * A function that takes an {@link module:ol/Image~Image} for the image and a @@ -27,9 +26,7 @@ import {IMAGE_DECODE} from './has.js'; * @api */ - class ImageWrapper extends ImageBase { - /** * @param {import("./extent.js").Extent} extent Extent. * @param {number|undefined} resolution Resolution. @@ -38,8 +35,14 @@ class ImageWrapper extends ImageBase { * @param {?string} crossOrigin Cross origin. * @param {LoadFunction} imageLoadFunction Image load function. */ - constructor(extent, resolution, pixelRatio, src, crossOrigin, imageLoadFunction) { - + constructor( + extent, + resolution, + pixelRatio, + src, + crossOrigin, + imageLoadFunction + ) { super(extent, resolution, pixelRatio, ImageState.IDLE); /** @@ -74,7 +77,6 @@ class ImageWrapper extends ImageBase { * @type {LoadFunction} */ this.imageLoadFunction_ = imageLoadFunction; - } /** @@ -161,35 +163,39 @@ export function listenImage(image, loadHandler, errorHandler) { if (img.src && IMAGE_DECODE) { const promise = img.decode(); let listening = true; - const unlisten = function() { + const unlisten = function () { listening = false; }; - promise.then(function() { - if (listening) { - loadHandler(); - } - }).catch(function(error) { - if (listening) { - // FIXME: Unconditionally call errorHandler() when this bug is fixed upstream: - // https://bugs.webkit.org/show_bug.cgi?id=198527 - if (error.name === 'EncodingError' && error.message === 'Invalid image type.') { + promise + .then(function () { + if (listening) { loadHandler(); - } else { - errorHandler(); } - } - }); + }) + .catch(function (error) { + if (listening) { + // FIXME: Unconditionally call errorHandler() when this bug is fixed upstream: + // https://bugs.webkit.org/show_bug.cgi?id=198527 + if ( + error.name === 'EncodingError' && + error.message === 'Invalid image type.' + ) { + loadHandler(); + } else { + errorHandler(); + } + } + }); return unlisten; } const listenerKeys = [ listenOnce(img, EventType.LOAD, loadHandler), - listenOnce(img, EventType.ERROR, errorHandler) + listenOnce(img, EventType.ERROR, errorHandler), ]; return function unlisten() { listenerKeys.forEach(unlistenByKey); }; } - export default ImageWrapper; diff --git a/src/ol/ImageBase.js b/src/ol/ImageBase.js index 2ec8c6393b..8a6dbfe7c6 100644 --- a/src/ol/ImageBase.js +++ b/src/ol/ImageBase.js @@ -1,15 +1,14 @@ /** * @module ol/ImageBase */ -import {abstract} from './util.js'; import EventTarget from './events/Target.js'; import EventType from './events/EventType.js'; +import {abstract} from './util.js'; /** * @abstract */ class ImageBase extends EventTarget { - /** * @param {import("./extent.js").Extent} extent Extent. * @param {number|undefined} resolution Resolution. @@ -17,7 +16,6 @@ class ImageBase extends EventTarget { * @param {import("./ImageState.js").default} state State. */ constructor(extent, resolution, pixelRatio, state) { - super(); /** @@ -43,7 +41,6 @@ class ImageBase extends EventTarget { * @type {import("./ImageState.js").default} */ this.state = state; - } /** @@ -98,5 +95,4 @@ class ImageBase extends EventTarget { } } - export default ImageBase; diff --git a/src/ol/ImageCanvas.js b/src/ol/ImageCanvas.js index 599beac831..d6893b9ac2 100644 --- a/src/ol/ImageCanvas.js +++ b/src/ol/ImageCanvas.js @@ -4,7 +4,6 @@ import ImageBase from './ImageBase.js'; import ImageState from './ImageState.js'; - /** * A function that is called to trigger asynchronous canvas drawing. It is * called with a "done" callback that should be called when drawing is done. @@ -14,9 +13,7 @@ import ImageState from './ImageState.js'; * @typedef {function(function(Error=): void): void} Loader */ - class ImageCanvas extends ImageBase { - /** * @param {import("./extent.js").Extent} extent Extent. * @param {number} resolution Resolution. @@ -26,8 +23,8 @@ class ImageCanvas extends ImageBase { * support asynchronous canvas drawing. */ constructor(extent, resolution, pixelRatio, canvas, opt_loader) { - - const state = opt_loader !== undefined ? ImageState.IDLE : ImageState.LOADED; + const state = + opt_loader !== undefined ? ImageState.IDLE : ImageState.LOADED; super(extent, resolution, pixelRatio, state); @@ -49,7 +46,6 @@ class ImageCanvas extends ImageBase { * @type {?Error} */ this.error_ = null; - } /** @@ -94,5 +90,4 @@ class ImageCanvas extends ImageBase { } } - export default ImageCanvas; diff --git a/src/ol/ImageState.js b/src/ol/ImageState.js index ab21220a27..e556bd1bb5 100644 --- a/src/ol/ImageState.js +++ b/src/ol/ImageState.js @@ -10,5 +10,5 @@ export default { LOADING: 1, LOADED: 2, ERROR: 3, - EMPTY: 4 + EMPTY: 4, }; diff --git a/src/ol/ImageTile.js b/src/ol/ImageTile.js index de3ad74440..34f37b9f46 100644 --- a/src/ol/ImageTile.js +++ b/src/ol/ImageTile.js @@ -6,9 +6,7 @@ import TileState from './TileState.js'; import {createCanvasContext2D} from './dom.js'; import {listenImage} from './Image.js'; - class ImageTile extends Tile { - /** * @param {import("./tilecoord.js").TileCoord} tileCoord Tile coordinate. * @param {TileState} state State. @@ -17,8 +15,14 @@ class ImageTile extends Tile { * @param {import("./Tile.js").LoadFunction} tileLoadFunction Tile load function. * @param {import("./Tile.js").Options=} opt_options Tile options. */ - constructor(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { - + constructor( + tileCoord, + state, + src, + crossOrigin, + tileLoadFunction, + opt_options + ) { super(tileCoord, state, opt_options); /** @@ -55,7 +59,6 @@ class ImageTile extends Tile { * @type {import("./Tile.js").LoadFunction} */ this.tileLoadFunction_ = tileLoadFunction; - } /** @@ -139,7 +142,6 @@ class ImageTile extends Tile { } } - /** * Get a 1-pixel blank image. * @return {HTMLCanvasElement} Blank image. diff --git a/src/ol/Kinetic.js b/src/ol/Kinetic.js index d80c34a36c..30dbcf14bf 100644 --- a/src/ol/Kinetic.js +++ b/src/ol/Kinetic.js @@ -9,7 +9,6 @@ * @api */ class Kinetic { - /** * @param {number} decay Rate of decay (must be negative). * @param {number} minVelocity Minimum velocity (pixels/millisecond). @@ -17,7 +16,6 @@ class Kinetic { * initial values (milliseconds). */ constructor(decay, minVelocity, delay) { - /** * @private * @type {number} diff --git a/src/ol/Map.js b/src/ol/Map.js index 794ddcebd3..b181d62dbe 100644 --- a/src/ol/Map.js +++ b/src/ol/Map.js @@ -1,11 +1,11 @@ /** * @module ol/Map */ +import CompositeMapRenderer from './renderer/Composite.js'; import PluggableMap from './PluggableMap.js'; +import {assign} from './obj.js'; import {defaults as defaultControls} from './control.js'; import {defaults as defaultInteractions} from './interaction.js'; -import {assign} from './obj.js'; -import CompositeMapRenderer from './renderer/Composite.js'; /** * @classdesc @@ -55,7 +55,6 @@ import CompositeMapRenderer from './renderer/Composite.js'; * @api */ class Map extends PluggableMap { - /** * @param {import("./PluggableMap.js").MapOptions} options Map options. */ @@ -76,5 +75,4 @@ class Map extends PluggableMap { } } - export default Map; diff --git a/src/ol/MapBrowserEvent.js b/src/ol/MapBrowserEvent.js index fe5f426052..2c19af0df1 100644 --- a/src/ol/MapBrowserEvent.js +++ b/src/ol/MapBrowserEvent.js @@ -9,7 +9,6 @@ import MapEvent from './MapEvent.js'; * See {@link module:ol/PluggableMap~PluggableMap} for which events trigger a map browser event. */ class MapBrowserEvent extends MapEvent { - /** * @param {string} type Event type. * @param {import("./PluggableMap.js").default} map Map. @@ -18,7 +17,6 @@ class MapBrowserEvent extends MapEvent { * @param {?import("./PluggableMap.js").FrameState=} opt_frameState Frame state. */ constructor(type, map, browserEvent, opt_dragging, opt_frameState) { - super(type, map, opt_frameState); /** @@ -49,7 +47,6 @@ class MapBrowserEvent extends MapEvent { * @api */ this.dragging = opt_dragging !== undefined ? opt_dragging : false; - } /** @@ -104,5 +101,4 @@ class MapBrowserEvent extends MapEvent { } } - export default MapBrowserEvent; diff --git a/src/ol/MapBrowserEventHandler.js b/src/ol/MapBrowserEventHandler.js index a1d2b67157..ac4095cb13 100644 --- a/src/ol/MapBrowserEventHandler.js +++ b/src/ol/MapBrowserEventHandler.js @@ -3,22 +3,20 @@ */ import 'elm-pep'; -import {DEVICE_PIXEL_RATIO, PASSIVE_EVENT_LISTENERS} from './has.js'; +import EventTarget from './events/Target.js'; +import EventType from './events/EventType.js'; import MapBrowserEventType from './MapBrowserEventType.js'; import MapBrowserPointerEvent from './MapBrowserPointerEvent.js'; -import {listen, unlistenByKey} from './events.js'; -import EventTarget from './events/Target.js'; import PointerEventType from './pointer/EventType.js'; -import EventType from './events/EventType.js'; +import {DEVICE_PIXEL_RATIO, PASSIVE_EVENT_LISTENERS} from './has.js'; +import {listen, unlistenByKey} from './events.js'; class MapBrowserEventHandler extends EventTarget { - /** * @param {import("./PluggableMap.js").default} map The map with the viewport to listen to events on. * @param {number=} moveTolerance The minimal distance the pointer must travel to trigger a move. */ constructor(map, moveTolerance) { - super(map); /** @@ -50,8 +48,9 @@ class MapBrowserEventHandler extends EventTarget { * @type {number} * @private */ - this.moveTolerance_ = moveTolerance ? - moveTolerance * DEVICE_PIXEL_RATIO : DEVICE_PIXEL_RATIO; + this.moveTolerance_ = moveTolerance + ? moveTolerance * DEVICE_PIXEL_RATIO + : DEVICE_PIXEL_RATIO; /** * The most recent "down" type event (or null if none have occurred). @@ -81,9 +80,12 @@ class MapBrowserEventHandler extends EventTarget { * @type {?import("./events.js").EventsKey} * @private */ - this.pointerdownListenerKey_ = listen(element, + this.pointerdownListenerKey_ = listen( + element, PointerEventType.POINTERDOWN, - this.handlePointerDown_, this); + this.handlePointerDown_, + this + ); /** * @type {PointerEvent} @@ -95,17 +97,23 @@ class MapBrowserEventHandler extends EventTarget { * @type {?import("./events.js").EventsKey} * @private */ - this.relayedListenerKey_ = listen(element, + this.relayedListenerKey_ = listen( + element, PointerEventType.POINTERMOVE, - this.relayEvent_, this); + this.relayEvent_, + this + ); /** * @private */ this.boundHandleTouchMove_ = this.handleTouchMove_.bind(this); - this.element_.addEventListener(EventType.TOUCHMOVE, this.boundHandleTouchMove_, - PASSIVE_EVENT_LISTENERS ? {passive: false} : false); + this.element_.addEventListener( + EventType.TOUCHMOVE, + this.boundHandleTouchMove_, + PASSIVE_EVENT_LISTENERS ? {passive: false} : false + ); } /** @@ -115,23 +123,35 @@ class MapBrowserEventHandler extends EventTarget { */ emulateClick_(pointerEvent) { let newEvent = new MapBrowserPointerEvent( - MapBrowserEventType.CLICK, this.map_, pointerEvent); + MapBrowserEventType.CLICK, + this.map_, + pointerEvent + ); this.dispatchEvent(newEvent); if (this.clickTimeoutId_ !== undefined) { // double-click clearTimeout(this.clickTimeoutId_); this.clickTimeoutId_ = undefined; newEvent = new MapBrowserPointerEvent( - MapBrowserEventType.DBLCLICK, this.map_, pointerEvent); + MapBrowserEventType.DBLCLICK, + this.map_, + pointerEvent + ); this.dispatchEvent(newEvent); } else { // click - this.clickTimeoutId_ = setTimeout(function() { - this.clickTimeoutId_ = undefined; - const newEvent = new MapBrowserPointerEvent( - MapBrowserEventType.SINGLECLICK, this.map_, pointerEvent); - this.dispatchEvent(newEvent); - }.bind(this), 250); + this.clickTimeoutId_ = setTimeout( + function () { + this.clickTimeoutId_ = undefined; + const newEvent = new MapBrowserPointerEvent( + MapBrowserEventType.SINGLECLICK, + this.map_, + pointerEvent + ); + this.dispatchEvent(newEvent); + }.bind(this), + 250 + ); } } @@ -145,8 +165,10 @@ class MapBrowserEventHandler extends EventTarget { updateActivePointers_(pointerEvent) { const event = pointerEvent; - if (event.type == MapBrowserEventType.POINTERUP || - event.type == MapBrowserEventType.POINTERCANCEL) { + if ( + event.type == MapBrowserEventType.POINTERUP || + event.type == MapBrowserEventType.POINTERCANCEL + ) { delete this.trackedTouches_[event.pointerId]; } else if (event.type == MapBrowserEventType.POINTERDOWN) { this.trackedTouches_[event.pointerId] = true; @@ -162,7 +184,10 @@ class MapBrowserEventHandler extends EventTarget { handlePointerUp_(pointerEvent) { this.updateActivePointers_(pointerEvent); const newEvent = new MapBrowserPointerEvent( - MapBrowserEventType.POINTERUP, this.map_, pointerEvent); + MapBrowserEventType.POINTERUP, + this.map_, + pointerEvent + ); this.dispatchEvent(newEvent); // We emulate click events on left mouse button click, touch contact, and pen @@ -171,7 +196,11 @@ class MapBrowserEventHandler extends EventTarget { // See http://www.w3.org/TR/pointerevents/#button-states // We only fire click, singleclick, and doubleclick if nobody has called // event.stopPropagation() or event.preventDefault(). - if (!newEvent.propagationStopped && !this.dragging_ && this.isMouseActionButton_(pointerEvent)) { + if ( + !newEvent.propagationStopped && + !this.dragging_ && + this.isMouseActionButton_(pointerEvent) + ) { this.emulateClick_(this.down_); } @@ -201,19 +230,28 @@ class MapBrowserEventHandler extends EventTarget { handlePointerDown_(pointerEvent) { this.updateActivePointers_(pointerEvent); const newEvent = new MapBrowserPointerEvent( - MapBrowserEventType.POINTERDOWN, this.map_, pointerEvent); + MapBrowserEventType.POINTERDOWN, + this.map_, + pointerEvent + ); this.dispatchEvent(newEvent); this.down_ = pointerEvent; if (this.dragListenerKeys_.length === 0) { this.dragListenerKeys_.push( - listen(document, + listen( + document, MapBrowserEventType.POINTERMOVE, - this.handlePointerMove_, this), - listen(document, + this.handlePointerMove_, + this + ), + listen( + document, MapBrowserEventType.POINTERUP, - this.handlePointerUp_, this), + this.handlePointerUp_, + this + ), /* Note that the listener for `pointercancel is set up on * `pointerEventHandler_` and not `documentPointerEventHandler_` like * the `pointerup` and `pointermove` listeners. @@ -227,9 +265,12 @@ class MapBrowserEventHandler extends EventTarget { * only receive a `touchcancel` from `pointerEventHandler_`, because it is * only registered there. */ - listen(this.element_, + listen( + this.element_, MapBrowserEventType.POINTERCANCEL, - this.handlePointerUp_, this) + this.handlePointerUp_, + this + ) ); } } @@ -246,8 +287,11 @@ class MapBrowserEventHandler extends EventTarget { if (this.isMoving_(pointerEvent)) { this.dragging_ = true; const newEvent = new MapBrowserPointerEvent( - MapBrowserEventType.POINTERDRAG, this.map_, pointerEvent, - this.dragging_); + MapBrowserEventType.POINTERDRAG, + this.map_, + pointerEvent, + this.dragging_ + ); this.dispatchEvent(newEvent); } } @@ -262,8 +306,14 @@ class MapBrowserEventHandler extends EventTarget { relayEvent_(pointerEvent) { this.originalPointerMoveEvent_ = pointerEvent; const dragging = !!(this.down_ && this.isMoving_(pointerEvent)); - this.dispatchEvent(new MapBrowserPointerEvent( - pointerEvent.type, this.map_, pointerEvent, dragging)); + this.dispatchEvent( + new MapBrowserPointerEvent( + pointerEvent.type, + this.map_, + pointerEvent, + dragging + ) + ); } /** @@ -277,7 +327,10 @@ class MapBrowserEventHandler extends EventTarget { handleTouchMove_(event) { // 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) { + if ( + !this.originalPointerMoveEvent_ || + this.originalPointerMoveEvent_.defaultPrevented + ) { event.preventDefault(); } } @@ -289,9 +342,12 @@ class MapBrowserEventHandler extends EventTarget { * @private */ isMoving_(pointerEvent) { - return this.dragging_ || - Math.abs(pointerEvent.clientX - this.down_.clientX) > this.moveTolerance_ || - Math.abs(pointerEvent.clientY - this.down_.clientY) > this.moveTolerance_; + return ( + this.dragging_ || + Math.abs(pointerEvent.clientX - this.down_.clientX) > + this.moveTolerance_ || + Math.abs(pointerEvent.clientY - this.down_.clientY) > this.moveTolerance_ + ); } /** @@ -302,7 +358,10 @@ class MapBrowserEventHandler extends EventTarget { unlistenByKey(this.relayedListenerKey_); this.relayedListenerKey_ = null; } - this.element_.removeEventListener(EventType.TOUCHMOVE, this.boundHandleTouchMove_); + this.element_.removeEventListener( + EventType.TOUCHMOVE, + this.boundHandleTouchMove_ + ); if (this.pointerdownListenerKey_) { unlistenByKey(this.pointerdownListenerKey_); @@ -317,5 +376,4 @@ class MapBrowserEventHandler extends EventTarget { } } - export default MapBrowserEventHandler; diff --git a/src/ol/MapBrowserEventType.js b/src/ol/MapBrowserEventType.js index 75e0d84c21..d345607821 100644 --- a/src/ol/MapBrowserEventType.js +++ b/src/ol/MapBrowserEventType.js @@ -8,7 +8,6 @@ import EventType from './events/EventType.js'; * @enum {string} */ export default { - /** * A true single click with no dragging and no double click. Note that this * event is delayed by 250 ms to ensure that it is not a double click. @@ -52,5 +51,5 @@ export default { POINTEROUT: 'pointerout', POINTERENTER: 'pointerenter', POINTERLEAVE: 'pointerleave', - POINTERCANCEL: 'pointercancel' + POINTERCANCEL: 'pointercancel', }; diff --git a/src/ol/MapBrowserPointerEvent.js b/src/ol/MapBrowserPointerEvent.js index 3eadb83837..af501590a3 100644 --- a/src/ol/MapBrowserPointerEvent.js +++ b/src/ol/MapBrowserPointerEvent.js @@ -4,7 +4,6 @@ import MapBrowserEvent from './MapBrowserEvent.js'; class MapBrowserPointerEvent extends MapBrowserEvent { - /** * @param {string} type Event type. * @param {import("./PluggableMap.js").default} map Map. @@ -13,7 +12,6 @@ class MapBrowserPointerEvent extends MapBrowserEvent { * @param {?import("./PluggableMap.js").FrameState=} opt_frameState Frame state. */ constructor(type, map, pointerEvent, opt_dragging, opt_frameState) { - super(type, map, pointerEvent, opt_dragging, opt_frameState); /** @@ -21,9 +19,7 @@ class MapBrowserPointerEvent extends MapBrowserEvent { * @type {PointerEvent} */ this.pointerEvent = pointerEvent; - } - } export default MapBrowserPointerEvent; diff --git a/src/ol/MapEvent.js b/src/ol/MapEvent.js index 83a1ed9827..5722b3f681 100644 --- a/src/ol/MapEvent.js +++ b/src/ol/MapEvent.js @@ -9,14 +9,12 @@ import Event from './events/Event.js'; * See {@link module:ol/PluggableMap~PluggableMap} for which events trigger a map event. */ class MapEvent extends Event { - /** * @param {string} type Event type. * @param {import("./PluggableMap.js").default} map Map. * @param {?import("./PluggableMap.js").FrameState=} opt_frameState Frame state. */ constructor(type, map, opt_frameState) { - super(type); /** @@ -32,9 +30,7 @@ class MapEvent extends Event { * @api */ this.frameState = opt_frameState !== undefined ? opt_frameState : null; - } - } export default MapEvent; diff --git a/src/ol/MapEventType.js b/src/ol/MapEventType.js index 0f25adf5b9..1f919c3e38 100644 --- a/src/ol/MapEventType.js +++ b/src/ol/MapEventType.js @@ -6,7 +6,6 @@ * @enum {string} */ export default { - /** * Triggered after a map frame is rendered. * @event module:ol/MapEvent~MapEvent#postrender @@ -26,6 +25,5 @@ export default { * @event module:ol/MapEvent~MapEvent#moveend * @api */ - MOVEEND: 'moveend' - + MOVEEND: 'moveend', }; diff --git a/src/ol/MapProperty.js b/src/ol/MapProperty.js index fe940e027c..cca1044ed5 100644 --- a/src/ol/MapProperty.js +++ b/src/ol/MapProperty.js @@ -9,5 +9,5 @@ export default { LAYERGROUP: 'layergroup', SIZE: 'size', TARGET: 'target', - VIEW: 'view' + VIEW: 'view', }; diff --git a/src/ol/Object.js b/src/ol/Object.js index 8b243b3a4c..a462129c10 100644 --- a/src/ol/Object.js +++ b/src/ol/Object.js @@ -1,19 +1,17 @@ /** * @module ol/Object */ -import {getUid} from './util.js'; +import Event from './events/Event.js'; import ObjectEventType from './ObjectEventType.js'; import Observable from './Observable.js'; -import Event from './events/Event.js'; import {assign} from './obj.js'; - +import {getUid} from './util.js'; /** * @classdesc * Events emitted by {@link module:ol/Object~BaseObject} instances are instances of this type. */ export class ObjectEvent extends Event { - /** * @param {string} type The event type. * @param {string} key The property name. @@ -36,12 +34,9 @@ export class ObjectEvent extends Event { * @api */ this.oldValue = oldValue; - } - } - /** * @classdesc * Abstract base class; normally only used for creating subclasses and not @@ -86,7 +81,6 @@ export class ObjectEvent extends Event { * @api */ class BaseObject extends Observable { - /** * @param {Object=} opt_values An object with key-value pairs. */ @@ -203,22 +197,19 @@ class BaseObject extends Observable { } } - /** * @type {Object} */ const changeEventTypeCache = {}; - /** * @param {string} key Key name. * @return {string} Change name. */ export function getChangeEventType(key) { - return changeEventTypeCache.hasOwnProperty(key) ? - changeEventTypeCache[key] : - (changeEventTypeCache[key] = 'change:' + key); + return changeEventTypeCache.hasOwnProperty(key) + ? changeEventTypeCache[key] + : (changeEventTypeCache[key] = 'change:' + key); } - export default BaseObject; diff --git a/src/ol/ObjectEventType.js b/src/ol/ObjectEventType.js index 1cfd272211..58dcb20f31 100644 --- a/src/ol/ObjectEventType.js +++ b/src/ol/ObjectEventType.js @@ -11,5 +11,5 @@ export default { * @event module:ol/Object.ObjectEvent#propertychange * @api */ - PROPERTYCHANGE: 'propertychange' + PROPERTYCHANGE: 'propertychange', }; diff --git a/src/ol/Observable.js b/src/ol/Observable.js index 347e131c73..f1cdd7b951 100644 --- a/src/ol/Observable.js +++ b/src/ol/Observable.js @@ -1,9 +1,9 @@ /** * @module ol/Observable */ -import {listen, unlistenByKey, listenOnce} from './events.js'; import EventTarget from './events/Target.js'; import EventType from './events/EventType.js'; +import {listen, listenOnce, unlistenByKey} from './events.js'; /** * @classdesc @@ -18,7 +18,6 @@ import EventType from './events/EventType.js'; */ class Observable extends EventTarget { constructor() { - super(); /** @@ -26,7 +25,6 @@ class Observable extends EventTarget { * @type {number} */ this.revision_ = 0; - } /** @@ -109,7 +107,6 @@ class Observable extends EventTarget { } } - /** * Removes an event listener using the key returned by `on()` or `once()`. * @param {import("./events.js").EventsKey|Array} key The key returned by `on()` @@ -126,5 +123,4 @@ export function unByKey(key) { } } - export default Observable; diff --git a/src/ol/Overlay.js b/src/ol/Overlay.js index c99aea8452..a4d7d22766 100644 --- a/src/ol/Overlay.js +++ b/src/ol/Overlay.js @@ -1,14 +1,13 @@ /** * @module ol/Overlay */ -import MapEventType from './MapEventType.js'; import BaseObject, {getChangeEventType} from './Object.js'; +import MapEventType from './MapEventType.js'; import OverlayPositioning from './OverlayPositioning.js'; import {CLASS_SELECTABLE} from './css.js'; -import {removeNode, removeChildren, outerWidth, outerHeight} from './dom.js'; -import {listen, unlistenByKey} from './events.js'; import {containsExtent} from './extent.js'; - +import {listen, unlistenByKey} from './events.js'; +import {outerHeight, outerWidth, removeChildren, removeNode} from './dom.js'; /** * @typedef {Object} Options @@ -56,7 +55,6 @@ import {containsExtent} from './extent.js'; * name. */ - /** * @typedef {Object} PanOptions * @property {number} [duration=1000] The duration of the animation in @@ -82,10 +80,9 @@ const Property = { MAP: 'map', OFFSET: 'offset', POSITION: 'position', - POSITIONING: 'positioning' + POSITIONING: 'positioning', }; - /** * @classdesc * An element to be displayed over the map and attached to a single map @@ -107,12 +104,10 @@ const Property = { * @api */ class Overlay extends BaseObject { - /** * @param {Options} options Overlay options. */ constructor(options) { - super(); /** @@ -131,8 +126,8 @@ class Overlay extends BaseObject { * @protected * @type {boolean} */ - this.insertFirst = options.insertFirst !== undefined ? - options.insertFirst : true; + this.insertFirst = + options.insertFirst !== undefined ? options.insertFirst : true; /** * @protected @@ -145,22 +140,24 @@ class Overlay extends BaseObject { * @type {HTMLElement} */ this.element = document.createElement('div'); - this.element.className = options.className !== undefined ? - options.className : 'ol-overlay-container ' + CLASS_SELECTABLE; + this.element.className = + options.className !== undefined + ? options.className + : 'ol-overlay-container ' + CLASS_SELECTABLE; this.element.style.position = 'absolute'; let autoPan = options.autoPan; - if (autoPan && ('object' !== typeof autoPan)) { + if (autoPan && 'object' !== typeof autoPan) { autoPan = { animation: options.autoPanAnimation, - margin: options.autoPanMargin + margin: options.autoPanMargin, }; } /** * @protected * @type {PanIntoViewOptions|false} */ - this.autoPan = /** @type {PanIntoViewOptions} */(autoPan) || false; + this.autoPan = /** @type {PanIntoViewOptions} */ (autoPan) || false; /** * @protected @@ -169,7 +166,7 @@ class Overlay extends BaseObject { */ this.rendered = { transform_: '', - visible: true + visible: true, }; /** @@ -178,11 +175,26 @@ class Overlay extends BaseObject { */ this.mapPostrenderListenerKey = null; - this.addEventListener(getChangeEventType(Property.ELEMENT), this.handleElementChanged); - this.addEventListener(getChangeEventType(Property.MAP), this.handleMapChanged); - this.addEventListener(getChangeEventType(Property.OFFSET), this.handleOffsetChanged); - this.addEventListener(getChangeEventType(Property.POSITION), this.handlePositionChanged); - this.addEventListener(getChangeEventType(Property.POSITIONING), this.handlePositioningChanged); + this.addEventListener( + getChangeEventType(Property.ELEMENT), + this.handleElementChanged + ); + this.addEventListener( + getChangeEventType(Property.MAP), + this.handleMapChanged + ); + this.addEventListener( + getChangeEventType(Property.OFFSET), + this.handleOffsetChanged + ); + this.addEventListener( + getChangeEventType(Property.POSITION), + this.handlePositionChanged + ); + this.addEventListener( + getChangeEventType(Property.POSITIONING), + this.handlePositioningChanged + ); if (options.element !== undefined) { this.setElement(options.element); @@ -190,14 +202,15 @@ class Overlay extends BaseObject { this.setOffset(options.offset !== undefined ? options.offset : [0, 0]); - this.setPositioning(options.positioning !== undefined ? - /** @type {OverlayPositioning} */ (options.positioning) : - OverlayPositioning.TOP_LEFT); + this.setPositioning( + options.positioning !== undefined + ? /** @type {OverlayPositioning} */ (options.positioning) + : OverlayPositioning.TOP_LEFT + ); if (options.position !== undefined) { this.setPosition(options.position); } - } /** @@ -227,9 +240,9 @@ class Overlay extends BaseObject { * @api */ getMap() { - return ( - /** @type {import("./PluggableMap.js").default|undefined} */ (this.get(Property.MAP)) - ); + return /** @type {import("./PluggableMap.js").default|undefined} */ (this.get( + Property.MAP + )); } /** @@ -250,9 +263,9 @@ class Overlay extends BaseObject { * @api */ getPosition() { - return ( - /** @type {import("./coordinate.js").Coordinate|undefined} */ (this.get(Property.POSITION)) - ); + return /** @type {import("./coordinate.js").Coordinate|undefined} */ (this.get( + Property.POSITION + )); } /** @@ -263,9 +276,7 @@ class Overlay extends BaseObject { * @api */ getPositioning() { - return ( - /** @type {OverlayPositioning} */ (this.get(Property.POSITIONING)) - ); + return /** @type {OverlayPositioning} */ (this.get(Property.POSITIONING)); } /** @@ -290,11 +301,16 @@ class Overlay extends BaseObject { } const map = this.getMap(); if (map) { - this.mapPostrenderListenerKey = listen(map, - MapEventType.POSTRENDER, this.render, this); + this.mapPostrenderListenerKey = listen( + map, + MapEventType.POSTRENDER, + this.render, + this + ); this.updatePixelPosition(); - const container = this.stopEvent ? - map.getOverlayContainerStopEvent() : map.getOverlayContainer(); + const container = this.stopEvent + ? map.getOverlayContainerStopEvent() + : map.getOverlayContainer(); if (this.insertFirst) { container.insertBefore(this.element, container.childNodes[0] || null); } else { @@ -402,9 +418,13 @@ class Overlay extends BaseObject { const mapRect = this.getRect(map.getTargetElement(), map.getSize()); const element = this.getElement(); - const overlayRect = this.getRect(element, [outerWidth(element), outerHeight(element)]); + const overlayRect = this.getRect(element, [ + outerWidth(element), + outerHeight(element), + ]); - const myMargin = (panIntoViewOptions.margin === undefined) ? 20 : panIntoViewOptions.margin; + const myMargin = + panIntoViewOptions.margin === undefined ? 20 : panIntoViewOptions.margin; if (!containsExtent(mapRect, overlayRect)) { // the overlay is not completely inside the viewport, so pan the map const offsetLeft = overlayRect[0] - mapRect[0]; @@ -429,18 +449,17 @@ class Overlay extends BaseObject { } if (delta[0] !== 0 || delta[1] !== 0) { - const center = /** @type {import("./coordinate.js").Coordinate} */ (map.getView().getCenterInternal()); + const center = /** @type {import("./coordinate.js").Coordinate} */ (map + .getView() + .getCenterInternal()); const centerPx = map.getPixelFromCoordinateInternal(center); - const newCenterPx = [ - centerPx[0] + delta[0], - centerPx[1] + delta[1] - ]; + const newCenterPx = [centerPx[0] + delta[0], centerPx[1] + delta[1]]; const panOptions = panIntoViewOptions.animation || {}; map.getView().animateInternal({ center: map.getCoordinateFromPixelInternal(newCenterPx), duration: panOptions.duration, - easing: panOptions.easing + easing: panOptions.easing, }); } } @@ -457,12 +476,7 @@ class Overlay extends BaseObject { const box = element.getBoundingClientRect(); const offsetX = box.left + window.pageXOffset; const offsetY = box.top + window.pageYOffset; - return [ - offsetX, - offsetY, - offsetX + size[0], - offsetY + size[1] - ]; + return [offsetX, offsetY, offsetX + size[0], offsetY + size[1]]; } /** @@ -522,22 +536,30 @@ class Overlay extends BaseObject { const y = Math.round(pixel[1] + offset[1]) + 'px'; let posX = '0%'; let posY = '0%'; - if (positioning == OverlayPositioning.BOTTOM_RIGHT || - positioning == OverlayPositioning.CENTER_RIGHT || - positioning == OverlayPositioning.TOP_RIGHT) { + if ( + positioning == OverlayPositioning.BOTTOM_RIGHT || + positioning == OverlayPositioning.CENTER_RIGHT || + positioning == OverlayPositioning.TOP_RIGHT + ) { posX = '-100%'; - } else if (positioning == OverlayPositioning.BOTTOM_CENTER || - positioning == OverlayPositioning.CENTER_CENTER || - positioning == OverlayPositioning.TOP_CENTER) { + } else if ( + positioning == OverlayPositioning.BOTTOM_CENTER || + positioning == OverlayPositioning.CENTER_CENTER || + positioning == OverlayPositioning.TOP_CENTER + ) { posX = '-50%'; } - if (positioning == OverlayPositioning.BOTTOM_LEFT || - positioning == OverlayPositioning.BOTTOM_CENTER || - positioning == OverlayPositioning.BOTTOM_RIGHT) { + if ( + positioning == OverlayPositioning.BOTTOM_LEFT || + positioning == OverlayPositioning.BOTTOM_CENTER || + positioning == OverlayPositioning.BOTTOM_RIGHT + ) { posY = '-100%'; - } else if (positioning == OverlayPositioning.CENTER_LEFT || - positioning == OverlayPositioning.CENTER_CENTER || - positioning == OverlayPositioning.CENTER_RIGHT) { + } else if ( + positioning == OverlayPositioning.CENTER_LEFT || + positioning == OverlayPositioning.CENTER_CENTER || + positioning == OverlayPositioning.CENTER_RIGHT + ) { posY = '-50%'; } const transform = `translate(${posX}, ${posY}) translate(${x}, ${y})`; @@ -558,5 +580,4 @@ class Overlay extends BaseObject { } } - export default Overlay; diff --git a/src/ol/OverlayPositioning.js b/src/ol/OverlayPositioning.js index b0584fe558..20706d1355 100644 --- a/src/ol/OverlayPositioning.js +++ b/src/ol/OverlayPositioning.js @@ -17,5 +17,5 @@ export default { CENTER_RIGHT: 'center-right', TOP_LEFT: 'top-left', TOP_CENTER: 'top-center', - TOP_RIGHT: 'top-right' + TOP_RIGHT: 'top-right', }; diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js index 51b1b5648d..bb9b8868bd 100644 --- a/src/ol/PluggableMap.js +++ b/src/ol/PluggableMap.js @@ -1,32 +1,44 @@ /** * @module ol/PluggableMap */ +import BaseObject, {getChangeEventType} from './Object.js'; import Collection from './Collection.js'; import CollectionEventType from './CollectionEventType.js'; +import EventType from './events/EventType.js'; +import LayerGroup from './layer/Group.js'; import MapBrowserEvent from './MapBrowserEvent.js'; import MapBrowserEventHandler from './MapBrowserEventHandler.js'; import MapBrowserEventType from './MapBrowserEventType.js'; import MapEvent from './MapEvent.js'; import MapEventType from './MapEventType.js'; import MapProperty from './MapProperty.js'; -import RenderEventType from './render/EventType.js'; -import BaseObject, {getChangeEventType} from './Object.js'; import ObjectEventType from './ObjectEventType.js'; +import RenderEventType from './render/EventType.js'; import TileQueue, {getTilePriority} from './TileQueue.js'; import View from './View.js'; import ViewHint from './ViewHint.js'; -import {assert} from './asserts.js'; -import {removeNode} from './dom.js'; -import {listen, unlistenByKey} from './events.js'; -import EventType from './events/EventType.js'; -import {clone, createOrUpdateEmpty, equals, getForViewAndSize, isEmpty} from './extent.js'; +import { + DEVICE_PIXEL_RATIO, + IMAGE_DECODE, + PASSIVE_EVENT_LISTENERS, +} from './has.js'; import {TRUE} from './functions.js'; -import {DEVICE_PIXEL_RATIO, IMAGE_DECODE, PASSIVE_EVENT_LISTENERS} from './has.js'; -import LayerGroup from './layer/Group.js'; +import { + apply as applyTransform, + create as createTransform, +} from './transform.js'; +import {assert} from './asserts.js'; +import { + clone, + createOrUpdateEmpty, + equals, + getForViewAndSize, + isEmpty, +} from './extent.js'; +import {fromUserCoordinate, toUserCoordinate} from './proj.js'; import {hasArea} from './size.js'; -import {create as createTransform, apply as applyTransform} from './transform.js'; -import {toUserCoordinate, fromUserCoordinate} from './proj.js'; - +import {listen, unlistenByKey} from './events.js'; +import {removeNode} from './dom.js'; /** * State of the current frame. Only `pixelRatio`, `time` and `viewState` should @@ -51,19 +63,16 @@ import {toUserCoordinate, fromUserCoordinate} from './proj.js'; * @property {!Object>} wantedTiles */ - /** * @typedef {Object} DeclutterItems * @property {Array<*>} items Declutter items of an executor. * @property {number} opacity Layer opacity. */ - /** * @typedef {function(PluggableMap, ?FrameState): any} PostRenderFunction */ - /** * @typedef {Object} AtPixelOptions * @property {undefined|function(import("./layer/Layer.js").default): boolean} [layerFilter] Layer filter @@ -77,7 +86,6 @@ import {toUserCoordinate, fromUserCoordinate} from './proj.js'; * +/- 1 world width. Works only if a projection is used that can be wrapped. */ - /** * @typedef {Object} MapOptionsInternal * @property {Collection} [controls] @@ -87,7 +95,6 @@ import {toUserCoordinate, fromUserCoordinate} from './proj.js'; * @property {Object} values */ - /** * Object literal with config options for the map. * @typedef {Object} MapOptions @@ -128,7 +135,6 @@ import {toUserCoordinate, fromUserCoordinate} from './proj.js'; * {@link module:ol/Map~Map#setView}. */ - /** * @fires import("./MapBrowserEvent.js").MapBrowserEvent * @fires import("./MapEvent.js").MapEvent @@ -138,12 +144,10 @@ import {toUserCoordinate, fromUserCoordinate} from './proj.js'; * @api */ class PluggableMap extends BaseObject { - /** * @param {MapOptions} options Map options. */ constructor(options) { - super(); const optionsInternal = createOptionsInternal(options); @@ -151,19 +155,21 @@ class PluggableMap extends BaseObject { /** @private */ this.boundHandleBrowserEvent_ = this.handleBrowserEvent.bind(this); - /** * @type {number} * @private */ - this.maxTilesLoading_ = options.maxTilesLoading !== undefined ? options.maxTilesLoading : 16; + this.maxTilesLoading_ = + options.maxTilesLoading !== undefined ? options.maxTilesLoading : 16; /** * @private * @type {number} */ - this.pixelRatio_ = options.pixelRatio !== undefined ? - options.pixelRatio : DEVICE_PIXEL_RATIO; + this.pixelRatio_ = + options.pixelRatio !== undefined + ? options.pixelRatio + : DEVICE_PIXEL_RATIO; /** * @private @@ -180,7 +186,7 @@ class PluggableMap extends BaseObject { /** * @private */ - this.animationDelay_ = function() { + this.animationDelay_ = function () { this.animationDelayKey_ = undefined; this.renderFrame_(Date.now()); }.bind(this); @@ -239,13 +245,13 @@ class PluggableMap extends BaseObject { * @type {!HTMLElement} */ this.viewport_ = document.createElement('div'); - this.viewport_.className = 'ol-viewport' + ('ontouchstart' in window ? ' ol-touch' : ''); + this.viewport_.className = + 'ol-viewport' + ('ontouchstart' in window ? ' ol-touch' : ''); this.viewport_.style.position = 'relative'; this.viewport_.style.overflow = 'hidden'; this.viewport_.style.width = '100%'; this.viewport_.style.height = '100%'; - /** * @private * @type {!HTMLElement} @@ -274,10 +280,16 @@ class PluggableMap extends BaseObject { * @private * @type {MapBrowserEventHandler} */ - this.mapBrowserEventHandler_ = new MapBrowserEventHandler(this, options.moveTolerance); + this.mapBrowserEventHandler_ = new MapBrowserEventHandler( + this, + options.moveTolerance + ); const handleMapBrowserEvent = this.handleMapBrowserEvent.bind(this); for (const key in MapBrowserEventType) { - this.mapBrowserEventHandler_.addEventListener(MapBrowserEventType[key], handleMapBrowserEvent); + this.mapBrowserEventHandler_.addEventListener( + MapBrowserEventType[key], + handleMapBrowserEvent + ); } /** @@ -293,9 +305,16 @@ class PluggableMap extends BaseObject { this.keyHandlerKeys_ = null; const handleBrowserEvent = this.handleBrowserEvent.bind(this); - this.viewport_.addEventListener(EventType.CONTEXTMENU, handleBrowserEvent, false); - this.viewport_.addEventListener(EventType.WHEEL, handleBrowserEvent, - PASSIVE_EVENT_LISTENERS ? {passive: false} : false); + this.viewport_.addEventListener( + EventType.CONTEXTMENU, + handleBrowserEvent, + false + ); + this.viewport_.addEventListener( + EventType.WHEEL, + handleBrowserEvent, + PASSIVE_EVENT_LISTENERS ? {passive: false} : false + ); /** * @type {Collection} @@ -346,12 +365,25 @@ class PluggableMap extends BaseObject { */ this.tileQueue_ = new TileQueue( this.getTilePriority.bind(this), - this.handleTileChange_.bind(this)); + this.handleTileChange_.bind(this) + ); - this.addEventListener(getChangeEventType(MapProperty.LAYERGROUP), this.handleLayerGroupChanged_); - this.addEventListener(getChangeEventType(MapProperty.VIEW), this.handleViewChanged_); - this.addEventListener(getChangeEventType(MapProperty.SIZE), this.handleSizeChanged_); - this.addEventListener(getChangeEventType(MapProperty.TARGET), this.handleTargetChanged_); + this.addEventListener( + getChangeEventType(MapProperty.LAYERGROUP), + this.handleLayerGroupChanged_ + ); + this.addEventListener( + getChangeEventType(MapProperty.VIEW), + this.handleViewChanged_ + ); + this.addEventListener( + getChangeEventType(MapProperty.SIZE), + this.handleSizeChanged_ + ); + this.addEventListener( + getChangeEventType(MapProperty.TARGET), + this.handleTargetChanged_ + ); // setProperties will trigger the rendering of the map if the map // is "defined" already. @@ -362,74 +394,89 @@ class PluggableMap extends BaseObject { * @param {import("./control/Control.js").default} control Control. * @this {PluggableMap} */ - function(control) { + function (control) { control.setMap(this); - }.bind(this)); + }.bind(this) + ); - this.controls.addEventListener(CollectionEventType.ADD, + this.controls.addEventListener( + CollectionEventType.ADD, /** * @param {import("./Collection.js").CollectionEvent} event CollectionEvent. */ - function(event) { + function (event) { event.element.setMap(this); - }.bind(this)); + }.bind(this) + ); - this.controls.addEventListener(CollectionEventType.REMOVE, + this.controls.addEventListener( + CollectionEventType.REMOVE, /** * @param {import("./Collection.js").CollectionEvent} event CollectionEvent. */ - function(event) { + function (event) { event.element.setMap(null); - }.bind(this)); + }.bind(this) + ); this.interactions.forEach( /** * @param {import("./interaction/Interaction.js").default} interaction Interaction. * @this {PluggableMap} */ - function(interaction) { + function (interaction) { interaction.setMap(this); - }.bind(this)); + }.bind(this) + ); - this.interactions.addEventListener(CollectionEventType.ADD, + this.interactions.addEventListener( + CollectionEventType.ADD, /** * @param {import("./Collection.js").CollectionEvent} event CollectionEvent. */ - function(event) { + function (event) { event.element.setMap(this); - }.bind(this)); + }.bind(this) + ); - this.interactions.addEventListener(CollectionEventType.REMOVE, + this.interactions.addEventListener( + CollectionEventType.REMOVE, /** * @param {import("./Collection.js").CollectionEvent} event CollectionEvent. */ - function(event) { + function (event) { event.element.setMap(null); - }.bind(this)); + }.bind(this) + ); this.overlays_.forEach(this.addOverlayInternal_.bind(this)); - this.overlays_.addEventListener(CollectionEventType.ADD, + this.overlays_.addEventListener( + CollectionEventType.ADD, /** * @param {import("./Collection.js").CollectionEvent} event CollectionEvent. */ - function(event) { - this.addOverlayInternal_(/** @type {import("./Overlay.js").default} */ (event.element)); - }.bind(this)); + function (event) { + this.addOverlayInternal_( + /** @type {import("./Overlay.js").default} */ (event.element) + ); + }.bind(this) + ); - this.overlays_.addEventListener(CollectionEventType.REMOVE, + this.overlays_.addEventListener( + CollectionEventType.REMOVE, /** * @param {import("./Collection.js").CollectionEvent} event CollectionEvent. */ - function(event) { + function (event) { const overlay = /** @type {import("./Overlay.js").default} */ (event.element); const id = overlay.getId(); if (id !== undefined) { delete this.overlayIdIndex_[id.toString()]; } event.element.setMap(null); - }.bind(this)); - + }.bind(this) + ); } /** @@ -502,8 +549,14 @@ class PluggableMap extends BaseObject { */ disposeInternal() { this.mapBrowserEventHandler_.dispose(); - this.viewport_.removeEventListener(EventType.CONTEXTMENU, this.boundHandleBrowserEvent_); - this.viewport_.removeEventListener(EventType.WHEEL, this.boundHandleBrowserEvent_); + this.viewport_.removeEventListener( + EventType.CONTEXTMENU, + this.boundHandleBrowserEvent_ + ); + this.viewport_.removeEventListener( + EventType.WHEEL, + this.boundHandleBrowserEvent_ + ); if (this.handleResize_ !== undefined) { removeEventListener(EventType.RESIZE, this.handleResize_, false); this.handleResize_ = undefined; @@ -537,14 +590,23 @@ class PluggableMap extends BaseObject { } const coordinate = this.getCoordinateFromPixelInternal(pixel); opt_options = opt_options !== undefined ? opt_options : {}; - const hitTolerance = opt_options.hitTolerance !== undefined ? - opt_options.hitTolerance * this.frameState_.pixelRatio : 0; - const layerFilter = opt_options.layerFilter !== undefined ? - opt_options.layerFilter : TRUE; + const hitTolerance = + opt_options.hitTolerance !== undefined + ? opt_options.hitTolerance * this.frameState_.pixelRatio + : 0; + const layerFilter = + opt_options.layerFilter !== undefined ? opt_options.layerFilter : TRUE; const checkWrapped = opt_options.checkWrapped !== false; return this.renderer_.forEachFeatureAtCoordinate( - coordinate, this.frameState_, hitTolerance, checkWrapped, callback, null, - layerFilter, null); + coordinate, + this.frameState_, + hitTolerance, + checkWrapped, + callback, + null, + layerFilter, + null + ); } /** @@ -557,9 +619,13 @@ class PluggableMap extends BaseObject { */ getFeaturesAtPixel(pixel, opt_options) { const features = []; - this.forEachFeatureAtPixel(pixel, function(feature) { - features.push(feature); - }, opt_options); + this.forEachFeatureAtPixel( + pixel, + function (feature) { + features.push(feature); + }, + opt_options + ); return features; } @@ -589,10 +655,18 @@ class PluggableMap extends BaseObject { return; } const options = opt_options || {}; - const hitTolerance = options.hitTolerance !== undefined ? - options.hitTolerance * this.frameState_.pixelRatio : 0; + const hitTolerance = + options.hitTolerance !== undefined + ? options.hitTolerance * this.frameState_.pixelRatio + : 0; const layerFilter = options.layerFilter || TRUE; - return this.renderer_.forEachLayerAtPixel(pixel, this.frameState_, hitTolerance, callback, layerFilter); + return this.renderer_.forEachLayerAtPixel( + pixel, + this.frameState_, + hitTolerance, + callback, + layerFilter + ); } /** @@ -609,12 +683,21 @@ class PluggableMap extends BaseObject { } const coordinate = this.getCoordinateFromPixelInternal(pixel); opt_options = opt_options !== undefined ? opt_options : {}; - const layerFilter = opt_options.layerFilter !== undefined ? opt_options.layerFilter : TRUE; - const hitTolerance = opt_options.hitTolerance !== undefined ? - opt_options.hitTolerance * this.frameState_.pixelRatio : 0; + const layerFilter = + opt_options.layerFilter !== undefined ? opt_options.layerFilter : TRUE; + const hitTolerance = + opt_options.hitTolerance !== undefined + ? opt_options.hitTolerance * this.frameState_.pixelRatio + : 0; const checkWrapped = opt_options.checkWrapped !== false; return this.renderer_.hasFeatureAtCoordinate( - coordinate, this.frameState_, hitTolerance, checkWrapped, layerFilter, null); + coordinate, + this.frameState_, + hitTolerance, + checkWrapped, + layerFilter, + null + ); } /** @@ -644,13 +727,14 @@ class PluggableMap extends BaseObject { */ getEventPixel(event) { const viewportPosition = this.viewport_.getBoundingClientRect(); - const eventPosition = 'changedTouches' in event ? - /** @type {TouchEvent} */ (event).changedTouches[0] : - /** @type {MouseEvent} */ (event); + const eventPosition = + 'changedTouches' in event + ? /** @type {TouchEvent} */ (event).changedTouches[0] + : /** @type {MouseEvent} */ (event); return [ eventPosition.clientX - viewportPosition.left, - eventPosition.clientY - viewportPosition.top + eventPosition.clientY - viewportPosition.top, ]; } @@ -664,7 +748,9 @@ class PluggableMap extends BaseObject { * @api */ getTarget() { - return /** @type {HTMLElement|string|undefined} */ (this.get(MapProperty.TARGET)); + return /** @type {HTMLElement|string|undefined} */ (this.get( + MapProperty.TARGET + )); } /** @@ -677,7 +763,9 @@ class PluggableMap extends BaseObject { getTargetElement() { const target = this.getTarget(); if (target !== undefined) { - return typeof target === 'string' ? document.getElementById(target) : target; + return typeof target === 'string' + ? document.getElementById(target) + : target; } else { return null; } @@ -691,7 +779,10 @@ class PluggableMap extends BaseObject { * @api */ getCoordinateFromPixel(pixel) { - return toUserCoordinate(this.getCoordinateFromPixelInternal(pixel), this.getView().getProjection()); + return toUserCoordinate( + this.getCoordinateFromPixelInternal(pixel), + this.getView().getProjection() + ); } /** @@ -705,7 +796,10 @@ class PluggableMap extends BaseObject { if (!frameState) { return null; } else { - return applyTransform(frameState.pixelToCoordinateTransform, pixel.slice()); + return applyTransform( + frameState.pixelToCoordinateTransform, + pixel.slice() + ); } } @@ -761,9 +855,7 @@ class PluggableMap extends BaseObject { * @api */ getLayerGroup() { - return ( - /** @type {LayerGroup} */ (this.get(MapProperty.LAYERGROUP)) - ); + return /** @type {LayerGroup} */ (this.get(MapProperty.LAYERGROUP)); } /** @@ -799,7 +891,10 @@ class PluggableMap extends BaseObject { * @api */ getPixelFromCoordinate(coordinate) { - const viewCoordinate = fromUserCoordinate(coordinate, this.getView().getProjection()); + const viewCoordinate = fromUserCoordinate( + coordinate, + this.getView().getProjection() + ); return this.getPixelFromCoordinateInternal(viewCoordinate); } @@ -814,7 +909,10 @@ class PluggableMap extends BaseObject { if (!frameState) { return null; } else { - return applyTransform(frameState.coordinateToPixelTransform, coordinate.slice(0, 2)); + return applyTransform( + frameState.coordinateToPixelTransform, + coordinate.slice(0, 2) + ); } } @@ -833,9 +931,9 @@ class PluggableMap extends BaseObject { * @api */ getSize() { - return ( - /** @type {import("./size.js").Size|undefined} */ (this.get(MapProperty.SIZE)) - ); + return /** @type {import("./size.js").Size|undefined} */ (this.get( + MapProperty.SIZE + )); } /** @@ -846,9 +944,7 @@ class PluggableMap extends BaseObject { * @api */ getView() { - return ( - /** @type {View} */ (this.get(MapProperty.VIEW)) - ); + return /** @type {View} */ (this.get(MapProperty.VIEW)); } /** @@ -890,7 +986,13 @@ class PluggableMap extends BaseObject { * @return {number} Tile priority. */ getTilePriority(tile, tileSourceKey, tileCenter, tileResolution) { - return getTilePriority(this.frameState_, tile, tileSourceKey, tileCenter, tileResolution); + return getTilePriority( + this.frameState_, + tile, + tileSourceKey, + tileCenter, + tileResolution + ); } /** @@ -914,7 +1016,14 @@ class PluggableMap extends BaseObject { } const target = /** @type {Node} */ (mapBrowserEvent.originalEvent.target); if (!mapBrowserEvent.dragging) { - if (this.overlayContainerStopEvent_.contains(target) || !(document.body.contains(target) || this.viewport_.getRootNode && this.viewport_.getRootNode().contains(target))) { + if ( + this.overlayContainerStopEvent_.contains(target) || + !( + document.body.contains(target) || + (this.viewport_.getRootNode && + this.viewport_.getRootNode().contains(target)) + ) + ) { // Abort if the event target is a child of the container that doesn't allow // event propagation or is no longer in the page. It's possible for the target to no longer // be in the page if it has been removed in an event listener, this might happen in a Control @@ -943,7 +1052,6 @@ class PluggableMap extends BaseObject { * @protected */ handlePostRender() { - const frameState = this.frameState_; // Manage the tile queue @@ -962,7 +1070,8 @@ class PluggableMap extends BaseObject { if (frameState) { const hints = frameState.viewHints; if (hints[ViewHint.ANIMATING] || hints[ViewHint.INTERACTING]) { - const lowOnFrameBudget = !IMAGE_DECODE && Date.now() - frameState.time > 8; + const lowOnFrameBudget = + !IMAGE_DECODE && Date.now() - frameState.time > 8; maxTotalLoading = lowOnFrameBudget ? 0 : 8; maxNewLoads = lowOnFrameBudget ? 0 : 2; } @@ -973,9 +1082,17 @@ class PluggableMap extends BaseObject { } } - if (frameState && this.hasListener(RenderEventType.RENDERCOMPLETE) && !frameState.animate && - !this.tileQueue_.getTilesLoading() && !this.getLoading()) { - this.renderer_.dispatchRenderEvent(RenderEventType.RENDERCOMPLETE, frameState); + if ( + frameState && + this.hasListener(RenderEventType.RENDERCOMPLETE) && + !frameState.animate && + !this.tileQueue_.getTilesLoading() && + !this.getLoading() + ) { + this.renderer_.dispatchRenderEvent( + RenderEventType.RENDERCOMPLETE, + frameState + ); } const postRenderFunctions = this.postRenderFunctions_; @@ -1039,11 +1156,22 @@ class PluggableMap extends BaseObject { this.renderer_ = this.createRenderer(); } - const keyboardEventTarget = !this.keyboardEventTarget_ ? - targetElement : this.keyboardEventTarget_; + const keyboardEventTarget = !this.keyboardEventTarget_ + ? targetElement + : this.keyboardEventTarget_; this.keyHandlerKeys_ = [ - listen(keyboardEventTarget, EventType.KEYDOWN, this.handleBrowserEvent, this), - listen(keyboardEventTarget, EventType.KEYPRESS, this.handleBrowserEvent, this) + listen( + keyboardEventTarget, + EventType.KEYDOWN, + this.handleBrowserEvent, + this + ), + listen( + keyboardEventTarget, + EventType.KEYPRESS, + this.handleBrowserEvent, + this + ), ]; if (!this.handleResize_) { @@ -1088,11 +1216,17 @@ class PluggableMap extends BaseObject { this.updateViewportSize_(); this.viewPropertyListenerKey_ = listen( - view, ObjectEventType.PROPERTYCHANGE, - this.handleViewPropertyChanged_, this); + view, + ObjectEventType.PROPERTYCHANGE, + this.handleViewPropertyChanged_, + this + ); this.viewChangeListenerKey_ = listen( - view, EventType.CHANGE, - this.handleViewPropertyChanged_, this); + view, + EventType.CHANGE, + this.handleViewPropertyChanged_, + this + ); view.resolveConstraints(0); } @@ -1110,12 +1244,8 @@ class PluggableMap extends BaseObject { const layerGroup = this.getLayerGroup(); if (layerGroup) { this.layerGroupPropertyListenerKeys_ = [ - listen( - layerGroup, ObjectEventType.PROPERTYCHANGE, - this.render, this), - listen( - layerGroup, EventType.CHANGE, - this.render, this) + listen(layerGroup, ObjectEventType.PROPERTYCHANGE, this.render, this), + listen(layerGroup, EventType.CHANGE, this.render, this), ]; } this.render(); @@ -1218,13 +1348,22 @@ class PluggableMap extends BaseObject { /** @type {?FrameState} */ let frameState = null; if (size !== undefined && hasArea(size) && view && view.isDef()) { - const viewHints = view.getHints(this.frameState_ ? this.frameState_.viewHints : undefined); + const viewHints = view.getHints( + this.frameState_ ? this.frameState_.viewHints : undefined + ); const viewState = view.getState(); frameState = { animate: false, coordinateToPixelTransform: this.coordinateToPixelTransform_, - declutterItems: previousFrameState ? previousFrameState.declutterItems : [], - extent: getForViewAndSize(viewState.center, viewState.resolution, viewState.rotation, size), + declutterItems: previousFrameState + ? previousFrameState.declutterItems + : [], + extent: getForViewAndSize( + viewState.center, + viewState.resolution, + viewState.rotation, + size + ), index: this.frameIndex_++, layerIndex: 0, layerStatesArray: this.getLayerGroup().getLayerStatesArray(), @@ -1237,7 +1376,7 @@ class PluggableMap extends BaseObject { usedTiles: {}, viewState: viewState, viewHints: viewHints, - wantedTiles: {} + wantedTiles: {}, }; } @@ -1248,34 +1387,44 @@ class PluggableMap extends BaseObject { if (frameState.animate) { this.render(); } - Array.prototype.push.apply(this.postRenderFunctions_, frameState.postRenderFunctions); + Array.prototype.push.apply( + this.postRenderFunctions_, + frameState.postRenderFunctions + ); if (previousFrameState) { - const moveStart = !this.previousExtent_ || - (!isEmpty(this.previousExtent_) && - !equals(frameState.extent, this.previousExtent_)); + const moveStart = + !this.previousExtent_ || + (!isEmpty(this.previousExtent_) && + !equals(frameState.extent, this.previousExtent_)); if (moveStart) { this.dispatchEvent( - new MapEvent(MapEventType.MOVESTART, this, previousFrameState)); + new MapEvent(MapEventType.MOVESTART, this, previousFrameState) + ); this.previousExtent_ = createOrUpdateEmpty(this.previousExtent_); } } - const idle = this.previousExtent_ && - !frameState.viewHints[ViewHint.ANIMATING] && - !frameState.viewHints[ViewHint.INTERACTING] && - !equals(frameState.extent, this.previousExtent_); + const idle = + this.previousExtent_ && + !frameState.viewHints[ViewHint.ANIMATING] && + !frameState.viewHints[ViewHint.INTERACTING] && + !equals(frameState.extent, this.previousExtent_); if (idle) { - this.dispatchEvent(new MapEvent(MapEventType.MOVEEND, this, frameState)); + this.dispatchEvent( + new MapEvent(MapEventType.MOVEEND, this, frameState) + ); clone(frameState.extent, this.previousExtent_); } } this.dispatchEvent(new MapEvent(MapEventType.POSTRENDER, this, frameState)); - this.postRenderTimeoutHandle_ = setTimeout(this.handlePostRender.bind(this), 0); - + this.postRenderTimeoutHandle_ = setTimeout( + this.handlePostRender.bind(this), + 0 + ); } /** @@ -1333,15 +1482,15 @@ class PluggableMap extends BaseObject { const computedStyle = getComputedStyle(targetElement); this.setSize([ targetElement.offsetWidth - - parseFloat(computedStyle['borderLeftWidth']) - - parseFloat(computedStyle['paddingLeft']) - - parseFloat(computedStyle['paddingRight']) - - parseFloat(computedStyle['borderRightWidth']), + parseFloat(computedStyle['borderLeftWidth']) - + parseFloat(computedStyle['paddingLeft']) - + parseFloat(computedStyle['paddingRight']) - + parseFloat(computedStyle['borderRightWidth']), targetElement.offsetHeight - - parseFloat(computedStyle['borderTopWidth']) - - parseFloat(computedStyle['paddingTop']) - - parseFloat(computedStyle['paddingBottom']) - - parseFloat(computedStyle['borderBottomWidth']) + parseFloat(computedStyle['borderTopWidth']) - + parseFloat(computedStyle['paddingTop']) - + parseFloat(computedStyle['paddingBottom']) - + parseFloat(computedStyle['borderBottomWidth']), ]); } @@ -1360,7 +1509,7 @@ class PluggableMap extends BaseObject { if (computedStyle.width && computedStyle.height) { size = [ parseInt(computedStyle.width, 10), - parseInt(computedStyle.height, 10) + parseInt(computedStyle.height, 10), ]; } view.setViewportSize(size); @@ -1368,21 +1517,20 @@ class PluggableMap extends BaseObject { } } - /** * @param {MapOptions} options Map options. * @return {MapOptionsInternal} Internal map options. */ function createOptionsInternal(options) { - /** * @type {HTMLElement|Document} */ let keyboardEventTarget = null; if (options.keyboardEventTarget !== undefined) { - keyboardEventTarget = typeof options.keyboardEventTarget === 'string' ? - document.getElementById(options.keyboardEventTarget) : - options.keyboardEventTarget; + keyboardEventTarget = + typeof options.keyboardEventTarget === 'string' + ? document.getElementById(options.keyboardEventTarget) + : options.keyboardEventTarget; } /** @@ -1390,22 +1538,27 @@ function createOptionsInternal(options) { */ const values = {}; - const layerGroup = options.layers && typeof /** @type {?} */ (options.layers).getLayers === 'function' ? - /** @type {LayerGroup} */ (options.layers) : new LayerGroup({layers: /** @type {Collection} */ (options.layers)}); + const layerGroup = + options.layers && + typeof (/** @type {?} */ (options.layers).getLayers) === 'function' + ? /** @type {LayerGroup} */ (options.layers) + : new LayerGroup({layers: /** @type {Collection} */ (options.layers)}); values[MapProperty.LAYERGROUP] = layerGroup; values[MapProperty.TARGET] = options.target; - values[MapProperty.VIEW] = options.view !== undefined ? - options.view : new View(); + values[MapProperty.VIEW] = + options.view !== undefined ? options.view : new View(); let controls; if (options.controls !== undefined) { if (Array.isArray(options.controls)) { controls = new Collection(options.controls.slice()); } else { - assert(typeof /** @type {?} */ (options.controls).getArray === 'function', - 47); // Expected `controls` to be an array or an `import("./Collection.js").Collection` + assert( + typeof (/** @type {?} */ (options.controls).getArray) === 'function', + 47 + ); // Expected `controls` to be an array or an `import("./Collection.js").Collection` controls = /** @type {Collection} */ (options.controls); } } @@ -1415,8 +1568,11 @@ function createOptionsInternal(options) { if (Array.isArray(options.interactions)) { interactions = new Collection(options.interactions.slice()); } else { - assert(typeof /** @type {?} */ (options.interactions).getArray === 'function', - 48); // Expected `interactions` to be an array or an `import("./Collection.js").Collection` + assert( + typeof (/** @type {?} */ (options.interactions).getArray) === + 'function', + 48 + ); // Expected `interactions` to be an array or an `import("./Collection.js").Collection` interactions = /** @type {Collection} */ (options.interactions); } } @@ -1426,8 +1582,10 @@ function createOptionsInternal(options) { if (Array.isArray(options.overlays)) { overlays = new Collection(options.overlays.slice()); } else { - assert(typeof /** @type {?} */ (options.overlays).getArray === 'function', - 49); // Expected `overlays` to be an array or an `import("./Collection.js").Collection` + assert( + typeof (/** @type {?} */ (options.overlays).getArray) === 'function', + 49 + ); // Expected `overlays` to be an array or an `import("./Collection.js").Collection` overlays = options.overlays; } } else { @@ -1439,8 +1597,7 @@ function createOptionsInternal(options) { interactions: interactions, keyboardEventTarget: keyboardEventTarget, overlays: overlays, - values: values + values: values, }; - } export default PluggableMap; diff --git a/src/ol/Tile.js b/src/ol/Tile.js index f49c97e616..2aa8bf6144 100644 --- a/src/ol/Tile.js +++ b/src/ol/Tile.js @@ -1,12 +1,11 @@ /** * @module ol/Tile */ -import TileState from './TileState.js'; -import {easeIn} from './easing.js'; import EventTarget from './events/Target.js'; import EventType from './events/EventType.js'; +import TileState from './TileState.js'; import {abstract} from './util.js'; - +import {easeIn} from './easing.js'; /** * A function that takes an {@link module:ol/Tile} for the tile and a @@ -60,7 +59,6 @@ import {abstract} from './util.js'; * @api */ - /** * @typedef {Object} Options * @property {number} [transition=250] A duration for tile opacity @@ -68,7 +66,6 @@ import {abstract} from './util.js'; * @api */ - /** * @classdesc * Base class for tiles. @@ -76,7 +73,6 @@ import {abstract} from './util.js'; * @abstract */ class Tile extends EventTarget { - /** * @param {import("./tilecoord.js").TileCoord} tileCoord Tile coordinate. * @param {TileState} state State. @@ -126,7 +122,8 @@ class Tile extends EventTarget { * The duration for the opacity transition. * @type {number} */ - this.transition_ = options.transition === undefined ? 250 : options.transition; + this.transition_ = + options.transition === undefined ? 250 : options.transition; /** * Lookup of start times for rendering transitions. If the start time is @@ -134,7 +131,6 @@ class Tile extends EventTarget { * @type {Object} */ this.transitionStarts_ = {}; - } /** @@ -147,8 +143,7 @@ class Tile extends EventTarget { /** * Called by the tile cache when the tile is removed from the cache due to expiry */ - release() { - } + release() {} /** * @return {string} Key. @@ -284,7 +279,7 @@ class Tile extends EventTarget { return 1; } - const delta = time - start + (1000 / 60); // avoid rendering at 0 + const delta = time - start + 1000 / 60; // avoid rendering at 0 if (delta >= this.transition_) { return 1; } @@ -316,5 +311,4 @@ class Tile extends EventTarget { } } - export default Tile; diff --git a/src/ol/TileCache.js b/src/ol/TileCache.js index 57ad1ce3c0..5a00af4534 100644 --- a/src/ol/TileCache.js +++ b/src/ol/TileCache.js @@ -5,7 +5,6 @@ import LRUCache from './structs/LRUCache.js'; import {fromKey, getKey} from './tilecoord.js'; class TileCache extends LRUCache { - /** * @param {!Object} usedTiles Used tiles. */ @@ -30,14 +29,15 @@ class TileCache extends LRUCache { const key = this.peekFirstKey(); const tileCoord = fromKey(key); const z = tileCoord[0]; - this.forEach(function(tile) { - if (tile.tileCoord[0] !== z) { - this.remove(getKey(tile.tileCoord)); - tile.release(); - } - }.bind(this)); + this.forEach( + function (tile) { + if (tile.tileCoord[0] !== z) { + this.remove(getKey(tile.tileCoord)); + tile.release(); + } + }.bind(this) + ); } } - export default TileCache; diff --git a/src/ol/TileQueue.js b/src/ol/TileQueue.js index 400cd56f74..349e884f84 100644 --- a/src/ol/TileQueue.js +++ b/src/ol/TileQueue.js @@ -1,39 +1,36 @@ /** * @module ol/TileQueue */ -import TileState from './TileState.js'; import EventType from './events/EventType.js'; import PriorityQueue, {DROP} from './structs/PriorityQueue.js'; - +import TileState from './TileState.js'; /** * @typedef {function(import("./Tile.js").default, string, import("./coordinate.js").Coordinate, number): number} PriorityFunction */ - class TileQueue extends PriorityQueue { - /** * @param {PriorityFunction} tilePriorityFunction Tile priority function. * @param {function(): ?} tileChangeCallback Function called on each tile change event. */ constructor(tilePriorityFunction, tileChangeCallback) { - super( /** * @param {Array} element Element. * @return {number} Priority. */ - function(element) { + function (element) { return tilePriorityFunction.apply(null, element); }, /** * @param {Array} element Element. * @return {string} Key. */ - function(element) { - return (/** @type {import("./Tile.js").default} */ (element[0]).getKey()); - }); + function (element) { + return /** @type {import("./Tile.js").default} */ (element[0]).getKey(); + } + ); /** @private */ this.boundHandleTileChange_ = this.handleTileChange.bind(this); @@ -55,7 +52,6 @@ class TileQueue extends PriorityQueue { * @type {!Object} */ this.tilesLoadingKeys_ = {}; - } /** @@ -85,7 +81,11 @@ class TileQueue extends PriorityQueue { handleTileChange(event) { const tile = /** @type {import("./Tile.js").default} */ (event.target); const state = tile.getState(); - if (tile.hifi && state === TileState.LOADED || state === TileState.ERROR || state === TileState.EMPTY) { + if ( + (tile.hifi && state === TileState.LOADED) || + state === TileState.ERROR || + state === TileState.EMPTY + ) { tile.removeEventListener(EventType.CHANGE, this.boundHandleTileChange_); const tileKey = tile.getKey(); if (tileKey in this.tilesLoadingKeys_) { @@ -103,8 +103,11 @@ class TileQueue extends PriorityQueue { loadMoreTiles(maxTotalLoading, maxNewLoads) { let newLoads = 0; let state, tile, tileKey; - while (this.tilesLoading_ < maxTotalLoading && newLoads < maxNewLoads && - this.getCount() > 0) { + while ( + this.tilesLoading_ < maxTotalLoading && + newLoads < maxNewLoads && + this.getCount() > 0 + ) { tile = /** @type {import("./Tile.js").default} */ (this.dequeue()[0]); tileKey = tile.getKey(); state = tile.getState(); @@ -118,10 +121,8 @@ class TileQueue extends PriorityQueue { } } - export default TileQueue; - /** * @param {import('./PluggableMap.js').FrameState} frameState Frame state. * @param {import("./Tile.js").default} tile Tile. @@ -130,7 +131,13 @@ export default TileQueue; * @param {number} tileResolution Tile resolution. * @return {number} Tile priority. */ -export function getTilePriority(frameState, tile, tileSourceKey, tileCenter, tileResolution) { +export function getTilePriority( + frameState, + tile, + tileSourceKey, + tileCenter, + tileResolution +) { // Filter out tiles at higher zoom levels than the current zoom level, or that // are outside the visible extent. if (!frameState || !(tileSourceKey in frameState.wantedTiles)) { @@ -148,6 +155,8 @@ export function getTilePriority(frameState, tile, tileSourceKey, tileCenter, til const center = frameState.viewState.center; const deltaX = tileCenter[0] - center[0]; const deltaY = tileCenter[1] - center[1]; - return 65536 * Math.log(tileResolution) + - Math.sqrt(deltaX * deltaX + deltaY * deltaY) / tileResolution; + return ( + 65536 * Math.log(tileResolution) + + Math.sqrt(deltaX * deltaX + deltaY * deltaY) / tileResolution + ); } diff --git a/src/ol/TileRange.js b/src/ol/TileRange.js index e2cf3b37ca..35e5781515 100644 --- a/src/ol/TileRange.js +++ b/src/ol/TileRange.js @@ -7,7 +7,6 @@ * by its min/max tile coordinates and is inclusive of coordinates. */ class TileRange { - /** * @param {number} minX Minimum X. * @param {number} maxX Maximum X. @@ -15,7 +14,6 @@ class TileRange { * @param {number} maxY Maximum Y. */ constructor(minX, maxX, minY, maxY) { - /** * @type {number} */ @@ -35,7 +33,6 @@ class TileRange { * @type {number} */ this.maxY = maxY; - } /** @@ -51,8 +48,12 @@ class TileRange { * @return {boolean} Contains. */ containsTileRange(tileRange) { - return this.minX <= tileRange.minX && tileRange.maxX <= this.maxX && - this.minY <= tileRange.minY && tileRange.maxY <= this.maxY; + return ( + this.minX <= tileRange.minX && + tileRange.maxX <= this.maxX && + this.minY <= tileRange.minY && + tileRange.maxY <= this.maxY + ); } /** @@ -69,8 +70,12 @@ class TileRange { * @return {boolean} Equals. */ equals(tileRange) { - return this.minX == tileRange.minX && this.minY == tileRange.minY && - this.maxX == tileRange.maxX && this.maxY == tileRange.maxY; + return ( + this.minX == tileRange.minX && + this.minY == tileRange.minY && + this.maxX == tileRange.maxX && + this.maxY == tileRange.maxY + ); } /** @@ -117,14 +122,15 @@ class TileRange { * @return {boolean} Intersects. */ intersects(tileRange) { - return this.minX <= tileRange.maxX && - this.maxX >= tileRange.minX && - this.minY <= tileRange.maxY && - this.maxY >= tileRange.minY; + return ( + this.minX <= tileRange.maxX && + this.maxX >= tileRange.minX && + this.minY <= tileRange.maxY && + this.maxY >= tileRange.minY + ); } } - /** * @param {number} minX Minimum X. * @param {number} maxX Maximum X. @@ -145,5 +151,4 @@ export function createOrUpdate(minX, maxX, minY, maxY, tileRange) { } } - export default TileRange; diff --git a/src/ol/TileState.js b/src/ol/TileState.js index 61dd890c5b..07f3db788f 100644 --- a/src/ol/TileState.js +++ b/src/ol/TileState.js @@ -14,5 +14,5 @@ export default { * @type {number} */ ERROR: 3, - EMPTY: 4 + EMPTY: 4, }; diff --git a/src/ol/VectorRenderTile.js b/src/ol/VectorRenderTile.js index db9a6ec07f..782cd7860c 100644 --- a/src/ol/VectorRenderTile.js +++ b/src/ol/VectorRenderTile.js @@ -1,10 +1,9 @@ /** * @module ol/VectorRenderTile */ -import {getUid} from './util.js'; import Tile from './Tile.js'; import {createCanvasContext2D} from './dom.js'; - +import {getUid} from './util.js'; /** * @typedef {Object} ReplayState @@ -24,7 +23,6 @@ import {createCanvasContext2D} from './dom.js'; const canvasPool = []; class VectorRenderTile extends Tile { - /** * @param {import("./tilecoord.js").TileCoord} tileCoord Tile coordinate. * @param {import("./TileState.js").default} state State. @@ -33,7 +31,6 @@ class VectorRenderTile extends Tile { * to get source tiles for this tile. */ constructor(tileCoord, state, urlTileCoord, getSourceTiles) { - super(tileCoord, state, {transition: 0}); /** @@ -148,7 +145,7 @@ class VectorRenderTile extends Tile { renderedTileResolution: NaN, renderedTileRevision: -1, renderedZ: -1, - renderedTileZ: -1 + renderedTileZ: -1, }; } return this.replayState_[key]; @@ -172,5 +169,4 @@ class VectorRenderTile extends Tile { } } - export default VectorRenderTile; diff --git a/src/ol/VectorTile.js b/src/ol/VectorTile.js index f957a452df..8aa1ab501a 100644 --- a/src/ol/VectorTile.js +++ b/src/ol/VectorTile.js @@ -5,7 +5,6 @@ import Tile from './Tile.js'; import TileState from './TileState.js'; class VectorTile extends Tile { - /** * @param {import("./tilecoord.js").TileCoord} tileCoord Tile coordinate. * @param {TileState} state State. @@ -15,7 +14,6 @@ class VectorTile extends Tile { * @param {import("./Tile.js").Options=} opt_options Tile options. */ constructor(tileCoord, state, src, format, tileLoadFunction, opt_options) { - super(tileCoord, state, opt_options); /** @@ -65,7 +63,6 @@ class VectorTile extends Tile { * @type {string} */ this.url_ = src; - } /** diff --git a/src/ol/View.js b/src/ol/View.js index 3d5be60121..107d5660dd 100644 --- a/src/ol/View.js +++ b/src/ol/View.js @@ -1,29 +1,54 @@ /** * @module ol/View */ -import {DEFAULT_TILE_SIZE} from './tilegrid/common.js'; -import {VOID} from './functions.js'; -import {createExtent, none as centerNone} from './centerconstraint.js'; import BaseObject from './Object.js'; -import {createSnapToResolutions, createSnapToPower} from './resolutionconstraint.js'; -import {createSnapToZero, createSnapToN, none as rotationNone, disable} from './rotationconstraint.js'; +import GeometryType from './geom/GeometryType.js'; +import Units from './proj/Units.js'; import ViewHint from './ViewHint.js'; import ViewProperty from './ViewProperty.js'; -import {linearFindNearest} from './array.js'; +import {DEFAULT_TILE_SIZE} from './tilegrid/common.js'; +import { + METERS_PER_UNIT, + createProjection, + fromUserCoordinate, + fromUserExtent, + getUserProjection, + toUserCoordinate, + toUserExtent, +} from './proj.js'; +import {VOID} from './functions.js'; +import { + add as addCoordinate, + equals as coordinatesEqual, + rotate as rotateCoordinate, +} from './coordinate.js'; import {assert} from './asserts.js'; -import {add as addCoordinate, rotate as rotateCoordinate, equals as coordinatesEqual} from './coordinate.js'; -import {inAndOut} from './easing.js'; -import {getForViewAndSize, getCenter, getHeight, getWidth, isEmpty} from './extent.js'; -import GeometryType from './geom/GeometryType.js'; -import {fromExtent as polygonFromExtent} from './geom/Polygon.js'; -import {clamp, modulo} from './math.js'; import {assign} from './obj.js'; -import {createProjection, METERS_PER_UNIT, toUserCoordinate, toUserExtent, fromUserCoordinate, fromUserExtent, getUserProjection} from './proj.js'; -import Units from './proj/Units.js'; -import {equals} from './coordinate.js'; -import {easeOut} from './easing.js'; +import {none as centerNone, createExtent} from './centerconstraint.js'; +import {clamp, modulo} from './math.js'; import {createMinMaxResolution} from './resolutionconstraint.js'; - +import { + createSnapToN, + createSnapToZero, + disable, + none as rotationNone, +} from './rotationconstraint.js'; +import { + createSnapToPower, + createSnapToResolutions, +} from './resolutionconstraint.js'; +import {easeOut} from './easing.js'; +import {equals} from './coordinate.js'; +import { + getCenter, + getForViewAndSize, + getHeight, + getWidth, + isEmpty, +} from './extent.js'; +import {inAndOut} from './easing.js'; +import {linearFindNearest} from './array.js'; +import {fromExtent as polygonFromExtent} from './geom/Polygon.js'; /** * An animation configuration @@ -43,7 +68,6 @@ import {createMinMaxResolution} from './resolutionconstraint.js'; * @property {function(boolean)} callback */ - /** * @typedef {Object} Constraints * @property {import("./centerconstraint.js").Type} center @@ -51,7 +75,6 @@ import {createMinMaxResolution} from './resolutionconstraint.js'; * @property {import("./rotationconstraint.js").Type} rotation */ - /** * @typedef {Object} FitOptions * @property {import("./size.js").Size} [size] The size in pixels of the box to fit @@ -77,7 +100,6 @@ import {createMinMaxResolution} from './resolutionconstraint.js'; * series completed on its own or `false` if it was cancelled. */ - /** * @typedef {Object} ViewOptions * @property {import("./coordinate.js").Coordinate} [center] The initial center for @@ -155,7 +177,6 @@ import {createMinMaxResolution} from './resolutionconstraint.js'; * corresponding resolution. */ - /** * @typedef {Object} AnimationOptions * @property {import("./coordinate.js").Coordinate} [center] The center of the view at the end of @@ -176,7 +197,6 @@ import {createMinMaxResolution} from './resolutionconstraint.js'; * between 0 and 1 representing the progress toward the destination state. */ - /** * @typedef {Object} State * @property {import("./coordinate.js").Coordinate} center @@ -186,14 +206,12 @@ import {createMinMaxResolution} from './resolutionconstraint.js'; * @property {number} zoom */ - /** * Default min zoom level for the map view. * @type {number} */ const DEFAULT_MIN_ZOOM = 0; - /** * @classdesc * A View object represents a simple 2D view of the map. @@ -267,7 +285,6 @@ const DEFAULT_MIN_ZOOM = 0; * @api */ class View extends BaseObject { - /** * @param {ViewOptions=} opt_options View options. */ @@ -346,7 +363,6 @@ class View extends BaseObject { * @param {ViewOptions} options View options. */ applyOptions_(options) { - /** * @type {Object} */ @@ -395,11 +411,13 @@ class View extends BaseObject { this.constraints_ = { center: centerConstraint, resolution: resolutionConstraint, - rotation: rotationConstraint + rotation: rotationConstraint, }; this.setRotation(options.rotation !== undefined ? options.rotation : 0); - this.setCenterInternal(options.center !== undefined ? options.center : null); + this.setCenterInternal( + options.center !== undefined ? options.center : null + ); if (options.resolution !== undefined) { this.setResolution(options.resolution); } else if (options.zoom !== undefined) { @@ -408,13 +426,11 @@ class View extends BaseObject { this.setProperties(properties); - /** * @private * @type {ViewOptions} */ this.options_ = options; - } /** @@ -486,11 +502,17 @@ class View extends BaseObject { let options = arguments[i]; if (options.center) { options = assign({}, options); - options.center = fromUserCoordinate(options.center, this.getProjection()); + options.center = fromUserCoordinate( + options.center, + this.getProjection() + ); } if (options.anchor) { options = assign({}, options); - options.anchor = fromUserCoordinate(options.anchor, this.getProjection()); + options.anchor = fromUserCoordinate( + options.anchor, + this.getProjection() + ); } args[i] = options; } @@ -503,7 +525,10 @@ class View extends BaseObject { animateInternal(var_args) { let animationCount = arguments.length; let callback; - if (animationCount > 1 && typeof arguments[animationCount - 1] === 'function') { + if ( + animationCount > 1 && + typeof arguments[animationCount - 1] === 'function' + ) { callback = arguments[animationCount - 1]; --animationCount; } @@ -538,7 +563,7 @@ class View extends BaseObject { anchor: options.anchor, duration: options.duration !== undefined ? options.duration : 1000, easing: options.easing || inAndOut, - callback: callback + callback: callback, }; if (options.center) { @@ -559,7 +584,8 @@ class View extends BaseObject { if (options.rotation !== undefined) { animation.sourceRotation = rotation; - const delta = modulo(options.rotation - rotation + Math.PI, 2 * Math.PI) - Math.PI; + const delta = + modulo(options.rotation - rotation + Math.PI, 2 * Math.PI) - Math.PI; animation.targetRotation = rotation + delta; rotation = animation.targetRotation; } @@ -644,7 +670,8 @@ class View extends BaseObject { continue; } const elapsed = now - animation.start; - let fraction = animation.duration > 0 ? elapsed / animation.duration : 1; + let fraction = + animation.duration > 0 ? elapsed / animation.duration : 1; if (fraction >= 1) { animation.complete = true; fraction = 1; @@ -662,24 +689,48 @@ class View extends BaseObject { this.targetCenter_ = [x, y]; } if (animation.sourceResolution && animation.targetResolution) { - const resolution = progress === 1 ? - animation.targetResolution : - animation.sourceResolution + progress * (animation.targetResolution - animation.sourceResolution); + const resolution = + progress === 1 + ? animation.targetResolution + : animation.sourceResolution + + progress * + (animation.targetResolution - animation.sourceResolution); if (animation.anchor) { const size = this.getViewportSize_(this.getRotation()); - const constrainedResolution = this.constraints_.resolution(resolution, 0, size, true); - this.targetCenter_ = this.calculateCenterZoom(constrainedResolution, animation.anchor); + const constrainedResolution = this.constraints_.resolution( + resolution, + 0, + size, + true + ); + this.targetCenter_ = this.calculateCenterZoom( + constrainedResolution, + animation.anchor + ); } this.targetResolution_ = resolution; this.applyTargetState_(true); } - if (animation.sourceRotation !== undefined && animation.targetRotation !== undefined) { - const rotation = progress === 1 ? - modulo(animation.targetRotation + Math.PI, 2 * Math.PI) - Math.PI : - animation.sourceRotation + progress * (animation.targetRotation - animation.sourceRotation); + if ( + animation.sourceRotation !== undefined && + animation.targetRotation !== undefined + ) { + const rotation = + progress === 1 + ? modulo(animation.targetRotation + Math.PI, 2 * Math.PI) - + Math.PI + : animation.sourceRotation + + progress * + (animation.targetRotation - animation.sourceRotation); if (animation.anchor) { - const constrainedRotation = this.constraints_.rotation(rotation, true); - this.targetCenter_ = this.calculateCenterRotate(constrainedRotation, animation.anchor); + const constrainedRotation = this.constraints_.rotation( + rotation, + true + ); + this.targetCenter_ = this.calculateCenterRotate( + constrainedRotation, + animation.anchor + ); } this.targetRotation_ = rotation; } @@ -701,7 +752,9 @@ class View extends BaseObject { // prune completed series this.animations_ = this.animations_.filter(Boolean); if (more && this.updateAnimationKey_ === undefined) { - this.updateAnimationKey_ = requestAnimationFrame(this.updateAnimations_.bind(this)); + this.updateAnimationKey_ = requestAnimationFrame( + this.updateAnimations_.bind(this) + ); } } @@ -731,8 +784,12 @@ class View extends BaseObject { const currentCenter = this.getCenterInternal(); const currentResolution = this.getResolution(); if (currentCenter !== undefined && currentResolution !== undefined) { - const x = anchor[0] - resolution * (anchor[0] - currentCenter[0]) / currentResolution; - const y = anchor[1] - resolution * (anchor[1] - currentCenter[1]) / currentResolution; + const x = + anchor[0] - + (resolution * (anchor[0] - currentCenter[0])) / currentResolution; + const y = + anchor[1] - + (resolution * (anchor[1] - currentCenter[1])) / currentResolution; center = [x, y]; } return center; @@ -750,8 +807,10 @@ class View extends BaseObject { const w = size[0]; const h = size[1]; return [ - Math.abs(w * Math.cos(opt_rotation)) + Math.abs(h * Math.sin(opt_rotation)), - Math.abs(w * Math.sin(opt_rotation)) + Math.abs(h * Math.cos(opt_rotation)) + Math.abs(w * Math.cos(opt_rotation)) + + Math.abs(h * Math.sin(opt_rotation)), + Math.abs(w * Math.sin(opt_rotation)) + + Math.abs(h * Math.cos(opt_rotation)), ]; } else { return size; @@ -766,7 +825,9 @@ class View extends BaseObject { * @param {import("./size.js").Size=} opt_size Viewport size; if undefined, [100, 100] is assumed */ setViewportSize(opt_size) { - this.viewportSize_ = Array.isArray(opt_size) ? opt_size.slice() : [100, 100]; + this.viewportSize_ = Array.isArray(opt_size) + ? opt_size.slice() + : [100, 100]; if (!this.getAnimating()) { this.resolveConstraints(0); } @@ -791,7 +852,9 @@ class View extends BaseObject { * @return {import("./coordinate.js").Coordinate|undefined} The center of the view. */ getCenterInternal() { - return /** @type {import("./coordinate.js").Coordinate|undefined} */ (this.get(ViewProperty.CENTER)); + return /** @type {import("./coordinate.js").Coordinate|undefined} */ (this.get( + ViewProperty.CENTER + )); } /** @@ -878,7 +941,9 @@ class View extends BaseObject { * @api */ getMaxZoom() { - return /** @type {number} */ (this.getZoomForResolution(this.minResolution_)); + return /** @type {number} */ (this.getZoomForResolution( + this.minResolution_ + )); } /** @@ -896,7 +961,9 @@ class View extends BaseObject { * @api */ getMinZoom() { - return /** @type {number} */ (this.getZoomForResolution(this.maxResolution_)); + return /** @type {number} */ (this.getZoomForResolution( + this.maxResolution_ + )); } /** @@ -955,7 +1022,10 @@ class View extends BaseObject { * @api */ getResolutionForExtent(extent, opt_size) { - return this.getResolutionForExtentInternal(fromUserExtent(extent, this.getProjection()), opt_size); + return this.getResolutionForExtentInternal( + fromUserExtent(extent, this.getProjection()), + opt_size + ); } /** @@ -988,10 +1058,11 @@ class View extends BaseObject { * @param {number} value Value. * @return {number} Resolution. */ - function(value) { + function (value) { const resolution = maxResolution / Math.pow(power, value * max); return resolution; - }); + } + ); } /** @@ -1020,10 +1091,11 @@ class View extends BaseObject { * @param {number} resolution Resolution. * @return {number} Value. */ - function(resolution) { - const value = (Math.log(maxResolution / resolution) / logPower) / max; + function (resolution) { + const value = Math.log(maxResolution / resolution) / logPower / max; return value; - }); + } + ); } /** @@ -1039,7 +1111,7 @@ class View extends BaseObject { projection: projection !== undefined ? projection : null, resolution: resolution, rotation: rotation, - zoom: this.getZoom() + zoom: this.getZoom(), }; } @@ -1095,11 +1167,21 @@ class View extends BaseObject { if (this.resolutions_.length <= 1) { return 0; } - const baseLevel = clamp(Math.floor(zoom), 0, this.resolutions_.length - 2); - const zoomFactor = this.resolutions_[baseLevel] / this.resolutions_[baseLevel + 1]; - return this.resolutions_[baseLevel] / Math.pow(zoomFactor, clamp(zoom - baseLevel, 0, 1)); + const baseLevel = clamp( + Math.floor(zoom), + 0, + this.resolutions_.length - 2 + ); + const zoomFactor = + this.resolutions_[baseLevel] / this.resolutions_[baseLevel + 1]; + return ( + this.resolutions_[baseLevel] / + Math.pow(zoomFactor, clamp(zoom - baseLevel, 0, 1)) + ); } else { - return this.maxResolution_ / Math.pow(this.zoomFactor_, zoom - this.minZoom_); + return ( + this.maxResolution_ / Math.pow(this.zoomFactor_, zoom - this.minZoom_) + ); } } @@ -1118,21 +1200,29 @@ class View extends BaseObject { /** @type {import("./geom/SimpleGeometry.js").default} */ let geometry; - assert(Array.isArray(geometryOrExtent) || typeof /** @type {?} */ (geometryOrExtent).getSimplifiedGeometry === 'function', - 24); // Invalid extent or geometry provided as `geometry` + assert( + Array.isArray(geometryOrExtent) || + typeof (/** @type {?} */ (geometryOrExtent).getSimplifiedGeometry) === + 'function', + 24 + ); // Invalid extent or geometry provided as `geometry` if (Array.isArray(geometryOrExtent)) { - assert(!isEmpty(geometryOrExtent), - 25); // Cannot fit empty extent provided as `geometry` + assert(!isEmpty(geometryOrExtent), 25); // Cannot fit empty extent provided as `geometry` const extent = fromUserExtent(geometryOrExtent, this.getProjection()); geometry = polygonFromExtent(extent); } else if (geometryOrExtent.getType() === GeometryType.CIRCLE) { - const extent = fromUserExtent(geometryOrExtent.getExtent(), this.getProjection()); + const extent = fromUserExtent( + geometryOrExtent.getExtent(), + this.getProjection() + ); geometry = polygonFromExtent(extent); geometry.rotate(this.getRotation(), getCenter(extent)); } else { const userProjection = getUserProjection(); if (userProjection) { - geometry = /** @type {import("./geom/SimpleGeometry.js").default} */ (geometryOrExtent.clone().transform(userProjection, this.getProjection())); + geometry = /** @type {import("./geom/SimpleGeometry.js").default} */ (geometryOrExtent + .clone() + .transform(userProjection, this.getProjection())); } else { geometry = geometryOrExtent; } @@ -1151,7 +1241,8 @@ class View extends BaseObject { if (!size) { size = this.getViewportSize_(); } - const padding = options.padding !== undefined ? options.padding : [0, 0, 0, 0]; + const padding = + options.padding !== undefined ? options.padding : [0, 0, 0, 0]; const nearest = options.nearest !== undefined ? options.nearest : false; let minResolution; if (options.minResolution !== undefined) { @@ -1184,29 +1275,34 @@ class View extends BaseObject { // calculate resolution let resolution = this.getResolutionForExtentInternal( [minRotX, minRotY, maxRotX, maxRotY], - [size[0] - padding[1] - padding[3], size[1] - padding[0] - padding[2]]); - resolution = isNaN(resolution) ? minResolution : - Math.max(resolution, minResolution); + [size[0] - padding[1] - padding[3], size[1] - padding[0] - padding[2]] + ); + resolution = isNaN(resolution) + ? minResolution + : Math.max(resolution, minResolution); resolution = this.getConstrainedResolution(resolution, nearest ? 0 : 1); // calculate center sinAngle = -sinAngle; // go back to original rotation let centerRotX = (minRotX + maxRotX) / 2; let centerRotY = (minRotY + maxRotY) / 2; - centerRotX += (padding[1] - padding[3]) / 2 * resolution; - centerRotY += (padding[0] - padding[2]) / 2 * resolution; + centerRotX += ((padding[1] - padding[3]) / 2) * resolution; + centerRotY += ((padding[0] - padding[2]) / 2) * resolution; const centerX = centerRotX * cosAngle - centerRotY * sinAngle; const centerY = centerRotY * cosAngle + centerRotX * sinAngle; const center = [centerX, centerY]; const callback = options.callback ? options.callback : VOID; if (options.duration !== undefined) { - this.animateInternal({ - resolution: resolution, - center: this.getConstrainedCenter(center, resolution), - duration: options.duration, - easing: options.easing - }, callback); + this.animateInternal( + { + resolution: resolution, + center: this.getConstrainedCenter(center, resolution), + duration: options.duration, + easing: options.easing, + }, + callback + ); } else { this.targetResolution_ = resolution; this.targetCenter_ = center; @@ -1223,7 +1319,11 @@ class View extends BaseObject { * @api */ centerOn(coordinate, size, position) { - this.centerOnInternal(fromUserCoordinate(coordinate, this.getProjection()), size, position); + this.centerOnInternal( + fromUserCoordinate(coordinate, this.getProjection()), + size, + position + ); } /** @@ -1264,7 +1364,10 @@ class View extends BaseObject { */ adjustCenter(deltaCoordinates) { const center = toUserCoordinate(this.targetCenter_, this.getProjection()); - this.setCenter([center[0] + deltaCoordinates[0], center[1] + deltaCoordinates[1]]); + this.setCenter([ + center[0] + deltaCoordinates[0], + center[1] + deltaCoordinates[1], + ]); } /** @@ -1273,7 +1376,10 @@ class View extends BaseObject { */ adjustCenterInternal(deltaCoordinates) { const center = this.targetCenter_; - this.setCenterInternal([center[0] + deltaCoordinates[0], center[1] + deltaCoordinates[1]]); + this.setCenterInternal([ + center[0] + deltaCoordinates[0], + center[1] + deltaCoordinates[1], + ]); } /** @@ -1284,7 +1390,8 @@ class View extends BaseObject { * @api */ adjustResolution(ratio, opt_anchor) { - const anchor = opt_anchor && fromUserCoordinate(opt_anchor, this.getProjection()); + const anchor = + opt_anchor && fromUserCoordinate(opt_anchor, this.getProjection()); this.adjustResolutionInternal(ratio, anchor); } @@ -1297,7 +1404,12 @@ class View extends BaseObject { adjustResolutionInternal(ratio, opt_anchor) { const isMoving = this.getAnimating() || this.getInteracting(); const size = this.getViewportSize_(this.getRotation()); - const newResolution = this.constraints_.resolution(this.targetResolution_ * ratio, 0, size, isMoving); + const newResolution = this.constraints_.resolution( + this.targetResolution_ * ratio, + 0, + size, + isMoving + ); if (opt_anchor) { this.targetCenter_ = this.calculateCenterZoom(newResolution, opt_anchor); @@ -1338,7 +1450,10 @@ class View extends BaseObject { */ adjustRotationInternal(delta, opt_anchor) { const isMoving = this.getAnimating() || this.getInteracting(); - const newRotation = this.constraints_.rotation(this.targetRotation_ + delta, isMoving); + const newRotation = this.constraints_.rotation( + this.targetRotation_ + delta, + isMoving + ); if (opt_anchor) { this.targetCenter_ = this.calculateCenterRotate(newRotation, opt_anchor); } @@ -1416,13 +1531,27 @@ class View extends BaseObject { * @private */ applyTargetState_(opt_doNotCancelAnims, opt_forceMoving) { - const isMoving = this.getAnimating() || this.getInteracting() || opt_forceMoving; + const isMoving = + this.getAnimating() || this.getInteracting() || opt_forceMoving; // compute rotation - const newRotation = this.constraints_.rotation(this.targetRotation_, isMoving); + const newRotation = this.constraints_.rotation( + this.targetRotation_, + isMoving + ); const size = this.getViewportSize_(newRotation); - const newResolution = this.constraints_.resolution(this.targetResolution_, 0, size, isMoving); - const newCenter = this.constraints_.center(this.targetCenter_, newResolution, size, isMoving); + const newResolution = this.constraints_.resolution( + this.targetResolution_, + 0, + size, + isMoving + ); + const newCenter = this.constraints_.center( + this.targetCenter_, + newResolution, + size, + isMoving + ); if (this.get(ViewProperty.ROTATION) !== newRotation) { this.set(ViewProperty.ROTATION, newRotation); @@ -1430,7 +1559,10 @@ class View extends BaseObject { if (this.get(ViewProperty.RESOLUTION) !== newResolution) { this.set(ViewProperty.RESOLUTION, newResolution); } - if (!this.get(ViewProperty.CENTER) || !equals(this.get(ViewProperty.CENTER), newCenter)) { + if ( + !this.get(ViewProperty.CENTER) || + !equals(this.get(ViewProperty.CENTER), newCenter) + ) { this.set(ViewProperty.CENTER, newCenter); } @@ -1455,8 +1587,16 @@ class View extends BaseObject { const newRotation = this.constraints_.rotation(this.targetRotation_); const size = this.getViewportSize_(newRotation); - const newResolution = this.constraints_.resolution(this.targetResolution_, direction, size); - const newCenter = this.constraints_.center(this.targetCenter_, newResolution, size); + const newResolution = this.constraints_.resolution( + this.targetResolution_, + direction, + size + ); + const newCenter = this.constraints_.center( + this.targetCenter_, + newResolution, + size + ); if (duration === 0 && !this.cancelAnchor_) { this.targetResolution_ = newResolution; @@ -1466,14 +1606,16 @@ class View extends BaseObject { return; } - const anchor = opt_anchor || (duration === 0 ? this.cancelAnchor_ : undefined); + const anchor = + opt_anchor || (duration === 0 ? this.cancelAnchor_ : undefined); this.cancelAnchor_ = undefined; - if (this.getResolution() !== newResolution || + if ( + this.getResolution() !== newResolution || this.getRotation() !== newRotation || !this.getCenterInternal() || - !equals(this.getCenterInternal(), newCenter)) { - + !equals(this.getCenterInternal(), newCenter) + ) { if (this.getAnimating()) { this.cancelAnimations(); } @@ -1484,7 +1626,7 @@ class View extends BaseObject { resolution: newResolution, duration: duration, easing: easeOut, - anchor: anchor + anchor: anchor, }); } } @@ -1510,7 +1652,8 @@ class View extends BaseObject { * @api */ endInteraction(opt_duration, opt_resolutionDirection, opt_anchor) { - const anchor = opt_anchor && fromUserCoordinate(opt_anchor, this.getProjection()); + const anchor = + opt_anchor && fromUserCoordinate(opt_anchor, this.getProjection()); this.endInteractionInternal(opt_duration, opt_resolutionDirection, anchor); } @@ -1536,7 +1679,11 @@ class View extends BaseObject { */ getConstrainedCenter(targetCenter, opt_targetResolution) { const size = this.getViewportSize_(this.getRotation()); - return this.constraints_.center(targetCenter, opt_targetResolution || this.getResolution(), size); + return this.constraints_.center( + targetCenter, + opt_targetResolution || this.getResolution(), + size + ); } /** @@ -1550,7 +1697,9 @@ class View extends BaseObject { */ getConstrainedZoom(targetZoom, opt_direction) { const targetRes = this.getResolutionForZoom(targetZoom); - return this.getZoomForResolution(this.getConstrainedResolution(targetRes, opt_direction)); + return this.getZoomForResolution( + this.getConstrainedResolution(targetRes, opt_direction) + ); } /** @@ -1570,25 +1719,26 @@ class View extends BaseObject { } } - /** * @param {Function} callback Callback. * @param {*} returnValue Return value. */ function animationCallback(callback, returnValue) { - setTimeout(function() { + setTimeout(function () { callback(returnValue); }, 0); } - /** * @param {ViewOptions} options View options. * @return {import("./centerconstraint.js").Type} The constraint. */ export function createCenterConstraint(options) { if (options.extent !== undefined) { - const smooth = options.smoothExtentConstraint !== undefined ? options.smoothExtentConstraint : true; + const smooth = + options.smoothExtentConstraint !== undefined + ? options.smoothExtentConstraint + : true; return createExtent(options.extent, options.constrainOnlyCenter, smooth); } @@ -1603,7 +1753,6 @@ export function createCenterConstraint(options) { return centerNone; } - /** * @param {ViewOptions} options View options. * @return {{constraint: import("./resolutionconstraint.js").Type, maxResolution: number, @@ -1619,23 +1768,25 @@ export function createResolutionConstraint(options) { const defaultMaxZoom = 28; const defaultZoomFactor = 2; - let minZoom = options.minZoom !== undefined ? - options.minZoom : DEFAULT_MIN_ZOOM; + let minZoom = + options.minZoom !== undefined ? options.minZoom : DEFAULT_MIN_ZOOM; - let maxZoom = options.maxZoom !== undefined ? - options.maxZoom : defaultMaxZoom; + let maxZoom = + options.maxZoom !== undefined ? options.maxZoom : defaultMaxZoom; - const zoomFactor = options.zoomFactor !== undefined ? - options.zoomFactor : defaultZoomFactor; + const zoomFactor = + options.zoomFactor !== undefined ? options.zoomFactor : defaultZoomFactor; - const multiWorld = options.multiWorld !== undefined ? - options.multiWorld : false; + const multiWorld = + options.multiWorld !== undefined ? options.multiWorld : false; const smooth = - options.smoothResolutionConstraint !== undefined ? options.smoothResolutionConstraint : true; + options.smoothResolutionConstraint !== undefined + ? options.smoothResolutionConstraint + : true; const showFullExtent = - options.showFullExtent !== undefined ? options.showFullExtent : false; + options.showFullExtent !== undefined ? options.showFullExtent : false; const projection = createProjection(options.projection, 'EPSG:3857'); const projExtent = projection.getExtent(); @@ -1649,29 +1800,40 @@ export function createResolutionConstraint(options) { if (options.resolutions !== undefined) { const resolutions = options.resolutions; maxResolution = resolutions[minZoom]; - minResolution = resolutions[maxZoom] !== undefined ? - resolutions[maxZoom] : resolutions[resolutions.length - 1]; + minResolution = + resolutions[maxZoom] !== undefined + ? resolutions[maxZoom] + : resolutions[resolutions.length - 1]; if (options.constrainResolution) { - resolutionConstraint = createSnapToResolutions(resolutions, smooth, - !constrainOnlyCenter && extent, showFullExtent); + resolutionConstraint = createSnapToResolutions( + resolutions, + smooth, + !constrainOnlyCenter && extent, + showFullExtent + ); } else { - resolutionConstraint = createMinMaxResolution(maxResolution, minResolution, smooth, - !constrainOnlyCenter && extent, showFullExtent); + resolutionConstraint = createMinMaxResolution( + maxResolution, + minResolution, + smooth, + !constrainOnlyCenter && extent, + showFullExtent + ); } } else { // calculate the default min and max resolution - const size = !projExtent ? - // use an extent that can fit the whole world if need be - 360 * METERS_PER_UNIT[Units.DEGREES] / - projection.getMetersPerUnit() : - Math.max(getWidth(projExtent), getHeight(projExtent)); + const size = !projExtent + ? // use an extent that can fit the whole world if need be + (360 * METERS_PER_UNIT[Units.DEGREES]) / projection.getMetersPerUnit() + : Math.max(getWidth(projExtent), getHeight(projExtent)); - const defaultMaxResolution = size / DEFAULT_TILE_SIZE / Math.pow( - defaultZoomFactor, DEFAULT_MIN_ZOOM); + const defaultMaxResolution = + size / DEFAULT_TILE_SIZE / Math.pow(defaultZoomFactor, DEFAULT_MIN_ZOOM); - const defaultMinResolution = defaultMaxResolution / Math.pow( - defaultZoomFactor, defaultMaxZoom - DEFAULT_MIN_ZOOM); + const defaultMinResolution = + defaultMaxResolution / + Math.pow(defaultZoomFactor, defaultMaxZoom - DEFAULT_MIN_ZOOM); // user provided maxResolution takes precedence maxResolution = options.maxResolution; @@ -1696,31 +1858,48 @@ export function createResolutionConstraint(options) { } // given discrete zoom levels, minResolution may be different than provided - maxZoom = minZoom + Math.floor( - Math.log(maxResolution / minResolution) / Math.log(zoomFactor)); + maxZoom = + minZoom + + Math.floor( + Math.log(maxResolution / minResolution) / Math.log(zoomFactor) + ); minResolution = maxResolution / Math.pow(zoomFactor, maxZoom - minZoom); if (options.constrainResolution) { resolutionConstraint = createSnapToPower( - zoomFactor, maxResolution, minResolution, smooth, - !constrainOnlyCenter && extent, showFullExtent); + zoomFactor, + maxResolution, + minResolution, + smooth, + !constrainOnlyCenter && extent, + showFullExtent + ); } else { - resolutionConstraint = createMinMaxResolution(maxResolution, minResolution, smooth, - !constrainOnlyCenter && extent, showFullExtent); + resolutionConstraint = createMinMaxResolution( + maxResolution, + minResolution, + smooth, + !constrainOnlyCenter && extent, + showFullExtent + ); } } - return {constraint: resolutionConstraint, maxResolution: maxResolution, - minResolution: minResolution, minZoom: minZoom, zoomFactor: zoomFactor}; + return { + constraint: resolutionConstraint, + maxResolution: maxResolution, + minResolution: minResolution, + minZoom: minZoom, + zoomFactor: zoomFactor, + }; } - /** * @param {ViewOptions} options View options. * @return {import("./rotationconstraint.js").Type} Rotation constraint. */ export function createRotationConstraint(options) { - const enableRotation = options.enableRotation !== undefined ? - options.enableRotation : true; + const enableRotation = + options.enableRotation !== undefined ? options.enableRotation : true; if (enableRotation) { const constrainRotation = options.constrainRotation; if (constrainRotation === undefined || constrainRotation === true) { @@ -1737,7 +1916,6 @@ export function createRotationConstraint(options) { } } - /** * Determine if an animation involves no view change. * @param {Animation} animation The animation. diff --git a/src/ol/ViewHint.js b/src/ol/ViewHint.js index 92c75624c3..10a59aa7e0 100644 --- a/src/ol/ViewHint.js +++ b/src/ol/ViewHint.js @@ -7,5 +7,5 @@ */ export default { ANIMATING: 0, - INTERACTING: 1 + INTERACTING: 1, }; diff --git a/src/ol/ViewProperty.js b/src/ol/ViewProperty.js index 192863d084..1d92963531 100644 --- a/src/ol/ViewProperty.js +++ b/src/ol/ViewProperty.js @@ -8,5 +8,5 @@ export default { CENTER: 'center', RESOLUTION: 'resolution', - ROTATION: 'rotation' + ROTATION: 'rotation', }; diff --git a/src/ol/array.js b/src/ol/array.js index bb9796c096..578c096cc1 100644 --- a/src/ol/array.js +++ b/src/ol/array.js @@ -2,7 +2,6 @@ * @module ol/array */ - /** * Performs a binary search on the provided sorted list and returns the index of the item if found. If it can't be found it'll return -1. * https://github.com/darkskyapp/binary-search @@ -22,13 +21,14 @@ export function binarySearch(haystack, needle, opt_comparator) { while (low < high) { /* Note that "(low + high) >>> 1" may overflow, and results in a typecast * to double (which gives the wrong results). */ - mid = low + (high - low >> 1); + mid = low + ((high - low) >> 1); cmp = +comparator(haystack[mid], needle); - if (cmp < 0.0) { /* Too low. */ + if (cmp < 0.0) { + /* Too low. */ low = mid + 1; - - } else { /* Key found or too high */ + } else { + /* Key found or too high */ high = mid; found = !cmp; } @@ -38,7 +38,6 @@ export function binarySearch(haystack, needle, opt_comparator) { return found ? low : ~low; } - /** * Compare function for array sort that is safe for numbers. * @param {*} a The first object to be compared. @@ -50,7 +49,6 @@ export function numberSafeCompareFunction(a, b) { return a > b ? 1 : a < b ? -1 : 0; } - /** * Whether the array contains the given object. * @param {Array<*>} arr The array to test for the presence of the element. @@ -61,7 +59,6 @@ export function includes(arr, obj) { return arr.indexOf(obj) >= 0; } - /** * @param {Array} arr Array. * @param {number} target Target. @@ -107,7 +104,6 @@ export function linearFindNearest(arr, target, direction) { } } - /** * @param {Array<*>} arr Array. * @param {number} begin Begin index. @@ -123,7 +119,6 @@ export function reverseSubArray(arr, begin, end) { } } - /** * @param {Array} arr The array to modify. * @param {!Array|VALUE} data The elements or arrays of elements to add to arr. @@ -137,7 +132,6 @@ export function extend(arr, data) { } } - /** * @param {Array} arr The array to modify. * @param {VALUE} obj The element to remove. @@ -153,7 +147,6 @@ export function remove(arr, obj) { return found; } - /** * @param {Array} arr The array to search in. * @param {function(VALUE, number, ?) : boolean} func The function to compare. @@ -173,7 +166,6 @@ export function find(arr, func) { return null; } - /** * @param {Array|Uint8ClampedArray} arr1 The first array to compare. * @param {Array|Uint8ClampedArray} arr2 The second array to compare. @@ -192,7 +184,6 @@ export function equals(arr1, arr2) { return true; } - /** * Sort the passed array such that the relative order of equal elements is preverved. * See https://en.wikipedia.org/wiki/Sorting_algorithm#Stability for details. @@ -207,7 +198,7 @@ export function stableSort(arr, compareFnc) { for (i = 0; i < length; i++) { tmp[i] = {index: i, value: arr[i]}; } - tmp.sort(function(a, b) { + tmp.sort(function (a, b) { return compareFnc(a.value, b.value) || a.index - b.index; }); for (i = 0; i < arr.length; i++) { @@ -215,7 +206,6 @@ export function stableSort(arr, compareFnc) { } } - /** * @param {Array<*>} arr The array to search in. * @param {Function} func Comparison function. @@ -223,14 +213,13 @@ export function stableSort(arr, compareFnc) { */ export function findIndex(arr, func) { let index; - const found = !arr.every(function(el, idx) { + const found = !arr.every(function (el, idx) { index = idx; return !func(el, idx, arr); }); return found ? index : -1; } - /** * @param {Array<*>} arr The array to test. * @param {Function=} opt_func Comparison function. @@ -239,11 +228,11 @@ export function findIndex(arr, func) { */ export function isSorted(arr, opt_func, opt_strict) { const compare = opt_func || numberSafeCompareFunction; - return arr.every(function(currentVal, index) { + return arr.every(function (currentVal, index) { if (index === 0) { return true; } const res = compare(arr[index - 1], currentVal); - return !(res > 0 || opt_strict && res === 0); + return !(res > 0 || (opt_strict && res === 0)); }); } diff --git a/src/ol/centerconstraint.js b/src/ol/centerconstraint.js index 82576941b8..b024106275 100644 --- a/src/ol/centerconstraint.js +++ b/src/ol/centerconstraint.js @@ -3,12 +3,10 @@ */ import {clamp} from './math.js'; - /** * @typedef {function((import("./coordinate.js").Coordinate|undefined), number, import("./size.js").Size, boolean=): (import("./coordinate.js").Coordinate|undefined)} Type */ - /** * @param {import("./extent.js").Extent} extent Extent. * @param {boolean} onlyCenter If true, the constraint will only apply to the view center. @@ -25,7 +23,7 @@ export function createExtent(extent, onlyCenter, smooth) { * @param {boolean=} opt_isMoving True if an interaction or animation is in progress. * @return {import("./coordinate.js").Coordinate|undefined} Center. */ - function(center, resolution, size, opt_isMoving) { + function (center, resolution, size, opt_isMoving) { if (center) { const viewWidth = onlyCenter ? 0 : size[0] * resolution; const viewHeight = onlyCenter ? 0 : size[1] * resolution; @@ -51,9 +49,11 @@ export function createExtent(extent, onlyCenter, smooth) { // during an interaction, allow some overscroll if (opt_isMoving && smooth) { - x += -ratio * Math.log(1 + Math.max(0, minX - center[0]) / ratio) + + x += + -ratio * Math.log(1 + Math.max(0, minX - center[0]) / ratio) + ratio * Math.log(1 + Math.max(0, center[0] - maxX) / ratio); - y += -ratio * Math.log(1 + Math.max(0, minY - center[1]) / ratio) + + y += + -ratio * Math.log(1 + Math.max(0, minY - center[1]) / ratio) + ratio * Math.log(1 + Math.max(0, center[1] - maxY) / ratio); } @@ -65,7 +65,6 @@ export function createExtent(extent, onlyCenter, smooth) { ); } - /** * @param {import("./coordinate.js").Coordinate=} center Center. * @return {import("./coordinate.js").Coordinate|undefined} Center. diff --git a/src/ol/color.js b/src/ol/color.js index 4bff697ad9..4b52b056c5 100644 --- a/src/ol/color.js +++ b/src/ol/color.js @@ -4,7 +4,6 @@ import {assert} from './asserts.js'; import {clamp} from './math.js'; - /** * A color represented as a short array [red, green, blue, alpha]. * red, green, and blue should be integers in the range 0..255 inclusive. @@ -14,7 +13,6 @@ import {clamp} from './math.js'; * @api */ - /** * This RegExp matches # followed by 3, 4, 6, or 8 hex digits. * @const @@ -23,7 +21,6 @@ import {clamp} from './math.js'; */ const HEX_COLOR_RE_ = /^#([a-f0-9]{3}|[a-f0-9]{4}(?:[a-f0-9]{2}){0,2})$/i; - /** * Regular expression for matching potential named color style strings. * @const @@ -32,7 +29,6 @@ const HEX_COLOR_RE_ = /^#([a-f0-9]{3}|[a-f0-9]{4}(?:[a-f0-9]{2}){0,2})$/i; */ const NAMED_COLOR_RE_ = /^([a-z]*)$|^hsla?\(.*\)$/i; - /** * Return the color as an rgba string. * @param {Color|string} color Color. @@ -65,62 +61,58 @@ function fromNamed(color) { } } - /** * @param {string} s String. * @return {Color} Color. */ -export const fromString = ( - function() { +export const fromString = (function () { + // We maintain a small cache of parsed strings. To provide cheap LRU-like + // semantics, whenever the cache grows too large we simply delete an + // arbitrary 25% of the entries. - // We maintain a small cache of parsed strings. To provide cheap LRU-like - // semantics, whenever the cache grows too large we simply delete an - // arbitrary 25% of the entries. + /** + * @const + * @type {number} + */ + const MAX_CACHE_SIZE = 1024; + /** + * @type {Object} + */ + const cache = {}; + + /** + * @type {number} + */ + let cacheSize = 0; + + return ( /** - * @const - * @type {number} + * @param {string} s String. + * @return {Color} Color. */ - const MAX_CACHE_SIZE = 1024; - - /** - * @type {Object} - */ - const cache = {}; - - /** - * @type {number} - */ - let cacheSize = 0; - - return ( - /** - * @param {string} s String. - * @return {Color} Color. - */ - function(s) { - let color; - if (cache.hasOwnProperty(s)) { - color = cache[s]; - } else { - if (cacheSize >= MAX_CACHE_SIZE) { - let i = 0; - for (const key in cache) { - if ((i++ & 3) === 0) { - delete cache[key]; - --cacheSize; - } + function (s) { + let color; + if (cache.hasOwnProperty(s)) { + color = cache[s]; + } else { + if (cacheSize >= MAX_CACHE_SIZE) { + let i = 0; + for (const key in cache) { + if ((i++ & 3) === 0) { + delete cache[key]; + --cacheSize; } } - color = fromStringInternal_(s); - cache[s] = color; - ++cacheSize; } - return color; + color = fromStringInternal_(s); + cache[s] = color; + ++cacheSize; } - ); - - })(); + return color; + } + ); +})(); /** * Return the color as an array. This function maintains a cache of calculated @@ -149,7 +141,8 @@ function fromStringInternal_(s) { s = fromNamed(s); } - if (HEX_COLOR_RE_.exec(s)) { // hex + if (HEX_COLOR_RE_.exec(s)) { + // hex const n = s.length - 1; // number of hex digits let d; // number of digits per channel if (n <= 4) { @@ -175,10 +168,12 @@ function fromStringInternal_(s) { } } color = [r, g, b, a / 255]; - } else if (s.indexOf('rgba(') == 0) { // rgba() + } else if (s.indexOf('rgba(') == 0) { + // rgba() color = s.slice(5, -1).split(',').map(Number); normalize(color); - } else if (s.indexOf('rgb(') == 0) { // rgb() + } else if (s.indexOf('rgb(') == 0) { + // rgb() color = s.slice(4, -1).split(',').map(Number); color.push(1); normalize(color); @@ -188,7 +183,6 @@ function fromStringInternal_(s) { return color; } - /** * TODO this function is only used in the test, we probably shouldn't export it * @param {Color} color Color. @@ -202,7 +196,6 @@ export function normalize(color) { return color; } - /** * @param {Color} color Color. * @return {string} String. @@ -232,5 +225,7 @@ export function isStringColor(s) { if (NAMED_COLOR_RE_.test(s)) { s = fromNamed(s); } - return HEX_COLOR_RE_.test(s) || s.indexOf('rgba(') === 0 || s.indexOf('rgb(') === 0; + return ( + HEX_COLOR_RE_.test(s) || s.indexOf('rgba(') === 0 || s.indexOf('rgb(') === 0 + ); } diff --git a/src/ol/colorlike.js b/src/ol/colorlike.js index ddeeb7d3ad..54e5c18bd7 100644 --- a/src/ol/colorlike.js +++ b/src/ol/colorlike.js @@ -3,7 +3,6 @@ */ import {toString} from './color.js'; - /** * A type accepted by CanvasRenderingContext2D.fillStyle * or CanvasRenderingContext2D.strokeStyle. @@ -16,7 +15,6 @@ import {toString} from './color.js'; * @api */ - /** * @param {import("./color.js").Color|ColorLike} color Color. * @return {ColorLike} The color as an {@link ol/colorlike~ColorLike}. diff --git a/src/ol/control.js b/src/ol/control.js index 7b10be95b8..73ea893dd7 100644 --- a/src/ol/control.js +++ b/src/ol/control.js @@ -1,8 +1,8 @@ /** * @module ol/control */ -import Collection from './Collection.js'; import Attribution from './control/Attribution.js'; +import Collection from './Collection.js'; import Rotate from './control/Rotate.js'; import Zoom from './control/Zoom.js'; @@ -33,7 +33,6 @@ export {default as ZoomToExtent} from './control/ZoomToExtent.js'; * @api */ - /** * Set of controls included in maps by default. Unless configured otherwise, * this returns a collection containing an instance of each of the following @@ -49,7 +48,6 @@ export {default as ZoomToExtent} from './control/ZoomToExtent.js'; * @api */ export function defaults(opt_options) { - const options = opt_options ? opt_options : {}; const controls = new Collection(); @@ -64,8 +62,8 @@ export function defaults(opt_options) { controls.push(new Rotate(options.rotateOptions)); } - const attributionControl = options.attribution !== undefined ? - options.attribution : true; + const attributionControl = + options.attribution !== undefined ? options.attribution : true; if (attributionControl) { controls.push(new Attribution(options.attributionOptions)); } diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js index f3409c829e..76924ec860 100644 --- a/src/ol/control/Attribution.js +++ b/src/ol/control/Attribution.js @@ -1,13 +1,12 @@ /** * @module ol/control/Attribution */ -import {equals} from '../array.js'; import Control from './Control.js'; -import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_COLLAPSED} from '../css.js'; -import {removeChildren, replaceNode} from '../dom.js'; import EventType from '../events/EventType.js'; +import {CLASS_COLLAPSED, CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js'; +import {equals} from '../array.js'; import {inView} from '../layer/Layer.js'; - +import {removeChildren, replaceNode} from '../dom.js'; /** * @typedef {Object} Options @@ -32,7 +31,6 @@ import {inView} from '../layer/Layer.js'; * callback. */ - /** * @classdesc * Control to show all the attributions associated with the layer sources @@ -43,18 +41,16 @@ import {inView} from '../layer/Layer.js'; * @api */ class Attribution extends Control { - /** * @param {Options=} opt_options Attribution options. */ constructor(opt_options) { - const options = opt_options ? opt_options : {}; super({ element: document.createElement('div'), render: options.render || render, - target: options.target + target: options.target, }); /** @@ -67,7 +63,8 @@ class Attribution extends Control { * @private * @type {boolean} */ - this.collapsed_ = options.collapsed !== undefined ? options.collapsed : true; + this.collapsed_ = + options.collapsed !== undefined ? options.collapsed : true; /** * @private @@ -79,18 +76,21 @@ class Attribution extends Control { * @private * @type {boolean} */ - this.collapsible_ = options.collapsible !== undefined ? - options.collapsible : true; + this.collapsible_ = + options.collapsible !== undefined ? options.collapsible : true; if (!this.collapsible_) { this.collapsed_ = false; } - const className = options.className !== undefined ? options.className : 'ol-attribution'; + const className = + options.className !== undefined ? options.className : 'ol-attribution'; - const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Attributions'; + const tipLabel = + options.tipLabel !== undefined ? options.tipLabel : 'Attributions'; - const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB'; + const collapseLabel = + options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB'; if (typeof collapseLabel === 'string') { /** @@ -116,19 +116,27 @@ class Attribution extends Control { this.label_ = label; } - - const activeLabel = (this.collapsible_ && !this.collapsed_) ? - this.collapseLabel_ : this.label_; + const activeLabel = + this.collapsible_ && !this.collapsed_ ? this.collapseLabel_ : this.label_; const button = document.createElement('button'); button.setAttribute('type', 'button'); button.title = tipLabel; button.appendChild(activeLabel); - button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false); + button.addEventListener( + EventType.CLICK, + this.handleClick_.bind(this), + false + ); - const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL + - (this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') + - (this.collapsible_ ? '' : ' ol-uncollapsible'); + const cssClasses = + className + + ' ' + + CLASS_UNSELECTABLE + + ' ' + + CLASS_CONTROL + + (this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') + + (this.collapsible_ ? '' : ' ol-uncollapsible'); const element = this.element; element.className = cssClasses; element.appendChild(this.ulElement_); @@ -146,7 +154,6 @@ class Attribution extends Control { * @type {boolean} */ this.renderedVisible_ = true; - } /** @@ -190,7 +197,10 @@ class Attribution extends Control { continue; } - if (!this.overrideCollapsible_ && source.getAttributionsCollapsible() === false) { + if ( + !this.overrideCollapsible_ && + source.getAttributionsCollapsible() === false + ) { this.setCollapsible(false); } @@ -320,7 +330,6 @@ class Attribution extends Control { } } - /** * Update the attribution element. * @param {import("../MapEvent.js").default} mapEvent Map event. @@ -330,5 +339,4 @@ export function render(mapEvent) { this.updateElement_(mapEvent.frameState); } - export default Attribution; diff --git a/src/ol/control/Control.js b/src/ol/control/Control.js index 1f54f28ce7..9e76547af4 100644 --- a/src/ol/control/Control.js +++ b/src/ol/control/Control.js @@ -1,12 +1,11 @@ /** * @module ol/control/Control */ -import {VOID} from '../functions.js'; -import MapEventType from '../MapEventType.js'; import BaseObject from '../Object.js'; -import {removeNode} from '../dom.js'; +import MapEventType from '../MapEventType.js'; +import {VOID} from '../functions.js'; import {listen, unlistenByKey} from '../events.js'; - +import {removeNode} from '../dom.js'; /** * @typedef {Object} Options @@ -20,7 +19,6 @@ import {listen, unlistenByKey} from '../events.js'; * the control to be rendered outside of the map's viewport. */ - /** * @classdesc * A control is a visible widget with a DOM element in a fixed position on the @@ -46,12 +44,10 @@ import {listen, unlistenByKey} from '../events.js'; * @api */ class Control extends BaseObject { - /** * @param {Options} options Control options. */ constructor(options) { - super(); /** @@ -87,7 +83,6 @@ class Control extends BaseObject { if (options.target) { this.setTarget(options.target); } - } /** @@ -124,12 +119,14 @@ class Control extends BaseObject { this.listenerKeys.length = 0; this.map_ = map; if (this.map_) { - const target = this.target_ ? - this.target_ : map.getOverlayContainerStopEvent(); + const target = this.target_ + ? this.target_ + : map.getOverlayContainerStopEvent(); target.appendChild(this.element); if (this.render !== VOID) { - this.listenerKeys.push(listen(map, - MapEventType.POSTRENDER, this.render, this)); + this.listenerKeys.push( + listen(map, MapEventType.POSTRENDER, this.render, this) + ); } map.render(); } @@ -155,11 +152,9 @@ class Control extends BaseObject { * @api */ setTarget(target) { - this.target_ = typeof target === 'string' ? - document.getElementById(target) : - target; + this.target_ = + typeof target === 'string' ? document.getElementById(target) : target; } } - export default Control; diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js index d2f82a3268..44022755c4 100644 --- a/src/ol/control/FullScreen.js +++ b/src/ol/control/FullScreen.js @@ -2,19 +2,21 @@ * @module ol/control/FullScreen */ import Control from './Control.js'; -import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_UNSUPPORTED} from '../css.js'; -import {replaceNode} from '../dom.js'; -import {listen} from '../events.js'; import EventType from '../events/EventType.js'; +import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_UNSUPPORTED} from '../css.js'; +import {listen} from '../events.js'; +import {replaceNode} from '../dom.js'; -const events = ['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange']; - +const events = [ + 'fullscreenchange', + 'webkitfullscreenchange', + 'MSFullscreenChange', +]; /** * @enum {string} */ const FullScreenEventType = { - /** * Triggered after the map entered fullscreen. * @event FullScreenEventType#enterfullscreen @@ -27,11 +29,9 @@ const FullScreenEventType = { * @event FullScreenEventType#leavefullscreen * @api */ - LEAVEFULLSCREEN: 'leavefullscreen' - + LEAVEFULLSCREEN: 'leavefullscreen', }; - /** * @typedef {Object} Options * @property {string} [className='ol-full-screen'] CSS class name. @@ -49,7 +49,6 @@ const FullScreenEventType = { * be displayed fullscreen. */ - /** * @classdesc * Provides a button that when clicked fills up the full screen with the map. @@ -66,25 +65,23 @@ const FullScreenEventType = { * @api */ class FullScreen extends Control { - /** * @param {Options=} opt_options Options. */ constructor(opt_options) { - const options = opt_options ? opt_options : {}; super({ element: document.createElement('div'), - target: options.target + target: options.target, }); /** * @private * @type {string} */ - this.cssClassName_ = options.className !== undefined ? options.className : - 'ol-full-screen'; + this.cssClassName_ = + options.className !== undefined ? options.className : 'ol-full-screen'; const label = options.label !== undefined ? options.label : '\u2922'; @@ -92,17 +89,20 @@ class FullScreen extends Control { * @private * @type {Text} */ - this.labelNode_ = typeof label === 'string' ? - document.createTextNode(label) : label; + this.labelNode_ = + typeof label === 'string' ? document.createTextNode(label) : label; - const labelActive = options.labelActive !== undefined ? options.labelActive : '\u00d7'; + const labelActive = + options.labelActive !== undefined ? options.labelActive : '\u00d7'; /** * @private * @type {Text} */ - this.labelActiveNode_ = typeof labelActive === 'string' ? - document.createTextNode(labelActive) : labelActive; + this.labelActiveNode_ = + typeof labelActive === 'string' + ? document.createTextNode(labelActive) + : labelActive; /** * @private @@ -116,11 +116,20 @@ class FullScreen extends Control { this.button_.title = tipLabel; this.button_.appendChild(this.labelNode_); - this.button_.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false); + this.button_.addEventListener( + EventType.CLICK, + this.handleClick_.bind(this), + false + ); - const cssClasses = this.cssClassName_ + ' ' + CLASS_UNSELECTABLE + - ' ' + CLASS_CONTROL + ' ' + - (!isFullScreenSupported() ? CLASS_UNSUPPORTED : ''); + const cssClasses = + this.cssClassName_ + + ' ' + + CLASS_UNSELECTABLE + + ' ' + + CLASS_CONTROL + + ' ' + + (!isFullScreenSupported() ? CLASS_UNSUPPORTED : ''); const element = this.element; element.className = cssClasses; element.appendChild(this.button_); @@ -136,7 +145,6 @@ class FullScreen extends Control { * @type {HTMLElement|string|undefined} */ this.source_ = options.source; - } /** @@ -164,15 +172,15 @@ class FullScreen extends Control { } else { let element; if (this.source_) { - element = typeof this.source_ === 'string' ? - document.getElementById(this.source_) : - this.source_; + element = + typeof this.source_ === 'string' + ? document.getElementById(this.source_) + : this.source_; } else { element = map.getTargetElement(); } if (this.keys_) { requestFullScreenWithKeys(element); - } else { requestFullScreen(element); } @@ -224,13 +232,13 @@ class FullScreen extends Control { if (map) { for (let i = 0, ii = events.length; i < ii; ++i) { this.listenerKeys.push( - listen(document, events[i], this.handleFullScreenChange_, this)); + listen(document, events[i], this.handleFullScreenChange_, this) + ); } } } } - /** * @return {boolean} Fullscreen is supported by the current platform. */ @@ -248,7 +256,9 @@ function isFullScreenSupported() { */ function isFullScreen() { return !!( - document.webkitIsFullScreen || document.msFullscreenElement || document.fullscreenElement + document.webkitIsFullScreen || + document.msFullscreenElement || + document.fullscreenElement ); } diff --git a/src/ol/control/MousePosition.js b/src/ol/control/MousePosition.js index b55796638e..f7bbee05e9 100644 --- a/src/ol/control/MousePosition.js +++ b/src/ol/control/MousePosition.js @@ -3,12 +3,16 @@ */ import 'elm-pep'; -import {listen} from '../events.js'; +import Control from './Control.js'; import EventType from '../pointer/EventType.js'; import {getChangeEventType} from '../Object.js'; -import Control from './Control.js'; -import {getTransformFromProjections, identityTransform, get as getProjection, getUserProjection} from '../proj.js'; - +import { + get as getProjection, + getTransformFromProjections, + getUserProjection, + identityTransform, +} from '../proj.js'; +import {listen} from '../events.js'; /** * @type {string} @@ -20,7 +24,6 @@ const PROJECTION = 'projection'; */ const COORDINATE_FORMAT = 'coordinateFormat'; - /** * @typedef {Object} Options * @property {string} [className='ol-mouse-position'] CSS class name. @@ -38,7 +41,6 @@ const COORDINATE_FORMAT = 'coordinateFormat'; * string `''`). */ - /** * @classdesc * A control to show the 2D coordinates of the mouse cursor. By default, these @@ -52,24 +54,26 @@ const COORDINATE_FORMAT = 'coordinateFormat'; * @api */ class MousePosition extends Control { - /** * @param {Options=} opt_options Mouse position options. */ constructor(opt_options) { - const options = opt_options ? opt_options : {}; const element = document.createElement('div'); - element.className = options.className !== undefined ? options.className : 'ol-mouse-position'; + element.className = + options.className !== undefined ? options.className : 'ol-mouse-position'; super({ element: element, render: options.render || render, - target: options.target + target: options.target, }); - this.addEventListener(getChangeEventType(PROJECTION), this.handleProjectionChanged_); + this.addEventListener( + getChangeEventType(PROJECTION), + this.handleProjectionChanged_ + ); if (options.coordinateFormat) { this.setCoordinateFormat(options.coordinateFormat); @@ -82,7 +86,8 @@ class MousePosition extends Control { * @private * @type {string} */ - this.undefinedHTML_ = options.undefinedHTML !== undefined ? options.undefinedHTML : ' '; + this.undefinedHTML_ = + options.undefinedHTML !== undefined ? options.undefinedHTML : ' '; /** * @private @@ -107,7 +112,6 @@ class MousePosition extends Control { * @type {?import("../proj.js").TransformFunction} */ this.transform_ = null; - } /** @@ -126,9 +130,9 @@ class MousePosition extends Control { * @api */ getCoordinateFormat() { - return ( - /** @type {import("../coordinate.js").CoordinateFormat|undefined} */ (this.get(COORDINATE_FORMAT)) - ); + return /** @type {import("../coordinate.js").CoordinateFormat|undefined} */ (this.get( + COORDINATE_FORMAT + )); } /** @@ -139,9 +143,9 @@ class MousePosition extends Control { * @api */ getProjection() { - return ( - /** @type {import("../proj/Projection.js").default|undefined} */ (this.get(PROJECTION)) - ); + return /** @type {import("../proj/Projection.js").default|undefined} */ (this.get( + PROJECTION + )); } /** @@ -216,7 +220,9 @@ class MousePosition extends Control { const projection = this.getProjection(); if (projection) { this.transform_ = getTransformFromProjections( - this.mapProjection_, projection); + this.mapProjection_, + projection + ); } else { this.transform_ = identityTransform; } @@ -227,7 +233,9 @@ class MousePosition extends Control { const userProjection = getUserProjection(); if (userProjection) { this.transform_ = getTransformFromProjections( - this.mapProjection_, userProjection); + this.mapProjection_, + userProjection + ); } this.transform_(coordinate, coordinate); const coordinateFormat = this.getCoordinateFormat(); @@ -245,7 +253,6 @@ class MousePosition extends Control { } } - /** * Update the projection. Rendering of the coordinates is done in * `handleMouseMove` and `handleMouseUp`. @@ -264,5 +271,4 @@ export function render(mapEvent) { } } - export default MousePosition; diff --git a/src/ol/control/OverviewMap.js b/src/ol/control/OverviewMap.js index a64b15979d..b48294f4ad 100644 --- a/src/ol/control/OverviewMap.js +++ b/src/ol/control/OverviewMap.js @@ -1,24 +1,29 @@ /** * @module ol/control/OverviewMap */ -import PluggableMap from '../PluggableMap.js'; import CompositeMapRenderer from '../renderer/Composite.js'; +import Control from './Control.js'; +import EventType from '../events/EventType.js'; import MapEventType from '../MapEventType.js'; import MapProperty from '../MapProperty.js'; -import {getChangeEventType} from '../Object.js'; import ObjectEventType from '../ObjectEventType.js'; import Overlay from '../Overlay.js'; import OverlayPositioning from '../OverlayPositioning.js'; -import ViewProperty from '../ViewProperty.js'; -import Control from './Control.js'; -import {fromExtent as polygonFromExtent} from '../geom/Polygon.js'; -import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_COLLAPSED} from '../css.js'; -import {replaceNode} from '../dom.js'; -import {listen, listenOnce} from '../events.js'; -import EventType from '../events/EventType.js'; -import {containsExtent, equals as equalsExtent, getBottomRight, getTopLeft, scaleFromCenter} from '../extent.js'; +import PluggableMap from '../PluggableMap.js'; import View from '../View.js'; - +import ViewProperty from '../ViewProperty.js'; +import {CLASS_COLLAPSED, CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js'; +import { + containsExtent, + equals as equalsExtent, + getBottomRight, + getTopLeft, + scaleFromCenter, +} from '../extent.js'; +import {getChangeEventType} from '../Object.js'; +import {listen, listenOnce} from '../events.js'; +import {fromExtent as polygonFromExtent} from '../geom/Polygon.js'; +import {replaceNode} from '../dom.js'; /** * Maximum width and/or height extent ratio that determines when the overview @@ -27,7 +32,6 @@ import View from '../View.js'; */ const MAX_RATIO = 0.75; - /** * Minimum width and/or height extent ratio that determines when the overview * map should be zoomed in. @@ -35,14 +39,12 @@ const MAX_RATIO = 0.75; */ const MIN_RATIO = 0.1; - class ControlledMap extends PluggableMap { createRenderer() { return new CompositeMapRenderer(this); } } - /** * @typedef {Object} Options * @property {string} [className='ol-overviewmap'] CSS class name. @@ -64,7 +66,6 @@ class ControlledMap extends PluggableMap { * a default view with the same projection as the main map will be used. */ - /** * Create a new control with a map acting as an overview map for another * defined map. @@ -72,18 +73,16 @@ class ControlledMap extends PluggableMap { * @api */ class OverviewMap extends Control { - /** * @param {Options=} opt_options OverviewMap options. */ constructor(opt_options) { - const options = opt_options ? opt_options : {}; super({ element: document.createElement('div'), render: options.render || render, - target: options.target + target: options.target, }); /** @@ -95,14 +94,15 @@ class OverviewMap extends Control { * @type {boolean} * @private */ - this.collapsed_ = options.collapsed !== undefined ? options.collapsed : true; + this.collapsed_ = + options.collapsed !== undefined ? options.collapsed : true; /** * @private * @type {boolean} */ - this.collapsible_ = options.collapsible !== undefined ? - options.collapsible : true; + this.collapsible_ = + options.collapsible !== undefined ? options.collapsible : true; if (!this.collapsible_) { this.collapsed_ = false; @@ -112,8 +112,8 @@ class OverviewMap extends Control { * @private * @type {boolean} */ - this.rotateWithView_ = options.rotateWithView !== undefined ? - options.rotateWithView : false; + this.rotateWithView_ = + options.rotateWithView !== undefined ? options.rotateWithView : false; /** * @private @@ -121,11 +121,14 @@ class OverviewMap extends Control { */ this.viewExtent_ = undefined; - const className = options.className !== undefined ? options.className : 'ol-overviewmap'; + const className = + options.className !== undefined ? options.className : 'ol-overviewmap'; - const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Overview map'; + const tipLabel = + options.tipLabel !== undefined ? options.tipLabel : 'Overview map'; - const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00AB'; + const collapseLabel = + options.collapseLabel !== undefined ? options.collapseLabel : '\u00AB'; if (typeof collapseLabel === 'string') { /** @@ -140,7 +143,6 @@ class OverviewMap extends Control { const label = options.label !== undefined ? options.label : '\u00BB'; - if (typeof label === 'string') { /** * @private @@ -152,14 +154,18 @@ class OverviewMap extends Control { this.label_ = label; } - const activeLabel = (this.collapsible_ && !this.collapsed_) ? - this.collapseLabel_ : this.label_; + const activeLabel = + this.collapsible_ && !this.collapsed_ ? this.collapseLabel_ : this.label_; const button = document.createElement('button'); button.setAttribute('type', 'button'); button.title = tipLabel; button.appendChild(activeLabel); - button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false); + button.addEventListener( + EventType.CLICK, + this.handleClick_.bind(this), + false + ); /** * @type {HTMLElement} @@ -180,12 +186,12 @@ class OverviewMap extends Control { * @private */ this.ovmap_ = new ControlledMap({ - view: options.view + view: options.view, }); const ovmap = this.ovmap_; if (options.layers) { - options.layers.forEach(function(layer) { + options.layers.forEach(function (layer) { ovmap.addLayer(layer); }); } @@ -201,13 +207,18 @@ class OverviewMap extends Control { this.boxOverlay_ = new Overlay({ position: [0, 0], positioning: OverlayPositioning.CENTER_CENTER, - element: box + element: box, }); this.ovmap_.addOverlay(this.boxOverlay_); - const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL + - (this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') + - (this.collapsible_ ? '' : ' ol-uncollapsible'); + const cssClasses = + className + + ' ' + + CLASS_UNSELECTABLE + + ' ' + + CLASS_CONTROL + + (this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') + + (this.collapsible_ ? '' : ' ol-uncollapsible'); const element = this.element; element.className = cssClasses; element.appendChild(this.ovmapDiv_); @@ -222,21 +233,23 @@ class OverviewMap extends Control { /* Functions definition */ - const computeDesiredMousePosition = function(mousePosition) { + const computeDesiredMousePosition = function (mousePosition) { return { clientX: mousePosition.clientX, - clientY: mousePosition.clientY + clientY: mousePosition.clientY, }; }; - const move = function(event) { + const move = function (event) { const position = /** @type {?} */ (computeDesiredMousePosition(event)); - const coordinates = ovmap.getEventCoordinateInternal(/** @type {Event} */ (position)); + const coordinates = ovmap.getEventCoordinateInternal( + /** @type {Event} */ (position) + ); overlay.setPosition(coordinates); }; - const endMoving = function(event) { + const endMoving = function (event) { const coordinates = ovmap.getEventCoordinateInternal(event); scope.getMap().getView().setCenterInternal(coordinates); @@ -247,11 +260,10 @@ class OverviewMap extends Control { /* Binding */ - overlayBox.addEventListener('mousedown', function() { + overlayBox.addEventListener('mousedown', function () { window.addEventListener('mousemove', move); window.addEventListener('mouseup', endMoving); }); - } /** @@ -277,9 +289,14 @@ class OverviewMap extends Control { if (map) { this.ovmap_.setTarget(this.ovmapDiv_); - this.listenerKeys.push(listen( - map, ObjectEventType.PROPERTYCHANGE, - this.handleMapPropertyChange_, this)); + this.listenerKeys.push( + listen( + map, + ObjectEventType.PROPERTYCHANGE, + this.handleMapPropertyChange_, + this + ) + ); const view = map.getView(); if (view) { @@ -317,12 +334,15 @@ class OverviewMap extends Control { if (!this.view_) { // Unless an explicit view definition was given, derive default from whatever main map uses. const newView = new View({ - projection: view.getProjection() + projection: view.getProjection(), }); this.ovmap_.setView(newView); } - view.addEventListener(getChangeEventType(ViewProperty.ROTATION), this.boundHandleRotationChanged_); + view.addEventListener( + getChangeEventType(ViewProperty.ROTATION), + this.boundHandleRotationChanged_ + ); // Sync once with the new view this.handleRotationChanged_(); } @@ -333,7 +353,10 @@ class OverviewMap extends Control { * @private */ unbindView_(view) { - view.removeEventListener(getChangeEventType(ViewProperty.ROTATION), this.boundHandleRotationChanged_); + view.removeEventListener( + getChangeEventType(ViewProperty.ROTATION), + this.boundHandleRotationChanged_ + ); } /** @@ -381,10 +404,12 @@ class OverviewMap extends Control { const ovview = ovmap.getView(); const ovextent = ovview.calculateExtentInternal(ovmapSize); - const topLeftPixel = - ovmap.getPixelFromCoordinateInternal(getTopLeft(extent)); - const bottomRightPixel = - ovmap.getPixelFromCoordinateInternal(getBottomRight(extent)); + const topLeftPixel = ovmap.getPixelFromCoordinateInternal( + getTopLeft(extent) + ); + const bottomRightPixel = ovmap.getPixelFromCoordinateInternal( + getBottomRight(extent) + ); const boxWidth = Math.abs(topLeftPixel[0] - bottomRightPixel[0]); const boxHeight = Math.abs(topLeftPixel[1] - bottomRightPixel[1]); @@ -392,10 +417,12 @@ class OverviewMap extends Control { const ovmapWidth = ovmapSize[0]; const ovmapHeight = ovmapSize[1]; - if (boxWidth < ovmapWidth * MIN_RATIO || - boxHeight < ovmapHeight * MIN_RATIO || - boxWidth > ovmapWidth * MAX_RATIO || - boxHeight > ovmapHeight * MAX_RATIO) { + if ( + boxWidth < ovmapWidth * MIN_RATIO || + boxHeight < ovmapHeight * MIN_RATIO || + boxWidth > ovmapWidth * MAX_RATIO || + boxHeight > ovmapHeight * MAX_RATIO + ) { this.resetExtent_(); } else if (!containsExtent(ovextent, extent)) { this.recenter_(); @@ -425,8 +452,7 @@ class OverviewMap extends Control { // get how many times the current map overview could hold different // box sizes using the min and max ratio, pick the step in the middle used // to calculate the extent from the main map to set it to the overview map, - const steps = Math.log( - MAX_RATIO / MIN_RATIO) / Math.LN2; + const steps = Math.log(MAX_RATIO / MIN_RATIO) / Math.LN2; const ratio = 1 / (Math.pow(2, steps / 2) * MIN_RATIO); scaleFromCenter(extent, ratio); ovview.fitInternal(polygonFromExtent(extent)); @@ -473,8 +499,8 @@ class OverviewMap extends Control { const center = view.getCenterInternal(); const resolution = view.getResolution(); const ovresolution = ovview.getResolution(); - const width = mapSize[0] * resolution / ovresolution; - const height = mapSize[1] * resolution / ovresolution; + const width = (mapSize[0] * resolution) / ovresolution; + const height = (mapSize[1] * resolution) / ovresolution; // set position using center coordinates overlay.setPosition(center); @@ -520,11 +546,14 @@ class OverviewMap extends Control { } ovmap.updateSize(); this.resetExtent_(); - listenOnce(ovmap, MapEventType.POSTRENDER, - function(event) { + listenOnce( + ovmap, + MapEventType.POSTRENDER, + function (event) { this.updateBox_(); }, - this); + this + ); } } @@ -617,7 +646,6 @@ class OverviewMap extends Control { } } - /** * Update the overview map element. * @param {import("../MapEvent.js").default} mapEvent Map event. @@ -628,5 +656,4 @@ export function render(mapEvent) { this.updateBox_(); } - export default OverviewMap; diff --git a/src/ol/control/Rotate.js b/src/ol/control/Rotate.js index c4bdc237d3..26e3881ac5 100644 --- a/src/ol/control/Rotate.js +++ b/src/ol/control/Rotate.js @@ -2,10 +2,9 @@ * @module ol/control/Rotate */ import Control from './Control.js'; +import EventType from '../events/EventType.js'; import {CLASS_CONTROL, CLASS_HIDDEN, CLASS_UNSELECTABLE} from '../css.js'; import {easeOut} from '../easing.js'; -import EventType from '../events/EventType.js'; - /** * @typedef {Object} Options @@ -23,7 +22,6 @@ import EventType from '../events/EventType.js'; * rendered outside of the map's viewport. */ - /** * @classdesc * A button control to reset rotation to 0. @@ -33,21 +31,20 @@ import EventType from '../events/EventType.js'; * @api */ class Rotate extends Control { - /** * @param {Options=} opt_options Rotate options. */ constructor(opt_options) { - const options = opt_options ? opt_options : {}; super({ element: document.createElement('div'), render: options.render || render, - target: options.target + target: options.target, }); - const className = options.className !== undefined ? options.className : 'ol-rotate'; + const className = + options.className !== undefined ? options.className : 'ol-rotate'; const label = options.label !== undefined ? options.label : '\u21E7'; @@ -74,9 +71,14 @@ class Rotate extends Control { button.title = tipLabel; button.appendChild(this.label_); - button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false); + button.addEventListener( + EventType.CLICK, + this.handleClick_.bind(this), + false + ); - const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL; + const cssClasses = + className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL; const element = this.element; element.className = cssClasses; element.appendChild(button); @@ -104,7 +106,6 @@ class Rotate extends Control { if (this.autoHide_) { this.element.classList.add(CLASS_HIDDEN); } - } /** @@ -137,7 +138,7 @@ class Rotate extends Control { view.animate({ rotation: 0, duration: this.duration_, - easing: easeOut + easing: easeOut, }); } else { view.setRotation(0); @@ -146,7 +147,6 @@ class Rotate extends Control { } } - /** * Update the rotate control element. * @param {import("../MapEvent.js").default} mapEvent Map event. diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index b910182ab1..25e71be508 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -1,13 +1,12 @@ /** * @module ol/control/ScaleLine */ -import {getChangeEventType} from '../Object.js'; -import {assert} from '../asserts.js'; import Control from './Control.js'; -import {CLASS_UNSELECTABLE} from '../css.js'; -import {getPointResolution, METERS_PER_UNIT} from '../proj.js'; import ProjUnits from '../proj/Units.js'; - +import {CLASS_UNSELECTABLE} from '../css.js'; +import {METERS_PER_UNIT, getPointResolution} from '../proj.js'; +import {assert} from '../asserts.js'; +import {getChangeEventType} from '../Object.js'; /** * @type {string} @@ -24,10 +23,9 @@ export const Units = { IMPERIAL: 'imperial', NAUTICAL: 'nautical', METRIC: 'metric', - US: 'us' + US: 'us', }; - /** * @const * @type {Array} @@ -40,7 +38,6 @@ const LEADING_DIGITS = [1, 2, 5]; */ const DEFAULT_DPI = 25.4 / 0.28; - /** * @typedef {Object} Options * @property {string} [className='ol-scale-line'] CSS Class name. @@ -60,7 +57,6 @@ const DEFAULT_DPI = 25.4 / 0.28; * when `bar` is `true`. If undefined the OGC default screen pixel size of 0.28mm will be assumed. */ - /** * @classdesc * A control displaying rough y-axis distances, calculated for the center of the @@ -76,21 +72,23 @@ const DEFAULT_DPI = 25.4 / 0.28; * @api */ class ScaleLine extends Control { - /** * @param {Options=} opt_options Scale line options. */ constructor(opt_options) { - const options = opt_options ? opt_options : {}; - const className = options.className !== undefined ? options.className : - options.bar ? 'ol-scale-bar' : 'ol-scale-line'; + const className = + options.className !== undefined + ? options.className + : options.bar + ? 'ol-scale-bar' + : 'ol-scale-line'; super({ element: document.createElement('div'), render: options.render || render, - target: options.target + target: options.target, }); /** @@ -133,7 +131,10 @@ class ScaleLine extends Control { */ this.renderedHTML_ = ''; - this.addEventListener(getChangeEventType(UNITS_PROP), this.handleUnitsChanged_); + this.addEventListener( + getChangeEventType(UNITS_PROP), + this.handleUnitsChanged_ + ); this.setUnits(options.units || Units.METRIC); @@ -160,7 +161,6 @@ class ScaleLine extends Control { * @type {number|undefined} */ this.dpi_ = options.dpi || undefined; - } /** @@ -217,13 +217,17 @@ class ScaleLine extends Control { const center = viewState.center; const projection = viewState.projection; const units = this.getUnits(); - const pointResolutionUnits = units == Units.DEGREES ? - ProjUnits.DEGREES : - ProjUnits.METERS; - let pointResolution = - getPointResolution(projection, viewState.resolution, center, pointResolutionUnits); + const pointResolutionUnits = + units == Units.DEGREES ? ProjUnits.DEGREES : ProjUnits.METERS; + let pointResolution = getPointResolution( + projection, + viewState.resolution, + center, + pointResolutionUnits + ); - const minWidth = this.minWidth_ * (this.dpi_ || DEFAULT_DPI) / DEFAULT_DPI; + const minWidth = + (this.minWidth_ * (this.dpi_ || DEFAULT_DPI)) / DEFAULT_DPI; let nominalCount = minWidth * pointResolution; let suffix = ''; @@ -281,8 +285,7 @@ class ScaleLine extends Control { assert(false, 33); // Invalid units } - let i = 3 * Math.floor( - Math.log(minWidth * pointResolution) / Math.log(10)); + let i = 3 * Math.floor(Math.log(minWidth * pointResolution) / Math.log(10)); let count, width, decimalCount; while (true) { decimalCount = Math.floor(i / 3); @@ -319,7 +322,6 @@ class ScaleLine extends Control { this.element.style.display = ''; this.renderedVisible_ = true; } - } /** @@ -330,7 +332,8 @@ class ScaleLine extends Control { * @returns {string} The stringified HTML of the scalebar. */ createScaleBar(width, scale, suffix) { - const mapScale = '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString(); + const mapScale = + '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString(); const scaleSteps = []; const stepWidth = width / this.scaleBarSteps_; let backgroundColor = '#ffffff'; @@ -342,22 +345,27 @@ class ScaleLine extends Control { scaleSteps.push( '
' + '
' + '
' + this.createMarker('relative', i) + /*render text every second step, except when only 2 steps */ - (i % 2 === 0 || this.scaleBarSteps_ === 2 ? - this.createStepText(i, width, false, scale, suffix) : - '' - ) + - '
' + (i % 2 === 0 || this.scaleBarSteps_ === 2 + ? this.createStepText(i, width, false, scale, suffix) + : '') + + '' ); if (i === this.scaleBarSteps_ - 1) { - {/*render text at the end */} + { + /*render text at the end */ + } scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix)); } // switch colors of steps between black and white @@ -370,19 +378,23 @@ class ScaleLine extends Control { let scaleBarText; if (this.scaleBarText_) { - scaleBarText = '
' + - mapScale + - '
'; + scaleBarText = + '
' + + mapScale + + '
'; } else { scaleBarText = ''; } - const container = '
' + scaleBarText + scaleSteps.join('') + - '
'; + ''; return container; } @@ -394,11 +406,17 @@ class ScaleLine extends Control { */ createMarker(position, i) { const top = position === 'absolute' ? 3 : -10; - return '
'; + return ( + '
' + ); } /** @@ -411,20 +429,31 @@ class ScaleLine extends Control { * @returns {string} The stringified div containing the step text */ createStepText(i, width, isLast, scale, suffix) { - const length = i === 0 ? 0 : Math.round((scale / this.scaleBarSteps_ * i) * 100) / 100; + const length = + i === 0 ? 0 : Math.round((scale / this.scaleBarSteps_) * i * 100) / 100; const lengthString = length + (i === 0 ? '' : ' ' + suffix); - const margin = i === 0 ? -3 : width / this.scaleBarSteps_ * -1; - const minWidth = i === 0 ? 0 : width / this.scaleBarSteps_ * 2; - return '
' + lengthString + - '
'; + '' + ); } /** @@ -459,5 +488,4 @@ export function render(mapEvent) { this.updateElement_(); } - export default ScaleLine; diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index 0dbed9bf39..b2ac5dae04 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -1,12 +1,11 @@ /** * @module ol/control/Zoom */ -import EventType from '../events/EventType.js'; import Control from './Control.js'; +import EventType from '../events/EventType.js'; import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js'; import {easeOut} from '../easing.js'; - /** * @typedef {Object} Options * @property {number} [duration=250] Animation duration in milliseconds. @@ -22,7 +21,6 @@ import {easeOut} from '../easing.js'; * rendered outside of the map's viewport. */ - /** * @classdesc * A control with 2 buttons, one for zoom in and one for zoom out. @@ -32,52 +30,68 @@ import {easeOut} from '../easing.js'; * @api */ class Zoom extends Control { - /** * @param {Options=} opt_options Zoom options. */ constructor(opt_options) { - const options = opt_options ? opt_options : {}; super({ element: document.createElement('div'), - target: options.target + target: options.target, }); - const className = options.className !== undefined ? options.className : 'ol-zoom'; + const className = + options.className !== undefined ? options.className : 'ol-zoom'; const delta = options.delta !== undefined ? options.delta : 1; - const zoomInLabel = options.zoomInLabel !== undefined ? options.zoomInLabel : '+'; - const zoomOutLabel = options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2212'; + const zoomInLabel = + options.zoomInLabel !== undefined ? options.zoomInLabel : '+'; + const zoomOutLabel = + options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2212'; - const zoomInTipLabel = options.zoomInTipLabel !== undefined ? - options.zoomInTipLabel : 'Zoom in'; - const zoomOutTipLabel = options.zoomOutTipLabel !== undefined ? - options.zoomOutTipLabel : 'Zoom out'; + const zoomInTipLabel = + options.zoomInTipLabel !== undefined ? options.zoomInTipLabel : 'Zoom in'; + const zoomOutTipLabel = + options.zoomOutTipLabel !== undefined + ? options.zoomOutTipLabel + : 'Zoom out'; const inElement = document.createElement('button'); inElement.className = className + '-in'; inElement.setAttribute('type', 'button'); inElement.title = zoomInTipLabel; inElement.appendChild( - typeof zoomInLabel === 'string' ? document.createTextNode(zoomInLabel) : zoomInLabel + typeof zoomInLabel === 'string' + ? document.createTextNode(zoomInLabel) + : zoomInLabel ); - inElement.addEventListener(EventType.CLICK, this.handleClick_.bind(this, delta), false); + inElement.addEventListener( + EventType.CLICK, + this.handleClick_.bind(this, delta), + false + ); const outElement = document.createElement('button'); outElement.className = className + '-out'; outElement.setAttribute('type', 'button'); outElement.title = zoomOutTipLabel; outElement.appendChild( - typeof zoomOutLabel === 'string' ? document.createTextNode(zoomOutLabel) : zoomOutLabel + typeof zoomOutLabel === 'string' + ? document.createTextNode(zoomOutLabel) + : zoomOutLabel ); - outElement.addEventListener(EventType.CLICK, this.handleClick_.bind(this, -delta), false); + outElement.addEventListener( + EventType.CLICK, + this.handleClick_.bind(this, -delta), + false + ); - const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL; + const cssClasses = + className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL; const element = this.element; element.className = cssClasses; element.appendChild(inElement); @@ -88,7 +102,6 @@ class Zoom extends Control { * @private */ this.duration_ = options.duration !== undefined ? options.duration : 250; - } /** @@ -123,7 +136,7 @@ class Zoom extends Control { view.animate({ zoom: newZoom, duration: this.duration_, - easing: easeOut + easing: easeOut, }); } else { view.setZoom(newZoom); @@ -132,5 +145,4 @@ class Zoom extends Control { } } - export default Zoom; diff --git a/src/ol/control/ZoomSlider.js b/src/ol/control/ZoomSlider.js index b65ec01808..d9bef3a62c 100644 --- a/src/ol/control/ZoomSlider.js +++ b/src/ol/control/ZoomSlider.js @@ -4,14 +4,13 @@ import 'elm-pep'; import Control from './Control.js'; +import EventType from '../events/EventType.js'; +import PointerEventType from '../pointer/EventType.js'; import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js'; +import {clamp} from '../math.js'; import {easeOut} from '../easing.js'; import {listen, unlistenByKey} from '../events.js'; import {stopPropagation} from '../events/Event.js'; -import EventType from '../events/EventType.js'; -import {clamp} from '../math.js'; -import PointerEventType from '../pointer/EventType.js'; - /** * The enum for available directions. @@ -20,10 +19,9 @@ import PointerEventType from '../pointer/EventType.js'; */ const Direction = { VERTICAL: 0, - HORIZONTAL: 1 + HORIZONTAL: 1, }; - /** * @typedef {Object} Options * @property {string} [className='ol-zoomslider'] CSS class name. @@ -32,7 +30,6 @@ const Direction = { * should be re-rendered. This is called in a `requestAnimationFrame` callback. */ - /** * @classdesc * A slider type of control for zooming. @@ -44,23 +41,21 @@ const Direction = { * @api */ class ZoomSlider extends Control { - /** * @param {Options=} opt_options Zoom slider options. */ constructor(opt_options) { - const options = opt_options ? opt_options : {}; super({ element: document.createElement('div'), - render: options.render || render + render: options.render || render, }); /** - * @type {!Array.} - * @private - */ + * @type {!Array.} + * @private + */ this.dragListenerKeys_ = []; /** @@ -131,19 +126,37 @@ class ZoomSlider extends Control { */ this.duration_ = options.duration !== undefined ? options.duration : 200; - const className = options.className !== undefined ? options.className : 'ol-zoomslider'; + const className = + options.className !== undefined ? options.className : 'ol-zoomslider'; const thumbElement = document.createElement('button'); thumbElement.setAttribute('type', 'button'); thumbElement.className = className + '-thumb ' + CLASS_UNSELECTABLE; const containerElement = this.element; - containerElement.className = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL; + containerElement.className = + className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL; containerElement.appendChild(thumbElement); - containerElement.addEventListener(PointerEventType.POINTERDOWN, this.handleDraggerStart_.bind(this), false); - containerElement.addEventListener(PointerEventType.POINTERMOVE, this.handleDraggerDrag_.bind(this), false); - containerElement.addEventListener(PointerEventType.POINTERUP, this.handleDraggerEnd_.bind(this), false); + containerElement.addEventListener( + PointerEventType.POINTERDOWN, + this.handleDraggerStart_.bind(this), + false + ); + containerElement.addEventListener( + PointerEventType.POINTERMOVE, + this.handleDraggerDrag_.bind(this), + false + ); + containerElement.addEventListener( + PointerEventType.POINTERUP, + this.handleDraggerEnd_.bind(this), + false + ); - containerElement.addEventListener(EventType.CLICK, this.handleContainerClick_.bind(this), false); + containerElement.addEventListener( + EventType.CLICK, + this.handleContainerClick_.bind(this), + false + ); thumbElement.addEventListener(EventType.CLICK, stopPropagation, false); } @@ -171,17 +184,20 @@ class ZoomSlider extends Control { initSlider_() { const container = this.element; const containerSize = { - width: container.offsetWidth, height: container.offsetHeight + width: container.offsetWidth, + height: container.offsetHeight, }; const thumb = /** @type {HTMLElement} */ (container.firstElementChild); const computedStyle = getComputedStyle(thumb); - const thumbWidth = thumb.offsetWidth + - parseFloat(computedStyle['marginRight']) + - parseFloat(computedStyle['marginLeft']); - const thumbHeight = thumb.offsetHeight + - parseFloat(computedStyle['marginTop']) + - parseFloat(computedStyle['marginBottom']); + const thumbWidth = + thumb.offsetWidth + + parseFloat(computedStyle['marginRight']) + + parseFloat(computedStyle['marginLeft']); + const thumbHeight = + thumb.offsetHeight + + parseFloat(computedStyle['marginTop']) + + parseFloat(computedStyle['marginBottom']); this.thumbSize_ = [thumbWidth, thumbHeight]; if (containerSize.width > containerSize.height) { @@ -203,7 +219,8 @@ class ZoomSlider extends Control { const relativePosition = this.getRelativePosition_( event.offsetX - this.thumbSize_[0] / 2, - event.offsetY - this.thumbSize_[1] / 2); + event.offsetY - this.thumbSize_[1] / 2 + ); const resolution = this.getResolutionForPosition_(relativePosition); const zoom = view.getConstrainedZoom(view.getZoomForResolution(resolution)); @@ -211,7 +228,7 @@ class ZoomSlider extends Control { view.animateInternal({ zoom: zoom, duration: this.duration_, - easing: easeOut + easing: easeOut, }); } @@ -222,7 +239,8 @@ class ZoomSlider extends Control { */ handleDraggerStart_(event) { if (!this.dragging_ && event.target === this.element.firstElementChild) { - const element = /** @type {HTMLElement} */ (this.element.firstElementChild); + const element = /** @type {HTMLElement} */ (this.element + .firstElementChild); this.getMap().getView().beginInteraction(); this.startX_ = event.clientX - parseFloat(element.style.left); this.startY_ = event.clientY - parseFloat(element.style.top); @@ -250,7 +268,9 @@ class ZoomSlider extends Control { const deltaX = event.clientX - this.startX_; const deltaY = event.clientY - this.startY_; const relativePosition = this.getRelativePosition_(deltaX, deltaY); - this.currentResolution_ = this.getResolutionForPosition_(relativePosition); + this.currentResolution_ = this.getResolutionForPosition_( + relativePosition + ); this.getMap().getView().setResolution(this.currentResolution_); } } @@ -338,7 +358,6 @@ class ZoomSlider extends Control { } } - /** * Update the zoomslider element. * @param {import("../MapEvent.js").default} mapEvent Map event. @@ -356,5 +375,4 @@ export function render(mapEvent) { this.setThumbPosition_(res); } - export default ZoomSlider; diff --git a/src/ol/control/ZoomToExtent.js b/src/ol/control/ZoomToExtent.js index 6c3142a6c0..68ddcc3c88 100644 --- a/src/ol/control/ZoomToExtent.js +++ b/src/ol/control/ZoomToExtent.js @@ -1,11 +1,10 @@ /** * @module ol/control/ZoomToExtent */ -import EventType from '../events/EventType.js'; -import {fromExtent as polygonFromExtent} from '../geom/Polygon.js'; import Control from './Control.js'; +import EventType from '../events/EventType.js'; import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js'; - +import {fromExtent as polygonFromExtent} from '../geom/Polygon.js'; /** * @typedef {Object} Options @@ -19,7 +18,6 @@ import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js'; * extent of the view projection is used. */ - /** * @classdesc * A button control which, when pressed, changes the map view to a specific @@ -28,7 +26,6 @@ import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js'; * @api */ class ZoomToExtent extends Control { - /** * @param {Options=} opt_options Options. */ @@ -37,7 +34,7 @@ class ZoomToExtent extends Control { super({ element: document.createElement('div'), - target: options.target + target: options.target, }); /** @@ -46,10 +43,12 @@ class ZoomToExtent extends Control { */ this.extent = options.extent ? options.extent : null; - const className = options.className !== undefined ? options.className : 'ol-zoom-extent'; + const className = + options.className !== undefined ? options.className : 'ol-zoom-extent'; const label = options.label !== undefined ? options.label : 'E'; - const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Fit to extent'; + const tipLabel = + options.tipLabel !== undefined ? options.tipLabel : 'Fit to extent'; const button = document.createElement('button'); button.setAttribute('type', 'button'); button.title = tipLabel; @@ -57,9 +56,14 @@ class ZoomToExtent extends Control { typeof label === 'string' ? document.createTextNode(label) : label ); - button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false); + button.addEventListener( + EventType.CLICK, + this.handleClick_.bind(this), + false + ); - const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL; + const cssClasses = + className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL; const element = this.element; element.className = cssClasses; element.appendChild(button); @@ -80,7 +84,9 @@ class ZoomToExtent extends Control { handleZoomToExtent() { const map = this.getMap(); const view = map.getView(); - const extent = !this.extent ? view.getProjection().getExtent() : this.extent; + const extent = !this.extent + ? view.getProjection().getExtent() + : this.extent; view.fitInternal(polygonFromExtent(extent)); } } diff --git a/src/ol/coordinate.js b/src/ol/coordinate.js index 563ff1bf64..ec9d2a101b 100644 --- a/src/ol/coordinate.js +++ b/src/ol/coordinate.js @@ -1,10 +1,9 @@ /** * @module ol/coordinate */ +import {getWidth} from './extent.js'; import {modulo} from './math.js'; import {padNumber} from './string.js'; -import {getWidth} from './extent.js'; - /** * An array of numbers representing an xy coordinate. Example: `[16, 48]`. @@ -12,7 +11,6 @@ import {getWidth} from './extent.js'; * @api */ - /** * A function that takes a {@link module:ol/coordinate~Coordinate} and * transforms it into a `{string}`. @@ -21,7 +19,6 @@ import {getWidth} from './extent.js'; * @api */ - /** * Add `delta` to `coordinate`. `coordinate` is modified in place and returned * by the function. @@ -46,7 +43,6 @@ export function add(coordinate, delta) { return coordinate; } - /** * Calculates the point closest to the passed coordinate on the passed circle. * @@ -69,13 +65,12 @@ export function closestOnCircle(coordinate, circle) { } const d = Math.sqrt(dx * dx + dy * dy); - const x = x0 + r * dx / d; - const y = y0 + r * dy / d; + const x = x0 + (r * dx) / d; + const y = y0 + (r * dy) / d; return [x, y]; } - /** * Calculates the point closest to the passed coordinate on the passed segment. * This is the foot of the perpendicular of the coordinate to the segment when @@ -99,8 +94,10 @@ export function closestOnSegment(coordinate, segment) { const y2 = end[1]; const dx = x2 - x1; const dy = y2 - y1; - const along = (dx === 0 && dy === 0) ? 0 : - ((dx * (x0 - x1)) + (dy * (y0 - y1))) / ((dx * dx + dy * dy) || 0); + const along = + dx === 0 && dy === 0 + ? 0 + : (dx * (x0 - x1) + dy * (y0 - y1)) / (dx * dx + dy * dy || 0); let x, y; if (along <= 0) { x = x1; @@ -115,7 +112,6 @@ export function closestOnSegment(coordinate, segment) { return [x, y]; } - /** * Returns a {@link module:ol/coordinate~CoordinateFormat} function that can be * used to format @@ -150,13 +146,12 @@ export function createStringXY(opt_fractionDigits) { * @param {Coordinate} coordinate Coordinate. * @return {string} String XY. */ - function(coordinate) { + function (coordinate) { return toStringXY(coordinate, opt_fractionDigits); } ); } - /** * @param {string} hemispheres Hemispheres. * @param {number} degrees Degrees. @@ -172,7 +167,7 @@ export function degreesToStringHDMS(hemispheres, degrees, opt_fractionDigits) { let deg = Math.floor(x / 3600); let min = Math.floor((x - deg * 3600) / 60); - let sec = x - (deg * 3600) - (min * 60); + let sec = x - deg * 3600 - min * 60; sec = Math.ceil(sec * precision) / precision; if (sec >= 60) { @@ -185,12 +180,19 @@ export function degreesToStringHDMS(hemispheres, degrees, opt_fractionDigits) { deg += 1; } - return deg + '\u00b0 ' + padNumber(min, 2) + '\u2032 ' + - padNumber(sec, 2, dflPrecision) + '\u2033' + - (normalizedDegrees == 0 ? '' : ' ' + hemispheres.charAt(normalizedDegrees < 0 ? 1 : 0)); + return ( + deg + + '\u00b0 ' + + padNumber(min, 2) + + '\u2032 ' + + padNumber(sec, 2, dflPrecision) + + '\u2033' + + (normalizedDegrees == 0 + ? '' + : ' ' + hemispheres.charAt(normalizedDegrees < 0 ? 1 : 0)) + ); } - /** * Transforms the given {@link module:ol/coordinate~Coordinate} to a string * using the given string template. The strings `{x}` and `{y}` in the template @@ -232,7 +234,6 @@ export function format(coordinate, template, opt_fractionDigits) { } } - /** * @param {Coordinate} coordinate1 First coordinate. * @param {Coordinate} coordinate2 Second coordinate. @@ -249,7 +250,6 @@ export function equals(coordinate1, coordinate2) { return equals; } - /** * Rotate `coordinate` by `angle`. `coordinate` is modified in place and * returned by the function. @@ -278,7 +278,6 @@ export function rotate(coordinate, angle) { return coordinate; } - /** * Scale `coordinate` by `scale`. `coordinate` is modified in place and returned * by the function. @@ -302,7 +301,6 @@ export function scale(coordinate, scale) { return coordinate; } - /** * @param {Coordinate} coord1 First coordinate. * @param {Coordinate} coord2 Second coordinate. @@ -314,7 +312,6 @@ export function squaredDistance(coord1, coord2) { return dx * dx + dy * dy; } - /** * @param {Coordinate} coord1 First coordinate. * @param {Coordinate} coord2 Second coordinate. @@ -324,7 +321,6 @@ export function distance(coord1, coord2) { return Math.sqrt(squaredDistance(coord1, coord2)); } - /** * Calculate the squared distance from a coordinate to a line segment. * @@ -334,11 +330,9 @@ export function distance(coord1, coord2) { * @return {number} Squared distance from the point to the line segment. */ export function squaredDistanceToSegment(coordinate, segment) { - return squaredDistance(coordinate, - closestOnSegment(coordinate, segment)); + return squaredDistance(coordinate, closestOnSegment(coordinate, segment)); } - /** * Format a geographic coordinate with the hemisphere, degrees, minutes, and * seconds. @@ -367,14 +361,16 @@ export function squaredDistanceToSegment(coordinate, segment) { */ export function toStringHDMS(coordinate, opt_fractionDigits) { if (coordinate) { - return degreesToStringHDMS('NS', coordinate[1], opt_fractionDigits) + ' ' + - degreesToStringHDMS('EW', coordinate[0], opt_fractionDigits); + return ( + degreesToStringHDMS('NS', coordinate[1], opt_fractionDigits) + + ' ' + + degreesToStringHDMS('EW', coordinate[0], opt_fractionDigits) + ); } else { return ''; } } - /** * Format a coordinate as a comma delimited string. * @@ -404,7 +400,6 @@ export function toStringXY(coordinate, opt_fractionDigits) { return format(coordinate, '{x}, {y}', opt_fractionDigits); } - /** * Modifies the provided coordinate in-place to be within the real world * extent. The lower projection extent boundary is inclusive, the upper one @@ -416,10 +411,16 @@ export function toStringXY(coordinate, opt_fractionDigits) { */ export function wrapX(coordinate, projection) { const projectionExtent = projection.getExtent(); - if (projection.canWrapX() && (coordinate[0] < projectionExtent[0] || coordinate[0] >= projectionExtent[2])) { + if ( + projection.canWrapX() && + (coordinate[0] < projectionExtent[0] || + coordinate[0] >= projectionExtent[2]) + ) { const worldWidth = getWidth(projectionExtent); - const worldsAway = Math.floor((coordinate[0] - projectionExtent[0]) / worldWidth); - coordinate[0] -= (worldsAway * worldWidth); + const worldsAway = Math.floor( + (coordinate[0] - projectionExtent[0]) / worldWidth + ); + coordinate[0] -= worldsAway * worldWidth; } return coordinate; } diff --git a/src/ol/css.js b/src/ol/css.js index 88a6d5c9dc..b7eb38b0bf 100644 --- a/src/ol/css.js +++ b/src/ol/css.js @@ -13,7 +13,6 @@ * @property {Array} families */ - /** * The CSS class for hidden feature. * @@ -22,7 +21,6 @@ */ export const CLASS_HIDDEN = 'ol-hidden'; - /** * The CSS class that we'll give the DOM elements to have them selectable. * @@ -31,7 +29,6 @@ export const CLASS_HIDDEN = 'ol-hidden'; */ export const CLASS_SELECTABLE = 'ol-selectable'; - /** * The CSS class that we'll give the DOM elements to have them unselectable. * @@ -40,7 +37,6 @@ export const CLASS_SELECTABLE = 'ol-selectable'; */ export const CLASS_UNSELECTABLE = 'ol-unselectable'; - /** * The CSS class for unsupported feature. * @@ -49,7 +45,6 @@ export const CLASS_UNSELECTABLE = 'ol-unselectable'; */ export const CLASS_UNSUPPORTED = 'ol-unsupported'; - /** * The CSS class for controls. * @@ -58,7 +53,6 @@ export const CLASS_UNSUPPORTED = 'ol-unsupported'; */ export const CLASS_CONTROL = 'ol-control'; - /** * The CSS class that we'll give the DOM elements that are collapsed, i.e. * to those elements which usually can be expanded. @@ -72,22 +66,25 @@ export const CLASS_COLLAPSED = 'ol-collapsed'; * From http://stackoverflow.com/questions/10135697/regex-to-parse-any-css-font * @type {RegExp} */ -const fontRegEx = new RegExp([ - '^\\s*(?=(?:(?:[-a-z]+\\s*){0,2}(italic|oblique))?)', - '(?=(?:(?:[-a-z]+\\s*){0,2}(small-caps))?)', - '(?=(?:(?:[-a-z]+\\s*){0,2}(bold(?:er)?|lighter|[1-9]00 ))?)', - '(?:(?:normal|\\1|\\2|\\3)\\s*){0,3}((?:xx?-)?', - '(?:small|large)|medium|smaller|larger|[\\.\\d]+(?:\\%|in|[cem]m|ex|p[ctx]))', - '(?:\\s*\\/\\s*(normal|[\\.\\d]+(?:\\%|in|[cem]m|ex|p[ctx])?))', - '?\\s*([-,\\"\\\'\\sa-z]+?)\\s*$' -].join(''), 'i'); +const fontRegEx = new RegExp( + [ + '^\\s*(?=(?:(?:[-a-z]+\\s*){0,2}(italic|oblique))?)', + '(?=(?:(?:[-a-z]+\\s*){0,2}(small-caps))?)', + '(?=(?:(?:[-a-z]+\\s*){0,2}(bold(?:er)?|lighter|[1-9]00 ))?)', + '(?:(?:normal|\\1|\\2|\\3)\\s*){0,3}((?:xx?-)?', + '(?:small|large)|medium|smaller|larger|[\\.\\d]+(?:\\%|in|[cem]m|ex|p[ctx]))', + '(?:\\s*\\/\\s*(normal|[\\.\\d]+(?:\\%|in|[cem]m|ex|p[ctx])?))', + '?\\s*([-,\\"\\\'\\sa-z]+?)\\s*$', + ].join(''), + 'i' +); const fontRegExMatchIndex = [ 'style', 'variant', 'weight', 'size', 'lineHeight', - 'family' + 'family', ]; /** @@ -96,7 +93,7 @@ const fontRegExMatchIndex = [ * @param {string} fontSpec The CSS font property. * @return {FontParameters} The font parameters (or null if the input spec is invalid). */ -export const getFontParameters = function(fontSpec) { +export const getFontParameters = function (fontSpec) { const match = fontSpec.match(fontRegEx); if (!match) { return null; @@ -106,7 +103,7 @@ export const getFontParameters = function(fontSpec) { size: '1.2em', style: 'normal', weight: 'normal', - variant: 'normal' + variant: 'normal', }); for (let i = 0, ii = fontRegExMatchIndex.length; i < ii; ++i) { const value = match[i + 1]; diff --git a/src/ol/dom.js b/src/ol/dom.js index e3c403cc99..1c392cce21 100644 --- a/src/ol/dom.js +++ b/src/ol/dom.js @@ -4,7 +4,6 @@ import {WORKER_OFFSCREEN_CANVAS} from './has.js'; * @module ol/dom */ - //FIXME Move this function to the canvas module /** * Create an html canvas element and returns its 2d context. @@ -14,11 +13,12 @@ import {WORKER_OFFSCREEN_CANVAS} from './has.js'; * @return {CanvasRenderingContext2D} The context. */ export function createCanvasContext2D(opt_width, opt_height, opt_canvasPool) { - const canvas = opt_canvasPool && opt_canvasPool.length ? - opt_canvasPool.shift() : - WORKER_OFFSCREEN_CANVAS ? - new OffscreenCanvas(opt_width || 300, opt_height || 300) : - document.createElement('canvas'); + const canvas = + opt_canvasPool && opt_canvasPool.length + ? opt_canvasPool.shift() + : WORKER_OFFSCREEN_CANVAS + ? new OffscreenCanvas(opt_width || 300, opt_height || 300) + : document.createElement('canvas'); if (opt_width) { canvas.width = opt_width; } @@ -29,7 +29,6 @@ export function createCanvasContext2D(opt_width, opt_height, opt_canvasPool) { return /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')); } - /** * Get the current computed width for the given element including margin, * padding and border. @@ -45,7 +44,6 @@ export function outerWidth(element) { return width; } - /** * Get the current computed height for the given element including margin, * padding and border. diff --git a/src/ol/easing.js b/src/ol/easing.js index 7a64d450e9..b6a6c51f51 100644 --- a/src/ol/easing.js +++ b/src/ol/easing.js @@ -2,7 +2,6 @@ * @module ol/easing */ - /** * Start slow and speed up. * @param {number} t Input between 0 and 1. @@ -13,7 +12,6 @@ export function easeIn(t) { return Math.pow(t, 3); } - /** * Start fast and slow down. * @param {number} t Input between 0 and 1. @@ -24,7 +22,6 @@ export function easeOut(t) { return 1 - easeIn(1 - t); } - /** * Start slow, speed up, and then slow down again. * @param {number} t Input between 0 and 1. @@ -35,7 +32,6 @@ export function inAndOut(t) { return 3 * t * t - 2 * t * t * t; } - /** * Maintain a constant speed over time. * @param {number} t Input between 0 and 1. @@ -46,7 +42,6 @@ export function linear(t) { return t; } - /** * Start slow, speed up, and at the very end slow down again. This has the * same general behavior as {@link module:ol/easing~inAndOut}, but the final diff --git a/src/ol/events.js b/src/ol/events.js index f234e82dca..8bd12b7b6e 100644 --- a/src/ol/events.js +++ b/src/ol/events.js @@ -3,7 +3,6 @@ */ import {clear} from './obj.js'; - /** * Key to use with {@link module:ol/Observable~Observable#unByKey}. * @typedef {Object} EventsKey @@ -51,7 +50,7 @@ export function listen(target, type, listener, opt_this, opt_once) { } if (opt_once) { const originalListener = listener; - listener = function() { + listener = function () { target.removeEventListener(type, listener); originalListener.apply(this, arguments); }; @@ -59,13 +58,12 @@ export function listen(target, type, listener, opt_this, opt_once) { const eventsKey = { target: target, type: type, - listener: listener + listener: listener, }; target.addEventListener(type, listener); return eventsKey; } - /** * Registers a one-off event listener on an event target. Inspired by * https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html @@ -90,7 +88,6 @@ export function listenOnce(target, type, listener, opt_this) { return listen(target, type, listener, opt_this, true); } - /** * Unregisters event listeners on an event target. Inspired by * https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html diff --git a/src/ol/events/Event.js b/src/ol/events/Event.js index 1f6d9739b2..69ce76ba1d 100644 --- a/src/ol/events/Event.js +++ b/src/ol/events/Event.js @@ -13,12 +13,10 @@ * {@link module:ol/events/Target~Target}. */ class BaseEvent { - /** * @param {string} type Type. */ constructor(type) { - /** * @type {boolean} */ @@ -54,10 +52,8 @@ class BaseEvent { stopPropagation() { this.propagationStopped = true; } - } - /** * @param {Event|import("./Event.js").default} evt Event */ @@ -65,7 +61,6 @@ export function stopPropagation(evt) { evt.stopPropagation(); } - /** * @param {Event|import("./Event.js").default} evt Event */ diff --git a/src/ol/events/EventType.js b/src/ol/events/EventType.js index 8959635887..571a653111 100644 --- a/src/ol/events/EventType.js +++ b/src/ol/events/EventType.js @@ -35,5 +35,5 @@ export default { LOAD: 'load', RESIZE: 'resize', TOUCHMOVE: 'touchmove', - WHEEL: 'wheel' + WHEEL: 'wheel', }; diff --git a/src/ol/events/KeyCode.js b/src/ol/events/KeyCode.js index e855570c82..01a2d8cf10 100644 --- a/src/ol/events/KeyCode.js +++ b/src/ol/events/KeyCode.js @@ -10,5 +10,5 @@ export default { LEFT: 37, UP: 38, RIGHT: 39, - DOWN: 40 + DOWN: 40, }; diff --git a/src/ol/events/Target.js b/src/ol/events/Target.js index 475d2d570e..dbc845d0dc 100644 --- a/src/ol/events/Target.js +++ b/src/ol/events/Target.js @@ -2,16 +2,14 @@ * @module ol/events/Target */ import Disposable from '../Disposable.js'; -import {VOID} from '../functions.js'; import Event from './Event.js'; +import {VOID} from '../functions.js'; import {clear} from '../obj.js'; - /** * @typedef {EventTarget|Target} EventTargetLike */ - /** * @classdesc * A simplified implementation of the W3C DOM Level 2 EventTarget interface. @@ -28,12 +26,10 @@ import {clear} from '../obj.js'; * returns false. */ class Target extends Disposable { - /** * @param {*=} opt_target Default event target for dispatched events. */ constructor(opt_target) { - super(); /** @@ -59,7 +55,6 @@ class Target extends Disposable { * @type {!Object>} */ this.listeners_ = {}; - } /** @@ -107,9 +102,13 @@ class Target extends Disposable { ++this.dispatching_[type]; for (let i = 0, ii = listeners.length; i < ii; ++i) { if ('handleEvent' in listeners[i]) { - propagate = /** @type {import("../events.js").ListenerObject} */ (listeners[i]).handleEvent(evt); + propagate = /** @type {import("../events.js").ListenerObject} */ (listeners[ + i + ]).handleEvent(evt); } else { - propagate = /** @type {import("../events.js").ListenerFunction} */ (listeners[i]).call(this, evt); + propagate = /** @type {import("../events.js").ListenerFunction} */ (listeners[ + i + ]).call(this, evt); } if (propagate === false || evt.propagationStopped) { propagate = false; @@ -153,9 +152,9 @@ class Target extends Disposable { * @return {boolean} Has listeners. */ hasListener(opt_type) { - return opt_type ? - opt_type in this.listeners_ : - Object.keys(this.listeners_).length > 0; + return opt_type + ? opt_type in this.listeners_ + : Object.keys(this.listeners_).length > 0; } /** @@ -182,5 +181,4 @@ class Target extends Disposable { } } - export default Target; diff --git a/src/ol/events/condition.js b/src/ol/events/condition.js index b4049571f1..03b6fcb370 100644 --- a/src/ol/events/condition.js +++ b/src/ol/events/condition.js @@ -2,10 +2,9 @@ * @module ol/events/condition */ import MapBrowserEventType from '../MapBrowserEventType.js'; +import {FALSE, TRUE} from '../functions.js'; +import {MAC, WEBKIT} from '../has.js'; import {assert} from '../asserts.js'; -import {TRUE, FALSE} from '../functions.js'; -import {WEBKIT, MAC} from '../has.js'; - /** * A function that takes an {@link module:ol/MapBrowserEvent} and returns a @@ -14,7 +13,6 @@ import {WEBKIT, MAC} from '../has.js'; * @typedef {function(this: ?, import("../MapBrowserEvent.js").default): boolean} Condition */ - /** * Return `true` if only the alt-key is pressed, `false` otherwise (e.g. when * additionally the shift-key is pressed). @@ -23,15 +21,15 @@ import {WEBKIT, MAC} from '../has.js'; * @return {boolean} True if only the alt key is pressed. * @api */ -export const altKeyOnly = function(mapBrowserEvent) { +export const altKeyOnly = function (mapBrowserEvent) { const originalEvent = /** @type {KeyboardEvent|MouseEvent|TouchEvent} */ (mapBrowserEvent.originalEvent); return ( originalEvent.altKey && - !(originalEvent.metaKey || originalEvent.ctrlKey) && - !originalEvent.shiftKey); + !(originalEvent.metaKey || originalEvent.ctrlKey) && + !originalEvent.shiftKey + ); }; - /** * Return `true` if only the alt-key and shift-key is pressed, `false` otherwise * (e.g. when additionally the platform-modifier-key is pressed). @@ -40,15 +38,15 @@ export const altKeyOnly = function(mapBrowserEvent) { * @return {boolean} True if only the alt and shift keys are pressed. * @api */ -export const altShiftKeysOnly = function(mapBrowserEvent) { +export const altShiftKeysOnly = function (mapBrowserEvent) { const originalEvent = /** @type {KeyboardEvent|MouseEvent|TouchEvent} */ (mapBrowserEvent.originalEvent); return ( originalEvent.altKey && - !(originalEvent.metaKey || originalEvent.ctrlKey) && - originalEvent.shiftKey); + !(originalEvent.metaKey || originalEvent.ctrlKey) && + originalEvent.shiftKey + ); }; - /** * Return `true` if the map has the focus. This condition requires a map target * element with a `tabindex` attribute, e.g. `
`. @@ -57,11 +55,10 @@ export const altShiftKeysOnly = function(mapBrowserEvent) { * @return {boolean} The map has the focus. * @api */ -export const focus = function(event) { +export const focus = function (event) { return event.target.getTargetElement().contains(document.activeElement); }; - /** * Return always true. * @@ -71,7 +68,6 @@ export const focus = function(event) { */ export const always = TRUE; - /** * Return `true` if the event is a `click` event, `false` otherwise. * @@ -79,11 +75,10 @@ export const always = TRUE; * @return {boolean} True if the event is a map `click` event. * @api */ -export const click = function(mapBrowserEvent) { +export const click = function (mapBrowserEvent) { return mapBrowserEvent.type == MapBrowserEventType.CLICK; }; - /** * Return `true` if the event has an "action"-producing mouse button. * @@ -93,13 +88,11 @@ export const click = function(mapBrowserEvent) { * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event. * @return {boolean} The result. */ -export const mouseActionButton = function(mapBrowserEvent) { +export const mouseActionButton = function (mapBrowserEvent) { const originalEvent = /** @type {MouseEvent} */ (mapBrowserEvent.originalEvent); - return originalEvent.button == 0 && - !(WEBKIT && MAC && originalEvent.ctrlKey); + return originalEvent.button == 0 && !(WEBKIT && MAC && originalEvent.ctrlKey); }; - /** * Return always false. * @@ -109,7 +102,6 @@ export const mouseActionButton = function(mapBrowserEvent) { */ export const never = FALSE; - /** * Return `true` if the browser event is a `pointermove` event, `false` * otherwise. @@ -118,11 +110,10 @@ export const never = FALSE; * @return {boolean} True if the browser event is a `pointermove` event. * @api */ -export const pointerMove = function(mapBrowserEvent) { +export const pointerMove = function (mapBrowserEvent) { return mapBrowserEvent.type == 'pointermove'; }; - /** * Return `true` if the event is a map `singleclick` event, `false` otherwise. * @@ -130,11 +121,10 @@ export const pointerMove = function(mapBrowserEvent) { * @return {boolean} True if the event is a map `singleclick` event. * @api */ -export const singleClick = function(mapBrowserEvent) { +export const singleClick = function (mapBrowserEvent) { return mapBrowserEvent.type == MapBrowserEventType.SINGLECLICK; }; - /** * Return `true` if the event is a map `dblclick` event, `false` otherwise. * @@ -142,11 +132,10 @@ export const singleClick = function(mapBrowserEvent) { * @return {boolean} True if the event is a map `dblclick` event. * @api */ -export const doubleClick = function(mapBrowserEvent) { +export const doubleClick = function (mapBrowserEvent) { return mapBrowserEvent.type == MapBrowserEventType.DBLCLICK; }; - /** * Return `true` if no modifier key (alt-, shift- or platform-modifier-key) is * pressed. @@ -155,15 +144,15 @@ export const doubleClick = function(mapBrowserEvent) { * @return {boolean} True only if there no modifier keys are pressed. * @api */ -export const noModifierKeys = function(mapBrowserEvent) { +export const noModifierKeys = function (mapBrowserEvent) { const originalEvent = /** @type {KeyboardEvent|MouseEvent|TouchEvent} */ (mapBrowserEvent.originalEvent); return ( !originalEvent.altKey && - !(originalEvent.metaKey || originalEvent.ctrlKey) && - !originalEvent.shiftKey); + !(originalEvent.metaKey || originalEvent.ctrlKey) && + !originalEvent.shiftKey + ); }; - /** * Return `true` if only the platform-modifier-key (the meta-key on Mac, * ctrl-key otherwise) is pressed, `false` otherwise (e.g. when additionally @@ -173,14 +162,15 @@ export const noModifierKeys = function(mapBrowserEvent) { * @return {boolean} True if only the platform modifier key is pressed. * @api */ -export const platformModifierKeyOnly = function(mapBrowserEvent) { +export const platformModifierKeyOnly = function (mapBrowserEvent) { const originalEvent = /** @type {KeyboardEvent|MouseEvent|TouchEvent} */ (mapBrowserEvent.originalEvent); - return !originalEvent.altKey && + return ( + !originalEvent.altKey && (MAC ? originalEvent.metaKey : originalEvent.ctrlKey) && - !originalEvent.shiftKey; + !originalEvent.shiftKey + ); }; - /** * Return `true` if only the shift-key is pressed, `false` otherwise (e.g. when * additionally the alt-key is pressed). @@ -189,15 +179,15 @@ export const platformModifierKeyOnly = function(mapBrowserEvent) { * @return {boolean} True if only the shift key is pressed. * @api */ -export const shiftKeyOnly = function(mapBrowserEvent) { +export const shiftKeyOnly = function (mapBrowserEvent) { const originalEvent = /** @type {KeyboardEvent|MouseEvent|TouchEvent} */ (mapBrowserEvent.originalEvent); return ( !originalEvent.altKey && - !(originalEvent.metaKey || originalEvent.ctrlKey) && - originalEvent.shiftKey); + !(originalEvent.metaKey || originalEvent.ctrlKey) && + originalEvent.shiftKey + ); }; - /** * Return `true` if the target element is not editable, i.e. not a ``-, * `