I have read through the documentation but can't seem to find a way to rotate a marker using ngx-leaflet (I would like to dynamically change based on my compass heading).
Here is the solution as there is a type definition for this:
npm i -S #types/leaflet-rotatedmarker leaflet-rotatedmarker
Then just import the module:
import 'leaflet-rotatedmarker';
Now your marker has extra functions to set rotation:
const currentMarker = marker([-28, 15], {
icon: icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/markers/marker-icon-green.png',
iconRetinaUrl: 'assets/markers/marker-icon-2x-green.png',
shadowUrl: 'assets/markers/marker-shadow.png'
})
});
currentMarker.setRotationAngle(90);
Related
I want to create my own loader using animation, my idea is using scale to handle it, so the step should be like:
show an image scale from (n) to 1 for the first time
check if conditional is accepted or not
if conditional accepted, show an image scale from 1 to (n)
I can achieve 1st condition, but when i try 2nd and 3rd condition, the animation start in a blink of eye,
anyone can help me how to fix this?
here's the code i've tried:
//animation function
playAnimation(){
this.setState({onLoad:true})
this._load.setValue(0)
this._scale.setValue(0)
Animated.timing(this._load, {
toValue: 100,
useNativeDriver: true,
duration:1000
}).start(()=>{
setTimeout(() => {
Animated.timing(this._scale, {
toValue: 100,
useNativeDriver: true,
duration:1000
}).start(()=>this.setState({onLoad:false}));
}, 2000);
});
onLoad = this._load.interpolate({
inputRange: [0, 50, 75, 100],
outputRange: [10, 1, 1.4, 1],
})
imageScale = this._scale.interpolate({
inputRange: [20, 35, 70],
outputRange: [1.2, 1, 20],
})
}
//on render
<Animated.Image
style={{
resizeMode:'contain',
position:'absolute',
zIndex:1,
width:width/2,
height:200,
transform:[{scale:this.state.onLoad?onLoad:imageScale}]
}}
source={{uri: "https://www.knittedhome.com/communities/5/004/012/872/235/images/4628207884.jpg"}}
/>
and the result:
How your code works right now is somewhere in your code, you're calling PlayAnimation().
PlayAnimation() will:
start and complete first animation
Wait 2 sec
start and complete second animation
What you're doing in your Animated.Image is setting the transforms to different values. This doesn't start or stop the animation, just tells Animated.Image what value to set transform to.
What you should do
Use one Animated.Value to keep track of the scale. Assign that value to the Animated.Image transform.
Write two Animation functions:
scaleDown, call this where you're currently calling PlayAnimation
scaleUp, use your onLoad conditional to execute this in render or somewhere appropriate.
I'm using the Cose-Bilkent layout to display a nested graph but it gets a bit messy when there are too many edges. To improve the graph in a visual way I was thinking about using some edge bundling for the graph. I've been doing some research and it seems I should be able to do this by setting things like control-point-step-size and/or control-point-weight but it is still not clear to me how to do that to be honest. My idea is to set that control point based on the position of some parent node. Below I attach a screenshot with a sketch of what I would like to get (sorry for the bad sketch). Could someone guide me a bit on how to get that parent control point and then set if for the edges? enter image description here Thanks!
I think you just have to add the control-point properties to your style :)
You can either use the bezier edge-style or the unbundled bezier edge-style
var cy = cytoscape({
container: yourContainer, // container to render in
elements: yourElements,
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': yourColor,
'label': yourLabel
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
'curve-style': 'bezier',
// 'curve-style': 'unbundled-bezier', // this is a manual bezier, maybe try out this one too
'control-point-things': xyz
}
}
],
layout: {
name: yourLayout
}
});
I'm using ngx-leaflet to render a map in an Angular app. I'm adding markers to a layer with an EventListener on click like so:
questions.forEach((question) => {
this.layers.push(
marker([question.lat, question.lng], {
icon: icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/marker-icon.png',
shadowUrl: 'assets/marker-shadow.png'
})
}).on('click', this.onClick)
);
});
With onClick being:
onClick(e) {
this.showQuestion = true;
console.log('data: ', e);
}
I want the click on a marker to set the showQuestion Boolean to true, but the context of this is not related to the Angular component, but to the Leaflet event.
How can I access the Angular component this instead of the Leaflet this?
The simplest approach is to use bind to create a function with an explicit this context. See the following example:
questions.forEach((question) => {
this.layers.push(
marker([question.lat, question.lng], {
icon: icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/marker-icon.png',
shadowUrl: 'assets/marker-shadow.png'
})
}).on('click', this.onClick.bind(this))
);
});
In this example, the onClick handler will be invoked with this set to whatever this is referring to when the call to bind is evaluated (I'm assuming from your example it will be the ngx component).
http://legacy.datatables.net/ref
I am running an older version of DataTables, which so far has proven satisfactory for my needs. I have found the answer I am seeking, but just don't know WHERE?? the file is located within DataTables folder structure ???? - ( I want to make changes to the default # of records shown )
aLengthMenu
`[!$(document).ready( function() {
$('#example').dataTable( {
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
// Setting the default display length as well as length menu
// This is likely to be wanted if you remove the '10' option which
// is the iDisplayLength default.
$(document).ready( function() {
$('#example').dataTable( {
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]]
} );
} );`
Any suggestions as to where this piece of code is located so I can change it?
Thank you in advance
Short answer: don't.
If you change the source code for a plugin, you lock yourself into either changing the source code every time the plugin gets updated or forcing yourself to use an outdated library/plugin.
Like most jquery plugins, you can change the defaults when the page loads before the pluging is used. I actually put all my defaults in a single file that I load after the other files load.
<script src='pathtojquery.js'></script>
<script src='pathtojqueryUI.js></script>
<script src='pathtoDatatables.js></script>
<script src='pathtoMyDefaults.js></script>
in pathtoMyDefaults.js, I have this line, among others:
$.fn.dataTable.defaults.aLengthMenu = [[5, 8, 10, 15, 20, 30, 50, 75, -1], [5, 8, 10, 15, 20, 30, 50, 75, "All"]];
You can examine $.fn.dataTable.defaults with a javascript debugger to see all of the defaults.
then in my code I just have to do this:
$(document).ready(function(){
$("#tblSelector").DataTable({stuff:"stuff",
// if page length is not included, or does not match what is in the array, it defaults to the last one in the array.
pageLength: 8,
moreStuff:"moreStuff"
} )
});
Dojo version: 1.10.4 downloaded 11/24/2015
When I create a new Tooltip, there is an error returned:
TypeError: invalid 'in' operand source
thrown from dojox/lang/utils.js line 46
if(x in source && !(x in empty)){...}
where source is the text, "default", but it is expecting an object.
The text, "default" appears to be from the call to create the Tooltip,
indicated in the code below.
(I've removed code that I think is unnecessary to understand the problem.)
require([ "dojox/charting/Chart", "dojox/charting/widget/Legend",
"dojox/charting/axis2d/Default", "dojox/charting/action2d/Tooltip",
"dojox/charting/plot2d/Bars", "dojox/charting/plot2d/ClusteredBars",
"dojox/charting/plot2d/StackedBars", "dojo/domReady!"],
function(Chart, Legend, Tooltip){
var barChart = new Chart("WPDDashboard_DojoBarChart3_1",
{ title: 'Finance Comparison', titleFont: 'bold 100% Arial});
barChart.addPlot("default", {
type: 'ClusteredBars' , gap: 5, stroke: {
color: 'black', width: 2}, fill: '#3366cc', shadow: {
dx: 2, dy: 2}});
barChart.connectToPlot("default" ........);
barChart.addAxis(.......);
//I think this is the offending line
var tip = new Tooltip(barChart, "default");
barChart.render();
});
Your ordering of the required objects doesn't line up with the declaration. You're requiring Chart, Legend, Default, and then Tooltip while you're declaring Chart, Legend, and then Tooltip. So what you've done is you named the Default chart to Tooltip and tried using it. Try fixing the order and that should work.