I am using mapbox v1.6.1
to show up
var mapboxMap = L.mapbox.map(mapName, 'examples.map-20v6611k',{tileLayer:{noWrap:true},zoomControl:false,zoomAnimation:false,fadeAnimation:false,inertia:false}).setView([23.8, -11], 1);
a choropleth map and
var statesLayer = L.geoJson(localData, {
style: getStyle,
onEachFeature: onEachFeature
}).addTo(mapboxMap);
a normal map with markers
var featureLayer = L.mapbox.featureLayer(mapPlotData).addTo(mapboxMap);
These two layers are not showing up when i export the webpage to pdf using phantomJS
Increasing the timeout doesnt work as well.
I appreciate any help on this!
Related
I would like to use the blue marble image from Nasa as a basemap on the globe view. Most other WebGL mapping frameworks let you do this.
Appreciate some help, pure typescript if possible (thats why i want to work with deck.gl)
way to do this with deck.gl is to create a globeview:
this.deckgl = new Deck({
initialViewState: INITIAL_VIEW_STATE,
views: new GlobeView({id: 'globe', controller: true})....
create the BitmapLayer:
createWorldLayer() {
return new BitmapLayer({
id: 'WORLD_MAP',
bounds: [-180, -90, 180, 90],
image: WORLD_MAP //this is a image url (local or remote)
})
}
and add it to the view:
this.deckgl.props.layers.push(myWorldLayer)
I am having trouble getting a iOS asset file drawn to react-native-canvas.
I am loading the image with Expo Image Picker, and that is working (since it is working on the website as well)
Somewhere in this code, there is an exception being thrown, and I believe it is because the image src is not valid.
CanvasImage is imported from {Image} from react-native-canvas
#setImage2[0] is the current image, loaded from expo image picker, starts with file://, is a png
imageDraw = new CanvasImage(canv,setImage2[0].width,setImage2[0].height);
var imageinfo = await FileSystem.readAsStringAsync(setImage2[0].uri,{ encoding: FileSystem.EncodingType.Base64 });
imageDraw.src = "data:image/png;base64, "+imageinfo
imageDraw.height = setImage2[0].height
imageDraw.width = setImage2[0].width
var image_drawn = await can_context.drawImage(imageDraw,0,0,new_width,new_height);
const gID = await can_context.getImageData(0,0,new_width,new_height);
I am looking to draw the image to the canvas (context is can_context), and then get the pixels after drawing on the image.
Any help is greatly appreciated, even a different route to the same solution works.
Thanks in advance.
I want to add an image to my Sphere. I have looked up so many versions of loading an image but it seams like my version should be correct. After commenting out map: new THREE.TextureLoader().load('earth.jpg'),, the sphere is visible but when trying to load the image, it disappears.
this.sphere = new THREE.Mesh(
new THREE.SphereGeometry(this.radius, this.segments, this.segments),
new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('earth.jpg'),
side: THREE.BackSide
}))
Is there any way to change the sc-waveform container background from #efefef without having to load the waveform.js library? I have enough libraries loading already and the conainer bg conflicts with our site background color
I am experiencing the same issue and have had this problem before ( Overlay visible areas of transparent black silhouette PNG with pattern using CSS3 or JS ).
Here is an example with your waveform: http://jsfiddle.net/eLmmA/3/
$(function() {
var canvas = document.createElement('canvas');
canvas.width = 1800; // must match
canvas.height = 280; // must match
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'WAVEFORM_IMAGE.EXT';
}
img.src = 'OVERLAY_IMAGE.EXT';
document.body.appendChild(canvas);
});
I think I understand what you mean. You want to change the color of the waveform background, the gray stuff around the waveform:
The problem here is that waveforms you get from SoundCloud API are represented as partly transparent PNG images, where waveform itself is transparent and the chrome around it is gray (#efefef) color.
So, unless the library you want to use for waveform customisation is using HTML5 canvas, you won't be able to use change the color of that chrome (so no, not possible with either HTML5 Widget API or Custom Player API). And you have to use waveform.js or the likes (or modify the waveform image on canvas yourself).
You could try to experiment with newest CSS filters (webkit only for now) and SVG filters, and possibly some MS IE filters for older IE versions, but I am not sure you'd manage to just change the color.
given a PDF that is rendered in the browser using pdfjs, are there functions to do the following basic view operations:
rotate
flip
zoom
If not, what are the best strategies I can use to do the operations above?
You can set rotation when you getting viewport form PdfPage object:
var viewport = pdfPage.getViewport(scale, rotation);
If you want to immediately set all the parameters, you can clone viewport, created with scale = 1:
var defaultViewport = pdfPage.getViewport(1);
var neededViewport = defaultViewport.clone({scale: needScale, rotation: needRotation, dontFlip: true});