8

The geometry is defined as an array of coordinates, not collections of Polygons and LinearRings, so what is returned by getPolygons() and getLinearRings() should be treated as clones and you will need to rebuild the geometry from coordinates var geom = source_g.getFeatures()[0].getGeometry(); var geomCoords = []; geom.getPolygons().forEach(function(poly){ ...


7

This is due to the difference between a measurement in degree and a measurement in meters (nothing that you can do about that) and maybe to the projection of the map (all projections induce distortions of the reality, your choice of a projection will depend on what you try to do). If you assume that the Earth is a sphere, one degree along NS direction will ...


5

All data sources will have terms of use (such as displaying attributions). If you want one without an API key try source: new ol.source.XYZ({ attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'], ...


5

It's because in OpenLayers 5 by default fit constrains the resolution to an integer zoom level. That can be fixed by adding constrainResolution: false to the options. Also note that calculateExtent() and fit() do not give the desired result when the view is rotated so you could replace them completely by setting resolution so in this example https://...


4

The function forEachFeatureAtPixel gets two parameters: the clicked pixel and the function that will be called when a feature is found. This function 1st argument must be called feature (see the doc for a few other possible values) It is a different scope than the variable that you have defined, so despite their name, they do not share the same content. ...


4

From the doc: getFeatures(): Get all features on the source in random order.


4

To open the view at those coordinates at zoom 10 use view: new ol.View({ maxZoom: 18, minZoom: 4, center: ol.proj.fromLonLat([-74.006998, 40.722120]), zoom: 10 }) EPSG:3857 is the OpenLayers default projection so need not be specified. You must convert Lon/Lat values to view projection coordinates (methods beginning OpenLayers. were used ...


4

OpenLayers passes the extent in view projection units so you should use that if your server supports it (otherwise you would need to transform the extent to EPSG:4326) url: function (extent, resolution, projection) { return 'http://localhost:8080/geoserver/misproject/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=misproject%...


4

The feature property in a vector source must be an array of features. Only readFeatures returns an array. Results from the other methods need to be made into an array of features features: (new ol.format.GeoJSON()).readFeatures(geojson_object), features: [ (new ol.format.GeoJSON()).readFeature(geojson_object) ], features: [ new ol.Feature((...


3

Once you create your map, it is static, which means it will allways have the same layers. In particular only because you change the array, that was used to populate the map, does not mean the map itself will reflect those changes. Doing anything to layers (which I assume is defined somewhere above as an array or similar) won´t do anything to the map. You ...


3

You would need to check the GetCapabilities for the WMS to see which formats are supported If supported you can parse application/vnd.ogc.gml to an OpenLayers feature array using the WMSGetFeatureInfo format map.on('click', function (evt) { document.getElementById('info').innerHTML = ''; var viewResolution = map.getView().getResolution(); var url = ...


3

Running OpenLayers examples in a browser The examples provided are not able to run on the client side (on a browser). Let's see an example. Typical OpenLayers example One very simple example of OpenLayers could be (separated in two files): index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...


3

You can add and retrieve extra attributes on a layer and aren't limited by key names. Here's a sample for OpenStreetMaps: var baseLayer = new ol.layer.Tile({ id: 'base_osm', title: 'OpenStreetMap', group: 'base', whatever: 'Testing 123', visible: true, source: new ol.source.OSM(), }) map.on('singleclick', ...


3

The vector layer needs to be included in the map and you will need to process information from your drawn lines somewhere, the drawend event would be the best place to do that. Views default to EPSG:3857 so you don't need to define it. var view = new ol.View({ center: [1030534,5690437], zoom: 12 }) var source = new ol.source.Vector(); var vector = ...


3

GeoServe tries to apply basic cartographic good practice and not have labels that overlap (as no one can read those). If you really want to you can prevent this from happening by adding some vendor parameters: <VendorOption name="conflictResolution">false</VendorOption> <VendorOption name="spaceAround">-1</VendorOption> <...


3

Similar to different vertical and horizontal scaling I think it can only be done in canvas at present (an old pull request for scaling https://github.com/openlayers/openlayers/pull/6100 now conflicts with more recent changes). In this function a negative scale would flip in the image: function createIconStyle(url, scaleX, scaleY, styleOptions, iconOptions) ...


3

Hard to answer without more info. Getting the data from the DB will be about the same in each case. Converting it to an image (WMS) or GeoJSON will depend on the number and size of the features. Transmitting the data to the client will again depend on the size and number of features, for small datasets GeoJSON will be faster but for larger or more ...


3

It will use the value of getStyle at the time vector is defined. For dynamic styling you need a style function var vector = new ol.layer.Vector({ style: function(){ return getStyle; }, source: new ol.source.Vector({ url: 'JS/getjson.json', format: new ol.format.GeoJSON() }), opacity: 1 }); or you could use vector.setStyle(getStyle);


3

You need to use geometry:feature.getGeometry().clone() otherwise the features will share the same geometry object and a change to one will change both.


3

It is possible using more recent versions of OpenLayers. This will work in version 4.6.5 var pixelTolerance = 10; var modify = new ol.interaction.Modify({ source: vector.getSource(), pixelTolerance: pixelTolerance, condition: function(e){ var f = this.getMap().getFeaturesAtPixel(e.pixel,{ hitTolerance: pixelTolerance, ...


3

The extent should be computed from the layer source, not from the layer itself. var layerExtent = layer.getSource().getExtent();


3

Catching events is pretty straightforward: map.on('rendercomplete', e => { // do something }) Depending on your approach you need to hide the loader. If it's a Single Page Application you change the state. If it's a plain JS script you can remove the loader node from the DOM like var el = document.getElementById('loader'); if (el){el.remove()}


3

map.on('singleclick', function(e) { var hit = false; var point; map.forEachFeatureAtPixel(e.pixel, function(feature) { hit = true; point = feature.getGeometry().getClosestPoint(e.coordinate); }, { hitTolerance: hitTolerance });


3

Calling map.updateSize() is the right solution, but it's not enough. It has to be called at the right time, after side menu animation is finished. The simples solution is to use setTimeout call with the proper delay. Code would then look something like this: function w3_open() { document.getElementById("main").style.marginLeft = "25%"; document....


3

To access features in order you would need a features collection: var Source = new ol.source.Vector({ features: new ol.Collection() }); Source.addFeatures(new ol.format.GeoJSON().readFeatures(geojsonObject)); console.log(Source.getFeaturesCollection().getArray());


3

You can use ol.color.asArray method for that. Fourth element of array is then opacity: var color = myStyle.getFill().getColor(); var colorArray = ol.color.asArray(color); var opacity = colorArray[3]; EDIT: As Mike rightfully pointed out, above code is suitable only for reading opacity. Since asArray() method returns cached color, if we want to change color ...


3

The OpenLayers example is scaling to fit a displayed map extent into a paper size. If you want a specific scale on paper the logic will be slightly different. You need to set map size from the paper dimensions and dpi. For A4 portrait at 300dpi the paper pixels therefore the mapsize will be [ 210 * 300 / 25.4, 297 * 300 / 25.4 ] OpenLayers resolutions ...


3

Neither +proj=igh or +proj=goode are currently supported by proj4.js but mproj does support +proj=goode Demo here https://jsfiddle.net/3bjo7rsL/ and the code below. Error catching is needed to handle "off the world" transforms at the edges. <!DOCTYPE html> <html> <head> <link href="https://cdn.rawgit.com/openlayers/openlayers.github....


3

To fit the map to the full screen in Openlayers, you should adjust your css code like this: #map { position: fixed; top: 0; left: 0; bottom: 0; right: 0; }


3

A cluster is an auto-created and doesn't have those properties, instead it has an array of real features making up the cluster. This would return the first feature in the cluster if you clicked on one: feature_onClick = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { var features = feature.get('features'); if (features) { ...


Only top voted, non community-wiki answers of a minimum length are eligible