OHARRA: paperari dagokion orientazioa aukeratu zure nabigatzailearan inprimatze aukeretan. Honakoa egin dezakezu: orria inprimatu edo bisorera itzuli.

Zer dago hemen? (What is here?)

Dokumentuetan erabilitako izenak:

  • POI: Point Of Interest (puntu interesgarria)
  • MBR: Minimum Bounding Rectangle (gainazal bat zehazten du mapan bi koordenadaren bitartez)

Funtzioaren deskribapena

WhatIsHere puntu interesgarriak mapan adierazten dituen OpenLayers-en kontrol bat da. POIek lekuak adierazten dituzte. Adibidez, POIek honakoak adieraz ditzakete

  • Jarduerak: farmaziak, zinemak, tabernak, jatetxeak
  • Parkeak eta lorategiak
  • Eskulturak
  • ...

Honakoek osatzen dituzte POIak:

  • Koordenatuak mapan (non dagoen).
  • Puntua erakustean marker gisa erabili den irudikatutako ikonoa.
  • Identifikatzeko kode bakarra.
  • POIak adierazten duen lekuaren geometria GML formatuan (aukeran, badago, geometria adieraziko da, bestela, puntua bakarrik).

Gainera, "POIen kategoriak" kontzeptua definitzen da. POIaren kategoria bakoitzak POI moten multzo bat adierazten du. Hauek dira kategorien adibideak:

  • Osasuna, honakoek osatua: Farmaziak, ospitaleak eta klinikak
  • Kultura, honakoek osatua: museoak, eskulturak eta liburutegiak

Kontrolaren erabilera

OpenLayers-en kontrol arrunt bat da, beraz, mapan sartu ahal izango da !Openlayers-ek emandako gainerako kontrolak bezala:

  map.addControl( new OpenLayersExt.Control.WhatIsHere());

Kontrola mapan sartutakoan, erabiltzaileak aktiba dezake kontrol-paneleko erlaitzean klik eginez.

Informaziorako sarrera eta funtzionatzeko sekuentzia

WhatIsHere kontrolak hiru URLak erabiltzen ditu (erabiltzaileak nahi dituenean definitutakoak) beharrezkoa den informazioa lortzeko. URL horiek aurrerago deskribatzen dira.

Hauxe da funtzionatzeko sekuentzia:

  1. WhatIsHere kontrola sartzen da mapan.

  2. WhatIsHere-ek dauden kategoriak kargatzen ditu "url.categories" URLaren bitartez eta erabiltzailearen interfazean jartzen ditu..

  3. Kategoria bat aktibatzen denean, "url.search" URLa erabiltzen da POIak MBR ikusgarrian kargatzeko.
    1. Mapa higitzen den bakoitzean, "url.search" URLa erabiliko da lehen mapatik kanpo zeuden POI berriak kargatzeko.
  4. Erabiltzaileak POI baten ikonoan klik egiten duenean, "url.query" URLa erabiltzen da POIaren deskribapena kargatzeko.
    1. POIarekin lotutako pop-up batean azalduko da deskribapen hori.
  5. Erabiltzaileak POI baten “geometria azaldu” botoian klik egiten duenean, "url.geometry" erabiltzen da PPOIak adierazitako lekuaren geometria kargatzeko.

Kontrolaren konfigurazio-parametroak

Konfigurazio-objektu batean (hash) zehaztutako hainbat parametrotan konfigura daiteke kontrola:

Parametroa Balio lehenetsia
 {                                                                                                                        
     enabled:        true,                                                                                                
     urls: {                                                                                                              
       categories:   /categories.json,                                                                    
       search:       /search/mbr/xmin/:xmin/ymin/:ymin/xmax/:xmax/ymax/:ymax/categories/:categories.json, 
       geometry:     /geometry/code/:code.gml,                                                            
       query:        /query/code/:code.html                                                               
     }                                                                                                                    
 }                                                                                                                        

Konfigurazio-parametroak modu partzialean zehaztu daitezke. Erabiltzaileak konfigurazio-parametro bat zehazten ez badu, parametro horrentzat lehenetsi den balioa erabiliko du kontrolak.

Konfigurazio-parametro horiek kontrolera igaro daitezke instantzia egiteko aldian:

  map.addControl( new OpenLayersExt.Control.WhatIsHere( {
    urls: {
      categories: "categories/..."
    }
  }));

OpenLayers Extended-en instantzia egitean ere pasa daitezke:

  OpenLayersExtLoader.load( {
    "version":  "1.0",
    "debug":    true,
    "height":   "600px",
    "map-libs": {
      "google": { "version": "...", "key": "..." },
      "yahoo": { "version": "...", "key": "..." },
      "microsoft": { "version": "...", "key": "..."}
    },
    "config": {
      "whatishere": {
        "enabled": false      // kontrola erabat desaktibatuko dugu
      }
    }
  });

Hainbat konfigurazio-parametro igaroz gero, hauxe izango da lehentasuna:

  • Kontrola sortzeko unean zuzenean igaro diren parametroak.
  • OpenLayers Extended-a sortzean igaro diren parametroak.

Konfigurazio-parametroetan zehaztutako URLek "URL txantiloiak" deskribatzen dituzte, konfigurazio-parametroak ere badituztelako. WhatIsHere kontrolak URLetako balio horiek ordezten dituzte balio errealekin URL horretako datuak kargatu aurretik. URLen konfigurazio parametroek ":parametroaren-izena" forma dute.

"enabled" parametroa

  • "true"-k kontrola gaitzen du.
  • "false"-k kontrola desgaitzen du.

"urls.categories" parametroa

Kategorien datuak kargatzeko kontrolak erabiltzen duen URLa zehazten du. URL honek ez du konfigurazio-parametrorik onartzen.

Kontrolak JSON formatuan itzultzea espero du, ondorengo formatuaren adibidearekin:

{ 
  "categories": [                                         // kategorien deskribapenaren hasiera
    {
      "description":  "Osasun zentroak",                  // erabiltzailearen interfazean erabilitako deskribapen luzea
      "title":        "Osasuna",                          // erabiltzailearen interfazean erabilitako deskribapen laburra
      "code":         "OSASUNA",                          // Kategoria hori adierazten duen testu-kate arbitrarioa (beste URLetan erabilitakoa gero)
      "icon": {                                           // erabiltzailearen interfazean erabilitako ikonoaren deskribapena
        "width":      "26",                               // ikonoaren irudiak duen zabalera (pixeletan)
        "height":     "33",                               // ikonoaren irudiak duen altuera (pixeletan)
        "offset_x":   "-13",                              // ikonoaren erdia edo “puntu aktiboa” horizontalean desplazatzea ezkerreko goiko ertzarekiko
        "offset_y":   "-33",                              // ikonoaren erdia edo “puntu aktiboa” bertikalki desplazatzea ezkerreko goiko ertzarekiko
        "url":        "/placemarker_icons/wb_02_01.png"   // erakutsiko den ikonoaren irudiaren URL
      }
    },
    { "description":  "Autobus geltokia",               // hurrengo kategoria
      "title":        "Garraioa",
      "code":         "GARRAIOA",
      "icon": {
        "width":      "26",
        "height":     "33",
        "offset_x":   "-13",
        "offset_y":   "-33",
        "url":        "/placemarker_icons/wb_05.png"
      }
     }
  ]
}

"urls.search" parametroa

MBR zehatz batean POIak kargatzeko erabili den URL zehazten du. URL honek ondorengo konfigurazio-parametroak onartzen ditu:

Parametroa Deskribapena
 :xmin  MBRaren X koordenatu minimoa
 :ymin  MBRaren Y koordenatu minimoa
 :xmax  MBRaren X koordenatu maximoa
 :ymax  MBRaren Y koordenatu maximoa
 :categories  Itzultzeko POIen kategoriak komekin bananduta dituzten kodeen zerrenda

Konfigurazio-parametroak dituzten URLen adibidea:

/api/1.0/eu/what-is-here/search/mbr/xmin/:xmin/ymin/:ymin/xmax/:xmax/ymax/:ymax/categories/:categories.json

Eta URL berbera kontrolak balio errealekin ordeztutako parametroekin:

/api/1.0/eu/what-is-here/search/mbr/xmin/-228933.86930244/ymin/5356355.4330135/xmax/-213684.68216226/ymax/5364954.5986941/categories/SANIDAD,TRANSPORTE.json

Kontrolak JSON formatuan itzultzea espero du, ondorengo formatuaren adibidearekin:

{
  "categories": [                                                           // kategoriak multzokatzen ditu
    {
      "code": "OSASUNA",                                                    // kategoria honen kodea
      "pois": [                                                             // kategoria honi dagozkion POIak
        {
          "code":                     "C_4_5-508",                          // POI hau identifikatzen duen kode bakarra (kode arbitrarioa baina bakarra erabil daitezkeen POI guztien artean)
          "coordinate": {                                                   // POIaren koordenatua
            "lat":                    "5361617.12211161",
            "lon":                    "-214381.92653163"
          },
          "show_geometry_on_search":  false,                                // POIaren geometria hasieran erakustea  
          "icon": {                                                         // POIaren ikono deskribatzailea (kategoriaren geometriaren desberdina izan daiteke)
            "offset_x":               "-13",
            "url":                    "/placemarker_icons/wb_02_01.png",
            "width":                  "26", 
            "height":                 "33",
            "offset_y":               "-33"
          }
        },
        {
          "code":                     "C_4_2-7637",                         // hurrengo POIa kategoria honetan
          "coordinate": {
            "lat":                    "5361319.95580418",
            "lon":                    "-214777.79362183"
          },
          "show_geometry_on_search":  false,
          "icon": {
            "offset_x":               "-13",
            "url":                    "/placemarker_icons/wb_05_06.png",
            "width":                  "26",
            "height":                 "33",
            "offset_y":               "-33"
          }
        }
      ]
    },
    {
      "code": "TRANSPORTE",                                                 // hurrengo kategoria bere POIekin
      "pois": [
        {
          "code":                     "C_8_8-12971",
          "coordinate": {
            "lat":                    "5361710.61043426",
            "lon":                    "-214513.297781279"
          },
          "show_geometry_on_search":  false,
          "icon": {
            "offset_x":               "-13",
            "url":                    "/placemarker_icons/wb_04_03.png",
            "width":                  "26", 
            "height":                 "33",
            "offset_y":               "-33"
          }
        }
      ]
    }
  ]
}

"urls.geometry" geometria

POI zehatz baten geometria kargatzeko erabili den URL zehazten du.

URL honek konfigurazio-parametro hauek onartzen ditu:

Parametroa Deskribapena
 :code  POIaren kode identifikatzailea

Konfigurazio-parametroak dituen URL-aren adibidea:

/api/1.0/eu/what-is-here/geometry/code/:code.gml

Eta URL berbera kontrolak balio errealekin parametroak ordeztu dituela:

/api/1.0/eu/what-is-here/geometry/code/C_4_5-281.gml

Geometriaren formatua GML formatuan behar du egon (http://en.wikipedia.org/wiki/Geography_Markup_Language), ondorengo adibidean bezala:

<wfs:FeatureCollection xmlns:bsc="http://www.bsc-eoc.org/bsc"
                       xmlns:wfs="http://www.opengis.net/wfs"
                       xmlns:gml="http://www.opengis.net/gml"
                       xmlns:ogc="http://www.opengis.net/ogc"
                       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  
    <gml:featureMember>
      <gml:Polygon srsName="SDO:900913" xmlns:gml="http://www.opengis.net/gml">
        <gml:outerBoundaryIs>
          <gml:LinearRing>
            <gml:coordinates decimal="." cs="," ts=" ">-230059.094096,5337565.546496 -230070.777861,5337562.873749 -230065.280491,5337538.788359 -230053.610295,5337541.474988 -230059.094096,5337565.546496 </gml:coordinates>
          </gml:LinearRing>
        </gml:outerBoundaryIs>
      </gml:Polygon>
    </gml:featureMember>
  
</wfs:FeatureCollection>

"urls.query" parametroa

POI zehatz baten informazioa lortzeko erabili den URL zehazten du.

URL honek ondorengo konfigurazio-parametroak onartzen ditu:

Parametroa Deskribapena
 :code  POIaren kode identifikatzailea

Konfigurazio-parametroak dituen URL adibideak:

/api/1.0/eu/what-is-here/query/code/:code.html

Eta URL berbera kontrolak balio errealekin ordeztutako parametroekin:

/api/1.0/eu/what-is-here/query/code/C_4_5-281.html

Informazioa HTML formatuan itzuli beharra dago, ondorengo adibidean bezala:

<div class="b5map-queryResults">
  <div class="b5map-queryResult b5map-queryResultActive">
    <h2>Osasun Zentroak</h2>
    <h3>C. Irura:Irurako K.</h3>
    <p>943 690720</p>
    <p class="b5map-queryResultActions clearfix">
      <a class="b5map-cleanBtn b5map-showGeometry" href="#">
        
        <span>Mapan erankutsi</span>
        <span style="display:none">Mapan ezkutatu</span>
      </a>
    </p>
  </div>
  
</div>

Erabileraren adibidea

WhatIsHere kontrola OpenLayers Extended-ekin bakarrik erabili ahal izango da.

Ondorengo HTML orrian ikus daiteke WhatIsHere "query parametroak" erabiltzen dituzten URLekin nola erabili (http://en.wikipedia.org/wiki/URI_scheme#Examples):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> Ejemplo del control WhatIsHere </title>
        
        <script src="/api/1.0/es/library/openlayers-ext/openlayers-ext-loader.js" type="text/javascript"></script>
        <script type="text/javascript">
          //<![CDATA[
          OpenLayersExtLoader.load( {
            "version":  "1.0",
            "debug":    true,
            "height":   "600px",
            "map-libs": {
              "google": { "version": "2", "key": "google-key" },
              "yahoo": { "version": "3.0", "key": "yahoo-key" },
              "microsoft": { "version": "6.1", "key": "microsoft-key"}
            },
            "config": {
              "whatishere": {
                "urls": {
                  categories:   "/categories.php",
                  search:       "/search.php?xmin=:xmin&ymin=:ymin&xmax=:xmax&ymax=:ymax&categories=:categories",
                  geometry:     "/geometry.php?code=:code",
                  query:        "/query.php?code=:code"
                }
              }
            }
          });
          //]]>
        </script>
        <script type="text/javascript">
          //<![CDATA[
          Event.observe( window, "load", function() {
            window.b5map = new OpenLayersExt.Map( "mymap");
          });
          //]]>
        </script>
        <style type="text/css">
          #mymap {
            width:      90%;
            margin:     auto;
            margin-top: 2em;
          }
        </style>
    </head>
    <body>
      <div id="mymap">
      </div>
    </body>
</html>