Create beautiful tiled heat maps with PHP and GD 

Bookmark and Share

This is without any doubt the most time consuming project so far on this blog. Hopefully this is also the most rewarding too because I like very much the results. I have always been fascinated by geographic heat maps and I spent several weeks to know how I could draw them with PHP and GD library, similarly to that of HeatMap API. As you can guess, you can read this article because I finally got a satisfying results :)

Basically, A geo heat map is a heat map based on geo data and is mostly used to easily visualize the geographic density of a data thanks to a color gradient and clustering of spots.
To explain how it works, our geo data are the 1.171 McDonald's restaurants located in France.
Read More...

[ add comment ]   |  [ 0 trackbacks ]

Geodata visualization - part 3: flow maps 

Bookmark and Share

This article is the last in a serie about geodata visualization. It focuses on a very interesting (and usually quite beautiful) kind of maps called flow maps, aka
a mix of maps and flow charts, that show the movement of objects from one location to another. (Phang, 2005)

You will find a very complete introduction in Flow Map Layout, a collective academic paper.
Our goal is not to implement a full flow tiled-map generator inspired by this paper (despite the fact that would be certainly a great challenge). Instead we create a tile-based flow map of the annual average daily traffic (AADT) on different sections of main roads in Paris area (Périphérique excluded).
Read More...

[ add comment ]   |  [ 0 trackbacks ]

Geodata visualization - part 2: multiple variables on maps 

Bookmark and Share


In the first article of this serie about geodata visualization, we set up a 2-level choropleth map to display distribution of french communes among upper administrative areas, aka régions and départements. So geodata analysis was done with only one statistical variable.
In this article we discuss how we can add more variables on maps with GD keeping readability in mind. In our study-case, we extend the choropleth map with population distribution and population by commune distribution among admin areas. That means 2 new variables.
Read More...

[ add comment ]   |  [ 0 trackbacks ]

Geodata visualization - part 1: multi-level choropleth maps 

Bookmark and Share


Google Maps is a wonderful web mapping service that can easily be extended to display thematic maps. Usually those maps are quite static and geodata mining must be either performed with a set of macro-maps & micro-maps or only with a detailed map.
With Google Maps API and customized overlays, we can set multi-level thematic maps where easy back-forth navigation between levels adds a real value.
There are almost an infinity number of thematic maps and one kind consists in shading geographic areas in proportion to the measurement of the statistical variable being displayed on the map. Those maps provides an easy way to visualize how a measurement varies across a geographic area or it shows the level of variability within a region. You find them everywhere but paradoxically enough, only specialists know their name: choropleth maps. Sweet, isn't it?

In this article, we create a Google Maps-based choropleth to display the french commune distribution among upper administrative political subdivisions of France. It is quite different from population distribution.
Read More...

[ add comment ]   |  [ 0 trackbacks ]

A map tile server - part 5: from markers to polylines and polygons 

Bookmark and Share


In the previous article, we set up a tile server to display geometry features where the type can only by Point (equivalent of GMarker). That is a good start but it is a constraint that should be removed to get a really fancy map tile server. So this article explains how to upgrade it to display polylines (equivalent of GPolyline) and polygons (equivalent of GPolygon - nothing more than a closed polyline filled with a color).

Our geo-data are still the 36.202 french continental communes that are stored in a MySQL database.
Read More...

[ add comment ]   |  [ 0 trackbacks ]

A map tile server - part 4: interacting with tile contents 

Bookmark and Share


In the previous article, we set up a tile server to display french communes on a client-side interface, based on Google Maps. In its current state, our system has a big drawback. Indeed, even if we can now display thousands of markers on a map, we loose one of the main asset of a standard GMarker: that is the ability to click on a marker and bind a callback function to this very event.
To have a nice tile-based application, we should mend this flaw. There is hope because it is an available functionality on all layers (Wikipedia, Panoramio,...) of the standard Google Maps.
Read More...

[ 1 comment ]   |  [ 0 trackbacks ]

A map tile server - part 3: populating tiles with geodata from a database 

Bookmark and Share


Let's face it, our tile server (set up in the previous article) is not really useful in its current state.
It's time to add a massive bunch of geo-data that would be very difficult to display directly in Google Maps with standard overlays (aka markers, polylines or polygons). Technically we can plot 1000 GMarkers on a map but then ergonomy is doomed to level zero. With tiles, we can display several thousands markers without any problem, so here we go.

Our geo-data are the 36.202 french continental communes (so excluding Corsica), that are stored in a MySQL database. Read More...

[ add comment ]   |  [ 0 trackbacks ]

A map tile server - part 2: understanding Google Maps tile overlays and building up a tile server 

Bookmark and Share


The map displayed in Google Map seems to be one giant plain image but actually it consists of a set of tiles that the map engine knows how to request to a tile server and merge smartly to give the impression of a unique image.
For example http://mt1.google.com/vt/x=259&y=176&z=9 requests the standard 256px*256px tile of tile coordinates (259,176,9). At zoom level 9, Earth map is divided in a square of 512*512 = 262144 tiles and (259,176,9) identify the 259th tile along the x axis (latitude) and the 176th tile along the y axis (longitude) at zoom level 9.
(0,0) is the tile in the top left corner (geographically in the Arctic ocean) and (512,512) the tile in the bottom right corner (in Antarctica).
Read More...

[ add comment ]   |  [ 0 trackbacks ]

A map tile server - part 1: the basics of our Google Maps application 

Bookmark and Share


The Google Maps API is a wonderful API for all those people like me who like playing with maps. In the coming articles of this blog, I would like to share whith you a bit of the knowledge I heaped using the advanced functions of this API.

I'm going to assume a lot of things:
-that you already know the basics of the Google Maps API v2;
-that you know all the basic concepts of the client-side JavaScript language: function closures, anonymous functions, asynchronous I/O, prototypes, json;
-that you know the fundamentals of the jQuery JavaScript library;
-that you know the server-side PHP language and its GD Graphics library;
-and a little bit of HTML and CSS to finish.

In this article, we initialize the front page of our application.
Read More...

[ add comment ]   |  [ 0 trackbacks ]

| 1 | 2 | 3 |