Develop Reference

Why Heatmap displays maps on wrong position?

I'm using reactjs to draw heatmap. It works fine. But now I found that it displays the map on the wrong positions.
library: heatmap.js
code snippet:
points =[
{x:1053,y:153,value:20}
]
heat(){
var heatmapInstance = h337.create({
container: document.querySelector('.App')
});
heatInstance = heatmapInstance;
var data = {
min:0,
max:5,
data: this.points
};
heatmapInstance.setData(data);
}
The problem here is,im giving position as 1053 and 153 but the heatmap circle displayed at (1140,290) checked coords using screenX,screenY parameters using onMouseMove function.What will be the reason ?
Thanks.

Use GIF as a source of ImageWMS on OpenLayers Map

OpenLayers version 2 seemed to display gifs without any problem.
OpenLayers: 4.6.4 (the version that I am using now) only displays the first frame of the gif: https://prnt.sc/i5xrun
Andreas Hocevar suggested a solution to this problem (https://github.com/openlayers/openlayers/issues/4133):
Use a "custom imageLoadFunction for the image source. Instead of
returning the image itself, return a canvas with a frame of the gif,
which you can get using third party libraries (e.g.
http://themadcreator.github.io/gifler/docs.html#animator::createBufferCanvas())."
I tried to use his approach but didn't manage to display the canvas on the map. Could someone either advise how to show gif on the map or how to display canvas holding that gif?
Here's the code that I used:
<script src="/js/gifler.min.js"></script>
...
var ImageSource = new ol.source.ImageWMS({
url: 'http://weather-services.telventdtn.com/basic/wms_v1/wms.wsgi?',
params: {
'REQUEST' : 'GetAnimationFile',
'VERSION' : '1.3.0',
'SERVICE' : 'WMS',
'STYLES' : '',
'LAYERS' : 'RADAR_US_CURRENT',
'CRS' : 'EPSG:900913',
'BBOX' : '-16730536.751059378,2397065.207023127,-3629841.5992064495,8198941.401981145',
'FORMAT' : 'image/gif',
'WIDTH' : '2678',
'HEIGHT' : '1186',
'FRAMEDELAY' : '20',
'TRANSPARENT': 'TRUE'
},
imageLoadFunction: function (image, src) {
var client = new XMLHttpRequest();
client.open('GET', src, true);
client.setRequestHeader('Authorization', "Basic " + btoa("login:password"));
client.responseType = "arraybuffer";
client.onload = function () {
var byteArray = new Uint8Array(this.response);
var blob = new Blob([byteArray], {type: "image/png"});
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
gifler(imageUrl)
.get()
.then(function(animator) {
var BufferCanvas = animator.constructor.createBufferCanvas(animator._frames[0], animator.width, animator.height);
animator.animateInCanvas(BufferCanvas);
image.setImage(BufferCanvas);
});
};
client.send();
}
});
var Image = new ol.layer.Image({
name: 'precip_layer',
opacity: 0.8,
zIndex: 1,
source: ImageSource
});

The solution is in the new release of OpenLayers v4.6.5. Below is the example from their official website of how the animated WMS layer can be achieved:
https://openlayers.org/en/latest/examples/wms-time.html

I had some success animating gif downloaded through imageWMS (used ncWMS for this).
create an ImageWMS source image layer to get the animated gif from ncWMS or other WMS service that provides animated gifs.
Then I would use the gifuct-js.js library to unpack the gif in the ImageWMS "imageLoadFunction".
I then have another ImageLayer which uses an ImageCanvasSource, in which I have the canvasFunction create the canvas, which I give to the gif library functions to render on top of.
The net result is one layer to downloade the imageWMS and another layer to display it as an ImageCanvasSource. You may have to do some projection alignment, but now you can have controls to animate the gif in another layer.

How to set background image for a rectangle in JointJs?

How to set background image attribute for a rectangle in my JointJs application ?

Rectangle object doesn't have that attribute perse....what you can do it's create an image object itself:
var image = new joint.shapes.basic.Image({
position : {
x : 50,
y : 40
},
size : {
width : 16,
height : 16
},
attrs : {
image : {
"xlink:href" : "images/background.png",
width : 16,
height : 16
}
}
});
graph.addCell(image);
Then you can play as you need with the attrs of it, you can even create ports and set arrows later if you wish to do diagrams. Other way it's to create a rectangle object and then create this image object above as a cover (in case you need specific attrs from rectangle to code).Tell me how it goes.

How can i an add image overlay depending on the options in the polygon properties in a leaflet map?

I have a multi-polygon geojson file ( mapInfo ) that has one of the properties named "field_hazards". The hazards include "gale/storm, heavy rain, thunderstorm and Freezing rain "
How can i an add image overlay depending on the field_hazard options?
Note the geojson file is got dynamically as a drupal feed. I have made the following code but it returns an empty map, the polygons are not rendered.
function getImage(d) {
return d === 'Freezing Rain' ? "http://mymap:8082/images/weather-images/43n.png" :
d === 'Thunderstorm' ? "http://mymap:8082/images/weather-images/11.png" :
d === 'Heavy Rain' ? "http://my:8082/weather-images/02n.png" :
d === 'Gale\/Storm' ? "http://mymap:8082/images/weather-images/15.png" :
"http://my:8082/images/weather-images/09.png";
}
var imageUrl = getImage(feature.properties.field_hazards);
var imageLayer = L.imageOverlay(imageUrl, imageBounds).addTo(map).bringToBack();
var boxOptions = {fillOpacity:0, opacity:0, onEachFeature: onEachBox};
//create the image interaction box
var imageBox = L.geoJson(mapInfo, boxOptions).addTo(map);
//zoom in to fit GeoJSON layer
map.fitBounds(imageBox.getBounds());
I have looked at this example " add image to rect polygon in leaflet
", but it requires me to have the image url preset as a property its self.

I got a solution from this link. Posted it in case some else is interested.
Adding image overly in leaflet map from a property

Group transition not drawn to canvas until forced by other actions

I am trying to transitionTo a group and it does it, but I can see the transition only when something else forces stage to be drawn. Transition itself doesn’t update the canvas while it’s going. There are 4 Kinetic.Image's and 4 Kinetic.Text's inside the group. Any idea how to get it working?
Let's say #score group x: 1000
var points = self.stage.get('#scoreGroup')[0];
points.transitionTo({
x: 800,
duration: 5
});

I'm afraid more code would be needed to actually tell what might be missing, but my guess is that you added the elements to the group, which was already in a layer, which was already on the stage. Your transitionTo is being rendered in the buffer, but because the elements were never "drawn" on the stage, the animation isn't being translated to the viewable stage. Perhaps if you provide more code or create a jsFiddle of this, I can provide more insight.
In the meantime, make sure your 4 images and 4 text objects appear on the stage before you call the transitionTo (comment out the transition temporarily), then give it another go.
var stage = new Kinetic.Stage({container : 'container', width : 800, height : 600});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({id : 'scoreGroup', x : 0, y : 0});
layer.add(group);
stage.add(layer);
// add images and text as usual
var imageObj = new Image();
imageObj.onload = function() {
var image = new Kinetic.Image({x : 20, y : 20, width : 100, height : 100, image : imageObj});
group.add(image);
};
imageObj.src = '[path_to_image]';
layer.draw();
group.transitionTo({x : 600, y : 400, duration : 3});
Let me know what you come up with.