Databases
StackOverflow2013
Postsdbo
POd3 Display Only Line Strings within Map Bounds
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POd3 Display Only Line Strings within Map Bounds
    primarykey
    data
    text
    <p>I'm trying to plot running routes on OpenStreetMap tiles in d3.js, which is not a problem when I'm displaying &lt; 1,000 at a time, but I have over 100,000 routes. Since not all the routes are in the same geo-location, I want to only show the routes say in the metropolitan area of London at one time. </p> <p>The problem that I'm running into is filtering before displaying on the map, i.e. finding the bounding box of the route given the defined projection and path; finding the route centroid; and then seeing if the projection contains the route centroid. I've been searching through the d3.js documentation but haven't been able to get this to work; does anyone have any suggestions on how best to tackle this?</p> <pre><code>// Sample projection and tile code for London var projection = d3.geo.mercator() .center([0.1275, 51.5072]) .scale((1 &lt;&lt; 20) / 2 / Math.PI) .translate([960 / 2, 500 / 2]); var tiler = d3.geo.tile() .size([960, 500]); var tilerData = tiler .scale(projection.scale() * 2 * Math.PI) .translate(projection([0, 0])); var path = d3.geo.path() .projection(projection); // Data read in from CSV file - [id, date, encoded_poly] d3.csv('data/gpsdata.csv', function (d) { // Is there a way to filter out the routes that are displayed on the visible map? var mapBounds = tilerData.getBounds(); var filteredData = d.filter(function(e){ var x = {type: "LineString", coordinates: decode(e.encPoly)}; return mapBounds.contains(path(x).getBounds().getCenter()); }); </code></pre> <p>Any help would be greatly appreciated...thanks!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. UShotshotiguana
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COAre you looking for [`path.centroid()`](https://github.com/mbostock/d3/wiki/Geo-Paths#wiki-path_centroid)?
      singulars
      1. POd3 Display Only Line Strings within Map Bounds
      1. USLars Kotthoff
    2. CO@LarsKotthoff that works great for the route centroid...would you recommend using something like svg.getBBox() where svg is the container for the map or something else related to the path element for checking to see if the map contains the route centroid?
      singulars
      1. POd3 Display Only Line Strings within Map Bounds
      1. UShotshotiguana
    3. COYou don't even need to do that if you're setting width and height of the SVG yourself. Just compare the centroid coordinates to that size (modulo any translations you're doing).
      singulars
      1. POd3 Display Only Line Strings within Map Bounds
      1. USLars Kotthoff
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload