Leaflet draw edges are too big and ugly, I've looked on a way to change its style and I came up with the following code:
draw: {
polyline: {
shapeOptions: this.onSelectionStyle
},
polygon: {
icon: new L.DivIcon({
iconSize: new L.Point(16, 16),
className: 'leaflet-div-icon leaflet-editing-icon my-own-icon'
}),
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: this.onSelectionStyle,
showArea: true
},
...
basically the className should do it, but this seems not to work at least with the latest version. do you have any idea how to change the style of the eges ?
I am using this:
L.Edit.Poly = L.Edit.Poly.extend({
options: {
icon: new L.DivIcon({
iconSize: new L.Point(10, 10),
className: 'leaflet-div-icon leaflet-editing-icon my-own-icon',
}),
},
});
Related
First I write a code to create a toolbar with leaflet.draw
var drawPluginOptions = {
position: 'topright',
draw: {
polyline: false,
circle: false, // Turns off this drawing tool
rectangle: false,
marker: false,
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
showArea: true,
drawError: {
color: '#ffc107', // Color the shape will turn when intersects
},
shapeOptions: {
color: '#057d50'
},
},
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: true,
edit: true,
}
};
var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);
After that, I localized the messages and titles with L.drawLocal.
I need to recreate the map but it cause error Cannot read property 'error' of undefined
I want to know how use Both of them without any problem
I realized that the reason for this problem is because of L.drawLocal, not map.addControl.
First I checked the error code and "Cannot read property 'error' of undefined" message was related to polyline error. So, I added the errors that I did not need to localize like this answer:
https://stackoverflow.com/a/53401594/2543986
After that, I changed position of L.drawLocal to top of map.addControl
I want to adda the predict data and the actual data in real time in the same graph to get something like that:
my code is like that:
xArr.push(jsonRes[i].timestamp)
yArr.push(jsonRes[i].deplacement)
yMax.push(3)
yMin.push(-3)
yPredict.push()
// draw chart
let canvas = document.getElementById("myChart");
let ctx = canvas.getContext('2d');
myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xArr,
datasets: [{
label: 'Déplacement cumulé de la chaine inclinométrique (mm)', // Name the series
data: yArr, // Specify the data values array
fill: false,
borderColor: '#2196f3', // Add custom color border (Line)
backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
borderWidth: 1 // Specify bar border width
}, {
label: 'Déplacement max toléré', // Name the series
data: yMax, // Specify the data values array
fill: true,
borderColor: '#b30000'
}, {
label: 'Déplacement min toléré', // Name the series
data: yMin, // Specify the data values array
fill: true,
borderColor: '#b30000'
}, {
label: 'ML', // Name the series
data: yPredict, // Specify the data values array
fill: true,
borderColor: '#b30000'
}
]
},
options: {
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
}
});
I want to get an unique graph where I will have a part of actuel data in real time and the next part of predict data. All these datas come from a database as timeseries.
you can use plugin and chagne the chartLineStlyle from where you want to dashed.
https://www.chartjs.org/docs/latest/developers/plugins.html
Use plugin available hook
var chart = new Chart(ctx, {
plugins: [{
beforeInit: function(chart, options) {
//..
}
}] });
Is it possible to add a "target overlay" for Leaflet Draw toolbar?
For example I could have two overlays such as Areas and Points of interest.
Now, I would like to add markers only to Points of Interest overlay and polygons on Areas overlay.
I've been trying to figure out that is it somehow possible to programmatically activate overlays or assign overlay for different draw toolbars but nothing seems to help.
All new layers are added to same overlay since I can't figure out which overlay toolbar is used.
And at least console log value of events don't seem to help and I cannot figure out that which toolbar was used (I could use it to force addLayer to use certain overaly), I cannot get anything regarding the target layer etc.
var poiLayer = new L.FeatureGroup();
var areaLayer = new L.FeatureGroup();
var options = {
polygon: {
allowIntersection: false,
drawError: {
color: "#e1e100",
message: "<strong>Lines of a polygon cannot overlap!</strong>"
},
shapeOptions: {
color: "#FF5656"
}
},
polygon: {
allowIntersection: false,
drawError: {
color: "#e1e100",
message: "<strong>Lines of a polygon cannot overlap!</strong>"
},
shapeOptions: {
color: "#FF5656"
}
},
edit: {
featureGroup: areaLayer,
poly: {
allowIntersection: false
},
poly: {
allowIntersection: false
},
poly: {
allowIntersection: false
}
},
draw: {
featureGroup: areaLayer,
name: "dafuq2",
polygon: {
allowIntersection: false,
showArea: true
},
},
name: "namne123123123"
};
//same for the poiLayer
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);
var drawControl2 = new L.Control.Draw(options2);
map.addControl(drawControl2);
map.on(L.Draw.Event.CREATED, function(e) {
console.log(e);
});
I have a Google pie chart with the legend position set to labeled. My objective is to make all the text and legend marker lines black. Right now the lines are gray and so are the values-and-percentage numbers. Is there any way to make these all black?
var options = {
pieHole: 0.5,
pieSliceText: 'none',
textStyle:{color: 'black'},
legend: {position:'labeled', labeledValueText: 'both', alignment:'center',
textStyle: {
color: 'black',
fontSize: 12}, strokeColor: {color: 'black'},
},
};
Here is an example of the gray text and line marker I'm trying to make all black
Mutationobserver is what I needed since Google Charts have no built in commands to change these attributes.
var container = document.getElementById('pie_chart');
var chart = new google.visualization.PieChart(container);
chart.draw(view, options, observer);
var observer = new MutationObserver(function () {
$.each($('#pie_chart path[stroke="#636363"]'), function (index, path) {
$(path).attr('stroke', '#000000');
});
$.each($('#pie_chart path[fill="#636363"]'), function (index, path) {
$(path).attr('fill', '#000000');
});
$.each($('#pie_chart text[fill="#9e9e9e"]'), function (index, label) {
$(label).attr('fill', '#000000');
});
});
observer.observe(container, {
attributes: true,
childList: true,
subtree: true
});
And added this to the header.
<script src="//cdn.jsdelivr.net/npm/mutationobserver-shim/dist/mutationobserver.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is the source of the code
I am simply trying to select country paths to trigger tooltips. I suspect I am not referring to an accurate element in the svg file.
<script>
$(document).ready(function()
{
$('worldmap.shapes.US').qtip({ content: { text: 'Name: United States<br>Capital: Jefferson City' },
style: {
background: '#000000',
color: '#ffffff',
border: { width: 6, radius: 3, color: '#ff0000' }
},
position: {
corner: {
target: 'topRight',
tooltip: 'bottomLeft'
}
}
});
});
Here is how the svg file is formatted:
worldmap = {
shapes: {
AE: "M604.196,161.643l0.514-0.129l0,0.772l2.188-0.386l2.189,0l1.672,0.129l1.803-1.802l2.058-1.802l1.674-1.673l0.518,0.900l0.385,2.189l-1.417,0l-0.258,1.802l0.517,0.386l-1.159,0.515l-0.129,1.029l-0.773,1.159l0,1.030l-0.514,0.644l-8.110-1.416l-1.031-2.704l0.127,0.643z",
it's a .js file
Thank you!
I don't quite see how you draw your raphael.js path. If you're doing something like that:
my_path = paper.path("M 100,200 L ... z");
You than have to use the .node() method on your raphael path object (my_path). That gives you a ref to the DOM object which you can than use.
$(my_path.node).qtip({ ... })
See e.g. http://www.itbrigadeinc.com/post/2012/05/03/Tooltips-in-Raphael.aspx