Web Mapping

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.

Distribuir contenido