diff --git a/sigi/apps/home/static/home/css/openmap.css b/sigi/apps/home/static/home/css/openmap.css index 81712ac..f50742a 100644 --- a/sigi/apps/home/static/home/css/openmap.css +++ b/sigi/apps/home/static/home/css/openmap.css @@ -6,8 +6,13 @@ html, width: 100%; } -#content { - height: calc(100% - 60px); +#content, +.content { + height: 100%; +} + +.main { + height: calc(100% - 80px); } .filterwrap { @@ -134,4 +139,10 @@ li>a.clear-filters>i.material-icons { .embed-map-content { height: 100% !important; +} + +.ui-autocomplete { + overflow-y: auto; + overflow-x: hidden; + z-index: 1000; } \ No newline at end of file diff --git a/sigi/apps/home/static/home/js/openmap.js b/sigi/apps/home/static/home/js/openmap.js new file mode 100644 index 0000000..5775ae3 --- /dev/null +++ b/sigi/apps/home/static/home/js/openmap.js @@ -0,0 +1,174 @@ +const stadia_tiles_options = { + attribution: + ` + © Stadia Maps + © Stamen Design + © OpenMapTiles + © OpenStreetMap contributors" + ` +}; +var mymap; +var orgao_layer_group = L.layerGroup(); +var map_center = [-14.235004, -51.92528]; +var options = { color: 'blue', fillColor: 'red', fillOpacity: 0.4, radius: 500 }; +var unfiltred_options = { color: 'red', fillColor: 'red', fillOpacity: 0, radius: 1000 }; +$(document).ready(function () { + $("input[type=checkbox]").change(filtra); + var search_field = $("#map-search"); + + if (search_field) { + search_field.autocomplete({ + source: search_field.attr("data-source"), + minLength: 3, + select: function (event, ui) { + map_fly_to(ui.item); + } + }); + } + + var base_layers = { + "Toner": L.tileLayer( + "https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png", + stadia_tiles_options, + ), + "Toner lite": L.tileLayer( + "https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png", + stadia_tiles_options, + ), + "Terrain": L.tileLayer( + "https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}{r}.png", + stadia_tiles_options, + ), + "Water color": L.tileLayer( + "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg", + stadia_tiles_options, + ), + "Open street": L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: 'Map data and imagery © OpenStreetMap contributors, ', + tileSize: 512, + zoomOffset: -1 + }), + }; + + mymap = L.map('map', { + center: map_center, + zoom: 4.5, + zoomSnap: 0.01, + layers: [base_layers.Terrain, orgao_layer_group] + }); + + mymap.zoomControl.options.zoomInTitle = "{% trans 'Aproximar' %}"; + mymap.zoomControl.options.zoomOutTitle = "{% trans 'Afastar' %}"; + mymap.zoomControl.setPosition("bottomright"); + + L.control.layers(base_layers).addTo(mymap); + + mymap.on("popupopen", function (e) { + var popup = e.popup; + mark = popup._source; + $.ajax({ + type: "GET", + url: window.__openmapdetail_prefix__.replace("changeme", 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 (name) { + $(`input[type=checkbox][name=${name}][value=${value}]`).prop("checked", 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(); + $("#filter-spinner").toggleClass("d-none d-flex"); + $.ajax({ + type: "GET", + url: window.__openmapdata__, + data: formData, + dataType: "json", + encode: true, + }).done(function (returnedData) { + $("#filter-spinner").toggleClass("d-none d-flex"); + $("#totalOrgao").text(returnedData.length); + var new_data_layer = L.layerGroup(); + 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('
+ {% if user.is_staff %} + {% url "admin:casas_orgao_change" orgao.id as orgao_url %} + {% else %} + {% url "servicos_casas_atendidas" orgao.id as orgao_url %} + {% endif %} + + {{ orgao }} + + | +|
---|---|
Endereço | {{ orgao.logradouro }}, {{ orgao.bairro }}, {{ orgao.municipio.nome }}, {{ orgao.municipio.uf.sigla }}, CEP: {{ orgao.cep }} |
Telefones | ++ {% for telefone in telefones %} + {{ telefone }} + {% if not forloop.last %}, {% endif %} + {% endfor %} + | +
{{ orgao.email }} | |
Convênios | ++ {% for c in orgao.convenio_set.all %} + {% if user.is_staff %} + + {{ c.projeto.sigla }} ({{ c.get_status }}) + + {% else %} + {{ c.projeto.sigla }} ({{ c.get_status }}) + {% endif %} + {% if not forloop.last %}, {% endif %} + {% endfor %} + | +
Serviços | {% for s in servicos.all %}{% if s.url %}{{ s }}{% else %}{{ s }}{% endif %}{% if not forloop.last %}, {% endif %}{% endfor %} |