<?xml version="1.0" encoding="utf-8"?>
<!-- generator="Kukkaisvoima version 7" -->
<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
>
<channel>
<title>vmx: JavaScript</title>
<link>http://vmx.cx/cgi-bin/blog/index.cgi</link>
<description>Blog of Volker Mische</description>
<pubDate>Fri, 11 Jun 2010 22:02:24 +0200</pubDate>
<lastBuildDate>Fri, 11 Jun 2010 22:02:24 +0200</lastBuildDate>
<generator>http://23.fi/kukkaisvoima/</generator>
<language>en</language>
<item>
<title>Bolsena hacking event
</title>
<link>http://vmx.cx/cgi-bin/blog/index.cgi/bolsena-hacking-event-2010%3A2010-06-11%3Aen%2CCouchDB%2CJavaScript%2Cgeo</link>
<comments>http://vmx.cx/cgi-bin/blog/index.cgi/bolsena-hacking-event-2010%3A2010-06-11%3Aen%2CCouchDB%2CJavaScript%2Cgeo#comments</comments>
<pubDate>Fri, 11 Jun 2010 22:02:24 +0200</pubDate>
<dc:creator>Volker Mische</dc:creator>
<category>en</category>
<category>CouchDB</category>
<category>JavaScript</category>
<category>geo</category>
<guid isPermaLink="false">http://vmx.cx/cgi-bin/blog/index.cgi/bolsena-hacking-event-2010%3A2010-06-11%3Aen%2CCouchDB%2CJavaScript%2Cgeo/</guid>
<description><![CDATA[ 
 [...]]]></description>
<content:encoded><![CDATA[

<p>The <a href="http://wiki.osgeo.org/wiki/Bolsena_Code_Sprint_2010">OSGeo hacking event in Bolsena/Italy</a> was great. Many interesting people
sitting the whole day in front of their laptops surrounded by a beautiful
scenery and nice warm sunny weather. It gets even better when you get meat for
lunch and dinner.</p>

<p>I had the chance to tell people a bit more about
<a href="http://couchdb.apache.org/">CouchDB</a> and
<a href="http://github.com/couchapp/couchapp/">Couchapps</a>,</p>

<p>One project I haven't heard that much before of was
<a href="http://deegree.org/">Degree</a>. They build the whole stack of OGC services
you could imagine. For me it was of interest that they have a
blob storage in their upcoming 3.0 release. The data
isn't flattened into SQL tables but stored as blobs. This sounds like good use
for a CouchDB backend in the future.</p>

<p>I was working with <a href="http://wiki.osgeo.org/wiki/User:Simonp">Simon Pigot</a> on a
<a href="http://geonetwork-opensource.org/">GeoNetwork</a>
re-implementation
based on CouchDB using Couchapp. We got the basic stuff like putting an XML
document into the database, editing it and returning the new document, as well
as fulltext indexing with
<a href="http://github.com/rnewson/couchdb-lucene">couchdb-lucene</a>
work. Next steps are improving the JSON to XML mapping and integrating spatial
search based on <a href="http://github.com/vmx/couchdb">GeoCouch</a>.</p>

<p>The event was really enjoyable, thanks <a href="http://couch.io/">Couchio</a> for
sponsoring the trip, thanks <a href="http://www.ticheler.net/">Jeroen</a> for
organizing it, and thanks all other hackers that made it such a awesome event.
Hope to see you next year!</p>
]]></content:encoded>
<wfw:commentRss>http://vmx.cx/cgi-bin/blog/index.cgi/bolsena-hacking-event-2010%3A2010-06-11%3Aen%2CCouchDB%2CJavaScript%2Cgeo/feed/</wfw:commentRss>
</item>
<item>
<title>Drag as long as you want
</title>
<link>http://vmx.cx/cgi-bin/blog/index.cgi/drag-as-long-as-want%3A2009-11-11%3Aen%2COpenLayers%2CJavaScript%2Cgeo</link>
<comments>http://vmx.cx/cgi-bin/blog/index.cgi/drag-as-long-as-want%3A2009-11-11%3Aen%2COpenLayers%2CJavaScript%2Cgeo#comments</comments>
<pubDate>Wed, 11 Nov 2009 12:25:35 +0200</pubDate>
<dc:creator>Volker Mische</dc:creator>
<category>en</category>
<category>OpenLayers</category>
<category>JavaScript</category>
<category>geo</category>
<guid isPermaLink="false">http://vmx.cx/cgi-bin/blog/index.cgi/drag-as-long-as-want%3A2009-11-11%3Aen%2COpenLayers%2CJavaScript%2Cgeo/</guid>
<description><![CDATA[ 
 [...]]]></description>
<content:encoded><![CDATA[

<p>It has been a very long outstanding bug (officially it was a missing
feature) in <a href="http://www.openlayers.org/">OpenLayers</a> that annoyed
me from the first time I’ve been using OpenLayers. I’m talking about
<a href="http://trac.openlayers.org/ticket/39">ticket #39</a>: “Allow
pan-dragging while outside map until mouseup”.
</p>
<p>Normally when you drag the map in OpenLayers it will stop dragging as soon
as you hit the edge of the map viewport (the <code>div</code> that contains
the map). Whenever you have a small map, but a huge window and a loooong way to
drag, it can get quite annoying, as the maximum distance you can drag at once
is the size of that viewport.
</p>
<p>But yesterday
<a href="http://openlayers.org/pipermail/commits/2009-November/009095.html">it
finally happend</a>. A patch to fix it landed in trunk. A first rough cut was
made at the
<a href="http://openlayers.org/blog/2009/10/26/openlayers-at-the-foss4g-code-sprint/">OpenLayers
code sprint at the FOSS4G</a>.
<a href="http://wiki.osgeo.org/wiki/User:Ahocevar">Andreas Hocevar</a> reviewed
the code and made a more unobtrusive version of it (thanks, again).
</p>
<p>Try these two examples to see the difference. Click on the map an drag it a
long way to the right and back to the left again (you might need to zoom it a bit to see the full effect):
<ul>
  <li><a href="http://openlayers.org/dev/examples/lite.html">default
behaviour</a></li>
  <li><a href="http://openlayers.org/dev/examples/document-drag.html">documentDrag behaviour</a></li>
</ul>
<p>As it is a new feature, it isn’t enabled by default (and only available on
current SVN trunk, it will be available in OpenLayers 2.9). To enable it on
 your map, just use the following code to add the <code>documentDrag</code>
parameter to the
<a href="http://dev.openlayers.org/docs/files/OpenLayers/Control/DragPan-js.html">DragPan control</a> (you obviously need a recent SVN checkout).
<p><strong>Update</strong> (2009-11-18): It got even easier with
<a href="http://openlayers.org/pipermail/commits/2009-November/009109.html">r9805</a>:
</p>
<p>
  <pre>
<code>// Use default controls but with documentDrag enabled.
var controls = [
    new OpenLayers.Control.Navigation({documentDrag: true}),
    new OpenLayers.Control.PanZoom(),
    new OpenLayers.Control.ArgParser(),
    new OpenLayers.Control.Attribution()]
map = new OpenLayers.Map('map', {controls: controls});
</code></pre>
</p>
<p>For a full working version have a look at
<a href="http://svn.openlayers.org/trunk/openlayers/examples/document-drag.html">the
source of the documentDrag example</a>.
]]></content:encoded>
<wfw:commentRss>http://vmx.cx/cgi-bin/blog/index.cgi/drag-as-long-as-want%3A2009-11-11%3Aen%2COpenLayers%2CJavaScript%2Cgeo/feed/</wfw:commentRss>
</item>
<item>
<title>Poor man’s bounding box queries with CouchDB
</title>
<link>http://vmx.cx/cgi-bin/blog/index.cgi/poor-mans-bounding-box-queries-with-couchdb%3A2009-07-19%3Aen%2CCouchDB%2CJavaScript%2Cgeo</link>
<comments>http://vmx.cx/cgi-bin/blog/index.cgi/poor-mans-bounding-box-queries-with-couchdb%3A2009-07-19%3Aen%2CCouchDB%2CJavaScript%2Cgeo#comments</comments>
<pubDate>Sun, 19 Jul 2009 23:55:29 +0200</pubDate>
<dc:creator>Volker Mische</dc:creator>
<category>en</category>
<category>CouchDB</category>
<category>JavaScript</category>
<category>geo</category>
<guid isPermaLink="false">http://vmx.cx/cgi-bin/blog/index.cgi/poor-mans-bounding-box-queries-with-couchdb%3A2009-07-19%3Aen%2CCouchDB%2CJavaScript%2Cgeo/</guid>
<description><![CDATA[ 
 [...]]]></description>
<content:encoded><![CDATA[

<p>
<a href="http://mail-archives.apache.org/mod_mbox/couchdb-user/200809.mbox/<gbg36q$n8g$1@ger.gmane.org>">Several</a>
<a href="http://mail-archives.apache.org/mod_mbox/couchdb-user/200903.mbox/<20090304111938.GC16406@banot.net>">people</a>
<a href="http://mail-archives.apache.org/mod_mbox/couchdb-user/200906.mbox/<2C1A5D65-F929-42B8-93CE-A9BB68C8D1DA@mac.com>">store</a>
geographical points within <a href="http://couchdb.apache.org/">CouchDB</a> and would like to make a
<a href="http://en.wikipedia.org/wiki/Minimum_bounding_rectangle">bounding box
query</a> on them. This isn’t possible with plain CouchDB
<a href="http://wiki.apache.org/couchdb/HTTP_view_API">_views</a>. But there’s
light at the end of the tunnel. One solution will be
<a href="geocouch-geospatial-queries-with-couchdb%3A2008-10-26%3Aen%2CCouchDB%2CPython%2Cgeo">GeoCouch</a>
(which can do a lot more than simple bounding box queries), once there’s a new
release, the other one is already there: you can use a the
<a href="http://wiki.apache.org/couchdb/Formatting_with_Show_and_List">list/show
API</a> (<strong>Warning</strong>: the current wiki page (as at 2009-07-19) applies to CouchDB 0.9, I use the new 0.10 API).
</p>
<p>You can either add a _list function as described in the
<a href="http://wiki.apache.org/couchdb/Formatting_with_Show_and_List">documentation</a> or use my
<a href="http://vmx.cx/cgi-bin/blog/index.cgi/list-function-editing-in-futon%3A2009-07-19%3Aen%2CCouchDB%2CJavaScript">futon-list
branch</a> which includes an interface for easier _list function creation/editing</a>.
</p>

<h3>Your data</h3>

<p>The _list function needs to match your data, thus I expect documents with
a field named <code>location</code> which contains an array with the
coordinates. Here’s a simple example document:
</p>
<p>
  <pre>
<code>
{
   "_id": "00001aef7b72e90b991975ef2a7e1fa7",
   "_rev": "1-4063357886",
   "name": "Augsburg",
   "location": [
       10.898333,
       48.371667
   ],
   "some extra data": "Zirbelnuss"
}
</code></pre>
</p>


<h3>The _list function</h3>

<p>We aim at creating a _list function that returns the same response as a
normal _view would return, but filtered with a bounding box. Let’s start
with a _list function which returns the same results as plain _view (no
bounding box filtering, yet). The whitespaces of the output differ slightly.
</p>
<p>
  <pre>
<code>function(head, req) {
    var row, sep = '\n';

    // Send the same Content-Type as CouchDB would
    if (req.headers.Accept.indexOf('application/json')!=-1)
      start({"headers":{"Content-Type" : "application/json"}});
    else
      start({"headers":{"Content-Type" : "text/plain"}});

    send('{"total_rows":' + head.total_rows +
         ',"offset":'+head.offset+',"rows":[');
    while (row = getRow()) {
        send(sep + toJSON(row));
        sep = ',\n';
    }
    return "\n]}";
};
</code></pre>
</p>

<p>The _list API allows to you add any arbitrary query string to the URL. In
our case that will be <code>bbox=west,south,east,north</code> (adapted from the
<a href="http://www.opensearch.org/Specifications/OpenSearch/Extensions/Geo/1.0/Draft_1">OpenSearch
Geo Extension</a>). Parsing the bounding box is really easy. The query
parameters of the request are stored in the property <code>req.query</code> as
key/value pairs. Get the bounding box, split it into separate values and
compare it with the values of every row.
</p>
<p>
  <pre>
<code>var row, location, bbox = req.query.bbox.split(',');
while (row = getRow()) {
    location = row.value.location;
    if (location[0]&gt;bbox[0] && location[0]&lt;bbox[2] &&
            location[1]&gt;bbox[1] && location[1]&lt;bbox[2]) {
        send(sep + toJSON(row));
        sep = ',\n';
    }
}</code></pre>
</p>
<p>And finally we make sure that no error message is thrown when the
<code>bbox</code> query parameter is omitted. Here’s the final result:
</p>
<p>
  <pre>
<code>function(head, req) {
    var row, bbox, location, sep = '\n';

    // Send the same Content-Type as CouchDB would
    if (req.headers.Accept.indexOf('application/json')!=-1)
      start({"headers":{"Content-Type" : "application/json"}});
    else
      start({"headers":{"Content-Type" : "text/plain"}});

    if (req.query.bbox)
        bbox = req.query.bbox.split(',');

    send('{"total_rows":' + head.total_rows +
         ',"offset":'+head.offset+',"rows":[');
    while (row = getRow()) {
        location = row.value.location;
        if (!bbox || (location[0]&gt;bbox[0] && location[0]&lt;bbox[2] &&
                      location[1]&gt;bbox[1] && location[1]&lt;bbox[2])) {
            send(sep + toJSON(row));
            sep = ',\n';
        }
    }
    return "\n]}";
};</code></pre>
</p>
<p>An example how to access your _list function would be:
<code>http://localhost:5984/geodata/_design/designdoc/_list/bbox/viewname?bbox=10,0,120,90&limit=10000</code>
</p>
<p>Now you should be able to filter any of your point clouds with a bounding
box. The performance should be alright for a reasonable number of points. A
usual use-case would something like displaying a few points on a map, where you
don’t want to see zillions of them anyway.
</p>
<p>Stay tuned for a follow-up posting about displaying points with
<a href="http://openlayers.org/">OpenLayers</a>.
</p>
]]></content:encoded>
<wfw:commentRss>http://vmx.cx/cgi-bin/blog/index.cgi/poor-mans-bounding-box-queries-with-couchdb%3A2009-07-19%3Aen%2CCouchDB%2CJavaScript%2Cgeo/feed/</wfw:commentRss>
</item>
<item>
<title>List function editing in Futon
</title>
<link>http://vmx.cx/cgi-bin/blog/index.cgi/list-function-editing-in-futon%3A2009-07-19%3Aen%2CCouchDB%2CJavaScript</link>
<comments>http://vmx.cx/cgi-bin/blog/index.cgi/list-function-editing-in-futon%3A2009-07-19%3Aen%2CCouchDB%2CJavaScript#comments</comments>
<pubDate>Sun, 19 Jul 2009 17:54:46 +0200</pubDate>
<dc:creator>Volker Mische</dc:creator>
<category>en</category>
<category>CouchDB</category>
<category>JavaScript</category>
<guid isPermaLink="false">http://vmx.cx/cgi-bin/blog/index.cgi/list-function-editing-in-futon%3A2009-07-19%3Aen%2CCouchDB%2CJavaScript/</guid>
<description><![CDATA[ 
 [...]]]></description>
<content:encoded><![CDATA[

<p>
<a href="http://wiki.apache.org/couchdb/Getting_started_with_Futon">Futon</a>
is the graphical administration interface for
<a href="http://couchdb.apache.org/">CouchDB</a>. It’s nice and slick for
browsing and editing views, but there is one feature missing: you
<a href="https://issues.apache.org/jira/browse/COUCHDB-417">can’t edit _list
functions in similar fashion</a>. You need to edit them as JSON strings.
</p>
<p>As I wanted to play a bit with _list, I’ve created a branch which implements
such an interface. Its usage should be quite self-explanatory. Just select a
_view, from there you can switch to the "List" tab to create or edit a _list
function.
</p>
<p>You can get my
<a href="http://github.com/vmx/couchdb/tree/futon-list">futon-list branch at
GitHub</a>. Instead of using git, you can also download the share/wwww
directory (click on the download button within the
<a href="http://github.com/vmx/couchdb/tree/futon-list/share/www">‘share/www’
directory</a>) and unpack it over your current source.
</p>
<p>In case you wonder why your _list function doesn’t work, the
<a href="http://mail-archives.apache.org/mod_mbox/couchdb-dev/200906.mbox/<e282921e0906032231s464bd8f3g6f7ad98e585114a2@mail.gmail.com>">API
has changed for CouchDB 0.10</a>.
</p>

<div class="figure">
  <a href="/blog/2009-07-19/list-interface_l.png"><img
      src="/blog/2009-07-19/list-interface.png" width="320" height="240"
      alt="Screenshot of the _list interface in Futon" /></a>
  <p class="caption">Screenshot of the _list interface in Futon</p>
</div>
]]></content:encoded>
<wfw:commentRss>http://vmx.cx/cgi-bin/blog/index.cgi/list-function-editing-in-futon%3A2009-07-19%3Aen%2CCouchDB%2CJavaScript/feed/</wfw:commentRss>
</item>
</channel>
</rss>
