Develop Reference

"SecurityError: This operation is insecure" when calling domtoimage.toPng() in OpenLayers example

I am currently working on adding functionality to convert an OpenLayers Map into a png file (The example is here). However, when calling domtoimage.toPng() in the below code, Firefox (Ubuntu version 68.0.2) gives me the error SecurityError: This operation is insecure. I have checked all around and no one else seems to be having this problem with the dom-to-image library, and so I am stuck on how to fix this error. My JavaScript code for the Map is very similar to the code given in the example and is given here:
<script type="text/javascript">
var extent = [0, 0, 3000, 4213];
var projection = new ol.proj.Projection({
code: 'my-image',
units: 'pixels',
extent: extent,
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.FullScreen()
]),
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
attributions: 'My Image Attributions',
url: "{{record | img_url}}", // Django stuff defined earlier
projection: projection,
imageExtent: extent
})
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2,
maxZoom: 8
})
});
map.addOverlay(new ol.Overlay({
position: [0, 0],
element: document.getElementById('null')
}));
// export options for dom-to-image.
var exportOptions = {
filter: function(element) {
return element.className ? element.className.indexOf('ol-control') === -1 : true;
}
};
document.getElementById('export-png').addEventListener('click', function() {
map.once('rendercomplete', function() {
domtoimage.toPng(map.getTargetElement(), exportOptions)
.then(function(dataURL) {
var link = document.getElementById('image-download');
link.href = dataURL;
link.click();
});
});
map.renderSync();
});
The HTML is effectively the same as in the example and so I believe the problem lies somewhere in here. Perhaps it is something with using a StaticImage in the Map? Or maybe going through the Django framework tampers with it in some unknown way? I am not entirely sure, and any diagnosis/help with fixing this issue would be much appreciated.

I think there should be something like:
new ol.layer.Tile({
name: 'name',
source: new ol.source.TileWMS({
...
crossOrigin: 'anonymous' // <-- Add this to the json.
})
})
Read more:
https://openlayers.org/en/v4.6.5/apidoc/ol.source.ImageWMS.html
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

How do I trigger an on demand refresh/redraw of ol.Map

I have a function called "LoadMap"
rcisWebMapLoad.prototype.LoadMap = function (param1, param2) {
//Get some vector objects and create layers
var fieldVectorObjs = rcisWebMapVectorObjs.GetFieldVectorObjects(param1, param2);
var objectVectorLines = rcisWebMapVectorObjs.GetLinesVectorObjects(param1, param2, 1);
//Create Map object and add layers then insert into map div
control.map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: layers,
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 8
})
});
//******* MapServer imagery ***************
var aerial = new ol.layer.Tile({
name: 'Imagery',
source: new ol.source.TileWMS({
url: mapServerPath.ResponseString,
params: { 'LAYERS': 'aerial', 'FORMAT': 'image/png', 'TILED': true },
serverType: 'mapserver'
})
});
control.map.addLayer(aerial);
}
This loads the map great!!
I have my imagery and vector objects on the map...however the problem comes when I want to switch to a different map ie.(Different imagery and vector objects)...
UPDATE:
originally I thought the map was not getting updated but in reality another map get's generated and added right under the original map...How do I reuse or replace the map object that is already there to display another map?
Because I'm using AngularJS and passing the maps parameters through a service I can not just call the page again and get the parameters from the query string as someone suggested to me before.
This seems like something that would be a main function for an online map.
Any help is greatly appreciated

Okay, so I was not able to force an on-demand refresh of the map object for OpenLayers 3.
So what I ended up doing was to destroy the map object and create a new one each time.
so for the example above it would look like this...
For angularJS users you also need to make sure that you create an empty map in your .factory load function (so there is something to destroy initially)...if you're not using angular you would just need to create the map on page load.
function rcisWebMapLoad() {
this.map = new ol.Map({});
}
rcisWebMapLoad.prototype.LoadMap = function (param1, param2) {
//Get some vector objects and create layers
var fieldVectorObjs = rcisWebMapVectorObjs.GetFieldVectorObjects(param1, param2);
var objectVectorLines = rcisWebMapVectorObjs.GetLinesVectorObjects(param1, param2, 1);
var layers = [];
Destroy map object before creating a new one
control.map.setTarget(null);
control.map = null;
//Create Map object and add layers then insert into map div
control.map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: layers,
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 8
})
});
//******* MapServer imagery ***************
var aerial = new ol.layer.Tile({
name: 'Imagery',
source: new ol.source.TileWMS({
url: mapServerPath.ResponseString,
params: { 'LAYERS': 'aerial', 'FORMAT': 'image/png', 'TILED': true },
serverType: 'mapserver'
})
});
control.map.addLayer(aerial);
}

Using encoded polylines in OpenLayers 3

I am having trouble when trying to use encoded polylines in OpenLayers 3. I have an external source providing the encoded strings, but when I try to convert them into a feature and add them to a vector source, I get the following error:
Uncaught TypeError: Cannot read property 'ua' of undefined
Here is the current code I am using:
vectorSource = new ol.source.Vector();
var layers = [
new ol.layer.Tile({
name: "SKL Tile Server",
source: new ol.source.OSM({
url: "https://placeholder/osm/{z}/{x}/{y}.png",
crossOrigin: null
})
}),
new ol.layer.Vector({
name: "polylines",
source: vectorSource
})
];
map = new ol.Map({
layers: layers,
target: 'report_map',
view: new ol.View({
center: ol.proj.transform(
[-118.014670, 45.35724], 'EPSG:4326', 'EPSG:900913'),
zoom: 10
})
})
var addPolylineToMap = function (encoded_line, line_style) {
var line = new ol.format.Polyline().readGeometry({
source: encoded_line,
options: {
dataProjection: ol.proj.get('EPSG:4326'),
featureProjection: ol.proj.get('EPSG:900913')
}
});
line.setStyle(line_style);
vectorSource.addFeature(new ol.Feature(line));
return line;
};
Admittedly, I am quite new to OpenLayers 3--but I have searched extensively and can't seem to find any examples of using encoded polylines in OpenLayers 3.

Try this way:
var addPolylineToMap = function (encoded_line, line_style) {
var format = new ol.format.Polyline({
//factor: 1e6
});
var line = format.readGeometry(encoded_line, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:900913'
});
var feature = new ol.Feature({geometry: line});
feature.setStyle(line_style);
vectorSource.addFeature(feature);
return line;
};

Change code to google maps from openlayers

I am removing open layers and trying to use google maps instead. My javascript creates a layer as under
var options = {
"projection": new OpenLayers.Projection(DispProjection),
"strategies": [ new OpenLayers.Strategy.BBOX( {
"ratio": 2,
"resFactor": 3
} )
],
"protocol": new OpenLayers.Protocol.HTTP( {
"url": "kml.asmx",
"params": {},
"format": new OpenLayers.Format.KML( {
"extractStyles": true,
"extractAttributes": true,
"maxDepth": 2
} )
} )};
var itslayer = new OpenLayers.Layer.Vector(
l.name,
options );
The call to "kml.asmx" is in my .NET code which is a HttpHandler. To transform this code, how do I use the 'protocol' in google maps? I have tried to do this which clearly does not work
var itslayer = new google.maps.KmlLayer("kml.asmx");
Please help.

OpenLayers getFeatureInfo popup generates this.size is null

I am trying to create OpenLayers with popup feature info. I got the code from OpenLayers examples and only modified url to my local geoserver. The map is displaying, when i click on a feature the request is sent but the response is empty and firebug shows error "this.size is null". When i run the request url separately feature info is generated.
Here is the code:
var map, info;
function load() {
map = new OpenLayers.Map({
div: "map",
maxExtent: new OpenLayers.Bounds(20.163,53.228,20.208,53.257)
//maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573)
//maxExtent: new OpenLayers.Bounds(19,90,19,90)
});
var punkty_zdjecia = new OpenLayers.Layer.WMS("Punkty Zdjecia",
"http://localhost:6060/geoserver/wms",
{'layers': 'cite:ulice2', transparent: false, format: 'image/gif'},
{isBaseLayer: true}
);
map.addLayers([punkty_zdjecia]);
info = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:6060/geoserver/wms',
title: 'Test url',
queryVisible: true,
eventListeners: {
getfeatureinfo: function(event) {
map.addPopup(new OpenLayers.Popup.FramedCloud(
"chicken",
map.getLonLatFromPixel(event.xy),
new OpenLayers.Size(200,200),
event.text,
null,
true
));
}
}
});
map.addControl(info);
info.activate();
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
I am using OpenLayers 2.11 and Firefox browser