Page 1 of 1 (18 posts)

  • talks about »
  • web development

Tags

Last update:
Sat Jul 12 17:30:09 2014

A Django site.

QGIS Planet

User history added to osm-reporter app

This weekend I implemented a new feature for my ‘just for fun’ project osm-reporter. The feature implements timeline reporting for Open Street Map contributors. Its probably easiest to explain with a screenshot:     Here is another one showing a few charts together:   I added the feature because I wanted to see how many... Read more »

OpenLayers: failure of map redraw on panning

Just a quick heads up for those of you using OpenLayers. There seem to have been a lot of problems lately with OpenLayers refusing to redraw its layers when panning, where everything was working before. One possible solution turned up in this thread on OpenLayers Users. The credit for solving the problem is therefore not [...]

OpenLayers: failure of map redraw on panning

Just a quick heads up for those of you using OpenLayers. There seem to have been a lot of problems lately with OpenLayers refusing to redraw its layers when panning, where everything was working before. One possible solution turned up in this thread on OpenLayers Users. The credit for solving the problem is therefore not mine, but I found it so useful that I had to share.

Short version: check that you're not using OpenLayers.Control.MouseDefaults - it has been deprecated. Instead, use OpenLayers.Control.Navigation - everything else stays the same.

Quick fix for a silly problem that kept me occupied for far too long.

Fusing web technologies with QGIS

The Python bindings for QGIS introduced just before version 1.0 was released proved to be a huge boon to the development of QGIS as a popular, free alternative to proprietary vendor’s offerings. More than 100 plugins grace our plugin repository, and the ability to use Python scripting has really lowered the barrier to entry for [...]

Fusing web technologies with QGIS

The Python bindings for QGIS introduced just before version 1.0 was released proved to be a huge boon to the development of QGIS as a popular, free alternative to proprietary vendor's offerings. More than 100 plugins grace our plugin repository, and the ability to use Python scripting has really lowered the barrier to entry for many who would find building similar tools in C++ (the 'native' language of QGIS) too intimidating. Lately I have been pondering the future of QGIS 2.0. In particular my feeling is that we pretty much have the standard functionality of a desktop GIS application covered and it is time to step out of 'emulate' mode into 'innovate' mode. Not that QGIS 1.x entirely lacks innovation, but I believe there is a lot more that can be done.

At the recent developer meeting in Zurich, I had some enjoyable conversations with Andreas Neumann and others. Andreas showed off some examples of the awesome D3 javascript svg visualisation toolkit. I had seen the kit before in its former guise as protovis, but I hadn't ever seen quite the extent of all the cool things you could do with it. Parallel to Andreas' presentation, I had been pondering fusing web technologies with QGIS. Now let me start out by explaining that living in a low bandwidth society has made me quite cautious about building web tools for the masses, but what I am talking about here is using web technologies on the desktop without any need for an internet connection. D3 is just one example of many hundreds of javascript libraries out there that cover a whole gamut of functionality. I would argue that the javascript universe is far richer than the Qt/C++ one and far easier to 'pick up and use'. Combined with this rich javascript resource is the fact that recent versions of Qt4 ship with QWebView, a webkit based widget that you can place onto any form. More than that, Qt4 provides entry points for calling javascript routines from C++ and passing C++ objects into the javascript context. Though I havent tested it yet, you can also use Qt4's signal and slot mechnism from within the Javascript context.

If you take a minute to think about this, you will realize that this opens up a world of possibilities: what if we use C++ for the heavy lifting and Javascript + CSS + html for our visualisation in QGIS? Not for map rendering per se, but for all the other places where you need to see charts, tables, reports, metadata and so on. And what is really nice is that we have a fixed browser platform to work against, and complete platform independent capability, without any of the overhead that Python for example introduces (like having to ship a separate interpreter with the QGIS binaries). Plus the multitude of people that can already do web programming suddenly have an easy way to start contributing to QGIS.

To demonstrate this idea I have updated my fork of QGIS to use JQuery, Flot and some html to do the rendering of the histogram in the raster layer properties dialog. You can see a little demo of this below:

[advanced_iframe securitykey="da39a3ee5e6b4b0d3255bfef95601890afd80709" src="http://www.youtube.com/embed/TVVvFzvhCUM" height="315" width="560"]

While building this I noticed a couple of nice benefits:

  • I can debug my javascript separately in a browser
  • I can update the html / javascript and simply reinstall those files while QGIS is still running and immediately see the results
  • Whatever libraries I chose to use (jquery and flot in this case) were trivial to package with QGIS and I didnt need to worry about making the user e.g. install a separate python package before they could use my code
  • The code to implement the graph was much simpler than my former Qwt based implementation and it was trivial to add the zoom capability shown in the video above
  • The rendered graph looks much nicer than the Qwt one it replaces without any effort on my part
  • It was fun to work on!

And this last point is probably the most important - the more fun it is to hack on QGIS, the more likely we will get others to contribute. Hopefully we can also start attracting web innovators like my friend Javier de la Torre from Vizzuality to see QGIS as a place where they can bring the awesome stuff they are doing on the web into the desktop environment! I have quite a few other ideas as to how we can leverage this technology further so look out for further posts on the topic.

jQuery: selecting a child element

The jQuery JavaScript library allows you to select any element on a webpage and modify it. I will assume you already know how it works, or at least what it's for. Now, say you have a table containing the following: <tr id="123" class="employee"> <td class="name">John Smit</td> <td><img src="..." class="image" /></td> </tr> <tr id="983" class="employee"> <td [...]

jQuery: selecting a child element

The jQuery JavaScript library allows you to select any element on a webpage and modify it. I will assume you already know how it works, or at least what it's for. Now, say you have a table containing the following:

<tr id="123" class="employee">
  <td class="name">John Smit</td>
  <td><img src="..." class="image" /></td>
</tr>
<tr id="983" class="employee">
  <td class="name">Juan Smith</td>
  <td><img src="..." class="image" /></td>
</tr>
<tr id="219" class="superhero">
  <td class="name">Mr. Incredible</td>
  <td><img src="..." class="image" /></td>
</tr>

Selecting only the employee elements (assuming that the class "employee" is not used elsewhere) can be done via '$(".employee")'. For example:

$(".employee").css("color", "red");

would set the names of both employees to red. Similarly, it's easy enough to select a specific row and hide the person's name:

$("#219.name").hide();

But what if you have a situation where a certain element is being passed to your function as an object? You have the variable 'myRow', for example; and it's an unknown (to you) element on your page. And now you want to hide only the image within that row. You don't know the id you've been given, you just have the object. Even if you get the object's id out via myRow.attr("id"), how can you pass it to your jQuery selector? And how can you select and hide the image? Using something like

$("#219.image").hide();

would not work, because (even assuming you get the ID in there somehow) the "image" element is two levels down. The row with id 219 does not have a child of the "image" class. It has a classless child which in turn has a child of the "image" class. So the selector "#219.image" will return nothing. This seems like quite the unsolvable problem. (EDIT: see the comments for a way to do this without jQuery as suggested by Barry Rowlingson.)

It turns out that jQuery already has a neat, pre-packaged solution for this conundrum. It's the .find() function, and in our example, it could be used like this:

myRow.find(".image").hide();

Very simple, and very useful! Pass it an element on your page, and you can select any child of a given class.

Making the most of UMN mapserver runtime variable substitution

We are working on a project where we have a django app that dynamically calls mapserver to generate an image of a region with a set of selected properties. We wanted to be able to pass cgi substitution parameters for a list of entities to highlight. Here is how we did it.

UMN Mapserver supports the concept of variable substitution which is documented nicely here. Since version 6 of mapserver, you must define a validation pattern when setting up substitition. A default value is optional but we will be using that too. So lets contrive a simple scenario. You have a layer of municipal boundaries and you want to be able to highlight zero or more of those boundaries on the map. To do that, we will add two nearly identical municipal layer definitions to our map file:

 

  LAYER
    NAME 'Municipality_Outlines'
    TYPE POLYGON
    DUMP true
    TEMPLATE none
    CONNECTIONTYPE postgis
    CONNECTION "dbname='test' host=localhost port=5433 user='{282B61123232131231}' password='{282B6123423423423}' sslmode=disable"
    DATA 'the_geom FROM "municipality" USING UNIQUE id USING srid=4326'
    METADATA
      'ows_title' 'municipality_outlines'
      'ows_srs'   'EPSG:4326'
    END
    STATUS OFF
    TRANSPARENCY 100
    PROJECTION
      'init=epsg:4326'
    END
    LABELITEM 'name'
    CLASS
      NAME 'Municipalities'
      STYLE
        WIDTH 3.0
        OUTLINECOLOR 5 200 200
        COLOR -1 -1 -1
      END
    END
  END
  LAYER
    NAME 'Selected_Municipalities'
    TYPE POLYGON
    DUMP true
    TEMPLATE foo
    CONNECTIONTYPE postgis
    CONNECTION "dbname='test' host=localhost port=5433 user='{282B61D4012321321}' password='{312312312443223423}' sslmode=disable"
    DATA 'the_geom FROM "municipality" USING UNIQUE id USING srid=4326'
    FILTER "id in( %municipalitylist% )"
    METADATA
      'ows_title' 'selected_municipalities'
      'ows_srs'   'EPSG:4326'
      'municipalitylist_validation_pattern' '^[0-9,]+$'
      'default_municipalitylist' '0'
    END
    STATUS OFF
    TRANSPARENCY 100
    PROJECTION
      'init=epsg:4326'
    END
    CLASS
      NAME 'Selected Municipalities'
      STYLE
        WIDTH 2.5
        OUTLINECOLOR 255 255 000
        COLOR -1 -1 -1
      END
    END
  END

 

So the interesting parts are the FILTER and METADATA sections in the Selected_Municipalities layer.

  • The filter part basically applies a where clause to our layer sql definition. What is smart about this filter is that it uses an SQL 'in' clause to allow multiple values (record id's in this case) to be used as the filter.
  • The municipalitylist_validation_pattern is the next interesting bit. I have set it to a regular expression that will allow any number of numbers and commas. The validation pattern is there to prvent sql injection attacks into our database.
  • The default_municipalitylist is set to 0 and will basically allow the user not to specify anything in the url for the municipality list and the query to still be valid without actually selecting anything.
Ok so thats all the grunt work out the way, lets take a look at how to use it (I'm going to wrap the urls below for ease of reading). Lets first make a standard map with no selected items:
http://llocalhost/cgi-bin/mapserv?map=TEST&SERVICE=WMS&VERSION=1.3.0&
REQUEST=GetMap&BBOX=-27,26,-25,30&CRS=EPSG:4326&
WIDTH=1498&HEIGHT=749&LAYERS=Municipality_Outlines,Selected_Municipalities&
STYLES=&FORMAT=image/PNG
Which produces this:
Our map with no selection

Our map with no selection

There are no selected items visible as our filter on our selection layer returns no records when using the default 0 (zero) id which we set up in our map file. Now we can select one item by adding "&municipalitylist=5" to the end of our url:
http://llocalhost/cgi-bin/mapserv?map=TEST&SERVICE=WMS&VERSION=1.3.0&
REQUEST=GetMap&BBOX=-27,26,-25,30&CRS=EPSG:4326&
WIDTH=1498&HEIGHT=749&LAYERS=Municipality_Outlines,Selected_Municipalities&
STYLES=&FORMAT=image/PNG&municipalitylist=5
Which produces this:
One item selected using our filter

One item selected using our filter

Finally the nice part about this is that we can select a list of municipalities by adding "&municipalitylist=5,7" to the end of our url (you can add as many comma separated ids as needed):
http://llocalhost/cgi-bin/mapserv?map=TEST&SERVICE=WMS&VERSION=1.3.0&
REQUEST=GetMap&BBOX=-27,26,-25,30&CRS=EPSG:4326&
WIDTH=1498&HEIGHT=749&LAYERS=Municipality_Outlines,Selected_Municipalities&
STYLES=&FORMAT=image/PNG&municipalitylist=5,7
Which produces this:
Multiple items selected in our map
Multiple items selected in our map
UMN Mapserver is a great help for building mapping enabled web applications and the variable substitution capabilities of Mapserver give you a really flexible way to decide what to display on a map at runtime.
pixelstats trackingpixel

Making the most of UMN mapserver runtime variable substitution

We are working on a project where we have a django app that dynamically calls mapserver to generate an image of a region with a set of selected properties. We wanted to be able to pass cgi substitution parameters for a list of entities to highlight. Here is how we did it.

UMN Mapserver supports the concept of variable substitution which is documented nicely here. Since version 6 of mapserver, you must define a validation pattern when setting up substitition. A default value is optional but we will be using that too. So lets contrive a simple scenario. You have a layer of municipal boundaries and you want to be able to highlight zero or more of those boundaries on the map. To do that, we will add two nearly identical municipal layer definitions to our map file:

LAYER
  NAME 'Municipality_Outlines'
  TYPE POLYGON
  DUMP true
  TEMPLATE none
  CONNECTIONTYPE postgis
  CONNECTION "dbname='test' host=localhost port=5433 user='{282B61123232131231}' password='{282B6123423423423}' sslmode=disable"
  DATA 'the_geom FROM "municipality" USING UNIQUE id USING srid=4326'
  METADATA
    'ows_title' 'municipality_outlines'
    'ows_srs'   'EPSG:4326'
  END
  STATUS OFF
  TRANSPARENCY 100
  PROJECTION
    'init=epsg:4326'
  END
  LABELITEM 'name'
  CLASS
    NAME 'Municipalities'
    STYLE
      WIDTH 3.0
      OUTLINECOLOR 5 200 200
      COLOR -1 -1 -1
    END
  END
END
LAYER
  NAME 'Selected_Municipalities'
  TYPE POLYGON
  DUMP true
  TEMPLATE foo
  CONNECTIONTYPE postgis
  CONNECTION "dbname='test' host=localhost port=5433 user='{282B61D4012321321}' password='{312312312443223423}' sslmode=disable"
  DATA 'the_geom FROM "municipality" USING UNIQUE id USING srid=4326'
  FILTER "id in( %municipalitylist% )"
  METADATA
    'ows_title' 'selected_municipalities'
    'ows_srs'   'EPSG:4326'
    'municipalitylist_validation_pattern' '^[0-9,]+$'
    'default_municipalitylist' '0'
  END
  STATUS OFF
  TRANSPARENCY 100
  PROJECTION
    'init=epsg:4326'
  END
  CLASS
    NAME 'Selected Municipalities'
    STYLE
      WIDTH 2.5
      OUTLINECOLOR 255 255 000
      COLOR -1 -1 -1
    END
  END
END

So the interesting parts are the FILTER and METADATA sections in the Selected_Municipalities layer.

  • The filter part basically applies a where clause to our layer sql definition. What is smart about this filter is that it uses an SQL 'in' clause to allow multiple values (record id's in this case) to be used as the filter.
  • The municipalitylist_validation_pattern is the next interesting bit. I have set it to a regular expression that will allow any number of numbers and commas. The validation pattern is there to prvent sql injection attacks into our database.
  • The default_municipalitylist is set to 0 and will basically allow the user not to specify anything in the url for the municipality list and the query to still be valid without actually selecting anything.

Ok so thats all the grunt work out the way, lets take a look at how to use it (I'm going to wrap the urls below for ease of reading). Lets first make a standard map with no selected items:

http://llocalhost/cgi-bin/mapserv?map=TEST&SERVICE=WMS&VERSION=1.3.0&
REQUEST=GetMap&BBOX=-27,26,-25,30&CRS=EPSG:4326&
WIDTH=1498&HEIGHT=749&LAYERS=Municipality_Outlines,Selected_Municipalities&
STYLES=&FORMAT=image/PNG

Which produces this:

|Our map with no selection|

There are no selected items visible as our filter on our selection layer returns no records when using the default 0 (zero) id which we set up in our map file. Now we can select one item by adding "&municipalitylist=5" to the end of our url:

http://llocalhost/cgi-bin/mapserv?map=TEST&SERVICE=WMS&VERSION=1.3.0&
REQUEST=GetMap&BBOX=-27,26,-25,30&CRS=EPSG:4326&
WIDTH=1498&HEIGHT=749&LAYERS=Municipality_Outlines,Selected_Municipalities&
STYLES=&FORMAT=image/PNG&municipalitylist=5

Which produces this:

|One item selected using our filter|

Finally the nice part about this is that we can select a list of municipalities by adding "&municipalitylist=5,7" to the end of our url (you can add as many comma separated ids as needed):

http://llocalhost/cgi-bin/mapserv?map=TEST&SERVICE=WMS&VERSION=1.3.0&
REQUEST=GetMap&BBOX=-27,26,-25,30&CRS=EPSG:4326&
WIDTH=1498&HEIGHT=749&LAYERS=Municipality_Outlines,Selected_Municipalities&
STYLES=&FORMAT=image/PNG&municipalitylist=5,7

Which produces this:

Multiple items selected in our map
Multiple items selected in our map

UMN Mapserver is a great help for building mapping enabled web applications and the variable substitution capabilities of Mapserver give you a really flexible way to decide what to display on a map at runtime.

Norwegian Trekking with QGIS Server

I have blogged about the awesomeness that is QGIS Server before. Maybe you have seen some of the nice maps that Andreas Neumann has made in Uster, Switzerland. Over the past 3 months we were contracted to help prototyping a new mapping service for the Norwegian Trekking Association. We really got a chance to put QGIS Server (and the new QGIS Web Client project) through its paces. Why not take a little look for yourself. We had quite a lot of fun optimising the client's data set for good performance and generally making sure everything works smoothly.

Note:

- the site is still a test site, but the fine folks from Norway gave me the OK to let people take it for a whirl.
- we have not yet implemented search support.
- We made a bunch of different print layouts for you to try out!

It's now incredibly easy to get your QGIS cartography online. In the near future I plan to test out techniques for tilecaching with QGIS Server and once that works it will be the end of the line for my 11+ year love affair with UMN Mapserver for the most part I think.

Get your map on! QGIS Server in action (click for full image)

Get your map on! QGIS Server in action (click for full image)

 

 

 

pixelstats trackingpixel

Norwegian Trekking with QGIS Server

I have bloggedabout the awesomeness that is QGIS Server before. Maybe you have seen some of the nice maps that Andreas Neumann has madein Uster, Switzerland. Over the past 3 months we were contracted to help prototyping a new mapping service for the Norwegian Trekking Association. We really got a chance to put QGIS Server (and the new QGIS Web Client project) through its paces. Why not take a little look for yourself. We had quite a lot of fun optimising the client's data set for good performance and generally making sure everything works smoothly.

Note:

- the site is still a test site, but the fine folks from Norway gave me the OK to let people take it for a whirl.
- we have not yet implemented search support.
- We made a bunch of different print layouts for you to try out!

It's now incredibly easy to get your QGIS cartography online. In the near future I plan to test out techniques for tilecaching with QGIS Server and once that works it will be the end of the line for my 11+ year love affair with UMN Mapserver for the most part I think.

Get your map on! QGIS Server in action (click for full image)

Help wanted: FOSS GIS and Python Geek in Africa

Are you a python programmer adept at django and other technologies in the web mapper’s toolbox? We have an exciting project on the go and are looking for someone to help us during the months of February and March 2011. You can work remotely if needed, or here in Swellendam, Western Cape, South Africa if you prefer. Please note applicants must already be available full time for these months (or a good part of them) and already up to speed with these technologies – there will be no time for ‘learning on the job’. Please send me your CV to tim [A T] linfiniti.com if you are interested.

Hope to hear from you soon!

Tim

pixelstats trackingpixel

Web Testing with Selenium

I recently posted a list of software I use to build GeoSpatially enabled web applications. One more tool I should mention is Selenium. Selenium is a web testing suite which includes an extension to Firefox that lets you ‘write’ test units by interactively using your web site. When you run a unit test, the actions you carried out on the site are replayed and the test passes or fails based on whether the recording replay could be completed. Interestingly, the recorded script can be edited and saved out in different languages (perl, php, python etc). I didn’t have much luck getting this latter feature to work and I also had some problems getting test units to run repeatably for some of my ajax driven pages – though I am still new to the software so perhaps I will figure out my issues given further reading of the docs. Linux User Magazine has a nice article about Selenium which is well worth a read.

pixelstats trackingpixel

Web Testing with Selenium

I recently posted a list of software I use to build GeoSpatially enabled web applications. One more tool I should mention is Selenium. Selenium is a web testing suite which includes an extension to Firefox that lets you 'write' test units by interactively using your web site. When you run a unit test, the actions you carried out on the site are replayed and the test passes or fails based on whether the recording replay could be completed.

Interestingly, the recorded script can be edited and saved out in different languages (perl, php, python etc). I didn't have much luck getting this latter feature to work and I also had some problems getting test units to run repeatably for some of my ajax driven pages - though I am still new to the software so perhaps I will figure out my issues given further reading of the docs. Linux User Magazine has a nice article about Selenium which is well worth a read.

Two great options for creating charts in your website

In the last few weeks I needed to implement some charting / graphing for a project. Here are two great options:

1) The Google Chart API is a web service that you can call from your web page and it will embed a chart into your page based on the data you send it. They have many nice options for creating good looking charts, and even include some options for creating simple thematic maps.

Advantage: Offload the work to Google and benefit from the maintenance and cool new features they provide.

Disadvantage: I found it sometimes a bit slow to return the chart and Google naysayers may prefer not to hand over control of important parts of their app to Google. Also I think the API is a little less intuitive than the Flot api.

The Google Chart API

The Google Chart API

2) The Flot Jquery plotting library. While it may lack all of  the bells and whistles of the Google Chart API, Flot has some bells and whistles of its own. If you have used OpenLayers before, you will find Flot familiar in that it just attaches itself to a div and renders into that. With some add-ons you are able to make interactive charts e.g. where you can zoom in and out of the chart, click on elements to find out more about them and so on.

Advantage: A ‘natural fit’ if you are already using jquery. Also you control everything so no need to worry about dependency on Google services.

Disadvantage: Doesn’t have quite the range of charting options that the google API has.

Flot Jquery Plugin

Flot Jquery Plugin

pixelstats trackingpixel

Two great options for creating charts in your website

In the last few weeks I needed to implement some charting / graphing for a project. Here are two great options:

1) The `Google Chart API`_is a web service that you can call from your web page and it will embed a chart into your page based on the data you send it. They have many nice options for creating good looking charts, and even include some options for creating simple thematic maps.

Advantage: Offload the work to Google and benefit from the maintenance and cool new features they provide.

Disadvantage: I found it sometimes a bit slow to return the chart and Google naysayers may prefer not to hand over control of important parts of their app to Google. Also I think the API is a little less intuitive than the Flot api.

The Google Chart API

2) The `Flot`_ Jquery plotting library. While it may lack all of the bells and whistles of the Google Chart API, Flot has some bells and whistles of its own. If you have used OpenLayers before, you will find Flot familiar in that it just attaches itself to a div and renders into that. With some add-ons you are able to make interactive charts e.g. where you can zoom in and out of the chart, click on elements to find out more about them and so on.

Advantage: A 'natural fit' if you are already using jquery. Also you control everything so no need to worry about dependency on Google services.

Disadvantage: Doesn't have quite the range of charting options that the google API has.

Flot Jquery Plugin

FossGIS Web Mappers Toolbox

I thought I would take a moment to run through the tools in my digital toolbox that I use to develop GIS enabled web sites. I try to pick the best of breed in each area rather than learn multiple tools that do the same thing – life is short and there isn’t enough time for me to do that.  I would be interested to read in the comments if anyone has suggestions of better alternatives:

Operating system: Debian or Ubuntu Server Edition. Really don’t run your web site on Windows, its just a silly waste of time and money.

Web server – Apache 2. It’s a no brainer really, its fast, robust and infinitely configurable while easy to get running in a default configuration.

Programmers editor: Vim (or emacs if you prefer). Being able to use the same editor on both local development machines and remote servers is indispesible. Also if you hand write your html it tends to have less gumpf clogging up the works compared to the Frontpage etc. generated sites I have seen out there. If you must use a GUI editor there are a few good choices under Linux, but VIM does it for me.

Web Application framework: (Geo)Django. With its support for spatial extensions,  intuitive MVC architecture and wealth of 3rd party add-ons, Django is a great choice for building your web applications with Python.

Backend Database: PostgreSQL/PostGIS. It does everything you need including store geospatial data.  Some people suggest SpatialLite as an alternative, but thus far I have haven’t used it in a production system so I don’t know what limitations, if any, it has.

Javascript Framework: Jquery. I know there are some good competitors but JQuery and JQuery-UI are so great I haven’t felt a need to go and discover their competitors. There are a huge number of add ons for JQuery and plenty of helpful people out there if you get stuck.

CSS Framework: Blueprint CSS. I think CSS frameworks are still a relatively new concept. They take a lot of the pain out of layout and make your site look good with minimal effort. Blueprint implements the 960 grid and the results are pretty much always pleasing on the eye.

CSS Compressor: http://www.csscompressor.com/. This web site will take your CSS and squish it by removing comments, white space etc. It typically makes my  CSS files around 25% smaller.

Javascript Compressor: Google Closure. This web service / web app will squash your javascript down nice and small using a variety of techniques.  With simple optimisations, I typically get around 40% reduction in code size. It also optimises your code for good measure.  They provide lots of detailed documentation to get you on your way.

Web Mapping Control: OpenLayers. It’s a bit of a no-brainer. I haven’t really looked that hard but is there anything that really competes with it (other than the Google Maps API)?

Web Mapping Server: UMN Mapserver. One day soon I am going to replace this entry with QGIS’ own mapserver implementation by Marco Hugentobler, but for now Mapserver is the best thing since sliced bread – it’s  a doddle to install, incredible flexible and you can generate basic mapfiles using QGIS so it’s easy to get started with. Also worth a mention is Mapnik which can produce gorgeous maps.

Web Mapping Cache: TileCache. I keep meaning to try out MapProxy since it supports region delimitation using shapefiles rather than bounding boxes – which can drastically reduce the size of your seeded cache. But for now, TileCache is really easy to set up and you should have it running in just a few minutes.

Did I leave anything out? If you take the above tools, software and web services, you will have everything you need to produce some great web mapping software.

pixelstats trackingpixel

FossGIS Web Mappers Toolbox

I thought I would take a moment to run through the tools in my digital toolbox that I use to develop GIS enabled web sites. I try to pick the best of breed in each area rather than learn multiple tools that do the same thing - life is short and there isn't enough time for me to do that.  I would be interested to read in the comments if anyone has suggestions of better alternatives:

Operating system: `Debian`_ or`Ubuntu Server Edition`_. Really don't run your web site on Windows, its just a silly waste of time and money.

Web server - `Apache 2`_. It's a no brainer really, its fast, robust and infinitely configurable while easy to get running in a default configuration.

Programmers editor: `Vim`_ (or emacs if you prefer). Being able to use the same editor on both local development machines and remote servers is indispesible. Also if you hand write your html it tends to have less gumpf clogging up the works compared to the Frontpage etc. generated sites I have seen out there. If you must use a GUI editor there are a few good choices under Linux, but VIM does it for me.

Web Application framework: `(Geo)Django`_. With its support for spatial extensions,  intuitive MVC architecture and wealth of 3rd party add-ons, Django is a great choice for building your web applications with Python.

Backend Database:`PostgreSQL/PostGIS`_. It does everything you need including store geospatial data.  Some people suggest SpatialLite as an alternative, but thus far I have haven't used it in a production system so I don't know what limitations, if any, it has.

Javascript Framework: `Jquery`_.I know there are some good competitors but JQuery and JQuery-UI are so great I haven't felt a need to go and discover their competitors. There are a huge number of add ons for JQuery and plenty of helpful people out there if you get stuck.

CSS Framework: `Blueprint CSS`_. I think CSS frameworks are still a relatively new concept. They take a lot of the pain out of layout and make your site look good with minimal effort. Blueprint implements the 960 grid and the results are pretty much always pleasing on the eye.

CSS Compressor: http://www.csscompressor.com/. This web site will take your CSS and squish it by removing comments, white space etc. It typically makes my  CSS files around 25% smaller.

Javascript Compressor: `Google Closure`_. This web service / web app will squash your javascript down nice and small using a variety of techniques.  With simple optimisations, I typically get around 40% reduction in code size. It also optimises your code for good measure. They provide lots of detailed documentation to get you on your way.

Web Mapping Control: `OpenLayers`_.It's a bit of a no-brainer. I haven't really looked that hard but is there anything that really competes with it (other than the Google Maps API)?

Web Mapping Server: `UMN Mapserver`_. One day soon I am going to replace this entry with QGIS' own mapserver implementation by Marco Hugentobler, but for now Mapserver is the best thing since sliced bread - it's  a doddle to install, incredible flexible and you can generate basic mapfiles using QGIS so it's easy to get started with. Also worth a mention is Mapnik which can produce gorgeous maps.

Web Mapping Cache: `TileCache`_. I keep meaning to try out MapProxy since it supports region delimitation using shapefiles rather than bounding boxes - which can drastically reduce the size of your seeded cache. But for now, TileCache is really easy to set up and you should have it running in just a few minutes.

Did I leave anything out? If you take the above tools, software and web services, you will have everything you need to produce some great web mapping software.

  • Page 1 of 1 ( 18 posts )
  • web development

Back to Top

Sponsors