New answers tagged openlayers
2
Cleanest solution seems to be to test the state of vector source with getState() method. When source data is loaded, it returns ready value.
If vector layer is GeoJSON, implementation could look something like this:
var vectorSource = new ol.source.Vector({
url: 'myGeojSON_file.geojson',
format: new ol.format.GeoJSON()
});
var vectorLayer = new ol....
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()}
2
You have to set ol.style.Text option overflow to true to allow text to exceed the width of the polygon:
text: new ol.style.Text({
text: getParcel2,
font: '4em Calibri,sans-serif',
fill: new ol.style.Fill({
color: 'white'
}),
stroke: new ol.style.Stroke({
color: 'green',
width: 5
}),
overflow: true
})
0
Tainted canvas happens, when you load some CORS insecure third-party (cross-domain) image into your map (canvas). It is not related to scripts or timeouts. It is a security behavior from your browser, which disable downloading of the tainted image (possible security threat). Check all your map sources, to avoid having tainted canvas the source must be CORS ...
2
The extent should be computed from the layer source, not from the layer itself.
var layerExtent = layer.getSource().getExtent();
2
If you use document.getElementById method to get HTML element, then you must use it's innerHTML property to change it's content.
This should work without need for jQuery:
map.on('pointermove', function(event) {
var coord3857 = event.coordinate;
var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');
document.getElementById('...
0
I fixed this issue with "singleTile" as true in the layer options. For dynamic ArcServer layers, OL was requesting multiple (dynamic) tiles so it was making multiple labels.
layer = new OpenLayers.Layer.ArcGIS93Rest( "ArcGIS Server Layer","http://localhost/arcgis/rest/services/AmountofTaxesDue/MapServer/export",
{layers: "show:0,2"},
...
0
Popup overlay definition is missing in the question and so is version of OpenLayers you are using, so it's hard to say why it doesn't work for you.
Example below (base code taken from OpenLayers example https://openlayers.org/en/latest/examples/popup.html) works as expected in OpenLayers 5.3.0, without using mouseover event. Mouse click on popup overlay ...
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,
...
1
Previous answer is right.
I want only note that in Openlayers 5 this is changed.
As noted at https://openlayers.org/en/latest/apidoc/module-ol_proj_Projection-Projection.html, in similar cases you must use
proj4.defs('EPSG:2154', '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +...
2
The location may need adjusting by about 10km as tiles are not loading where you centered the view. The main problem was that EPSG:25831 needed to be defined using proj4. You will need to include the library <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
proj4.defs("EPSG:25831","+proj=utm +zone=31 +ellps=...
0
ArcGIS Tile Services are wierd and don't allways act the same way as other WMTS.
your code missed the new projection = ol.proj.Projection declaration and also misplaced.
Besides that you also had the map startiong location out of the layer bounds.
I set it to the service's minimal coordinates, you can modify it further from there.
A fixed code would ...
0
You will need some way of linking the district code to the geoJSON url, such as a new function getJSON. Then you can create a layer and add it to an existing map. The extent of a vector layer is the extent of all the features in the source which you won't know until it is loaded, so wait for an addfeature event then fit. In OpenLayers 5 size is an option ...
2
is not possible get "outputFormat=application/json"
It is not possible in the service you list. The service GetCapabilities response tells you what output formats are available:
http://www.ign.es/wfs-inspire/unidades-administrativas?service=WFS&request=GetCapabilities
<ows:Parameter name="outputFormat">
<ows:AllowedValues>
&...
0
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>...
2
@Dataform's answer is correct but creating a new style object every time the function is called is inefficient and can, with large numbers of features, cause performance issues. It is better to predefine a style and set the text property as required
let style = new ol.style.Style({
// ...........
text: new ol.style.Text({
text: ''
})
/...
2
You can pass a function to the style option of the vector layer. The function is called for each feature and must return a style object.
let styleFunction = function (feature, resolution) {
return new ol.style.Style({
// ...........
text: new ol.style.Text({
text: feature.get("fieldname_for_plotnumber")
})
// ...........
});
}
let ...
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.
2
Since your styles are on the layer specifying the selected style when you create the Select interaction should be sufficient
var select = new ol.interaction.Select({
style: style_selected,
... // any other options
});
(and remove the line which sets the style on features)
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);
0
I had the same problem and realized the solution as follows:
If your geoserver address and application address different then you get this error.
For Example;
C# Project Publish Address: http://localhost:51245/ApplicationName
Geoserver Address in Your Application: http://192.168.1.10:8889/geoserver/web
You will receive this error because the port ...
0
The only difference between what my map's url and the url from the GeoServer's openlayers preview is that the SRS parameter is different.
A WMS GetMap request needs a bounding box specified in the SRS of the request, if all you change is the SRS code in the request to get a map, then you almost certainly have an issue with the bounding box (bbox).
1
Adding a precompose before the rendercomplete to set a white background would avoid any transparent canvas which might be causing the problem.
map.on('precompose', function(event) {
event.context.fillStyle = 'white';
event.context.fillRect(0, 0, event.context.canvas.width, event.context.canvas.height);
});
1
You have to define vector layer before you can use it in select definition.
Your select definition contains only first statement of vector layer definition, and it's also in the wrong place. First define layer outside select definition, then use it in select definition:
var vectorLayer = new ol.layer.Vector(
// vector layer defintion options
);
var ...
1
It's mentioned in the update notes https://github.com/openlayers/openlayers/blob/master/changelog/upgrade-notes.md
A simple fix which the ol-ext library uses is to replace it with the something based on the old function
var ol_ext_inherits = function(child,parent) {
child.prototype = Object.create(parent.prototype);
child.prototype.constructor = child;
...
1
I have solved my problem by adding application/json format to Allowed MIME types for a GetFeatureInfo request in geoserver.
go to WMS and just add application/json format to Allowed MIME types for a GetFeatureInfo request in geoserver
0
I solved the issue by upgrading GeoServer to version 2.15.1 as the previous version (2.4.0) was returning by default a GeoJSON with a crs properties that OpenLayers 5 couldn't read :
OpenLayers 2.4.0 crs property
"crs": {
"type": "EPSG",
"properties": {
"code": "4326"
}
}
OpenLayers 2.15.1 crs property
"crs": {
"type": "name",
"properties": ...
2
You could draw an image on the canvas. For demo purposes try this which adds a semi-transparent fill while the layer is loading. If you have a suitable image use evt.context.drawImage instead.
var loading = false;
cadLayer = new ol.layer.Vector({
visible: true,
source: new ol.source.Vector({
loader: function(extent) {
...
1
You could simply use your coordinate array to create a linestring
import LineString from 'ol/geom/LineString.js';
var route = new LineString(currPath).transform('EPSG:4326', 'EPSG:3857');
But if you need to create a polyline string from a coordinate array
var polyline = new Polyline({
factor: 1e6
}).writeGeometry(new LineString(currPath));
Top 50 recent answers are included
