ILB
/
sigi
mirror of https://github.com/interlegis/sigi.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Corrige bug do mapa em dispositios pequenos

pull/159/head
Sesostris Vieira 3 years ago
parent
abb85d467c
commit
a2e38609b5
3 changed files with 29 additions and 182 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      sigi/apps/home/static/home/css/openmap.css
  2. 4
      sigi/apps/home/templates/home/mapfilter.html
  3. 179
      sigi/apps/home/templates/home/openmap.html

28
sigi/apps/home/static/home/css/openmap.css
View File

@ -1,12 +1,17 @@
body, html, .mapbox, #map { body,
html,
.mapbox,
#map {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#content { #content {
height: 91%; height: 91%;
} }
.filterwrap { .filterwrap {
background-color: rgba(255,255,255,0.5); background-color: rgba(255, 255, 255, 0.5);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -15,13 +20,15 @@ body, html, .mapbox, #map {
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.region-ufs { .region-ufs {
margin-left: 15px; margin-left: 15px;
} }
.autocomplete-content { .autocomplete-content {
max-width: 300px; max-width: 300px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
border-color: #ddd; border-color: #ddd;
margin-bottom: 20px; margin-bottom: 20px;
background-color: #fff; background-color: #fff;
@ -30,6 +37,7 @@ body, html, .mapbox, #map {
padding: 15px; padding: 15px;
z-index: 99999 !important; z-index: 99999 !important;
} }
.dropdown-content li>span { .dropdown-content li>span {
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
@ -47,4 +55,16 @@ body, html, .mapbox, #map {
display: list-item; display: list-item;
padding: 3px 3px 3px 20px; padding: 3px 3px 3px 20px;
font-weight: bold; font-weight: bold;
}
li>a.center-map,
li>a.clear-filters {
padding: 0px;
}
li>a.center-map>i.material-icons,
li>a.clear-filters>i.material-icons {
color: var(--main-bg-color);
border-color: var(--main-bg-color);
margin: 0px 10px 0px 0px;
} }

4
sigi/apps/home/templates/home/mapfilter.html
View File

@ -33,8 +33,8 @@
</div> </div>
</div> </div>
<small><strong>Total de Órgãos selecionados: </strong><span id="totalOrgao">-</span></small> <small><strong>Total de Órgãos selecionados: </strong><span id="totalOrgao">-</span></small>
<a href="#" class="right" id="center-map" title="{% trans 'Centralizar o mapa' %}"><i class="material-icons">my_location</i></a> <a href="#" class="right center-map" title="{% trans 'Centralizar o mapa' %}"><i class="material-icons">my_location</i></a>
<a href="#" class="right" id="clear-filters" title="{% trans 'Remover todos os filtros' %}"><i class="material-icons">clear_all</i></a> <a href="#" class="right clear-filters" title="{% trans 'Remover todos os filtros' %}"><i class="material-icons">clear_all</i></a>
</li> </li>
<li> <li>
<div class="collapsible-header">{% trans "Por Tipo de órgão" %}</div> <div class="collapsible-header">{% trans "Por Tipo de órgão" %}</div>

179
sigi/apps/home/templates/home/openmap.html
View File

@ -160,7 +160,7 @@
}) })
} }
$("#clear-filters").click(function(event) { $(".clear-filters").click(function(event) {
event.preventDefault(); event.preventDefault();
$("input[type=checkbox][name=tipo_orgao]").prop('checked', false); $("input[type=checkbox][name=tipo_orgao]").prop('checked', false);
$("input[type=checkbox][name=tipo_servico]").prop('checked', false); $("input[type=checkbox][name=tipo_servico]").prop('checked', false);
@ -170,7 +170,7 @@
$("input[type=checkbox][name=gerente]").prop('checked', false); $("input[type=checkbox][name=gerente]").prop('checked', false);
filtra(); filtra();
}); });
$("#center-map").click(function(event) { $(".center-map").click(function(event) {
event.preventDefault(); event.preventDefault();
mymap.flyTo(map_center, 4.5); mymap.flyTo(map_center, 4.5);
}); });
@ -192,178 +192,5 @@
mark.openPopup(); mark.openPopup();
} }
} }
</script> </script>
{% endblock %} {% endblock %}
{% comment %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"
{% endif %}>
<head>
<title>{% trans 'SIGI' %}</title>
</head>
<body>
<div class="mapbox">
<div class="sigi-logo">
<div>
<img src="{% static 'img/interlegis_60x60.png' %}" class='img-circle' />
</div>
<div>
<h3>Interlegis</h3>
<a href="{% url 'admin:index' %}">Voltar ao SIGI</a>
</div>
</div>
<div id="map">
<!-- open street map -->
</div>
</div>
<script>
$(document).ready(function () {
var options = { color: 'blue', fillColor: 'red', fillOpacity: 0.4, radius: 500 };
var unfiltred_options = { color: 'red', fillColor: 'red', fillOpacity: 0, radius: 1000 };
$("#search-text").autocomplete({
minLength: 3,
source: function (request, response) {
$.ajax({
url: "{% url "openmapsearch" %}",
data: { q: request.term },
dataType: "json",
appendTo: "#searchform",
success: function (data) {
console.log(data);
response(data);
},
})
},
select: function (event, ui) {
mymap.flyTo([ui.item.lat, ui.item.lng], 8.5);
var encontrado = false;
mymap.eachLayer(function (layer) {
if (layer instanceof L.Circle) {
if (layer.orgao_id == ui.item.id) {
layer.openPopup();
encontrado = true;
}
}
})
if (!encontrado) {
var mark = L.circle([ui.item.lat, ui.item.lng], unfiltred_options).bindTooltip(ui.item.label).bindPopup("").addTo(mymap);
mark.orgao_id = ui.item.id
mark.openPopup();
}
console.log(ui);
}
});
$("#filterbox").on("shown.bs.collapse", function () {
$("#options-toggler span").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-left")
})
$("#filterbox").on("hidden.bs.collapse", function () {
$("#options-toggler span").removeClass("glyphicon-chevron-left").addClass("glyphicon-chevron-right")
})
$("input[type=checkbox]").change(filtra);
var mymap = L.map('map', { zoomSnap: 0.01 }).setView([-14.235004, -51.92528], 4.5);
mymap.zoomControl.options.zoomInTitle = "{% trans 'Aproximar' %}";
mymap.zoomControl.options.zoomOutTitle = "{% trans 'Afastar' %}";
mymap.zoomControl.setPosition("bottomright");
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
mymap.on("popupopen", function (e) {
var popup = e.popup;
mark = popup._source;
$.ajax({
type: "GET",
url: "{% url "openmapdetail" 'orgao_id' %}".replace("orgao_id", mark.orgao_id),
encode: true
}).done(function (content) {
popup.setContent(content);
})
})
filtra();
function filtra() {
var name = $(this).attr("name"),
value = $(this).attr("value"),
checked = $(this).prop("checked");
if (value == "ignore") {
controls = $(this).attr("data-controls");
$("input[type=checkbox][name='" + controls + "']").prop("disabled", checked);
}
if (value == "none") {
$("input[type=checkbox][name='" + name + "'][value!='none']").prop("checked", !checked);
} else {
if (checked) {
$("input[type=checkbox][name='" + name + "'][value='none']").prop("checked", false);
}
}
if (name = 'regiao') {
$("input[type=checkbox][name='uf'][data-regiao='" + value + "']").prop('checked', checked);
}
if (name = 'uf') {
var sigla_regiao = $(this).attr('data-regiao'),
regiao = $("input[type=checkbox][value='" + sigla_regiao + "']");
if ($("input[type=checkbox][name='uf'][data-regiao='" + sigla_regiao + "']:checked").length == 0) {
$(regiao).prop('checked', false).prop("indeterminate", false);
} else if ($("input[type=checkbox][name='uf'][data-regiao='" + sigla_regiao + "']:not(:checked)").length == 0) {
$(regiao).prop('checked', true).prop("indeterminate", false);
} else {
$(regiao).prop("indeterminate", true)
}
}
var formData = $("#filterForm").serializeArray();
mymap.eachLayer(function (layer) {
if (layer instanceof L.Circle) {
mymap.removeLayer(layer);
}
})
$.ajax({
type: "GET",
url: "{% url "openmapdata" %}",
data: formData,
dataType: "json",
encode: true,
}).done(function (returnedData) {
$("#totalOrgao").text(returnedData.length);
returnedData.forEach(function (casa) {
if (casa[2] === null || casa[3] === null) {
alert(casa[1] + " está sem coordenadas geográficas e não será plotada");
} else {
var mark = L.circle([casa[2], casa[3]], options).bindTooltip(casa[1]).bindPopup("").addTo(mymap);
mark.orgao_id = casa[0]
}
})
})
}
})
</script>
</body>
</html>
{% endcomment %}
Write Preview
Loading…
Cancel
Save