I am using Leaflet Routing Machine to create map route.
My requirement is, if there are multiple locations like A, B, C, D, E. I am getting the length of svg path from A to E. But i need length form A to B, B to C, C to D, D to E. Please help someone.
click to see image
Red color line is svg path. So, when i click on any marker then i need length from basel to that marker. i mean, i need to get length from basel to neuchatel or basel to bern or neuchatel to bern, etc.
var routeControl = L.Routing.control({
waypoints: waypoints,
reverseWaypoints: false,
lineOptions: {
styles: [{color: 'red', opacity: 1, weight: 3}]
},
geocoder: L.Control.Geocoder.nominatim({
serviceUrl: 'http://localhost:8084/'
}),
createMarker: function(i, wp, nWps) {
console.log(wp)
let custom_icon = L.divIcon({
iconSize: [100, 20],
popupAnchor: [-30, -18],
shadowUrl: '',
html: '<div class="notification '+wp.name+'" data-pathid="'+(i+1)+'" style="color: #000;background-color: transparent;"><img src="img/blue.png"><span class="city-name">' + latlng[i].name + '</span></div>'
})
marker = L.marker(
[wp.latLng.lat, wp.latLng.lng],
{
icon: custom_icon
})
.bindPopup(latlng[i].name)
.openPopup()
.addTo(map);
// marker.on('click', onMarkerClick);
}
}).addTo(map);
Related
I want to add a custom tooltip to my charts by using the default one and for example just append some text to it.
Is this even possible, or to i have to create it all by myself with html?
data= google.visualization.arrayToDataTable([
["Element", "Duration ", { role: "style" }, { role: 'tooltip' }],
["Count", 23515, "orange", ???],
]);
How it is (Default Tooltip):
How i want it:
Append the duration as readable time, but still keep the default tooltip
it's not possible to add content to the default tooltip via standard functionality
to do so requires manipulating the tooltip directly when it is shown
the following working snippet listens for the 'onmouseover' event on the chart
then modifies the tooltip (if found)
using the row # passed as a property of the event argument
keep in mind, the style (font-size) will change according to the size of the chart
the snippet copies the style from the existing lines
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'Element', type: 'string'},
{label: 'Duration', type: 'number'},
{role: 'style', type: 'string'}
],
rows: [
{c:[{v: 'Amazon Elastic Transcoder'}, {v: 3116, f: '3,116 s'}, {v: 'orange'}]},
{c:[{v: 'Amazon Elastic Transcoder'}, {v: 8523, f: '8,523 s'}, {v: 'cyan'}]}
]
});
var options = {
backgroundColor: 'transparent',
legend: 'none',
theme: 'maximized',
hAxis: {
textPosition: 'none'
},
tooltip: {
isHtml: true
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'onmouseover', function (props) {
var duration = dataTable.getValue(props.row, 1);
var hours = parseInt( duration / 3600 ) % 24;
var minutes = parseInt( duration / 60 ) % 60;
var seconds = duration % 60;
var tooltip = container.getElementsByTagName('ul');
var tooltipLabel = container.getElementsByTagName('span');
if (tooltip.length > 0) {
// increase tooltip height
tooltip[0].parentNode.style.height = '95px';
// add new li element
var newLine = tooltip[0].appendChild(document.createElement('li'));
newLine.className = 'google-visualization-tooltip-item';
// add span for label
var lineLabel = newLine.appendChild(document.createElement('span'));
lineLabel.style.fontFamily = tooltipLabel[0].style.fontFamily;
lineLabel.style.fontSize = tooltipLabel[0].style.fontSize;
lineLabel.style.color = tooltipLabel[0].style.color;
lineLabel.style.margin = tooltipLabel[0].style.margin;
lineLabel.style.textDecoration = tooltipLabel[0].style.textDecoration;
lineLabel.innerHTML = dataTable.getColumnLabel(1) + ': ';
// add span for value
var lineValue = newLine.appendChild(document.createElement('span'));
lineValue.style.fontFamily = tooltipLabel[0].style.fontFamily;
lineValue.style.fontSize = tooltipLabel[0].style.fontSize;
lineValue.style.fontWeight = tooltipLabel[0].style.fontWeight;
lineValue.style.color = tooltipLabel[0].style.color;
lineValue.style.margin = tooltipLabel[0].style.margin;
lineValue.style.textDecoration = tooltipLabel[0].style.textDecoration;
lineValue.innerHTML = hours + 'h ' + minutes + 'm ' + seconds + 's';
}
});
chart.draw(dataTable, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
to add content to the tooltip using standard functionality requires replacing the tooltip altogether
the best result will be using html tooltips
to use html tooltips, two things must be in place
first, need html column property on tooltip column
{role: 'tooltip', type: 'string', p: {html: true}}
next, need tooltip.isHtml: true in the config options
the tooltip can be provided directly in the data,
or add dynamically, as in the following snippet...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'Element', type: 'string'},
{label: 'Duration', type: 'number'},
{role: 'style', type: 'string'}
],
rows: [
{c:[{v: 'Amazon Elastic Transcoder'}, {v: 3116, f: '3,116 s'}, {v: 'orange'}]},
{c:[{v: 'Amazon Elastic Transcoder'}, {v: 8523, f: '8,523 s'}, {v: 'cyan'}]}
]
});
dataTable.addColumn({role: 'tooltip', type: 'string', p: {html: true}});
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
var duration = dataTable.getValue(i, 1);
var hours = parseInt( duration / 3600 ) % 24;
var minutes = parseInt( duration / 60 ) % 60;
var seconds = duration % 60;
var tooltip = '<div class="ggl-tooltip"><span>' +
dataTable.getValue(i, 0) + '</span><div>' +
dataTable.getColumnLabel(1) + ': <span>' +
dataTable.getFormattedValue(i, 1) + '</span></div><div>' +
dataTable.getColumnLabel(1) + ': <span>' +
hours + 'h ' + minutes + 'm ' + seconds + 's</span></div></div>';
dataTable.setValue(i, 3, tooltip);
}
var options = {
backgroundColor: 'transparent',
legend: 'none',
theme: 'maximized',
hAxis: {
textPosition: 'none'
},
tooltip: {
//trigger: 'selection',
isHtml: true
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(dataTable, options);
},
packages:['corechart']
});
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 10pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip div {
padding-top: 6px;
}
.ggl-tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
How can i display different labels under each column and also have another label for the entire group?
As you can see in the picture below i want to use fontawesome icons for each column but another label for the main group. I found other answers how to use fa icons but don't know how to position them under each bar.
The trendlines which connect distinct columns are not so important but would be great if i can find out how to add them also.
Also the chart needs to be scrollable as it can hold lots of data and the labels need to be shown. I found some examples with scroll as well.
Any info is highly appreciated. Or are there any other open source chart frameworks in which i could implement this or something similar to fit my needs?
using google charts...
on the chart's 'ready' event,
you can use chart method --> getChartLayoutInterface()
var chartLayout = chart.getChartLayoutInterface();
the interface has a method --> getBoundingBox()
which will return the position of requested chart element
to get the position of a bar...
var barBounds = chartLayout.getBoundingBox('bar#0#0');
where the first #0 is the series, and the second is the row,
'bar#0#0' would get the first bar on the first row
we can also get the position of the axis label...
var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#0');
we can use a combination of the bar and label bounds to position the icon
we want the left position from the bar, and the top position from the label
see following working snippet,
a column property is used to store the icon name,
the x-axis labels are used for the group
once the icon is in position, the axis label is moved down to make room
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'x', type: 'string'},
{label: 'file', type: 'number', p: {icon: 'fa-file'}},
{label: 'database', type: 'number', p: {icon: 'fa-database'}},
{label: 'random', type: 'number', p: {icon: 'fa-random'}},
],
rows: [
{c:[{v: 'Label 1'}, {v: 11}, {v: 6}, {v: 15}]},
{c:[{v: 'Label 2'}, {v: 8}, {v: null}, {v: 12}]},
{c:[{v: 'Label 3'}, {v: 6}, {v: 8}, {v: 18}]},
{c:[{v: 'Label 4'}, {v: null}, {v: 1}, {v: 16}]},
]
});
var options = {
bar: {
groupWidth: '50%',
width: 20
},
colors: ['#ffc107', '#d32f2f', '#00bcd4'],
height: 600,
legend: 'none',
title: 'Capacities',
width: 1000,
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
// initialize bounds variables
var axisLabels = container.getElementsByTagName('text');
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var containerBounds = container.getBoundingClientRect();
var labelIndex;
// add icons
for (var r = 0; r < data.getNumberOfRows(); r++) {
var barBounds;
var icon;
var iconBounds;
var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + r);
for (var c = 1; c < data.getNumberOfColumns(); c++) {
barBounds = chartLayout.getBoundingBox('bar#' + (c - 1) + '#' + r);
if (barBounds !== null) {
icon = container.appendChild(document.createElement('i'));
icon.className = 'fa ' + data.getColumnProperty(c, 'icon');
icon.style.position = 'absolute';
iconBounds = icon.getBoundingClientRect();
icon.style.top = (containerBounds.top + labelBounds.top) + 'px';
icon.style.left = (barBounds.left + containerBounds.left + (barBounds.width / 2) - (iconBounds.width / 2)) + 'px';
}
}
// move axis label down
labelIndex = -1;
Array.prototype.forEach.call(axisLabels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
labelIndex++;
if (labelIndex === r) {
label.setAttribute('y', (parseFloat(label.getAttribute('y')) + (iconBounds.height * 2)));
}
}
});
}
});
chart.draw(data, options);
});
i {
color: #00bcd4;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I want to add a custom tooltip to my charts by using the default one and for example just append some text to it.
Is this even possible, or to i have to create it all by myself with html?
data= google.visualization.arrayToDataTable([
["Element", "Duration ", { role: "style" }, { role: 'tooltip' }],
["Count", 23515, "orange", ???],
]);
How it is (Default Tooltip):
How i want it:
Append the duration as readable time, but still keep the default tooltip
it's not possible to add content to the default tooltip via standard functionality
to do so requires manipulating the tooltip directly when it is shown
the following working snippet listens for the 'onmouseover' event on the chart
then modifies the tooltip (if found)
using the row # passed as a property of the event argument
keep in mind, the style (font-size) will change according to the size of the chart
the snippet copies the style from the existing lines
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'Element', type: 'string'},
{label: 'Duration', type: 'number'},
{role: 'style', type: 'string'}
],
rows: [
{c:[{v: 'Amazon Elastic Transcoder'}, {v: 3116, f: '3,116 s'}, {v: 'orange'}]},
{c:[{v: 'Amazon Elastic Transcoder'}, {v: 8523, f: '8,523 s'}, {v: 'cyan'}]}
]
});
var options = {
backgroundColor: 'transparent',
legend: 'none',
theme: 'maximized',
hAxis: {
textPosition: 'none'
},
tooltip: {
isHtml: true
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'onmouseover', function (props) {
var duration = dataTable.getValue(props.row, 1);
var hours = parseInt( duration / 3600 ) % 24;
var minutes = parseInt( duration / 60 ) % 60;
var seconds = duration % 60;
var tooltip = container.getElementsByTagName('ul');
var tooltipLabel = container.getElementsByTagName('span');
if (tooltip.length > 0) {
// increase tooltip height
tooltip[0].parentNode.style.height = '95px';
// add new li element
var newLine = tooltip[0].appendChild(document.createElement('li'));
newLine.className = 'google-visualization-tooltip-item';
// add span for label
var lineLabel = newLine.appendChild(document.createElement('span'));
lineLabel.style.fontFamily = tooltipLabel[0].style.fontFamily;
lineLabel.style.fontSize = tooltipLabel[0].style.fontSize;
lineLabel.style.color = tooltipLabel[0].style.color;
lineLabel.style.margin = tooltipLabel[0].style.margin;
lineLabel.style.textDecoration = tooltipLabel[0].style.textDecoration;
lineLabel.innerHTML = dataTable.getColumnLabel(1) + ': ';
// add span for value
var lineValue = newLine.appendChild(document.createElement('span'));
lineValue.style.fontFamily = tooltipLabel[0].style.fontFamily;
lineValue.style.fontSize = tooltipLabel[0].style.fontSize;
lineValue.style.fontWeight = tooltipLabel[0].style.fontWeight;
lineValue.style.color = tooltipLabel[0].style.color;
lineValue.style.margin = tooltipLabel[0].style.margin;
lineValue.style.textDecoration = tooltipLabel[0].style.textDecoration;
lineValue.innerHTML = hours + 'h ' + minutes + 'm ' + seconds + 's';
}
});
chart.draw(dataTable, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
to add content to the tooltip using standard functionality requires replacing the tooltip altogether
the best result will be using html tooltips
to use html tooltips, two things must be in place
first, need html column property on tooltip column
{role: 'tooltip', type: 'string', p: {html: true}}
next, need tooltip.isHtml: true in the config options
the tooltip can be provided directly in the data,
or add dynamically, as in the following snippet...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'Element', type: 'string'},
{label: 'Duration', type: 'number'},
{role: 'style', type: 'string'}
],
rows: [
{c:[{v: 'Amazon Elastic Transcoder'}, {v: 3116, f: '3,116 s'}, {v: 'orange'}]},
{c:[{v: 'Amazon Elastic Transcoder'}, {v: 8523, f: '8,523 s'}, {v: 'cyan'}]}
]
});
dataTable.addColumn({role: 'tooltip', type: 'string', p: {html: true}});
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
var duration = dataTable.getValue(i, 1);
var hours = parseInt( duration / 3600 ) % 24;
var minutes = parseInt( duration / 60 ) % 60;
var seconds = duration % 60;
var tooltip = '<div class="ggl-tooltip"><span>' +
dataTable.getValue(i, 0) + '</span><div>' +
dataTable.getColumnLabel(1) + ': <span>' +
dataTable.getFormattedValue(i, 1) + '</span></div><div>' +
dataTable.getColumnLabel(1) + ': <span>' +
hours + 'h ' + minutes + 'm ' + seconds + 's</span></div></div>';
dataTable.setValue(i, 3, tooltip);
}
var options = {
backgroundColor: 'transparent',
legend: 'none',
theme: 'maximized',
hAxis: {
textPosition: 'none'
},
tooltip: {
//trigger: 'selection',
isHtml: true
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(dataTable, options);
},
packages:['corechart']
});
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 10pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip div {
padding-top: 6px;
}
.ggl-tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am working with a mapbox map on a web page, and have everything working fine with the map and dropping pins, but cant get custom markers working.
My code that is working for dropping a pin is:
L.mapbox.featureLayer({
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description', 'marker-size':'large', 'marker-color':'#cc0000', 'marker-symbol':'building' }
}).addTo(map);
This works and populates the map with my locations.
I have used this code to try and add a custom marker, but this doesnt work:
L.mapbox.featureLayer({
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description', icon: { iconUrl: 'https://www.mapbox.com/mapbox.js/assets/images/astronaut1.png', iconSize: [50, 50], iconAnchor: [25, 25], popupAnchor: [0, -25], className: 'dot' } }
}).addTo(map);
I also have multiple pins and other layers on the map that can be turned on or off, and everything is working well, I just cant get this custom marker to work at all!
Does anyone have custom markers working with code like this on mapbox?
I don't think you can specify custom marker options like icon like that in the main GeoJSON properties hash.
I believe you would need to do something like the below instead.
var customIcon = new L.Icon({iconUrl: 'https://www.mapbox.com/mapbox.js/assets/images/astronaut1.png', iconSize: [50, 50], iconAnchor: [25, 25], popupAnchor: [0, -25], className: 'dot' })
L.mapbox.featureLayer(
{
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description'}
},
{
pointToLayer: function(feature,latLng) { return L.marker(latLng, {icon: customIcon}}
}).addTo(map);
See https://www.mapbox.com/mapbox.js/api/v2.2.2/l-mapbox-featurelayer/
I'm using the LeafLet MarkerCluster plugin ( https://github.com/Leaflet/Leaflet.markercluster )
Does anyone know if it is possible to color the MarkerCluster Spiderfy line color dynamically?
For example, I can set other things dynamically like this:
markersFeatureLayer.eachLayer(function(layer) {
layer.feature.properties.line = 'green';
layer.setIcon(L.MyMarkers.icon({
icon: layer.feature.properties.myData.icon,
markerColor: layer.feature.properties['icon-color'],
iconColor: '#FFFFFF'
}));
mapClusterLayer.addLayer(layer);
});
Or this
mapClusterLayer = new L.MarkerClusterGroup({
maxClusterRadius: 2,
spiderfyDistanceMultiplier: 3,
removeOutsideVisibleBounds: false,
iconCreateFunction: function(cluster) {
return new L.DivIcon({
iconSize: [30, 30],
html: '<div style="text-align:center;color:#fff;background:' +
'green' + '">' + cluster.getChildCount() + '</div>',
});
}
});
I want each spider line to be equal to markerColor. So each will have a unique color.
Any ideas?