2023-01-11 15:35:12 +01:00
const minZoomForRequest = 16 ;
2022-10-14 13:56:31 +02:00
const urlADSL = 'https://tools.aquilenet.fr/cgi-bin/recherchend.cgi'
const urlTestFTTH = 'https://tools.aquilenet.fr/cgi-bin/test.cgi'
2022-04-13 11:04:48 +02:00
const streetTypeConversion = new Map ( ) ;
streetTypeConversion . set ( "aire" , "aire" )
streetTypeConversion . set ( "allée" , "all" )
streetTypeConversion . set ( "allee" , "all" )
streetTypeConversion . set ( "avenue" , "av" )
streetTypeConversion . set ( "base" , "base" )
streetTypeConversion . set ( "boulevard" , "bd" )
streetTypeConversion . set ( "cami" , "cami" )
streetTypeConversion . set ( "carrefour" , "car" )
streetTypeConversion . set ( "chemin" , "che" )
streetTypeConversion . set ( "cheminement" , "chem" )
streetTypeConversion . set ( "chaussée" , "chs" )
streetTypeConversion . set ( "cité" , "cite" )
streetTypeConversion . set ( "cite" , "cite" )
streetTypeConversion . set ( "clos" , "clos" )
streetTypeConversion . set ( "coin" , "coin" )
streetTypeConversion . set ( "corniche" , "cor" )
streetTypeConversion . set ( "cote" , "cote" )
streetTypeConversion . set ( "cour" , "cour" )
streetTypeConversion . set ( "cours" , "crs" )
streetTypeConversion . set ( "domaine" , "dom" )
streetTypeConversion . set ( "descente" , "dsc" )
streetTypeConversion . set ( "ecart" , "eca" )
streetTypeConversion . set ( "esplanade" , "esp" )
streetTypeConversion . set ( "faubourg" , "fg" )
streetTypeConversion . set ( "gare" , "gare" )
streetTypeConversion . set ( "grande rue" , "gr" )
streetTypeConversion . set ( "hameau" , "ham" )
streetTypeConversion . set ( "halle" , "hle" )
streetTypeConversion . set ( "ilôt" , "ilot" )
streetTypeConversion . set ( "impasse" , "imp" )
streetTypeConversion . set ( "lieu dit" , "ld" )
streetTypeConversion . set ( "lotissement" , "lot" )
streetTypeConversion . set ( "marché" , "mar" )
streetTypeConversion . set ( "montée" , "mte" )
streetTypeConversion . set ( "parc" , "parc" )
streetTypeConversion . set ( "passage" , "pas" )
streetTypeConversion . set ( "place" , "pl" )
streetTypeConversion . set ( "plan" , "plan" )
streetTypeConversion . set ( "plaine" , "pln" )
streetTypeConversion . set ( "plateau" , "plt" )
streetTypeConversion . set ( "pont" , "pont" )
streetTypeConversion . set ( "port" , "port" )
streetTypeConversion . set ( "promenade" , "pro" )
streetTypeConversion . set ( "parvis" , "prv" )
streetTypeConversion . set ( "quartier" , "qua" )
streetTypeConversion . set ( "quai" , "quai" )
streetTypeConversion . set ( "résidence" , "res" )
streetTypeConversion . set ( "residence" , "res" )
streetTypeConversion . set ( "ruelle" , "rle" )
streetTypeConversion . set ( "rocade" , "roc" )
streetTypeConversion . set ( "rond point" , "rpt" )
streetTypeConversion . set ( "route" , "rte" )
streetTypeConversion . set ( "rue" , "rue" )
streetTypeConversion . set ( "sentier" , "sen" )
streetTypeConversion . set ( "sente" , "sen" )
streetTypeConversion . set ( "square" , "sq" )
streetTypeConversion . set ( "tour" , "tour" )
streetTypeConversion . set ( "terre-plein" , "tpl" )
streetTypeConversion . set ( "traverse" , "tra" )
streetTypeConversion . set ( "villa" , "vla" )
streetTypeConversion . set ( "village" , "vlge " )
streetTypeConversion . set ( "voie" , "voie" )
streetTypeConversion . set ( "zone artisanale" , "za" )
streetTypeConversion . set ( "zone d'aménagement concerté" , "zac" )
streetTypeConversion . set ( "zone d'aménagement différé" , "zad" )
streetTypeConversion . set ( "zone industrielle" , "zi" )
streetTypeConversion . set ( "zone" , "zone" )
2023-01-11 15:35:12 +01:00
let markers = new Map ( ) ;
// Default search bounds
DEFAULT _MAX _LNG _INTERVAL = 0.0028
DEFAULT _MAX _LAT _INTERVAL = 0.0014
// Search bounds from server
server _max _lng _interval = undefined
server _max _lat _interval = undefined
function getRectangleCoord ( map ) {
max _lng _interval = DEFAULT _MAX _LNG _INTERVAL
max _lat _interval = DEFAULT _MAX _LAT _INTERVAL
if ( server _max _lat _interval !== undefined && server _max _lng _interval !== undefined ) {
max _lng _interval = server _max _lng _interval
max _lat _interval = server _max _lat _interval
}
let center = map . getCenter ( ) ;
let corner1 = L . latLng ( center . lat - ( max _lat _interval / 2 ) , center . lng - ( max _lng _interval / 2 ) ) ;
let corner2 = L . latLng ( center . lat + ( max _lat _interval / 2 ) , center . lng + ( max _lng _interval / 2 ) ) ;
return [ corner1 , corner2 ]
}
2022-10-14 13:56:31 +02:00
2022-02-22 12:48:50 +01:00
function initMap ( btn ) {
2022-03-23 22:54:04 +01:00
// Init map position/zoom. Potentially using what's in the URL search string.
const params = new URLSearchParams ( window . location . search ) ;
let x = parseFloat ( params . get ( 'x' ) ) ;
let y = parseFloat ( params . get ( 'y' ) ) ;
let z = parseInt ( params . get ( 'z' ) ) ;
let map = L . map ( 'map' ) ;
if ( x && y && z ) {
map . setView ( [ y , x ] , z ) ;
fetchEligData ( map ) ;
} else {
map . setView ( [ 46.710 , 3.669 ] , 6 ) ;
}
2022-02-22 17:01:34 +01:00
2022-03-23 22:54:04 +01:00
L . tileLayer ( 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png' , {
2023-01-11 18:14:48 +01:00
attribution : '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' ,
maxNativeZoom : 19 ,
maxZoom : 19
2022-03-23 22:54:04 +01:00
} ) . addTo ( map ) ;
2022-02-22 12:48:50 +01:00
2023-01-11 15:35:12 +01:00
map . on ( "zoom move" , ( ) => {
2022-03-23 22:54:04 +01:00
/* We only want to enable the search button when we reached a sufficient zoom level */
if ( btn . disabled && map . getZoom ( ) >= minZoomForRequest ) {
displayBtn ( btn ) ;
}
if ( ! btn . disabled && map . getZoom ( ) < minZoomForRequest ) {
hideBtn ( btn ) ;
}
} ) ;
2023-01-11 15:35:12 +01:00
map . on ( "zoomend moveend" , ( ) => {
if ( map . getZoom ( ) >= minZoomForRequest ) {
fetchEligData ( map ) ;
}
} ) ;
2022-03-23 22:54:04 +01:00
return map ;
2022-02-21 15:28:19 +01:00
}
2023-01-11 15:35:12 +01:00
async function initLimitsBox ( map , btn ) {
// Create box to show where data is fetched
const box = createRectangleBox ( map ) ;
await getServerBoxBounds ( map , box ) ;
box . addTo ( map ) ;
2023-01-11 17:12:21 +01:00
map . on ( "zoom move zoomend moveend" , ( ) => {
2023-01-11 15:35:12 +01:00
box . setBounds ( getRectangleCoord ( map ) )
} )
btn . addEventListener ( "click" , ( ) => {
2023-01-11 17:12:21 +01:00
getServerBoxBounds ( map , box ) ;
} ) ;
addEventListener ( "resize" , ( ) => {
getServerBoxBounds ( map , box ) ;
2023-01-11 15:35:12 +01:00
} ) ;
2023-01-11 17:12:21 +01:00
2023-01-11 15:35:12 +01:00
}
function createRectangleBox ( map ) {
2023-01-11 16:44:06 +01:00
return L . rectangle ( getRectangleCoord ( map ) , { color : "#ff7800" , fillOpacity : 0.07 , weight : 1 } ) ;
2023-01-11 15:35:12 +01:00
}
// Ask server the narrowed area bounds that it will search in
async function getServerBoxBounds ( map , box ) {
const bounds = map . getBounds ( ) ;
const sw = bounds . getSouthWest ( ) ;
const ne = bounds . getNorthEast ( ) ;
const reqUri = encodeURI ( ` eligdata/bounds?swx= ${ sw . lng } &swy= ${ sw . lat } &nex= ${ ne . lng } &ney= ${ ne . lat } ` ) ;
const resp = await fetch ( reqUri ) ;
if ( resp . status != 200 ) {
return
}
const data = await resp . json ( ) ;
server _max _lat _interval = data . bounds . ney - data . bounds . swy
server _max _lng _interval = data . bounds . nex - data . bounds . swx
box . setBounds ( getRectangleCoord ( map ) )
}
2022-02-21 15:28:19 +01:00
function initAddrSearch ( map ) {
2022-03-23 22:54:04 +01:00
const autocompleteOptions = {
debounceTime : 300 ,
search : async ( query ) => {
if ( query . length > 2 ) {
const mapCenter = map . getCenter ( ) ;
const reqUri = ` https://photon.komoot.io/api/?q= ${ encodeURI ( query ) } &lat= ${ mapCenter . lat } &lon= ${ mapCenter . lng } &limit=20&lang=fr ` ;
const source = await fetch ( reqUri ) ;
const data = await source . json ( ) ;
return data . features ;
} else {
return [ ] ;
}
} ,
renderResult : ( res , props ) => {
const p = res . properties ;
if ( p . name && p . postcode && p . city && p . county && res . geometry . coordinates && res . geometry . coordinates . length === 2 )
return ` <li ${ props } > ${ p . name } - ${ p . postcode } ${ p . city } , ${ p . county } </li> ` ;
else
return "" ;
} ,
onSubmit : async ( res ) => {
const searchInput = document . getElementById ( 'search-addr-autocomplete-input' ) ;
const p = res . properties ;
searchInput . value = ` ${ p . name } - ${ p . postcode } ${ p . city } , ${ p . county } ` ;
// We already filtered out the result not having strictly 2 coordinates at item display
map . setView ( [ res . geometry . coordinates [ 1 ] , res . geometry . coordinates [ 0 ] ] , 19 ) ;
fetchEligData ( map ) ;
}
} ;
const autocompleteAddr = new Autocomplete ( "#search-addr-autocomplete" , autocompleteOptions ) ;
return autocompleteAddr ;
2022-02-21 15:28:19 +01:00
}
2022-02-21 17:21:21 +01:00
function updateEligData ( map , eligData ) {
2022-03-23 22:54:04 +01:00
let buildings = eligData . buildings ;
2023-01-11 15:35:12 +01:00
buildings . forEach ( building => {
2023-01-11 16:44:06 +01:00
if ( ! markers . has ( building . idImm ) ) {
2023-01-11 15:35:12 +01:00
const latlng = new L . latLng ( building . y , building . x ) ;
let addrImm = ` ${ building . numVoieImm } ${ building . typeVoieImm } ${ building . nomVoieImm } `
if ( building . bat _info != "" ) {
addrImm += ` (Bat ${ building . bat _info } ) `
2022-12-09 12:01:55 +01:00
}
2023-01-11 15:35:12 +01:00
let colorMarker = 'black'
let messageElig = ` `
eligTestApi = ` eligtest/ftth?idImm= ${ building . idImm } &codePostal= ${ building . codePostal } &axione= ${ building . aquilenetEligStatus . isEligible } &liazo= ${ building . fdnEligStatus . isEligible } `
// éligible chez Aquilenet, lien pour le test
if ( building . aquilenetEligStatus . isEligible ) {
2022-12-09 12:01:55 +01:00
2023-01-11 16:44:06 +01:00
// Si fibre Axione déployé mais pas encore commandable
if ( building . aquilenetEligStatus . ftthStatus == "DEPLOYE MAIS NON COMMANDABLE" ) {
colorMarker = 'orange'
messageElig = ` <p class=deployeeAquilenet>Fibre deployée mais ne sera commandable qu \' à partir du ${ building . aquilenetEligStatus . dateCommandable } </p> `
} else {
messageElig = ` <p class=deployeeAquilenet>Fibre deployée et disponible par Aquilenet !</p> `
const zip = encodeURIComponent ( building . codePostal ) ;
const idImm = encodeURIComponent ( building . idImm ) ;
messageElig += ` <br/><a href= ${ urlTestFTTH } ?ftth=1&axione=1&adsltel=NOUVEAU&cp= ${ zip } &refimmeuble= ${ idImm } ` +
2023-02-28 22:31:35 +01:00
` target="_blank">Tester l'éligibilité</a> `
2023-01-11 16:44:06 +01:00
colorMarker = 'green'
2023-01-11 15:35:12 +01:00
}
// pas de données Axione mais Kosc nous renvoie qque chose à cette adresse (fdnEligStatus)
// c'est peut être OK, on croise avec les données ARCEP (othersEligStatus)
// Enfin on affiche un lien vers le test d'éligibilté KOSC à cette adresse
2023-05-24 20:08:35 +02:00
} else if ( /* building.fdnEligStatus.isEligible && */ building . othersEligStatus . isEligible ) {
2023-01-11 15:35:12 +01:00
messageElig = ` <p class=deployeeFDN>Fibre deployee mais pas chez Axione ! `
2023-10-05 21:35:51 +02:00
messageElig += ` <br/><a href= ${ eligTestApi } target="_blank">Tester l'eligibilite par Kosc, Netwo et Bouygues</a></p> `
2023-01-11 15:35:12 +01:00
colorMarker = 'orange'
// Pas de données Kosc ou Axione mais l'ARCEP nous dit qu'une fibre est déployée à cette adresse
} else if ( building . othersEligStatus . isEligible ) {
messageElig = ` <p class=deployeeAutres>Fibre deployee mais non eligible Aquilenet, desole :(</p> `
colorMarker = 'red'
// Pas de fibre il semblerait, proposer un test ADSL Aquilenet
} else {
messageElig = ` <p class=nonDeployee>Fibre non deployee :(</p> `
const zip = encodeURIComponent ( building . codePostal ) ;
const comm = encodeURIComponent ( building . commune ) ;
let convertType = streetTypeConversion . get ( building . typeVoieImm . toLowerCase ( ) ) ;
if ( ! convertType ) {
convertType = building . typeVoieImm ;
}
const street = encodeURIComponent ( ` ${ convertType } ${ building . nomVoieImm } ` )
const street _nb = encodeURIComponent ( building . numVoieImm )
messageElig += ` <br/><a href= ${ urlADSL } ?zip= ${ zip } &city= ${ comm } &street= ${ street } &street_nb= ${ street _nb } &gps=&do=1&submit=Valider ` +
2023-10-05 21:35:51 +02:00
` >Tester ADSL a cette adresse</a><br/>Si la fibre a été recemment installée chez vous, il se pourrait que ce test soit erroné, <a href= ${ eligTestApi } >cliquez ici pour tout de même tester l'eligibilité fibre</a> `
2023-01-11 15:35:12 +01:00
if ( building . othersEligStatus . reasonNotEligible != "" ) {
messageElig += ` <br/><br/>Status general ARCEP: ${ building . othersEligStatus . reasonNotEligible } `
}
2022-04-13 11:04:48 +02:00
}
2023-01-11 15:35:12 +01:00
// Si pas d'éligibilité fibre, on affiche la raison si elle existe
if ( building . aquilenetEligStatus . reasonNotEligible != "" ) {
messageElig += ` <br/> Pour Aquilenet, raison non eligible: ${ building . aquilenetEligStatus . reasonNotEligible } `
2023-01-11 16:44:06 +01:00
if ( building . aquilenetEligStatus . dateCommandable != "" ) {
messageElig += ` (date commandable: ${ building . aquilenetEligStatus . dateCommandable } ) `
}
2022-04-12 23:17:40 +02:00
}
2023-01-11 15:35:12 +01:00
var markerIcon = new L . Icon ( {
iconUrl : ` static/icons/marker-icon- ${ colorMarker } .png ` ,
shadowUrl : 'static/vendor/images/marker-shadow.png' ,
iconSize : [ 25 , 41 ] ,
iconAnchor : [ 12 , 41 ] ,
popupAnchor : [ 1 , - 34 ] ,
shadowSize : [ 41 , 41 ]
} ) ;
2023-03-03 14:16:34 +01:00
// if (building.othersEligStatus.isEligible) {
// messageElig += `<br/><a target="_blank" href=/eligibilite/netwo?lat=${building.y}&lng=${building.x}` +
// `>Tester d'autres offres via Netwo</a>`
// }
2023-01-11 15:35:12 +01:00
const marker = new L . marker ( latlng , {
2023-01-11 16:44:06 +01:00
icon : markerIcon ,
zIndexOffset : - building . etat _imm _priority
} )
2023-01-11 15:35:12 +01:00
. bindPopup ( ` ${ addrImm } <br/> ${ building . codePostal } ${ building . commune } ` +
` <br/><br/> ${ messageElig } <br/><br/>Ref Immeuble: ${ building . idImm } ` , {
2023-01-11 16:44:06 +01:00
maxWidth : 560
} ) ;
2023-01-11 15:35:12 +01:00
map . addLayer ( marker ) ;
markers . set ( building . idImm , marker )
2022-04-12 23:17:40 +02:00
}
2022-03-23 22:54:04 +01:00
} ) ;
2022-02-21 17:21:21 +01:00
}
2022-02-22 17:01:34 +01:00
function updateUrl ( map ) {
2022-03-23 22:54:04 +01:00
const c = map . getCenter ( ) ;
history . replaceState ( { } , "" , encodeURI ( ` ?x= ${ c . lng } &y= ${ c . lat } &z= ${ map . getZoom ( ) } ` ) ) ;
2022-02-22 17:01:34 +01:00
}
2022-02-21 17:21:21 +01:00
async function fetchEligData ( map ) {
2022-03-23 22:54:04 +01:00
const zoom = map . getZoom ( ) ;
if ( zoom >= minZoomForRequest ) {
const bounds = map . getBounds ( ) ;
const sw = bounds . getSouthWest ( ) ;
const ne = bounds . getNorthEast ( ) ;
2023-01-11 15:35:12 +01:00
let btn = document . getElementById ( "btn-load-elig-data" ) ;
2022-04-12 23:17:40 +02:00
waitBtn ( btn ) ;
2022-10-14 13:56:31 +02:00
const reqUri = encodeURI ( ` eligdata?swx= ${ sw . lng } &swy= ${ sw . lat } &nex= ${ ne . lng } &ney= ${ ne . lat } ` ) ;
2023-01-11 15:35:12 +01:00
const resp = await fetch ( reqUri ) ;
if ( resp . status == 200 ) {
const eligData = await resp . json ( ) ;
updateEligData ( map , eligData ) ;
} else {
error = await resp . text ( )
console . log ( ` Error could not get data from server: ${ resp . status } ${ error } ` )
}
2022-03-23 22:54:04 +01:00
updateUrl ( map ) ;
2022-04-12 23:17:40 +02:00
displayBtn ( btn ) ;
2022-03-23 22:54:04 +01:00
}
2022-02-21 17:21:21 +01:00
}
2022-02-22 12:48:50 +01:00
function initBtn ( ) {
2022-03-23 22:54:04 +01:00
const btn = document . getElementById ( "btn-load-elig-data" ) ;
btn . disabled = true ;
2023-01-11 15:35:12 +01:00
btn . title = "Veuillez zoomer plus la carte pour charger l'éligibilité." ;
2022-03-23 22:54:04 +01:00
return btn ;
2022-02-22 12:48:50 +01:00
}
2022-02-21 17:21:21 +01:00
2023-01-11 15:35:12 +01:00
function setBtnListener ( btn , map ) {
btn . onclick = ( ) => {
// Reset markers when button is clicked
if ( markers ) {
2023-01-11 16:44:06 +01:00
for ( let marker of markers . values ( ) ) {
2023-01-11 15:35:12 +01:00
map . removeLayer ( marker ) ;
}
markers . clear ( ) ;
}
fetchEligData ( map ) ;
}
}
2022-02-22 17:01:34 +01:00
function displayBtn ( btn ) {
2023-01-11 15:35:12 +01:00
btn . classList . remove ( 'loader' ) ;
2022-03-23 22:54:04 +01:00
btn . disabled = false ;
2023-01-11 15:35:12 +01:00
btn . title = "Actualiser la recherche dans cette zone"
btn . innerHTML = "Actualiser" ;
2022-02-22 17:01:34 +01:00
}
function hideBtn ( btn ) {
2022-03-23 22:54:04 +01:00
btn . disabled = true ;
2023-01-11 15:35:12 +01:00
btn . innerHTML = "Zoomez sur la carte" ;
btn . title = "Veuillez zoomer plus la carte afin de lancer la recherche d'éligibilité." ;
2022-02-22 17:01:34 +01:00
}
2022-10-14 13:56:31 +02:00
2022-04-12 23:17:40 +02:00
function waitBtn ( btn ) {
btn . disabled = true ;
2023-01-11 15:35:12 +01:00
btn . innerHTML = "" ;
2022-04-12 23:17:40 +02:00
btn . title = "Chargement des batiments..." ;
2023-01-11 15:35:12 +01:00
btn . classList . add ( 'loader' ) ;
2022-04-12 23:17:40 +02:00
}
2022-02-22 17:01:34 +01:00
2023-01-11 15:35:12 +01:00
// Init button and map
2022-02-22 12:48:50 +01:00
const btn = initBtn ( ) ;
const map = initMap ( btn ) ;
2023-01-11 15:35:12 +01:00
const addrSearch = initAddrSearch ( map ) ;
setBtnListener ( btn , map ) ;
// Init a limits box that shows area where data will be fetched
initLimitsBox ( map , btn ) ;