kopia lustrzana https://github.com/hholzgra/maposmatic/
496 wiersze
16 KiB
HTML
496 wiersze
16 KiB
HTML
{% extends "maposmatic/base.html" %}
|
|
|
|
{% comment %}
|
|
coding: utf-8
|
|
|
|
maposmatic, the web front-end of the MapOSMatic city map generation system
|
|
Copyright (C) 2012 David Decotigny
|
|
Copyright (C) 2012 Frédéric Lehobey
|
|
Copyright (C) 2012 Pierre Mauduit
|
|
Copyright (C) 2012 David Mentré
|
|
Copyright (C) 2012 Maxime Petazzoni
|
|
Copyright (C) 2012 Thomas Petazzoni
|
|
Copyright (C) 2012 Gaël Utard
|
|
Copyright (C) 2018 Hartmut Holzgraefe
|
|
|
|
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 %}
|
|
{% load l10n %}
|
|
{% load extratags %}
|
|
|
|
{% block body-class %}new{% endblock %}
|
|
{% block menu-new %}active{% endblock %}
|
|
|
|
{% block title %}{% trans "Create map" %}{% endblock %}
|
|
{% block extrajs %}
|
|
{% include "maposmatic/suggest.js" %}
|
|
{% include "maposmatic/wizard.js" %}
|
|
$('.multipleSelect').fastselect({
|
|
placeholder: '{% trans "Choose overlay(s)" %}',
|
|
searchPlaceholder: '{% trans "Search overlay" %}',
|
|
noResultsText: '{% trans "No results" %}',
|
|
userOptionPrefix: '{% trans "Add" %} ',
|
|
onItemSelect: function($item, itemModel) {
|
|
$("#overlay-preview").attr("src","/media/img/overlay/"+itemModel.value+".jpg");
|
|
}
|
|
});
|
|
|
|
// give focus to admin_city input field when selecting the admin_city tab
|
|
const admin_tab = document.querySelector('#step-location-admin-tab');
|
|
admin_tab.addEventListener('show.bs.tab', function(e){
|
|
// no idea why the setTimeout() wrapper is needed, but it is. do not remove ...
|
|
setTimeout(function () {
|
|
var input = $('#id_administrative_city');
|
|
input.focus();
|
|
}, 0);
|
|
});
|
|
|
|
{% if form.errors %}
|
|
$('#error-modal').modal('show')
|
|
{% endif%}
|
|
{% endblock %}
|
|
|
|
{% block extracss %}
|
|
.btn-circle {
|
|
width: 30px;
|
|
height: 30px;
|
|
text-align: center;
|
|
padding: 6px 0;
|
|
font-size: 12px;
|
|
line-height: 1.428571429;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.fstElement { font-size: 1em; }
|
|
.fstToggleBtn { min-width: 16.5em; }
|
|
.fstMultipleMode { display: block; }
|
|
.fstMultipleMode .fstControls { width: 100%; }
|
|
{% endblock %}
|
|
|
|
{% block page %}
|
|
|
|
{% if form.errors %}
|
|
<div class="modal" tabindex="-1" role="dialog" id="error-modal">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Form Errors</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{% for field in form %}
|
|
{% for error in field.errors %}
|
|
<div class="alert alert-danger">
|
|
<strong>{{field.label}} {{ error|escape }}</strong>
|
|
</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% for error in form.non_field_errors %}
|
|
<div class="alert alert-danger">
|
|
<strong>{{ error|escape }}</strong>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 id="submitmapform">{% trans "Generate your own map" %} <small><a href='{% url 'documentation_user_guide' %}#_creating_a_map_step_by_step' target='_blank'><i class='fas fa-question-circle'></i></a></small></h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-around">
|
|
<div class="col-lg-2">
|
|
<button type="button" class="btn btn-default" id="prevlink" onclick="nextPrev(-1)"><i class="fas fa-arrow-left"></i> {% trans "Back" %}</button>
|
|
</div>
|
|
<div class="stepwizard col-lg-6">
|
|
<div class="stepwizard-row setup-panel">
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle"><i class="fas fa-globe active"></i></i>
|
|
<p>{% trans "Map area" %}</p>
|
|
</div>
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle"><i class="fas fa-file"></i></i>
|
|
<p>{% trans "Layout" %}</p>
|
|
</div>
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle"><i class="fas fa-image"></i></i>
|
|
<p>{% trans "Style" %}</p>
|
|
</div>
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle"><i class="fas fa-bars"></i></i>
|
|
<p>{% trans "Overlays" %}</p>
|
|
</div>
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle"><i class="fas fa-file"></i></i>
|
|
<p>{% trans "Paper" %}</p>
|
|
</div>
|
|
|
|
<div class="stepwizard-step">
|
|
<i class="btn btn-light btn-circle"><i class="fas fa-check"></i></i>
|
|
<p>{% trans "Submit" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2" style="align: right">
|
|
<button type="button" class="btn btn-success" id="nextlink" onclick="nextPrev(1)"><i class="fas fa-arrow-right"></i> {% trans "Next" %}</button>
|
|
<button id="formsubmit" type="submit" class="btn btn-success" value="submit" onclick="$('#submitme').click()">
|
|
{% trans "Generate" %} <i class="fas fa-check-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="mainfrm" method="post" enctype="multipart/form-data" onkeydown="return event.key != 'Enter';" action="{% url "new" %}#submitmapform">
|
|
{{ form.mode }}
|
|
<div class="row" style="margin-top: 30px;" >
|
|
<div class="col-lg-12" >
|
|
|
|
<div class="tab" style="display: block" id="wizard-step-location">
|
|
|
|
<ul class="nav nav-tabs" id="locTabs">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="step-location-bbox-tab" data-bs-toggle="tab" data-bs-target="#step-location-bbox" type="button" role="tab" aria-controls="bt-step-location-bbox" aria-selected="true"><i class="fas fa-globe-africa"></i> {% trans "Geographic area" %}</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="step-location-admin-tab" data-bs-toggle="tab" data-bs-target="#step-location-admin" type="button" role="tab" aria-controls="bt-step-location-bbox" aria-selected="false"><i class="fas fa-search-location"></i> {% trans "City search" %}</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="step-location-file-tab" data-bs-toggle="tab" data-bs-target="#step-location-file" type="button" role="tab" aria-controls="bt-step-location-file" aria-selected="false"><i class="fas fa-upload"></i> {% trans "File upload" %}</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="step-location-tabs">
|
|
<div class="tab-pane active" id="step-location-bbox" role="tabpanel">
|
|
{{ form.bbox }}
|
|
</div>
|
|
<div class="tab-pane" id="step-location-admin" role="tabpanel">
|
|
<div style="position: relative;">
|
|
{{ form.administrative_city }}
|
|
<i class="fas fa-redo suggest-icon" id="loading-icon"></i>
|
|
<i class="fas fa-exclamation-triangle suggest-icon" id="error-icon"></i>
|
|
<ul id="suggest" class="dropdown-menu" role="menu"
|
|
aria-labelledby="id_administrative_city">
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
{{ form.administrative_osmid }}
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane" id="step-location-file" role="tabpanel">
|
|
<div class="col-lg-12">
|
|
<fieldset id="track-file">
|
|
<legend><i class="fas fa-file-upload"></i> {% trans "Upload files" %}</legend>
|
|
{{ form.uploadfile }}
|
|
<tt id="file-list">
|
|
</tt>
|
|
</fieldset>
|
|
|
|
<div style='height: 2ex'></div>
|
|
|
|
<div class="alert alert-secondary">
|
|
{% blocktrans trimmed %}
|
|
Upload GPX, Umap, or general GeoJSON files here.
|
|
<br/>
|
|
You can select multiple files at once. If you re-open the
|
|
file selection dialog to select files, your selection will
|
|
replace the previous one.
|
|
{% endblocktrans %}
|
|
</div>
|
|
|
|
<div style='height: 2ex'></div>
|
|
|
|
<div class="alert alert-danger">
|
|
{% blocktrans trimmed %}
|
|
<b>Note:</b> The uploaded files will not be made available to anyone, the map created using this
|
|
file <b>will be publicly visible</b> though.<br/>Do <b>NOT</b> upload any data you don't want to be publicly
|
|
visible.
|
|
{% endblocktrans %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Geographic area selection" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
Start by choosing the city or geographic area you want to
|
|
render. Suggestions will appear as you start typing. If you can't find the city
|
|
you want, or if you prefer to choose the exact area you want to render
|
|
yourself, select the <em>Geographic area</em> tab and use the mini-map to set
|
|
the limits of the rendered area.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tab" id="wizard-step-layout">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<fieldset>
|
|
<legend>{% trans "Layout" %}</legend>
|
|
{{ form.layout }}
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>{% trans "Indexer" %}</legend>
|
|
{{ form.indexer }}
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<img id="layout-preview" align="right"
|
|
src="/media/img/layout/{{request.session.new_layout}}.png"
|
|
srcset="/media/img/layout/{{request.session.new_layout}}.png, /media/img/layout/{{request.session.new_layout}}-1.5x.png 1.5x, /media/img/layout/{{request.session.new_layout}}-2x.png 2x"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Map layout" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
The map layout determines how the map and the index are
|
|
rendered. The <em>Multi-page layout</em> produces a booklet very suitable for
|
|
printing and binding.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="tab" id="wizard-step-stylesheet">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<fieldset>
|
|
<legend>{% trans "Stylesheet" %}</legend>
|
|
{{ form.stylesheet }}
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<img id="style-preview" align="right" src="/media/img/style/{{request.session.new_stylesheet}}.jpg"/> {# TODO: need to pick first style from list here #}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Map stylesheet" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
The map stylesheet determines the style and appearance of the map itself.
|
|
Note that the stylesheet also drives what details will be visible on the map.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab" id="wizard-step-overlay">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<fieldset>
|
|
<legend>{% trans "Overlays" %}</legend>
|
|
{{ form.overlay }}
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<img id="overlay-preview" align="right" src="/media/img/empty.png"/> {# TODO: select default here, too #}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Map overlays" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
Overlays render extra objects on top of the chosen base style.
|
|
Multiple overlays can be selected to add different kinds of additional information on top of the map.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tab" id="wizard-step-paper-size">
|
|
<div class="row" id="paper-size">
|
|
<div class="col-lg-6">
|
|
<div align="center">
|
|
<fieldset>
|
|
<legend>{% trans "Paper size" %} {% trans "(width x height)" %}</legend>
|
|
<div id="papersize_formline">
|
|
{{ form.paper_width_mm }}mm <i class="fas fa-arrows-alt-h"></i>
|
|
×
|
|
{{ form.paper_height_mm }}mm <i class="fas fa-arrows-alt-v"></i>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div height="1ex"> </div>
|
|
<div align="center">
|
|
<canvas id="paper_canvas" width="400" height="400" align="center">
|
|
</div>
|
|
</canvas>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div id='single_page_sizes'>
|
|
<fieldset>
|
|
<legend>Paper size suggestions</legend>
|
|
{{ papersize_suggestions }}
|
|
</fieldset>
|
|
</div>
|
|
<div id='multi_page_sizes' style='display: none'>
|
|
<fieldset>
|
|
<legend>Multipage size suggestions</legend>
|
|
{{ multipage_papersize_suggestions }}
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-error" id="paper-size-loading-error">
|
|
{% blocktrans %}An error occured while retrieving compatible paper sizes.{% endblocktrans %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-info" id="paper-size-loading">
|
|
<i class="fas fa-redo"></i>
|
|
{% blocktrans %}Calculating available paper formats for your map...{% endblocktrans %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Paper format and size" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
Select the desired format, size and orientation for your map.
|
|
{% endblocktrans %}
|
|
{% blocktrans trimmed %}
|
|
You can choose from the suggested standard sizes, the "best
|
|
fit" size for the map area you selected, or specify a width
|
|
and height of your own choice.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tab" id="wizard-step-lang-title">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<fieldset>
|
|
<legend>{% trans "Map title" %}</legend>
|
|
{{ form.maptitle }}
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<fieldset>
|
|
<legend>{% trans "Locale" %}</legend>
|
|
<div class="dropdown">
|
|
<button id="map_language_button" type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expand="false">en_US.UTF-8</button>
|
|
<!-- {{ form.map_language.value }} -->
|
|
</button>
|
|
<input type="hidden" name="{{ form.map_language.name }}" id="{{ form.map_language.name }}" value="en_US.UTF-8"/>
|
|
<ul id="maplang_choices" class="dropdown-menu bg-light" style="height: 400px; overflow-y: auto;" area-labeledby="map_language_button">
|
|
{% for choice in form.map_language.field.choices %}
|
|
<li><a class="dropdown-item" href="#" data-langcode="{{choice.0}}" onclick="$('#map_language_button').html($(this).html()); $('#{{ form.map_language.name }}').val('{{choice.0}}');">{{choice.1}} ({{choice.0|locale_base}})</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<br/>
|
|
<fieldset>
|
|
<legend>{% trans "Your Email address (for notifications, optional)" %}</legend>
|
|
{{ form.submittermail }}
|
|
{% if SUBMITTER_MAIL_LIFETIME %}
|
|
({% trans "will be deleted after" %} {{ SUBMITTER_MAIL_LIFETIME }} {% trans "hours" %})
|
|
{% endif %}
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="margin-top: 30px;">
|
|
<div class="col-lg-12">
|
|
<fieldset id="summary">
|
|
<legend>{% trans "Summary" %}</legend>
|
|
<table class="table table-striped">
|
|
<tbody>
|
|
<tr><td>{% trans "Location:" %}</td><td id="summary-location"></td></tr>
|
|
<tr><td>{% trans "Layout:" %}</td><td id="summary-layout"></td></tr>
|
|
<tr><td>{% trans "Stylesheet:" %}</td><td id="summary-stylesheet"></td></tr>
|
|
<tr><td>{% trans "Overlay:" %}</td><td id="summary-overlay"></td></tr>
|
|
<tr><td>{% trans "Paper format:" %}</td><td id="summary-paper-size"></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</fieldset>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<h4>{% trans "Almost there!" %}</h4>
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
You're almost ready to request to map rendering! Select the map language,
|
|
eventually adjust the title of your map, and you're good to go!
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input id="submitme" type="submit" style="display: none"/>
|
|
</form>
|
|
|
|
{% endblock %}
|