[OpenLayers-Users] Re: minifying geojson data

[Puneet Kishor]

On Sep 25, 2011, at 9:04 PM, Zac Spitzer wrote:

> simply enabling gzip/deflate compression works really well in
> reducing the transfer size for geoJSON... I often see a 10x win
> 
> using the keymap is also a good approach and saves runtime
> memory in the browser


Yeah, will try out gzip when the need arises. For now, with keymap implemented, and with "pretty" JSON turned off (so I get more compact JSON), I cut the data being transferred to 1/3 (from about 1.8 MB to under 600 KB).



> 
> On Mon, Sep 26, 2011 at 3:33 AM, Mr. Puneet Kishor <punk.kish at gmail.com>wrote:
> 
>> 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?
>> 
>> _______________________________________________
>> Users mailing list
>> Users at lists.osgeo.org
>> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>> 
> 
> 
> 
> -- 
> Zac Spitzer
> Solution Architect / Director
> Ennoble Consultancy Australia
> http://www.ennoble.com.au
> http://zacster.blogspot.com
> +61 405 847 168