mirror of
https://github.com/almet/notmyidea.git
synced 2025-04-28 19:42:37 +02:00
296 lines
No EOL
15 KiB
HTML
296 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 - Carnets Web</title>
|
|
|
|
<meta charset="utf-8" />
|
|
<link href="https://blog.notmyidea.org/feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="Carnets Web 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"/>
|
|
|
|
|
|
|
|
<meta name="tags" contents="GIS" />
|
|
<meta name="tags" contents="forms" />
|
|
<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;
|
|
}
|
|
</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">Carnets Web</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">04 février 2012</span>
|
|
<img id="illustration" src="" />
|
|
|
|
<div class="post article">
|
|
<h1>🌟</h1>
|
|
<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 class="reference external" href="http://blog.mathieu-leplatre.info/">Mathieu</a> and some folks at <a class="reference external" 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 class="arabic simple">
|
|
<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>
|
|
<div class="section" id="some-use-cases">
|
|
<h2>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 class="first">An "administrator" goes to the website and creates a form to list all the
|
|
alternative-related events. He creates the following fields:</p>
|
|
<ul class="simple">
|
|
<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 class="first">Once finished, the form is generated and the user gets an url (say
|
|
<a class="reference external" href="http://forms.notmyidea.org/alternatives">http://forms.notmyidea.org/alternatives</a>) for it.</p>
|
|
</li>
|
|
<li><p class="first">REST APIs allow third parties to get the form description and to
|
|
push/edit/get information from there.</p>
|
|
</li>
|
|
<li><p class="first">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 class="first">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 class="reference external" 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>
|
|
<div class="section" id="simple-gis-storage-backend">
|
|
<h3>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>
|
|
</div>
|
|
<div class="section" id="visualization-tool">
|
|
<h3>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>
|
|
</div>
|
|
<div class="section" id="generic-forms-service">
|
|
<h3>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>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="what-s-out-in-the-wild-already">
|
|
<h2>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 class="reference external" 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 class="reference external" 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 class="reference external" 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>
|
|
</div>
|
|
<div class="section" id="so-let-s-get-it-real">
|
|
<h2>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 class="reference external" 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 class="reference external" 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 class="reference external" href="http://sneakernet.fr/">Arnaud</a> and <a class="reference external" href="http://qwerty.fuzz.me.uk/">Fuzzmz</a> for proof-reading and typo fixing.</p>
|
|
</div>
|
|
|
|
Vous pouvez également <a onclick="(function(){
|
|
let here = document.location;
|
|
document.location = `http://pdf.fivefilters.org/simple-print/url.php?size=A4#${here}`;
|
|
return false;
|
|
})();return false;">télécharger cet article en pdf</a>.
|
|
</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> |