midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add working clustering!

Browse source
This commit is contained in:
pietervdvn 2021-01-04 18:55:10 +01:00
parent da7d1287f0
commit db66689705
12 changed files with 142 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
Customizations/JSON/LayoutConfig.ts
View file

@ -24,6 +24,8 @@ export default class LayoutConfig {
public readonly roamingRenderings: TagRenderingConfig[];
public readonly defaultBackgroundId?: string;
public readonly layers: LayerConfig[];
public readonly clustering: { };
public readonly hideFromOverview: boolean;
public readonly enableUserBadge: boolean;
public readonly enableShareScreen: boolean;
@ -32,12 +34,12 @@ export default class LayoutConfig {
public readonly enableLayers: boolean;
public readonly enableSearch: boolean;
public readonly enableGeolocation: boolean;
public readonly enableBackgroundLayerSelection: boolean;
public readonly enableBackgroundLayerSelection: boolean;
public readonly customCss?: string;
constructor(json: LayoutConfigJson, context?:string) {
constructor(json: LayoutConfigJson, context?: string) {
this.id = json.id;
context = (context ?? "")+"."+this.id;
context = (context ?? "") + "." + this.id;
this.maintainer = json.maintainer;
this.changesetmessage = json.changesetmessage;
this.version = json.version;
@ -47,16 +49,16 @@ export default class LayoutConfig {
} else {
this.language = json.language;
}
if(json.title === undefined){
throw "Title not defined in "+this.id;
if (json.title === undefined) {
throw "Title not defined in " + this.id;
}
if(json.description === undefined){
throw "Description not defined in "+this.id;
if (json.description === undefined) {
throw "Description not defined in " + this.id;
}
this.title = new Translation(json.title, context+".title");
this.description = new Translation(json.description, context+".description");
this.shortDescription = json.shortDescription === undefined ? this.description.FirstSentence() : new Translation(json.shortDescription, context+".shortdescription");
this.descriptionTail = json.descriptionTail === undefined ? new Translation({"*":""}, context) : new Translation(json.descriptionTail, context+".descriptionTail");
this.title = new Translation(json.title, context + ".title");
this.description = new Translation(json.description, context + ".description");
this.shortDescription = json.shortDescription === undefined ? this.description.FirstSentence() : new Translation(json.shortDescription, context + ".shortdescription");
this.descriptionTail = json.descriptionTail === undefined ? new Translation({"*": ""}, context) : new Translation(json.descriptionTail, context + ".descriptionTail");
this.icon = json.icon;
this.socialImage = json.socialImage;
this.startZoom = json.startZoom;
@ -80,8 +82,20 @@ export default class LayoutConfig {
} else {
throw "Unkown fixed layer " + layer;
}
return new LayerConfig(layer, this.roamingRenderings,`${this.id}.layers[${i}]`);
return new LayerConfig(layer, this.roamingRenderings, `${this.id}.layers[${i}]`);
});
this.clustering = json.clustering ?? false;
if(this.clustering){
for (const layer of this.layers) {
if(layer.wayHandling !== LayerConfig.WAYHANDLING_CENTER_ONLY){
throw "In order to allow clustering, every layer must be set to CENTER_ONLY";
}
}
}
this.hideFromOverview = json.hideFromOverview ?? false;
this.enableUserBadge = json.enableUserBadge ?? true;

7
Customizations/JSON/LayoutConfigJson.ts
View file

@ -123,6 +123,13 @@ export interface LayoutConfigJson {
*/
layers: (LayerConfigJson | string)[],
/**
* If defined, data will be clustered.
*/
clustering: {
maxZoom?: number
},
/**
* The URL of a custom CSS stylesheet to modify the layout
*/

3
InitUiElements.ts
View file

@ -358,7 +358,8 @@ export class InitUiElements {
State.state.availableBackgroundLayers, State.state.layoutToUse.map((layout: LayoutConfig) => layout.defaultBackgroundId));
const attr = new Attribution(State.state.locationControl, State.state.osmConnection.userDetails, State.state.layoutToUse, State.state.leafletMap);
const attr = new Attribution(State.state.locationControl, State.state.osmConnection.userDetails, State.state.layoutToUse,
State.state.leafletMap);
const bm = new Basemap("leafletDiv",
State.state.locationControl,
State.state.backgroundLayer,

3
Logic/FeatureSource/FilteringFeatureSource.ts
View file

@ -40,14 +40,11 @@ export default class FilteringFeatureSource implements FeatureSource {
for (const layer of layers) {
layerDict[layer.layerDef.id] = layer;
layer.isDisplayed.addCallback(() => {
console.log("Updating due to layer change")
update()})
}
upstream.features.addCallback(() => {
console.log("Updating due to upstream change")
update()});
location.map(l => l.zoom).addCallback(() => {
console.log("UPdating due to zoom level change")
update();});

5
UI/BigComponents/Attribution.ts
View file

@ -8,18 +8,19 @@ import Constants from "../../Models/Constants";
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
import Loc from "../../Models/Loc";
import LeafletMap from "../../Models/LeafletMap";
import * as L from "leaflet"
export default class Attribution extends UIElement {
private readonly _location: UIEventSource<Loc>;
private readonly _layoutToUse: UIEventSource<LayoutConfig>;
private readonly _userDetails: UIEventSource<UserDetails>;
private readonly _leafletMap: UIEventSource<LeafletMap>;
private readonly _leafletMap: UIEventSource<L.Map>;
constructor(location: UIEventSource<Loc>,
userDetails: UIEventSource<UserDetails>,
layoutToUse: UIEventSource<LayoutConfig>,
leafletMap: UIEventSource<LeafletMap>) {
leafletMap: UIEventSource<L.Map>) {
super(location);
this._layoutToUse = layoutToUse;
this.ListenTo(layoutToUse);

24
UI/ShowDataLayer.ts
View file

@ -3,12 +3,15 @@
*/
import {UIEventSource} from "../Logic/UIEventSource";
import * as L from "leaflet"
import "leaflet.markercluster"
import LayerConfig from "../Customizations/JSON/LayerConfig";
import State from "../State";
import LazyElement from "./Base/LazyElement";
import Hash from "../Logic/Web/Hash";
import {GeoOperations} from "../Logic/GeoOperations";
import FeatureInfoBox from "./Popup/FeatureInfoBox";
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
export default class ShowDataLayer {
@ -17,15 +20,14 @@ export default class ShowDataLayer {
constructor(features: UIEventSource<{ feature: any, freshness: Date }[]>,
leafletMap: UIEventSource<L.Map>,
layers: { layerDef: LayerConfig, isDisplayed: UIEventSource<boolean> }[]) {
layoutToUse: LayoutConfig) {
this._leafletMap = leafletMap;
const self = this;
let oldGeoLayer: L.Layer = undefined;
this._layerDict = {};
for (const layer of layers) {
this._layerDict[layer.layerDef.id] = layer.layerDef;
for (const layer of layoutToUse.layers) {
this._layerDict[layer.id] = layer;
}
function update() {
@ -38,7 +40,13 @@ export default class ShowDataLayer {
const mp = leafletMap.data;
const feats = features.data.map(ff => ff.feature);
const geoLayer = self.CreateGeojsonLayer(feats);
let geoLayer = self.CreateGeojsonLayer(feats)
const cl = window["L"];
const cluster = cl.markerClusterGroup();
cluster.addLayer(geoLayer);
geoLayer = cluster;
if (oldGeoLayer) {
mp.removeLayer(oldGeoLayer);
}
@ -65,7 +73,7 @@ export default class ShowDataLayer {
// Click handling is done in the next step
const tagSource = State.state.allElements.getEventSourceFor(feature);
const layer : LayerConfig = this._layerDict[feature._matching_layer_id];
const layer: LayerConfig = this._layerDict[feature._matching_layer_id];
const style = layer.GenerateLeafletStyle(tagSource, !(layer.title === undefined && (layer.tagRenderings ?? []).length === 0));
return L.marker(latLng, {
@ -80,8 +88,8 @@ export default class ShowDataLayer {
});
}
private postProcessFeature(feature, leafletLayer: L.Layer){
const layer : LayerConfig = this._layerDict[feature._matching_layer_id];
private postProcessFeature(feature, leafletLayer: L.Layer) {
const layer: LayerConfig = this._layerDict[feature._matching_layer_id];
if (layer.title === undefined && (layer.tagRenderings ?? []).length === 0) {
// No popup action defined -> Don't do anything
return;

1
UI/SpecialVisualizations.ts
View file

@ -171,7 +171,6 @@ export default class SpecialVisualizations {
}],
constr: (state: State,tags, args) => {
const tgs = tags.data;
console.log("Args[0]", args[0])
let subject = tgs.name ?? "";
if (args[0] !== undefined && args[0] !== "") {
subject = args[0];

2
index.html
View file

@ -16,6 +16,8 @@
<link rel="stylesheet" href="./css/imageUploadFlow.css"/>
<link rel="stylesheet" href="./css/fullscreenmessagebox.css"/>
<link href="css/ReviewElement.css" rel="stylesheet"/>
<link rel="stylesheet" href="vendor/MarkerCluster.css"/>
<link rel="stylesheet" href="vendor/MarkerCluster.Default.css"/>
<!-- $$$CUSTOM-CSS -->
<link rel="manifest" href="./manifest.manifest">
<link rel="icon" href="assets/svg/add.svg" sizes="any" type="image/svg+xml">

8
package-lock.json generated
View file

@ -3581,6 +3581,14 @@
"@types/geojson": "*"
}
},
"@types/leaflet-markercluster": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@types/leaflet-markercluster/-/leaflet-markercluster-1.0.3.tgz",
"integrity": "sha1-ZBUb5FP2SQ6HUVAEgt65YQZOeCw=",
"requires": {
"@types/leaflet": "*"
}
},
"@types/leaflet-providers": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@types/leaflet-providers/-/leaflet-providers-1.2.0.tgz",

1
package.json
View file

@ -29,6 +29,7 @@
"author": "pietervdvn",
"license": "GPL",
"dependencies": {
"@types/leaflet-markercluster": "^1.0.3",
"@types/leaflet-providers": "^1.2.0",
"@types/leaflet.markercluster": "^1.4.3",
"country-language": "^0.1.7",

60
vendor/MarkerCluster.Default.css vendored Normal file
View file

@ -0,0 +1,60 @@
.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}
/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
background-color: rgb(181, 226, 140);
}
.leaflet-oldie .marker-cluster-small div {
background-color: rgb(110, 204, 57);
}
.leaflet-oldie .marker-cluster-medium {
background-color: rgb(241, 211, 87);
}
.leaflet-oldie .marker-cluster-medium div {
background-color: rgb(240, 194, 12);
}
.leaflet-oldie .marker-cluster-large {
background-color: rgb(253, 156, 115);
}
.leaflet-oldie .marker-cluster-large div {
background-color: rgb(241, 128, 23);
}
.marker-cluster {
background-clip: padding-box;
border-radius: 20px;
}
.marker-cluster div {
width: 30px;
height: 30px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
border-radius: 15px;
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
line-height: 30px;
}

14
vendor/MarkerCluster.css vendored Normal file
View file

@ -0,0 +1,14 @@
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.leaflet-cluster-spider-leg {
/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}