Merge pull request #584 from planetlabs/dependabot/npm_and_yarn/ol-10…

….0.0

Bump ol from 9.2.4 to 10.0.0

lib/source/ImageTile.js

@@ -0,0 +1,24 @@
+// This file is generated by tools/generate.js. DO NOT EDIT.
+/**
+ * Copyright Planet Labs PBC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import OLImageTile from 'ol/source/ImageTile.js';
+import {createElement, forwardRef} from 'react';
+
+const ImageTile = forwardRef((props, ref) => {
+  return createElement('source', {cls: OLImageTile, ref, ...props});
+});
+
+export default ImageTile;

package.json

@@ -48,7 +48,7 @@
     "fs-extra": "^11.1.0",
     "import-meta-resolve": "^4.0.0",
     "mustache": "^4.2.0",
-    "ol": "^9.0.0",
+    "ol": "^10.1.0",
     "ol-mapbox-style": "^12.2.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

site/src/components/examples/Vector.jsx

@@ -4,16 +4,19 @@ import Map from '../../../../lib/Map.js';
 import React, {useState} from 'react';
 import Source from '../../../../lib/source/Vector.js';
 import View from '../../../../lib/View.js';
+import {useGeographic as geographic} from 'ol/proj.js';
+
+geographic();
 
 const format = new GeoJSON();
 
 function Vector() {
-  const [urbanColor, setUrbanColor] = useState('gray');
+  const [urbanColor, setUrbanColor] = useState('red');
 
   return (
     <>
       <Map>
-        <View options={{center: [0, 0], zoom: 1}} />
+        <View options={{center: [15, 45], zoom: 4.5}} />
         <Layer
           style={{
             'fill-color': 'lightgray',
@@ -40,8 +43,8 @@ function Vector() {
         </Layer>
       </Map>
       <div style={{position: 'absolute', top: '1rem', right: '1rem'}}>
-        <button onClick={() => setUrbanColor('gray')}>gray</button>
         <button onClick={() => setUrbanColor('red')}>red</button>
+        <button onClick={() => setUrbanColor('gray')}>gray</button>
       </div>
     </>
   );