{"id":6422,"date":"2023-01-11T16:11:28","date_gmt":"2023-01-11T12:41:28","guid":{"rendered":"https:\/\/en.geobox.ir\/developers\/?post_type=docs&#038;p=6422"},"modified":"2023-01-21T15:49:17","modified_gmt":"2023-01-21T12:19:17","slug":"add-raster-layer-2","status":"publish","type":"docs","link":"https:\/\/en.geobox.ir\/developers\/docs\/add-sources-geobox-api-for-leaflet\/add-raster-layer-2\/","title":{"rendered":"Add raster layer"},"content":{"rendered":"<p>To add a raster or mosaic layer to the map, you must use the leaflet library. As mentioned earlier, you access the leaflet library using the L variable.<\/p>\n<p>First, copy the XYZ URL or WMTS URL from the geobox portal or any other sources. Then add to the map as follows.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">var rasterLayer = L.tileLayer('https:\/\/api.geobox.ir\/v1\/rasters\/41dcc205-c540-4631-99c7-0ac78954\/tiles\/{z}\/{x}\/{y}.png?apikey=CI5GdCMXb46_GMK3HkSSSsb5InJZs5KYkhFfrIViNKc');\r\nrasterLayer.addTo(map.Lmap);<\/pre>\n<p>You can also use the <a href=\"https:\/\/leafletjs.com\/reference.html#tilelayer\">leaflet guide<\/a> for more guidance.<br \/>\n<p class='codepen'  data-height='500' data-theme-id='1' data-slug-hash='WNKdaKE' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen <a href=\"https:\/\/codepen.io\/geobox-gl-demo\/pen\/WNKdaKE\">Contact Form \u2013 Pen a Day 20<\/a> by Geobox (<a href=\"https:\/\/codepen.io\/geobox-gl-demo\">@geobox-gl-demo<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.1<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To add a raster or mosaic layer to the map, you must use the leaflet library. As mentioned earlier, you access the leaflet library using the L variable. First, copy the XYZ URL or WMTS URL from the geobox portal or any other sources. Then add to the map as follows. var rasterLayer = L.tileLayer(&#8216;https:\/\/api.geobox.ir\/v1\/rasters\/41dcc205-c540-4631-99c7-0ac78954\/tiles\/{z}\/{x}\/{y}.png?apikey=CI5GdCMXb46_GMK3HkSSSsb5InJZs5KYkhFfrIViNKc&#8217;); [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[62],"doc_tag":[],"class_list":["post-6422","docs","type-docs","status-publish","hentry","doc_category-add-sources-geobox-api-for-leaflet"],"_links":{"self":[{"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/docs\/6422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/comments?post=6422"}],"version-history":[{"count":6,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/docs\/6422\/revisions"}],"predecessor-version":[{"id":6650,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/docs\/6422\/revisions\/6650"}],"wp:attachment":[{"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/media?parent=6422"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/doc_category?post=6422"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/doc_tag?post=6422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}