[OpenLayers-Users] Re: minifying geojson data

[Mr. Puneet Kishor]

solved... see below (might be of use to others)

On Sep 25, 2011, at 11:35 AM, Mr. Puneet Kishor wrote:

> Right now I am creating a vector layer with features that are clickable, and show a popup window with the feature's attributes. My code is like so on the server side where I am selecting (fictitious) "meetings" from a database
> 
>    while (meetings) {
>        push @features, {
>            type => "Feature",
>            properties => {
>                "long field1 name" => $field1, 
>                "long field2 name" => $field2, 
>                "long field3 name" => $field3
>            },
>            geometry => {
>                type => "Point",
>                coordinates => [$lng, $lat]
>            }
>        };
>    }
>    my %meetings = (
>        meetings => {type => "FeatureCollection", features => \@features}
>    );
>    my $res = to_json \%meetings;
> 
> and then, in the browser
> 
>    // In my ajax call
>    success: function(data) {
>        var geojson_format = new OpenLayers.Format.GeoJSON();
>        ..
>        lyr.addFeatures(geojson_format.read(data["meetings"]));
> 
>        lyr.events.on({
>            "featureselected": onFeatureSelect,
>            "featureunselected": onFeatureUnselect
>        });



pass additional data to the `onFeatureSelect` callback like so

        lyr.events.on({
            "featureselected": function(evt) {
                 onFeatureSelect(evt, keymap);
            },
            "featureunselected": onFeatureUnselect
        });


and then, in the callback

        // !onFeatureSelect(evt)
        function onFeatureSelect(evt, keymap) {
            feature = evt.feature;
            var str = "";
            
            for (var i in feature.attributes) {
                str += "<b>" + keymap[i] + ":</b> " + feature.attributes[i] + "<br />";
            }            

            .. make popup window with str
        };


>    }
> 
> 
>    function onFeatureSelect(evt) {
>        var feature = evt.feature;
>        var str = "";
>        for (var i in feature.attributes) {
>            str += "<b>" + i + ":</b> " + feature.attributes[i] + "<br />";
>        }
> 
>        popup = new OpenLayers.Popup.FramedCloud(.. using str ..);
>        ..
>        map.addPopup(popup, true);
>    };
> 
> This works great, but for a few thousand features, all those "long fields names" add up to a lot of wasteful data transfer. In the interest of reducing data transfer, I am hoping to implement a keymap for my attribute names (keys), and then send the keymap along with the new keys. Something like so on the server side (kinda like my own minification scheme) --
> 
>    while (meetings) {
>        push @features, {
>            type => "Feature",
>            properties => {
>                a => $field1, 
>                b => $field2, 
>                c => $field3
>            },
>            geometry => {
>                type => "Point",
>                coordinates => [$lng, $lat]
>            }
>        };
>    }
>    my %meetings = (
>        keymap => {
>            a => "long field1 name", 
>            b => "long field2 name", 
>            c => "long field3 name"
>        },
>        meetings => {type => "FeatureCollection", features => \@features}
>    );
>    my $res = to_json \%meetings;
> 
> But, I am at a loss as to how to modify my JavaScript code to use this keymap. `evt.feature` seems to have an "attributes" key that has been automatically mapped to the "properties" key sent from the server. How do I get the data.keymap to my onFeatureSelect(evt) callback?