[Maposmatic-dev] [PATCH 06/13] Implement a brand new wizard for map creation

[Thomas Petazzoni]

Through several steps, the wizard guides the user in the different
parameters that can be adjusted when building a map. The wizard
heavily uses Javascript and Ajax to provide a nice user experience. It
can easily be modified to remove or add wizard steps as needed.

Signed-off-by: Thomas Petazzoni <address@hidden>
---
 www/maposmatic/forms.py           |    3 +
 www/maposmatic/views.py           |   10 +-
 www/media/map_rendering_form.css  |   67 ++++++
 www/media/map_rendering_form.js   |  459 +++++++++++++++++++++++++++++++++++++
 www/media/osm_map.js              |  260 +--------------------
 www/media/style.css               |    4 -
 www/templates/maposmatic/new.html |  157 ++++++++------
 7 files changed, 628 insertions(+), 332 deletions(-)
 create mode 100644 www/media/map_rendering_form.css
 create mode 100644 www/media/map_rendering_form.js

diff --git a/www/maposmatic/forms.py b/www/maposmatic/forms.py
index 8044db2..2039591 100644
--- a/www/maposmatic/forms.py
+++ b/www/maposmatic/forms.py
@@ -53,6 +53,9 @@ class MapRenderingJobForm(forms.ModelForm):
     The main map rendering form, displayed on the 'Create Map' page. It's a
     ModelForm based on the MapRenderingJob model.
     """
+    class Media:
+        css = { "all": ["/smedia/map_rendering_form.css"] }
+        js = ["/smedia/jquery.js", "/smedia/map_rendering_form.js"]
 
     class Meta:
         model = models.MapRenderingJob
diff --git a/www/maposmatic/views.py b/www/maposmatic/views.py
index 3077932..f95b25a 100644
--- a/www/maposmatic/views.py
+++ b/www/maposmatic/views.py
@@ -70,13 +70,9 @@ def new(request):
         if form.is_valid():
             job = form.save(commit=False)
             job.administrative_osmid = 
form.cleaned_data.get('administrative_osmid')
-
-            existing = helpers.rendering_already_exists(job)
-            if existing:
-                request.session['redirected'] = True
-                return HttpResponseRedirect(reverse('job-by-id',
-                                                    args=[existing]))
-
+            job.stylesheet = form.cleaned_data.get('stylesheet')
+            job.layout = form.cleaned_data.get('layout')
+            job.papersize = form.cleaned_data.get('papersize')
             job.status = 0 # Submitted
             job.submitterip = request.META['REMOTE_ADDR']
             job.map_language = form.cleaned_data.get('map_language')
diff --git a/www/media/map_rendering_form.css b/www/media/map_rendering_form.css
new file mode 100644
index 0000000..6a3bf9b
--- /dev/null
+++ b/www/media/map_rendering_form.css
@@ -0,0 +1,67 @@
+ul#steplist {
+  margin: 0;
+  padding: 10px 0;
+  list-style: none;
+  text-align: left;
+  background-color: #cccccc;
+}
+
+ul#steplist li {
+  margin: 0;
+  display: inline;
+  padding: 10px 2px;
+  background-color: #cccccc;
+}
+
+div#step-location-bbox, div#step-location-admin {
+  margin-top: 20px;
+}
+
+ul#steplist li.title-current-step {
+  background-color: #eeeeee;
+  font-weight: bold;
+}
+
+div#navlinks {
+  width: 100%;
+  font-size: 130%;
+}
+
+a#nextlink {
+  float: right;
+}
+
+a#prevlink {
+  float: left;
+}
+
+span#prevlinkdisabled {
+  color: grey;
+  float: left;
+}
+
+span#nextlinkdisabled {
+  color: grey;
+  float: right;
+}
+
+div.wizard {
+  width: 900px;
+}
+
+div.wizardstep {
+  width: 100%;
+  display: none;
+  padding: 20px;
+}
+
+div#step-location {
+  display: block;
+}
+
+table#summary td.summary-label {
+  width: 300px;
+  font-weight: bold;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
diff --git a/www/media/map_rendering_form.js b/www/media/map_rendering_form.js
new file mode 100644
index 0000000..c4461d0
--- /dev/null
+++ b/www/media/map_rendering_form.js
@@ -0,0 +1,459 @@
+/* coding: utf-8 -*- mode: espresso; indent-tabs-mode: nil -*-
+ *
+ * maposmatic, the web front-end of the MapOSMatic city map generation system
+ * Copyright (C) 2009 David Decotigny
+ * Copyright (C) 2009 Frédéric Lehobey
+ * Copyright (C) 2009 David Mentré
+ * Copyright (C) 2009 Maxime Petazzoni
+ * Copyright (C) 2009 Thomas Petazzoni
+ * Copyright (C) 2009 Gaël Utard
+ * Copyright (C) 2009 Étienne Loks
+ * Copyright (C) 2010 Pierre Mauduit
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * See the file COPYING for details.
+ */
+
+var currentPanel = 1;
+
+function mapTitleChange()
+{
+    if ($("#id_maptitle").val().length != 0)
+        allowNextStep();
+    else
+        disallowNextStep();
+}
+
+function prepareTitlePanel()
+{
+    if (getCurrentMode() == 'bbox') {
+        $("#id_maptitle").val("");
+        disallowNextStep();
+    }
+    else {
+        $("#id_maptitle").val($("#id_administrative_city").val());
+        allowNextStep();
+    }
+
+    $('#id_maptitle').keyup(mapTitleChange);
+}
+
+function filterAllowedPaperSizes(papersizelist)
+{
+  $.each($("#step-papersize ul li"), function(id, item) {
+     papersize = $('label input[value]', item).val();
+     if (jQuery.inArray(papersize, papersizelist) < 0)
+       $(item).hide();
+     else
+       $(item).show();
+  });
+
+  $("#step-papersize ul").show();
+  $("label input", $($("#step-papersize ul li:visible")[0])).attr("checked", 
"true");
+}
+
+function preparePaperSizePanel()
+{
+    $("#step-papersize ul").hide();
+    if (getCurrentMode() == 'bbox')
+    {
+      $.post("/papersize/", {
+                lat_upper_left   : $("#lat_upper_left").val(),
+                lon_upper_left   : $("#lon_upper_left").val(),
+                lat_bottom_right : $("#lat_bottom_right").val(),
+                lon_bottom_right : $("#lon_bottom_right").val(),
+                layout           : $("input[name='layout']:checked").val()
+             },
+             function(data) {
+                filterAllowedPaperSizes(data);
+             }
+            );
+    }
+    else
+    {
+      $.post("/papersize/", {
+                osmid: $("#id_administrative_osmid").val(),
+                layout           : $("input[name='layout']:checked").val()
+             },
+             function(data) {
+                filterAllowedPaperSizes(data);
+             }
+            );
+    }
+}
+
+/** When using a by admin boundary area, contains the country code of
+ * the location to render. */
+var selectedCountry;
+
+function prepareLanguagePanel()
+{
+    var seen = false;
+    $('#id_map_language').children('option').each(function() {
+        if (! ($(this).val().match('.._' + selectedCountry.toUpperCase() + 
'\..*') != null
+               || $(this).val() == 'C'))
+        {
+            $(this).hide();
+        }
+        else {
+            $(this).show();
+            if (! seen) {
+                $(this).attr("selected", "selected");
+                seen = true;
+            }
+        }
+    });
+}
+
+function prepareSummaryPanel()
+{
+    if (getCurrentMode() == 'bbox')
+    {
+        $("#summary-area").
+            html("(" +
+                 $("#lat_upper_left").val() + ","          +
+                 $("#lon_upper_left").val() + ") &rarr; (" +
+                 $("#lat_bottom_right").val() + ","        +
+                 $("#lon_bottom_right").val() + ")");
+    }
+    else
+    {
+        osmid = $("#id_administrative_osmid").val();
+        $("#summary-area").
+            html($("#id_administrative_city").val() +
+                 "<br/>(osm: <a 
href=\"http://www.openstreetmap.org/browse/relation/"; +
+                 Math.abs(osmid) + "\">relation " + Math.abs(osmid) + "</a>)");
+    }
+
+    
$("#summary-layout").html($("input[name='layout']:checked").parent().text().trim());
+    
$("#summary-papersize").html($("input[name='papersize']:checked").parent().text().trim());
+    
$("#summary-stylesheet").html($("input[name='stylesheet']:checked").parent().text().trim());
+    $("#summary-language").html($("#id_map_language :selected").text());
+}
+
+/** Function called *before* showing a given panel. It gives the
+ * opportunity to update informations in this panel. */
+function prepareNextPage(next)
+{
+    if (next == "step-title")
+        prepareTitlePanel();
+    else if (next == "step-papersize")
+        preparePaperSizePanel();
+    else if (next == "step-summary")
+        prepareSummaryPanel();
+    else if (next == "step-language")
+        prepareLanguagePanel();
+}
+
+/*
+ * Helper functions to hide/show the back/next links
+ */
+
+function allowPrevStep() {
+  $("#prevlinkdisabled").hide();
+  $("#prevlink").show();
+}
+
+function disallowPrevStep() {
+  $("#prevlinkdisabled").show();
+  $("#prevlink").hide();
+}
+
+function allowNextStep() {
+  $("#nextlinkdisabled").hide();
+  $("#nextlink").show();
+}
+
+function disallowNextStep() {
+  $("#nextlinkdisabled").show();
+  $("#nextlink").hide();
+}
+
+/** Hide a panel and un-highlight the corresponding title in the
+ * progress bar */
+function hidePanel(panel) {
+  id = panel.attr("id");
+  panel.hide();
+  $("#" + id + "-title").removeClass("title-current-step");
+}
+
+/** Show a panel and highlight the corresponding title in the progress
+ * bar */
+function showPanel(panel) {
+  id = panel.attr("id");
+  panel.show();
+  $("#" + id + "-title").addClass("title-current-step");
+}
+
+/** Selectors used in loadNextStep() and loadPrevStep() to
+ * respectively find all panels and the currently visible panel */
+const STEP_PANEL_SELECTOR = "div[id|=step][class=wizardstep]";
+const VISIBLE_STEP_PANEL_SELECTOR = "div[id|=step][class=wizardstep]:visible";
+
+/** Replace the panel of the current step by the panel of the next
+    step, after preparing it. Also makes sure that Back/Next links are
+    enabled/disabled as needed. */
+function loadNextStep()
+{
+    current = $(VISIBLE_STEP_PANEL_SELECTOR);
+    next = current.next(STEP_PANEL_SELECTOR);
+    hasafternext = (next.next(STEP_PANEL_SELECTOR).length != 0);
+
+    prepareNextPage(next.attr("id"));
+    hidePanel(current);
+    showPanel(next);
+
+    allowPrevStep();
+    if (! hasafternext)
+        disallowNextStep();
+}
+
+/** Replace the panel of the current step by the panel of the next
+    step. Also makes sure that Back/Next links are enabled/disabled as
+    needed. */
+function loadPrevStep()
+{
+    current = $(VISIBLE_STEP_PANEL_SELECTOR);
+    prev = current.prev(STEP_PANEL_SELECTOR);
+    hasbeforeprev = (prev.prev(STEP_PANEL_SELECTOR).length != 0);
+
+    hidePanel(current);
+    showPanel(prev);
+
+    allowNextStep();
+    if (! hasbeforeprev)
+        disallowPrevStep();
+}
+
+/** Auto-suggest feature. */
+function suggest(input, results, osm_id, options) {
+  var $input = $(input).attr('autocomplete', 'off');
+  var $results = $(results);
+  var $osm_id = $(osm_id);
+  var timeout = false;
+  var shown = false;
+
+  closeSuggest(true);
+
+  // Setup the keyup event.
+  $input.keyup(processKey);
+
+  // Disable form validation via the Enter key
+  $input.keypress(function(e) { if (e.keyCode == 13) return false; });
+
+  function appendValidResult(item) {
+    var id = 'rad_' + item.country_code + '_' + item.ocitysmap_params['id'];
+    $results.append('<li class="suggestok" id="' + id + '">'
+       + item.display_name + '</li>');
+
+    var e = $('#' + id)
+    e.bind('click', function(e) { setResult($(this)); });
+    e.bind('mouseover', function(e) { setSelectedResultTo($(this)); });
+  }
+
+  /* Empty and close the suggestion box. */
+  function closeSuggest(hide) {
+    $results.empty();
+
+    if (hide)
+      $results.hide();
+    else
+      $results.show();
+
+    shown = !hide;
+  }
+
+  /* Handle the JSON result. */
+  function handleNominatimResults(data, textResult) {
+    var unusable_token = false;
+    $(input).css('cursor', 'text');
+    closeSuggest(false);
+
+    if (!data.length) {
+      $results.append('<li class="info">' + $('#noresultsinfo').html() + 
'</li>');
+      return;
+    }
+
+    $.each(data, function(i, item) {
+      if (typeof item.ocitysmap_params != 'undefined' &&
+          item.ocitysmap_params['admin_level'] == 6) {
+        appendValidResult(item);
+      } else {
+        $results.append('<li class="suggestoff">'
+          + item.display_name + '</li>');
+        unusable_token = true;
+      }
+    });
+
+    if (unusable_token)
+      $results.append('<li class="info">' + $('#noadminlimitinfo').html() + 
'</li>');
+  }
+
+  function doQuery() {
+    if (!$input.val().length) {
+      closeSuggest(true);
+      return;
+    }
+    $(input).css('cursor', 'wait');
+    $.getJSON("/nominatim/", { q: $input.val() }, handleNominatimResults);
+  }
+
+  function processKey(e) {
+    if (e.keyCode != 13) {
+      clearResult();
+    }
+
+    switch (e.keyCode) {
+      case 27:  // ESC
+        closeSuggest(true);
+        break;
+      case 9:   // TAB
+      case 13:  // OK
+        var elt = getCurrentResult();
+        if (elt)
+          setResult(elt);
+        return false;
+        break;
+      case 38:  // UP
+        if (!shown)
+          doQuery();
+        prevResult();
+        break;
+      case 40:  // DOWN
+        if (!shown)
+          doQuery();
+        nextResult();
+        break;
+      default:
+        if (timeout)
+          clearTimeout(timeout);
+        timeout = setTimeout(doQuery, options.timeout);
+      }
+  }
+
+  /* Returns the currently selected result. */
+  function getCurrentResult() {
+    var children = $results.children('li.' + options.selectedClass);
+    if (children.length)
+      return children;
+    return false;
+  }
+
+  /* Set the form to the given result. */
+  function setResult(elt) {
+    var temp = elt.attr('id').split('_');
+
+    selectedCountry = temp[1];
+    $osm_id.val(temp[2]);
+    $input.val(elt.html());
+
+    closeSuggest(true);
+    allowNextStep();
+  }
+
+  function clearResult() {
+    $osm_id.val('');
+    disallowNextStep();
+  }
+
+  /** Functions to manipulate the current selection. */
+
+  /* Set the currently selected item in the drop-down list. */
+  function setSelectedResultTo(elt) {
+    $results.children('li').removeClass(options.selectedClass);
+    if (elt)
+      elt.addClass(options.selectedClass);
+  }
+
+  /* Move to the previous valid result. */
+  function prevResult() {
+    var current = getCurrentResult();
+    var new_result;
+
+    if (current) {
+      var prev_valid = current.siblings('li.suggestok');
+      if (prev_valid.length)
+        new_result = prev_valid;
+    } else {
+      new_result = $results.children('li.suggestok:last');
+    }
+
+    setSelectedResultTo(new_result);
+  }
+
+  /* Move to the next valid result. */
+  function nextResult() {
+    var current = getCurrentResult();
+    var new_result;
+
+    if (current) {
+      var next_valid = current.siblings('li.suggestok');
+      if (next_valid.length)
+        new_result = next_valid;
+    } else {
+      new_result = $results.children('li.suggestok:first');
+    }
+
+    setSelectedResultTo(new_result);
+  }
+}
+
+/** Returns whether 'admin' or 'bbox' mode is currently selected */
+function getCurrentMode() {
+  if ($('#id_mode_1').is(':checked'))
+     return 'bbox';
+  else
+     return 'admin';
+}
+
+function mapAreaSelectionNotifier() {
+  allowNextStep();
+}
+
+/** Page initialization. */
+$(document).ready(function() {
+
+  function switchToAdminMode() {
+    $('#step-location-bbox').hide();
+    $('#step-location-admin').show();
+    disallowNextStep();
+    selectedCountry = "";
+  }
+
+  function switchToBBoxMode() {
+    $('#step-location-admin').hide();
+    $('#step-location-bbox').show();
+    disallowNextStep();
+    $('#id_administrative_city').empty();
+    $('#id_administrative_osmid').empty();
+    if (map == null)
+      mapInit(mapAreaSelectionNotifier);
+    selectedCountry = "";
+  }
+
+  if (getCurrentMode() == 'bbox')
+    switchToBBoxMode();
+  else
+    switchToAdminMode();
+
+  $('#id_mode_0').bind('click', function(e) { switchToAdminMode(); });
+  $('#id_mode_1').bind('click', function(e) { switchToBBoxMode(); });
+
+  suggest('#id_administrative_city', '#suggest',
+          '#id_administrative_osmid',
+          { selectedClass: 'selected',
+            timeout: 150
+          });
+});
diff --git a/www/media/osm_map.js b/www/media/osm_map.js
index deb0bf9..da3671a 100644
--- a/www/media/osm_map.js
+++ b/www/media/osm_map.js
@@ -124,8 +124,10 @@ function updateFormArea()
     getAreaBottomRightLon().value = bounds.right.toFixed(4);
 }
 
-/* Main initialisation function. Must be called before the map is manipulated. 
*/
-function mapInit()
+/* Main initialisation function. Must be called before the map is
+   manipulated. areaSelectionNotifier is a function that gets called
+   when an area is selected. */
+function mapInit(areaSelectionNotifier)
 {
     map = new OpenLayers.Map ('map', {
         controls:[new OpenLayers.Control.Navigation(),
@@ -167,6 +169,7 @@ function mapInit()
             vectorLayer.destroyFeatures()
             vectorLayer.addFeatures(feature);
             updateFormBbox(bounds);
+            areaSelectionNotifier();
         }
     });
     map.addControl(selectControl);
@@ -175,256 +178,3 @@ function mapInit()
     map.events.register('moveend', map, updateFormArea);
     updateMap(vectorLayer);
 }
-
-function setFormActivation(active) {
-  if (active) {
-    $('#map_language').show();
-    $('#id_go_next_btn').show()
-      .removeAttr('disabled');
-  } else {
-    $('#map_language').hide();
-    $('#id_go_next_btn').hide()
-      .attr('disabled', 'disabled');
-  }
-}
-
-
-/** Language list management. */
-var languages;
-
-function resetLanguages() {
-  $('#id_map_language').html(languages);
-  $('#id_map_language').children('option').each(function() {
-    if ($(this).val() == 'C')
-      $(this).attr('selected', 'selected');
-  });
-}
-
-function preselectLanguage(country) {
-  var seen = false;
-
-  $('#id_map_language').html(languages);
-  $('#id_map_language').children('option').each(function() {
-    if (! ($(this).val().match('.._' + country.toUpperCase() + '\..*') != null
-           || $(this).val() == 'C'))
-      $(this).remove();
-    else if (!seen) {
-      $(this).attr('selected', 'selected');
-      seen = true;
-    }
-  });
-}
-
-
-/** Auto-suggest feature. */
-function suggest(input, results, osm_id, button, options) {
-  var $input = $(input).attr('autocomplete', 'off');
-  var $results = $(results);
-  var $osm_id = $(osm_id);
-  var $button = $(button);
-  var timeout = false;
-  var shown = false;
-
-  closeSuggest(true);
-
-  // Setup the keyup event.
-  $input.keyup(processKey);
-
-  // Disable form validation via the Enter key
-  $input.keypress(function(e) { if (e.keyCode == 13) return false; });
-
-  function appendValidResult(item) {
-    var id = 'rad_' + item.country_code + '_' + item.ocitysmap_params['id'];
-    $results.append('<li class="suggestok" id="' + id + '">'
-       + item.display_name + '</li>');
-
-    var e = $('#' + id)
-    e.bind('click', function(e) { setResult($(this)); });
-    e.bind('mouseover', function(e) { setSelectedResultTo($(this)); });
-  }
-
-  /* Empty and close the suggestion box. */
-  function closeSuggest(hide) {
-    $results.empty();
-
-    if (hide)
-      $results.hide();
-    else
-      $results.show();
-
-    shown = !hide;
-  }
-
-  /* Handle the JSON result. */
-  function handleNominatimResults(data, textResult) {
-    var unusable_token = false;
-    $(input).css('cursor', 'text');
-    closeSuggest(false);
-
-    if (!data.length) {
-      $results.append('<li class="info">' + $('#noresultsinfo').html() + 
'</li>');
-      return;
-    }
-
-    $.each(data, function(i, item) {
-      if (typeof item.ocitysmap_params != 'undefined' &&
-          item.ocitysmap_params['admin_level'] == 8) {
-        appendValidResult(item);
-      } else {
-        $results.append('<li class="suggestoff">'
-          + item.display_name + '</li>');
-        unusable_token = true;
-      }
-    });
-
-    if (unusable_token)
-      $results.append('<li class="info">' + $('#noadminlimitinfo').html() + 
'</li>');
-  }
-
-  function doQuery() {
-    if (!$input.val().length) {
-      closeSuggest(true);
-      return;
-    }
-    $(input).css('cursor', 'wait');
-    $.getJSON("/nominatim/", { q: $input.val() }, handleNominatimResults);
-  }
-
-  function processKey(e) {
-    if (e.keyCode != 13) {
-      clearResult();
-    } else {
-      if ($osm_id.val() != '')
-        $button.click();
-    }
-
-    switch (e.keyCode) {
-      case 27:  // ESC
-        closeSuggest(true);
-        break;
-      case 9:   // TAB
-      case 13:  // OK
-        var elt = getCurrentResult();
-        if (elt)
-          setResult(elt);
-        return false;
-        break;
-      case 38:  // UP
-        if (!shown)
-          doQuery();
-        prevResult();
-        break;
-      case 40:  // DOWN
-        if (!shown)
-          doQuery();
-        nextResult();
-        break;
-      default:
-        if (timeout)
-          clearTimeout(timeout);
-        timeout = setTimeout(doQuery, options.timeout);
-      }
-  }
-
-  /* Returns the currently selected result. */
-  function getCurrentResult() {
-    var children = $results.children('li.' + options.selectedClass);
-    if (children.length)
-      return children;
-    return false;
-  }
-
-  /* Set the form to the given result. */
-  function setResult(elt) {
-    var temp = elt.attr('id').split('_');
-
-    preselectLanguage(temp[1]);
-    $osm_id.val(temp[2]);
-    $input.val(elt.html());
-
-    closeSuggest(true);
-    setFormActivation(true);
-  }
-
-  function clearResult() {
-    $osm_id.val('');
-    setFormActivation(false);
-  }
-
-  /** Functions to manipulate the current selection. */
-
-  /* Set the currently selected item in the drop-down list. */
-  function setSelectedResultTo(elt) {
-    $results.children('li').removeClass(options.selectedClass);
-    if (elt)
-      elt.addClass(options.selectedClass);
-  }
-
-  /* Move to the previous valid result. */
-  function prevResult() {
-    var current = getCurrentResult();
-    var new_result;
-
-    if (current) {
-      var prev_valid = current.siblings('li.suggestok');
-      if (prev_valid.length)
-        new_result = prev_valid;
-    } else {
-      new_result = $results.children('li.suggestok:last');
-    }
-
-    setSelectedResultTo(new_result);
-  }
-
-  /* Move to the next valid result. */
-  function nextResult() {
-    var current = getCurrentResult();
-    var new_result;
-
-    if (current) {
-      var next_valid = current.siblings('li.suggestok');
-      if (next_valid.length)
-        new_result = next_valid;
-    } else {
-      new_result = $results.children('li.suggestok:first');
-    }
-
-    setSelectedResultTo(new_result);
-  }
-}
-
-/** Page initialization. */
-$(document).ready(function() {
-  languages = $('#id_map_language').html();
-
-  function switchToAdminMode() {
-    $('#mapform tbody').children('tr.bybbox').hide();
-    $('#mapform tbody').children('tr.byadmin').show();
-    setFormActivation(false);
-  }
-
-  function switchToBBoxMode() {
-    $('#mapform tbody').children('tr.byadmin').hide();
-    $('#mapform tbody').children('tr.bybbox').show();
-    setFormActivation(true);
-    $('#id_administrative_city').empty();
-    $('#id_administrative_osmid').empty();
-    if (map == null)
-      mapInit();
-    resetLanguages();
-  }
-
-  if ($('#id_mode_1').is(':checked'))
-    switchToBBoxMode();
-  else
-    switchToAdminMode();
-
-  $('#id_mode_0').bind('click', function(e) { switchToAdminMode(); });
-  $('#id_mode_1').bind('click', function(e) { switchToBBoxMode(); });
-
-  suggest('#id_administrative_city', '#suggest',
-          '#id_administrative_osmid', '#id_go_next_btn',
-          { selectedClass: 'selected',
-            timeout: 150
-          });
-});
diff --git a/www/media/style.css b/www/media/style.css
index ce960d0..f3e730a 100644
--- a/www/media/style.css
+++ b/www/media/style.css
@@ -358,10 +358,6 @@ div.pagination {
   width: 150px;
 }
 
-#id_go_next_btn {
-  display: none;
-}
-
 #mainfrm input#id_maptitle,
 #mainfrm input#id_administrative_city {
   width: 80%;
diff --git a/www/templates/maposmatic/new.html 
b/www/templates/maposmatic/new.html
index 0da89f8..43bf5e1 100644
--- a/www/templates/maposmatic/new.html
+++ b/www/templates/maposmatic/new.html
@@ -28,7 +28,6 @@
 {% load i18n %}
 
 {% block extralink %}
-<script type="text/javascript" src="/smedia/jquery.js"></script>
 {{ form.media }}
 {% endblock %}
 
@@ -37,79 +36,105 @@
 {% block page %}
 <h1 id="submitmapform">{% trans "Generate your own map" %}</h1>
 
-<p>
-{% blocktrans %}<em>MapOSMatic</em> covers the whole world but we need
-contributors to translate and adapt the few parts of <em>MapOSMatic</em>
-that are country specific.{% endblocktrans %}
-</p>
-
-<p>
-{% blocktrans %}To select the city to be rendered, two modes are
-available:{% endblocktrans %}
-</p>
-
-<ul>
-  <li>{% blocktrans %}<em>Using an administrative boundary</em>. It allows
-  to get a map with precise boundaries of the city when such limits are
-  available in the database. Otherwise, you need to use a bounding
-  box.{% endblocktrans %}</li>
-  <li>{% blocktrans %}<em>Using a traditional bounding box</em>.{% 
endblocktrans %}</li>
-</ul>
-
-<p>
-{% blocktrans %}Once the rendering is submitted, you will be brought
-to a page giving the status of your rendering request. As soon as the
-rendering is completed (that might take some time depending on the queue
-length), this page will contain links to the generated
-map.{% endblocktrans %}
-</p>
-
 <form id="mainfrm" method="post" action="{% url new %}#submitmapform" 
class="submitmap">
-  <table id="mapform">
-    <tr class="label"><td>{% trans "Area selection mode:" %}</td></tr>
-    <tr class="field"><td>
-      {{ form.mode }}
-    </td></tr>
-
-    <tr class="byadmin label"><td>{% trans "City name:" %}</td></tr>
-    <tr class="byadmin field"><td>
+<div class="wizard">
+  {{ form.errors }}
+  <ul id="steplist">
+   <li id="step-location-title" class="title-current-step">{% trans "Location" 
%}</li>
+   <li id="step-title-title">{% trans "Title" %}</li>
+   <li id="step-layout-title">{% trans "Layout" %}</li>
+   <li id="step-papersize-title">{% trans "Paper size" %}</li>
+   <li id="step-stylesheet-title">{% trans "Stylesheet" %}</li>
+   <li id="step-language-title">{% trans "Language" %}</li>
+   <li id="step-summary-title">{% trans "Summary" %}</li>
+  </ul>
+
+  <div id="step-location" class="wizardstep">
+
+    <p>{% blocktrans %}To select the city to be rendered, two modes are
+      available:{% endblocktrans %}</p>
+
+    {{ form.mode }}
+
+    <div id="step-location-bbox" style="display: none";>
+      {{ form.bbox }}
+      {{ form.bbox.errors }}
+      <p class="bbox_select_help">{% blocktrans %}Latitude and longitude of 
the top left and bottom right corners of the area to render.{% endblocktrans 
%}</p>
+      <p class="bbox_select_help">{% blocktrans %}You can use 
<tt>Shift+drag</tt> to zoom on a specific area of the map. If you only want to 
render part of what the slippy map shows, you can use <tt>Control+drag</tt> to 
draw the limits of the area to render.{% endblocktrans %}</p>
+    </div>
+
+    <div id="step-location-admin">
       {{ form.administrative_city }}
       <ul id="suggest"></ul>
       {{ form.administrative_osmid }}
       {{ form.administrative_osmid.errors }}
       {{ form.administrative_city.errors }}
-    </td></tr>
-
-    <tr class="bybbox label"><td>{% trans "Title of the map:" %}</td></tr>
-    <tr class="bybbox field"><td>
-      {{ form.maptitle }}
-      {{ form.maptitle.errors }}
-    </td></tr>
-
-    <tr class="bybbox label" id="map_language"><td>
+      <span id="noadminlimitinfo">{% blocktrans %}Wondering why you can't 
choose some of these results?<br />Their administrative boundaries are missing 
from the OSM database.<br />Look at the <a 
href="http://wiki.maposmatic.org/doku.php?id=faq";>FAQ</a> for more details.{% 
endblocktrans %}</span>
+      <span id="noresultsinfo">{% trans "No results." %}</span>
+    </div>
+
+  </div>
+
+  <div id="step-title" class="wizardstep">
+    <h3>{% trans "Map title" %}</h3>
+    {{ form.maptitle }}
+  </div>
+
+  <div id="step-layout"  class="wizardstep">
+    <h3>{% trans "Layout" %}</h3>
+    {{form.layout}}
+  </div>
+
+  <div id="step-papersize"  class="wizardstep">
+    <h3>{% trans "Paper size" %}</h3>
+    {{ form.papersize }}
+  </div>
+
+  <div id="step-stylesheet"  class="wizardstep">
+    <h3>{% trans "Stylesheet" %}</h3>
+    {{ form.stylesheet }}
+  </div>
+
+  <div id="step-language"  class="wizardstep">
+    <h3>{% trans "Language" %}</h3>
       {% trans "Map Index Language:" %} {{ form.map_language }}
-    </td></tr>
-
-    <tr class="bybbox label"><td colspan="2">{% trans "Bounding box:" 
%}</td></tr>
-    <tr class="bybbox field"><td colspan="2">
-      {{ form.bbox }}
-      {{ form.bbox.errors }}
-      <ul class="errorlist" id="bboxtoolarge" style="display: none">
-        <li>{% blocktrans %}Bounding Box too large{% endblocktrans %}</li>
-      </ul>
-      <p class="bbox_select_help">{% blocktrans %}Latitude and longitude of 
the top left and bottom right corners of the area to render.{% endblocktrans 
%}</p>
-      <p class="bbox_select_help">{% blocktrans %}You can use 
<tt>Shift+drag</tt> to zoom on a specific area of the map. You can use 
<tt>Control+drag</tt> to draw the limits of the area to render.{% endblocktrans 
%}</p>
-    </td></tr>
-
-    <tr><td class="submit">
-      <input id="id_go_next_btn" type="submit"
-             value="{% trans "Generate" %}" disabled="disabled" />
-    </td></tr>
-  </table>
+  </div>
+  <div id="step-summary"  class="wizardstep">
+    <h3>{% trans "Summary" %}</h3>
+    <table id="summary">
+      <tr>
+       <td class="summary-label">{% trans "Area" %}</td>
+       <td id="summary-area"></td>
+      </tr>
+      <tr>
+       <td class="summary-label">{% trans "Layout" %}</td>
+       <td id="summary-layout"></td>
+      </tr>
+      <tr>
+       <td class="summary-label">{% trans "Paper size" %}</td>
+       <td id="summary-papersize"></td>
+      </tr>
+      <tr>
+       <td class="summary-label">{% trans "Stylesheet" %}</td>
+       <td id="summary-stylesheet"></td>
+      </tr>
+      <tr>
+       <td class="summary-label">{% trans "Language" %}</td>
+       <td id="summary-language"></td>
+      </tr>
+    </table>
+  <input id="id_go_next_btn" type="submit" value="{% trans "Generate" %}" />
+  </div>
+
+  <div id="navlinks">
+    <span id="prevlinkdisabled">Back</span>
+    <a id="prevlink" style="display: none;" 
href="javascript:loadPrevStep()">{% trans "Previous" %}</a>
+    <span id="nextlinkdisabled">Next</span>
+    <a id="nextlink" style="display: none"; 
href="javascript:loadNextStep()">{% trans "Next" %}</a>
+    <span style="clear: both;">&nbsp;</span>
+  </div>
+</div>
 </form>
 
-<span id="noadminlimitinfo">{% blocktrans %}Wondering why you can't choose 
some of these results?<br />Their administrative boundaries are missing from 
the OSM database.<br />Look at the <a 
href="http://wiki.maposmatic.org/doku.php?id=faq";>FAQ</a> for more details.{% 
endblocktrans %}</span>
-<span id="noresultsinfo">{% trans "No results." %}</span>
-
 {% endblock %}
 
-- 
1.7.0.4