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:
-
WhatIsHere kontrola sartzen da mapan.
-
WhatIsHere-ek dauden kategoriak kargatzen ditu "url.categories" URLaren bitartez eta erabiltzailearen interfazean jartzen ditu..
- Kategoria bat aktibatzen denean, "url.search" URLa erabiltzen da POIak MBR ikusgarrian kargatzeko.
- Mapa higitzen den bakoitzean, "url.search" URLa erabiliko da lehen mapatik kanpo zeuden POI berriak kargatzeko.
- Erabiltzaileak POI baten ikonoan klik egiten duenean, "url.query" URLa erabiltzen da POIaren deskribapena kargatzeko.
- POIarekin lotutako pop-up batean azalduko da deskribapen hori.
- 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>