Merge pull request #8881 from fredj/dnd_style

Remove custom styles in drag-and-drop examples

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

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

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

@@ -4,74 +4,6 @@ import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
 import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
 import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
 import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
-
-
-const defaultStyle = {
-  'Point': new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(255,255,0,0.5)'
-      }),
-      radius: 5,
-      stroke: new Stroke({
-        color: '#ff0',
-        width: 1
-      })
-    })
-  }),
-  'LineString': new Style({
-    stroke: new Stroke({
-      color: '#f00',
-      width: 3
-    })
-  }),
-  'Polygon': new Style({
-    fill: new Fill({
-      color: 'rgba(0,255,255,0.5)'
-    }),
-    stroke: new Stroke({
-      color: '#0ff',
-      width: 1
-    })
-  }),
-  'MultiPoint': new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(255,0,255,0.5)'
-      }),
-      radius: 5,
-      stroke: new Stroke({
-        color: '#f0f',
-        width: 1
-      })
-    })
-  }),
-  'MultiLineString': new Style({
-    stroke: new Stroke({
-      color: '#0f0',
-      width: 3
-    })
-  }),
-  'MultiPolygon': new Style({
-    fill: new Fill({
-      color: 'rgba(0,0,255,0.5)'
-    }),
-    stroke: new Stroke({
-      color: '#00f',
-      width: 1
-    })
-  })
-};
-
-const styleFunction = function(feature, resolution) {
-  const featureStyleFunction = feature.getStyleFunction();
-  if (featureStyleFunction) {
-    return featureStyleFunction.call(feature, resolution);
-  } else {
-    return defaultStyle[feature.getGeometry().getType()];
-  }
-};
 
 const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [
@@ -106,8 +38,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
   });
   map.addLayer(new VectorLayer({
     renderMode: 'image',
-    source: vectorSource,
+    source: vectorSource
-    style: styleFunction
   }));
   map.getView().fit(vectorSource.getExtent());
 });

examples/drag-and-drop.js

@@ -4,74 +4,6 @@ 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 {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
-
-
-const defaultStyle = {
-  'Point': new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(255,255,0,0.5)'
-      }),
-      radius: 5,
-      stroke: new Stroke({
-        color: '#ff0',
-        width: 1
-      })
-    })
-  }),
-  'LineString': new Style({
-    stroke: new Stroke({
-      color: '#f00',
-      width: 3
-    })
-  }),
-  'Polygon': new Style({
-    fill: new Fill({
-      color: 'rgba(0,255,255,0.5)'
-    }),
-    stroke: new Stroke({
-      color: '#0ff',
-      width: 1
-    })
-  }),
-  'MultiPoint': new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(255,0,255,0.5)'
-      }),
-      radius: 5,
-      stroke: new Stroke({
-        color: '#f0f',
-        width: 1
-      })
-    })
-  }),
-  'MultiLineString': new Style({
-    stroke: new Stroke({
-      color: '#0f0',
-      width: 3
-    })
-  }),
-  'MultiPolygon': new Style({
-    fill: new Fill({
-      color: 'rgba(0,0,255,0.5)'
-    }),
-    stroke: new Stroke({
-      color: '#00f',
-      width: 1
-    })
-  })
-};
-
-const styleFunction = function(feature, resolution) {
-  const featureStyleFunction = feature.getStyleFunction();
-  if (featureStyleFunction) {
-    return featureStyleFunction.call(feature, resolution);
-  } else {
-    return defaultStyle[feature.getGeometry().getType()];
-  }
-};
 
 const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [
@@ -105,8 +37,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
     features: event.features
   });
   map.addLayer(new VectorLayer({
-    source: vectorSource,
+    source: vectorSource
-    style: styleFunction
   }));
   map.getView().fit(vectorSource.getExtent());
 });