Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm overlaying a leaflet map with features of geojson, fetched with d3 and added as SVG elements to the DOM. My geojson contains too many features to render at once, so my goal is to add to the map only features, that intersect current cursor location, so I can have a smooth hover effect. I can get current map coordinates of the cursor from a mousemove event, but I have to determine if current coordinates intersect a feature in geojson and exactly what feature is intersected. Thinking further, maybe I have to make a small buffer, so it's easier for the user to hit the closest feature. Is there a fast way in leaflet or d3 (or even pure javascript) to get the intersected feature from geojson feature collection?

share|improve this question
add comment

2 Answers

So you retrieve all geoJSON features at once? Perhaps you can utilize a quad tree (especially since you're using D3):

http://bl.ocks.org/mbostock/4343214

Also, perhaps this is outside the scope of your project, but have you looked at Polymaps and/or vector tiles from Tilestache?

http://polymaps.org/ex/tiles.html

http://tilestache.org/doc/TileStache.Vector.html

share|improve this answer
    
Thanks. I've used vector tiles with TileStache. Currently, I could get best performance with adding a utfgrid layer with feature id's in hitgrid. So when I hit a pixel with a specific feature in a grid, I add a corresponding feature from geojson to a map. But this way adds an overhead of loading utfgrid tiles (plus some server overhead to render this tiles). So I thought I can do this check directly in javascript without loading utfgrid tiles. quadtree looks interesting, but does it mean I have to cycle through it somehow on each mousemove to get a needed feature? –  nextstopsun Jun 26 '13 at 17:18
    
Well, the way I'd conceptualize it is to attach a function to run after each mousemove - e.g., set up your quadtree, find where your cursor is, apply some sort of bounding box around said cursor, and display only those features that are located within the bounding box. A quadtree should ensure that you aren't testing every feature on every mousemove.If you have a ton of features, maybe you can generate a list of centroids/points to use with the quadtree? That way, you only fetch + render a feature when its centroid is found to be in the bounding box? –  sir_kitty Jun 26 '13 at 17:32
    
I guess using points (or centroids) is risky, because a cursor can cross a line somewhere between vertexes and the function won't find it. –  nextstopsun Jun 26 '13 at 17:37
    
Ah, true. Maybe a large buffer around the cursor can mitigate that? Interesting problem, sorry I can't be of much help. Perhaps you can generate bounding boxes around each feature and then use svg mouseover effects (i.e. hover) to register which features to render? –  sir_kitty Jun 26 '13 at 17:43
add comment

May be you can use kd-tree library. You can specify the no of closest features you want and display them. Here is an example.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.