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
Related
I have GPS coordinates, which are coming from cars. I'm trying to display their movement using mapbox. It works mostly fine, but because coordinates are imprecise, sometimes markers displayed inside houses, rivers, etc.
Is there a way to specify that the animation should follow the closest road?
Yes. That's exactly what the Map Matching API does.
I'm thinking of making city transport simulation game, based on tile map like simcity. Because transportation is the main component, I'm not gonna describe city thoroughly, like drawing all the buildings or others. But I need to divide the city to districts and villages.
I want them to be generated randomly, based on tile map system - Actually this doesn't have to be tile based, but I don't have any better idea to generate randomly divided districts.
The problem is there are literally to many tiles. Of course I won't make all the tiles to GameObjects, but array storing the information of tile just gets like 4000x3000 (for 12,000,000 tiles). Is it okay? I think this will seriously slow down the game.
I searched for many ways to generate tile maps, but those tile maps are for RPGs.. they are just sprites and background.
My tiles should change dynamically(maybe the colors, and I'm making the game with 3d so maybe the tile can have height that may change), with showing the status of that tile(a small region of the city). What will be better way for my needs?
Thank you!
The short answer is that you should generate a mesh to represent your tiles. This will allow you to represent a large number of tiles as a single game object.
It is not as troublesome as it sounds. I actually went through this myself recently, and have written a step-by-step guide on how to do it, and how to solve a host of other issues I ran in to working with tiles:
http://matthewlynch.net/2017/02/19/efficient-artefact-free-2d-tile-mapping-in-unity-5-5/
The only caveat I would mention (this is discussed in the tutorial, but not directly addressed) is that you should still divide your map up in some way.
I would not recommend exceeding 100x100 tiles in a single mesh, and in fact would recommend breaking it up even further. But once you get the basics of tile->mesh rendering up and running, this is not difficult to do.
I am new to OpenstreetMap and Leafletjs. I am trying to implement a map displaying journey time information on motorways (also called highways in some part of the world) by using different colors to show road congestion and the problem I'm facing is, once the map tiles are rendered, it comes with all information, like town/city names, road names etc.
On the basis of road information that I receive, I create road colorings in an overlay that sits on top of the tile layer. The problem is, once that happens, the road colorings cover the road names that appear on the tile layer. The problem can be seen in the image displayed below.
Is there a way, I could extract the road names so that I could put it in a layer above the road coloring layer so that road names appear on top of road colorings.
Thanks for any sort of help, Looking forward to some replies.
Thanks
In theory, you could create two sets of tiles: one with the road lines, another with the shields (labels). Render the shields tiles with a transparent background. Then hack Leaflet around to have a second tile layer above the overlay layer.
However... that's a whole bunch of hassle for a fairly simple problem. So: why not render the road numbers alongside the roads, rather than on top of them? That way, your overlay line won't obscure the numbers. Here's an example of a style that does this (disclaimer: my site!).
Assuming you're using Mapnik to render your tiles, you'll want to use TextSymbolizer rather than ShieldSymbolizer. Customising the style is (of course) much easier if you're using TileMill rather than pure Mapnik XML.
As you say, the roadnames (here ref icon symbolizers) are part of the OSM raster map tiles and can't changed easily.
So the easiest solution would be to switch to a mapstyle without labels.
Another idea would be to add more alpha to your cusom GPS track, so it get's more 'hollow' and fits better in the mapstyle. But the default OSM style isn't good for adding informations on top, as this basemap is already to detailed. Maybe it makes sense to use another one:
http://wiki.openstreetmap.org/wiki/Featured_tiles
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.
Really hope someone can help me as I'm a bit stuck :S
I have a custom map of an event using the CATiledLayer so users can zoom in and scroll around the map. What I would like to do now is add the functionality to let the user know where they currently are on the map. I know it can be done as I've seen an app do this before. I'm not sure how to go about doing it though, maybe I need to convert lat/lon into pixels but I'm not sure if thats possible (depending on how big the image is, etc).
On another site it was mentioned to find out the boundaries of the map and then I can add pins to the map, but I'm not sure how to go about doing this? Will I need to find every coordinate (lat/lon) within the boundary so I can add the pin of where the user is currently?
If anyone can give me with any advice or pointers, I'd much appreciate it
You can use the route-me library by adding your own map source class. A good article that explains how to do it is here http://mobilegeo.wordpress.com/2010/07/07/route-me-native-iphone-mapping-framework/
I'm facing a challenge right now in trying to map GPS coords to a map that's an artist's rendition. In particular this is for a ski mountain, so the artist's rendition is a "trail map". The trail map is not accurate in that the whole mountain has been squeezed onto the one view, yet the actual topology of the mountain doesn't conform to the drawing.
I've tried several approaches:
1) Triangulation using known GPS coordinates of the lift stations. This is fairly simple to implement, yet this is not accurate enough and the algorithm fails if the rendition differs enough from the GPS map.
2) Creating a uniform grid for both the GPS map and the Trailmap, then doing a mapping from cells in the GPS map to the Trailmap. The downside to this is it can be a lot of busy work with no easy UI for doing it.
3) Calculating the vectors of each lift (being a straight line), find the closet lift station to a given GPS point, and calculate the estimated Trailmap location using this vector.
I'm considering #2, which is essentially the simplest solution. But if you've found a better way, I'd love to hear it.