Playing around with vector tiles

src/components/map/Map.tsx

@@ -45,6 +45,7 @@ import OsmFetch from '../osm-fetch';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import VectorTileSource from 'ol/source/VectorTile.js';
 import MVT from 'ol/format/MVT.js';
+import style from '../gpx/styles';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -234,13 +235,24 @@ const Map: Component = () => {
       zIndex: Infinity,
     });
 
-    const vectorTileSource = new VectorTileSource({
+    const vectorTileSource1 = new VectorTileSource({
       format: new MVT(),
-      url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3Atransportation@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf',
+      url: 'http://localhost:8081/services/aragon/tiles/{z}/{x}/{y}.pbf',
+      maxZoom: 14,
     });
 
-    const vectorTileLayer = new VectorTileLayer({
-      source: vectorTileSource,
+    const vectorTileLayer1 = new VectorTileLayer({
+      source: vectorTileSource1,
+      style: style,
+    });
+
+    const vectorTileSource2 = new VectorTileSource({
+      format: new MVT(),
+      url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/dyomedea%3Ahiking_routes@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf',
+    });
+
+    const vectorTileLayer2 = new VectorTileLayer({
+      source: vectorTileSource2,
     });
 
     const olMap = new OlMap({
@@ -249,7 +261,7 @@ const Map: Component = () => {
         zoom: +getState().zoom,
         rotation: +getState().rotation,
       }),
-      layers: [tileLayer, vectorTileLayer, vectorLayer],
+      layers: [tileLayer, vectorTileLayer1, vectorLayer],
       target: target,
       controls: new Collection<Control>([
         new Attribution({ collapsible: true }),