I have an application where users can upload data and create maps from Data. But sometimes some struggle with label positioning of circular geometries appears in OL.
Circular elements get the label position in the "hole" instead inside the actual geometry, making the labels flying around, and sometimes unreadable.
Is it somehow possible to force the labels to be inside the geometry?
If you render something like this, you get the label in the center instead of the actual geometry:
{"bbox" : [ 1291894.8323655454, 6141624.110895131, 1292345.361152353, 6141834.360245953 ],
"outOfFieldApplicationRate" : 0,
"positionLostApplicationRate" : 120,
"originalAnbauGeometrie" : "POLYGON ((11.6053336858749 48.209016852451384, 11.6074051973992 48.20968715883487, 11.6091102361679 48.20861645879208, 11.6073936223984 48.20876660678118, 11.606782078743 48.208759456886895, 11.6055375337601 48.20890960445681, 11.6053336858749 48.209016852451384))",
"themaGeometrien" : [ {
"geometrie" : "POLYGON ((1292195.1848900837 6141774.288475575, 1292225.2201425375 6141774.288475575, 1292225.2201425375 6141744.252748576, 1292255.2553949913 6141744.252748576, 1292255.2553949913 6141714.21712703, 1292315.3258998992 6141714.21712703, 1292315.3258998992 6141684.181610941, 1292345.361152353 6141684.181610941, 1292345.361152353 6141624.110895131, 1291924.8676179992 6141624.110895131, 1291924.8676179992 6141654.146200307, 1291894.8323655454 6141654.146200307, 1291894.8323655454 6141744.252748576, 1291924.8676179992 6141744.252748576, 1291924.8676179992 6141774.288475575, 1291984.9381229067 6141774.288475575, 1291984.9381229067 6141804.324308032, 1292045.0086278145 6141804.324308032, 1292045.0086278145 6141834.360245953, 1292165.14963763 6141834.360245953, 1292165.14963763 6141804.324308032, 1292195.1848900837 6141804.324308032, 1292195.1848900837 6141774.288475575), (1292045.0086278145 6141684.181610941, 1292165.14963763 6141684.181610941, 1292165.14963763 6141744.252748576, 1292014.9733753605 6141744.252748576, 1292014.9733753605 6141684.181610941, 1292045.0086278145 6141684.181610941))",
"thema" : "00799dde-d988-8c57-a855-c4ddb5086e48",
"applicationRate" : 200.0
}, {
"geometrie" : "POLYGON ((1292045.0086278145 6141744.252748576, 1292165.14963763 6141744.252748576, 1292165.14963763 6141684.181610941, 1292014.9733753605 6141684.181610941, 1292014.9733753605 6141744.252748576, 1292045.0086278145 6141744.252748576))",
"thema" : "00799dde-d988-8c57-a855-c4ddb5086e48",
"applicationRate" : 0.0
} ]
}
style:
new ol.style.Style({
fill: new ol.style.Fill({ color: color }),
stroke: new ol.style.Stroke({
color: 'grey',
width: 1
}),
text: new ol.style.Text({
font: '12px sans-serif',
text: String(f.get('applicationRate')),
fill: new ol.style.Fill({ color: color }),
stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 0, 0.5)', width: 3 })
})
})
Related
I want the colors to be like the Gitlab's Contribution Heatmap (bottom left is the color range):
// [value, color]
stops: [
[0, '#ededed'],
[1-9, '#acd5f2'],
[10-19, '#7fa8c9'],
[20-29, '#527ba0'],
[30+, '#254e77']
]
Anyone know how can I do it with Highcharts Heatmap?
You need to use data-classes for color-axis. For example:
colorAxis: {
...,
dataClasses: [{
color: '#ededed',
to: 1
}, {
color: '#acd5f2',
from: 1,
to: 9
}, {
color: '#7fa8c9',
from: 10,
to: 19
}, {
color: '#527ba0',
from: 20,
to: 29
}, {
color: '#254e77',
from: 30
}]
}
Live demo: https://jsfiddle.net/BlackLabel/9qd1Lewp/
API Reference: https://api.highcharts.com/highcharts/colorAxis.dataClasses
We're currently generating a polar chart in HighCharts that renders correctly on the client-side (in the browser), and correctly applies formatters to the xAxis, yAxis, and plotOptions. Here is a jsFiddle that shows how it is rendering (correctly) in the browser: https://jsfiddle.net/cmodzelewski/38f03Lse/1/
On the server side, we are constructing a JSON payload and sending it to a node-export-server instance and returning a PNG. Based on our research, it is clear that formatters need to be included in the callback key of our JSON payload and passed to the server as a string, rather than in the infile key.
That's fine, and so we're converting our formatter functions into strings, composing them into the options object in our callback key, and then redrawing the chart at the end of our callback key.
This approach works great for non-polar charts, but if polar == true the export server returns a valid PNG from the export server, however that chart does not apply our formatter functions to the xAxis, yAxis, or plotOptions.series.
Here is the JSON payload that we are sending to a node-export-server instance:
{
"callback": "function (chart) {var options = chart.options;var xAxisFormatter = function () { var extra_hrs = 0; if (this.value == 0) { extra_hrs = 12; }; return ((this.value / 0.5)/60) + extra_hrs + ':00'; };if (\"labels\" in options[\"xAxis\"]) { options[\"xAxis\"][\"labels\"][\"formatter\"] = xAxisFormatter; } else { options[\"xAxis\"][\"labels\"] = { \"formatter\": xAxisFormatter, \"style\": { \"fontSize\": \"8px\" } }; };var yAxisFormatter = function () { return Highcharts.numberFormat(this.value, 2, '.', ',') + \"%\"; };if (\"labels\" in options[\"yAxis\"]) { options[\"yAxis\"][\"labels\"][\"formatter\"] = yAxisFormatter; } else { options[\"yAxis\"][\"labels\"] = { \"formatter\": yAxisFormatter, \"style\": { \"fontSize\": \"8px\" } };};var plotOptionsFormatter = function () { return Highcharts.numberFormat(this.value, 2, '.', ',') + \"%\"; };options[\"plotOptions\"][\"series\"][\"dataLabels\"][\"formatter\"] = plotOptionsFormatter;chart = new Highcharts.chart(chart.container, options);chart.redraw();}",
"infile": "{chart: {backgroundColor: \"white\", borderWidth: 0, height: 300, polar: true, width: 300}, colors: [\"#16C1F3\", \"#3C6E71\", \"#EAC435\", \"#E63946\", \"#33658A\", \"#DFD6A7\", \"#627264\", \"#86CCA5\", \"#6268B0\", \"#E8D33F\", \"#DA2C38\"], credits: {enabled: false, position: {align: \"right\", verticalAlign: \"bottom\"}, text: \"(c) Insight Industry Inc., 2017.\"}, exporting: {enabled: false}, legend: {enabled: false}, plotOptions: {column: {groupPadding: 0, pointPadding: 0}, series: {dataLabels: {}, pointInterval: 30, pointStart: 0}}, series: [{data: [{name: \"12:00am - 4:59am\", x: 0, y: 2.737994945240101}, {name: \"5:00am - 5:29am\", x: 150, y: 1.6287559674248806}, {name: \"5:30am - 5:59am\", x: 165, y: 1.6849199663016006}, {name: \"6:00am - 6:29am\", x: 180, y: 5.9112608817747825}, {name: \"6:30am - 6:59am\", x: 195, y: 11.513619769727605}, {name: \"7:00am - 7:29am\", x: 210, y: 17.98652064026959}, {name: \"7:30am - 7:59am\", x: 225, y: 17.733782645324347}, {name: \"8:00am - 8:29am\", x: 240, y: 20.190957596180848}, {name: \"8:30am - 8:59am\", x: 255, y: 7.848918843021623}, {name: \"9:00am - 9:59am\", x: 270, y: 8.438640831227183}, {name: \"10:00am - 10:59am\", x: 300, y: 3.1592249368155008}, {name: \"11:00am - 11:59am\", x: 330, y: 1.1654029766919405}], name: null, pointPlacement: \"on\", type: \"column\"}], title: {text: null}, tooltip: {style: {fontSize: \"10px\"}, valueDecimals: 1, valueSuffix: \"%\"}, xAxis: {labels: {style: {fontSize: \"10px\"}}, max: 360, min: 0, tickInterval: 30, title: {text: null}}, yAxis: {labels: {style: {fontSize: \"10px\"}}, max: 25.0, min: 0, showLastLabel: false, tickInterval: 5, title: {style: {color: \"#0A3B61\", fontSize: \"9px\", fontWeight: \"bold\"}, text: \"Workers, Aged 25+\"}}}",
"scale": 2,
"type": "png"
}
We have recreated what we (suspect) is the process that the node export server goes through, and have definitely recreated the (weird) behavior that we're seeing in this jsFiddle: https://jsfiddle.net/cmodzelewski/v4gm6t9a/2/
Are we missing something blatantly obvious (which is what we suspect)? Or is there a better way of doing this to get the behavior we're looking for?
Any help would be very much appreciated!
In your fiddle with the suspected process, and in your callback, you are setting the axis labels in the following way:
options["yAxis"]["labels"]
This will set an object labels on the yAxis element, however, since you can have several axis in highcharts, they are indexed, and stored as such. That means you have to edit the first axis like this:
options["yAxis"][0]["labels"]
Here is a picture of the yAxis object in the incorrect configuration:
Here is a picture of the yAxis object in the correct configuration:
Working example using your second fiddle: https://jsfiddle.net/ewolden/v4gm6t9a/4/
I am working with leafletjs API.
I do not have experience with JS and I couldn't find any answer here.
I am trying to combine using geolocation service with leaflet routing service.
My goal is to get
latlng
value from
onLocationFound
function and passed that
information to first
waypoint
in routing service.
//INITIALIZE MAP...
var map = L.map('map');
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// LOCATION SERVICE
map.locate({setView: true, maxZoom: 16});
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
}
map.on('locationfound', onLocationFound);
function onLocationError(e) {
alert(e.message);
}
map.on('locationerror', onLocationError);
//End of Location service,
//GET LATLNG PARAMETERS AFTER CLICK IN CONSOLE
map.on('click', function(e)
{
tempLatitude = e.latlng.lat;
tempLongitude = e.latlng.lng;
console.log(tempLongitude);
console.log(tempLatitude);
});
// ROUTING SERVICE
var control = L.Routing.control(L.extend(window.lrmConfig, {
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
geocoder: L.Control.Geocoder.nominatim(),
routeWhileDragging: true,
reverseWaypoints: true,
showAlternatives: true,
altLineOptions: {
styles: [
{color: 'black', opacity: 0.15, weight: 9},
{color: 'white', opacity: 0.8, weight: 6},
{color: 'blue', opacity: 0.5, weight: 2}
]
}
})).addTo(map);
L.Routing.errorControl(control).addTo(map);
.
I'm using pdfmake to create a PDF and have successfully used a data URI to embed an image. It is a small image, about 200px across, and I would like to have it right-aligned. Is there any way to push an image to the right side of the PDF?
You can right align your image using a pre-defined style in your document definition. The pdfmake playground has a good example of images, which I edited to add the 'right aligned' style (called 'rightme') below. I tried just adding 'alignment: right' to the document definition directly, but this does not work.
I removed the image data due to length - visit the pdfmake playground images to see this working:
var dd = {
content: [
'pdfmake (since it\'s based on pdfkit) supports JPEG and PNG format',
'If no width/height/fit is provided, image original size will be used',
{
image: 'sampleImage.jpg',
},
'If you specify width, image will scale proportionally',
{
image: 'sampleImage.jpg',
width: 150
},
'If you specify both width and height - image will be stretched',
{
image: 'sampleImage.jpg',
width: 150,
height: 150,
},
'You can also fit the image inside a rectangle',
{
image: 'sampleImage.jpg',
fit: [100, 100],
pageBreak: 'after'
},
// Warning! Make sure to copy this definition and paste it to an
// external text editor, as the online AceEditor has some troubles
// with long dataUrl lines and the following image values look like
// they're empty.
'Images can be also provided in dataURL format...',
{
image: **'IMAGE TRUNCATED FOR BREVITY'**,
width: 200,
style: 'rightme'
},
'or be declared in an "images" dictionary and referenced by name',
{
image: 'building',
width: 200
},
],
images: {
building: **'IMAGE DATA TRUNCATED FOR BREVITY'**
},
styles:{
rightme:
{
alignment: 'right'
}
}
}
Code below demonstrates left (default), center and right justifying an image.
Paste following code into http://pdfmake.org/playground.html for live view.
Playground requires you to assign document definition to a variable called dd
var dd = {
content: [
'left align image', ' ',
{
image: 'sampleImage.jpg',
width: 100,
height: 100,
alignment: 'left' // Default... not actually required.
},
' ', ' ', 'center align image', ' ',
{
image: 'sampleImage.jpg',
width: 100,
height: 100,
alignment: 'center'
},
' ', ' ', 'right align image', ' ',
{
image: 'sampleImage.jpg',
width: 100,
height: 100,
alignment: 'right'
}
]
}
$('#cmd').click(function () {
var img = document.getElementById('imgReq');
var empImage = img.getAttribute('src');
var docDefinition = {
pageMargins: [0, 0, 0, 0],
content: [
{
style: 'tableExample',
table: {
headerRows: 1,
body: [
[ {
image: 'building',
width: 195,
height: 185,
} ],
]
},
layout: {
hLineWidth: function(i, node) {
return (i === 0 || i === node.table.body.length) ? 0 : 0;
},
vLineWidth: function(i, node) {
return (i === 0 || i === node.table.widths.length) ? 0 : 0;
},
hLineColor: function(i, node) {
return (i === 0 || i === node.table.body.length) ? '#276fb8' : '#276fb8';
},
vLineColor: function(i, node) {
return (i === 0 || i === node.table.widths.length) ? '#276fb8' : '#276fb8';
},
paddingLeft: function(i, node) { return 0; },
paddingRight: function(i, node) { return 0; },
paddingTop: function(i, node) { return 0; },
paddingBottom: function(i, node) { return 0; }
}
}
],styles:{
tableExample: {
margin: [200, 74, 0, 0],
//alignment: 'center'
}
}, images: {
building: empImage
}
};
I used images "dictionary" in the browser (not in Nodejs) to locate an image from the server like this:
{
content: [
{
image: 'imageKey',
width: 20,
height: 20
}
],
images: {
imageKey: window.location.origin + "path/to/image" // via URL address, which can be referenced by this key
}
}
This allows you to (re-)use local images from the server with ease. I hope this will be helpful to someone in a similar situation.
just add alignment: "center" to the image, it works out for me)
I'm doing a rails app and was able to get chartkick working but customizing it is a bit of a pain in the butt. I'm trying to customize the tooltip with the Google chart API but I can't seem to figure out. I just want to be able to change the text, "Value".
Could someone put me in the right direction.
Here is my code:
<%=
column_chart [
["Strongly Disagree", p[1]],
["Disagree", p[2]],
["Neutral", p[3]],
["Agree", p[4]],
["Strongly Agree", p[5]]
],
height: "220px",
library: {
width: 665,
fontName: "Helvetica Neue",
colors: ["#29abe2"],
tooltip: {
textStyle: {
color: "#333333"
}
},
bar: {
groupWidth: "50%"
},
vAxis: {
title: "Everyone",
titleTextStyle: {
italic: false,
color: '#777'
},
gridlines: {
color: "#eeeeee"
},
viewWindow: {
max: m
}
}
}
%>
The chartkick documentation is sparse, but if this system works the way I suspect it does, then you need to add an array of column headers to the start of your data, eg:
[
["Label for column 0", "Label for column 1"],
["Strongly Disagree", p[1]],
["Disagree", p[2]],
["Neutral", p[3]],
["Agree", p[4]],
["Strongly Agree", p[5]]
]