Map widgets improvements.
This commit is contained in:
Igor Kulikov
parent
3e25997ba2
commit
9e6acb7ede
@ -77,7 +77,7 @@
|
||||
</td>
|
||||
<td md-cell ng-if="vm.displayDetails" class="tb-action-cell">
|
||||
<md-button class="md-icon-button" aria-label="{{ 'alarm.details' | translate }}"
|
||||
ng-click="vm.openAlarmDetails($event, alarm)">
|
||||
ng-click="vm.openAlarmDetails($event, alarm)" ng-disabled="$root.loading">
|
||||
<md-icon aria-label="{{ 'alarm.details' | translate }}" class="material-icons">more_horiz</md-icon>
|
||||
<md-tooltip md-direction="top">
|
||||
{{ 'alarm.details' | translate }}
|
||||
@ -90,7 +90,7 @@
|
||||
width: vm.actionCellDescriptors.length*36+'px'}">
|
||||
<md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
|
||||
aria-label="{{ actionDescriptor.displayName }}"
|
||||
ng-click="vm.onActionButtonClick($event, alarm, actionDescriptor)">
|
||||
ng-click="vm.onActionButtonClick($event, alarm, actionDescriptor)" ng-disabled="$root.loading">
|
||||
<md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
|
||||
<md-tooltip md-direction="top">
|
||||
{{ actionDescriptor.displayName }}
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
width: vm.actionCellDescriptors.length*36+'px'}">
|
||||
<md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
|
||||
aria-label="{{ actionDescriptor.displayName }}"
|
||||
ng-click="vm.onActionButtonClick($event, entity, actionDescriptor)">
|
||||
ng-click="vm.onActionButtonClick($event, entity, actionDescriptor)" ng-disabled="$root.loading">
|
||||
<md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
|
||||
<md-tooltip md-direction="top">
|
||||
{{ actionDescriptor.displayName }}
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
var gmGlobals = {
|
||||
loadingGmId: null,
|
||||
gmApiKeys: {}
|
||||
@ -151,17 +150,28 @@ export default class TbGoogleMap {
|
||||
|
||||
/* eslint-disable no-undef */
|
||||
updateMarkerColor(marker, color) {
|
||||
var pinColor = color.substr(1);
|
||||
var pinImage = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
|
||||
new google.maps.Size(21, 34),
|
||||
new google.maps.Point(0,0),
|
||||
new google.maps.Point(10, 34));
|
||||
marker.setIcon(pinImage);
|
||||
this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
|
||||
marker.setIcon(iconInfo.icon);
|
||||
});
|
||||
}
|
||||
/* eslint-enable no-undef */
|
||||
|
||||
/* eslint-disable no-undef */
|
||||
updateMarkerImage(marker, settings, image, maxSize) {
|
||||
updateMarkerIcon(marker, settings) {
|
||||
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
||||
marker.setIcon(iconInfo.icon);
|
||||
if (settings.showLabel) {
|
||||
marker.set('labelAnchor', new google.maps.Point(100, iconInfo.size[1] + 20));
|
||||
}
|
||||
});
|
||||
}
|
||||
/* eslint-disable no-undef */
|
||||
|
||||
/* eslint-disable no-undef */
|
||||
createMarkerIcon(marker, settings, onMarkerIconReady) {
|
||||
var currentImage = settings.currentImage;
|
||||
var gMap = this;
|
||||
if (currentImage && currentImage.url) {
|
||||
var testImage = document.createElement('img'); // eslint-disable-line
|
||||
testImage.style.visibility = 'hidden';
|
||||
testImage.onload = function() {
|
||||
@ -170,61 +180,70 @@ export default class TbGoogleMap {
|
||||
var aspect = testImage.width / testImage.height;
|
||||
document.body.removeChild(testImage); //eslint-disable-line
|
||||
if (aspect > 1) {
|
||||
width = maxSize;
|
||||
height = maxSize / aspect;
|
||||
width = currentImage.size;
|
||||
height = currentImage.size / aspect;
|
||||
} else {
|
||||
width = maxSize * aspect;
|
||||
height = maxSize;
|
||||
width = currentImage.size * aspect;
|
||||
height = currentImage.size;
|
||||
}
|
||||
var pinImage = {
|
||||
url: image,
|
||||
var icon = {
|
||||
url: currentImage.url,
|
||||
scaledSize : new google.maps.Size(width, height)
|
||||
}
|
||||
marker.setIcon(pinImage);
|
||||
if (settings.showLabel) {
|
||||
marker.set('labelAnchor', new google.maps.Point(100, height + 20));
|
||||
}
|
||||
}
|
||||
};
|
||||
var iconInfo = {
|
||||
size: [width, height],
|
||||
icon: icon
|
||||
};
|
||||
onMarkerIconReady(iconInfo);
|
||||
};
|
||||
testImage.onerror = function() {
|
||||
gMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
||||
};
|
||||
document.body.appendChild(testImage); //eslint-disable-line
|
||||
testImage.src = image;
|
||||
testImage.src = currentImage.url;
|
||||
} else {
|
||||
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
||||
}
|
||||
}
|
||||
/* eslint-enable no-undef */
|
||||
|
||||
/* eslint-disable no-undef */
|
||||
createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
|
||||
var pinColor = color.substr(1);
|
||||
var icon = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|" + pinColor,
|
||||
new google.maps.Size(40, 37),
|
||||
new google.maps.Point(0,0),
|
||||
new google.maps.Point(10, 37));
|
||||
var iconInfo = {
|
||||
size: [40, 37],
|
||||
icon: icon
|
||||
};
|
||||
onMarkerIconReady(iconInfo);
|
||||
}
|
||||
/* eslint-enable no-undef */
|
||||
|
||||
/* eslint-disable no-undef */
|
||||
createMarker(location, settings, onClickListener, markerArgs) {
|
||||
var height = 34;
|
||||
var pinColor = settings.color.substr(1);
|
||||
var pinImage = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
|
||||
new google.maps.Size(21, 34),
|
||||
new google.maps.Point(0,0),
|
||||
new google.maps.Point(10, 34));
|
||||
var pinShadow = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_shadow",
|
||||
new google.maps.Size(40, 37),
|
||||
new google.maps.Point(0, 0),
|
||||
new google.maps.Point(12, 35));
|
||||
var marker;
|
||||
if (settings.showLabel) {
|
||||
marker = new MarkerWithLabel({
|
||||
position: location,
|
||||
map: this.map,
|
||||
icon: pinImage,
|
||||
shadow: pinShadow,
|
||||
labelContent: '<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
|
||||
labelClass: "tb-labels",
|
||||
labelAnchor: new google.maps.Point(100, height + 20)
|
||||
labelClass: "tb-labels"
|
||||
});
|
||||
} else {
|
||||
marker = new google.maps.Marker({
|
||||
position: location,
|
||||
map: this.map,
|
||||
icon: pinImage,
|
||||
shadow: pinShadow
|
||||
});
|
||||
}
|
||||
|
||||
if (settings.useMarkerImage) {
|
||||
this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
|
||||
var gMap = this;
|
||||
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
||||
marker.setIcon(iconInfo.icon);
|
||||
if (settings.showLabel) {
|
||||
marker.set('labelAnchor', new google.maps.Point(100, iconInfo.size[1] + 20));
|
||||
}
|
||||
marker.setMap(gMap.map);
|
||||
});
|
||||
|
||||
if (settings.displayTooltip) {
|
||||
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import * as L from 'leaflet';
|
||||
|
||||
@ -229,20 +228,12 @@ export default class TbImageMap {
|
||||
}
|
||||
|
||||
updateMarkerColor(marker, color) {
|
||||
var pinColor = color.substr(1);
|
||||
var icon = L.icon({
|
||||
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
|
||||
iconSize: [21, 34],
|
||||
iconAnchor: [10, 34],
|
||||
popupAnchor: [0, -34],
|
||||
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
|
||||
shadowSize: [40, 37],
|
||||
shadowAnchor: [12, 35]
|
||||
this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
|
||||
marker.setIcon(iconInfo.icon);
|
||||
});
|
||||
marker.setIcon(icon);
|
||||
}
|
||||
|
||||
updateMarkerImage(marker, settings, image, maxSize) {
|
||||
/*updateMarkerImage(marker, settings, image, maxSize) {
|
||||
var testImage = document.createElement('img'); // eslint-disable-line
|
||||
testImage.style.visibility = 'hidden';
|
||||
testImage.onload = function() {
|
||||
@ -273,39 +264,97 @@ export default class TbImageMap {
|
||||
}
|
||||
document.body.appendChild(testImage); //eslint-disable-line
|
||||
testImage.src = image;
|
||||
}*/
|
||||
|
||||
updateMarkerIcon(marker, settings) {
|
||||
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
||||
marker.setIcon(iconInfo.icon);
|
||||
if (settings.showLabel) {
|
||||
marker.unbindTooltip();
|
||||
marker.tooltipOffset = [0, -iconInfo.size[1] * marker.offsetY + 10];
|
||||
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
|
||||
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createMarker(position, settings, onClickListener, markerArgs) {
|
||||
var height = 34;
|
||||
var pinColor = settings.color.substr(1);
|
||||
createMarkerIcon(marker, settings, onMarkerIconReady) {
|
||||
var currentImage = settings.currentImage;
|
||||
var opMap = this;
|
||||
if (currentImage && currentImage.url) {
|
||||
var testImage = document.createElement('img'); // eslint-disable-line
|
||||
testImage.style.visibility = 'hidden';
|
||||
testImage.onload = function() {
|
||||
var width;
|
||||
var height;
|
||||
var aspect = testImage.width / testImage.height;
|
||||
document.body.removeChild(testImage); //eslint-disable-line
|
||||
if (aspect > 1) {
|
||||
width = currentImage.size;
|
||||
height = currentImage.size / aspect;
|
||||
} else {
|
||||
width = currentImage.size * aspect;
|
||||
height = currentImage.size;
|
||||
}
|
||||
var icon = L.icon({
|
||||
iconUrl: currentImage.url,
|
||||
iconSize: [width, height],
|
||||
iconAnchor: [marker.offsetX * width, marker.offsetY * height],
|
||||
popupAnchor: [0, -height]
|
||||
});
|
||||
var iconInfo = {
|
||||
size: [width, height],
|
||||
icon: icon
|
||||
};
|
||||
onMarkerIconReady(iconInfo);
|
||||
};
|
||||
testImage.onerror = function() {
|
||||
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
||||
};
|
||||
document.body.appendChild(testImage); //eslint-disable-line
|
||||
testImage.src = currentImage.url;
|
||||
} else {
|
||||
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
||||
}
|
||||
}
|
||||
|
||||
createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
|
||||
var pinColor = color.substr(1);
|
||||
var icon = L.icon({
|
||||
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
|
||||
iconSize: [21, 34],
|
||||
iconAnchor: [21 * settings.markerOffsetX, 34 * settings.markerOffsetY],
|
||||
iconAnchor: [21 * marker.offsetX, 34 * marker.offsetY],
|
||||
popupAnchor: [0, -34],
|
||||
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
|
||||
shadowSize: [40, 37],
|
||||
shadowAnchor: [12, 35]
|
||||
});
|
||||
var iconInfo = {
|
||||
size: [21, 34],
|
||||
icon: icon
|
||||
};
|
||||
onMarkerIconReady(iconInfo);
|
||||
}
|
||||
|
||||
createMarker(position, settings, onClickListener, markerArgs) {
|
||||
var pos = this.posFunction(position.x, position.y);
|
||||
var x = pos.x * this.width;
|
||||
var y = pos.y * this.height;
|
||||
var location = this.pointToLatLng(x, y);
|
||||
var marker = L.marker(location, {icon: icon}).addTo(this.map);
|
||||
var marker = L.marker(location, {});//.addTo(this.map);
|
||||
marker.position = position;
|
||||
marker.offsetX = settings.markerOffsetX;
|
||||
marker.offsetY = settings.markerOffsetY;
|
||||
|
||||
var opMap = this;
|
||||
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
||||
marker.setIcon(iconInfo.icon);
|
||||
if (settings.showLabel) {
|
||||
marker.tooltipOffset = [0, -height * marker.offsetY + 10];
|
||||
marker.tooltipOffset = [0, -iconInfo.size[1] * marker.offsetY + 10];
|
||||
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
|
||||
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
|
||||
}
|
||||
|
||||
if (settings.useMarkerImage) {
|
||||
this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
|
||||
}
|
||||
marker.addTo(opMap.map);
|
||||
});
|
||||
|
||||
if (settings.displayTooltip) {
|
||||
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
import TbGoogleMap from './google-map';
|
||||
@ -274,9 +273,13 @@ export default class TbMapWidget {
|
||||
if (!this.locationsSettings[i].useMarkerImageFunction &&
|
||||
angular.isDefined(configuredLocationsSettings[i].markerImage) &&
|
||||
configuredLocationsSettings[i].markerImage.length > 0) {
|
||||
this.locationsSettings[i].markerImage = configuredLocationsSettings[i].markerImage;
|
||||
this.locationsSettings[i].useMarkerImage = true;
|
||||
this.locationsSettings[i].markerImageSize = configuredLocationsSettings[i].markerImageSize || 34;
|
||||
var url = this.ctx.settings.markerImage;
|
||||
var size = this.ctx.settings.markerImageSize || 34;
|
||||
this.locationSettings.currentImage = {
|
||||
url: url,
|
||||
size: size
|
||||
};
|
||||
}
|
||||
|
||||
if (this.drawRoutes) {
|
||||
@ -380,17 +383,41 @@ export default class TbMapWidget {
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocationMarkerImage(location, dataMap) {
|
||||
function updateLocationMarkerIcon(location, dataMap) {
|
||||
var image = calculateLocationMarkerImage(location, dataMap);
|
||||
if (image != null && (!location.settings.calculatedImage || !angular.equals(location.settings.calculatedImage, image))) {
|
||||
tbMap.map.updateMarkerImage(location.marker, location.settings, image.url, image.size);
|
||||
location.settings.calculatedImage = image;
|
||||
if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
|
||||
location.settings.currentImage = image;
|
||||
tbMap.map.updateMarkerIcon(location.marker, location.settings);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocationStyle(location, dataMap) {
|
||||
updateLocationColor(location, dataMap);
|
||||
updateLocationMarkerImage(location, dataMap);
|
||||
updateLocationMarkerIcon(location, dataMap);
|
||||
}
|
||||
|
||||
function createOrUpdateLocationMarker(location, markerLocation, dataMap) {
|
||||
var changed = false;
|
||||
if (!location.marker) {
|
||||
var image = calculateLocationMarkerImage(location, dataMap);
|
||||
if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
|
||||
location.settings.currentImage = image;
|
||||
}
|
||||
location.marker = tbMap.map.createMarker(markerLocation, location.settings,
|
||||
function() {
|
||||
tbMap.callbacks.onLocationClick(location);
|
||||
}
|
||||
);
|
||||
tbMap.markers.push(location.marker);
|
||||
changed = true;
|
||||
} else {
|
||||
var prevPosition = tbMap.map.getMarkerPosition(location.marker);
|
||||
if (!prevPosition.equals(markerLocation)) {
|
||||
tbMap.map.setMarkerPosition(location.marker, markerLocation);
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
return changed;
|
||||
}
|
||||
|
||||
function updateLocation(location, data, dataMap) {
|
||||
@ -413,15 +440,7 @@ export default class TbMapWidget {
|
||||
}
|
||||
if (latLngs.length > 0) {
|
||||
var markerLocation = latLngs[latLngs.length-1];
|
||||
if (!location.marker) {
|
||||
location.marker = tbMap.map.createMarker(markerLocation, location.settings,
|
||||
function() {
|
||||
tbMap.callbacks.onLocationClick(location);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
tbMap.map.setMarkerPosition(location.marker, markerLocation);
|
||||
}
|
||||
createOrUpdateLocationMarker(location, markerLocation, dataMap);
|
||||
}
|
||||
if (!location.polyline) {
|
||||
location.polyline = tbMap.map.createPolyline(latLngs, location.settings);
|
||||
@ -439,18 +458,8 @@ export default class TbMapWidget {
|
||||
lat = latData[latData.length-1][1];
|
||||
lng = lngData[lngData.length-1][1];
|
||||
latLng = tbMap.map.createLatLng(lat, lng);
|
||||
if (!location.marker) {
|
||||
location.marker = tbMap.map.createMarker(latLng, location.settings, function() {
|
||||
tbMap.callbacks.onLocationClick(location);
|
||||
});
|
||||
tbMap.markers.push(location.marker);
|
||||
if (createOrUpdateLocationMarker(location, latLng, dataMap)) {
|
||||
locationChanged = true;
|
||||
} else {
|
||||
var prevPosition = tbMap.map.getMarkerPosition(location.marker);
|
||||
if (!prevPosition.equals(latLng)) {
|
||||
tbMap.map.setMarkerPosition(location.marker, latLng);
|
||||
locationChanged = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
updateLocationStyle(location, dataMap);
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
import TbGoogleMap from './google-map';
|
||||
@ -159,9 +158,13 @@ export default class TbMapWidgetV2 {
|
||||
if (!this.locationSettings.useMarkerImageFunction &&
|
||||
angular.isDefined(this.ctx.settings.markerImage) &&
|
||||
this.ctx.settings.markerImage.length > 0) {
|
||||
this.locationSettings.markerImage = this.ctx.settings.markerImage;
|
||||
this.locationSettings.useMarkerImage = true;
|
||||
this.locationSettings.markerImageSize = this.ctx.settings.markerImageSize || 34;
|
||||
var url = this.ctx.settings.markerImage;
|
||||
var size = this.ctx.settings.markerImageSize || 34;
|
||||
this.locationSettings.currentImage = {
|
||||
url: url,
|
||||
size: size
|
||||
};
|
||||
}
|
||||
|
||||
if (this.drawRoutes) {
|
||||
@ -235,10 +238,10 @@ export default class TbMapWidgetV2 {
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocationMarkerImage(location, image) {
|
||||
if (image && (!location.settings.calculatedImage || !angular.equals(location.settings.calculatedImage, image))) {
|
||||
tbMap.map.updateMarkerImage(location.marker, location.settings, image.url, image.size);
|
||||
location.settings.calculatedImage = image;
|
||||
function updateLocationMarkerIcon(location, image) {
|
||||
if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
|
||||
location.settings.currentImage = image;
|
||||
tbMap.map.updateMarkerIcon(location.marker, location.settings);
|
||||
}
|
||||
}
|
||||
|
||||
@ -247,7 +250,31 @@ export default class TbMapWidgetV2 {
|
||||
var color = calculateLocationColor(location, dataMap);
|
||||
var image = calculateLocationMarkerImage(location, dataMap);
|
||||
updateLocationColor(location, color, image);
|
||||
updateLocationMarkerImage(location, image);
|
||||
updateLocationMarkerIcon(location, image);
|
||||
}
|
||||
|
||||
function createOrUpdateLocationMarker(location, markerLocation, dataMap) {
|
||||
var changed = false;
|
||||
if (!location.marker) {
|
||||
var image = calculateLocationMarkerImage(location, dataMap);
|
||||
if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
|
||||
location.settings.currentImage = image;
|
||||
}
|
||||
location.marker = tbMap.map.createMarker(markerLocation, location.settings,
|
||||
function (event) {
|
||||
tbMap.callbacks.onLocationClick(location);
|
||||
locationRowClick(event, location);
|
||||
}, [location.dsIndex]);
|
||||
tbMap.markers.push(location.marker);
|
||||
changed = true;
|
||||
} else {
|
||||
var prevPosition = tbMap.map.getMarkerPosition(location.marker);
|
||||
if (!prevPosition.equals(markerLocation)) {
|
||||
tbMap.map.setMarkerPosition(location.marker, markerLocation);
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
return changed;
|
||||
}
|
||||
|
||||
function locationRowClick($event, location) {
|
||||
@ -284,16 +311,7 @@ export default class TbMapWidgetV2 {
|
||||
}
|
||||
if (latLngs.length > 0) {
|
||||
var markerLocation = latLngs[latLngs.length - 1];
|
||||
if (!location.marker) {
|
||||
location.marker = tbMap.map.createMarker(markerLocation, location.settings,
|
||||
function (event) {
|
||||
tbMap.callbacks.onLocationClick(location);
|
||||
locationRowClick(event, location);
|
||||
}, [location.dsIndex]
|
||||
);
|
||||
} else {
|
||||
tbMap.map.setMarkerPosition(location.marker, markerLocation);
|
||||
}
|
||||
createOrUpdateLocationMarker(location, markerLocation, dataMap);
|
||||
}
|
||||
if (!location.polyline) {
|
||||
location.polyline = tbMap.map.createPolyline(latLngs, location.settings);
|
||||
@ -312,20 +330,8 @@ export default class TbMapWidgetV2 {
|
||||
lng = lngData[lngData.length - 1][1];
|
||||
if (angular.isDefined(lat) && lat != null && angular.isDefined(lng) && lng != null) {
|
||||
latLng = tbMap.map.createLatLng(lat, lng);
|
||||
if (!location.marker) {
|
||||
location.marker = tbMap.map.createMarker(latLng, location.settings,
|
||||
function (event) {
|
||||
tbMap.callbacks.onLocationClick(location);
|
||||
locationRowClick(event, location);
|
||||
}, [location.dsIndex]);
|
||||
tbMap.markers.push(location.marker);
|
||||
if (createOrUpdateLocationMarker(location, latLng, dataMap)) {
|
||||
locationChanged = true;
|
||||
} else {
|
||||
var prevPosition = tbMap.map.getMarkerPosition(location.marker);
|
||||
if (!prevPosition.equals(latLng)) {
|
||||
tbMap.map.setMarkerPosition(location.marker, latLng);
|
||||
locationChanged = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import * as L from 'leaflet';
|
||||
import 'leaflet-providers';
|
||||
@ -54,6 +53,64 @@ export default class TbOpenStreetMap {
|
||||
}
|
||||
|
||||
updateMarkerColor(marker, color) {
|
||||
this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
|
||||
marker.setIcon(iconInfo.icon);
|
||||
});
|
||||
}
|
||||
|
||||
updateMarkerIcon(marker, settings) {
|
||||
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
||||
marker.setIcon(iconInfo.icon);
|
||||
if (settings.showLabel) {
|
||||
marker.unbindTooltip();
|
||||
marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
|
||||
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
|
||||
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createMarkerIcon(marker, settings, onMarkerIconReady) {
|
||||
var currentImage = settings.currentImage;
|
||||
var opMap = this;
|
||||
if (currentImage && currentImage.url) {
|
||||
var testImage = document.createElement('img'); // eslint-disable-line
|
||||
testImage.style.visibility = 'hidden';
|
||||
testImage.onload = function() {
|
||||
var width;
|
||||
var height;
|
||||
var aspect = testImage.width / testImage.height;
|
||||
document.body.removeChild(testImage); //eslint-disable-line
|
||||
if (aspect > 1) {
|
||||
width = currentImage.size;
|
||||
height = currentImage.size / aspect;
|
||||
} else {
|
||||
width = currentImage.size * aspect;
|
||||
height = currentImage.size;
|
||||
}
|
||||
var icon = L.icon({
|
||||
iconUrl: currentImage.url,
|
||||
iconSize: [width, height],
|
||||
iconAnchor: [width/2, height],
|
||||
popupAnchor: [0, -height]
|
||||
});
|
||||
var iconInfo = {
|
||||
size: [width, height],
|
||||
icon: icon
|
||||
};
|
||||
onMarkerIconReady(iconInfo);
|
||||
};
|
||||
testImage.onerror = function() {
|
||||
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
||||
};
|
||||
document.body.appendChild(testImage); //eslint-disable-line
|
||||
testImage.src = currentImage.url;
|
||||
} else {
|
||||
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
||||
}
|
||||
}
|
||||
|
||||
createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
|
||||
var pinColor = color.substr(1);
|
||||
var icon = L.icon({
|
||||
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
|
||||
@ -64,66 +121,25 @@ export default class TbOpenStreetMap {
|
||||
shadowSize: [40, 37],
|
||||
shadowAnchor: [12, 35]
|
||||
});
|
||||
marker.setIcon(icon);
|
||||
}
|
||||
|
||||
updateMarkerImage(marker, settings, image, maxSize) {
|
||||
var testImage = document.createElement('img'); // eslint-disable-line
|
||||
testImage.style.visibility = 'hidden';
|
||||
testImage.onload = function() {
|
||||
var width;
|
||||
var height;
|
||||
var aspect = testImage.width / testImage.height;
|
||||
document.body.removeChild(testImage); //eslint-disable-line
|
||||
if (aspect > 1) {
|
||||
width = maxSize;
|
||||
height = maxSize / aspect;
|
||||
} else {
|
||||
width = maxSize * aspect;
|
||||
height = maxSize;
|
||||
}
|
||||
var icon = L.icon({
|
||||
iconUrl: image,
|
||||
iconSize: [width, height],
|
||||
iconAnchor: [width/2, height],
|
||||
popupAnchor: [0, -height]
|
||||
});
|
||||
marker.setIcon(icon);
|
||||
if (settings.showLabel) {
|
||||
marker.unbindTooltip();
|
||||
marker.tooltipOffset = [0, -height + 10];
|
||||
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
|
||||
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
|
||||
}
|
||||
}
|
||||
document.body.appendChild(testImage); //eslint-disable-line
|
||||
testImage.src = image;
|
||||
var iconInfo = {
|
||||
size: [21, 34],
|
||||
icon: icon
|
||||
};
|
||||
onMarkerIconReady(iconInfo);
|
||||
}
|
||||
|
||||
createMarker(location, settings, onClickListener, markerArgs) {
|
||||
var height = 34;
|
||||
var pinColor = settings.color.substr(1);
|
||||
var icon = L.icon({
|
||||
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
|
||||
iconSize: [21, 34],
|
||||
iconAnchor: [10, 34],
|
||||
popupAnchor: [0, -34],
|
||||
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
|
||||
shadowSize: [40, 37],
|
||||
shadowAnchor: [12, 35]
|
||||
});
|
||||
|
||||
var marker = L.marker(location, {icon: icon}).addTo(this.map);
|
||||
|
||||
var marker = L.marker(location, {});
|
||||
var opMap = this;
|
||||
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
||||
marker.setIcon(iconInfo.icon);
|
||||
if (settings.showLabel) {
|
||||
marker.tooltipOffset = [0, -height + 10];
|
||||
marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
|
||||
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
|
||||
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
|
||||
}
|
||||
|
||||
if (settings.useMarkerImage) {
|
||||
this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
|
||||
}
|
||||
marker.addTo(opMap.map);
|
||||
});
|
||||
|
||||
if (settings.displayTooltip) {
|
||||
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user