Skip to content

Commit

Permalink
fix spatial form field (#43)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fostermh
fostermh authored Oct 19, 2023
1 parent d746f76 commit fe99574
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 129 deletions.
12 changes: 9 additions & 3 deletions ckanext/spatial/public/css/spatial_query.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.module-narrow #dataset-map-container {
.module-narrow #dataset-map-container, .module-narrow #dataset-map-form-container {
height: 200px;
}
.module-content #dataset-map-container {
.module-content #dataset-map-container, .module-content #dataset-map-form-container {
height: 250px;
}
#dataset-map-attribution {
Expand Down Expand Up @@ -37,13 +37,19 @@
#dataset-map-edit-buttons {
display: none;
}
.leaflet-draw-toolbar a.leaflet-draw-draw-rectangle {

#dataset-map-container .leaflet-draw-toolbar a.leaflet-draw-draw-rectangle {
background-image: url("../img/pencil.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 12px 12px;
border-radius: 4px;
}

#dataset-map-form-container .leaflet-draw-toolbar a.leaflet-draw-draw-rectangle {
background-position: -60px -1px;
}

.leaflet-draw-toolbar-top ~ .leaflet-draw-actions li{
display: none;
}
Expand Down
206 changes: 80 additions & 126 deletions ckanext/spatial/public/js/spatial_form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ this.ckan.module('spatial-form', function (jQuery, _) {

this.ids = this.el.data('input_ids');
this.extent = this.el.data('extent');
this.map_id = 'dataset-map-container';
this.map_id = 'dataset-map-form-container';

jQuery.proxyAll(this, /_on/);
this.el.ready(this._onReady);
Expand All @@ -95,145 +95,101 @@ this.ckan.module('spatial-form', function (jQuery, _) {

_onReady: function(){

var map, backgroundLayer, oldExtent, drawnItems, ckanIcon;
var ckanIcon = L.Icon.extend({options: this.options.styles.point});

var _self = this; // used in event handlers as this points to dom object in that case

/* Initialise basic map */
map = ckan.commonLeafletMap(
this.map_id,
this.options.map_config,
{attributionControl: false}
);
map.fitBounds(this.options.default_extent);

/* Add an empty layer for newly drawn items */
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);


/* Add GeoJSON layers for any GeoJSON resources of the dataset */
//var existingLayers = {};
var url = window.location.href.split('dataset/edit/');
$.ajax({
url: url[0] + 'api/3/action/package_show',
data: {id : url[1]},
dataType: 'jsonp',
success: function(data) {
//console.log('Got resources: ' + JSON.stringify(data.result.resources));
var r = data.result.resources;
for (i in r){
if (r[i].format == 'GeoJSON'){
//console.log('Found GeoJSON for ' + r[i].name + ' with id ' + r[i].id);

/* Option 1: Load GeoJSON using leaflet.ajax */
//var geojsonLayer = L.geoJson.ajax(r[id].url);
//geojsonLayer.addTo(map);

/* Option 2: Load GeoJSON using JQuery */
$.getJSON(r[i].url, function(data) {
var gj = L.geoJson(data, {
pointToLayer: function (feature, latLng) {
return new L.Marker(latLng, {icon: new ckanIcon})
},
onEachFeature: function(feature, layer) {
var body = '';
var row = '<tr><th>{key}</th><td>{value}</td></tr>';
var table = '<table class="table table-striped table-bordered table-condensed" style="width:300px;"><tbody>{body}</tbody></table>';
jQuery.each(feature.properties, function(key, value){
if (value != null && typeof value === 'object') {
value = JSON.stringify(value);
}
body += L.Util.template(row, {key: key, value: value});
});
var popupContent = L.Util.template(table, {body: body});
layer.bindPopup(popupContent);
}
});
gj.addTo(map);
//existingLayers[r[i].name] = gj;
}); // end getJSON
} // end if
} // end for
//L.control.layers(existingLayers).addTo(map); // or similar
}
});

/* Add existing extent or new layer */
if (this.extent) {
/* update = show existing polygon */
oldExtent = L.geoJson(this.extent, {
style: this.options.styles.default_,
pointToLayer: function (feature, latLng) {
return new L.Marker(latLng, {icon: new ckanIcon})
}
});
oldExtent.addTo(map);
map.fitBounds(oldExtent.getBounds());
}
var map, backgroundLayer, oldExtent, drawnItems, ckanIcon;
var ckanIcon = L.Icon.extend({ options: this.options.styles.point });

var _self = this; // used in event handlers as this points to dom object in that case

/* Leaflet.draw: add drawing controls for drawnItems */
var drawControl = new L.Control.Draw({
draw: {
polyline: false,
circle: false,
marker: false,
rectangle: {repeatMode: false}

},
edit: { featureGroup: drawnItems,
edit: false
}
/* Initialise basic map */
map = ckan.commonLeafletMap(
this.map_id,
this.options.map_config,
{ attributionControl: false }
);
map.fitBounds(this.options.default_extent);

/* Add an empty layer for newly drawn items */
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);


/* Add existing extent or new layer */
if (this.extent) {
L.geoJson(this.extent, {
style: this.options.styles.default_,
pointToLayer: function (feature, latLng) {
return new L.Marker(latLng, { icon: new ckanIcon })
}
}).eachLayer(function (layer) {
drawnItems.addLayer(layer);
});
map.addControl(drawControl);

map.fitBounds(drawnItems.getBounds());
}

/* Aggregate all features in a FeatureGroup into one MultiPolygon,
* update inputid with that Multipolygon's geometry
*/
var featureGroupToInput = function(fg, input){
var gj = drawnItems.toGeoJSON().features;
console.log(gj)
var polyarray = [];
$.each(gj, function(index, value){
if(value.geometry.type == "FeatureCollection" && value.geometry.features[0].geometry.type == "MultiPolygon"){
polyarray = polyarray.concat(value.geometry.features[0].geometry.coordinates)
}else if (value.geometry.type == "Polygon") {
polyarray.push(value.geometry.coordinates);
}
});

if(polyarray){
mp = {"type": "MultiPolygon", "coordinates": polyarray};
}else{
mp = ''
/* Leaflet.draw: add drawing controls for drawnItems */
map.addControl(new L.Control.Draw({
position: "topright",
draw: {
polyline: false,
polygon: true,
circle: false,
marker: true,
circlemarker: false,
rectangle: true

},
edit: {
featureGroup: drawnItems
}

})
);


/* populate form fields from gemoetry drawn on map */
var featureGroupToInput = function(fg, input){
var gj = drawnItems.toGeoJSON().features;
var geom = null;
$.each(gj, function (index, value) {
if (value.geometry.type == "FeatureCollection") {
geom = value.geometry.features[0].geometry
} else {
geom = value.geometry
}
});

if (geom) {
mp = { "type": geom.type, "coordinates": geom.coordinates };
$('#' + input).val(JSON.stringify(mp));
} else {
$('#' + input).val('');
}

var bounds = drawnItems.getBounds();
if(bounds._southWest && bounds._northEast){
$("#" + _self.ids['bbox-north']).val(bounds.getNorth());
$("#" + _self.ids['bbox-south']).val(bounds.getSouth());
$("#" + _self.ids['bbox-east']).val(bounds.getEast());
$("#" + _self.ids['bbox-west']).val(bounds.getWest());
}
var bounds = drawnItems.getBounds();
if (bounds._southWest && bounds._northEast) {
$("#" + _self.ids['bbox-north']).val(+bounds.getNorth().toFixed(7));
$("#" + _self.ids['bbox-south']).val(+bounds.getSouth().toFixed(7));
$("#" + _self.ids['bbox-east']).val(+bounds.getEast().toFixed(7));
$("#" + _self.ids['bbox-west']).val(+bounds.getWest().toFixed(7));
}
};

// Handle the update map action
$('#update_spatial_form_map').on('click', function() {
drawnItems.clearLayers();
var jsonStr = $('#' + _self.ids['spatial']).val();
if(jsonStr){
var gj = L.geoJson(JSON.parse(jsonStr));
var bounds = gj.getBounds();
drawnItems.addLayer(gj);
L.geoJson(JSON.parse(jsonStr)).eachLayer(function (layer) {
drawnItems.addLayer(layer);
});
var bounds = drawnItems.getBounds();
if(bounds._southWest && bounds._northEast){
$("#" + _self.ids['bbox-north']).val(bounds.getNorth());
$("#" + _self.ids['bbox-south']).val(bounds.getSouth());
$("#" + _self.ids['bbox-east']).val(bounds.getEast());
$("#" + _self.ids['bbox-west']).val(bounds.getWest());
$("#" + _self.ids['bbox-north']).val(+bounds.getNorth().toFixed(7));
$("#" + _self.ids['bbox-south']).val(+bounds.getSouth().toFixed(7));
$("#" + _self.ids['bbox-east']).val(+bounds.getEast().toFixed(7));
$("#" + _self.ids['bbox-west']).val(+bounds.getWest().toFixed(7));
}
}
});
Expand All @@ -252,9 +208,7 @@ this.ckan.module('spatial-form', function (jQuery, _) {
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
drawnItems.addLayer(layer);
// To only add the latest drawn element to input #field-spatial:
//$("#field-spatial")[0].value = JSON.stringify(e.layer.toGeoJSON().geometry);
drawnItems.addLayer(layer);
featureGroupToInput(drawnItems, _self.ids['spatial']);
});

Expand Down

0 comments on commit fe99574

Please sign in to comment.