1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-27 10:30:28 +00:00

Add startPosition and layersPanel attributes to geomap widget

This commit is contained in:
jeremy@jermolene.com 2023-05-31 09:37:44 +01:00
parent d785fa4c03
commit 463f0cd983
3 changed files with 36 additions and 13 deletions

View File

@ -21,6 +21,7 @@ This demo requires that the API keys needed to access external services be obtai
<$geomap <$geomap
state=<<qualify "$:/state/demo-map">> state=<<qualify "$:/state/demo-map">>
startPosition="bounds"
> >
<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoBaseLayer]]"> <$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoBaseLayer]]">
<$geobaselayer title=<<currentTiddler>>/> <$geobaselayer title=<<currentTiddler>>/>

View File

@ -10,6 +10,8 @@ The following attributes are supported:
|!Attribute |!Description | |!Attribute |!Description |
|''state'' |The title of a state tiddler used to track the state of the map in the `zoom`, `long` and `lat` fields | |''state'' |The title of a state tiddler used to track the state of the map in the `zoom`, `long` and `lat` fields |
|''startPosition'' |Optional starting position for the map: "world" (the default) shows the entire map, "bounds" zooms to the bounds of the loaded layes |
|''layersPanel'' |Optional starting status for the layers panel: "collapsed" (the default) causes the layers panel to initially be shown collapsed, "open" causes the layers panel to initially be shown opened |
If no base layers are defined by `<$geobaselayer>` widgets within the `<$geomap>` widget then all the available base layers will be loaded by the equivalent of the following code: If no base layers are defined by `<$geobaselayer>` widgets within the `<$geomap>` widget then all the available base layers will be loaded by the equivalent of the following code:

View File

@ -99,12 +99,10 @@ GeomapWidget.prototype.refreshMap = function() {
self.map.removeLayer(layer.layer); self.map.removeLayer(layer.layer);
}); });
this.renderedLayers = []; // Array of {name:,layer:} this.renderedLayers = []; // Array of {name:,layer:}
$tw.utils.each(this.renderedBaseLayers,function(baseLayer) {
self.map.removeLayer(baseLayer.layer);
});
this.renderedBaseLayers = []; // Array of {name:,layer:} this.renderedBaseLayers = []; // Array of {name:,layer:}
// Restore the saved map position and zoom level
if(!this.setMapView()) {
// If there was no saved position then default to showing the whole world
this.map.fitWorld();
}
// Create default icon // Create default icon
var iconProportions = 365/560, var iconProportions = 365/560,
iconHeight = 50; iconHeight = 50;
@ -219,8 +217,29 @@ GeomapWidget.prototype.refreshMap = function() {
overlayLayers[layer.name] = layer.layer; overlayLayers[layer.name] = layer.layer;
}); });
this.layerControl = $tw.Leaflet.control.layers(baseLayers,overlayLayers,{ this.layerControl = $tw.Leaflet.control.layers(baseLayers,overlayLayers,{
collapsed: true collapsed: this.geomapLayersPanel !== "open"
}).addTo(this.map); }).addTo(this.map);
// Restore the saved map position and zoom level
if(!this.setMapView()) {
// If there was no saved position then look at the startPosition attribute
switch(this.geomapStartPosition) {
case "bounds":
var bounds = null;
$tw.utils.each(this.renderedLayers,function(layer) {
var featureBounds = layer.layer.getBounds();
if(bounds) {
bounds.extend(featureBounds);
} else {
bounds = featureBounds;
}
});
this.map.fitBounds(bounds);
break;
default:
this.map.fitWorld();
break;
}
}
}; };
/* /*
@ -240,6 +259,8 @@ Compute the internal state of the widget
*/ */
GeomapWidget.prototype.execute = function() { GeomapWidget.prototype.execute = function() {
this.geomapStateTitle = this.getAttribute("state"); this.geomapStateTitle = this.getAttribute("state");
this.geomapStartPosition = this.getAttribute("startPosition");
this.geomapLayersPanel = this.getAttribute("layersPanel");
}; };
/* /*
@ -247,17 +268,16 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
*/ */
GeomapWidget.prototype.refresh = function(changedTiddlers) { GeomapWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes(); var changedAttributes = this.computeAttributes();
// Set zoom and position if the state tiddler has changed
if(changedAttributes.state) {
this.geomapStateTitle = this.getAttribute("state");
}
if(changedAttributes.state || changedTiddlers[this.geomapStateTitle]) {
this.setMapView();
}
// Refresh child nodes, and rerender map if there have been any changes // Refresh child nodes, and rerender map if there have been any changes
var result = this.contentRoot.refresh(changedTiddlers); var result = this.contentRoot.refresh(changedTiddlers);
if(result) { if(result) {
this.refreshMap(); this.refreshMap();
} else {
// If we're not doing a full refresh, reset the position if the state tiddler has changed
if(changedAttributes.state || changedTiddlers[this.geomapStateTitle]) {
this.geomapStateTitle = this.getAttribute("state");
this.setMapView();
}
} }
return result; return result;
}; };