Recherche dans la BAN

Retour

Cette section à pour but de montrer la recherche via la ban (base d'adresse nationale):

• Recherche limitée à certaines villes autour de Rennes

Démo

{
  "jsLib": [
    "https://karteis.sct.saas-gfi.eu/dist/mapviewer/latest/karteis-mapviewer-var.js"
  ]
}

<!-- Ne pas utiliser dans votre code -->
<!-- La déclaration du css n'est utile que pour l'affichage sur le site d'exemples -->
<link rel="stylesheet" href="/mapviewer/mapviewer.css">
<!-- Ne pas utiliser dans votre code -->

<!-- Dans nos exemple on utilise font-awesome pour afficher les icones de boutons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Le div qui sera utilisé pour injecter la carte -->
<div id="kmap" style="height:400px;" />

// Initialisation de la carte avec ses plugins
const kmapvInstance = (new kmapv.Mapviewer({
    mapdiv: document.getElementById('kmap'), // Il est aussi possible d'utiliser directement l'id du div contenant la carte
    projection: 'EPSG:3857',
    defaultCenter: [0, 6094400],
    defaultZoom: 5,
    minZoom: 5,
    maxZoom: 22,
}))
 .use(kmapv.CommonLayer({})) // charge le plugin générique des calques
 .use(kmapv.BackgroundLayer({})) // charge le plugin de prise en charge des fond de plans
 .use(kmapv.DataLayer({})) // chage le plugin de prise en charge des couche de données


// Ajout du fond de plan OSM
kmapvInstance.backgroundLayer.addBackgroundLayer(
    'background-osm', // identifiant
    'osm', // type
    {
        idGroup: "FondDePlan", // groupe ou ajouter le calque
        title: 'OSM', // libellé
        zIndex: 0, // z-order
        baseLayer: false // les calques avec baseLayer = true dans un même groupe s'affiche avec un radiobutton (un seul a la fois)
})

const resultZoom =  16;
const postFilters =  [];
const limit = 10;
const reverse = false;
const reverseTitle = 'Cliquer sur la carte...';
const label = 'label';
const placeholder = 'Rechercher';
const position = true;
const maxItems =  10;
const typing = 300;
const minLength = 3;
const citycodes = [35055,35238,35022,35216,35315,35059,35065,35066,35076,35079,35080,35081,35131,35180,35189,35250,35266,35281,35353,35363,35024,35039,35047,35058,35144,35204,35208,35240,35275,35278,35334,35352,35351,35032,35051,35088,35196,35206,35210,35001,35120,35139,35245];

kmapvInstance.addSearchControl({
    provider: 'ban',
    reverse,
    reverseTitle,
    label,
    placeholder,
    position,
    limit,
    maxItems,
    //typing,
    minLength,
    citycodes,
    resultZoom,
    postFilters,
})