I'm trying to adjust the transparency of a PNG that I am overlaying on ArcGIS/ESRI API for Javascript.
I have tried to set an opacity option in the var but, am not having much luck.
map.on("load", function() {
// create and add the layer
var mil = new esri.layers.MapImageLayer({
});
// create an add the actual image
var mi = new esri.layers.MapImage({
'extent': { 'xmin': -125.0, 'ymin': 22.0, 'xmax': -66.5, 'ymax': 52.0},
'href': 'https://some.website/some.image.PNG',
'opacity': 0.75
});
What am I doing wrong?
I added opacity: 0.6 to
map.on("load", function() {
// create and add the layer
var mil = new esri.layers.MapImageLayer({
'opacity': 0.6,
});
Related
I have a page with multiple similar sections with the class ".imgPanel" that I would like to apply the same animation to each section every time the page scrolls into view.
I don't want to create a new scene for each animation as they are all the same. I know there is a way to create a variable scene (i hope that is the correct terminology), and I am hoping someone can help.
Does anyone know how I would adjust the code below to make that happen. I am sure if I get one example of it with my code below I will be able to understand and use this technique again.
Thanks in advance. Adam.
function scrollMagic() {
if (!Modernizr.touch) {
var controller = new ScrollMagic.Controller({
duration: "200%",
});
var panelAnim = new TimelineMax();
panelAnim
.from($('.imgPanel'), 1.4, {
y: '-50px',
autoAlpha: 0,
ease: Power1.easeOut
}, '-=0.2')
var introScene = new ScrollMagic.Scene({
duration: "100%",
})
.setTween(panelAnim)
.addTo(controller);
}
}
I figured it out after watching Ihatetomatoes video
function scrollMagic() {
if (!Modernizr.touch) {
var controller = new ScrollMagic.Controller({
duration: "100%",
});
$('.imgPanel').each(function(){
var tween = TweenMax.from($(this), 1.4, { y: '-50px', autoAlpha: 0,
ease: Power1.easeOut }, '-=0.2');
var scene = new ScrollMagic.Scene ({
duration: "100%",
offset: -300, // offset trigger position by 100px
triggerElement: this
})
.setTween(tween)
.addTo(controller);
});
}
}
I am exporting a diagram made using Jointjs library to pdf using jspdf and canvas:
Below is my javascript code::
var svg = document.querySelector('svg');
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg);
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = '#FFFF';
canvg(canvas, svgString);
var imgData = canvas.toDataURL('image/png');
// Generate PDF
doc.setFontSize(10);
doc.text(35, 25, "Google Cloud Craft");
doc.addImage(imgData, 'PNG', 10, 50);
doc.save('test.pdf');
the result i get after downloading and on canvas is:
What i want is those black arrow marks should not come as they are shown on mouseover events, it should be like below image for reference:
please let me know how can i achieve this.
Let me try to answer.
Add the below code to hide the mouse-over elements before serialising it
$(".marker-arrowhead").css("display", "none");
$(".tool-remove").css("display", "none");
$(".tool-options").css("display", "none");
$(".marker-vertices").css("display", "none");
Hope this helps you.
I found a solution sharing, so that if anyone faces this issue can get help.
this is the solution, who are familiar with jointjs will understand it.
link.attr({
'.marker-arrowheads': {
fill: 'none'
},
'.connection-wrap': {
fill: 'none'
},
'.marker-vertices': {
fill: 'none'
},
'.link-tools': {
fill: 'none'
}
});
Here my proposition :)
const classes = ['.marker-vertices', '.link-tools'];
const svg = this.paper.svg.cloneNode(true);
// remove tools
classes.forEach(c => {
const elements = svg.querySelectorAll(c);
elements.forEach(el => { el.style.display = 'none'; });
});
I am new to the ArcGIS API for Javscript 4.0 API. Using the calcite sample on the API website. Where can I add in a feature Layer to the map view and scene view? Essentially I'm trying to merge the Feature layer sample
here: https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer/index.html
/********************
* Add feature layer
********************/
// Carbon storage of trees in Warren Wilson College.
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
});
map.add(featureLayer);
with the calcite map sample here:
https://developers.arcgis.com/javascript/latest/sample-code/frameworks-bootstrap/index.html
but am not sure what part to add the layers to. I have tried a few times. See below. Thanks
/******************************************************************
*
* Create the map and scene view and ui components
*
******************************************************************/
// Map
var map = new Map({
basemap: app.basemap
});
app.mapView = new MapView({
container: "mapViewDiv",
map: map,
center: app.center,
scale: app.scale,
padding: app.viewPadding,
popup: new Popup({
dockOptions: app.dockOptions
}),
ui: {
components: app.uiComponents
}
});
// Scene
var mapScene = new Map({
basemap: app.basemap,
ground: "world-elevation"
});
app.sceneView = new SceneView({
container: "sceneViewDiv",
map: mapScene,
center: app.center,
scale: app.scale,
padding: app.viewPadding,
popup: new Popup({
dockOptions: app.dockOptions
}),
ui: {
components: app.uiComponents
}
});
// Set the active view to scene
app.activeView = app.mapView;
// Create the search widget and add it to the navbar instead of view
app.searchWidget = new Search({
view: app.activeView
}, "searchWidgetDiv");
app.searchWidget.startup();
// IS THIS WHERE I CAN ADD LAYERS??????????????????
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
});
app.mapView.map.add(featureLayer);
app.sceneView.map.add(featureLayer);
You can add them directly to the map object in 4.0. Look at the API documentation here for a small example: https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#layers.
Essentially it would look something like this:
var featureLayer = new FeatureLayer(url);
var map = new Map({
basemap: app.basemap,
layers: [featureLayer]
});
You would need to make sure you apply this to whichever map you want them to render on.
you may need the following code:
var countyLayer = new FeatureLayer({
url: "http://127.0.0.1:6080/arcgis/rest/services/newyourk/MapServer/1"
});
app.map.add(countyLayer);
I'm using OpenLayers 3 and I need to show only the vertices of a polyline. For exemple see this image :
I want to be able to show only the red squares (they can be something else than squares, like circles). Using markers is not an option for performance issue, my lines can be huge (500 000 vertices).
Currently I have a working code :
// Define the style for vertex polyline :
var yellowVertexPolylineStyle = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 1.5,
fill: new ol.style.Fill({
color: 'yellow'
})
}),
geometry: function(feature) {
return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
}
})
];
// Create the line :
var lineLayer = new ol.layer.Vector({
zIndex: 1000,
source: new ol.source.Vector({ features: [new ol.Feature({ geometry: myLine })] }),
style: yellowVertexPolylineStyle
});
// Add the layer :
map.addLayer(lineLayer);
But this is causing performance issue when the polyline is quite big (> 10 000 points).
Using an ol.geom.MultiPoint geometry is even worse. Does someone knows a better way?
EDIT : I'm trying this now :
// Define the style for vertex polyline :
var yellowVertexPolylineStyle = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 1.5,
fill: new ol.style.Fill({
color: 'yellow'
})
}),
geometry: function(feature) {
var geom = feature.get('stylegeom');
if (!geom || (geom && geom.getCoordinates().length !== feature.getGeometry().getCoordinates().length) ) {
geom = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
feature.set('stylegeom', geom);
}
return geom;
}
})
];
I'll come back here to tell if it works...
You need to cache your style geometry, otherwise it will be calculated for every rendered frame, e.g.
geometry: function(feature) {
var geom = feature.get('stylegeom');
if (!geom) {
geom = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
feature.set('stylegeom', geom);
}
return geom;
}
If your feature geometry changes, you'll need to update the style geometry too:
source.on('changefeature', function(evt) {
feature.set('stylegeom', undefined);
});
I'm attempting to create some simple UI components with dojo.gfx. I've managed to extend dojo.gfx.Group, but am out of my depth getting any of the default shapes drawn to the surface. Inspecting the rendered SVG in Firebug, there's rightfully a node but no rect.
The simplified class looks like this:
dojo.provide("gfxui.SimpleButton");
dojo.require("dojox.gfx.shape");//-¿ needed?
dojo.require("dojox.gfx.svg");
dojo.require("dojox.gfx._base");
dojo.declare("gfxui.SimpleButton", dojox.gfx.Group, {
constructor: function(){
this.draw();
},
draw:function(){
var bg = this.createRect(this.rect_props);
//var bg = this.createObject(dojox.gfx.Rect);
}
}
gfxui.SimpleButton.nodeType = dojox.gfx.Group.nodeType;
dojo.extend(dojox.gfx.Surface, {
createButton: function(){
var button = this.createObject(gfxui.SimpleButton, null, true);
this.add(button);
return button;
}
});
And the javascript in the HTML looks like this:
dojo.require("dojox.gfx");
dojo.require("gfxui.SimpleButton");
function init(){
var g = dojox.gfx;
var surface = dojox.gfx.createSurface(dojo.byId("gfx_holder"), 800, 280, "#eee");
var button = container.createButton();
};
dojo.addOnLoad(init);
I prefer a simple augmentation technique. Below is the content of a script tag:
// let's include gfx (renderer will be selected dynamically)
dojo.require("dojox.gfx");
// useful short names
var d = dojo, g = dojox.gfx;
// our creator function
function createButton(color){
// let's create our main shape: group
var group = this.createGroup();
// add custom properties, if any
group._rect = group.createRect().
setShape({x: 5, y: 5, width: 100, height: 30}).
setStroke("black").
setFill(color);
return group;
}
// we want it to be available on groups and surfaces
d.extend(g.Surface, {createButton: createButton});
d.extend(g.Group, {createButton: createButton});
// let's test the result
dojo.addOnLoad(function(){
var s = g.createSurface(dojo.byId("surface"), 500, 400),
b = s.createButton("red");
});
The example above assumes that there is a <div> called "surface".
The augmentation technique works for any renderer regardless its implementation, and uses only published APIs.