How to zoom to fit in WP7 Bing Maps control using LocationCollection? - windows-phone-7

How can I zoom the Microsoft.Phone.Controls.Maps.Map control to the correct zoom level on Windows Phone 7?
I have a LocationCollection of GeoCoordinates and I calculated the Center myself, but now how do I calculate the correct zoom level to fit the LocationCollection?
P.S. Is there an out of the box method to calculate the center of GeoCoordinates so I don't have to calculate it myself?
EDIT:
I've found another fine solution: http://4mkmobile.com/2010/09/quick-tip-position-a-map-based-on-a-collection-of-pushpins/
map.SetView(LocationRect.CreateLocationRect(points));

You can use the following code to calculate the LocationRect that bounds a set of points, and then pass the LocationRect to the SetView() method on the map control:
var bounds = new LocationRect(
points.Max((p) => p.Latitude),
points.Min((p) => p.Longitude),
points.Min((p) => p.Latitude),
points.Max((p) => p.Longitude));
map.SetView(bounds);
The map control handles animating from the current position to the new location.
NOTE: You'll need a using statement for System.Linq to get the Min and Max methods.

Derek has already given the answer so you should accept his, I offer an alternative code for cases where there many points. This approach only iterates the points collection once instead 4 times however it isn't as asthetically pleasing.
double north, west, south, west;
north = south = points[0].Latitude;
west = east = points[0].Longitude;
foreach (var p in points.Skip(1))
{
if (north < p.Latitude) north = p.Latitude;
if (west > p.Longitude) west = p.Longitude;
if (south > p.Latitude) south = p.Latitude;
if (east < p.Longitude) east = p.Longitude
}
map.SetView(new LocationRect(north, west, south, east));

As suggested by the other answers I use SetView with a LocationRect.
However I found that it always produces to low zoom level, since only integer values was used. If for instance the perfect zoom level would be 5.5, you would get 5.0. To get a proper fit I calculate a new zoom level from TargetZoomLeveland TargetBoundingRectangle:
viewRect = LocationRect.CreateLocationRect(coordinates);
map.SetView(viewRect);
double scale = map.TargetBoundingRectangle.Height/viewRect.Height;
map.ZoomLevel = map.TargetZoomLevel + Math.Log(scale, 2);
This example sets the zoom level to fit viewRect's height on the screen.

Related

How to invert the sprite position in GameMaker Studio 2 code?

I put this code for my sprite to reverse the position according to its direction but it reverses the position and it looks skinny. How to fix this?
key_left = keyboard_check(ord("A"))
key_right = keyboard_check(ord("D"))
key_jump = keyboard_check(vk_space)
var move = key_right - key_left
hspd = move * spd;
vspd = vspd + grv;
if (hspd != 0) {
image_xscale = sign(hspd)
}
The code's correct. You must have resized the sprite in the room editor, delete the instance and put it in again and don't resize it, it should work.
Also if you need it a little bigger you can (If 1.5 doesn't satisfy you, feel free to use a bigger number).
image_xscale = sign(hspd) * 1.5;
The code seem to be correct, have you tried setting the origin point at the center? By default the origin point is on the top-left, and once it's set at the center of your sprite, it won't change positions when turning around.
You can set the origin point at the sprite window.

How does osmnx.plot_graph determine which edges get which colors?

I've followed this tutorial:
https://towardsdatascience.com/creating-beautiful-maps-with-python-6e1aae54c55c
and the one this above was derived from.
They pass a list of edge colors to the plot_graph function
like so:
fig, ax = ox.plot_graph(gdf, node_size=0, bbox = (north, south, east, west),figsize=(height, width),
dpi = 96,bgcolor = bgcolor,
save = False, edge_color=roadColors,
edge_linewidth=roadWidths, edge_alpha=1)
I don't think they're assigned the way that the tutorial indicates.
On the github I found get_edge_colors_by_attr which seems to take attributes into account.
How are the colors assigned?
Specifically I am asking because I'd like to plot "highways" in different colors based on their openstreetmap tag.
How does osmnx.plot_graph determine which edges get which colors?
You can see how it does it here. Essentially, it either applies a single color to all edges or, if you passed it a list of colors, it assigns the first color in the list to the first edge in the graph, the second to the second, the third to the third, and so on.
Specifically I am asking because I'd like to plot "highways" in different colors based on their openstreetmap tag.
You can create a list of colors based on the edges' highway attribute values:
import osmnx as ox
G = ox.graph_from_place('Piedmont, California, USA', network_type='drive')
# assign colors to edges based on "highway" value
hwy_color = {'residential': 'gray',
'secondary': 'r',
'tertiary': 'y',
'tertiary_link': 'b',
'unclassified': 'm'}
edges = ox.graph_to_gdfs(G, nodes=False)['highway']
ec = edges.replace(hwy_color)
# plot graph using these colors
fig, ax = ox.plot_graph(G, edge_color=ec)
Also, you mentioned get_edge_colors_by_attr but note that per the docs the attribute must be numeric.

How to center a choropleth?

I use dc choropleth graph and want to make it responsive, so the width and height adjusts automatically to the container. My map is from western europe, so roughly square.
var width=450;
var projection = d3.geoEquirectangular()
.center([37,47])
.scale(width*1.3);
var geojson=topojson.feature(europe,europe.objects.countries);
var graph = dc.geoChoroplethChart(dom)
.height(width)
.width(width)
.projection(projection)
.overlayGeoJson(geojson.features,"countries",function(d){return d.id})
...
It works fine when I am at a fixed size (450), but if I adjust it, the map isn't centered anymore and I have to manually adjust.
I tried the fitExtend function, but can't get it work properly either.
Ideally, I'd like to apply a transform to truncate a bit of the map on the east (remove part of turkey) and on the west and adjust the size so it centers properly on western europe (50°7′2.23″N 9°14′51.97″E for my manual adjustments).
Any idea how to do that?

MKMapView is misaligned to its region property

I want to display a certain map region in MKMapView but when I put a rectangular overlay on the map with the very same parameters it is displayed misaligned vertically. It looks good enough close to the equator but the misalignment is increasing with the latitude and the span.
This is for a mac app, but it should be the same for iOS.
This is my relevant code:
MKCoordinateRegion mapRegion = MKCoordinateRegionMake(CLLocationCoordinate2DMake(latCenter, lonCenter), MKCoordinateSpanMake(mapWidthY, mapWidthX));
self.radarMap.region = mapRegion;
CLLocationCoordinate2D coordinates[4];
coordinates[0] = CLLocationCoordinate2DMake(latCenter+mapWidthY/2, lonCenter+mapWidthX/2);
coordinates[1] = CLLocationCoordinate2DMake(latCenter+mapWidthY/2, lonCenter-mapWidthX/2);
coordinates[2] = CLLocationCoordinate2DMake(latCenter-mapWidthY/2, lonCenter-mapWidthX/2);
coordinates[3] = CLLocationCoordinate2DMake(latCenter-mapWidthY/2, lonCenter+mapWidthX/2);
self.boundaryOverlay = [MKPolygon polygonWithCoordinates:coordinates count:4];
[self.radarMap addOverlay:self.boundaryOverlay];
It shows this: (Notice the blue rect overlay is moved up so the upper region is not displayed):
Instead of something like this: (I'm aware of that it is displayed in aspect fill):
When you set the region property of an MKMapView object, MapKit adjusts the value of the region property so that it matches the actual region that's visible. That means that the actual value of region isn't going to be exactly what you assigned to it. So instead of creating the polygon using the region that you assigned to the map, you should get the updated value of region from the MKMapView object and use that to create the polygon.
MKCoordinateRegion mapRegion = MKCoordinateRegionMake(CLLocationCoordinate2DMake(latCenter, lonCenter), MKCoordinateSpanMake(mapWidthY, mapWidthX));
self.radarMap.region = mapRegion;
CLLocationCoordinate2D coordinates[4];
// Get the actual region that MapKit is using
MKCoordinateRegion actualMapRegion = self.radarMap.region;
CLLocationDegrees actualLatCenter = actualMapRegion.center.latitude;
CLLocationDegrees actualLonCenter = actualMapRegion.center.longitude;
CLLocationDegrees actualLatSpan = actualMapRegion.span.latitudeDelta;
CLLocationDegrees actualLonSpan = actualMapRegion.span.longitudeDelta;
// And use that to create the polygon
coordinates[0] = CLLocationCoordinate2DMake(actualLatCenter+ actualLatSpan/2, actualLonCenter+ actualLonSpan/2);
coordinates[1] = CLLocationCoordinate2DMake(actualLatCenter+ actualLatSpan/2, actualLonCenter-actualLonSpan/2);
coordinates[2] = CLLocationCoordinate2DMake(actualLatCenter-actualLatSpan/2, actualLonCenter-actualLonSpan/2);
coordinates[3] = CLLocationCoordinate2DMake(actualLatCenter-actualLatSpan/2, actualLonCenter+ actualLonSpan/2);
self.boundaryOverlay = [MKPolygon polygonWithCoordinates:coordinates count:4];
[self.radarMap addOverlay:self.boundaryOverlay];
I was curious about the increasing misalignment that you were seeing as you moved north. It occurred to me that you were probably using a fixed ratio for the mapWidthX and mapWidthY. MapKit uses a projection that is non-conformal. One consequence of that is that the map gets stretched in the North-South direction, with more stretching the farther you get from the equator.
If you create your region using a ratio that's correct for the equator, it will be incorrect as you move toward the poles. MKMapView will take the region you give it and display something close to it. But the farther you get from the equator, the more of an adjustment it needs to make. And the bigger the difference between the region you give it and the actual region it uses.

Zoom toward mouse (eg. Google maps)

I've written a home-brew view_port class for a 2D strategy game. The panning (with arrow keys) and zooming (with mouse wheel) work fine, but I'd like the view to also home towards wherever the cursor is placed, as in Google Maps or Supreme Commander
I'll spare you the specifics of how the zoom is implemented and even what language I'm using: this is all irrelevant. What's important is the zoom function, which modifies the rectangle structure (x,y,w,h) that represents the view. So far the code looks like this:
void zoom(float delta, float mouse_x, float mouse_y)
{
zoom += delta;
view.w = window.w/zoom;
view.h = window.h/zoom;
// view.x = ???
// view.y = ???
}
Before somebody suggests it, the following will not work:
view.x = mouse_x - view.w/2;
view.y = mouse_y - view.h/2;
This picture illustrates why, as I attempt to zoom towards the smiley face:
As you can see when the object underneath the mouse is placed in the centre of the screen it stops being under the mouse, so we stop zooming towards it!
If you've got a head for maths (you'll need one) any help on this would be most appreciated!
I managed to figure out the solution, thanks to a lot of head-scratching a lot of little picture: I'll post the algorithm here in case anybody else needs it.
Vect2f mouse_true(mouse_position.x/zoom + view.x, mouse_position.y/zoom + view.y);
Vect2f mouse_relative(window_size.x/mouse_pos.x, window_size.y/mouse_pos.y);
view.x = mouse_true.x - view.w/mouse_relative.x;
view.y = mouse_true.y - view.h/mouse_relative.y;
This ensures that objects placed under the mouse stay under the mouse. You can check out the code over on github, and I also made a showcase demo for youtube.
In my concept there is a camera and a screen.
The camera is the moving part. The screen is the scalable part.
I made an example script including a live demo.
The problem is reduced to only one dimension in order to keep it simple.
https://www.khanacademy.org/cs/cam-positioning/4772921545326592
var a = (mouse.x + camera.x) / zoom;
// now increase the zoom e.g.: like that:
zoom = zoom + 1;
var newPosition = a * zoom - mouse.x;
camera.setX(newPosition);
screen.setWidth(originalWidth * zoom);
For a 2D example you can simply add the same code for the height and y positions.

Resources