Why is leaflet tileLayer not loading my tiles? - leaflet

I'm trying to load some tiles from a relative path
Why is it that I cannot see the tiles on the map? Things tried/considered:
Checked the zoom level was appropriate (default 11).
Tried using absolute path with C:user/etc but Not allowed to load local resource showed up. But at least showed that z, x, and y values are correctly updated by tileLayer.
Followed this: (The map_{x}_{y}.jpg especifically) without luck too.
Am I missing something critical?

Related

Setting the CRS for non-geographical svg map

I'm trying to show a custom non-geographical map with CRS.simple as explained here:
In a CRS.Simple, one horizontal map unit is mapped to one horizontal
pixel, and idem with vertical
However, I wish to use an SVG vector image as an overlay, but I don't get how the map unit is decided in this case, since the vector images don't really have a resolution?
Also, how could set the CRS origin's location to a specific point?
Thanks for helping

AEM6.4: Meaning of values in image map properties

AEM offers a plugin to create image maps for its internal inplace editor. After configuration the given values are stored into follow forrmat:
[rect(89,92,356,368)"/content/sites/we-retail/us"|"_blank"|"fdfdfdfdf"|(0.2,0.2004,0.8,0.8017)]
The first paratheses are defines the coordinates of choosen shape.
The content within the first quotaion signs defines the target site, within the second how to open it the browser. In the third pair of quotations sign contains an alternative Text for non images display.
What I don't know are the values in second paratheses. Does someone know for what these values stands for?
From the WCM core components Image model, they are called relative coordinates.
They are not standard HTML attributes and are instead populated as data attributes of the area tag within the image component.
See code below:
<area shape="${area.shape}" coords="${area.coordinates}" href="${area.href}"
target="${area.target}" alt="${area.alt}" data-cmp-hook-image="area"
data-cmp-relcoords="${area.relativeCoordinates}">
Since the map coordinates are fixed coordinates and do not change when the image scales in or not based on screen sizes, the image component’s JavaScript uses this relative coordinates data to adjust the coordinates of the map area whenever the image size is adjusted. This is handled by the resizeAreas() function within the component’s clientlib.

Mapbox Terrain RGB image '

I am new to mapbox and am trying to get the Terrain rgb data. I have followed the example from the documentation here :
https://www.mapbox.com/help/access-elevation-data/
and used the following query:
api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token={my_access_token}
which works find for zoom levels from 0 to 5 and returns RGB tiles of elevation data from a high level.
api.mapbox.com/v4/mapbox.terrain-rgb/5/0/0.pngraw?access_token={my_access_token}
I need to get the data at a much higher zoom level than 5, but once I use a zoom level above 5 it returns 'Tile Does Not Exist'.
The documentation says that there is data up to zoom of 15. My access token works and I have tried x,y tiles of 0, 0 (which should exist at all levels). Has anyone any help or suggestions ?
Had a similar issue and in my case the mistake was assuming that given an {x}/{y} tuple the zoom {z} was free to change, but it isn't, if zoom changes xy changes too.
To get the correct tiles I used mercantile (pip install mercantile)
import mercantile
print(mercantile.tile(-71.0638031, 42.3578952, 15))
>>> Tile(x=9915, y=12120, z=15)

Incorrect coordinates in mbtiles generated with Tippecanoe

I generated an mbtiles file using Tippecanoe with just -zg and --drop-densest-as-needed as extra parameters. I uploaded the file to Mapbox Studio and everything works well, both in Studio and when loading the tiles through a mobile app.
I then tried my luck at self-hosting the tiles, using a very basic HTTP server in Go. Tiles were transferred from SQLite to a PostgreSQL database (the reason for this is Go + PSQL is the existing stack for the app).
For some reason the features are shifted depending on the zoom level. At level 1, data that's supposed to be in the US is in the Antarctic, at zoom level 2 it's off the coast of Chile, etc. The only one properly working is level 0 as there's only one tile.
I checked what tiles Mapbox was requesting when in San Francisco for zoom level 11: column 327, row 791. No tile exists for this row/col combination in the .mbtiles file although there's data there.
Is there additional things to be done to the mbtiles besides looking them up in the database using the z/x/y? Or maybe stuff to configure on the app side?
Server code:
row := db.QueryRow(`
SELECT tile_data FROM tiles
WHERE
zoom_level = $1
AND tile_column = $2
AND tile_row = $3
`,
z, x, y,
)
On Android:
map.addSource(
VectorSource(
"tiles",
TileSet("2.2.0", "http://my.local.server:4000/tiles/{z}/{x}/{y}.mvt?key=2448A697EACDDC41432AAD9A1833E")
)
)
I tried setting the VectorSource's center and bounds found in the mbtiles metadata but it didn't change anything.
So I looked into existing server implementations and it turns out the offset is because the mbtiles are stored in a TMS format in which the Y coordinate is flipped. So we just need to convert the Y from the XYZ format to get the proper tile:
From Mapbox's own Node implementation:
// Flip Y coordinate because MBTiles files are TMS.
y = (1 << z) - 1 - y;
1 << z is the number of rows for a given zoom level, or two to the power of z.
More info about XYZ vs TMS can also be found here.

How to control what markers are displayed by mapbox-gl-js

I am loading a bunch of geojson points. I can see that I am loading about 40 points but which ones get displayed on my map seems random and somehow connected to the zoom level. Below you can see that only 2 points of ~40 are displayed.
What criteria does mapbox-gl-js use to decide what to display?
Is there a way to control what points are being displayed? (All of them? Some based on an attribute?)
This is likely occurring because you are using the default text-allow-overlap value of false. The text-allow-overlap documentation reads
If true, the text will be visible even if it collides with other previously drawn symbols.
Because your symbols overlap each other, some are hidden. You can disable this behavior by setting text-allow-overlap to true.
You might find marker clustering to be useful.