Center map between two points WinRT - windows-runtime

im trying to center the windows phone map between two points, adjusting center and zoom to make that points visible at the same time.
Im Android and IOS there are functions to do it, as example this is how to do it in Android:
LatLngBounds.Builder builder = new LatLngBounds.Builder();
builder.include(myPos.getPosition());
builder.include(defaultPos.getPosition());
mapa.animateCamera(CameraUpdateFactory.newLatLngBounds(builder.build(), 50));
How can i do the same in WinRT?
Thanks in advance.

If you are targeting Windows Phone 8.1 instead of WinRT (Windows 8/8.1) then you can do the following:
var geoboundingBox = new Windows.Devices.Geolocation.GeoboundingBox(
new BasicGeoposition() { Latitude = 40, Longitude = -90 },
new BasicGeoposition() { Latitude = 45, Longitude = -100 });
map.TrySetViewAsync(new Geopoint(geoboundingBox.Center));

For the Bing Maps WinRT control you can do this in two different ways. The first is to create a LocationRect from the two points. This will create a bounding box for your locations. You can either set the map view to this LocationRect using the SetView method on the map which will center and zoom to these locations, or you can use the Center property of this LocationRect to set the view of the map such that it is centered on these two locations, without zooming into the map. Something like this should work:
var bounds = new LocationRect(new Location(40,-90), new Location(45,-100));
map.SetView(bounds.Center);
Another method requires a bit more calculation but a good option to know if you come across other map controls that don't have an easy solution like the first one I mentioned. This method consists of calculating the center coordinate between the two locations. I have a blog post on how to do this from a vey old version of Bing Maps here: http://rbrundritt.wordpress.com/2008/10/14/calculating-the-midpoint-of-a-line-segment/ The logic can be easily migrated to other programming languages.
It sounds like you are new to developing with Bing Maps in WinRT. I recommend checking out my free ebook on how to create location intelligent Windows Store apps. It goes into a lot of detail on how to create great apps using the Bing Maps control. You can download a copy of it here: http://rbrundritt.wordpress.com/my-book/

Related

Google Maps Tile URL for HYBRID mapType tiles?

I have found a basic URL structure for regular map tiles:
https://mts1.google.com/vt/lyrs=m#186112443&hl=x-local&src=app&x=1325&y=3143&z=13&s=Galile
What would be the URL structure to grab HYBRID map tiles from Google?
I don't know why I can't find this information; it seems like it should be easy to find.
Am I missing something simple?
.
I have been messing with the lyrs parameter, and I think that may be part of it. When pasting the above URL in a browser, Ive tried lyrs=r, lyrs=h,lyrs=t and they give different tiles.
The closest I have come now is trying lyrs=s. It results in a Satellite tile being returned; but I do not know what I should put in for a HYBRID result.
Maybe I am going about this all wrong.
For anyone who wants to save some time while looking for specific tile types:
h = roads only
m = standard roadmap
p = terrain
r = somehow altered roadmap
s = satellite only
t = terrain only
y = hybrid
You need an instance from the google map js class and an anonymous function then you can set the map object to give hybrid tiles:How to get your image URL tiles? (google maps). Or maybe it's lyrs=y:http://www.neongeo.com/wiki/doku.php?id=map_servers.
TRY: http://mt1.google.com/vt/lyrs=y&x=1325&y=3143&z=13
Hybrid Maps URL:
http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga
The truth is: there is no URL specifically that holds both satellite and street info like you see in google maps hybrid. You have to combine them. Here's an example:
https://github.com/SnakeO/mapbox-with-google-maps-hybrid-tiles

Showing Google Map in j2me

String url = "http://maps.google.com/maps/api/staticmap";url
+= "?zoom=13&size=" + width + "x" + height;url
+= "&maptype=roadmap";url
+= "&markers=color:red|label:A|"
+ lat
+ ","
+ lon; url
+= "&sensor=true";
My first attempt was to get a static map with my center location and my zoom level and it worked but when I'm adding markers to the URL I'm getting the same image but no markers.
I'm doing exactly the same from the Google Map API Doc but i cant figure out whats wrong.
Is there any other way to show map in j2me application??
There are fundamentally two ways to show maps in a Java ME application. Your method of making an HTTP request to a map server is best suited to situations where all you need is one single map image. Since each map update will require more network traffic. If you need a series of images, add custom markers or you want to dynamically update the map, you would be much better off using a dedicated library which uses a tile server, caches your map tiles and overlays objects on top of it. The reasoning behind this is described here
The dynamic mapping library I would recommend is the HERE Maps API for Java ME, as you can tell from the name, the API is specifically designed to work with Java ME devices.
The API is currently bundled with the Nokia Asha SDK 1.0, but despite this, it is in reality a separate independent plugin and has been designed to work with the full range of standard Java ME devices.
A similar Stack Overflow question answered here describes how to download it.
The code to display a marker on the map can be found in the Developer's Guide
map.setState(new MapDisplayState(new GeoCoordinate(51.477, 0.0, 0), 15));
MapStandardMarker marker = mapFactory.createStandardMarker(
new GeoCoordinate(51.477, 0.0, 0), 10, "Hi!",
MapStandardMarker.BALLOON);
marker.setColor(0xFFFF0000); // Color is red
map.addMapObject(marker);
As a notice of affiliation, I should mention in passing that I do work for Nokia.

How to render multiple markers at the exact same coordinates in Google Maps API?

I have multiple addresses on the same street with the same house number, but with different apartment numbers. Google Maps Geocoding Service (v2) doesn't go down to apartment level accuracy for many addresses and just returned me the exact same geocode coordinates for them.
So the problem is that when I go to display them, only one pushpin shows up no matter how much you zoom in. And my question is; what is a good way to render multiple pushpins at the exact same house address? I've seen how craigslist.org creates a spiral out of the pushpins on their new map feature, but was wondering what my other options are as that seems like a workaround at best.
Ideas?
I solved this using Google's dynamic chart icons which allow you to put a number in the pin identifying that there are multiple markers on this exact some point. Basically, you call their "chart" url with some query params and they give you back your numbered icon which you can then place/set in the existing marker you have on that spot.
var markerImage = createMarkerImage(numDuplicates + 1);
existingMarker.setIcon(markerImage);
function createMarkerImage(text)
{
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + text + "|FF8985|000000",
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
return pinImage;
}
NOTE: This solution uses a deprecated google API with no end date posted.
"Important: The Image Charts portion of Google Chart Tools has been
officially deprecated as of April 20, 2012. It will continue to work
as per our deprecation policy."
UPDATE:
I have moved away from the above solution since it's deprecated (and has performance impact for many markers) in leiu of the same end effect of a numbered marker, but using a path of coordinates defining polygon in the shape of a marker along with a .png for the marker shadow. Only reason I used my own custom marker is because I needed to create individual markers, each with a unique color (and possibly an embedded number), which the vanilla markers don't support.

any technology to preview high definition photo, can zoom in and out like google maps

I have a batch of high definition images, and I want to make use of technologies like google maps to view the images, user can use zoom pan to zoom in and out quickly without downloading the whole big picture file(they only need to download the viewport of the big image).
How can I do this?
Thanks.
Bin
If the image in question is actually a map or something that can be reasonably overlaid onto a map, use MapTiler (http://www.maptiler.org/) to split it into tiles, then use code like this to display the tiles:
var lat=37.767569;
var lon=-122.392223;
var initialZoom=17;
var tileDir = 'tiles_dir';
var mapTypeId = 'Your Custom Map';
var mapType = new google.maps.ImageMapType({
tileSize: new google.maps.Size(256,256),
getTileUrl: function(coord,zoom) {
return "img/"+tileDir+"/"+zoom+"/"+coord.x+"/"+coord.y+".png";
}
});
var map = new google.maps.Map(document.getElementById("map_canvas"),
{center:new google.maps.LatLng(lat,lon),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:initialZoom,
mapTypeControl:false});
map.overlayMapTypes.insertAt(0, mapType);
map.mapTypes.set(mapTypeId, styledMap);
map.setMapTypeId(mapTypeId);
Note that Map Tiler sets the image name to something Google Maps API v2 specific. If you are using v3 (and you should!) you'll have to take each file name (e.g., 2001.png), and move it to a file name that's good for v3. To do that on Linux or a Mac, cd to the tiles directory and run this script (note that the script assumes you are in the tiles dir!):
#!/bin/bash
tiles=`ls -d */*/*`
for thisPath in $tiles
do
thisFile=${thisPath#*/*/}
oldY=${thisFile%.png}
zoomX=${thisPath%/*}
zoom=${thisPath%/*/*}
newY=$(((1<<zoom) - oldY - 1))
mv ${zoomX}/${oldY}.png ${zoomX}/${newY}.png
done
Now, even if your image is not actually a map or something that would be reasonably overlaid on a map, hopefully this gives you some ideas of where to look and what to poke around with if you want to leverage Google Maps. (There may be tools out there to let you easily build this type of functionality without Google Maps, but if so, I have no experience with them.)
There's Google Maps, of course. I'm totally serious: GMaps API allows you to create custom map types, you'll need to give it a way to show the "tiles" (parts of your image) at a given zoom level.
The most work I'd assume would be in creating the "tiles" from your image at various zoom levels (split the image into smaller rectangles), but I suppose that can be automated. The UI, dragging, zooming and whatnot is then handled by the JavaScript script of Google Maps.
(this works, I've made a boardgame with such custom tiles, using Google Maps as the underlying framework for showing it.)
I've just found this library, which is quite slick: http://polymaps.org/

Marking streets in Google Maps

I want to create an overlay on top of Google Maps that displays different streets in different colors.
In the Google Maps API it is possible to create markers and polygons that cover certain areas.
Is there a way to somehow mark different streets?
It sounds to me like you are interested in showing some application specific coloring for your Google maps display (rather than traffic maps).
If so , then you should check out custom overlays. You can create your own transparent background overlay tiles (with your colored streets), match them up with the Google maps tiles and then overlay them on the map. You can find a description of this stuff in the Maps API reference - Overlays.
I have actually been interested in trying this out, and this question might be a good excuse. I'll let you know how I go.
Edit: Ok, I tried this and it was pretty straightforward. You just need to grab the tiles images when the google maps page load (for the area you would like to overlay). Make sure you keep track of the origional urls, because these have the x,y coordinates that you will need to write your tile overlay method.
Edit the tiles with your colored roads then upload them to your web server. Add the following code to use your overlay on the regular map:
var myCopyright = new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
0,'©2007 Google'));
// Create the tile layer overlay and
// implement the three abstract methods
var tilelayer = new GTileLayer(myCopyright);
// properties of the tile I based my tile on
// v=w2.97&hl=en&x=38598&s=&y=49259&z=17&s=Galil.png
tilelayer.getTileUrl = function(point, zoom) {
if (zoom == 17 && point.x == 38598 && point.y == 49259)
return "../pics/times_square.png";
};
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.75740, -73.98590), 17);
map.addOverlay(myTileLayer)
This code overlays my Thing eats NY tile:
at x = 38598 and y = 49259 at zoom level 17.
It is possible to create markers and polygons in the Google Maps API. You need to create GPolygon and/or GPolyline objects
Have a look to these tutorials
And if you want to obtain the coordinate (latitude, longitude) of certain streets, you may have a look to the source code of this page
I am not sure to fully understand your question: do you want to mark some given streets ?
in that case, a quick-and-dirty way could be to get the coordinates of all the addresses of the street and build a GPolygon according to them...
Have you concidered using OpenStreeMaps?
Try digging into the code used to show the traffic overlay on the normal Google Maps site.
Edit: I just looked at the code, and it appears that even Google decided it was easier to implement this by just generating the traffic lines on the server and pulling them down as transparent PNG overlays.
I just found this link, and I think this could interest you. It is a JavaScript package that provides functionality for displaying multiple routes on Google Maps.
Is it what you were looking for ??