We are running Open Layers 3.15.
Sometimes we get a dropped or failed tile.
Currently it displays nothing, (which can be confusing for our users) so we'd like to replace this with a tile that says 'no data' or something.
I've tried picking up the event and replacing the source of the tile eg
source.on('tileloaderror', function(){
source.setUrl('./images/map/failureTile.png');
});
but the problem with this is, instead of doing this on 1 tile, it does it for the entire layer, we don't want that.
Anyone know how we can do this for just the tile that failed and not the entire layer?
It's 2018, but for someone who may need this. Tested on v5.3.0
source.on('tileloaderror', function (event) {
var tileLoadFunction = function (imageTile, src) {
imageTile.getImage().src = './images/map/failureTile.png';
};
if (event.tile.tileLoadFunction_ != tileLoadFunction) {
event.tile.tileLoadFunction_ = tileLoadFunction;
event.tile.load();
}
});
This code relys on private function event.tile.tileLoadFunction_ is exposed.
Unfortunately xnakos' answer doesn't work on v5.3.0 because the event.tile.getImage() has been replaced with 1x1 canvas image by internal error handler.
Also noted, changing event.tile.src_ directly, seems to be an option, but it doesn't work either because of cache key or something.
A tile which failed to load should have a distinct class (.olImageLoadError). You can define a CSS rule not show these items.
.olImageLoadError {
display: none !important;
}
You could try this:
source.on('tileloaderror', function(event) {
event.tile.getImage().src = './images/map/failureTile.png';
});
You need the event parameter, that can get you the tile that failed, so that you can change the tile's image.
Warning: I tested the code above using tileloadend instead of tileloaderror, because my tiles never fail on me. :) I used a simulated failure rate using Math.random() and some random tiles were replaced by the image specified. I cannot think of a reason the code above would not work. If you verify it works, I will remove this warning from my answer. I tested it on OpenLayers 3.14.2 and on an OSM source.
Related
I want to use pdftron and all things work perfect but when i copy text from pdf some characters convert to blank square and question mark, any idea?
here is my pdf.
As you can see below:
I wrote this code:
WebViewer({
path: '/assets/plugins/pdftron',
initialDoc: '/practical.pdf',
fullAPI: true,
disableLogs: true
}, document.getElementById('pdf')).then((instance) => {
// PDFNet is only available with full API enabled
const { PDFNet, docViewer } = instance;
let Feature = instance.Feature;
instance.disableFeatures([Feature.NotesPanel]);
docViewer.on('documentLoaded', () => {
// call methods relating to the loaded document
});
instance.textPopup.add({
type: 'actionButton',
img: '/language.svg',
onClick: () => {
const quads = docViewer.getSelectedTextQuads(docViewer.getCurrentPage());
const text = docViewer.getSelectedText();
$("#out-pdf").html(text);
console.log(quads);
},
});
});
Document does seem to cause incorrect extraction. Extraction is not defined by PDF specification so every viewer handles cases little differently. I your case there is a probably a malformed or incomplete font or unicode map included in the document. We've added multiple fixes to our core components and with those fixes extraction happens correctly. Unfortunately current release of WebViewer does not include these fixes yet. We cannot give exact time schedule when fixes will be land to the WebViewer, but should be at least part of our next major release. For now I would try to see if you can recreate the document and see if that helps. Most of the documents we see and test have no problem with extraction.
Could you create ticket through our support https://www.pdftron.com/form/request/ and attach the document that this happens to the ticket, so I can take a closer look on and get issue resolved faster.
Because I register a listener about the CELL_ADD to justify when I add two different types of edges, I deal with them in different ways.
But the problem is I failed to add the edge after I change my method to "add edge" action"
HERE IS MY FIRST successful version :
graph.insertEdge(parent, null, '', defiVertex, outVertex);
HERE IS MY WANTED NEW VERSION but failed:
edge.edge = true;
edge.type = AUTO_INSERT_EDGE;
graph.addEdge(edge);
THANK FOR HELP!!
Not sure what you are trying to do, but why don't you override the addListener function? In there, you can retrieve the changes, and if the name is mxTerminalChange you know you are adding/modifying an edge:
model.addListener(mx.mxEvent.CHANGE, function(sender, evt) {
var changes = evt.getProperty('edit').changes;
if (changes[i].constructor.name == "mxTerminalChange") {
// Manage the add of a new connection
...
}
});
I change another way to finish my problem which is use the vue data attribute to help me record the state of the two add edge situations: when the edge is add by code, this.isAutoAdd = true, when user create the edge, this.isAutoAdd=false,so when in the listener, I just need to determine whether "isAutoAdd" is false to call the change function.
I'm attempting to use Microsoft's PowerBi-Javascript library to embed a report in a webpage. I want to apply a slicer on load, that depends on the actual page I'm on (so can't be done by defaults on the report).
The library wiki gives a way to do this by setting slicers in the config passed to the embed function. The slicer object looks something like this (from the documentation https://github.com/Microsoft/PowerBI-JavaScript/wiki/Slicers):
interface ISlicer {
// Selects a slicer to change.
selector: SlicerSelector;
// A new state of the slicer
state: ISlicerState;
}
interface ISlicerSelector {
$schema: string;
visualName: string;
}
I'm happy with setting up the state using the filtering examples given, but I'm having problems finding the visualName for the selector - I can't see it in the interface (on viewing or editing), and I've tried using the names/headers etc I can see, none of which work.
How do I find out and/or set what this visualName is?
I've not found a way in the UI to see this. Hopefully there is a better way than the below, but this does work.
However, it is possible to find out using the api, or using this library if you're able to mess around running some code locally.
In my case, I found out by (while developing locally) finding the page and then the visuals that were displaying once the report had rendered, logging the data to the console, and identifying which visual was the one I wanted.
Something like:
report.on('rendered', () => {
report.getPages().then(pages => {
pages[0].getVisuals().then(visuals => console.log(visuals))
});
});
Where in this case I only cared about the first page.
This then logged some data to the console about each visual, including co-ordinate values and visualName, so I was able to identify the one I was interested in and see its visualName property.
Confusingly, the visualName property looks more like an id (although not a guid).
You can set the Visual Title (not the Slicer Title) on the slicer under General > Title > Text.
Screenshot
Then, you can find the slicer using the visual.title property.
For example,
report.on('rendered', () => {
report.getPages().then(pages => {
pages[0].getVisuals().then(visuals => console.log(
visuals.find(visual => visual.title === "MySlicer")
);
});
});
I use OL 4.6.5.
I put some markers in a vector layer and have used a home-made thing to find the zoom, depending on how far from eachother the markers are placed (points from database). This is clumsy and coarse but it works...
Now I look for a function or other means to set the zoom automatically, depending on max and min lat and long. I couldn't make "fitExtent()" to work so I looked here and I found two solutions but I can only use this one:
var onChangeKey = vectorSource.on('change', function() { if
(vectorSource.getState() == 'ready') {
vectorSource.unByKey(onChangeKey);
map.getView().fitExtent(vectorSource.getExtent(), map.getSize()); } });
It uses the "fitExtent()" in another way than I did but unfortunately it doesn't change the zoom from 2. The other solution is some wierd language??? JS console reports: "Uncaught SyntaxError: Unexpected identifier".
There is an example page here: https://xerxx.se/zoomtest.html
The JScode is at the bottom. Both solutions I tried are there, the one quoted above is "in action".
My own clumsy code is also there - you will see it.
There must be a clever command for this, right?
The syntax you adopted in your code is not necessary here as vectorSource.on('change', function() { is important only when you load asynchronously a source (Ajax calls).
Your code is synchronous e.g
var vectorSource = new ol.source.Vector({
features: [placeOSM[1], placeOSM[2]]
});
...
Replace the block
var onChangeKey = vectorSource.on('change', function() {
if (vectorSource.getState() == 'ready') {
vectorSource.unByKey(onChangeKey);
map.getView().fitExtent(vectorSource.getExtent(), map.getSize());
}
});
with
// fitExtent is now fit and second arg map.getSize() is now optional
// e.g http://openlayers.org/en/latest/apidoc/ol.View.html#fit
map.getView().fit(vectorSource.getExtent());
Based on this minimal example of Mapael (part of the relevant code is down here):
$('#refresh').on('click', function() {
// Update some plots and areas attributes ...
var updatedOptions = {'areas' : {}, 'plots' : {}};
// add some new plots ...
var newPlots = {
"Dijon" : {
latitude : 47.323056,
longitude : 5.041944
}
}
$(".mapcontainer").trigger('update', [updatedOptions, newPlots, [], {animDuration : 1000}]);
});
I created this example page with an update trigger that works fine. Now I want to move this to my real application php page, and it doesn't work! Please take a look here.
The annoying part is that the console of my Browser doesn't show any errors! How can I debug this problem when I don't see any errors? Please assist!
If you require any additional information, please ask. Thanks for any efforts.
PS: Please ignore the bad styling that the script and css code is in body. I'll fix this once this issue is resolved. I don't think it's the issue, since the example page that works is exactly the same and doesn't have this problem.
First, take a note that you're using different versions of Maphael:
on the page where it works, version is 1.1.0,
on your page it is 2.0.0-dev.
Second, after setting a breakpoint at the "onUpdateEvent" method of Maphael (line 876), it just seems that event data just doesn't get passed into the handler.
Does the "update" event have the same signature for Maphael/Raphael 1.x and 2.x? This is the place you should look at.
Update: I took a look at the 2.0.0-dev internals, and it seems your update code should be something like this:
var updatedOptions = {'areas': {}, 'plots' : {},
// add some new plots ...
newPlots: {
"Dijon" : {
latitude : 47.323056,
longitude : 5.041944
}
},
animDuration : 1000
};
$(".mapcontainer").trigger('update', updatedOptions);
(last line may be:
$(".mapcontainer").trigger('update', [updatedOptions]);
)
Please check if it helps (though I'd recomment you to switch to a stable 1.1.0 release of Maphael).