ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ

Transkript

1 ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ Fakulta Stavební Katedra mapování a kartografie SEMESTRÁLNÍ PROJEKT Webová aplikace pro efektivnější vyhledávání realit skupina F Praha květen 2012

2 Vedoucí semestrálního projektu: Ing. Martin Landa Autoři semestrálního projektu: Filip Zavadil Kateřina Jarošová Eva Linhartová Markéta Sedláčková 2

3 Obsah Úvod Zdroj dat Náplň databáze Popis aplikace Zájmové body Publikování mapové služby Vývoj aplikace a postup práce Závěr Zdroje Skripty

4 Úvod Vytvoření webové aplikace, která bude sloužit pro efektivnější vyhledávání realit. Jako mapové podklady budou použita data OpenStreetMap, která obsahují zájmové body např (lékař, škola). Tyto zájmové body umožní uživateli lépe filtrovat výsledky vyhledávání. Dalším vyhledávacím kritériem bude vzdálenost, max. vzdálenost od zájmových bodů. Výsledkem vyhledávání bude přehled realit vyhovující podmínkám nastavených uživatelem. Informace o realitách budou obsahovat údaje o vzdálenostech od např. 3 nejbližších škol, vzdálenost od zastávek hromadné dopravy a dalších zájmových bodů. Bude využit ArcGIS Server a ArcGIS Java-Script API, případně ještě jiný JavaScript framework. Výběr tématu naší aplikace byl odvíjen od situace, ve které se spousta mladých lidí v dnešní době nachází a to výběr bydlení. Téma nám je blízké a věříme, že hledání realit v určité vzdálenosti od zájmových bodů je velké zpříjemnění pro uživatele aplikace. Tu jsme se snažili vytvořit velice intuitivní a jednoduchou pro všechny uživatele. 4

5 1 Zdroj dat Data poskytla realitní kancelář Dům realit dostupný na Použitá data slouží pouze k ukázce funkčnosti aplikace a tudíž nejsou aktuální. Data pokrývají pouze území hlavního města Prahy. Zdrojem zájmových bodů byla data OpenStreetMap dostupný na 2 Náplň databáze Databáze realit byla plněna ručně, tedy všechny informace a fotky byly stahovány ze serveru Dům realit. Data byla ukládána prakticky systematicky, bylo dodržováno pravidlo, aby domy a byty byly rozmístěny po celé Praze. Také pak, aby databáze obsahovala jak pronájem, tak prodej realit. Po naplnění databáze byla data exportována do aplikace ArcMap a uložena do geodatabáze funkcí AddXY. Ukázka struktury: CREATE TABLE nemovitosti ( id INT PRIMARY KEY AUTO_INCREMENT, url VARCHAR(256) NOT NULL, -- druh VARCHAR(10) NOT NULL, -- byt, dum typ VARCHAR(10) NOT NULL, -- prodej, pronajem velikost VARCHAR(10), -- 1+kk, 3+1 plocha DOUBLE NOT NULL, -- 64, udavano v m3 mesto VARCHAR(256) NOT NULL, -- Praha 1 ulice VARCHAR(256) NOT NULL, -- Pobřežní 21 budova VARCHAR(256) NOT NULL, -- zděná, panelák vlastnictvi VARCHAR(256) NOT NULL, -- osobní GPSlon DOUBLE NOT NULL, -- delka v dekadickem tvaru GPSlat DOUBLE NOT NULL, -- sirka v dekadickem tvaru cena INTEGER NOT NULL, , udavano v CZK popis TEXT NOT NULL, poznamka TEXT ); 5

6 3 Popis aplikace Webová aplikace slouží k vyhledávání nemovitostí na území Prahy podle těchto kritérií: Městská část: Praha 1 / Praha 2 / Praha 10 Nabídka: nerozhoduje / prodej / pronájem Nemovitost: nerozhoduje / dům / byt Velikost: 1kk / 1+1 / 2+1 /... Plocha: [m 2 ] Cena: [Kč] Vlastnictví: nerozhoduje / osobní / družstevní Budova: nerozhoduje / cihlová / panelová / montovaná / dřevěná Zájmový bod, kde uživatel vybere typ zájmového bodu (škola, lékař, ) a zadá vzdálenost [m 2 ], do které by se měla nacházet realita. Po zadání parametrů se vyhledají vyhovující nemovitosti, které jsou vypsány v pravé části obrazovky. V mapovém okně je na tyto reality přiblíženo a jsou zvýrazněny symbolem kresleného domečku. Po vybrání jedné z položek se otevře v aplikaci nový panel s podrobnostmi reality a zároveň je na ni přiblíženo. Součástí informací o realitě jsou i fotografie, které se po kliknutí na odkaz zobrazí v plné velikosti v prohlížeči fotografií. Obr. 1: Výběr realit podle městské části. 6

7 Název a popis reality. Vzdálenost k zájmovým bodům Fotografie reality Obr. 2: Detail vyhledané nemovitosti. 7

8 4 Zájmové body Zájmovými body se v naší aplikaci rozumí místa, v jejichž blízkosti je bydlení tzv. příjemnější. Mnoho lidí si v dnešní době hledá byt či dům právě podle těchto zájmových bodů, jakými jsou např. lékaři, školy, ale i restaurace a kavárny. Typy zájmových bodů a jejich symbologie: 8

9 Data byla pomocí pluginu OpenStreetMap loader importována do geodatabáze v prostředí ArcGIS Desktop. Byla provedena jejich kontrola a editace formou atributových dotazů a nepotřebná data byla smazána (letiště, poštovní schránky, ). Symbologie zájmových bodů byla vytvořena v souladu s kartografickými pravidly v software AcrMap 10. Legenda je uvedena výše. 9

10 5 Publikování mapové služby Součástí mapového dokumentu je vizualizace vrstvy reality a zájmové body. Projekt byl následně uložen ve formátu *.msd pomocí funkce Save Map Service Definition. Formát.msd je výhodný pro optimalizaci mapového dokumentu při publikování služby na ArcGIS Server 10 Enterprise. Aplikace je dostupná na Mapová služba byla vypublikována v serverovém prostředí ArcGIS Server Manager, který je určený pro administraci mapového serveru. ArcGIS Server APIs Spolu s ArcGIS Serverem jsou dodávány i komplexní vývojové nástroje pro webové a mobilní platformy, které výrazně usnadňují tvorbu vlastních řešení. ArcGIS Server nabízí otevřenou platformou pro vývoj vlastních GIS aplikací s využitím moderních technologií jako jsou Java,.NET, Microsoft Silverlight, JavaScript a Adobe Flex. Možná je i integrace do aplikací založených na technologii Microsoft Sharepoint. Vývojová rozhraní pro webové mapové aplikace Pro vývoj webových aplikací jsou k dispozici klientská aplikační prostředí Web API pro Java- Script, Flex a Silverlight. Integraci webových služeb GIS do komplexních informačních systémů pak umožňují standardizovaná rozhraní webových služeb ArcGIS Serveru (SOAP, REST a OGC). 6 Vývoj aplikace a postup práce Aplikace využívá tyto JavaScript knihovny: ArcGIS JavaScript API - rozhraní pro definování webové mapy a pro její ovládání ExtJS 4 - knihovna pro definici uživatelského rozhraní (panelů, oken, tlačítek,...) Dojo - GUI knihovna, se kterou ArcGIS JS API imlicitně pracuje LightBox 2 - knihovna pro zobrazování fotografií 10

11 Pro grafické uživatelské rozhraní byl zvolen JavaScript Framework ExtJS4, který je volně použitelný, pokud je výsledný projekt v souladu s jeho licenčními podmínkami. V aplikaci byly použity prvky jako panel, okno, tabulka, tlačítko. Jednotlivá prostředí prvků byla definována pomocí JavaScriptu. Díky této technologii byla zaručena jak interaktivita, tak dynamičnost celé aplikace. Grafické rozhraní by mělo pomoci uživateli lépe se orientovat při vyhledávání a výběru nemovitosti. Dále je bodově uveden postup práce. index.html kód ve funkci init() je vykonán ihned při načítání stránky a obsahuje zejména definici mapového podkladu: o vytvoření extentu, zájmová část Praha o zvolení referenčního systému webmercator (wkid:102100) o využití služby ArcGISTiledMapServiceLayer a přidána základní mapa, služba je dostupná na: Základní mapa (Topografic Map) je poskytovaná zdarma pro uživatele ArcGIS. o přidání vrstvy realit a zájmových bodů službou ArcGISDynamicMapServiceLayer definovány fuknce pro identifikaci a dotazování o function dotazovani() nastavení parametrů výstupu, odkazu na odtazovanou službu a příslušnou vrstvu a atributy, na které se dotazování má vztahovat o function execute(query) funkce, která vykoná dotaz, po vykonání dotazu a obdržení odpovědi se asynchronně vykoná funkce showresults(results) o function showresults(results) - funkce se automaticky vykonává po obrdžení odpovědi po vykonání dotazu - jsou zde použity parametry, které se nesou v odpovědi z dotazu - obdržené informace se zde formátují do konečného HTML kódu pro vizualizaci 11

12 o function mapready(map) definování chování pro identifikaci prvků (co se má provést, pokud se klikne do mapy - je volána funkce executeidentifytask(evt) ) o function executeidentifytask(evt) rozponaní prvku a formátování výstupu GUI.js JS je soubor, kde je definováno uživatelské rozhraní využitím frameworku ExtJS4. Jsou zde použity zejména tyto prvky: Ext.container.Viewport Ext.panel.Panel Ext.tab.Panel Ext.form.Label Ext.button.Button Ext.form.ComboBox' Ext.grid.Panel vyhledavani.js Okno s vytvářením dotazu je definováno v tomto souboru. Jsou zde ošetřeny vstupní parametry a také vytvořen SQL dotaz (function createquery), dle kterého se výsledky filtrují. Pro tvorbu GUI bylo využito frameworku ExtJS. Obr. 4: Okno zadej dotaz. 12

13 vysledky.js Odpověď dotazu je formátována právě skriptem v tomto souboru. Jednotlivé relity jsou přidávány jako řádky do datagridu, který se objevuje v pravé části aplikace. Je zde možné řadit jednotlivé atributy podle hodnot (vzestupně, sestupně, dle abecedy...). function feedbig(data) Po kliknutí na nemovitost jak v mapě či v datagridu je zavolána tato funkce, která načte data příslušné nemovitosti a zformátuje je do HTML kódu. Je vytvořena nová záložka, která obsahuje informace o příslušné nemovitosti. photo.php Script, který je prováděn na straně serveru. Jako vstupní parametr je ID nemovitosti. Fotky jsou uložené na filesystemu a název adresáře odpovídá právě ID nemovitosti. Dále jsou nalezeny soubory v adresáři, vytvořen kus kódu HTML, pro zobrazování fotografií je použita knihovna lightbox 2. Script je z JavaScriptu volán metodou AJAX. 7 Závěr Při práci na tomto projektu jsme byli seznámeni s ArcGIS Serverem a vývojem takovéto aplikace. Naše webová aplikace pro efektivnější vyhledávání realit je dostupná pod všemi majoritními internetovými prohlížeči online na Při navrhování uživatelského prostředí byl kladen důraz, aby aplikace byla pro uživatele jednoduchá a práce s ní příjemná. 8 Zdroje Dům realit ArcGIS Server OpenStreetMap V Praze dne skupina F 13

14 9 Skripty index.html <?xml version="1.0" encoding="windows-1250"?> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <script type="text/javascript" src=" <script type="text/javascript">var dojoconfig = {parseonload: true;</script> <link rel="stylesheet" type="text/css" href=" <script type="text/javascript" src=" <script type="text/javascript" src="gui.js"></script> <script type="text/javascript" src="vyhledavani.js"></script> <script type="text/javascript" src="vysledky.js"></script> <script src="js/jquery min.js"></script> <script src="js/lightbox.js"></script> <link href="css/lightbox.css" rel="stylesheet" /> <link href=" aro/claro.css" rel="stylesheet" type="text/css" > <link rel="stylesheet" type="text/css" href=" ria/soria.css"> <link rel="stylesheet" type="text/css" href=" <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0;.esriScalebar{ padding: 20px 20px; #map{ padding:0; #mapa { width: 100%; height: 100%; #header {background-color: #dfe8f6 #footer {background-color: #dfe8f6 #titul {background-color: white #legend {background-color: white #lupaimg {background-image: url('images/lupa.jpeg'); width: 259px; height: 194px; border: 0; margin: 0; padding: 0; float: right; /*.titul {background-color: #dfe8f6;border: 1px solid black; */ </style> <title>vyhledavání realit </title> <script type="text/javascript"> dojo.require("dijit.layout.bordercontainer"); dojo.require("dijit.layout.contentpane"); dojo.require("esri.tasks.find"); dojo.require("esri.map"); dojo.require("esri.graphic"); dojo.require("esri.dijit.popup"); dojo.require("esri.tasks.geometry"); dojo.require("esri.dijit.legend"); var map; var identifytask,identifyparams; var legendlayers = []; function init() { 14

15 //setup the popup window pro identifikaci var popup = new esri.dijit.popup({ fillsymbol: new esri.symbol.simplefillsymbol(esri.symbol.simplefillsymbol.style_solid, new esri.symbol.simplelinesymbol(esri.symbol.simplelinesymbol.style_solid, new dojo.color([255,0,0]), 2), new dojo.color([255,255,0,0.25])), dojo.create("div")); var initextent = new esri.geometry.extent({"xmin": ,"ymin": ,"xmax": ,"ymax": ,"spatialReference":{"wkid": map = new esri.map("mapa",{infowindow:popup,extent:initextent var basemapurl= " var basemap = new esri.layers.arcgistiledmapservicelayer(basemapurl); map.addlayer(basemap); var imageparameters = new esri.layers.imageparameters(); imageparameters.format = "png24"; var dynamicmapservicelayer = new esri.layers.arcgisdynamicmapservicelayer(" rvices/pin2/2012-f-reality/mapserver"); legendlayers.push({layer:dynamicmapservicelayer,title:' ' dojo.connect(map,'onlayersaddresult',function(results){ //add the legend var legend = new esri.dijit.legend({ map:map, layerinfos:legendlayers, arrangement:esri.dijit.legend.align_left,"legend"); legend.startup(); map.addlayers([dynamicmapservicelayer]); dojo.connect(map, 'onload', function(themap) { dojo.connect(dijit.byid('mapa'), 'resize', map,map.resize); dojo.connect(map,"onload",mapready); dotazovani(); dojo.addonload(init); </script> </head> <body> <div id="header"> <img src="header.png"> </div> <div id="mapa"> </div> <div id="window"> 15

16 </div> <div id="titul"> <h2><i>reality pod lupou</i></h2> <p><b>tato aplikace byla vytvořena v rámci předmětu Projekt informatika 2 na magisterském studiu Stavební fakulty ČVUT v Praze oboru Geoinformatika.</b> </p> <p><b>aplikace slouží k vyhledávání nemovitostí v rámci Prahy. Po stisknutí tlačítka <u>zadat dotaz!</u> je možné uživatelem zadat přesné požadavky pro vyhledávání.</b> </p> <p><b> Data nemovitostí nám pro tento projekt poskytl Dům realit. Uvedená nabídka realit není aktuální a slouží spíše pro ukázku funkčnosti aplikace.</b> </p> <p><b>tento projekt zpracovala skupina F složená z:</b> </p> <p><b>filipa Zavadila</b> <br><b>kateřiny Jarošové</b> <br><b>evy Linhartové</b> <br><b>markéty Sedláčkové</b> </p> <div id="lupaimg"> </div> </div> <div id="legend"> </div> <div id="footer"> Copyright&copy OpenStreetMap, skupina F <p> <b>kontakt:</b> filip.zavadil&#64fsv.cvut.cz, marketa.sedlackova&#64fsv.cvut.cz, eva.linhartova&#64fsv.cvut.cz, katerina.jarosova&#64fsv.cvut.cz<br> </p> </body> </html> <script type="text/javascript"> // globalni promenne var findtask, findparams; // inicializace promennych pro vytvareni dotazu nad realitami function dotazovani(){ findtask = new esri.tasks.findtask(" REALITY/MapServer"); findparams = new esri.tasks.findparameters(); findparams.returngeometry = true; findparams.layerids = [0]; findparams.searchfields = ["url","druh","typ","vlastnictv","plocha"]; // provádění dotazu function execute(query) { //set the search text to find parameters var definice=[]; definice[0]=query; findparams.layerdefinitions = definice; 16

17 findparams.searchtext = "."; findtask.execute(findparams, showresults); // showresults f-ce se zavolá pokud server vratí výsledek function showresults(results) { // pole pro zapis souradnic delka/sirka vsech vyhledanych bodů var lon= new Array(); var lat= new Array(); // symboly //symbology for graphics var markersymbol = new esri.symbol.picturemarkersymbol(' 25, 25); //find results return an array of findresult. map.graphics.clear(); mydata= new Array(); // pro kazdy prvek... dojo.foreach(results, function(result) { // pridani symbolu var graphic = result.feature; graphic.geometry=esri.geometry.geographictowebmercator(graphic.geometry); graphic.setsymbol(markersymbol); map.graphics.add(graphic); // end pridani symbolu var out=result.feature.attributes; mydata.push([out.mesto,out.ulice,out.typ,out.druh,out.plocha,out.cena,out.velikost,o ut.vlastnictvi,out.budova,out.id,out.gpslon,out.gpslat,out.poznamka,out.popis,ou t.url,out.cinema_name,out.cinema_dist,out.cinema_gpslon,out.cinema_gpslat,out.ho spital_name,out.hospital_dist,out.hospital_gpslon,out.hospital_gpslat]); lon.push(result.feature.geometry.x) lat.push(result.feature.geometry.y) lon=lon.sort(); lat=lat.sort(); var extent = new esri.geometry.extent({"xmin":lon[0]-1000,"ymin":lat[0]- 1000,"xmax":lon[lon.length-1]+1000,"ymax":lat[lat.length- 1]+1000,"spatialReference":{"wkid": map.setextent(extent) feed(); // definovani chovani pro identifikaci prvku na mape function mapready(map){ // propojení signálů dojo.connect(map,"onclick",executeidentifytask); //create identify tasks and setup parameters identifytask = new esri.tasks.identifytask(" F-REALITY/MapServer"); identifyparams = new esri.tasks.identifyparameters(); identifyparams.tolerance = 10; identifyparams.returngeometry = true; identifyparams.layerids = [0,1]; identifyparams.layeroption = esri.tasks.identifyparameters.layer_option_all; identifyparams.width = map.width; 17

18 identifyparams.height = map.height; // kod se vykonava po kliknuti mysi do mapy function executeidentifytask(evt) { identifyparams.geometry = evt.mappoint; identifyparams.mapextent = map.extent; var deferred = identifytask.execute(identifyparams); deferred.addcallback(function(response) { // response is an array of identify result objects // Let's return an array of features. return dojo.map(response, function(result) { var feature = result.feature; feature.attributes.layername = result.layername; if(result.layername === 'reality'){ var out=feature.attributes; console.log(out); mydata= new Array(); mydata.push([out.mesto,out.ulice,out.typ,out.druh,out.plocha,out.cena,out.velikost,o ut.vlastnictvi,out.budova,out.id,out.gpslon,out.gpslat,out.poznamka,out.popis,ou t.url,out.cinema_name,out.cinema_dist,out.cinema_gpslon,out.cinema_gpslat,out.ho spital_name,out.hospital_dist,out.hospital_gpslon,out.hospital_gpslat]); storevys.loaddata(mydata,false); feedbig(storevys.getat(0)); if(result.layername === 'zajmove_body'&& map.getlevel()>15){ var out=feature.attributes; var STRhtml="kategorie: <b>"+out.category+"</b> <br/> typ: <b>"+out.type+"</b> <br/> název: <b>"+ out.name+"</b>" // vytvoreni okna s informacemi o yajmovzch bodech Ext.create('Ext.window.Window', { title: "zájmový bod", layout: 'fit', stylehtmlcontent: true, closable:true, bodypadding: 10, html: STRhtml, ).show(); console.log(feature) return feature; </script> </body> </html> 18

19 vyhledavani.js var form = Ext.create('Ext.form.Panel', { bodypadding: 5, width: 550, layout: 'anchor', defaults: { anchor: '100%', var datastore = Ext.create('Ext.data.Store', { fields: ['name'], data : [ {"name":"praha", {"name":"praha 1", {"name":"praha 2", {"name":"praha 3", {"name":"praha 4", {"name":"praha 5", {"name":"praha 6", {"name":"praha 7", {"name":"praha 8", {"name":"praha 9", {"name":"praha 10", ] var panelradios_type= Ext.create('Ext.form.Panel', { border: 0, width:300, items:[{ xtype: 'radiogroup', fieldlabel: 'nabídka', vertical: false, items: [ { boxlabel: 'nerozhoduje', name: 'type', inputvalue: '%', checked: true, { boxlabel: 'prodej', name: 'type', inputvalue: 'prodej', { boxlabel: 'pronájem', name: 'type', inputvalue: 'pronájem', ] ] var panelradios_druh= Ext.create('Ext.form.Panel', { border: 0, width:300, items:[{ xtype: 'radiogroup', fieldlabel: 'nemovitost', vertical: false, items: [ { boxlabel: 'nerozhoduje', name: 'druh', inputvalue: '%', checked: true, { boxlabel: 'dům', name: 'druh', inputvalue: 'dům', { boxlabel: 'byt', name: 'druh', inputvalue: 'byt', ] ] var datastorevel = Ext.create('Ext.data.Store', { fields: ['name'], data : [ {"name":"nerozhoduje", {"name":"1+kk", {"name":"1+1", 19

20 ] {"name":"2+kk", {"name":"2+1", {"name":"3+kk", {"name":"3+1", {"name":"4+kk", {"name":"4+1", {"name":"5+kk", {"name":"5+1", {"name":"6+kk", {"name":"6+1", {"name":"garsoniéra", var comboboxvel= Ext.create('Ext.form.ComboBox', { fieldlabel: 'velikost', store: datastorevel, displayfield: 'name', valuefield: "name", emptytext: "velikost", value: "nerozhoduje", var panelplocha= Ext.create('Ext.form.Panel', { border:0, layout: { type: "hbox", align: "left",, items: [{ xtype: 'label', text: 'Plocha', ],{ xtype: 'numberfield', name: 'plocha_od', maxvalue: 300, minvalue: 0, margin: " ", enablekeyevents: true,,{ xtype: 'numberfield', name: 'plocha_do', maxvalue: 1000, minvalue: 0, margin: " ", enablekeyevents: true, var panelcena= Ext.create('Ext.form.Panel', { border:0, padding: " ", layout: { type: "hbox", align: "left",, items: [{ xtype: 'label', text: 'cena',,{ xtype: 'numberfield', name: 'plocha_od', 20

21 maxvalue: 300, minvalue: 0, margin: " ", enablekeyevents: true, ],{ xtype: 'numberfield', name: 'plocha_do', maxvalue: , minvalue: 0, margin: " ", enablekeyevents: true, var panelradios_budovy= Ext.create('Ext.form.Panel', { border: 0, width:500, items:[{ xtype: 'radiogroup', fieldlabel: 'budova', vertical: false, items: [ { boxlabel: 'nerozhoduje', name: 'budova', inputvalue: '%', checked: true, { boxlabel: 'cihlová', name: 'budova', inputvalue: 'cihlová', { boxlabel: 'panelová', name: 'budova', inputvalue: 'panelová', { boxlabel: 'montovaná', name: 'budova', inputvalue: 'montovaná', { boxlabel: 'dřevěná', name: 'budova', inputvalue: 'dřevěná', ] ] var panelradios_vlastnictvi= Ext.create('Ext.form.Panel', { border: 0, width:300, items:[{ xtype: 'radiogroup', fieldlabel: 'vlastnictví', vertical: false, items: [ { boxlabel: 'nerozhoduje', name: 'vlastnictvi', inputvalue: '%', checked: true, { boxlabel: 'osobní', name: 'vlastnictvi', inputvalue: 'osobní', { boxlabel: 'družstevní', name: 'vlastnictvi', inputvalue: 'družstevní', ] ] var submit=ext.create('ext.button', { text: 'odešli', width: 100, margin: " ", handler: function() { alll(); vyhledavani.hide(); var comboboxcast= Ext.create('Ext.form.ComboBox', { fieldlabel: 'městská část', store: datastore, displayfield: 'name', valuefield: "name", 21

22 value:"praha" var datastorebuffer = Ext.create('Ext.data.Store', { fields: ['name',"value"], data : [ {"name":"nerozhoduje","value":"nerozhoduje", {"name":"kino","value":"cinema_dist", {"name":"nemocnice","value":"hospital_dist", ] var comboboxbuffer= Ext.create('Ext.form.ComboBox', { fieldlabel: 'zajmový bod', store: datastorebuffer, displayfield: 'name', valuefield: "value", emptytext: "zájmový bod", value: "nerozhoduje", width: 200 var BufferDist= Ext.create('Ext.form.field.Number', { width: 100, name: 'plocha_od', maxvalue: 5000, minvalue: 0, margin: " ", value: "m", var labelbuffer= Ext.create('Ext.form.Label', { text: "m", margin: " ", var panelpoi= Ext.create('Ext.form.Panel', { border:0, layout: { type: "hbox", align: "left",, items:[ comboboxbuffer,bufferdist,labelbuffer ] form.add([comboboxcast,panelradios_type,panelradios_druh,comboboxvel,panelplocha,panelcen a,panelradios_vlastnictvi,panelradios_budovy,panelpoi,submit]); vyhledavani=ext.create('ext.window.window', { title: 'Vyhledání nemovitostí', closeaction: "hide", width: 550, layout: 'fit', items: form 22

23 vysledky.js var grid; var mydata= new Array(); var storevys; Ext.onReady(function() { Ext.QuickTips.init(); //out.cinema_name,out.cinema_dist,out.cinema_gpslon,out.cinema_gpslat // create the data store storevys= Ext.create('Ext.data.ArrayStore', { fields: [ {name: 'Místo', {name: 'ulice', {name: 'nabídka', {name: 'nemovitost', {name: 'plocha', type: 'float', {name: 'cena', type: 'float', {name: 'velikost', {name: 'vlastnictví', {name: 'budova', {name: 'id', {name: 'GPSlon', {name: 'GPSlat', {name: 'poznamka', {name: 'popis', {name: 'url', {name: 'cinema_name', {name: 'cinema_dist', {name: 'cinema_gpslon', {name: 'cinema_gpslat', {name: 'hospital_name', {name: 'hospital_dist', {name: 'hospital_gpslon', {name: 'hospital_gpslat', ], data: mydata // create the Grid grid = Ext.create('Ext.grid.Panel', { store: storevys, stateful: true, stateid: 'stategrid', columns: [ {, {, text : 'Místo', width : 90, sortable : true, dataindex: 'Místo', text : 'nabídka', width : 75, sortable : true, dataindex: 'nabídka' 23

24 ], {, { text : 'nemovitost', width : 75, sortable : true, dataindex: 'nemovitost' text : 'plocha', width : 75, sortable : true, dataindex: 'plocha',{ text : 'cena', width : 85, sortable : true, dataindex: 'cena',{ text : 'velikost', width : 85, sortable : true, dataindex: 'velikost',{ text : 'vlastnictví', width : 85, sortable : true, dataindex: 'vlastnictví',{ text : 'budova', width : 85, sortable : true, dataindex: 'budova',{ text : 'id', width : 25, sortable : true, dataindex: 'id', height: "800", viewconfig: { striperows: true, listeners: { click: { element: 'el', //bind to the underlying el property on the panel fn: function(){ var selection=grid.getselectionmodel().getselection(); var index=storevys.find("id",selection[0].get("id")), feedbig(storevys.getat(index)); disableselection : false, panelvysledky.add(grid); function feed(){ 24

25 storevys.loaddata(mydata,false); //viewport.items.items[1].expand(); panelvysledky.update(); function feedbig(data){ var title=data.get("místo")+"/"+data.get("velikost")+"/"+data.get("plocha")+"m2"; windowbig=ext.create('ext.panel.panel', { title: title, layout: 'fit', stylehtmlcontent: true, closable:true, bodypadding: 10, autoscroll:true, var htmlvys; htmlvys="<h3>"+data.get("poznamka")+"</h3>"; htmlvys+="ulice:<b> "+data.get("ulice")+"</b><br/>"; htmlvys+="velikost:<b> "+data.get("velikost")+"</b><br/>"; htmlvys+="plocha: <b>"+data.get("plocha")+" m² </b><br/>"; htmlvys+="cena: <b>"+data.get("cena")+" CZK</b><br/>"; htmlvys+="<p>"+data.get("popis")+"</p>"; htmlvys+= "<br/>"; htmlvys+= "<b>"+data.get("cinema_name")+"</b> "+data.get("cinema_dist")+" m" +"<a href=\"javascript:zoomto("+data.get("cinema_gpslon").replace(",",".")+","+data.get("cinem a_gpslat").replace(",",".")+")\"><img src=\"map.png\"></img>najdi kino na mapě</a> "; htmlvys+= "<br/>"; htmlvys+= "<b>"+data.get("hospital_name")+"</b> "+data.get("hospital_dist")+" m" +"<a href=\"javascript:zoomto("+data.get("hospital_gpslon").replace(",",".")+","+data.get("hos pital_gpslat").replace(",",".")+")\"><img src=\"map.png\"></img>najdi nemocnici na mapě</a> "; htmlvys+= "<br/>"; // nazoomavání na nemovitost var mappoint =new esri.geometry.point(data.get("gpslon").replace(",","."),data.get("gpslat").replace(",",". "), new esri.spatialreference({ wkid:4326 )); var mercat=esri.geometry.geographictowebmercator(mappoint); htmlvys+="<center><p><a href=\"javascript:zoomto("+data.get("gpslon").replace(",",".")+","+data.get("gpslat").rep lace(",",".")+")\"><img src=\"map.png\"></img>najdi nemovitost na mapě</a> "; htmlvys+="<a href=\""+data.get("url")+"\" target=\"blank_\"><img src=\" height=\"40\" width=\"40\"></img> nemovitost na Dumrealit.cz</a></p><br><br><center>"; Ext.Ajax.request({ url: 'photo.php', method: "POST", params: { id: data.get("id"),, success: function(response){ htmlvys+=response.responsetext;, windowbig.update(htmlvys); tabpanel.add(windowbig); windowbig.show(); 25

26 failure: function() { alert("nepodarilo se spojit s PHP!") var mappoint =new esri.geometry.point(data.get("gpslon").replace(",","."),data.get("gpslat").replace(",",". "), new esri.spatialreference({ wkid:4326 )); var mercat=esri.geometry.geographictowebmercator(mappoint); map.centerandzoom(mercat,16); //viewport.items.items[1].expand(); function zoomto(lon,lat) { var mappoint =new esri.geometry.point(lon,lat, new esri.spatialreference({ wkid:4326 )); var mercat=esri.geometry.geographictowebmercator(mappoint); map.centerandzoom(mercat,16); GUI.js var panelvysledky;var windowpanel var viewport;var windowbig;var tabpanel;var tabpanelwelcome; Ext.onReady(function(){ Ext.QuickTips.init(); var toolbar = Ext.create('Ext.toolbar.Toolbar', { var labeldotaz= Ext.create('Ext.form.Label', { text: "začněte zde: ", margin: " ", toolbar.add(labeldotaz); var labelzoomto= Ext.create('Ext.form.Label', { text: "nazoomovat na městskou část:", margin: " ", var panel=ext.create('ext.panel.panel', { contentel: 'mapa', tbar: toolbar, 26

27 panelvysledky=ext.create('ext.panel.panel', { title: 'nabídka', autoscroll: true, tabpanelwelcome=ext.create('ext.panel.panel', { contentel: "titul", stylehtmlcontent: true, title: 'vítejte', padding: 10, basecls: "titul", height: "100%" var windowlegend=ext.create('ext.window.window', { contentel: "legend", stylehtmlcontent: true, padding: 10, height: 400, width: 200, autoscroll: true, closeaction: "hide", title: "legenda" ).show(); windowlegend.hide(); var panelsouth=ext.create('ext.panel.panel', { html: "ahoj", stylehtmlcontent: true, padding: 10, tabpanel=ext.create('ext.tab.panel', { items: [tabpanelwelcome,panelvysledky], autoscroll: true, viewport=ext.create('ext.container.viewport', { layout: 'border', items: [{ region: 'north', contentel: "header", height: 59, margins: ' ', { region: 'east', collapsible: false, collapsed: false, split: true, width: 650, items: tabpanel, 27

28 , { region: 'center', xtype: "panel", items: panel,, { region: 'south', xtype: "panel", contentel: "footer", padding: 10, ] var Btn_dotaz = Ext.create('Ext.button.Button', { text: "zadej dotaz!", enabletoggle: true, pressed: true, icon: ' // scope: this, handler: function() { vyhledavani.show(); Btn_dotaz.toggle(true);, //scale: 'normal', var Btn_legend = Ext.create('Ext.button.Button', { text: "legenda", // scope: this, enabletoggle: true, pressed: true, handler: function() { windowlegend.show(); Btn_legend.toggle(true);, toolbar.add(btn_dotaz,btn_legend); var datastore = Ext.create('Ext.data.Store', { fields: ['name'], data : [ {"name":"praha", {"name":"praha 1", {"name":"praha 2", {"name":"praha 3", {"name":"praha 4", {"name":"praha 5", {"name":"praha 6", {"name":"praha 7", {"name":"praha 8", {"name":"praha 9", {"name":"praha 10", ] var combobox= Ext.create('Ext.form.ComboBox', { store: datastore, 28

29 displayfield: 'name', valuefield: "name", emptytext: "najdi městskou část", listeners:{select:{fn:function(combo) {zoomtopraha(combo.getvalue()); toolbar.add([labelzoomto,combobox]); photo.php <?php $id=$_post["id"]; //$id=10; // open this directory $mydirectory = opendir("fotky/".$id); // get each entry echo "<center>"; while($entryname = readdir($mydirectory)) { $dirarray[] = $entryname; if (strpos($entryname,".jpg") strpos($entryname,".jpg")) { // echo "<a href=\"fotky/".$id."/".$entryname."\" target=\"_blank\"><img src=\"fotky/".$id."/".$entryname."\" height=\"80\" > </a>"; echo "<a href=\"fotky/".$id."/".$entryname."\" rel=\"lightbox[roadtrip]\"><img src=\"fotky/".$id."/".$entryname."\" height=\"80\"></a> "; echo "</center>"; // close directory closedir($mydirectory);?> 29