nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

WebTileLayer won't work with this URL

Guy_srb

Hi 🙂

I want to add to my map a WebTileLayer from this url :

https://cdn.govmap.gov.il/LPD0BBK2022/L01/R00000060/C00000056.jpg

that I got from this site:

https://www.govmap.gov.il/?c=204000,595000&z=0&lang=en

this is my code:

        const  layer = new WebTileLayer({
      urlTemplate:"https://cdn.govmap.gov.il/LPD0BBK2022/L{level}/R{row}/C{col}.jpg"
        });

But I think that the Tile scheme of this cache is different or custom, so I could not load it to my map.

タグ付けされた投稿をもっと見る

Accepted answers

All comments

JoelBennett

Yes, you can determine the tile scheme by poking around a bit in the application's source code using your browser's developer tools. For example, the tiling info can be seen by doing a search for tileInfo in the esriMap.js file, as shown below:

As for the lods (levels of detail), it appears you can find information for those in the request to GetBackgrounds:

Guy_srb

Thank you very much for the example!

By any chance there is a way to find out the service tile scheme?

JoelBennett

As @UndralBatsukh was basically saying, WebTileLayer doesn't natively support this tiling scheme. However, you can override the logic that generates the URL from the level, row, and column values so that the generated URLs do match that particular scheme:

const  layer = new WebTileLayer({
	urlTemplate: "https://cdn.govmap.gov.il/LPD0BBK2022/L{level}/R{row}/C{col}.jpg"
});

layer._addLeadingZeros = function(number, desiredLength) {
	var str = number.toString();

	while (str.length < desiredLength)
		str = "0" + str;

	return str;
};

layer.getTileUrl = function(level, row, col) {
	var lodIndex = level - this.tileInfo.lods[0].level;
	var url;

	if ((lodIndex >= 0) && (lodIndex < this.tileInfo.lods.length)) {
		url = this.urlTemplate.replace(/\$\{level\}/g, this._addLeadingZeros(this.levelValues[level], 2));
		url = url.replace(/\$\{col\}/g, this._addLeadingZeros(col.toString(16), 8));
		url = url.replace(/\$\{row\}/g, this._addLeadingZeros(row.toString(16), 8));
	} else
		url = "data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII="; //one transparent pixel

	return url;
};

UndralBatsukh

It is not working because the WebTileLayer.urlTemplate does not match the service's tiling scheme.

You are setting your urlTemplate to send requests like this and this does not exist: https://cdn.govmap.gov.il/LPD0BBK2022/L0/R0/C0.jpg

Looking at the network traffic not sure how this service is structured: https://www.govmap.gov.il/?c=204000,595000&z=0&lang=en

I see that rows and columns have some lettering system...

Screenshot 2023-01-25 at 9.01.55 AM.png

Can this map be used in third party apis? Did you check their terms of agreement? Looks like the map has a link the API at the bottom. I tried looking there but I could not find English page.

Guy_srb

I'm getting 403 errors as well, so it's probably locked? I thought it didn't work becuase the col,row and level was diffrenet in this cache.

Noah Sager

Hi @Guy_srb, I tried to get it to work with that same service, but I ran into some 403 errors. Not sure if it's just a CORS error, or if the service is locked down to prevent access. What errors are you getting in the browser console?

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.