You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.4 KiB
54 lines
1.4 KiB
$(() => {
|
|
let markersData = [];
|
|
for(var r_idx in data['regions'])
|
|
{
|
|
var region = data['regions'][r_idx]
|
|
for(var p_idx in region.points)
|
|
{
|
|
var point = region.points[p_idx];
|
|
var loc = point.gps.split(',');
|
|
var lat = parseFloat(loc[0].trim())
|
|
var lon = parseFloat(loc[1].trim())
|
|
markersData.push({ location: [lat, lon], tooltip: { text: point.name, },}, );
|
|
}
|
|
}
|
|
|
|
const markerUrl = './img/map-marker.png';
|
|
|
|
const mapWidget = $('#map').dxMap({
|
|
provider: 'bing',
|
|
apiKey: {
|
|
bing: 'AnpoY0kAA4Kk5A045nQxyVbrlkNTgOuMVBitLxN_iLnZdtONf21HxUTzXwNIebES',
|
|
},
|
|
zoom: 11,
|
|
height: 440,
|
|
width: '100%',
|
|
controls: true,
|
|
markerIconSrc: markerUrl,
|
|
markers: markersData,
|
|
type: 'roadmap'
|
|
}).dxMap('instance');
|
|
|
|
$('#use-custom-markers').dxCheckBox({
|
|
value: true,
|
|
text: 'Use custom marker icons',
|
|
onValueChanged(data) {
|
|
mapWidget.option('markers', markersData);
|
|
mapWidget.option('markerIconSrc', data.value ? markerUrl : null);
|
|
},
|
|
});
|
|
|
|
$('#show-tooltips').dxButton({
|
|
text: 'Show all tooltips',
|
|
onClick() {
|
|
const newMarkers = $.map(markersData, (item) => $.extend(
|
|
true,
|
|
{},
|
|
item,
|
|
{ tooltip: { isShown: true } },
|
|
));
|
|
|
|
mapWidget.option('markers', newMarkers);
|
|
},
|
|
});
|
|
}); |