Skip to content

Commit

Permalink
Bug fix
Browse files Browse the repository at this point in the history
  • Loading branch information
emher committed Jul 24, 2020
1 parent 660feb9 commit 79339ca
Show file tree
Hide file tree
Showing 5 changed files with 36 additions and 51 deletions.
2 changes: 2 additions & 0 deletions dash_leaflet/_imports_.py
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
from .Circle import Circle
from .CircleMarker import CircleMarker
from .Colorbar import Colorbar
from .DivMarker import DivMarker
from .DivOverlay import DivOverlay
from .GeoJSON import GeoJSON
from .GeoTIFFOverlay import GeoTIFFOverlay
Expand Down Expand Up @@ -31,6 +32,7 @@
"Circle",
"CircleMarker",
"Colorbar",
"DivMarker",
"DivOverlay",
"GeoJSON",
"GeoTIFFOverlay",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dash_leaflet",
"version": "0.0.21rc4",
"version": "0.0.21rc6",
"description": "Leaflet component for Dash",
"main": "build/index.js",
"scripts": {
Expand Down
7 changes: 4 additions & 3 deletions src/demo/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,10 @@ class App extends Component {
}

render() {
let positions = [[56,10], [56,10], [56,10], [56,10], [56,10]];
const pos = [37.8, 50]; // (-37.8, 175.3)
let positions = []; //[[56,10], [56,10], [56,10], [56,10], [56,10]];
for(let i =0; i < 100; i++){
positions.push([56,11])
positions.push(pos)
}
let features = positions.map((pos) => ({"type": "Feature", "geometry": {"type": "Point", "coordinates": [pos[1], pos[0]]}}));
let geojson = {"type": "FeatureCollection", "features": features};
Expand All @@ -46,7 +47,7 @@ class App extends Component {
return (
<div>
<Map
setProps={this.setProps} zoom={8} center={[56, 10]}
setProps={this.setProps} zoom={8} center={pos}
// setProps={this.setProps} zoom={8} center={[-37, 175]}
{...this.state}>
<TileLayer/>
Expand Down
40 changes: 13 additions & 27 deletions src/lib/LeafletSuperCluster.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,7 @@ class LeafletSuperCluster extends MapLayer {
super.componentDidMount();
// Mount component.
const {map} = this.props.leaflet;
const {superclusterOptions, format, url, data, spiderfyOnMaxZoom, spiderfyOptions} = this.props;
// const {zoomToBoundsOnClick, onclick, onhover} = this.props;
const {zoomToBoundsOnClick} = this.props;
const {superclusterOptions, format, url, data, spiderfyOnMaxZoom, spiderfyOptions, zoomToBoundsOnClick} = this.props;
const {leafletElement, _defaultSpiderfy} = this;
let index, to_spiderfy;

Expand Down Expand Up @@ -72,20 +70,8 @@ class LeafletSuperCluster extends MapLayer {
map.flyTo(center, expansionZoom);
}
}
// // Propagate click.
// onclick(e)
}

// function handleMouseover(e) {
// // Propagate hover.
// onhover(e);
// }
//
// function handleMouseout(e) {
// // Propagate hover.
// onhover(null);
// }

// Fetch data.
const asyncfunc = async () => {
let geojson = data;
Expand All @@ -100,8 +86,10 @@ class LeafletSuperCluster extends MapLayer {
}
}
// Unless the data are geojson, do base64 decoding.
if (format != "geojson") {
geojson = toByteArray(geojson)
else{
if (format != "geojson") {
geojson = toByteArray(geojson)
}
}
// Do any data transformations needed to arrive at geojson data. TODO: Might work only in node?
if (format == "geobuf") {
Expand All @@ -117,22 +105,20 @@ class LeafletSuperCluster extends MapLayer {
feature["properties"]["cluster"] = false
}
return feature
})
});
// Create index.
index = new Supercluster(superclusterOptions)
index = new Supercluster(superclusterOptions);
index.load(geojson.features);
// Do initial update.
update();
// Bind update on map move (this is where the "magic" happens).
map.on('moveend', update);
}
};

// Load data.
asyncfunc();
// Bind click event(s).
this.leafletElement.on('click', handleClick);
// this.leafletElement.on('mouseover', handleMouseover);
// this.leafletElement.on('mouseout', handleMouseout);
}

componentWillUnmount() {
Expand All @@ -148,7 +134,6 @@ class LeafletSuperCluster extends MapLayer {

createLeafletElement(props) {
const dash = props.setProps;
console.log(props)
return new GeoJSON(null, {
pointToLayer: (x, y) => this._defaultCreateClusterIcon(x, y, dash),
style: () => props.spiderfyOptions.spiderLegPolylineOptions
Expand Down Expand Up @@ -263,10 +248,11 @@ class LeafletSuperCluster extends MapLayer {
}

const cluster = clusters.filter(item => item.properties.cluster_id === expanded_cluster)[0];
let center = map.latLngToLayerPoint(cluster.geometry.coordinates);
const lnglat = cluster.geometry.coordinates;
let center = map.latLngToLayerPoint([lnglat[1], lnglat[0]]);
const leaves = index.getLeaves(expanded_cluster, 1000, 0);
// Generate positions.
let positions, leaf, leg, newPos, line;
let positions, leaf, leg, newPos;
if (leaves.length >= _circleSpiralSwitchover) {
positions = _generatePointsSpiral(leaves.length, center);
} else {
Expand All @@ -278,10 +264,10 @@ class LeafletSuperCluster extends MapLayer {
for (let i = 0; i < leaves.length; i++) {
leaf = leaves[i];
newPos = map.layerPointToLatLng(positions[i]);
leg = [cluster.geometry.coordinates, [newPos.lat, newPos.lng]];
leg = [cluster.geometry.coordinates, [newPos.lng, newPos.lat]];
legs.push({"type": "Feature", "geometry": {"type": "LineString", "coordinates": leg}});
// Update the marker position.
leaf.geometry.coordinates = [newPos.lat, newPos.lng];
leaf.geometry.coordinates = [newPos.lng, newPos.lat];
}
// Remove expanded cluster.
let spiderfied = clusters.filter(item => item.properties.cluster_id !== expanded_cluster);
Expand Down
36 changes: 16 additions & 20 deletions tmp11.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,28 @@
import dash_html_components as html
import dash_leaflet as dl
import dash_leaflet.express as dlx
import geobuf
import base64
from numpy import random

# Create some simple markers.
markers = [dict(lat=56 + random.rand(), lon=10 + random.rand()) for i in range(10000)]
# Create a few customized markers.
markers += [
dict(lat=55, lon=9, tooltip="I am a tooltip"), # marker with tooltip
dict(lat=55, lon=10, popup="I am a popup"), # marker with popup
dict(lat=55, lon=11, markerOptions=dict(opacity=0.5)), # marker with options
dict(lat=55, lon=12, markerOptions=dict(icon=dict(iconUrl="assets/icon_plane.png"))), # marker with custom icon
markers = [
dict(lat=-37.8, lon=174.95, tooltip="I am a tooltip"), # marker with tooltip
dict(lat=-37.8, lon=175.00, popup="I am a popup"), # marker with popup
dict(lat=-37.8, lon=175.05, markerOptions=dict(opacity=0.5)), # marker with options
dict(lat=-37.8, lon=175.10, markerOptions=dict(icon=dict(iconUrl="assets/icon_plane.png"))), # marker with custom icon
]
# Convert markers to geobuf (smaller payload than raw geojson).
geojson = dlx.markers_to_geojson(markers)
pbf = base64.b64encode(geobuf.encode(geojson)).decode()
# Add a few markers at the same location to illustrate spiderfy.
markers += [dict(lat=-37.8, lon=175.7)]*100

# Create example app.
app = dash.Dash()
app.layout = html.Div([
dl.Map([dl.TileLayer(), dl.SuperCluster(data=pbf, format="geobuf", options={"radius": 100, "maxZoom": 18})],
center=(56, 10), zoom=7, style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})
dl.Map([
dl.TileLayer(),
# Create super cluter from in-memory geojson (less performant).
dlx.supercluster(markers),
# Create super cluster from hosted asset (most performant).
dl.SuperCluster(url='assets/leaflet_50k.pbf', format="geobuf", superclusterOptions={"radius": 100}),
], center=(-37.8, 175.3), zoom=11, style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})
])

@app.server.errorhandler(404)
def page_not_found(error):
output = "Hest"

if __name__ == '__main__':
app.run_server(debug=False)
app.run_server(port=7001)

0 comments on commit 79339ca

Please sign in to comment.