combine plotly and folium - javascript

Using python I am trying to build a map with markers using Folium. This is working fine, however now I've started to try and add plot.ly graphs into the map which doesn't work well. Is it impossible to have javascript inside leaflets (Folium) popups?
The js code which is in the html file is shown below:
var marker_7ecf53df703f455c9b8e9342784a4fde = L.marker([-30.0,31.25], {
icon: new L.Icon.Default()
}
).addTo(map_698b07e412264d16ab4a7628d18d6a7a);
var popup_d63d578364d04568bda1b68bc0a870d7 = L.popup({maxWidth: '300'});
var html_deaec1fcc80d483faff605dcfa6691ff = $('<div id="html_deaec1fcc80d483faff605dcfa6691ff" style="width: 100.0%; height: 100.0%;"><div id="5be3c360-6f61-47fc-af22-c43d8a2c16ed" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("5be3c360-6f61-47fc-af22-c43d8a2c16ed", [{"marker": {"color": "rgb(106,81,163)"}, "r": [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5], "type": "area", "name": "11-14 m/s", "t": [0, 45, 90, 135, 180, 225, 270, 315]}], {"radialaxis": {"ticksuffix": "%"}, "title": "Wind Speed Distribution in Laurel, NE", "font": {"size": 16}, "orientation": 270, "legend": {"font": {"size": 16}}}, {"linkText": "Export to plot.ly", "showLink": true})</script></div>')[0];
popup_d63d578364d04568bda1b68bc0a870d7.setContent(html_deaec1fcc80d483faff605dcfa6691ff);
marker_7ecf53df703f455c9b8e9342784a4fde.bindPopup(popup_d63d578364d04568bda1b68bc0a870d7);
I include the popups like such:
for rowNum, rowValues in data.iterrows():
popup = folium.Html(polarHtml, script=True) # polarHtml is the html
folium.Marker([rowValues['latitude'], rowValues['longitude']], popup=folium.Popup(popup)).add_to(map_osm)
The map works fine if I just use simple HTML inside the popups. Does anybody know where this goes wrong?

I did "solve" it in the end. Although I am not a big fan of IFrames I ended up combining folium.HTML and folium.IFrame like so:
folium.Popup(folium.Html('aa<br>'+folium.IFrame(polarHtml, width='410px', height='410px').render(), script=True), max_width=2650)

Related

Make pins in symbol layer pixel perfect for clicking

I am using layer of symbols and want to make it possible as much as possible pixel perfect the icon be. How i can achieve this i am using custom maki icons for these symbols.
Is it somehow possible to increase the size of the icon but reduce the size of square for example?
Ive tried to play with size and paddings in the layer setup but this did not help.
My Layer looks like this:
"id": tableName + "-layer",
"type": "symbol",
"source": tableName,
"source-layer": tableName,
"layout": {
"icon-image": 'marker-15-svg',
"icon-size": ["interpolate",
["linear"], ["zoom"],
4, 1.3,
8, 1.5,
13, 2.5
],
"icon-allow-overlap": true,
"icon-padding": 0,
"icon-offset": [0, -3],
"icon-anchor": "center",
"symbol-z-order": "source"
},
"paint": {
"icon-color": materialSetColor,
"icon-opacity": {"stops": [[10, 0.7], [30, 1]]},
}

use JS Classes (CDN) with react (rewrite code), vanillaJS works

I would like to use JS classes from a cdn within a react component.
This is the cdn: https://cdn.jsdelivr.net/gh/Mikhus/canvas-gauges#gh-pages/download/2.1.7/all/gauge.min.js
I have already written the vanillaJS Code, that works well, however I have not idea how
to implement this with react.
The object that is drawn into a canvas is first instantiated with a set of different values,
then it is drawn on the canvas, then you can access the values from outside. I works well with vanillaJS!!
CDN or local file:
<script src="./lib/canvas-gauges.min.js"></script>
html canvas:
<canvas
id="barometer"
</canvas>
instantiating object and drawing it on the canvas:
const barometer = new RadialGauge({
renderTo: canvas,
title: 'hPa',
width: 400,
height: 400,
units: `${location}`,
minValue: 960,
maxValue: 1060,
majorTicks: [
"",
"970",
"980",
"990",
"1000",
"1010",
"1020",
"1030",
"1040",
"1050",
"",
],
minorTicks: 10,
ticksAngle: 270,
startAngle: 45,
strokeTicks: true,
highlights: [
{
"from": 960,
"to": 1005,
"color": "rgba(0,0,255,0.8)"
},
{
"from": 1005,
"to": 1023,
"color": "rgba(0, 151, 19, 0.3)"
},
{
"from": 1023,
"to": 1060,
"color": "rgba(241, 90, 34, 0.9)"
}
],
valueInt: 1,
valueDec: 0,
colorPlate: "beige",
colorMajorTicks: "#686868",
colorMinorTicks: "#686868",
colorTitle: "#000",
colorUnits: "#000",
colorNumbers: "#686868",
valueBox: true,
colorNeedleShadowUp: true,
colorNeedleShadowDown: true,
colorNeedle: "#f59042",
colorNeedleEnd: "#f59042",
colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
borderShadowWidth: 0,
borders: false,
borderInnerWidth: 0,
borderMiddleWidth: 0,
borderOuterWidth: 20,
colorBorderOuter: "silver",
colorBorderOuterEnd: "black",
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "dequint",
fontNumbers: "Arial",
fontTitle: "Arial",
fontUnits: "Arial",
fontValue: "Arial",
fontValueStyle: "italic",
fontNumbersSize: 16,
// fontNumbersStyle: "italic",
fontNumbersWeight: "bold",
fontTitleSize: 16,
fontUnitsSize: 16,
fontValueSize: 16,
animatedValue: true,
});
barometer.draw();
Then the values of that object can be accessed simply like this:
barometer.value = 1024;
Now, I would like to do the same thing with react!
There is also a node module called react-canvas-gauges, here I can make an import like this: import { RadialGauge, LinearGauge} from "react-canvas-gauges";
I can render then:
render() {
<RadialGauge
title= "hPa"
width = "400"... />
}
The point is, I figured out that I must update the value from "OUTSIDE", instantiating the object, drawing it on the canvas and then updating the value, and that is not possible (or against the philosophy of react) doing this with these JSX Components from "OUTSIDE"

Format donut chart title amcharts

I was wondering if there is a way to have css styling inside of this chart title.
chart.allLabels = [{
'text': "<strong style='color:#666;font-size:18px'>80</strong>",
'align': 'center',
'y': '100'
}];
This just shows as the literal string instead of styling the <strong> tag.
Is this possible?
Since labels on the chart are SVG nodes, they do not support HTML and related CSS.
Looking at your example, it seems that you need to apply the following to the whole label:
Make it bold
Set color to #666
Set font size to 18
All this is doable with label's properties:
chart.allLabels = [ {
"text": "80",
"align": "center",
"y": "100",
"bold": true,
"size": 18,
"color": "#666"
} ];
Another option is to use CSS, as #gerric suggested in a comment.

jQuery QRcode does not work with canvas

I'm using this library: https://larsjung.de/jquery-qrcode/ to draw a QR Code inside my canvas, but it doesn't work.
My code:
var a_canvas = document.getElementById("latoSinistro");
var context = a_canvas.getContext("2d");
context.font = "8px appMeFont";
context.textAlign="center";
context.fillText(dati.anagrafica[linguaInUso].prodName, 121, 93);
context.fillText(dati.anagrafica[linguaInUso].pointName, 121, 103);
$("#latoSinistro").qrcode({
"render": 'canvas',
"minVersion": 1,
"maxVersion": 10,
"ecLevel": 'M',
"left": 121,
"top": 130,
"fill": '#000',
"background": null,
"mode": 0,
"size": 100,
"color": "#000000",
"text": "www.app/cod/"+idProdotto
});
make sure you have declare in your view
<div id="latoSinistro"
</div>
make sure your var idProdotto value has been assigned to make qr code generate clearly

Refactoring d3js: multiple arcs & text blocks into tidy js functions

I am building a simple animated nav element with use of d3 (for practice).
However my code is horribly verbose because I am creating the same arc (with a few exceptions) 3 times and hard coding each one. As a beginner I am struggling to clean this up with javascript. Working verbose code here: http://tributary.io/inlet/7919286
In order to do so I created JSON object to represent the characteristics unique to each arc.
var data = {
"arcs": [
{
"id": 1,
"innerRadius": 100,
"outerRadius": 150,
"x": 45,
"dy": 45,
"text": "About"
},
{
"id": 2,
"innerRadius": 160,
"outerRadius": 210,
"x": 45,
"dy": -15,
"text": "Github"
},
{
"id": 3,
"innerRadius": 220,
"outerRadius": 270,
"x": 45,
"dy": -75,
"text": "Contact"
}
]
}
I have tried unsuccessfully to call data with here: http://tributary.io/inlet/8408617 , but it's broken and I need help. Thank you.
The idea is to, instead of appending elements explicitly, use the .selectAll(...).data(...).enter().append(...) pattern to do that. That means that you need to replace all the code where you're currently explicitly appending elements with this. For the paths, that would look like this:
canvas.selectAll("path.arc").data(data.arcs)
.enter().append("path")
.attr("class", "arc")
.attr("id", function(d, i) { return "path" + (i+1); });
The rest is a bit tedious, but not too difficult -- simply repeat for everything else. The result is here.

Categories