I am trying to apply basic authentication in GeoServer but somehow it is not reflecting while consuming the WMS service through OpenLayers. I am accessing it thorough below urls: * http://admin:geoserver@localhost:8080/geoserver/localhost/wms?.. // psw as plain text (GetMap) * http://admin:Z2Vvc2VydmVy@localhost:8080/geoserver/localhost/wms?.. // psw as base64 encrypted. (GetMap) * http://admin:Z2Vvc2VydmVy@localhost:8080/geoserver/wms?request=GetCapabilities //Check for capabilities Either way it is not working. Below are the screen shots from GeoServer : Filter Chain : default chain config (with basic authentication as well) I created a Child role and created a child user with this role, Also I created service access rule as below Please suggest if I am missing anything.

I have validated the JSON and I'm certain it is clean. I'm loading it from a web server (using Node.js). The Firefox error is "Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data". Chrome reports the unexpected character to be "

Aprenderemos a crear un mapa interactivo con OpenLayers y visualizar datos de manera efectiva utilizando gráficos de Plotly.

I made this codepen where I am setting a style to a layer on an event listener. How can I programmatically toggle the styling on and off since my attempts to unlisten to the event for that layer have been fruitless? Ideally once I click an outside div the map would use my styling and on clicking that div again revert to original OSM styling. Here is the piece of code that actually enables the dark mode OSM feature. I had to declare the styling function only once in order to pass it to the on and un functions with its unique signature. I understand more about OpenLayers event listeners after Mr. Mike provided help and explanation. darkModeOSMHandler ( flag ) { if (this.darkOSM === null && flag === false) { this.darkOSMCallback = (evt) => { evt.context.globalCompositeOperation = 'color'; evt.context.fillStyle = 'rgba(0,0,0,' + 1.0 + ')'; evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height); evt.context.globalCompositeOperation = 'overlay'; evt.context.fillStyle = 'rgb(' + [200,200,200].toString() + ')'; evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height); evt.context.globalCompositeOperation = 'difference'; evt.context.fillStyle = 'rgba(255,255,255,' + 0.999 + ')'; evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height); evt.context.globalCompositeOperation = 'source-over'; } this.map.getLayers().getArray()[0].on('postrender', this.darkOSMCallback ); this.map.updateSize() } if ( flag === false) { this.map.getLayers().getArray()[0].on('postrender', this.darkOSMCallback ); this.map.updateSize() } if ( flag === true) { this.map.getLayers().getArray()[0].un('postrender', this.darkOSMCallback ); this.map.updateSize() } this.darkOSM = flag }

Geo-reference images onto OpenLayers-based maps with multiple models - tobilg/georeferencing

10.11.0 The 10.11 release improves styling, raster data and OGC service support, and makes the library leaner to load. The highlights are Canvas styles now evaluate the color and array operators, ...

10.11.0 The 10.11 release improves styling, raster data and OGC service support, and makes the library leaner to load. The highlights are Canvas styles now evaluate the color and array operators, ...

I could able to remove the recent modified vertex of a feature using removePoint method of modify interaction, as well as using deleteCondition event of modify interaction. However, that is not what I am trying to achieve. The use case for this this problem is as below. I have modify interaction added on map. Now when user tries to modify a feature over map, I am highlighting the vertices, like this so that user can directly go to these vertices and then do right click which will result in removal of vertex. For this, I had to implement the contextmenu to handle the right click over map. But, now the challenge is to remove the received coordinate from the modifying geometry. I tried to implement it as follows, with simple .splice() method on coordinate array of target geometry if(this.modifyInteraction.features_.getLength() && this.modifyInteraction.features_.getArray()[0]){ //Feature being modified let modifyft = this.modifyInteraction.features_.getArray()[0]; let coord = modifyft.getGeometry().getCoordinates()[0]; let foundIndex; for(var k = 0; k < coord.length; k++){ if(coord[k][0] == rightClickedVertex.getGeometry().getCoordinates()[0] && coord[k][1] == rightClickedVertex.getGeometry().getCoordinates()[1]){ foundIndex = k; break; } } if(foundIndex && foundIndex > -1){ modifyft.getGeometry().getCoordinates()[0].splice(foundIndex, 1); //nothing changes } } is there any other way to remove the vertex of geometry being edited?

Aprenderemos a crear un mapa interactivo con OpenLayers y visualizar datos de manera efectiva utilizando gráficos de Plotly.

I have upgrade Openlayers in IONIC V3 app from 4.6.5 to 6.1.0. Now map.getView().fit(extent, {duration:1000}) stop working, when I remove the options object it works fine. Am I doing something wrong or anything else is needed? var extent; extent = s_layer.getSource().getFeatures()[0].getGeometry().getExtent(); map.getView().fit(extent); //this works fine. map.getView().fit(extent, {duration: 1000}); //Doesn't fit the extent,just a slight movement on map. I want to achieve a slight animation on map, when fit the extent of feature. Also tried animate() method of view class but not able to get the desired results.

I wonder if I can get the position of the last point for a geometry in OpenLayers? For example, I have an OpenLayers.Geometry.LineString, how to get its last point? Clarification in the comments: In fact, what I want is the last drawed point for the polygon. Is it impossible?

Descubre cómo potenciar tus mapas interactivos con OpenLayers y Turf.js. Integra estas herramientas para realizar análisis geoespacial

Map canvas is wider than the containing map div. Causes problems when zoom to extent etc. Using Angular Material Flex-Layout / OpenLayers 6. // css .mapContainer { height: 100%; padding: 16px; } .map { width: 100%; height: 600px; } //HTML //Result Map div width = 793. 2 canvas width = 1841. 1 Edit: The ol.css is imported in the scss (@import '../../../../node_modules/ol/ol.css';).

How can I have the style of the features on a vector layer depending on the OpenLayers' "base layer"? For example, some base layers are dark images and I need (for the contrast) the features to be displayed bright in the vector layer upon the base layer. And as soon as base layer changes to a bright one, features should be redrawn dark. How can I achieve this with OpenLayers code?

My code: var geometryFunction, maxPoints; const value = 'Circle'; geometryFunction = createBox(); const source = new VectorSource({wrapX: false}); const vector = new VectorLayer({ source: source, }); this.drawing = new Draw({ source: source, type: value, geometryFunction: geometryFunction }); // this.windowZoom = true; this.map.addInteraction(this.drawing); By I can draw the box, but I am trying zoom to that box.

In this application layers are constructed dynamically from values stored in a JSON object. There is a layer control function that is called from buttons which toggle the visibility of the groups and the individual layers within the groups. The problem - When an individual layer inside a group is toggled, the change isn't applied to the map until the user clicks on the map view-port. So when the user switches a layer on/off nothing happens. It's fine if layer constructors are hard coded. It's only when building the layers from JSON that this happens. Also, if map.updateSize(); is called just after the visibility is set then the map visibility changes as required but this isn't how setvisible is meant to be used. Is there a way to fix this issue with setvisible other than calling map.updateSize() to force it to apply the change? I have created a fiddle demonstrating the issue here: https://jsfiddle.net/Rob_H/wvdmex8m/5 HTML * * Javascript var response = { lyrs: [{ subLayer: "osm_baselayer", name: "Open Street Map", visible: 1 }], lyrGroups: [{ groupName: "basemaps", visible: 1 }] }; var mapLayers = []; function makelayerGroup() { var lyrGroups = response.lyrGroups; for (i in lyrGroups) { var layerGroup = lyrGroups[i].groupName; var vis = lyrGroups[i].visible; this[layerGroup] = new ol.layer.Group({ visible: vis, name: layerGroup, layers: [] }); mapLayers.push(this[layerGroup]); }; return makelayers(); }; function makelayers() { var lyrs = response.lyrs; for (row in lyrs) { var group_name = lyrs[row].groupName var sub_layer = lyrs[row].subLayer; var vis = lyrs[row].visible; //layer constructor this[sub_layer] = new ol.layer.Tile({ visible: vis, name: lyrs[row].name, source: new ol.source.OSM() }); var a = mapLayers[i].getLayers().getArray(); a.push(this[sub_layer]); } return mapLayers; }; //intialise the map var map = new ol.Map({ target: 'map', layers: makelayerGroup(), view: new ol.View({ center: ol.proj.transform([-0.7, 52.1], 'EPSG:4326', 'EPSG:3857'), zoom: 11 }) }); //function to toggle layers function toggleLayer(layerName) { if (layerName.getVisible() == 1) { layerName.setVisible(0); console.log(layerName.get('name')); } else { layerName.setVisible(1); console.log(layerName.get('name')); } };

I am using geoExt and OpenLayers to plot some map. Everything worked well until I had to add some styling. To display it on the webpage, I need to use the CSS of my university and once I do that, I have some horizontal white lines between each tile (but not vertically though). The lines have always the same height. The problem seems to come only from the CSS, since if I remove it in the html (it is the first thing invoked in ), everything looks correct. Searching here and on the web, I found than some people proposed to create a CSS after everything else which sets: .openlayers-map img {max-width: none;} But it didn't solve anything. Is there a way to tell to a div that it needs to load no styles but the one used by OpenLayers? Here is a sample of the code I have: var osm = new OpenLayers.Layer.OSM( "Open Street Map" ); bwms = new OpenLayers.Layer.WMS( "usa:states - Tiled", "http://128.178.82.176:8080/geoserver/usa/wms", { layers: "usa:states", tiled: true, transparent: true },{ singleTile: true, projection: new OpenLayers.Projection("EPSG:4326") // specified because it is different than OSM's } ); mapPanel = new GeoExt.MapPanel({ renderTo: "mapPanel", map: new OpenLayers.Map({ projection: epsg900913, displayProjection: epsg4326, units: "m", center: new OpenLayers.LonLat(6.59,46.39).transform(epsg4326,epsg900913) }), layers: [osm,bwms], // height/width in pixels height: 450, zoom: 10, border: false });

OpenLayers plugin y QuickMapServices son dos plugins para descargar mapas de Google Maps, OSM, Bing, Apple maps, entre otros en QGIS.

I have a layer group in OpenLayers that initializes empty. This group is added in a layer switcher var group_search = new ol.layer.Group({ title: 'Search', fold: 'open', layers: [] }); map.addLayer(group_search) var toc = document.getElementById('layers'); ol.control.LayerSwitcher.renderPanel(map, toc, { reverse: false }); According to a search results - layers are added into this empty group. group_search.getLayers().push(my_layer) The group does not update automatically, you need to uncheck and check again to show the layers in the group. At a certain point, when I perform a new search, I need to delete the layers from the group, update the layer switcher, and this is not happening automatically. How should I do? I already tried these codes below, but they didn't work. group_search.getLayers().getArray().forEach(function (layer) { group_search.getLayers().remove(layer); }) group_search.getLayers().clear();