Карты данных - как показать значение в пузыре
Я пытаюсь вставить карту Португалии с помощью Datamaps, и мне нужно указать значение в пузыре, но я не могу.
Я хочу поместить значение в значение и всегда отображается не только при наведении. Я хочу значение внутри круга.
Может быть, я должен вернуть HTML для пузыря, но как? Я ищу об этом, но я не вижу ничего общего с.
var map = new Datamap({
element: document.getElementById('container'),
geographyConfig: {
defaultFill: '#FFFFFF',
borderColor: '#34BFC2',
highlightFillColor: '#34BFC2',
highlightBorderColor: '#34BFC2',
highlightBorderWidth: 3,
dataJson: '/js/prt.json'
},
fills: {
'MAJOR': '#2F323A',
'MEDIUM': '#0fa0fa',
'MINOR': '#bada55',
defaultFill: '#FFFFFF'
},
bubblesConfig: {
borderWidth: 2,
borderColor: '#2F323A',
popupOnHover: false,
radius: null,
popupTemplate: function(geography, data) {
return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';
},
fillOpacity: 1,
animate: true,
highlightOnHover: true,
highlightFillColor: '#2F323A',
highlightBorderColor: '#2F323A',
defaultFill: '#2F323A',
highlightBorderWidth: 3,
highlightFillOpacity: 1,
exitDelay: 100,
key: JSON.stringify
},
scope: 'prt',
setProjection: function(element, options) {
var projection, path;
projection = d3.geo.mercator()
.center([-8.00, 39.50])
.scale(4000)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
path = d3.geo.path().projection( projection );
return {path: path, projection: projection};
}
});
let bubbles = [
{
fillKey: "MAJOR",
latitude: 40.6738,
longitude: -8.4394,
radius: 12,
value: 10,
state: 'Aveiro'
},
{
fillKey: "MAJOR",
latitude: 41.2118,
longitude: -8.33114,
radius: 12,
value: 30,
state: 'Porto'
}
]
setTimeout(() => { // only start drawing bubbles on the map when map has rendered completely.
map.bubbles(bubbles, {
popupTemplate: function (geo, data) {
return `<div class="hoverinfo">city: ${data.state}, Valor: ${data.value}</div>`;
}
});
}, 1000);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://d3js.org/topojson.v1.js"></script>
<script src="https://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.none.min.js"></script>
<script src="https://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.prt.js"></script>
<!--<script src="https://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.all.min.js"></script>-->
</head>
<body>
<div id="container" style="position: relative; width: 300px; height: 600px;"></div>
<script>
var map = new Datamap({
element: document.getElementById('container'),
geographyConfig: {
defaultFill: '#FFFFFF',
borderColor: '#DD1C77',
highlightFillColor: '#DD1C77',
highlightBorderColor: '#DD1C77',
highlightBorderWidth: 3,
dataJson: '/js/prt.json'
},
fills: {
'MAJOR': '#DD1C77',
'MEDIUM': '#0fa0fa',
'MINOR': '#bada55',
defaultFill: '#FFFFFF'
},
bubblesConfig: {
borderWidth: 2,
borderColor: '#DD1C77',
popupOnHover: false,
radius: null,
popupTemplate: function(geography, data) {
return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';
},
fillOpacity: 1,
animate: true,
highlightOnHover: true,
highlightFillColor: '#DD1C77',
highlightBorderColor: '#DD1C77',
defaultFill: '#DD1C77',
highlightBorderWidth: 3,
highlightFillOpacity: 1,
exitDelay: 100,
key: JSON.stringify
},
scope: 'prt',
setProjection: function(element, options) {
var projection, path;
projection = d3.geo.mercator()
.center([-8.00, 39.50])
.scale(4000)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
path = d3.geo.path().projection( projection );
return {path: path, projection: projection};
}
});
let bubbles = [
{
fillKey: "MAJOR",
latitude: 40.6738,
longitude: -8.4394,
radius: 12,
value: 10,
state: 'Aveiro'
},
{
fillKey: "MAJOR",
latitude: 41.2118,
longitude: -8.33114,
radius: 12,
value: 30,
state: 'Porto'
}
]
setTimeout(() => { // only start drawing bubbles on the map when map has rendered completely.
map.bubbles(bubbles, {
popupTemplate: function (geo, data) {
return `<div class="hoverinfo">city: ${data.state}, Valor: ${data.value}</div>`;
}
});
}, 1000);
</script>
</body>
</html>Как я могу это сделать?
Спасибо