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)
Related
I use Mapbox Tileset API and generated a custom tileset (it's a huge 400MB of GeoJSON data) uploaded to Mapbox servers, and added to our style in the studio as a custom fill layer.
This way I can show our custom areas (as polygons) of the world with green (visited) and red (remaining) locations with using expressions only.
I would like to tell if a point (GPS coordinate) is within a polygon of the tileset source/layer and which one, even if the app is in the background (GPS tracking is running in the background and I would like to notify the user when they are within a polygon).
Using queryRenderedFeatures would be great, but unfortunately, it doesn't work when the app is in the background or the user's position is outside of the current viewport.
Is there any solution to get the list of the features at a GPS coordinate even if it's outside of the viewport?
Another requirement is that, it should work when the device is offline, so the Tilequery API won't help.
Downloading the offline data of our style with a limited zoom range working perfectly, I can see my custom source-layer (polygons) even if the device is offline.
So I think there should be a way to query the tileset-source when the device is offline too.
Currently, I generate a simplified GeoJSON file and use it with turf#points-within-polygon when the device is offline, but there're gaps, sometimes polygons are covering each other (due to the simplifying) etc... if I make the tolerance level lower the file is going to be too large to download and store it offline, so this is not really a solution just a poor workaround.
Can I make a PIP (point-in-polygon) query for a custom Tileset source even outside of the viewport, when the app is in the background and the device is offline?
Assuming this is your actual question:
Can I make a PIP (point-in-polygon) query for a custom Tileset source even outside of the viewport, when the app is in the background and the device is offline?
If the device is offline, then any solution that requires fetching tiles on demand (like a tileset in Mapbox-GL or TileQuery) is out.
You said storing the whole GeoJSON is out, because it's too big.
I think the remaining solution is to generate a single-zoom-level tileset and store it locally, then query it with something like query-mbtiles.
Let's say you want to build an app where people can find out whether the location the users are on has a risk of being flooded. You want to be able to create flood zone areas on the map and compare the user geolocation relative to the area. How do I do that with google_maps_flutter? or is there any other way to do it with plugins in flutter?
What I have in mind right now is to create polygons on the map and perform some geometric operations with it (if that is even possible). I have Esri SHP files which I will export to json and parse it in flutter and then use the results to draw polygons of the areas.
no code just yet..
You can make use of 'overlay widgets' in Flutter. You can draw, say a circle, indicating a flood zone with colour and radius in accordance with the probability (or other parameters).
Depending on how you want to display, you can create a separate UI control to display the comparision with reference to the user's geo-location.
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
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.
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.