Web Mapping

Prodevelop takes part in the first WebGL Camp Europe

Ok, that’s great but… wait a minute, what is WebGL?

Well, let’s explain it. WebGL is a JavaScript API for rendering interactive 3D graphics within any compatible web browser without the use of plug-ins. We have gone through many formats and technologies so far, too many perhaps. We may remember the primitive VRML format, the succedaneum X3D or the later O3D proposed by Google. All of them lacked of browser integrity and compatibility. By that time, the end-user had obligatory to install an additional plug-in into the browser, with the subsequent appearance of both compatibility and performance issues among browsers.

Fortunately those times have already gone. For the first time, there has been created an API to finally succeed in rendering 3D content to Web, and that is named WebGL. Considering WebGL is still in version 1.0 though, it already confirms the expectations of having a promising future; and at Prodevelop, we are pretty sure about it. One of the most usual mistake people commit is associating Web 3D content to the game industry. We all agree that games are the entrance door of WebGL to the end-users, but from a wider point of view, 3D graphics can be applied to almost any kind of field as for example, 3D medical explorations, architecture representations…and why not Geographic Information Systems. In the later one, is where Prodevelop masteries.

Ok, don’t ramble around... Let’s move forward. What did we implement? ;)

Eager people :)…

We implemented a 3D buildings visualization for the city of Valencia. We mainly gathered 2D data from the cadastre, and after an automatic preprocessing, we were able to extrude the buildings and further represent them in 3D, on top of a WebGL globe’s surface.

The results look optimistic taking into account it consists in a R&D project developed during a short period of time.

Setting as grounding the showed buildings representation, on top of it we implemented two different processing.

The first one consisted in the calculation of the passive energy a certain building receives. That is to say, the solar incidence or radiation that each of the faces of a building receives for a particular period of time. That may result especially useful in terms of energy efficiency, since such processing may help buildings professionals to enhance energy reduction on new edifications.

The second one was based on the calculation of the buildings visibility for a given area. At this point we are able to predict not only if a building may be observed from a certain point or not (as traditional solutions does), but also how much percent of such building is observed. This processing is very useful for environmental impact studies in the manner the professionals can estimate the way an area is going to be affected by a particular building, bridge, power plant or in a more generic way any kind of installation or facility.

These implementations are what Prodevelop showed in the first WebGL Camp Europe that took place the 2nd and 3rd of July in Basel, Switzerland. This event has notably helped to check the State of The Art in the matter, as well as to have a more precise overview with regard to the forthcoming releases in the GIS field. From now on begins a promising range of Web-based implementations for geo-visualization and geo-analysis as we have never seen before.

Untitled

OpenLayers, thematics and browsers

I'm used to debug my javascript code in Google Chrome as it has cool developer tools and its javascript engine is superb, but today I've broken Google Chrome.

I was writting some javascript code in OpenLayers to automatically generate unique value and range thematic for vector layers fully loaded on the browser. Once the code was running and after a few pans Google Chrome broke, the same code worked on Firefox. At the moment I have no idea what the "bug" is but I've made some (non rigorous) tests on several browsers and these are the results.

My OpenLayers was loading:

120 scaled and rotate SVG graphics
120 polygons
111 lines
1127 thematic points
15 png from a WMS layer

BrowserStart memoryOL load memoryWorked
Chromium 1680 MB320 MBYes
Firefox 11127 MB340 MBYes
Safari 5.122 MB180 MBGraphic errors
Chrome 18140 MB330 MBNo
IE--LOL
Opera 1160 MB200 MBYes

So Opera seems the "best browser in the world" but at the moment I will continue with Chromium

Liberado olsocial. Integración de redes sociales en OpenLayers

Acabamos de liberar olsocial, la primera extensión de OpenLayers libre que aporta capas de redes sociales desarrollada por Prodevelop.

Esta librería permite añadir con una sola línea de código datos provenientes de Twitter, Flickr, LastFm, Yelp y muchísimos más a través de POIProxy.

Un par de detalles sobre la implementación. Hemos enviado un parche para corregir la clase OpenLayers.Protocol.Script de OpenLayers para que funcionase con el API de Twitter (ver ticket) y hemos creado un gestor de popups que ha desembocado en un nuevo proyecto OL-FeaturePopups.

El proyecto es perfectamente utilizable en la actualidad pero aún tiene mucho margen de mejora, de forma que no dudes en replicar el código de gitHub y mejorarlo.

Playing around with Leaflet and POIProxy

I've been some time following Leaflet and this weekend I've decided to write some code on it. So as Leaflet has no tiled GeoJSON layer I've coded a layer to load points from POIProxy, draw them over the map and show a popup.



Of course it can be improved, at the moment only loads points at zoom level 16, the layers are exclusive to avoid overload and there are several bugs… but as a proof of concept, it's not bad :P

About Leaflet, I like several things. Its API is simple and lightweight and that's the point, it's incredibly fast on mobile devices. Apart from this, there are several interesting layers such as CartoDB that look promising :)

By the way I've uploaded a POIProxy demo that runs on desktop and mobile :) and the code is at my Github

Rendering local shapefiles with HTML5

Thanks to Tom Carden's javascript functions from his shapefile-js project and the new HTML5 local file access API, it is very easy to load and render any shapefile stored in the client's device.

You can test it here.

If you don't have a shapefile close at hand, get one of these: [China], [Europe], [South America], [United States].

Comments:

  • I have only tested it on Windows 7 + Google Chrome v. 15.x and Mozilla Firefox 8. I'm curious to see if it works on smartphones.
  • Choose a line or polygon SHP file (not a very big one).

User Scripts and Open Layers

Yesterday we have a visit to the office and we wanted to show an application on a development server on a customer facilities. They opened for us the port to access the app, but they forgot to open the TileCache web server so our OpenLayers map was full of pink tiles and we cannot open the service.

What to do? Well we didn't have the time to catch de sys admins so I figured that changing somehow the map Base Layer by any other suitable WMS layer from our national SDI, precisely our great ortophoto service (called PNOA) would be enough to not get the embarrassing pink tiles.

So I ended up writing an small User Script (my very first one) that could be easily added to the Chrome/Chromium browser using the Tampermonkey extension (similar to the Greasemonkey extension of Mozilla Firefox). The script looks for a layer called "Base" and changes its url and the layer name of the parameters object. It also does the same task on the overview map.

// ==UserScript==
// @name Dirty OL Hack
// @namespace http://www.prodevelop.es
// @description Changes the OL base map
// @include http://my-great-ol-app/path/*
// ==/UserScript==

window.addEventListener("load", function(e) {

  Ext.onReady(function(){
    map = path.to.my.map;
    l = map.getLayersByName("Base")[0]
    l.params.LAYERS = "pnoa";
    l.url = "http://www.idee.es/wms/PNOA/PNOA";
    map[map.getLayerIndex(l)] = l;

    c = map.getControlsByClass("OpenLayers.Control.OverviewMap")[0];
    c.layers[0] = l;
    c.ovmap.layers[0].url[0] = c.layers[0].url
    c.ovmap.layers[0].params.LAYERS = c.layers[0].params.LAYERS

    l.redraw();
    c.ovmap.layers[0].redraw()

  });
}, false);

The point is that this code has to run when all the Ext.JS layout and OpenLayers code has been initialized.

It has more holes than an emmental cheese for sure, but as dirty as is, it worked fine for the demo. I have no idea why it doesn't work on Firefox but works on Chrome and in Opera but who cares? :-).

AventuraOceanica: Un año en el mar y el ataque al Cabo de Hornos

La vuelta al mundo www.AventuraOceanica.es, patrocinada por Prodevelop, cumplió el pasado 14 de Noviembre un añito.

Te recomenamos encarecidamente que leas la entrada en el blog de la aventura, donde se relatan los 365 días de un sueño hecho realidad: http://blog.aventuraoceanica.es/?p=949

Sólo hace unos días que han cumplido los 400 dias en ruta y se preparan para bordear el cabo más austral del planeta. Síguelo en directo en: http://aoceanica.prodevelop.es

Aventura Oceánica, 400 días

Aqui tienes una imagen del Bahari. Preparado para afrontar su desafío más exigente.

Preparado para el desafio

La aventura oceánica llega a Puerto Rico

El Bahari está en pleno Caribe ya, navegando en estos momentos la costa sur de Puerto Rico. Es un momento como otro cualquiera para tomar una pequeña instantánea del trayecto recorrido por el velero desde que sus tripulantes salieran de Valencia a medidados de noviembre. Puedes pulsar en la imagen para verla un poco más grande.

Trayecto del Bahari hasta el 30 de diciembre

Esta imagen está hecha con gvSIG, conectado directamente a la base de datos de posiciones (PostgreSQL/PostGIS) que vamos rellenando conforme el velero nos envía su posición.

Para el año que viene tenemos pensados algunos pequeños cambios en el visor del trayecto, especialmente en la forma en que se filtran las posiciones (llega una cada dos horas más o menos) de forma que aprovechemos un poco mejor los limitados recursos para presentar posiciones, especialmente en Internet Explorer.

Syndicate content