I am having trouble mapping Nebraska school districts in D3 (v4). (See bl.ock here.) I can map Nebraska counties no problem, but the same code modified for school districts--and pointing to a school district TopoJSON file--gives me a blank page.
Here's how I created the JSON, based on Mike Bostock's excellent instructions :
curl "https://www2.census.gov/geo/tiger/GENZ2017/shp/cb_2017_31_unsd_500k.zip" -o cb_2017_31_unsd_500k.zip
unzip -o cb_2017_31_unsd_500k.zip
shp2json cb_2017_31_unsd_500k.shp -o ne_district.json
ndjson-split "d.features" < ne_district.json > ne_district.ndjson
ndjson-map "d.id = d.properties.GEOID, d" < ne_district.ndjson > ne_district-id.ndjson
geo2topo -n districts=ne_district-id.ndjson > ne_district-id-topo.json
And here's my projection:
var projection = d3.geoConicConformal()
.parallels([40, 43])
.rotate([100, 0])
.scale(8000);
Thanks for your help and apologies in advance for anything important I left out!
The issue is you haven't finished setting your projection parameters. You have rotate the map, which is how you should center a conic projection along the x axis. But you haven't centered the map on the y axis, it is centered on the equator. You
For a conical projection, you can do this one of three ways:
Center the map on a central latitude : projection.center([0,y])
You don't need to use .center with an x value because the map is already centered on the x by rotation, rotation and centering are cumulative
Rotate the map to a central latitude and longitude: projection.rotate([-x,-y])
On a conical projection the rotation on the meridian does not warp the map (generally), we rotate by the negative as we move the earth under us. This option does slightly distort the map relative to the other options - this may be preferrable.
Use the projection translation to center the map
The easiest way is to translate the result while automatically scaling (though you can do this manually too) with projection.fitSize or projection.fitExtent. These methods modify projection.scale and projection.translate. As with centering with .center, you need to keep your rotation - otherwise you'll get an odd tilt to the map.
These methods set translate and scale to appropriate values so that your map area contains the desired features:
var featureCollection = topojson.feature(ne, ne.objects.districts);
projection.fitSize([width,height],featureCollection);
These methods must take objects, not arrays, so we use the featureCollection, not the features as an array
Both methods take an array specifying the size to stretch a provided geojson object over:
projection.fitSize([mapwidth,mapheight],geojsonObject)
projection.fitExtent([[left,top],[right,bottom]],geojsonObject)
Here's an updated gist using fitSize.
Related
I am using the viewer with the Edit2D library and am trying to convert the length between two x and y points into real measurements.
For example, after a shape is drawn using the polygon tool, I want to get the length of the first edge.
I get the drawn shape and the first two points on the event shown below, get 2 points, and get the distance between them. It seems they are in Autodesk Units or something. Is there an easy way to convert the units to feet or inches?
I have found
Edit2DExtension.defaultContext.unitHandler.fromDisplayUnits()
as well as
Edit2DExtension.defaultContext.unitHandler.toDisplayUnits()
and also
Autodesk.Viewing.Private.convertUnits().
I've tried all three, but am unsure how to use them and haven't found any good results with them yet.
There may be a way to do it through Edit2d but I haven't found a way yet and there is next to no documentation I can find on this library.
beforeEdit2DAction(event) {
console.log('After Shape has been drawn -> ', event);
let shape = event.action.shape;
let pointA = shape._loops[0][0]; // Value: {x: 21.393766403198242, y: 20.934386880096092}
let pointB = shape._loops[0][1]; // Value: {x: 25.082155227661133, y: 20.934386880096092}
// Distance between 2 points (Assuming Autodesk units)
let length = Autodesk.Edit2D.Math2D.distance2D(pointA, pointB); // 3.6883888244628906
// Need to convert to real world units (preferably ft or inches)
}
The real length is 29.5 FEET
Any ideas, or comments are welcome! Thanks
Edit: Trying Petr's suggestion here's what it returned:
That's an interested question. The "unit handler" keeps track of two types of units:
layer units (Edit2DExtension.defaultContext.unitHandler.config.layerUnits, can be inch for example)
display units (Edit2DExtension.defaultContext.unitHandler.config.displayUnits)
These two properties control how the actual lengths and areas are displayed. For example, the unit handler's toDisplayUnits method is implemented like so:
toDisplayUnits(fromUnits, value) {
this.updateConfig();
return Autodesk.Viewing.Private.convertUnits(fromUnits, this.config.displayUnits, this.config.scaleFactor, value);
}
With that, configuring fromUnits and displayUnits (and scale) properly should give you the real measurements you need.
When using ol3-cesium and the map is in 3d mode, calling map.getView().getZoom() returns undefined. This might affect setZoom as well.
I understand we are in a 3d world, so there are no z-levels as in the tiled maps. On the other hand, Google Maps calculates a z-equivalent when coming back grom 3d to 2d.
How can I convert from height to a z-equivalent? Any formula, taking into account the latitude and altitude, to get the z equivalent?
There's no easy formula to get a 2D "Z" value from 3D, because the 3D camera can be tilted, can see different levels of tiles in the foreground vs the background, etc.
For individual tiles however, there are specific known "Level" values from the imagery quadtree. You can see these in Cesium Inspector by clicking the little + next to the word Terrain on the right side, and then put a checkmark on Show tile coordinates. The coordinates shown include L, X, and Y, where L is the tile's level (0 being the most zoomed-out, higher numbers more zoomed in), and X and Y are 2D positions within the imagery layer.
I posted an answer on GIS SE that shows how to reach in and grab these tiles, the same way Cesium Inspector does, along with a number of caveats involved. You could potentially look for the highest-level visible tile, and use that as your "Z" value.
I know this is not accurate, but sharing in case this is of use to anyone.
I have moved to several altitudes in Google Maps, switching between the 2D and 3D maps, writing down the z or altitude shown in the address bar:
z altitude (metres)
----- -----------------
3 10311040
4 5932713
5 2966357
6 1483178
7 741589
8.6 243624
11.35 36310
13.85 6410
15.26 2411
17.01 717
18.27 214
19.6 119
20.77 50
21 44
With the above correspondences, I have approximated the following function:
function altitudeToZoom(altitude) {
var A = 40487.57;
var B = 0.00007096758;
var C = 91610.74;
var D = -40467.74;
return D+(A-D)/(1+Math.pow(altitude/C, B));
}
Based on your formula, the reverse conversion should be:
altitude = C * Math.pow((A-D)/(zoomLevel-D) -1, 1/B);
I am trying to define a rotated pole projection in Proj4JS where the north pole is now is 48N and 176E. I haven't been able to find any other example of rotated-poles in Proj4JS so I have tried to convert one I found for PROJ.4.
proj4.defs('myProjection', '+proj=ob_tran +o_proj=latlon +o_lon_p=-176 +o_lat_p=48 +lon_0=0 +a=1 +to_meter=0.0174532925199');
That line of JS is run without problem, but when I try to use that projection
proj4('EPSG:4326', 'myProjection', [175, -41]);
I get this error
uncaught exception: myProjection
I've tried replacing the projection definition the one for WGS84 and it works fine, so I believe my use of the function is correct, it's the parameters in that string that I am unsure of.
I think what you want is the so-called Azimuthal Equidistant projection. It's the best choice for measuring true distances radiating away from a center point.
If this is what you're looking for, I asked a similar question a while back over on GIS.SE, and for the coordinate you provided (48N, 176E), you could declare the Proj4js projection definition as so..
Proj4js.defs["CUSTOM:10001"] = "+proj=aeqd +lat_0=48.0 +lon_0=176.0 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs";
I hope it helps.
I'm playing with body animation in AS3. I did a body with all parts (excluding fingers) and make a XML with the "skeleton". The XML got the instances of each part and the place of the articulation of the next part. I make it work with cardinal coordinates (x,y) and the body moves when I rotate a part and recalculate all the links again (each part in each articulation).
However, this will demand some calculation each little modification of the body, so now I'm optimizing it. As for de design x,y is easier, so when the body instance is created, the class re-build the XML converting coordinates to Polar system (r,t), like this ("Quadro" is the node with coordinates):
dx = Quadro.#x;
dy = Quadro.#y;
Quadro.#r = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2));
Quadro.#t = (dy>0)? Math.asin(dx/Quadro.#r) : Math.acos(dy/Quadro.#r);
I did some changes to make it work but at list one quadrant is always wrong! In this case, the upper left is wrong. The neck and the head should be in this place and they are in upper right (mirrored).
Any tips for a right conversion in AS3?
Try to use this:
Quadro.#t=Math.atan2(dy,dx);
From Wikipedia:
The Cartesian coordinates x and y can be converted to polar
coordinates r and φ with r ≥ 0 and φ in the interval (−π, π] by:
I have a question about the GOOGLE MAP API. If you have more than two data that share similar address, how do you show the Pins Drop on the same address?
Example
You have data such as the following:
Name=>Ray | Address=>Melon Park, California, USA ;
Name=>John | Address=>Melon Park, California, USA ;
Name=>Steve | Address=>Melon Park, California, USA
You want to display 3 Pins Drop for the similar address on Google Map.
The post linked above has some good advice. Your options are really:
Offset the markers slightly, so instead of displaying them all on the same they are all on really close to each other. Just add add or subtract small delta to each of them.
Use different icons for each location. If you know the maximum number of markers that could overlap (like 4?) at the same location, you could make your own rotated icons, so instead of pointing "down" in the typical teardrop shape they could point left, right, or up.
Handle the data overlap in your infowindow / UI.
Adding small delta will work like this (this script is written in PHP):
$random_num_lat = .00065 * mt_rand(1, 10); // delta to the lat value added
$random_num_lng = .00065 * mt_rand(1, 10); // delta to the lon value added
$lat=$row['lat']+$random_num_lat;
$lon=$row['lon']+$random_num_lng;
//now in loop it will be three `enter code here`marker display seperate to each other
while ($row = mysql_fetch_array($query)) {
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc1');\n");
}
I achieved this using a "spiderfier" to "spiderfy".
There is a GoogleMaps v3 Spidifier available here (demo).
Leaflet.js can also load GoogleMaps v3 and has a beautiful clustering spidifier available here (demo).
Note: Following is a more of hack than a solution:
Write an algorithm that checks for repeated coordinates in array.
When a duplicate is found, add a small value such as 0.000001 to the found coordinates.
Note that the smaller the value the more you have zoom in to see the difference.