Skip to content

Commit

Permalink
IOTMAPCOMP-60 : utilisation d'une font icon
Browse files Browse the repository at this point in the history
IOTMAPCOMP-73 : modification de la gestion des labels pour s'affranchir de l'alignement
  • Loading branch information
sandrinegateau committed Jan 8, 2021
1 parent 758cc36 commit a6cb45c
Showing 5 changed files with 63 additions and 49 deletions.
2 changes: 1 addition & 1 deletion src/index.html
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>-
crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
</head>
<body>
39 changes: 28 additions & 11 deletions src/iotMapManager/iotMapManager.css
Original file line number Diff line number Diff line change
@@ -124,7 +124,7 @@
left:0px;
z-index: 10;
}
.container > img{
.container > span{
position: absolute;
top:0px;
left:0px;
@@ -137,20 +137,37 @@
z-index: 10;
}*/

.container .unselected{
.container .iconUnselected{
position: absolute;
top:37px;
left:37px;
width:26px;
height:26px;
top:35px;
left:35px;
font-size:30px;
}

.container .selected{
.container .labelUnselected{
position: absolute;
top:28px;
left:28px;
width:44px;
height:44px;
top:22px;
left:36px;
font-size:36px;
font-family: 'Helvetica Neue';
font-weight: bold;
}


.container .iconSelected{
position: absolute;
top:30px;
left:30px;
font-size:40px;
}

.container .labelSelected{
position: absolute;
top:16px;
left:34px;
font-size:44px;
font-family: 'Helvetica Neue';
font-weight: bold;
}

.container .shadowSelected{
14 changes: 9 additions & 5 deletions src/iotMapManager/iotMapManagerConfig.ts
Original file line number Diff line number Diff line change
@@ -52,6 +52,10 @@ export class IotMapManagerConfig {
},

// *** Private conf: not modified by SetConfig ***
font: {
family: 'Helvetica Neue',
weight: 'bold'
},
size: {
fullSvgWidth: 100,
fullSvgHeight: 100,
@@ -83,31 +87,31 @@ export class IotMapManagerConfig {
markerStatus = {
'Positive': {
stateColor: '#32C832',
innerColor: 'black',
innerColor: '#527EDB',
singularState: 'Positive',
pluralState: 'Positives'
},
'Neutral': {
stateColor: '#527EDB',
innerColor: 'black',
innerColor: '#FFCC00',
singularState: 'Neutral',
pluralState: 'Neutrals'
},
'Warning': {
stateColor: '#FFCC00',
innerColor: 'black',
innerColor: '#CD3C14',
singularState: 'Warning',
pluralState: 'Warnings'
},
'Alert': {
stateColor: '#CD3C14',
innerColor: 'black',
innerColor: '#CCCCCC',
singularState: 'Alert',
pluralState: 'Alerts'
},
'Inactive': {
stateColor: '#CCCCCC',
innerColor: 'black',
innerColor: '#32C832',
singularState: 'Inactive',
pluralState: 'Inactives'
}
19 changes: 6 additions & 13 deletions src/iotMapManager/iotMapMarkers.ts
Original file line number Diff line number Diff line change
@@ -135,19 +135,12 @@ export class IotMapMarkers {
: ((marker.inner.color !== undefined) ? marker.inner.color : this.config.markers.default.innerColor);

if (marker.inner.icon) { // icon
const iconClass = (selected) ? 'selected' : 'unselected';
imgIcon = `<img class='` + iconClass + `' src='/assets/icons/` + marker.inner.icon + `' />`;
const iconClass = (selected) ? ' iconSelected' : ' iconUnselected';
imgIcon = `<span class="` + marker.inner.icon + iconClass + ` " style="color: ` + innerColor + `" />`;

} else if (marker.inner.label) { // label
svgInnerDesign = `<text x='` + this.config.markers.size.fullSvgWidth / 2
+ `' y='` + this.config.markers.size.fullSvgHeight / 2
+ `' dominant-baseline='central'
text-anchor='middle'
font-size='` + conf.fontSize + `'
font-family='Helvetica Neue'
font-weight='bold'
fill='` + innerColor
+ `'>`
+ marker.inner.label[0] + `</text>`;
const labelClass = (selected) ? ' labelSelected' : ' labelUnselected';
imgIcon = `<span class="` + labelClass + ` " style="color: ` + innerColor + `" >` + marker.inner.label[0] + `</span>`;
}
}

@@ -174,7 +167,7 @@ export class IotMapMarkers {
return `<div class='container'>`
+ imgShadow
+ `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'>`
+ svgBorder + svgShape + svgBG + svgInnerDesign + svgGauge
+ svgBorder + svgShape + svgBG /*+ svgInnerDesign*/ + svgGauge
+ `</svg>`
+ imgIcon
+ `</div>`;
38 changes: 19 additions & 19 deletions src/map/map.component.ts
Original file line number Diff line number Diff line change
@@ -50,7 +50,7 @@ export class MapComponent implements AfterViewInit {
},
popup: `Ecole Jean Rostand : <a href='https://bv.ac-grenoble.fr/carteforpub/uai/0260969M'>ici</a>`,
inner: {
icon: 'School.svg',
icon: 'iotmap-icons-School',
color: 'green'
},
layer: 'Etablissements',
@@ -87,8 +87,8 @@ export class MapComponent implements AfterViewInit {
plain: false
},
inner: {
icon: 'accessibility_hearing.svg',
color: 'black'
icon: 'iotmap-icons-accessibility_hearing',
color: 'blue'
},
layer: 'Monuments',
status: 'Alert',
@@ -106,7 +106,7 @@ export class MapComponent implements AfterViewInit {
accuracy: 200
},
inner: {
icon: 'bluetooth.svg',
icon: 'iotmap-icons-bluetooth',
color: 'green'
},
layer: 'Etablissements',
@@ -125,7 +125,7 @@ export class MapComponent implements AfterViewInit {
plain: false
},
inner: {
icon: 'family_place.svg',
icon: 'iotmap-icons-family_place',
color: 'black'
},
layer: 'Monuments'
@@ -145,7 +145,7 @@ export class MapComponent implements AfterViewInit {
},
layer: 'Etablissements',
inner: {
icon: 'School.svg',
icon: 'iotmap-icons-School',
color: 'blue'
},
status: 'Positive'
@@ -162,7 +162,7 @@ export class MapComponent implements AfterViewInit {
anchored: true
},
inner: {
icon: 'School.svg',
icon: 'iotmap-icons-School',
color: 'navyblue'
},
layer: 'Etablissements',
@@ -193,7 +193,7 @@ export class MapComponent implements AfterViewInit {
},
layer: 'Monuments',
inner: {
icon: 'games.svg',
icon: 'iotmap-icons-games',
color: 'black'
},
status: 'Alert'
@@ -211,7 +211,7 @@ export class MapComponent implements AfterViewInit {
},
layer: 'Etablissements',
inner: {
icon: 'hospital.svg',
icon: 'iotmap-icons-hospital',
color: 'white'
},
status: 'Inactive'
@@ -228,7 +228,7 @@ export class MapComponent implements AfterViewInit {
},
layer: 'Etablissements',
inner: {
icon: 'map_pin.svg',
icon: 'iotmap-icons-map_pin',
color: 'white'
}
},
@@ -249,7 +249,7 @@ export class MapComponent implements AfterViewInit {
accuracy: 500
},
inner: {
icon: 'Car_pooling.svg',
icon: 'iotmap-icons-Car_pooling',
color: 'black'
},
status: 'Positive'
@@ -268,7 +268,7 @@ export class MapComponent implements AfterViewInit {
},
status: 'Neutral',
inner: {
icon: 'Car_pooling.svg',
icon: 'iotmap-icons-Car_pooling',
color: 'black'
}
},
@@ -285,7 +285,7 @@ export class MapComponent implements AfterViewInit {
percent: 75
},
inner: {
icon: 'Car_pooling.svg',
icon: 'iotmap-icons-Car_pooling',
color: 'black'
},
status: 'Warning'
@@ -302,7 +302,7 @@ export class MapComponent implements AfterViewInit {
anchored: false
},
inner: {
icon: 'Car_pooling.svg',
icon: 'iotmap-icons-Car_pooling',
color: 'black'
},
status: 'Alert'
@@ -317,11 +317,11 @@ export class MapComponent implements AfterViewInit {

shape: {
type : markerType.circle,
anchored: false,
anchored: true,
plain: false
},
inner: {
label: 'A',
label: 'O',
color: 'black'
},
status: 'Inactive'
@@ -340,7 +340,7 @@ export class MapComponent implements AfterViewInit {
percent: 45
},
inner: {
icon : 'temperature.svg',
icon : 'iotmap-icons-temperature',
color: 'green'
}
}];
@@ -359,7 +359,7 @@ export class MapComponent implements AfterViewInit {
anchored: false
},
inner: {
icon: '4g.svg',
icon: 'iotmap-icons-4g',
color: 'blue'
},
@@ -502,7 +502,7 @@ export class MapComponent implements AfterViewInit {
setTimeout (() => { this.commonIotMap.updateUserMarker(this.userMarker5);}, 5000);


setTimeout(() => { this.commonIotMap.updateMarker("c1", {shape: { accuracy: null}});}, 3000);
//setTimeout(() => { this.commonIotMap.updateMarker("c1", {shape: { accuracy: null}});}, 3000);
/*
setTimeout (() => { IotMapManagerConfig.setConfig({

0 comments on commit a6cb45c

Please sign in to comment.