mirror of
https://github.com/almet/notmyidea.git
synced 2025-04-28 19:42:37 +02:00
344 lines
No EOL
15 KiB
HTML
344 lines
No EOL
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
|
|
|
<title>Thoughts about a form generation service, GIS enabled - Alexis - Carnets en ligne</title>
|
|
|
|
<meta charset="utf-8" />
|
|
<link href="https://blog.notmyidea.org/feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="Alexis - Carnets en ligne Full Atom Feed" />
|
|
<link rel="stylesheet" href="https://blog.notmyidea.org/theme/css/poole.css"/>
|
|
<link rel="stylesheet" href="https://blog.notmyidea.org/theme/css/syntax.css"/>
|
|
<link rel="stylesheet" href="https://blog.notmyidea.org/theme/css/lanyon.css"/>
|
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Serif:400,400italic,700%7CPT+Sans:400">
|
|
<link rel="stylesheet" href="https://blog.notmyidea.org/theme/css/styles.css"/>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
h1 {
|
|
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
|
|
padding: 80px 50px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
text-rendering: optimizeLegibility;
|
|
color: #202020;
|
|
letter-spacing: .1em;
|
|
text-shadow:
|
|
-1px -1px 1px #111,
|
|
2px 2px 1px #eaeaea;
|
|
}
|
|
|
|
#main {
|
|
text-align: justify;
|
|
text-justify: inter-word;
|
|
}
|
|
#main h1 {
|
|
padding: 10px;
|
|
}
|
|
|
|
.post-headline {
|
|
padding: 15px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular
|
|
styles, `#sidebar-checkbox` for behavior. -->
|
|
<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
|
|
<!-- Toggleable sidebar -->
|
|
<div class="sidebar" id="sidebar">
|
|
<div class="sidebar-item">
|
|
<div class="profile">
|
|
<img src="https://blog.notmyidea.org/theme/img/profile.png"/>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<a class="sidebar-nav-item" href="/">Articles</a>
|
|
|
|
<a class="sidebar-nav-item" href="https://www.vieuxsinge.com">Brasserie du Vieux Singe</a>
|
|
<a class="sidebar-nav-item" href="http://blog.notmyidea.org/pages/about.html">A propos</a>
|
|
<a class="sidebar-nav-item" href="https://twitter.com/ametaireau">Messages courts</a>
|
|
<a class="sidebar-nav-item" href="https://github.com/almet">Code</a>
|
|
</nav>
|
|
</div> <div class="wrap">
|
|
<div class="masthead">
|
|
<div class="container">
|
|
<h3 class="masthead-title">
|
|
<a href="https://blog.notmyidea.org/" title="Home">Alexis - Carnets en ligne</a>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container content">
|
|
<div id="main" class="posts">
|
|
<h1 class="post-title">Thoughts about a form generation service, GIS enabled</h1>
|
|
|
|
<span class="post-date">
|
|
02 avril 2012, dans <a class="no-color" href="category/technologie.html">Technologie</a>
|
|
</span>
|
|
<img id="illustration" class="illustration-Technologie" src="" />
|
|
|
|
<div class="post article">
|
|
<div id="toc_container">
|
|
<div class="toc">
|
|
<ul>
|
|
<li><a href="#thoughts-about-a-form-generation-service-gis-enabled">Thoughts about a form generation service, GIS enabled</a><ul>
|
|
<li><a href="#some-use-cases">Some use cases</a><ul>
|
|
<li><a href="#simple-gis-storage-backend">Simple GIS storage backend</a></li>
|
|
<li><a href="#visualization-tool">Visualization tool</a></li>
|
|
<li><a href="#generic-forms-service">Generic forms service</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#whats-out-in-the-wild-already">What's out in the wild already?</a></li>
|
|
<li><a href="#so-lets-get-it-real33">So… Let's get it real!</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<h1>🌟</h1>
|
|
|
|
<ul>
|
|
<li>
|
|
<p>slug<br>
|
|
carto-forms</p>
|
|
</li>
|
|
<li>
|
|
<p>date<br>
|
|
02-04-2012</p>
|
|
</li>
|
|
<li>
|
|
<p>author<br>
|
|
Alexis Métaireau, Mathieu Leplatre</p>
|
|
</li>
|
|
<li>
|
|
<p>tags<br>
|
|
GIS, forms</p>
|
|
</li>
|
|
<li>
|
|
<p>lang<br>
|
|
en</p>
|
|
</li>
|
|
<li>
|
|
<p>category<br>
|
|
tech</p>
|
|
</li>
|
|
</ul>
|
|
<p>We have a plan. A "fucking good" one.</p>
|
|
<p>A bunch of friends asked me twice for quite the same thing: a webpage
|
|
with a form, tied to a map generation with some information filtering.
|
|
They didn't explicitly ask that but that's the gist of it.</p>
|
|
<p>This idea has been stuck in my head since then and I even think that we
|
|
can come out with something a little bit more flexible and useful. I've
|
|
named it <em>carto-forms</em> for now, but that's only the "codename".</p>
|
|
<p>To put it shortly: what if we had a way to build forms, ala Google
|
|
forms, but with geographic information in them?</p>
|
|
<p>If you don't know Google forms, it means having an user-friendly way to
|
|
build forms and to use them to gather information from different users.</p>
|
|
<p>In my opinion, Google forms is missing two important things: first, it's
|
|
not open-source, so it's not possible to hack it or even to run it on
|
|
your own server. Second, it doesn't really know how to deal with
|
|
geographic data, and there is no way to filter the information more than
|
|
in a spreadsheet.</p>
|
|
<p>I knew that <a href="http://blog.mathieu-leplatre.info/">Mathieu</a> and some folks
|
|
at <a href="http://makina-corpus.com">Makina Corpus</a> would be interested in
|
|
this, so I started a discussion with him on IRC and we refined the
|
|
details of the project and its objectives.</p>
|
|
<p>Imagine the following:</p>
|
|
<ol>
|
|
<li>For a mapping party, we choose a specific topic to map and design
|
|
the form (list of fields (i.e. tags) to be filled + description +
|
|
type of the information) ;</li>
|
|
<li>In situ, users fill the form fields with what they see. Geo fields
|
|
can be pre-populated using device geolocation ;</li>
|
|
<li>At the end of the day, we can see a map with all user contributions
|
|
seized through this particular form ;</li>
|
|
<li>If relevant, a script could eventually import the resulting dataset
|
|
and publish/merge with OpenStreetMap.</li>
|
|
</ol>
|
|
<h2 id="some-use-cases">Some use cases</h2>
|
|
<p>I can see some use cases for this. The first one is a collaborative map,
|
|
with facet filtering. Let's draw a potential user flow:</p>
|
|
<ul>
|
|
<li>
|
|
<p>An "administrator" goes to the website and creates a form to list
|
|
all the alternative-related events. He creates the following fields:</p>
|
|
<ul>
|
|
<li>Name: a plain text field containing the name of the event.</li>
|
|
<li>Category: the category of the event. Can be a finite list.</li>
|
|
<li>Location: The location of the event. It could be provided by
|
|
selecting a point on a map or by typing an address.</li>
|
|
<li>Date: the date of the event (a datepicker could do the trick)</li>
|
|
</ul>
|
|
<p>Each field in the form has semantic information associated with it
|
|
(yes/no, multiple selection, date-time, geocoding carto, carto
|
|
selection etc)</p>
|
|
</li>
|
|
<li>
|
|
<p>Once finished, the form is generated and the user gets an url (say
|
|
<a href="http://forms.notmyidea.org/alternatives">http://forms.notmyidea.org/alternatives</a>) for it.</p>
|
|
</li>
|
|
<li>
|
|
<p>REST APIs allow third parties to get the form description and to
|
|
push/edit/get information from there.</p>
|
|
</li>
|
|
<li>
|
|
<p>He can communicate the address in any way he wants to his community
|
|
so they can go to the page and add information to it.</p>
|
|
</li>
|
|
<li>
|
|
<p>Then, it is possible to filter the results per location / date or
|
|
category. This can be done via API calls (useful for third parties)
|
|
or via a nice interface in the browser.</p>
|
|
</li>
|
|
</ul>
|
|
<p>So, as you may have noticed, this would allow us to create interactive
|
|
maps really easily. It's almost just a matter of some clicks to the
|
|
users. If we also come up with a nice Web API for this, we could do
|
|
server-side validation and build even phone applications easily.</p>
|
|
<p>To push the cursor a bit further, if we can come with a cool description
|
|
format for the forms, we could even build the forms dynamically on
|
|
different platforms, with generic clients.</p>
|
|
<p>As mentioned before, the idea of a simple tool to support collaborative
|
|
mapping fullfils a recurring necessity !</p>
|
|
<p>We envision a lot of example uses for this : recycling spots, accessible
|
|
spots (wheelchairs, etc.), trees identification, mushrooms picking
|
|
areas, tracking of endangered species (e.g. Bonelli's Eagle is currently
|
|
tracked by sharing a spreadsheet), spotting of dangerous species (e.g.
|
|
asian predatory wasps), map advertisement boards (most cities do not
|
|
track them!), citizen reporting (e.g. graffiti, potholes, garbage,
|
|
lightning like <a href="http://fixmystreet.ca">http://fixmystreet.ca</a>), geocaching, trajectories (e.g
|
|
hiking, runners, cyclists)...</p>
|
|
<p>Here are some other examples of where <em>carto-forms</em> could be useful:</p>
|
|
<h3 id="simple-gis-storage-backend">Simple GIS storage backend</h3>
|
|
<p>Let's say you are a mobile developer, you don't want to bother with
|
|
PostGIS nor write a custom and insecure code to insert and retrieve your
|
|
GIS data! You need carto-forms! A simple API helps you design your
|
|
models/forms and the same API allows you to CRUD and query your data.
|
|
Thus, you only need to focus on your application, not on how GIS data
|
|
will be handled.</p>
|
|
<p>We make a distinction between storage and widgets.</p>
|
|
<p>Besides, if you are a django / drupal / plomino... maintainer : you can
|
|
develop a module to "plug" your models (content types) and UI to
|
|
carto-forms! Carto forms are then exposed to your backoffice users (ex:
|
|
drupal admin UI, django adminsite), and likewise you can write your own
|
|
HTML widgets that consume datasets in frontend views (facets in
|
|
JSON/XML, and map data in GeoJSON).</p>
|
|
<h3 id="visualization-tool">Visualization tool</h3>
|
|
<p>Since data submission can be done programmatically using the API, you
|
|
could use Carto-forms results page as a visualization tool.</p>
|
|
<p>You can explore your dataset content using filters related to each form
|
|
field. Facets filtering is a great advantage, and a map shows the
|
|
resulting features set. You feel like you're in front of a decision
|
|
support system!</p>
|
|
<p>Of course, filtered raw data can be downloaded (GeoJSON, XML) and a
|
|
permalink allows to share the page with the state of the filters and the
|
|
zoom/location of the map.</p>
|
|
<h3 id="generic-forms-service">Generic forms service</h3>
|
|
<p>If you want to generate a configuration file (or whatever, email
|
|
messages, ...), you will need a form and a template to inlay user
|
|
submitted values and get the result.</p>
|
|
<p>A form service would be really useful to create forms programmatically
|
|
and retrieve cleaned and validated input values.</p>
|
|
<p>You could run a dedicated template service based on <em>carto-forms</em>!
|
|
Parsing a template content, this external service could create a form
|
|
dynamically and bind them together. The output of the form service
|
|
(fields => values) would be bound to the input of a template engine
|
|
(variables => final result).</p>
|
|
<p>Note that for this use-case, there is no specific need of GIS data nor
|
|
storage of records for further retrieval.</p>
|
|
<h2 id="whats-out-in-the-wild-already">What's out in the wild already?</h2>
|
|
<p>Of course, there is Google forms, which allows you to do these kind of
|
|
things, but it's closed and not exactly what we are describing here.</p>
|
|
<p>We've discovered the interesting <a href="https://webform.com/">https://webform.com/</a> which allows one
|
|
to create forms with a nice drag-n-drop flow. I would love to reproduce
|
|
something similar for the user experience. However, the project doesn't
|
|
handle APIs and geolocation information.</p>
|
|
<p>The idea of <a href="http://thoth.io">http://thoth.io</a> is very attractive : an extremely simple
|
|
web API to store and retrieve data. In addition, <em>carto-forms</em> would do
|
|
datatype validation and have basic GIS fields (point, line, polygon).</p>
|
|
<p><a href="http://mapbox.com">http://mapbox.com</a> also did an awesome work on cartography, but didn't
|
|
take into account the form aspect we're leveraging here.</p>
|
|
<h2 id="so-lets-get-it-real33">So… Let's get it real!</h2>
|
|
<p>As you may have understood, this isn't a really complicated problem. We
|
|
have been sometimes chatting about that with Mathieu about what we would
|
|
need and how we could achieve this.</p>
|
|
<p>We can probably come with an elegant solution without too much pain.
|
|
Mathieu is used to work with GIS systems (which is really cool because
|
|
I'm not at all) and knows his subject, so that's an opportunity to learn
|
|
;-)</p>
|
|
<p>We will be at <a href="http://rencontres.django-fr.org">Djangocong</a> on April 14
|
|
and 15 and will probably have a brainstorming session and a sprint on
|
|
this, so if you are around and want to help us, or just to discuss, feel
|
|
free to join!</p>
|
|
<p>We don't know yet if we will be using django for this or something else.
|
|
We have been thinking about couchdb, couchapps and geocouch but nothing
|
|
is written in stone yet. Comments and proposals are welcome!</p>
|
|
<p>Here is the etherpad document we worked on so far:
|
|
<a href="http://framapad.org/carto-forms">http://framapad.org/carto-forms</a>. Don't hesitate to add your thoughts
|
|
and edit it, that's what it's made for!</p>
|
|
<p>Thanks to <a href="http://sneakernet.fr/">Arnaud</a> and
|
|
<a href="http://qwerty.fuzz.me.uk/">Fuzzmz</a> for proof-reading and typo fixing.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<label for="sidebar-checkbox" class="sidebar-toggle"></label>
|
|
|
|
<script>
|
|
(function(document) {
|
|
var i = 0;
|
|
// snip empty header rows since markdown can't
|
|
var rows = document.querySelectorAll('tr');
|
|
for(i=0; i<rows.length; i++) {
|
|
var ths = rows[i].querySelectorAll('th');
|
|
var rowlen = rows[i].children.length;
|
|
if (ths.length > 0 && ths.length === rowlen) {
|
|
rows[i].remove();
|
|
}
|
|
}
|
|
})(document);
|
|
</script>
|
|
|
|
<script>
|
|
/* Lanyon & Poole are Copyright (c) 2014 Mark Otto. Adapted to Pelican 20141223 and extended a bit by @thomaswilley */
|
|
(function(document) {
|
|
var toggle = document.querySelector('.sidebar-toggle');
|
|
var sidebar = document.querySelector('#sidebar');
|
|
var checkbox = document.querySelector('#sidebar-checkbox');
|
|
document.addEventListener('click', function(e) {
|
|
var target = e.target;
|
|
if(!checkbox.checked ||
|
|
sidebar.contains(target) ||
|
|
(target === checkbox || target === toggle)) return;
|
|
checkbox.checked = false;
|
|
}, false);
|
|
})(document);
|
|
</script>
|
|
<!-- Piwik -->
|
|
<script type="text/javascript">
|
|
var _paq = _paq || [];
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//tracker.notmyidea.org/";
|
|
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
|
_paq.push(['setSiteId', 3]);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<noscript><p><img src="//tracker.notmyidea.org/piwik.php?idsite=3" style="border:0;" alt="" /></p></noscript>
|
|
<!-- End Piwik Code -->
|
|
</div>
|
|
</body>
|
|
</html> |