Last active
December 16, 2015 16:59
-
-
Save aaizemberg/5467217 to your computer and use it in GitHub Desktop.
foss4gBA 2013
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ------------------------------------------------------------------------------------------------------------ | |
| Introducción | |
| Ariel Aizemberg / twitter: @aaizemberg | |
| SIIA ( http://www.siia.gov.ar/ ) & Ministerio de Agricultura ( http://www.minagri.gob.ar/ ) | |
| El proyecto RIDES esta parcialmente financiado por el SIIA @ MinAgri | |
| En esta charla vamos ver como se hacen las aplicaciones interactivas en RIDES Tucumán. | |
| RIDES ( Aplicaciones Interactivas ) | |
| http://rides.producciontucuman.gov.ar/index.php/aplicaciones | |
| y los datos, los vamos a tomar de: | |
| RIDES ( Catalogo de Datos ) | |
| http://rides.producciontucuman.gov.ar/index.php/catalogo-de-datos | |
| y del programa 2MP de CONAE | |
| ------------------------------------------------------------------------------------------------------------ | |
| "QGIS > WEB > MapServer Export" | |
| Desde QGIS grabo un mapfile y aparece este hermoso messageBox: | |
| > If this mapfile is accessible by your mapserver, you | |
| should be able to see the capabilities by firing this url: | |
| http://localhost/cgi-bin/mapserv.exe?MAP=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities | |
| > if this mapfile is accessible by your mapserver, you | |
| should be able to see a map by firing this url: | |
| http://localhost/cgi-bin/mapserv.exe?MAP=C:/ms4w/apps/ms101/htdocs/mapfile.map&LAYERS=ALL&MODE=MAP | |
| ------------------------------------------------------ | |
| http://localhost/cgi-bin/mapserv.exe?MAP=C:/ms4w/apps/ms101/htdocs/mapfile.map&LAYERS=bm01&MODE=MAP | |
| http://localhost/cgi-bin/mapserv.exe?MAP=C:/ms4w/apps/ms101/htdocs/mapfile.map&LAYERS=bm06&MODE=MAP | |
| testing the mapfile using mapserver & openlayers | |
| http://localhost/cgi-bin/mapserv.exe?MAP=C:/ms4w/apps/ms101/htdocs/mapfile.map&mode=browse&template=openlayers&LAYERS=bm01 | |
| ------------------------------------------------------ | |
| Despues de leer esta página | |
| http://mapserver.org/ogc/wms_server.html | |
| ó | |
| http://localhost/msdocs/html/ogc/wfs_server.html | |
| y adaptar un poco el .mapfile, lo podemos consultar como un servicio OGC (WMS) | |
| GetCapabilities | |
| 1.1.1 | |
| http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities | |
| 1.3.0 | |
| http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities | |
| image/png | |
| Las 12 imágenes, tienen este nombre: bm01 .. bm12 | |
| El bbox es: | |
| String bbox = "167799.0477604639,6886556.863265967,377299.0477604639,7127556.863265967"; | |
| String bbox = "167799,6886557,377299,7127557"; | |
| GeoServer | |
| http://localhost:8080/geoserver/rides/wms?service=WMS&version=1.1.0&request=GetMap&layers=rides:bm01&styles=&bbox=167799.0477604639,6886556.863265967,377299.0477604639,7127556.863265967&width=445&height=512&srs=EPSG:32720&format=image%2Fpng | |
| MapServer | |
| bm01 | |
| http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm01 | |
| bm01 y deptos | |
| http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm01,deptos | |
| Edward Tufte | small multiples | |
| http://localhost/ms101/rides_01.html | |
| ---------------------------------------------------------------------------------------------------------------- | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Edward Tufte | small multiples</title> | |
| </head> | |
| <body> | |
| <h1>ET | Small Multiples</h1> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm01,deptos" alt="enero" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm02,deptos" alt="febrero" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm03,deptos" alt="marzo" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm04,deptos" alt="abril" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm05,deptos" alt="mayo" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm06,deptos" alt="junio" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm07,deptos" alt="julio" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm08,deptos" alt="agosto" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm09,deptos" alt="septiembre" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm10,deptos" alt="octubre" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm11,deptos" alt="noviembre" border="1"> | |
| <img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm12,deptos" alt="diciembre" border="1"> | |
| </body> | |
| </html> | |
| ---------------------------------------------------------------------------------------------------------------- | |
| Introducción a Processing ( http://www.processing.org/ ) / Processing.js ( http://processingjs.org/ ) | |
| http://localhost/ms101/rides_02.html | |
| rides_02.html | |
| ------------------------------------------------------ | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="./js/processing-1.4.1.min.js"></script> | |
| <title>Processing.js</title> | |
| </head> | |
| <body> | |
| <canvas data-processing-sources="./elipses.pde"></canvas> | |
| </body> | |
| </html> | |
| ------------------------------------------------------ | |
| elipses.pde | |
| ------------------------------------------------------ | |
| void setup() { | |
| size(800,600); | |
| background(0); | |
| } | |
| void draw() { | |
| fill(random(255),random(255), random(255)); | |
| // random | |
| ellipse( random(width),random(height),random(40),random(40) ); | |
| // agregando interactividad, usando mouseX y mouseY | |
| // ellipse( mouseX,mouseY,mouseX/4,mouseY/4); | |
| } | |
| ------------------------------------------------------ | |
| La aplicacion interactiva usa: | |
| 12 imagenes 1 x mes (GeoTIFF, UTM 20 S) | |
| https://2mp.conae.gov.ar/index.php/materialeseducativos/imagenes-satelitales/627-mosaicos-blue-marble-republica-argentina | |
| shortname = bm01, bm02, ..., bm12 | |
| limites de los departamentos de Tucumán (SHP, POSGAR98 f3) | |
| http://rides.producciontucuman.gov.ar/index.php/catalogo-de-datos?task=edit&cid[0]=43 | |
| shortname = deptos | |
| El servidor de mapas (mapserver o geoserver), junta y reproyecta la información y me genera una imagen en formato PNG que la muestro desde Processing. | |
| Load and Display Images | |
| http://processing.org/learning/basics/loaddisplayimage.html | |
| rides_03.html = FINAL | |
| http://localhost/ms101/rides_03.html | |
| ------------------------------------------------------ | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="./js/processing-1.4.1.min.js"></script> | |
| <title>RIDES | BlueMarble, 2004, x mes, Provincia de Tucumán, Argentina</title> | |
| </head> | |
| <body> | |
| <canvas data-processing-sources="./BM_Tuc_2004_MapServer.pde"></canvas> | |
| </body> | |
| </html> | |
| ------------------------------------------------------ | |
| BM_Tuc_2004_MapServer.pde | |
| ------------------------------------------------------ | |
| // Processing source code | |
| PImage[] img = new PImage[12]; // un array con 12 imagenes (una por mes) | |
| int cx; // current X | |
| int px; // previous X | |
| String host = "localhost"; | |
| String port = "80"; | |
| // String port = "8080"; | |
| String mapfile = "map=C:/ms4w/apps/ms101/htdocs/mapfile.map"; | |
| // String dir = "geoserver/rides/wms"; | |
| String url = ""; | |
| String layers = ""; | |
| String bbox = "167799,6886557,377299,7127557"; | |
| String srs = "EPSG:32720"; | |
| void setup() { | |
| size(419, 482); | |
| cargar_todas_las_imagenes(); | |
| } | |
| void draw() { | |
| cx = round( map(mouseX, 0, width, 0, 11) ); | |
| if (cx != px) { | |
| px = cx; // 0 a 11 = mes 1 al 12 | |
| image(img[cx], 0, 0); | |
| lables(); | |
| } | |
| } | |
| void cargar_todas_las_imagenes() { | |
| for (int i = 0; i < 12; i++) { | |
| layers = "bm" + nf(i+1, 2) + ",deptos"; // primero se dibuja la imagen satelital (bm..), luego los departamentos de Tucumán | |
| // GeoServer | |
| // url = "http://" + host + ":" + port + "/" + dir + "?service=WMS&version=1.1.0&request=GetMap&layers=" + layers + "&styles=&bbox=" + bbox + "&width="+width+"&height="+height+"&srs=" + srs + "&format=image%2Fpng"; | |
| // MapServer | |
| url = "http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width="+width+"&height="+height+"&LAYERS=" + layers; | |
| // java | |
| // img[i] = loadImage(url, "png"); | |
| // javascript | |
| img[i] = requestImage(url); | |
| } | |
| cx = 0; // posX actual | |
| px = -1; // posX anterior | |
| } | |
| void lables() { | |
| textAlign(CENTER); | |
| for (int i = 0; i < 12; i++) { | |
| if (i == cx) { | |
| fill(255, 0, 0); // RED | |
| } | |
| else | |
| { | |
| fill(255); // WHITE | |
| } | |
| text(i+1, 16 + i * (width / 12.0), height - 2); | |
| } | |
| } | |
| ------------------------------------------------------ | |
| DONE | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment