Skip to content

Commit dcc741c

Browse files
MauricioFauthMauricioFauth
authored
Merge pull request #19251 from MoonE/fix-gis-visualization
Fix gis visualization
2 parents a44ae81 + 41a293c commit dcc741c

4 files changed

Lines changed: 58 additions & 61 deletions

File tree

‎resources/js/src/gis_data_editor.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ function disposeGISEditorVisualization () {
2323
/**
2424
* Initialize the visualization in the GIS data editor.
2525
*/
26-
function initGISEditorVisualization () {
27-
visualizationController = new window.GisVisualizationController();
26+
function initGISEditorVisualization (olData: any[]) {
27+
visualizationController = new window.GisVisualizationController(olData);
2828
}
2929

3030
function withIndex (prefix: string, ...index: Array<string|number>): string {
@@ -304,7 +304,9 @@ function loadGISEditor (value, field, type, inputName) {
304304

305305
$gisEditorModal.find('.modal-title').first().html(data.gis_editor_title);
306306
$gisEditorModal.find('.modal-body').first().html(data.gis_editor);
307-
initGISEditorVisualization();
307+
initGISEditorVisualization(
308+
JSON.parse($('#visualization-placeholder').attr('data-ol-data')),
309+
);
308310

309311
const gisData = $('#gis_data').data('gisData');
310312
if (gisData) {
@@ -369,8 +371,7 @@ function onCoordinateEdit (data) {
369371
$('#visualization-placeholder > .visualization-target-svg').html(data.visualization);
370372
$('#gis_data_textarea').val(data.result);
371373

372-
initGISEditorVisualization();
373-
visualizationController.setOpenLayersData(data.openLayersData);
374+
initGISEditorVisualization(data.openLayersData);
374375
}
375376

376377
/**

‎resources/js/src/table/gis_visualization.ts‎

Lines changed: 50 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import $ from 'jquery';
22
import { AJAX } from '../modules/ajax.ts';
33
import { escapeHtml } from '../modules/functions/escape.ts';
44

5-
let openLayersData: any[]|null = null;
6-
75
/**
86
* @fileoverview functions used for visualizing GIS data
97
*
@@ -418,15 +416,50 @@ class SvgVisualization extends GisVisualization {
418416
class OlVisualization extends GisVisualization {
419417
private olMap: any = undefined;
420418

421-
private initFn: (HTMLElement) => any;
419+
private data: any[];
422420

423421
/**
424422
* @param {function(HTMLElement): ol.Map} initFn
425423
*/
426-
constructor (target: HTMLElement, initFn) {
424+
constructor (target: HTMLElement, data: any[]) {
427425
super(target);
428426

429-
this.initFn = initFn;
427+
this.data = data;
428+
}
429+
430+
drawOpenLayers () {
431+
if (typeof window.ol === 'undefined') {
432+
return undefined;
433+
}
434+
435+
$('head').append('<link rel="stylesheet" type="text/css" href="js/vendor/openlayers/theme/ol.css">');
436+
437+
const vectorSource = new window.ol.source.Vector({
438+
features: getFeaturesFromOpenLayersData(this.data),
439+
});
440+
const map = new window.ol.Map({
441+
target: this.target,
442+
layers: [
443+
new window.ol.layer.Tile({ source: new window.ol.source.OSM() }),
444+
new window.ol.layer.Vector({ source: vectorSource }),
445+
],
446+
view: new window.ol.View({ center: [0, 0], zoom: 4 }),
447+
controls: [
448+
new window.ol.control.MousePosition({
449+
coordinateFormat: window.ol.coordinate.createStringXY(4),
450+
projection: 'EPSG:4326'
451+
}),
452+
new window.ol.control.Zoom,
453+
new window.ol.control.Attribution
454+
]
455+
});
456+
457+
const extent = vectorSource.getExtent();
458+
if (! window.ol.extent.isEmpty(extent)) {
459+
map.getView().fit(extent, { padding: [20, 20, 20, 20] });
460+
}
461+
462+
return map;
430463
}
431464

432465
show () {
@@ -435,8 +468,7 @@ class OlVisualization extends GisVisualization {
435468
if (this.olMap) {
436469
this.olMap.updateSize();
437470
} else {
438-
const initFn = this.initFn;
439-
this.olMap = initFn(this.target);
471+
this.olMap = this.drawOpenLayers();
440472
}
441473
}
442474

@@ -513,54 +545,18 @@ function getFeaturesFromOpenLayersData (geometries: any[]): any[] {
513545
return features;
514546
}
515547

516-
function drawOpenLayers (target: HTMLElement) {
517-
if (typeof window.ol === 'undefined') {
518-
return undefined;
519-
}
520-
521-
$('head').append('<link rel="stylesheet" type="text/css" href="js/vendor/openlayers/theme/ol.css">');
522-
523-
const vectorSource = new window.ol.source.Vector({});
524-
const map = new window.ol.Map({
525-
target: target,
526-
layers: [
527-
new window.ol.layer.Tile({ source: new window.ol.source.OSM() }),
528-
new window.ol.layer.Vector({ source: vectorSource })
529-
],
530-
view: new window.ol.View({ center: [0, 0], zoom: 4 }),
531-
controls: [
532-
new window.ol.control.MousePosition({
533-
coordinateFormat: window.ol.coordinate.createStringXY(4),
534-
projection: 'EPSG:4326'
535-
}),
536-
new window.ol.control.Zoom,
537-
new window.ol.control.Attribution
538-
]
539-
});
540-
541-
openLayersData = openLayersData ?? JSON.parse($('#visualization-placeholder').attr('data-ol-data'));
542-
const features = getFeaturesFromOpenLayersData(openLayersData);
543-
for (const feature of features) {
544-
vectorSource.addFeature(feature);
545-
}
546-
547-
const extent = vectorSource.getExtent();
548-
if (! window.ol.extent.isEmpty(extent)) {
549-
map.getView().fit(extent, { padding: [20, 20, 20, 20] });
550-
}
551-
552-
return map;
553-
}
554-
555548
class GisVisualizationController {
556549
private svgVis: SvgVisualization|undefined = undefined;
557550

558551
private olVis: OlVisualization|undefined = undefined;
559552

560553
private boundOnChoiceChange: any;
561554

562-
constructor () {
555+
private olData: any[];
556+
557+
constructor (olData: any[]) {
563558
this.boundOnChoiceChange = this.onChoiceChange.bind(this);
559+
this.olData = olData;
564560

565561
$(document).on('click', '#useOsmAsBaseLayerSwitch', this.boundOnChoiceChange);
566562

@@ -591,14 +587,16 @@ class GisVisualizationController {
591587
if (!this.olVis) {
592588
this.olVis = new OlVisualization(
593589
$('#visualization-placeholder > .visualization-target-ol').get(0),
594-
drawOpenLayers
590+
this.olData,
595591
);
596592
}
597593

598594
newVis = this.olVis;
599595
} else {
600596
if (!this.svgVis) {
601-
this.svgVis = new SvgVisualization($('#visualization-placeholder > .visualization-target-svg').get(0));
597+
this.svgVis = new SvgVisualization(
598+
$('#visualization-placeholder > .visualization-target-svg').get(0),
599+
);
602600
}
603601

604602
newVis = this.svgVis;
@@ -621,10 +619,6 @@ class GisVisualizationController {
621619
this.olVis.dispose();
622620
}
623621
}
624-
625-
public setOpenLayersData (olData: any[]): void {
626-
openLayersData = olData;
627-
}
628622
}
629623

630624
declare global {
@@ -658,6 +652,8 @@ AJAX.registerOnload('table/gis_visualization.js', function () {
658652
// If we are in GIS visualization, initialize it
659653

660654
if ($('#gis_div').length > 0) {
661-
visualizationController = new GisVisualizationController();
655+
visualizationController = new GisVisualizationController(
656+
JSON.parse($('#visualization-placeholder').attr('data-ol-data'))
657+
);
662658
}
663659
});

‎resources/templates/gis_data_editor_form.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868

6969
<div class="mb-3">
7070
<label class="form-label" for="gis_data_textarea">{{ t('Output') }}</label>
71-
<textarea class="form-control" id="gis_data_textarea" rows="5">{{ result }}</textarea>
71+
<textarea class="form-control" id="gis_data_textarea" rows="5" style="resize: vertical;">{{ result }}</textarea>
7272
</div>
7373

7474
<div>

‎resources/templates/modals/gis_editor.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="modal fade" id="gisEditorModal" tabindex="-1" aria-labelledby="gisEditorModalLabel" aria-hidden="true">
1+
<div class="modal fade" id="gisEditorModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="gisEditorModalLabel" aria-hidden="true">
22
<div class="modal-dialog modal-dialog-scrollable modal-xl">
33
<div class="modal-content">
44
<div class="modal-header">

0 commit comments

Comments
 (0)