How to visualize geolocated data on a slippy map on a website?

Question

I am trying to visualize some data on a website that has been measured while driving around. My source is a CSV file with longitude, latitude and my measured data. I have been able to export it to a GPX file and to display it using OpenLayers using the instructions found on http://wiki.openstreetmap.org/wiki/DE:Openlayers_Track_example.

The problem is that I would like to not only visualize the (points of the) track but also the measured data that has been recorded with them. Some variation in color or line width would be great, but I could not find an example ho to do anything like this in OpenLayers (or another JS library). I guess it would be possible to use rule based styling as explained on http://docs.openlayers.org/library/feature_styling.html#rule-based-styling but I was unable to find out how to retrieve the property from the GPX file.

I found an example that partially matches my needs on geo.dianacht.de/osm/track.html but this uses different data sources for track and data. It would be more useful if I could just use one source. If this should not be possible, any other suggestion is highly appreciated.

Answer 1

OpenLayers allows to display labels along with attributes. This is a part of styling. If your gpx layer doesnt contain any attributes. Try this. Load the csv layer in QGIS(tutorial) Enable editing on the layer and add some attributes. Finally export to GML instead of GPX and load it with openlayers. See the styling docs. The unique values example will be worth looking

Answer 2

you can achieve this with using context when adding your points.

    var context = {
        getLabel: function(feature) {                    
            return feature.attributes.label;// Define your label attribute.
        }
    };
    var template = {
        label: "${getLabel}"

    };
    var style = new OpenLayers.Style(template, {context: context});
    var layer = new OpenLayers.Layer.Vector('Points', {
        styleMap: new OpenLayers.StyleMap(style),
        renderers: renderer
    });
    layer.addFeatures(features);

    map.addLayer(layer);

i hope it works for you...