diff --git a/src/iotMapManager/iotMapManager.json b/src/iotMapManager/iotMapManager.json index 2be67624..0a69125c 100644 --- a/src/iotMapManager/iotMapManager.json +++ b/src/iotMapManager/iotMapManager.json @@ -14,6 +14,15 @@ "anchored": true, "plain": true }, + "size": { + "fullSvgWidth": 100, + "fullSvgHeight": 100, + "unselectedSvgWidth": 44, + "unselectedSvgHeight": 44, + "selectedSvgWidth": 64, + "selectedSvgHeight": 64, + "anchorHeight": 10 + }, "circles": { "borderColor": "white", @@ -27,21 +36,10 @@ "poi": { "borderColor": "white" - }, - - "size": { - "selected": { - "width": 100, - "height": 100 - }, - "unselected": { - "width": 40, - "height": 40 - } } }, "cluster": { - "iconSize": 60, + "iconSize": 64, "circleLayer": { }, "squareLayer": { diff --git a/src/iotMapManager/iotMapManager.ts b/src/iotMapManager/iotMapManager.ts index 052d4200..ed80fcd4 100644 --- a/src/iotMapManager/iotMapManager.ts +++ b/src/iotMapManager/iotMapManager.ts @@ -1,6 +1,6 @@ /* * Software Name : IotMapManager -* Version: 0.2.2 +* Version: 0.2.3 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange * SPDX-License-Identifier: MIT * @@ -144,7 +144,7 @@ export class IotMapManager { let content = cluster.layer._childCount + ' ' + cluster.target.options.clusterType + '(s) :
'; const tabDistribution: any = {}; const allChildMarkers = cluster.layer.getAllChildMarkers(); - allChildMarkers.forEach( marker => { + allChildMarkers.forEach(marker => { const markerColor = marker.markerInfo.shape.color; if (tabDistribution[markerColor]) { tabDistribution[markerColor] += 1; @@ -152,13 +152,16 @@ export class IotMapManager { tabDistribution[markerColor] = 1; } }); + for (const color in tabDistribution) { - content += '● ' + - '' + tabDistribution[color] + ' marker(s)
'; + if (tabDistribution[color]) { + content += '● ' + + '' + tabDistribution[color] + ' marker(s)
'; + } } // create popup - const popup = L.popup({closeButton: false}) + L.popup({closeButton: false}) .setLatLng(cluster.layer.getLatLng()) .setContent(content) .openOn(this.map); @@ -303,7 +306,7 @@ export class IotMapManager { // marker Distribution const tabDistribution: any = {}; const allChildMarkers = cluster.getAllChildMarkers(); - allChildMarkers.forEach( marker => { + allChildMarkers.forEach(marker => { const markerColor = marker.markerInfo.shape.color; if (tabDistribution[markerColor]) { tabDistribution[markerColor] += 1; @@ -318,19 +321,21 @@ export class IotMapManager { let angle = -90.0; let arc = 0.0; for (const color in tabDistribution) { - const n = tabDistribution[color]; - arc = n * 1193 / childCount - (60 / childCount); // todo I DON'T KNOW WHY !!! - svgGauge += commonSvg.circleGauge + `stroke='` + color - + `' stroke-dasharray='` + arc + `, 1193' transform='rotate(` + angle + ` 225 225)'/>`; - angle += n * 360 / childCount; + if (tabDistribution[color]) { + const n = tabDistribution[color]; + arc = n * 1193 / childCount - (60 / childCount); // todo I DON'T KNOW WHY !!! + svgGauge += commonSvg.circleGauge + `stroke='` + color + + `' stroke-dasharray='` + arc + `, 1193' transform='rotate(` + angle + ` 225 225)'/>`; + angle += n * 360 / childCount; + } } - + // tslint:disable:max-line-length return new L.DivIcon({ html: `` + `` + `` - + `` + childCount + `` + + `` + childCount + `` + svgGauge + ``, className: 'my-cluster-class', @@ -338,4 +343,5 @@ export class IotMapManager { popupAnchor: [0, 0] }); } + // tslint:enable:max-line-length } diff --git a/src/iotMapManager/iotMapMarkers/iotCircleMarker.ts b/src/iotMapManager/iotMapMarkers/iotCircleMarker.ts index 57253831..0db5ff1e 100644 --- a/src/iotMapManager/iotMapMarkers/iotCircleMarker.ts +++ b/src/iotMapManager/iotMapMarkers/iotCircleMarker.ts @@ -1,6 +1,6 @@ /* * Software Name : IotMapManager -* Version: 0.2.2 +* Version: 0.2.3 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange * SPDX-License-Identifier: MIT * @@ -26,8 +26,8 @@ export class IotCircleMarker { let svgGauge = ''; // sizing - const width = (selected) ? config.markers.size.selected.width : config.markers.size.unselected.width; - const height = (selected) ? config.markers.size.selected.height : config.markers.size.unselected.height; + const width = (selected) ? 64 : 44; + const height = (selected) ? 64 : 44; // border color const borderColor = (selected) ? marker.shape.color : config.markers.circles.borderColor; @@ -41,27 +41,19 @@ export class IotCircleMarker { // label // todo : a revoir pour bien centrer svgInnerDesign = (marker.inner.label) ? `` + font-size="160" font-family='helvetica neue' fill='` + marker.inner.color + `'>` + marker.inner.label[0] + `` : ''; // icon - // todo : import des icones solaris - /*fetch(marker.icon.svg) - .then(response => response.text()) - .then((fileContent) => { - let start = fileContent.search(' `; } if (marker.inner.icon === 'bat') { svgInnerDesign = ` `; } diff --git a/src/iotMapManager/iotMapMarkers/iotMapCommonSvg.ts b/src/iotMapManager/iotMapMarkers/iotMapCommonSvg.ts index 17e4a433..0d6eb747 100644 --- a/src/iotMapManager/iotMapMarkers/iotMapCommonSvg.ts +++ b/src/iotMapManager/iotMapMarkers/iotMapCommonSvg.ts @@ -1,6 +1,6 @@ /* * Software Name : IotMapManager -* Version: 0.2.2 +* Version: 0.2.3 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange * SPDX-License-Identifier: MIT * @@ -13,6 +13,7 @@ */ // circle +// tslint:disable:max-line-length export let circleAnchoredBorder = `d='M224 545l-37.33-56c-5.06-7.59-16.16-25.3-21.71-30.99-4.12-4.21-23.76-18.92-28.96-22.03l-21-10.29c-10.91-5.91-24.45-14.9-34-22.77C47.21 375.06 23.19 340.57 9.33 299 5.02 286.07.02 266.53 0 253v-54c.24-19.89 11.82-54.08 20.75-72C47.21 73.96 88.61 36.25 144 15.19c15.22-5.78 42.91-13 59-13.19 37.75-.44 60.4-1.33 97 11.69C372.89 39.63 427.7 100.26 444.42 176c2.62 11.83 5.44 28.99 5.58 41 .21 17.95-.39 34.26-3.61 52-9.71 53.41-38.38 100.57-80.39 134.74-9.2 7.49-24.45 17.56-35 23l-17.91 8.66-10.09 7.26c-3.26 2.14-6.86 3.99-9.72 6.67-12.34 11.56-20.02 24.78-29.28 38.67l-38 57h-2zm2-61l34.14-52 17.03-22.78c3.56-3.28 16.49-7.2 21.83-9.5 13.06-5.62 24.53-12.46 36-20.87 49.14-36.04 79.71-94.69 79-155.85-.27-22.9-7.68-51.03-16.72-72-9.28-21.51-23.74-41.48-40.28-58-30.41-30.37-67.59-48.24-110-54.13L228 37C140.56 35.98 62.36 97.43 41.13 182c-2.86 11.38-5.99 29.39-6.13 41-.71 61 29.41 118.72 78 155.11 7.82 5.86 22.17 15.09 31 19.03 5.77 2.57 20.98 7.89 24.71 11.25L184.08 427c11.74 14.14 31.01 41.13 39.92 57h2z'`; export let circleAnchoredInnerColor = `d='M224 494c-9.25-16.48-31.71-48.3-43.92-63l-15.37-18.61c-3.3-2.94-18.44-8.28-23.71-10.7-9.82-4.51-24.38-13.77-33-20.34C57.31 342.64 29.26 284.59 30 221c.25-20.81 6.82-47.73 14.6-67 8.7-21.52 19.75-38.39 34.83-56C90.23 85.39 104.2 73.87 118 64.67c57.85-38.58 129.61-42.82 192-12.41 19.14 9.33 38.03 23.7 53 38.74 15.36 15.43 30.24 36.95 38.85 57 9.33 21.73 13.97 40.54 16.32 64l.83 9c.74 63.76-27.76 122.73-79 161.11-9.21 6.89-23.49 15.89-34 20.47-4.82 2.09-22.13 8.36-24.83 10.72L262.71 438 226 494h-2zm-26-43h-1l1 1v-1z'`; @@ -42,5 +43,7 @@ export let sqrBorder = ``; -export let sqrPinFunBg = `d="M65,70H57.675a5,5,0,0,0-4.159,2.226L50,77.5l-3.516-5.274A5,5,0,0,0,42.325,70H35a5.015,5.015,0,0,1-5-5V35a5.015,5.015,0,0,1,5-5H65a5.015,5.015,0,0,1,5,5V65A5.015,5.015,0,0,1,65,70Z"` +export let sqrPinFunBg = `d="M65,70H57.675a5,5,0,0,0-4.159,2.226L50,77.5l-3.516-5.274A5,5,0,0,0,42.325,70H35a5.015,5.015,0,0,1-5-5V35a5.015,5.015,0,0,1,5-5H65a5.015,5.015,0,0,1,5,5V65A5.015,5.015,0,0,1,65,70Z"`; export let sqrSelFunBg = ``; + +// tslint:enable:max-line-length diff --git a/src/iotMapManager/iotMapMarkers/iotMapMarkers.ts b/src/iotMapManager/iotMapMarkers/iotMapMarkers.ts index 9dd62954..b824def9 100644 --- a/src/iotMapManager/iotMapMarkers/iotMapMarkers.ts +++ b/src/iotMapManager/iotMapMarkers/iotMapMarkers.ts @@ -1,6 +1,6 @@ /* * Software Name : IotMapManager -* Version: 0.2.2 +* Version: 0.2.3 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange * SPDX-License-Identifier: MIT * @@ -29,10 +29,16 @@ export class IotMapMarkers { getMarker(marker, selected = false) { let html = ''; - // shape + // default values if (!marker.shape) { marker.shape = config.markers.default; } + + // only anchored markers can be selected + if (!marker.shape.anchored) { + selected = false; + } + if (marker.shape.shape === 'circle') { html = this.iotCircleMarker.getSvg(marker, selected); } else if (marker.shape.shape === 'poi' || marker.shape.shape === 'square') { @@ -40,15 +46,18 @@ export class IotMapMarkers { } // sizing - const iconSize: L.Point = L.point(100, 100); + const size = config.markers.size; + const iconSize: L.Point = L.point(size.fullSvgWidth, size.fullSvgHeight); - const iconAnchor: L.Point = (marker.shape.anchored) - ? L.point(iconSize.x / 2, iconSize.y) - : L.point(iconSize.x / 2, iconSize.y / 2); + let iconAnchor: L.Point = L.point(size.fullSvgWidth / 2, size.fullSvgHeight / 2); // by default = center + if (marker.shape.anchored) { + const height = (size.fullSvgHeight + ((selected) ? size.selectedSvgHeight : size.unselectedSvgHeight)) / 2 + size.anchorHeight; + iconAnchor = L.point(size.fullSvgWidth / 2, height); + } - const popupAnchor: L.Point = (marker.shape.anchored) - ? L.point(0, -iconSize.y) - : L.point(0, -iconSize.y / 2); + const popupAnchor: L.Point = (selected) + ? L.point(0, - (size.selectedSvgHeight + size.anchorHeight)) // from anchor point + : L.point(0, - (size.unselectedSvgHeight / 2)); // from center point // creating icon return L.divIcon({ diff --git a/src/iotMapManager/iotMapMarkers/iotSquareMarker.ts b/src/iotMapManager/iotMapMarkers/iotSquareMarker.ts index 8e174c83..f20fa756 100644 --- a/src/iotMapManager/iotMapMarkers/iotSquareMarker.ts +++ b/src/iotMapManager/iotMapMarkers/iotSquareMarker.ts @@ -1,6 +1,6 @@ /* * Software Name : IotMapManager -* Version: 0.2.2 +* Version: 0.2.3 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange * SPDX-License-Identifier: MIT * @@ -22,34 +22,33 @@ export class IotSquareMarker { let svgBorder = ''; let shadowFile = ''; - if (selected) { - // todo anchored ? - if (marker.shape.shape == 'poi' || marker.shape.plain) { // STD - svgShape = ``; + if (selected) { // Only anchored markers can be selected + if (marker.shape.shape === 'poi' || marker.shape.plain) { // STD + svgShape = ``; } else { // FUN - svgShape = ``; + svgShape = ``; svgBG = commonSvg.sqrSelFunBg; } shadowFile = 'assets/img/POI_SQR_SEL_Shadow.png'; - } else if (marker.shape.shape == 'poi' || marker.shape.plain) { // STD + } else if (marker.shape.shape === 'poi' || marker.shape.plain) { // STD if (marker.shape.anchored) { svgBorder = commonSvg.sqrPinBorder; - svgShape = ``; + svgShape = ``; shadowFile = 'assets/img/POI_SQR_PIN_Shadow.png'; - } else { + } else { // FUN svgBorder = commonSvg.sqrBorder; - svgShape = ``; + svgShape = ``; shadowFile = 'assets/img/POI_SQR_Shadow.png'; } } else { // FUN if (marker.shape.anchored) { svgBorder = commonSvg.sqrPinBorder; - svgShape = ``; + svgShape = ``; svgBG = ``; shadowFile = 'assets/img/POI_SQR_PIN_Shadow.png'; } else { svgBorder = commonSvg.sqrBorder; - svgShape = ``; + svgShape = ``; svgBG = commonSvg.sqrFunBg; shadowFile = 'assets/img/POI_SQR_Shadow.png'; } @@ -61,7 +60,7 @@ export class IotSquareMarker { if (marker.inner) { // todo : à revoir pour bien centrer svgInnerDesign = (marker.inner.label) ? `` + font-size="20" font-family='helvetica neue' fill='` + marker.inner.color + `'>` + marker.inner.label[0] + `` : ''; // icon @@ -73,7 +72,7 @@ export class IotSquareMarker { // shadow const shadowClass = (selected) ? 'shadowSelected' : 'shadowUnselected'; - const imgShadow = ``; + const imgShadow = ``; // result diff --git a/src/iotMapManager/package.json b/src/iotMapManager/package.json index 12a0aaee..273ae08c 100644 --- a/src/iotMapManager/package.json +++ b/src/iotMapManager/package.json @@ -1,6 +1,6 @@ { "_from": "iotmapmanager", - "_id": "iotmapmanager@0.2.2", + "_id": "iotmapmanager@0.2.3", "_inBundle": false, "_integrity": "sha512-Q7PVTJ/WHujDFcuO1B+MGJMXHLlJndJ9JrgDSf0UXdEdbsyf8otVrDBbE7bYZ2J5p4nfbT15ex+x1aTbJxgAMA==", "_location": "/iotmapmanager", @@ -37,7 +37,7 @@ "map" ], "license": "MIT", - "main": "iotMapManager.ts", + "main": "iotMapManager.js", "name": "iotmapmanager", "repository": { "type": "git", diff --git a/src/map/map.component.ts b/src/map/map.component.ts index c4154222..d69c76ae 100644 --- a/src/map/map.component.ts +++ b/src/map/map.component.ts @@ -25,8 +25,8 @@ export class MapComponent implements AfterViewInit { anchored: false }, inner : { - label : "H", - color: "green" + label : 'H', + color: 'green' }, }, { @@ -110,7 +110,7 @@ export class MapComponent implements AfterViewInit { }, { id: 'p3', - location: [44.888798, 4.885407], + location: [44.888793, 4.885409], shape: { shape : 'poi', color: '#d24d50', @@ -155,7 +155,7 @@ export class MapComponent implements AfterViewInit { icon: 'map_pin.svg', color: 'white' }, - }];/*, + }]; /*, // circle { @@ -281,11 +281,11 @@ export class MapComponent implements AfterViewInit { this.commonIotMap.addMarker(this.markerToUpdate); // update marker - this.commonIotMap.updateMarker('s3', {inner: {icon:'Orange_garden.svg', color:'blue'}}); + this.commonIotMap.updateMarker('s3', {inner: {icon: 'Orange_garden.svg', color: 'blue'}}); setTimeout(() => { this.commonIotMap.updateMarker(this.markerToUpdate.id, {location: [44.887, 4.898], - shape: {color: 'blue'}, - gauge: {percent: '40'}}); + shape: {color: 'blue'}, + gauge: {percent: '40'}}); }, 2000); setTimeout(() => { this.commonIotMap.updateMarker(this.markerToAdd.id, {shape: {shape: 'square', color: 'green'}});