Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

a spatial filter for UI #1022

Merged
merged 3 commits into from
Sep 29, 2024
Merged

a spatial filter for UI #1022

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
51ef3ef
a spatial filter for UI
pvgenuchten Sep 29, 2024
43834c0
clean up logs, add develop comments
pvgenuchten Sep 29, 2024
4f4bcad
split bbox once, as suggested by @tomkralidis
pvgenuchten Sep 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 76 additions & 9 deletions pycsw/ogc/api/templates/items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@

{% block extrahead %}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.draw.css"></script>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.draw.js"></script>
<style>
#records-map {
height: 350px;
Expand Down Expand Up @@ -95,7 +98,14 @@
<b>{{ data['numberMatched'] }} results.</b>
</div>
<div id="records-map"></div>
<div id="facets" class="pt-3">
<div id="spatial-filter" class="mt-2">
<div class="form-check form-switch">
<input class="form-check-input my-2" onchange="trigger_spatial_filter()" {% if 'bbox' in attrs.keys() %}checked{% endif %} type="checkbox" id="spatial-filter-check">
<label class="form-check-label" for="spatial-filter-check">Spatial filter</label>
<btn class="btn btn-sm border border-rounded" onclick="apply_spatial_filter()">Apply</btn>
</div>
</div>
<div id="facets" class="mt-2">
<div class="d-flex justify-content-between">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" {% if 'facets=true' in nav_links.self %}checked="true"{% endif %} onchange="facet(this.checked)" role="switch" id="enableFacets">
Expand Down Expand Up @@ -201,13 +211,31 @@
function facet(val){
location.href="{{updateurl('facets','facetprop')}}".replace('facetprop',val);
}

//if url has a bbox, enable the spatial filter
var bbox;
{% if 'bbox' in attrs.keys() %}
{% set bbox_tokens = attrs['bbox'].split('%2C') %}
{% if bbox_tokens|length == 4 %}
bbox = [[{{
bbox_tokens[1] }}, {{ bbox_tokens[0] }}], [{{
bbox_tokens[3] }}, {{ bbox_tokens[2] }}]];
{% endif %}
{% endif %}

//if filter enabled, apply the spatial filter
function apply_spatial_filter(){
if (map.hasLayer(rectangle)){
location.href="{{ updateurl('bbox','tmptmp') }}".replace('tmptmp',yx(rectangle.getBounds()));
}
}
</script>

{% endblock %}

{% block extrafoot %}
{% if data['features'] %}
<script>

<script>
var map = L.map('records-map').setView([0, 0], 1);
map.addLayer(new L.TileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
Expand All @@ -216,6 +244,7 @@
}
));
var geojson_data = {{ data['features'] | to_json }};
{% if data['features'] %}
var items = new L.GeoJSON(geojson_data, {
onEachFeature: function (feature, layer) {
var url = './items/' + feature.id;
Expand All @@ -226,17 +255,27 @@
});

map.addLayer(items);
var bounds = items.getBounds();
if (bounds.isValid() === true) {
map.fitBounds(bounds);
if (!bbox){
var bounds = items.getBounds();
if (bounds.isValid() === true) {
map.fitBounds(bounds);
}
}
{% endif %}

//set rectangle if page initializes with a spatial filter
if (bbox){
setRectangle(bbox);
map.fitBounds(bbox);
}

var highlightStyle = {
color: 'red',
dashArray: '',
fillOpacity: 0.5
}

{% if data['features'] %}
$(document).ready(function() {
$('#items-table-table tr').on('mouseenter', function(e){
id_ = $(this).find('[id]').attr('id');
Expand All @@ -252,14 +291,42 @@
$("#q").on("keypress", function(event){
if (event.which == 13 && !event.shiftKey) {
event.preventDefault();

var queryParams = new URLSearchParams(window.location.search);
queryParams.set("q", $("#q").val());
var new_url = '{{ config['server']['url'] }}/collections/{{ data['collection'] }}/items?' + queryParams.toString();
window.location = new_url;
}
});
});
</script>
{% endif %}
{% endif %}

// Generates a pycsw bbox from leaflet bounds
function yx (b){
if (b && b._southWest){
return [b._southWest.lng,b._southWest.lat,b._northEast.lng,b._northEast.lat].join(',');
}
}

// Creates or sets the filter rectangle and adds it to map
var rectangle;
function setRectangle(bbox){
if (rectangle){
rectangle.setBounds(bbox)
} else {
rectangle = L.rectangle(bbox);
rectangle.editing.enable();
rectangle.setStyle({color :'green'});
}
map.addLayer(rectangle);
}

// Dis/en-ables the spatial filter, the layer is removed or added at 95% map bounds
function trigger_spatial_filter(){
if (map.hasLayer(rectangle)){
rectangle.remove();
} else {
setRectangle(map.getBounds().pad(-0.95));
}
}
</script>
{% endblock %}
Loading