Commit 650b3e1b authored by Lionel DURAND's avatar Lionel DURAND
Browse files

Proto carte leaflet

parent ca6b2f65
......@@ -11,7 +11,7 @@
"apexcharts": "^3.33.2",
"autocompleter": "^6.1.2",
"geojson": "^0.5.0",
"leaflet": "^1.7.1",
"leaflet": "^1.8.0",
"lit": "^2.2.1",
"swagger-ui": "3.52.2"
},
......@@ -5210,9 +5210,9 @@
}
},
"node_modules/leaflet": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
},
"node_modules/leven": {
"version": "3.1.0",
......@@ -12113,9 +12113,9 @@
"dev": true
},
"leaflet": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
},
"leven": {
"version": "3.1.0",
......
......@@ -37,7 +37,7 @@
"dependencies": {
"autocompleter": "^6.1.2",
"apexcharts": "^3.33.2",
"leaflet": "^1.7.1",
"leaflet": "^1.8.0",
"swagger-ui": "3.52.2",
"geojson": "^0.5.0",
"lit": "^2.2.1"
......
// Importer explicitement chaque module pour forcer la conservation de l'import dans le js compilé
// Car s'il n'est pas référencé dans le code autrement que par son type, TSC va supprimer l'import
// voir https://github.com/Microsoft/TypeScript/wiki/FAQ#why-are-imports-being-elided-in-my-emit
import './composants/customElements/BoutonCE';
import './composants/customElements/BoutonCEStyle';
import './composants/customElements/CompteurCE';
import './composants/lit/Bouton';
import './composants/lit/JaugeNoteSur10';
import './composants/lit/PanneauGlissant';
import './composants/lit/MenuGlissant';
import './composants/lit/Histogramme';
import './proto-app.css';
import { q } from './utils/query';
import { Bouton, BoutonCE, CompteurCE, JaugeNoteSur10 } from './composants';
import { Bouton, BoutonCE, BoutonCEStyle, CompteurCE, JaugeNoteSur10 } from './composants';
import { PanneauGlissant } from './composants/lit/PanneauGlissant';
import { ProtoDomaine } from './ProtoDomaine';
import { ProtoControleur } from './ProtoControleur';
import { MenuGlissant } from './composants/lit/MenuGlissant';
import { Histogramme } from './composants/lit/Histogramme';
import { Carte } from './composants/lit/Carte';
// Init explicite de chaque module pour forcer la conservation de l'import dans le js compilé
// Car s'il n'est pas référencé dans le code autrement que par son type, TSC va supprimer l'import
// voir https://github.com/Microsoft/TypeScript/wiki/FAQ#why-are-imports-being-elided-in-my-emit
BoutonCE;
BoutonCEStyle;
CompteurCE;
Bouton;
JaugeNoteSur10;
PanneauGlissant;
MenuGlissant;
Histogramme;
Histogramme;
Carte;
export class ProtoAfficheur {
private readonly boutonCE: BoutonCE = q<BoutonCE>('c-bouton-ce')!;
......@@ -28,6 +32,7 @@ export class ProtoAfficheur {
private readonly boutonAfficherMenu: Bouton = q<Bouton>('#bouton-toggle-menu')!;
private readonly menuGlissant: MenuGlissant = q<MenuGlissant>('c-menu-glissant')!;
private readonly histogramme: Histogramme = q<Histogramme>('c-histogramme')!;
private readonly carte: Carte = q<Carte>('c-carte')!;
inscrireListeners(protoControleur: ProtoControleur) {
this.boutonCE.addEventListener('click', () => {
......
import { customElement } from 'lit/decorators.js';
import { css, html, LitElement, unsafeCSS } from 'lit';
import L from 'leaflet';
// import "leaflet/dist/leaflet.css";
import leafletRawCss from 'leaflet/dist/leaflet.css';
declare global {
interface HTMLElementTagNameMap {
'c-carte': Carte;
}
}
const leafletStyles = unsafeCSS(`${leafletRawCss}`);
@customElement('c-carte')
export class Carte extends LitElement {
static styles = [leafletStyles,
css`
:host {
display:block;
height: 200px;
width: 200px;
}
`];
private carte?: L.Map;
constructor() {
super();
}
firstUpdated() {
const mapEl = <HTMLElement>this.shadowRoot!.querySelector('#mapid');
let map = L.map(mapEl).setView([51.505, -0.09], 13);
let urlTemplate = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}));
}
render() {
return html`
<!-- <link rel="stylesheet" href="https://cdn.skypack.dev/leaflet/dist/leaflet.css">-->
<div id="mapid" style="height: 100%"></div>
`;
}
}
import { customElement, property } from 'lit/decorators.js';
import { css, html, LitElement } from 'lit';
import { getVariableCss } from '../../../commun/vues';
// import { getVariableCss } from '../../../commun/vues';
import { calculerValeurEntiereNonNulle, formaterNombreEnEntierString } from '../../../commun/base';
declare global {
......@@ -39,16 +39,25 @@ export class JaugeNoteSur10 extends LitElement {
note: number | null = null;
private static calculerCouleurJauge(note: number | null): string {
// --c-carte-et-note-territoire-gris: #d7d7d7;
// --c-carte-et-note-territoire-rouge: #9b0000;
// --c-carte-et-note-territoire-orange: #f2994a;
// --c-carte-et-note-territoire-vert: #219653;
if (note == null) {
return getVariableCss('--c-carte-et-note-territoire-gris');
// return getVariableCss('--c-carte-et-note-territoire-gris');
return '#d7d7d7';
} else if (note <= 3) {
return getVariableCss('--c-synthese-note-rouge');
return '#9b0000';
// return getVariableCss('--c-synthese-note-rouge');
} else if (note > 3 && note < 7) {
return getVariableCss('--c-synthese-note-orange');
return '#f2994a';
// return getVariableCss('--c-synthese-note-orange');
} else if (note >= 7) {
return getVariableCss('--c-synthese-note-vert');
return '#219653';
// return getVariableCss('--c-synthese-note-vert');
}
return getVariableCss('--c-carte-et-note-territoire-gris');
return '#d7d7d7';
// return getVariableCss('--c-carte-et-note-territoire-gris');
}
render() {
......
......@@ -8,6 +8,11 @@
<body>
<h1>Web components avec lit elements</h1>
<h2>Leaflet dans lit-element</h2>
<c-carte></c-carte>
<h2>Apex dans lit-element</h2>
<c-histogramme></c-histogramme>
<h2>Bouton et compteurs</h2>
......
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Proto utilisation webcomponents page 2</title>
</head>
<body>
<h1>Page 2</h1>
<p>Note = <span id="note"></span></p>
<script>
document.querySelector('#note').innerText = window.sessionStorage.getItem('note');
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="module" src="./index2.js"></script>
</head>
<body>
<my-map></my-map>
</body>
</html>
\ No newline at end of file
import { css, html, LitElement } from "lit";
import L from "leaflet";
// import "leaflet/dist/leaflet.css";
// import leafletCssUrl from "leaflet/dist/leaflet.css?url";
import leafletRawCss from "leaflet/dist/leaflet.css";
export class Map extends LitElement{
static get styles() {
return [leafletRawCss,
css`
:host {
display:block;
height: 200px;
width: 200px
}
`];
}
constructor() {
super();
}
firstUpdated() {
const mapEl = this.shadowRoot.querySelector('#mapid');
let map = L.map(mapEl).setView([51.505, -0.09], 13);
let urlTemplate = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}));
}
render() {
return html`
<style>${leafletRawCss}</style>
<div id="mapid" style="height: 100%"></div>
`;
}
}
customElements.define("my-map", Map);
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment