I had div - let call him 'global'- that inside him I had title and two maps of openlayer.
I can get a snapshot of the global by html2canvs in this way:
html2canvas(globalElement).then((canvas) => {
this.screenShot(canvas.toDataURL());
});
But the openlayers in the snapshot appeared as tow black div's like this:
I can get the open layer view separately by this code:
this.map.once('rendercomplete', function(event) {
const canvas = event.context.canvas;
console.log(canvas.toDataURL()); // the open layer screen shot
});
this.map.renderSync();
How can I get all this together as one screenshot?
----- edit ----
With the help of #Mike I am using domtoImage like this example:
this.map.once('rendercomplete', function(event) {
domtoimage.toPng(globalElement)
.then((dataURL) => {
console.log(dataURL);
});
});
this.map.renderSync();
and I can get the image of all the div with the open layer map.
A new question came up by this, the mat-icons of angular material didn't display properly with domtoimage, it shows the name of the icon and not the icon.
How can I fix this?
Related
I have a tooltip with a short text only description and a popup with a longer formatted description bound to a marker on a leaflet map.
The tooltip shows on hover and the popup shows when you click on the place marker. When the larger popup is visible there is no need to show the tooltip. Can I disable the tooltip when the popup is visible and how do I do this?
Here is the code I have so far:
var marker = L.marker(location);
marker.bindPopup("Long description with extra formatting ...");
marker.bindTooltip("Short description");
You can add custom handlers for the tooltip and popup. With the leaflet method isPopupOpen() which return true or false you can descide if you open the tooltip or not.
function customTip() {
this.unbindTooltip();
if(!this.isPopupOpen()) this.bindTooltip('Short description').openTooltip();
}
function customPop() {
this.unbindTooltip();
}
var marker = L.marker(location);
marker.bindPopup('Long description with extra formatting ...');
marker.on('mouseover', customTip);
marker.on('click', customPop);
I used the popupopen and popupclose events to manipulate the tooltip visibility.
This is a good generic solution that doesn't involve extending the standard classes and still respects all the standard configuration and options around popups and tooltips.
map.on('popupclose', function (e) {
// make the tooltip for this feature visible again
// but check first, not all features will have tooltips!
var tooltip = e.popup._source.getTooltip();
if (tooltip) tooltip.setOpacity(0.9);
});
map.on('popupopen', function (e) {
var tooltip = e.popup._source.getTooltip();
// not all features will have tooltips!
if (tooltip)
{
// close the open tooltip, if you have configured animations on the tooltip this looks snazzy
e.target.closeTooltip();
// use opacity to make the tooltip for this feature invisible while the popup is active.
e.popup._source.getTooltip().setOpacity(0);
}
});
NOTE: Took a bit of effort to track down the actual events this solution to a different issue pointed me in the right direction: https://stackoverflow.com/a/16707921/1690217
In my case I have bound the tooltip and the popup to have the same content, so I want to hide the tooltip to suppress the redundant information. In the following greenshot you can see the popup for one shape and the tooltip on hover over the other shapes, it looks messy when that tooltip tries to show under the existing popup when you hover over the feature that triggered the popup.
I use another solution in my project. I set the tooltip opacity acording to this.isPopupOpen(). For me this works good, because I don't want to always set the tooltip content again. To hide the tooltip instantly on the click event, set the opacity to 0 on click.
function showHideTooltip()
{
var mytooltip = this.getTooltip();
if(this.isPopupOpen())
{
// Popup is open, set opacity to 0 (invisible)
mytooltip.setOpacity(0.0);
}
else
{
// Popup is cosed, set opacity back to visible
mytooltip.setOpacity(0.9);
}
}
function clickHideTooltip()
{
var mytooltip = this.getTooltip();
mytooltip.setOpacity(0.0);
}
var marker = L.marker(location);
marker.bindPopup("Long description with extra formatting ...");
marker.bindTooltip("Short description");
marker.on('mouseover', showHideTooltip);
marker.on('click', clickHideTooltip);
You can use my solution to this problem:
marker.on('click', function () {
this.getTooltip().setOpacity(this.isPopupOpen() ? 0 : .9);
});
marker.getPopup().on('remove', function () {
this._source.getTooltip().setOpacity(0.9);
});
I am creating an amMap through amCharts http://docs.amcharts.com/3/javascriptmaps/AmMap and it comes with its own home button which you can click and reverts to the map default.
I would like to do this externally through my own button, but can't quite find the methods that amCharts uses to achieve this.
A few methods I've used are:
chart.zoomTo(), chart.zoomToLongLat(), chart.zoomToXY() using the correct values of when the chart is initialized. This works fine when the chart is not resized ever, but when the chart is resized (not re-initialized), those values become undependable, yet the home button is still able to bring me back to the default zoom.
What method does this home button use? Or I can use to replicate what the home button does?
You need to call zoomToLongLat and pass in your map object's initialZoomLevel, initialZoomLongitude and initialZoomLatitude. From the demo on AmChart's knowledge base for its custom external home button:
function centerMap() {
map.zoomToLongLat(map.initialZoomLevel, map.initialZoomLongitude, map.initialZoomLatitude);
}
You can resize the frame on the codepen demo to see that it resets itself correctly each time.
Yes.. it very simple,
I did it this way:
map.addListener("rendered", function(event) {
var map = event.chart;
map.initialZoomLevel = map.zoomLevel();
map.initialZoomLatitude = map.zoomLatitude();
map.initialZoomLongitude = map.zoomLongitude();
});
function centerMap() {
map.zoomToLongLat(map.initialZoomLevel, map.initialZoomLongitude, map.initialZoomLatitude);
}
<div onclick="centerMap();" class="icon-home"></div>
I am using jQuery ImageAreaSelect for image area selection like this:
$('#image').imgAreaSelect({}); //#image is a img id
Below this image, I have a bunch of image thumbnails, clicking on which will populate that image as #image. This way user can load each image and then select its area.
My problem is that when a new image is loaded, the dotted line which indicates the area selected for previous image still remains and gets shown on the newly loaded image. I do not want this and want this to go away every time a new image is loaded.
I read and tried this answer and this answer but they are not working for me...
My current (non-working) code is:
$('#load').click(function() {
$('#image').imgAreaSelect({hide:true,remove:true}); //try to remove old instance
$('#image').imgAreaSelect({}); //create new instance...
});
Any help is appreciated.
I have never used such pluggin but the documentation explains how to disable/re-enable it.
Save the variable when you initialize the pluggin
var ias = $('#image').imgAreaSelect( // your original initalization
Then call disable on it as the documentation states:
ias.setOptions({hide:true,remove:true})
Try this way
$('#load').click(function() {
$('#image').cancelSelection();
});
I have a panel within which I have two more panels. When you click on panel1 then information in panel2 is loaded. Since the information is quite huge there is some delay when its being loaded. During this interim period I wish to add a loading mask which intimates the user that its getting loaded.
For the same I have done this:
var myMask = new Ext.LoadMask(Ext.getCmp('eventsPanel'), {
msg:"Please wait..."
});
myMask.show();
// eventsPanel is the main panel under which panel1 and panel2 lie.
// This code is in the selectionchange listener of panel1 whose code
// is inside the main eventsPanel code.
However, nothing is being displayed on the screen. Its still the same, i.e., for some amount of time the screen freezes and then after a delay of like 2-3 seconds the information is loaded. Can you please advise as to where am I going wrong?
I would suggest you to first show your masking like the way you are doing:
var myMask = new Ext.LoadMask(Ext.getCmp('eventsPanel'), {
msg:"Please wait..."
});
myMask.show();
Then make a delayed task
var task = new Ext.util.DelayedTask(function(){
//your loading panel2 with heavy data goes here
myMask.hide();
});
//start the task after 500 miliseconds
task.delay(500);
This should solve your problem.
I make a custom mask as follows:
var componentToMasK = Ext.ComponentQuery.query('#myChildComponent')[0];
var customMask = Ext.get(componentToMasK.getEl()).mask('My mask text...');
var task = new Ext.util.DelayedTask(function() {
customMask.fadeOut({
duration : 500,
remove:true
});
});
task.delay(1000);
Normally when a event is triggered in a first component, caused, for example, the loading of a grid in the second component, the mask appears in both components in order to avoid user errors by clicking on the first component as the second component is loading the grid or is loading the mask.
In this case:
var componentToMasK = Ext.ComponentQuery.query('#myParentComponent')[0]; //HBox, BBox layout, tab, etc. with the two child components
Hope this helps!
Edit: 10-06-2015
The 'duration:500' and the 'delay(1000)' is only to illustrate. You can adjust these values to the needs of each component that you apply a mask.
If you remove the mask abruptly the user can not even see
loading the message, that's why I use fadeOut.
Thus, you can apply a mask on virtually any component such as, for example, a fieldset, when you add it fields dynamically.
task -> http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.util.DelayedTask
Ex.get -> http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext-method-get
fadeOut - > http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.dom.Element-method-fadeOut
You can also do the following:
var task = new Ext.util.DelayedTask(function() {
Ext.getBody().unmask();
});
task.delay(1000);
You can read more about this technique in the book: Mastering Ext JS - Second Edition (Loiane Groner)
Edit: 10-06-2015
One more detail:
If we apply one mask on a Hbox layout, containing as one of the childs a grid, we have two mask: HBOX mask and grid mask.
In these cases, I turn off dynamically the grid mask:
var grid = Ext.ComponentQuery.query('#griditemId')[0];
if(grid){
grid.getView().setLoading(false);
}
Hope this helps.
I've created a sliding image viewer here. As you can see, there's 4 small clickable images to change/slide the image. I want the small image to change to this image alt text http://beta.d-load.org/images/etc/imagev-on.png when it's clicked, or when the appropriate main image is showing. That way the users can tell which main image is being shown. Can anyone maybe look at the source and explain how to do this? Thanks!
try the following code !!
var src = [];
src['normal'] = "http://beta.d-load.org/images/etc/imagev-norm.png";
src['active'] = "http://beta.d-load.org/images/etc/imagev-over.png";
$(document).ready(function() {
$('a',$('.paging')).click(function() {
$('a',$('.paging')).find('img').attr('src',src['normal']);
$(this).find('img').attr('src',src['active']) ;
});
});
Here you go, Demo : http://jsfiddle.net/qTB9g/