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.

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

[WIP] 10502 search layer #11626

Draft
wants to merge 9 commits into
base: dev/8.0.x
Choose a base branch
from
259 changes: 259 additions & 0 deletions arches/app/media/js/viewmodels/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,261 @@ define([
const viewModel = function(params) {
var self = this;

const searchLayerIds = [
'searchtiles-unclustered-polygon-fill',
'searchtiles-unclustered-point',
'searchtiles-clusters',
'searchtiles-clusters-halo',
'searchtiles-cluster-count',
'searchtiles-unclustered-polypoint'
];
const searchLayerDefinitions = [
{
"id": "searchtiles-unclustered-polygon-fill",
"type": "fill",
"paint": {
"fill-color": "#fa6003",
"fill-opacity": 0.3,
"fill-outline-color": "#fa6003"
},
"filter": [
"==",
"$type",
"Polygon"
],
"source": "search-layer-source",
"source-layer": "search_layer",
"minzoom": 10,
"tolerance": 0.75
},
{
"id": "searchtiles-unclustered-point",
"type": "circle",
"paint": {
"circle-color": "#fa6003",
"circle-radius": 6,
"circle-opacity": 1
},
"filter": [
"!",
[
"has",
"point_count"
]
],
"source": "search-layer-source",
"source-layer": "search_layer"
},
{
"id": "searchtiles-clusters",
"type": "circle",
"paint": {
"circle-color": "#fa6003",
"circle-radius": [
"step",
[
"get",
"point_count"
],
10,
100,
20,
750,
30,
1500,
40,
2500,
50,
5000,
65
],
"circle-opacity": [
"case",
[
"boolean",
[
"has",
"point_count"
],
true
],
1,
0
]
},
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"!=",
"highlight",
true
]
],
"source": "search-layer-source",
"source-layer": "search_layer"
},
{
"id": "searchtiles-clusters-halo",
"type": "circle",
"paint": {
"circle-color": "#fa6003",
"circle-radius": [
"step",
[
"get",
"point_count"
],
20,
100,
30,
750,
40,
1500,
50,
2500,
60,
5000,
75
],
"circle-opacity": [
"case",
[
"boolean",
[
"has",
"point_count"
],
true
],
0.5,
0
]
},
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"!=",
"highlight",
true
]
],
"maxzoom": 14,
"source": "search-layer-source",
"source-layer": "search_layer"
},
{
"id": "searchtiles-cluster-count",
"type": "symbol",
"paint": {
"text-color": "#fff"
},
"filter": [
"has",
"point_count"
],
"layout": {
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-size": 14,
"text-field": "{point_count}"
},
"maxzoom": 14,
"source": "search-layer-source",
"source-layer": "search_layer"
},
{
"id": "searchtiles-unclustered-polypoint",
"type": "circle",
"paint": {
"circle-color": "#fa6003",
"circle-radius": 0,
"circle-opacity": 0,
"circle-stroke-color": "#fff",
"circle-stroke-width": 0
},
"filter": [
"!",
[
"has",
"point_count"
]
],
"layout": {
"visibility": "none"
},
"source": "search-layer-source",
"source-layer": "search_layer"
}
];
this.searchQueryId = params.searchQueryId;
this.searchQueryId.subscribe(function (searchId) {
if (searchId) {
self.addSearchLayer(searchId);
} else {
// optionally, remove the search layer if searchId becomes undefined
self.removeSearchLayer();
}
});

this.addSearchLayer = function (searchId) {
console.log(searchId);
if (!self.map())
return;
const tileUrlTemplate = `http://localhost:8000/search-layer/{z}/{x}/{y}.pbf?searchid=${encodeURIComponent(searchId)}`;

// Remove existing source and layer if they exist
searchLayerIds.forEach(layerId => {
if (self.map().getLayer(layerId)) {
self.map().removeLayer(layerId);
}
if (self.map().getSource(layerId)) {
self.map().removeSource(layerId);
}
});
if (self.map().getSource('search-layer-source')) {
self.map().removeSource('search-layer-source');
}

// Add the vector tile source
self.map().addSource('search-layer-source', {
type: 'vector',
tiles: [tileUrlTemplate],
minzoom: 0,
maxzoom: 22,
});

// Add the layer to display the data
searchLayerDefinitions.forEach(mapLayer => {
self.map().addLayer(mapLayer);
});

// Optionally, fit the map to the data bounds
// self.fitMapToDataBounds(searchId);
};

this.removeSearchLayer = function () {
searchLayerDefinitions.forEach(mapLayer => {
if (self.map().getLayer(mapLayer.id)) {
self.map().removeLayer(mapLayer.id);
}
});
if (self.map().getSource('search-layer-source')) {
self.map().removeSource('search-layer-source');
}
};


var geojsonSourceFactory = function() {
return {
Expand Down Expand Up @@ -62,6 +317,10 @@ define([
map.fitBounds(ko.unwrap(params.bounds), boundingOptions);
}

// If searchQueryId is already available, add the search layer
if (self.searchQueryId()) {
self.addSearchLayer(self.searchQueryId());
}
});

this.bounds = ko.observable(ko.unwrap(params.bounds) || arches.hexBinBounds);
Expand Down
9 changes: 1 addition & 8 deletions arches/app/media/js/views/components/search/map-filter.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ define([
options.name = "Map Filter";
BaseFilter.prototype.initialize.call(this, options);

options.searchQueryId = this.searchQueryId;
options.sources = {
"geojson-search-buffer-data": {
"type": "geojson",
Expand Down Expand Up @@ -369,14 +370,6 @@ define([
this.updateFilter();
}, this);

this.searchAggregations.subscribe(this.updateSearchResultsLayers, this);
if (ko.isObservable(bins)) {
bins.subscribe(this.updateSearchResultsLayers, this);
}
if (this.searchAggregations()) {
this.updateSearchResultsLayers();
}
this.mouseoverInstanceId.subscribe(updateSearchResultPointLayer);
}, this);
},

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ define([

this.selectedPopup = ko.observable('');
this.sharedStateObject.selectedPopup = this.selectedPopup;
this.searchQueryId = ko.observable(null);
this.sharedStateObject.searchQueryId = this.searchQueryId;
var firstEnabledFilter = _.find(this.sharedStateObject.searchFilterConfigs, function(filter) {
return filter.config.layoutType === 'tabbed';
}, this);
Expand Down Expand Up @@ -51,6 +53,47 @@ define([
this.searchFilterVms[componentName](this);
},

doQuery: function() {
const queryObj = JSON.parse(this.queryString());
if (self.updateRequest) { self.updateRequest.abort(); }
self.updateRequest = $.ajax({
type: "GET",
url: arches.urls.search_results,
data: queryObj,
context: this,
success: function(response) {
_.each(this.sharedStateObject.searchResults, function(value, key, results) {
if (key !== 'timestamp') {
delete this.sharedStateObject.searchResults[key];
}
}, this);
_.each(response, function(value, key, response) {
if (key !== 'timestamp') {
this.sharedStateObject.searchResults[key] = value;
}
}, this);
this.sharedStateObject.searchResults.timestamp(response.timestamp);
this.searchQueryId(this.sharedStateObject.searchResults.searchqueryid);
this.sharedStateObject.userIsReviewer(response.reviewer);
this.sharedStateObject.userid(response.userid);
this.sharedStateObject.total(response.total_results);
this.sharedStateObject.hits(response.results.hits.hits.length);
this.sharedStateObject.alert(false);
},
error: function(response, status, error) {
const alert = new AlertViewModel('ep-alert-red', arches.translations.requestFailed.title, response.responseJSON?.message);
if(self.updateRequest.statusText !== 'abort'){
this.alert(alert);
}
this.sharedStateObject.loading(false);
},
complete: function(request, status) {
self.updateRequest = undefined;
window.history.pushState({}, '', '?' + $.param(queryObj).split('+').join('%20'));
this.sharedStateObject.loading(false);
}
});
},
});

return ko.components.register(componentName, {
Expand Down
Loading
Loading