I think it should be possible to pass a rect to MapView.UrlTile

[petha]

I need a way of telling which part is covered by the MapView.URLTile and outside of that rect the map should be visible.

Right now the map tries to load all tiles even if they are outside of the bounding rect of the tile-set

I suggest a way of passing a bounding rect to the component if it would be possible

[markmssd]

I totally agree with you @petha !

[petha]

I will try to do a PR during the day, I've done some quick hacks and it is almost done for IOS.

I'm not sure i'll fix it for Android ATM since the big problem for us is IOS. It's more of a performance thing on Android and I can live with it..

[raduflp]

What if the rect tiles are transparent? ( a grid overlay scenario)
maybe you could make an option to load both the rect tiles and the default map tiles underneath

[petha]

@raduflp yep! that's what I did, haven't got the time to clean the code up yet but now it "works for me"™

You can find my fork here https://github.com/petha/react-native-maps, I intend to do some polishing make sure the it has some default props so it won't break any earlier examples and then do a PR.

[raduflp]

awesome! I'll be waiting for that PR

related question: Were you ever able to overlay transparent tiles over the native MapKit provider on iOS?
I my case it works properly with the google provider but for MapKit it displays just the tiles added with MapView.UrlTile

[mikefresh]

@raduflp Just checking in on the last thing you mentioned. I've been trying to use MapView.UrlTile with a tilesource that's pngs. I expected the it to act as an overlay showing the default map style under it but it seems to replace everything. Are you saying it actually works on google maps, just not mapkit?

[raduflp]

@mikefresh yes, after doing all the necessary adjustments to have google as a provider on iOS I managed to get a consistent behavior with the Android version, i.e. the default tiles were displayed underneath the custom transparent ones. That was a month ago though, not sure if anything changed since.

[Stophface]

Hey guys,
I am just wondering if anyone of you has some ideas regarding this:

I am using <MapView.UrlTile .../> to add a Custom Tile Overlay.

<MapView 
   ...>
  <MapView.UrlTile
    urlTemplate={this.state.urlTemplate}
  />
</MapView>

It sort of works.

When I pinch, drag and zoom in/out, it displays the underlaying tiles (on Android Google Maps). Once the pinching, dragging, zooming is done, it only then loads the Tiles passed with <MapView.UrlTile .../>. It looks like basically it loads two maps. First the underlaying, and then the one passed through <MapView.UrlTile .../>.
Here a Video: https://www.file-upload.net/download-12828114/maps_prob1.mov.html (19.41 MB, download link)

[markmssd]

I think this is the normal behaviour, even if you add custom tiles to a native Android Google Maps app, it will also behave the same. What I did for the rest of the tiles (outside of my Rect) is as follow:

Since my tiles are hosted on AWS S3, I serve them through CloudFront. In CloudFront, there is an option to return a default image when the requested one is not found. So, by default, I return a 1x1px transparent "dot". Would be much much better if we could pass a Rect to the MapView.UrlTile so it only tries to load tiles inside it, but this is the best I came with.

[Stophface]

@markmssd Hm, maybe I did not express myself correctly. I do not want anything to shine through. I can understand this behavior when I would overlay clouds or rain pattern or what so ever on my base map. But I don't want to see the Google Maps base map at all! I want to use http://c.tile.openstreetmap.org/{z}/{x}/{y}.png as my map (like the docs say.
There must be a way to completely overlay the base map?!

[markmssd]

Just a random guess, try setting the provider to null:

<MapView
  provider="null"
>

I think I've read this in an issue long time ago, let me know if it works.

[Stophface]

@markmssd Ill try tomorrow. Whats in MapStyle?

[markmssd]

Absolutely nothing, or your own styles... I've copy/pasted the snippet from the README...

[Stophface]

@markmssd thanks, Ill check out out tomorrow.

[alvelig]

#1876 allows you to pass a constant bordered image. pathTemplate='/path/to/your/constant/image'

For any other documentation watch #1880

[pawan8525]

hi i am using below url of soil map tile
<MapView.UrlTile
urlTemplate=" ....../api/soil/wms/?x=5458&y=12859&z=15 " />

in x,y i pass converted lat long and in z i pass zoom level.
But my map overlay tile repeat, why i don't know?
Please help