tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Map widgets improvements.

pull/508/head
Igor Kulikov 9 years ago
parent
3e25997ba2
commit
9e6acb7ede
7 changed files with 292 additions and 193 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ui/src/app/widget/lib/alarms-table-widget.tpl.html
  2. 2
      ui/src/app/widget/lib/entities-table-widget.tpl.html
  3. 123
      ui/src/app/widget/lib/google-map.js
  4. 103
      ui/src/app/widget/lib/image-map.js
  5. 65
      ui/src/app/widget/lib/map-widget.js
  6. 68
      ui/src/app/widget/lib/map-widget2.js
  7. 120
      ui/src/app/widget/lib/openstreet-map.js

4
ui/src/app/widget/lib/alarms-table-widget.tpl.html
View File

@ -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 }}

2
ui/src/app/widget/lib/entities-table-widget.tpl.html
View File

@ -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 }}

123
ui/src/app/widget/lib/google-map.js
View File

@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var gmGlobals = {
loadingGmId: null,
gmApiKeys: {}
@ -151,80 +150,100 @@ 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) {
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 pinImage = {
url: image,
scaledSize : new google.maps.Size(width, height)
}
marker.setIcon(pinImage);
updateMarkerIcon(marker, settings) {
this.createMarkerIcon(marker, settings, (iconInfo) => {
marker.setIcon(iconInfo.icon);
if (settings.showLabel) {
marker.set('labelAnchor', new google.maps.Point(100, height + 20));
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() {
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 = {
url: currentImage.url,
scaledSize : new google.maps.Size(width, height)
};
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 = currentImage.url;
} else {
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
}
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = image;
}
/* 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",
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(12, 35));
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 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);

103
ui/src/app/widget/lib/image-map.js
View File

@ -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;
if (settings.showLabel) {
marker.tooltipOffset = [0, -height * 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);
}
var opMap = this;
this.createMarkerIcon(marker, settings, (iconInfo) => {
marker.setIcon(iconInfo.icon);
if (settings.showLabel) {
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 });
}
marker.addTo(opMap.map);
});
if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);

65
ui/src/app/widget/lib/map-widget.js
View File

@ -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);

68
ui/src/app/widget/lib/map-widget2.js
View File

@ -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;
}
}
}
}

120
ui/src/app/widget/lib/openstreet-map.js
View File

@ -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,55 +53,65 @@ export default class TbOpenStreetMap {
}
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) {
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);
}
updateMarkerIcon(marker, settings) {
this.createMarkerIcon(marker, settings, (iconInfo) => {
marker.setIcon(iconInfo.icon);
if (settings.showLabel) {
marker.unbindTooltip();
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 });
}
});
}
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);
}
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = image;
}
createMarker(location, settings, onClickListener, markerArgs) {
var height = 34;
var pinColor = settings.color.substr(1);
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],
@ -112,18 +121,25 @@ export default class TbOpenStreetMap {
shadowSize: [40, 37],
shadowAnchor: [12, 35]
});
var iconInfo = {
size: [21, 34],
icon: icon
};
onMarkerIconReady(iconInfo);
}
var marker = L.marker(location, {icon: icon}).addTo(this.map);
if (settings.showLabel) {
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 });
}
if (settings.useMarkerImage) {
this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
}
createMarker(location, settings, onClickListener, markerArgs) {
var marker = L.marker(location, {});
var opMap = this;
this.createMarkerIcon(marker, settings, (iconInfo) => {
marker.setIcon(iconInfo.icon);
if (settings.showLabel) {
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 });
}
marker.addTo(opMap.map);
});
if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);

Write Preview
Loading…
Cancel
Save