[Maposmatic-dev] [PATCH 16/24] Put the map generation form on its own page

[Maxime Petazzoni]

---
 www/maposmatic/views.py             |    6 ++-
 www/media/about.png                 |  Bin 0 -> 5961 bytes
 www/media/osm_map.js                |   10 ++-
 www/media/style.css                 |  102 ++++++++++++------------------
 www/templates/maposmatic/base.html  |    1 +
 www/templates/maposmatic/index.html |  117 +++++++----------------------------
 www/templates/maposmatic/new.html   |  108 ++++++++++++++++++++++++++++++++
 www/urls.py                         |    3 +
 8 files changed, 186 insertions(+), 161 deletions(-)
 create mode 100644 www/media/about.png
 create mode 100644 www/templates/maposmatic/new.html

diff --git a/www/maposmatic/views.py b/www/maposmatic/views.py
index a071383..9c358e5 100644
--- a/www/maposmatic/views.py
+++ b/www/maposmatic/views.py
@@ -196,6 +196,10 @@ def rendering_already_exists(osmid):
     return None
 
 def index(request):
+    return render_to_response('maposmatic/index.html',
+                              context_instance=RequestContext(request))
+
+def new(request):
     if request.method == 'POST':
         form = MapRenderingJobForm(request.POST)
         if form.is_valid():
@@ -223,7 +227,7 @@ def index(request):
             return HttpResponseRedirect('/jobs/%d' % job.id)
     else:
         form = MapRenderingJobForm()
-    return render_to_response('maposmatic/index.html',
+    return render_to_response('maposmatic/new.html',
                               { 'form' : form },
                               context_instance=RequestContext(request))
 
diff --git a/www/media/about.png b/www/media/about.png
new file mode 100644
index 
0000000000000000000000000000000000000000..64b43c1a68cf6abf5ae3cc127e40e175626f4977
GIT binary patch
literal 5961
zcmV-P7q;k$P)<h;3K|address@hidden;+S_h00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01ejw01ejxLMWSf00007bV*G`2igG&
z3Nb09)J8P`02awfL_t(|+U;C>bQ9N|{_c$4k|o>tDcfLUFmFh~V3Ia%8aBzc+ce>s
zq<gx}c2CnLyC*%IO$Y&!y4gU&address@hidden(4y10>KCa2&ukeqaMJHcw+?V~lJg
zS&xxMqnW#Z$S;f}%eLf4n%_D1_(&ej-1&X?_q^W>@Qr*U|I9)H{d2>H4GENWr-Cxc
zl0<address@hidden|eEoCJWw(B90icwUO`A5QilTci!ytA<PMXk0
zo=5qbHEXVatpM1vWsB18vM-Q<rU8J_n1ZaVEF>ftq0wl-FwC$_Qj#Qa9EXOc1{4<;
zqRnIi0Ek4Y;T__!?CfmMs0U#4=FMte;1{t(iqshlSh8>#Vq-_70ida=0eN|Q!Eqc!
zP*Zwp#=d3CmbphQ0NL5uj9RByL?jwNe*6S1T)3obwF?3do);address@hidden
z$|094JLV-IFE0o6_4SYlZG7Rm)address@hidden
zZs#Bf!>4=z5Jj)T?RE}Us~M6cK`xhL$&x1!7Z(SHlH_%pemiYcTEO=0+vRQMwkKr_
zRXqLlv(V{u9XD$q(GxcqbYK`c>~=fedTR?PkzBk;PbwI84h3d1l*CX%4HQ&address@hidden
z0NMfC1c{tcDw)#d%U`VXYu#B{SrZj<GI4HJ7BVJI1^`&C))address@hidden
z;@YjYISe8H24EV17)q$7)address@hidden)HxO}!76u^KiV
zBE_s3cL4x6&OU0)address@hidden&O#{oc6QVQ;#Hy??KNl>X&U|Dv^=R_%mB#GcS
zCmOFeqPXM)OeWJz52Z8LZ(Mg+t<-IQ_St9oZUCq>1|TpPqP&HVM;H~#x7*tlpB&hi
z<#5=wk$M9bFItM2m^ctZhPg%|U|AU=A|fzl@)S&-G#NK;T*scgz2G?e0~~K3w{hdf
zm!E(Bc?ST<L=V-;7}AyX3}>(nx;plFm;(nto8xfUwG+l?;address@hidden
z2qGwzh6w})a=8pLnG6br3Pxixe)Wr|k+&}wSL^CBJjDGXrSv622xVl$Rb352N=l2z
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
z)KglcF(ySWS0)j{L{NrNg>u8Ji<fiDKP|D7ms8iu<HRK^=A`PdU}|address@hidden
address@hidden<Z@>LE2jF7IAOP_ChP69GHJQsdU0up&nND7g0ugE!3?bln3D<79
zP~YO^<wz1mS*;address@hidden@_9FpT_1YYCwV;YXJ=;address@hidden
z<address@hidden(_<qcjJo1M7a><S4lXQ;$xv*Lrlz6Z|9flBn?s#Pza0>A_UfCdA?
zV0`GDG#$P_#n9)rVp6mc_fL(){)+Bya&3zX8Hwr<uXvB>address@hidden
z3DA!2A0UGPAW9qjMu%Q43rhg)of(Bn+-^6HesKh6&Q^Bh{M5yJg!g{4`jx{yZ$TD>
zq61pOP-PL7z1Y<address@hidden>IVd;KQw&RTkEI)address@hidden;Q2Z(WQLB?KyPm!kIlgcjj4p
zx%k^&zC?W_^?iK~L$~nuAyMFPl^N$6yLma25;e$3)P|%RNhR6>09Wd+;163i<80O0
zkhE4hI|Trcf23en59O0PS`j`JO#1-lHVX*X;address@hidden<HfNme|V0iLtB
address@hidden
znt5zLdL36x-Ub>&2o_9_#<KYdP{^18pVybPw6uup)@?jkRCxTiZoyMyYHh`~cedjA
zi7y9b4V_IttvX`1-*$8#%I*_{a45g}x&!Zh*#xW8yK5Msmf=6|OTzc2L=Sl72Lhn;
zzV`3`d-H~M8#mv$abpLi)KOS`0&i}815M3M0|Fo}E)D>address@hidden
z0EBk5+TF-2Gr=QzFBNA{;address@hidden>$AAke^4u?b9^82lYpYA)fnsYgeIVXn?
address@hidden<jyMHg`QYaKiOh^P}X!H|LEKUt%0scUcdVoRw*K460<+WD0J>4DFC+;zJ
address@hidden&YlCD`lUq|SRTDk`%6-^**?sjsd39hGQHb<H`v`Nz$;bopYxK*-FT=S`!dqUQM0
zBNJdn^kofUaY3!t9&Bm_i&(uPq~{L+K<~vy0nlyR{#>>5{avdacE>@%BT0Mna<TJo
zAAsYypa4i6m*%wwxgyh-PMH8c(VsPh6#%}+>address@hidden)iH8nN-tFOHF(WMJl
address@hidden(
z?ATGa{`KEw+ibR-gb>%^{C{BE+uP9A7MO6CIVTGgl*A{+%<1J#f_|SG_1B;abtSww
z%h=7!VVI$)address@hidden)address@hidden|IyY<$bcXn(;=Ipun{(TF4
zvH>Se%)qhZUqHsl=K}b=r?vIByC3#S_%>cnWcYbGKK#Bv3%D&address@hidden>}
zn;}t4c|{qvY<&Zbjo0qDKy>sNFIkLXW-MR6Tpmme=vT!T%CWD!8M{t2c8!tbf_wq7
z?v)KEiwaAZiyqHmH_y|*ez+5R_U3};`P+0fb;@*5LKRW5QFrwx1_S{>Xvc-?Hhgu>
z+BHIbejg(GP_Dn>address@hidden
z7SP*G450<keyo09zoF~budm*h_v!yilJp^!sBqxZeR%i%Kf`9TA|WoJD<)G)NuWBQ
z&ra*tC<}7-)BX4ZqwBlk;$mU-%9lU#xVc{wpz5aSCbn*S6XoS4kh3f(X!NTaUd<TD
address@hidden&;vwYafHw8Wf`Z+Kr2)R{`nzV$+D1z0stp^~{R?IA^J9g_
address@hidden(Lg))GtUl~=2v38O
zW8G-cr2}_C6gdD;UQsq`0VwR?<xq;fy%Z?+8j_FCQV>D=Hp$M;w!HYl>W!2zuXcX7
address@hidden(@<qI(@nlHv7nCMf;address@hidden&mE~tY>*tCOO5uLp>+`Ehc+Rtw
z1<7L+boPJ%$j;7oQ%Y9=z(*hL>address@hidden&$wDh9v>}=PH6{~kB
z81*q=fbR{6jv7;)XiT`v>2gl0t*ynhsndt$fxP~R&address@hidden|lZ>?GN@|#1g
z{GRgp=bw893IM6Du0}$9;%9O3G50zg_Oa!s%3w4mA<_^z;address@hidden@
zlJxFdf873StJT^s_Yp231312GJpAy(io5Tb`x?Wt{{w*0=^`+H-h8BuPlr~cg-j+3
zx|tU0S6B;zfTQ_`apvslj(|(;Znt~oZ(e$3hY$ZQ_1B*dHvmjeAXcncJ|i+JdIiHW
ziw5e}(o)Cc$3K1)DrIQsh8Bw%+uwN$0N{2D+s;>?eSO!ik6Znuk^>5=!vz4-%M!Xi
z|LkW!OB|b)address@hidden&address@hidden
z0Oal6pHNa#;s~I4X|w|17mWTK7at!l|M}1V<CpqK!?T1CRZL6_mMnU#>lMEPl}|t0
zk8{;ku(Vs2y}owi-}_ko!{Ube>address@hidden;hWs7JIUEjp;zUuoR---`mk>YE&GRYc
address@hidden@a&VprF>lgV2pCd5SZ&(5{J3y=Px6={K|KMkbgj~3A$#Sx&
z<daF0CpBnwnt6?ljjGDir!aPGDk5|d{hp{=twHh0BCrgbP*HJutJCQWr0`JzKrqU@
zL$N+S`#rzM<Dn%dOKTi<XYSb4lsE!1<;>aBxMgm`__XwX)f+6!;!5o$*d6wWjENHt
z78jQ^k0j*}6o6nAjUYbz?KU<address@hidden>7DLquj<address@hidden&v
z<#JrSbOAEC;zq$21;-JX?MFw03qp{JCPDr-5I2>address@hidden|mjOeULMbH19X
address@hidden&JN#rj6r(H#^tGz{8#M#bA|<ogEFAmt_^~8o
z%IDG1hM9JUJ)yMhB-APu5)+L9gS0}fK;address@hidden&6DLgCQC?nd^ON_F8UTV-H0h_(
zdjoLCICJLA&61O4yJpXsWmYPc^J}lxD!!_!Li+geP^<mF$5WI<T)S3J)Eecbf-k<T
z7)(cVqyaFH)gA}{8UO?d02Ks5I)1FM+z=C$8y_2&CJ62c6_uypbUBeaF4bpCL!;K9
zqVg12h9yUj<bU{e1E62QHGseO<$nAEQBzf8%|H6Zp1JcftCb4nJ<ZKGbf+rHkz`E1
zqkvPZ)address@hidden;28_eh{BvG*C+K`l{+I
zX>PuO^z;c`?}Q+Pz+$n$)MAnwqV#3?M+?r61mzC}0Ku;MU_tP?Lse6A*_D5^;LyCe
znFUIva<188jx8xYiO9$(#Kn3al2EDCsH!>(mSJp14(IR32oWZPiuOm{=nvIH9N_;X
z0Mfd38%`Y9e<(address@hidden<>e$MBz8{phdp^Y!!0C?=k2Q%fqqoT{YhH^
address@hidden;_exfjJHMc$VQ5;A|)^Q%g}P8JZXMM#5L;address@hidden<v|S*J^l9
zxSs<51;Biw=y=!uH35C(>address@hidden>9eR>yLN57Oiq4JL7(XSZsm&A<ev?I
zK-Uh`wxIpYsQk+78()0{lzajJkl1l6SFXJFb#+0(x~aZMv4PxDzw`K&&#&3X5`~Tc
rzXK~hgl}Z{Wc~W}5#MOx8^QkrI=l@>%q=OC00000NkvXXu0mjfoup1L

literal 0
HcmV?d00001

diff --git a/www/media/osm_map.js b/www/media/osm_map.js
index b11c833..72b0117 100644
--- a/www/media/osm_map.js
+++ b/www/media/osm_map.js
@@ -96,15 +96,15 @@ function mapInit()
 function switchToAdminMode() {
   $('#mapform tbody').children('tr.bybbox').hide();
   $('#mapform tbody').children('tr.byadmin').show();
-  $('#map_language_label').hide();
-  $('#map_language_entry').hide();
+  $('#map_language').hide();
+  $('#id_go_next_btn').hide();
 }
 
 function switchToBBoxMode() {
   $('#mapform tbody').children('tr.byadmin').hide();
   $('#mapform tbody').children('tr.bybbox').show();
-  $('#map_language_label').show();
-  $('#map_language_entry').show();
+  $('#map_language').show();
+  $('#id_go_next_btn').show().removeAttr('disabled');
   if (map == null)
     mapInit();
 }
@@ -132,6 +132,8 @@ function suggest(input, results, osm_id, button, options) {
   var $button = $(button);
   var timeout = false;
 
+  closeSuggest();
+
   // Setup the keyup event.
   $input.keyup(processKey);
 
diff --git a/www/media/style.css b/www/media/style.css
index 218557b..d1fe4a6 100644
--- a/www/media/style.css
+++ b/www/media/style.css
@@ -108,6 +108,7 @@ ul#nav li.activelink a {
 
 /* Main content */
 #content {
+  clear: both;
   margin: 1em 0 2em 2em;
   float: left;
   width: 70%;
@@ -130,11 +131,36 @@ table.authors td {
   vertical-align: top;
 }
 
+table#chavagne {
+  margin-left: 3em;
+  text-align: center;
+  float: right;
+}
+
+table#chavagne img {
+  width: 200px;
+}
+
+p#more {
+  margin: 2em 0 0 1em;
+  font-size: 13pt;
+}
+
+p#more img {
+  width: 32px;
+  vertical-align: middle;
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+p#more span {
+  font-weight: bold;
+}
 
 /* Meta informations */
 #meta {
   float: right;
-  width: 20%;
+  width: 22%;
   margin: 3em 1em;
   padding: 0 0 1em 1em;
   border-left: 1px #ccc solid;
@@ -245,7 +271,7 @@ a.selectedletter {
 
 /* Map form */
 #mainfrm {
-  padding: 1em;
+  padding: 0 0 1em 1em;
   margin: 1em 1em;
 
   border-left: 0.5em #ccc solid;
@@ -256,17 +282,26 @@ a.selectedletter {
   padding: 0;
 }
 
-#mainfrm tr.label {
+#mainfrm tr.bybbox {
+  display: none;
+}
+
+#mainfrm tr.label td {
   font-weight: bold;
+  padding-top: 10px;
 }
 
 #mainfrm input[type=text] {
   border: 1px black solid;
 }
 
+#mainfrm td.submit {
+  text-align: right;
+  padding-right: 1em;
+}
+
 #id_go_next_btn {
   display: none;
-  margin-left: 3em;
 }
 
 #mainfrm input#id_maptitle,
@@ -317,10 +352,6 @@ a.selectedletter {
   display: none;
 }
 
-#mainfrm tr.bybbox {
-  display: none;
-}
-
 #map_language_label,
 #map_language_entry {
   display: none;
@@ -340,58 +371,7 @@ a.selectedletter {
   bottom: 3px !important;
 }
 
-p.infobox {
-  margin-right: 1em;
-  margin-left: 1em;
-  background: #FFF6BF;
-  padding: 1em;
-}
-
-p.infobox img {
-  margin-right: 1em;
-  vertical-align: middle;
-  display: inline-block;
-}
-
-p.infobox span {
-  vertical-align: middle;
-  display: inline-block;
-}
-
-table#result_nominatim_search {
-  margin: 0px;
-  padding: 0px;
-  border-collapse: collapse;
-  border-spacing: 0px;
+ul.errorlist {
+  color: red;
 }
 
-table#result_nominatim_search td span {
-  display: none;
-  padding: 2px 3px;
-  margin-left: 8px;
-  margin-top: 1em;
-  width: 15em;
-}
-
-table#result_nominatim_search td:hover span {
-  display: inline;
-  position: absolute;
-  background: white;
-  border: 1px #ccc solid;
-  color: #6c6c6c;
-}
-
-table#result_nominatim_search td.nomsrch_bullet {
-  margin: 2px;
-  padding: 0px;
-  padding-top: 2px;
-  width: 10px;
-  text-align: center;
-  vertical-align: text-top;
-}
-
-table#result_nominatim_search td.nomsrch_entry {
-  margin: 2px;
-  padding: 0px;
-  padding-left: 3px;
-}
diff --git a/www/templates/maposmatic/base.html 
b/www/templates/maposmatic/base.html
index d51f6fb..8247e21 100644
--- a/www/templates/maposmatic/base.html
+++ b/www/templates/maposmatic/base.html
@@ -61,6 +61,7 @@
 
       <ul id="nav">
         <li {% block menu-home %}{% endblock %}><a href="{% url main %}">{% 
trans "Home" %}</a></li>
+        <li {% block menu-new  %}{% endblock %}><a href="{% url new  %}">{% 
trans "Create map" %}</a></li>
         <li {% block menu-jobs %}{% endblock %}><a href="{% url jobs %}">{% 
trans "Jobs" %}</a></li>
         <li {% block menu-maps %}{% endblock %}><a href="{% url maps %}">{% 
trans "Maps" %}</a></li>
         <li><a href="http://news.maposmatic.org";>{% trans "News" %}</a></li>
diff --git a/www/templates/maposmatic/index.html 
b/www/templates/maposmatic/index.html
index 33f180e..12891c7 100644
--- a/www/templates/maposmatic/index.html
+++ b/www/templates/maposmatic/index.html
@@ -35,77 +35,24 @@
 {% block menu-home %}class="activelink"{% endblock %}
 
 {% block page %}
-<h1>MapOSMatic</h1>
-<h2 id="submitmapform">{% trans "Generate your own map" %}</h2>
-
-<form id="mainfrm" method="post" action="{% url main %}#submitmapform" 
class="submitmap">
-  <table id="mapform">
-    <tr class="label">
-      <td>{% trans "Area selection mode:" %}</td>
-      <td rowspan="8">
-        <input id="id_go_next_btn" type="image" src="/smedia/go-next.png"
-               value="{% trans "Generate" %}" disabled="disabled"
-               title="{% trans "Please fill in the form before trying to 
proceed" %}" />
-      </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>
-        {{ 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"><td colspan="2">{% trans "Bounding box:" 
%}</td></tr>
-    <tr class="bybbox field"><td colspan="2" style="text-align: center;">
-        {{ form.bbox }}
-        {{ form.bbox.errors }}
-    </td></tr>
-
-    <tr class="label" id="map_language_label">
-      <td>{% trans "Map Index Language:" %}</td>
-    </tr>
-    <tr class="field" id="map_language_entry">
-      <td>
-{{ form.map_language }}
-      </td>
-    </tr>
-  </table>
-</form>
-
-<h2>{% trans "About MapOSMatic" %}</h2>
-
-<div style="float: right; margin-left: 3em;">
-  <table style="text-align: center"><tbody>
-    <tr>
-      <td><a href="/smedia/chavagne.png"><img style="width: 200px;" 
src="/smedia/chavagne-small.png"></a></td>
-      <td><a href="/smedia/chavagne_index.png"><img style="width: 200px;" 
src="/smedia/chavagne_index-small.png"></a></td>
-    </tr>
-    <tr>
-      <td>
-        {% trans "City Map" %}<br />
-        <a href="/smedia/chavagne.png">PNG</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne.pdf">PDF</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne.svg">SVG</a>
-      </td>
-      <td>
-        {% trans "Streets index" %}<br />
-        <a href="/smedia/chavagne_index.png">PNG</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne_index.pdf">PDF</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne_index.svg">SVG</a>
-      </td>
-    </tr>
-  </table>
-</div>
+<h1>{% trans "Introduction" %}</h1>
+
+<table id="chavagne"><tbody>
+  <tr>
+    <td><a href="/smedia/chavagne.png"><img 
src="/smedia/chavagne-small.png"></a></td>
+    <td><a href="/smedia/chavagne_index.png"><img 
src="/smedia/chavagne_index-small.png"></a></td>
+  </tr>
+  <tr>
+    <td>
+      {% trans "City Map" %}<br />
+      <a href="/smedia/chavagne.png">PNG</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne.pdf">PDF</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne.svg">SVG</a>
+    </td>
+    <td>
+      {% trans "Streets index" %}<br />
+      <a href="/smedia/chavagne_index.png">PNG</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne_index.pdf">PDF</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne_index.svg">SVG</a>
+    </td>
+  </tr>
+</table>
 
 <p>
 {% blocktrans %}MapOSMatic is a free software web service that
@@ -129,31 +76,11 @@ SVG formats and are ready to be printed.{% endblocktrans %}
 OpenStreetMap, you can freely (under the <a
 href="http://wiki.openstreetmap.org/wiki/License";>terms of
 OpenStreetMap license</a>) reuse, sell, modify, ... the generated
-maps. <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 %}
+maps.{% endblocktrans %}
 </p>
 
-<p>
-{% blocktrans %}To select the city to be rendered, two modes are
-available:{% endblocktrans %}
+<p id="more">
+  <span><a href="{% url new   %}"><img src="/smedia/go-next.png" />{% trans 
"Create map" %}</a></span><br />
+  <a href="{% url about %}"><img src="/smedia/about.png" />{% trans "More 
details" %}</a><br />
 </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>
-
-<p><a href="{% url about %}">{% trans "More details" %} &raquo;</a></p>
 {% endblock %}
diff --git a/www/templates/maposmatic/new.html 
b/www/templates/maposmatic/new.html
new file mode 100644
index 0000000..a0d41db
--- /dev/null
+++ b/www/templates/maposmatic/new.html
@@ -0,0 +1,108 @@
+{% extends "maposmatic/base.html" %}
+
+{% comment %}
+ coding: utf-8
+
+ 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  Pierre Mauduit
+ Copyright (C) 2009  David Mentré
+ Copyright (C) 2009  Maxime Petazzoni
+ Copyright (C) 2009  Thomas Petazzoni
+ Copyright (C) 2009  Gaël Utard
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as
+ published by the Free Software Foundation, either version 3 of the
+ License, or 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 Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+{% endcomment %}
+{% load i18n %}
+
+{% block extralink %}
+<script type="text/javascript" src="/smedia/jquery.js"></script>
+{{ form.media }}
+{% endblock %}
+
+{% block menu-new %}class="activelink"{% endblock %}
+
+{% 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>
+      {{ 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>
+      {% 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" style="text-align: center;">
+      {{ form.bbox }}
+      {{ form.bbox.errors }}
+    </td></tr>
+
+    <tr><td class="submit">
+      <input id="id_go_next_btn" type="image" src="/smedia/go-next.png"
+             value="{% trans "Generate" %}" disabled="disabled"
+             title="{% trans "Please fill in the form before trying to 
proceed" %}" />
+    </td></tr>
+  </table>
+</form>
+
+{% endblock %}
+
diff --git a/www/urls.py b/www/urls.py
index 30d8ef6..b677f91 100644
--- a/www/urls.py
+++ b/www/urls.py
@@ -47,6 +47,9 @@ urlpatterns = patterns('',
     url(r'^maps/$', maposmatic.views.all_maps,
         name='maps'),
 
+    url(r'^new/$', maposmatic.views.new,
+        name='new'),
+
     (r'^nominatim/([^/]*/)?(.*)$', maposmatic.views.query_nominatim),
 
     # Internationalization
-- 
1.6.3.3.261.g85c6