Space between GroundOverlays using Google Map Android API v2 - openstreetmap

I have created an off-line map with Google Map Android API v2 (i.e. osmdroid is not an option) using Openstreetmap tiles as GroundOverlays with one minor problem: at zoom level greater than 14 some of the tiles have a 1-3 pixel space between them. Other tiles line up perfectly. It seems random which ones do and do not have spaces between them.
I download the tiles using JTileDownloader, then I fetch the required tiles (using the technique described here) that I downloaded and placed in the device filesystem, then I get the tiles' LatLngBounds, and then I lay them down in a loop as:
groundOverlay = mMap.addGroundOverlay(new GroundOverlayOptions()
.image(BitmapDescriptorFactory.fromBitmap(mBitmapImage))
.positionFromBounds(tileBoundsArray[i])
.transparency((float)0));
I have verified that the lat and long of the tiles should line up. I also verified that all the bitmaps are the same size. I have also tried this particular tileset using the UrlTileProvider and it works fine, so it's nothing wrong with the tiles. I have been struggling with this for days and would appreciate any suggestions. I have found absolutely nothing anywhere else addressing this issue. Thanks!

I finally found the answer to this. I had to specify the width of the map tile in meters at the tile's latitude (I used the center of the tile). Google maps uses a Mercator projection, which means that the width of the map depends upon the latitude. You specifiy the width using GoundOverlay.setDimensions(width). This page gives an explanation on how to calculate the width.

Related

LeafletJS offline support

Am using leafletJS for showing offline maps using openstreet tiles and its working fine. We need to use atlast tool to generate tiles and able to do that. But how to handle case that if generated tiles are not matching with latitude and longitude which are coming from services then in leaflet is showing markers but background map tiles are not loading (I know it wont match so its not showing :) ) but is there any way / approach which I can figure out that latitude and longitude provided are not in range or in sync of map tiles generated for offline so that I can show meaningful message to end users and accordingly user / admin will take actions?
I can imagine three approaches to this:
If you know which tiles you are generating (often times you are generating tiles in a bounding-box) you could hardcode that bounding-box and check if the given coordinate is inside or outside before adding the marker or jumping to the coordinate.
This question (leaflet - tile loading - error event) details a way to detect when Leaflet can't load a tile (for whatever reason: tile does not exist, no connection, ...). Maybe you could inform the user using that tileerror event.
You could convert the coordinate into its Slippy-Tilename equivalent and try to manually request that tile from your server / storage (for example using the Fetch-API). The conversion process is detailed (with code!) on the Openstreetmap-Wiki (https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29)

Map tiles in Leaflet

I want to create georeferenced map tiles from raster (jpg map of small area) and display in Leaflet. MapTiler seems to be a prefect solution for my problem, but free version doesn't allow set zoom range, aslo has a watermark.
Is there any free/opensource solution with same funcionality? Im woking on non-profit project, so dont have any budget.
See https://stackoverflow.com/a/13641838/4768502 for a pointer to gdal2tiles.
You can also use other software such as GeoServer, MapServer or MapProxy to serve tiles based on an image or some vector data.

Custom tiles yet geo accurate in LeafletJS

I'm interested in custom map tiles, and using advice from here and here, I've experimented with exactly that. For a prototype I did a very geeky map of the Star Trek Federation, with episode links moving you around the planets/systems etc.
While that's all fine and dandy for fantastical locations, I'd also be interested in using heavily stylised renditions of real world locations, yet still using real lat,lng points. So, for example, a bespoke, yet mostly geo accurate, map of London, chopped into tiles, but if you passed in lat,lng coords for Camden Tube (51.53911 -0.14235), you would move to that location.
Any ideas how you configure LeafletJS to do this, without going the route of using Google Maps with custom tiles?
If I understand correctly, you have 2 different applications:
Your Star Trek map, for which you are satisfied.
Stylised map of real world, for which you would like real lat,lng coordinates to be accurate?
Then your question is how to create your custom tiles, so that Leaflet shows the stylised view of London when passed the real London coordinates?
In that case, it would be probably just a matter of correctly numbering your tiles. Or the reverse, modifying the tile numbers used by Leaflet to build the tiles URL. For the latter solution, see Specifying Lat & Long for Leaflet TileLayer
I'm not quite sure what you mean by "mostly geo accurate". It sounds like you probably just want to generate your own map tiles from some kind of source like OpenStreetMap. In that case, TileMill (although kind of obsolete) is probably the easiest way to go.
There are basically three parts:
Generate some map tiles (eg TileMill)
Host them (eg TileStream)
Point Leaflet at them

Weird issue in bing maps display

I am displaying bing maps in a metro app. I am drawing both pushpins and polylines on the map but they get drawn on opposite sides of the map which looks very weird. Please look at the following image:
The line and image is being drawn at opposite sides of the map.
Could someone please suggest a solution of this problem.
Can I somehow restrict my view to display each country only once?
So I think one of my other answer might help you out here.
How to show the full map and prevent scrolling in Bing Maps API
You can constrain the map to a certain zoomlevel range and lat/long range, so that you don't see the same coordinates twice. Let me know if you need any further details on how to do this.

Anyway to overcome the 5 custom icon urls per request?

From the Google Image API documentation
Static Maps service allows up to five unique custom icons per request. Note that each of these unique icons may be used multiple times within the static map
I have more than 5 custom icons per request, maybe up to 40.
Is there a way to overcome this? Is it possible to use sprites in static maps to overcome this?
Here's how I got around this:
You probably already know how, and depending on your source it's going to be different anyway, but collect up all your map data. Required bits are going to be: center point, zoom, map type, and output image size. I am going to assume sensor (if the application has access to GPS) is false. Also you are going to need all of your marker information which will include the icon you are going to use, and the geo coordinates of them.
I POSTed this all to the CF page that is going to make all the magic happen.
Map your first 5 points as normal. Get the results as a .png
Map your next 5 points but add "style=feature:all|visibility:off" to the query string, get result as a .png. This will give you a png with a transparent background but will have all of your marker icons on it. It will be the same size as your initial map, and the markers will be placed correctly withing that rectangle.
Watermark that image on top of your initial map. NOTE: this step is probably going to vary the most depending on your language of choice and what image manipulation features it offers.
Repeat 4 and 5 until you have all of your markers.
Write out you image with all of the markers now on it.
Serve up a link to that file instead of using the normal google link.
I have a more detailed explanation here with some code example in ColdFusion.