diff --git a/src/components/vmd-appointment-map.component.ts b/src/components/vmd-appointment-map.component.ts deleted file mode 100644 index 5907df7d5..000000000 --- a/src/components/vmd-appointment-map.component.ts +++ /dev/null @@ -1,164 +0,0 @@ -import { css, unsafeCSS, customElement, html, LitElement, property, internalProperty } from 'lit-element'; -import { Icon, map, marker, tileLayer, LatLngTuple } from 'leaflet'; -import leafletCss from 'leaflet/dist/leaflet.css'; -import leafletMarkerCss from 'leaflet.markercluster/dist/MarkerCluster.Default.css'; -import * as L from 'leaflet'; -import 'leaflet.markercluster'; -import { Router } from '../routing/Router'; -import { LieuAffichableAvecDistance, Coordinates, SearchRequest, TYPES_LIEUX } from '../state/State'; -import { CSS_Global } from '../styles/ConstructibleStyleSheets'; -import { format as formatDate, parseISO } from 'date-fns'; -import { fr } from 'date-fns/locale'; -import { Strings } from '../utils/Strings'; - -@customElement('vmd-appointment-map') -export class VmdAppointmentMapComponent extends LitElement { - //language=css - static styles = [ - CSS_Global, - css` - ${unsafeCSS(leafletCss)} - `, - css` - ${unsafeCSS(leafletMarkerCss)} - `, - css` - :host { - display: block; - } - #appointment-map { - min-height: 500px; - } - `, - ]; - @property({ type: Object, attribute: false }) lieux!: LieuAffichableAvecDistance[]; - @internalProperty() protected currentSearch: SearchRequest | void = undefined; - - constructor() { - super(); - } - - render() { - return html`
`; - } - - private loadMap() { - const coordinates = - this.currentSearch instanceof SearchRequest.ByCommune && - this.toCoordinates((this.currentSearch as SearchRequest.ByCommune).commune); - const mymap = map(this.shadowRoot!.querySelector('#appointment-map') as HTMLElement).setView( - coordinates || [46.505, 3], - 13 - ); - - tileLayer( - 'https://{s}.tile.jawg.io/jawg-sunny/{z}/{x}/{y}.png?access-token=sOXVrxPultoFMoo0oQigvvfXgPxaX0OFlFJF7y1rw0ZQy1c1yFTSnXSVOBqw0W6Y', - { - maxZoom: 19, - attribution: - '© JawgMaps | © OSM contributors', - } - ).addTo(mymap); - const { markers, bounds } = this.creer_pins(this.lieux, coordinates || [0, 0]); - markers.addTo(mymap); - mymap.fitBounds([ - [bounds.minLat, bounds.minLon], - [bounds.maxLat, bounds.maxLon], - ]); - } - - private toCoordinates(o: Coordinates): LatLngTuple | void { - if (o && typeof o.latitude === 'number' && typeof o.longitude === 'number') { - return [o.latitude, o.longitude]; - } - } - - connectedCallback() { - super.connectedCallback(); - - this.requestUpdate().then(() => this.loadMap()); - } - - private creer_pins(lieux: LieuAffichableAvecDistance[], defaultCoordinates: LatLngTuple) { - const bounds = { - minLat: defaultCoordinates[0] || 180, - maxLat: defaultCoordinates[0] || -180, - minLon: defaultCoordinates[1] || 180, - maxLon: defaultCoordinates[1] || -180, - }; - const markers = lieux - .filter((lieu) => lieu.disponible) - .reduce((markers: L.MarkerClusterGroup, lieu: LieuAffichableAvecDistance) => { - const coordinates = this.toCoordinates(lieu.location); - if (coordinates) { - var string_popup = ` - ${lieu.nom} - - ${lieu.metadata.address} - - ${ - lieu.metadata.phone_number - ? ` - - - - ${Strings.toNormalizedPhoneNumber(lieu.metadata.phone_number)} - - - - ` - : '' - } - - ${TYPES_LIEUX[lieu.type]} - - - ${lieu.vaccine_type} - - - ${this.prochainRDV(lieu)} - - - Prendre rendez-vous - - `; - if (lieu.distance === undefined || lieu.distance < 50) { - bounds.minLat = Math.min(coordinates[0], bounds.minLat); - bounds.maxLat = Math.max(coordinates[0], bounds.maxLat); - bounds.minLon = Math.min(coordinates[1], bounds.minLon); - bounds.maxLon = Math.max(coordinates[1], bounds.maxLon); - } - var newMarker = marker(coordinates, { - icon: new Icon.Default({ imagePath: `${Router.basePath}assets/images/png/` }), - }).bindPopup(string_popup); - newMarker.on('click', function () { - // @ts-ignore - this.openPopup(); - }); - markers.addLayer(newMarker); - } - - return markers; - }, new L.MarkerClusterGroup({ disableClusteringAtZoom: 9 })); - - return { markers, bounds }; - } - private prochainRDV(lieu: LieuAffichableAvecDistance): string { - if (lieu && lieu.prochain_rdv) { - return this.toTitleCase(formatDate(parseISO(lieu.prochain_rdv), "EEEE d MMMM 'à' HH:mm", { locale: fr })); - } else { - return 'Aucun rendez-vous'; - } - } - - private toTitleCase(date: string): string { - return date.replace(/(^|\s)([a-z])(\w)/g, (_, leader, letter, loser) => - [leader, letter.toUpperCase(), loser].join('') - ); - } -} diff --git a/src/index.ts b/src/index.ts index 62a6fb229..b60da2b00 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,6 @@ import 'tippy.js/dist/tippy.css'; import './vmd-app.component' import './components/vmd-search.component' import './components/vmd-appointment-card.component' -import './components/vmd-appointment-map.component' import './components/vmd-appointment-metadata.component' import './components/vmd-commune-or-departement-selector.component' import './components/vmd-button-switch.component' diff --git a/src/views/vmd-lieux.view.ts b/src/views/vmd-lieux.view.ts index d15cb3db6..d104e6c0d 100644 --- a/src/views/vmd-lieux.view.ts +++ b/src/views/vmd-lieux.view.ts @@ -82,9 +82,9 @@ export class VmdLieuxView extends LitElement { console.log("error1") }); - tileLayer('https://{s}.tile.jawg.io/jawg-sunny/{z}/{x}/{y}.png?access-token=sOXVrxPultoFMoo0oQigvvfXgPxaX0OFlFJF7y1rw0ZQy1c1yFTSnXSVOBqw0W6Y', { + tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, - attribution: '© JawgMaps | © OSM contributors ' + attribution: '© OpenStreetMap contributors' }).addTo(mymap); } diff --git a/src/views/vmd-rdv.view.ts b/src/views/vmd-rdv.view.ts index f18f9275a..dda5fc28a 100644 --- a/src/views/vmd-rdv.view.ts +++ b/src/views/vmd-rdv.view.ts @@ -65,7 +65,6 @@ export abstract class AbstractVmdRdvView extends LitElement { @property({type: Array, attribute: false}) cartesAffichees: LieuAffichableAvecDistance[] = []; @internalProperty() protected currentSearch: SearchRequest | void = undefined - @property() private showMap: boolean = false @query("#chronodose-label") $chronodoseLabel!: HTMLSpanElement; protected derniereCommuneSelectionnee: Commune|undefined = undefined; @@ -171,6 +170,7 @@ export abstract class AbstractVmdRdvView extends LitElement {
+
${lieuxDisponibles.length ? html`

@@ -200,35 +200,21 @@ export abstract class AbstractVmdRdvView extends LitElement {

`} - -
- -
${repeat(this.cartesAffichees || [], - (c => `${c.departement}||${c.nom}||${c.plateforme}}`), - (lieu, index) => { - return html``; + (c => `${c.departement}||${c.nom}||${c.plateforme}}`), + (lieu, index) => { + return html``; })}
-
- ${this.showMap ? html`` : html``} -
${SearchRequest.isStandardType(this.currentSearch)?html`

Les critères d'éligibilité sont vérifiés lors de la prise de rendez-vous