Map tiles in Leaflet - 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.

Related

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

MapBox MB Tile vs Vector Tile

I am a bit confused about Tiles in MapBox. As I understood, a tile is a little piece of map, as in a jigsaw puzzle.
MBTiles are images, but they are connected to a database to read data & let interactions be possible. So if I move the mouse, I can show details of the layers under the cursor.
Vector Tiles store all the data in vectors, and they are just used for a fast rendering of the image. Interaction with such data is not possible.
Am I wrong?
Now, I see that there is the tool TileMill for MBTiles, and MapBox Studio Classic for Vector Tiles. I guess they are for different purposes; the first for interactive maps, the latter for fast rendering.
So.... why is TileMill not supported anymore, in favor of MBStudio?
Is it possible to make interactive maps with MBStudio as well?
Thank you
This is a great question!
mbtile is a filetype that can contain either raster or vector tiles. Think about it like an Adobe Illustrator .ai file -- it can either contain vector or raster data. Both raster tiles and vector tiles can be in mbtile format.
With TileMill, your vector data (shapefile, CSV, etc.) was combined with your CartoCSS style and passed to Mapnik to generate a bunch of tiled images. You could then store your tiles and feed them to a web map via a tile server. With Mapbox Studio Classic, you are converting your data to vector tiles and creating a CartoCSS style to style the data, but the image tiles aren't created until the map is requested via the browser. Ultimately, the output on the map is the same -- a grid of raster tiles.
The interactivity you created in TileMill with raster tiles is happening via a UTFGrid. This is an invisible raster layer that sits beneath the image tiles and adds interactivity to certain locations. The interactivity is not actually connected to any individual features at all -- it's just at the same location as your features. This is also possible in Mapbox Studio Classic, as the output in the map will also be a grid of raster tiles. You can read more about how to do this in Mapbox Studio Classic in the style quickstart guide.
So to answer your question, the move to Mapbox Studio Classic was to take advantage of vector tiles. They are a lot smaller than raster image tiles, and they can be styled on the fly, so, for example, you don't have to store two separate sets of images to accommodate retina screens. It also means you can have multiple styles applied to the same vector data on the fly, which means you don't have to regenerate a whole set of images for every style or every small change.
If the Metadata table contains a record format=pbf then the mbtiles is a vector tiles and not raster. mbtiles SQLite database can be a container for vector tiles which have in the Tiles table and tile_data blob field PBF -Protocol Buffers - protobuf ( https://github.com/google/protobuf – language neutral platform neutral mechasism for serializing structured data) Developed by Google. Tools like MapBox Studio build vector tiles from GIS Vector Data and databases

Space between GroundOverlays using Google Map Android API v2

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.

How to convert shapefile to tile based file

I am developing a Map based iPhone application where I have to draw a map of any specific region depending upon the current location of that device.
Client is supplying me the .shapefile consisting of all the co-ordinates and data to draw the map.
We can store the shape file on the server and i think to draw the map on device with the data presented on .shapefile I need the tiles with different zoom level. So on the server side I have to convert the .shapefile into tile based file.
But I don't know how to do that conversion.
Can anyone please guide me?
Thanks in advance.
Ritz
Its a lot of work.
First, shapefiles only define the geometry - you need to decide what the features are going to look like. Are they points, lines, or polygons? Do you want them all in the same colour, or depending on their attributes?
Then get mapnik or TileMill and learn how to use that. Do you just want to present the shapefile, or do you want that on a base map? In which case you'll have to generate a transparent tile set and do raster image overlays in your application.
Is it the whole world? And to the same resolution as Google Maps zooms? Get a big bank of disk storage.
http://mapbox.com/tilemill/
http://mapnik.org/
Personally I'd look into converting the shapefile into a vector form that you could render on the client - GeoJSON perhaps. Then serve that.

iPhone - Image overlay MapKit framework?

I can see with iOS4 you can now tile an image on google maps (Been looking at the TileMap example from apple). This is great as this is what I want to do, but from what I can see I need to know the GEO reference of the image so I can raster the images with the appropriate zoom levels, etc. What I have is an artist image, which is a map of a specific area and I want to overlay this image on google maps.
Am I missing something here, but can this be done with a none standard map and having different zoom levels?
The main reason why I need to use google maps is because of the GPS functionality, so the user will know where they currently are on the map.
Georeferencing is how you "pin" your image to the world. It is a tricky process, but not too hard once you dig into it.
You've already found the TileMap example code - that is the first step.
Next, check out MapTiler.org. There you will find links and some binaries that you can use to process your image into georeferenced tiles.
If you don't know the lat/long coordinates for your image, you can use Google Earth to interactively overlay the image onto the map, and then copy the coordinates out.
Good luck!