XYZ Tiles sebagai Basemap

· 3 min read

Saat kita membuat peta pasti membutuhkan basemap. banyak basemap yang tersedia misalnya google map. Di tutorial ini akan memberikan langkah-langkah untuk menambahkan XYZ Tiles dan menampilkannya di QGIS sebagai basemap dan juga menggunakan XYZ Tile sebagai basemap WebGIS, adapun langkah-langkahnya sebagai berikut

XYZ Tile di QGIS

Menambahkan XYZ Tiles ke dalam Browser

Untuk menambahkan XYZ, cari XYZ Tiles pada browser kemudian klik kanan, New Connections.. seperti berikut

Pada dialogbox XYZ Connection isikan nama koneksi dan URL, misalnya Name: Google Hybrid dan URL: http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z} dan atur authentication apabila diperlukan dan atur zoom level atau biarkan default, seperti contoh berikut

Semua koneksi XYZ Tiles yang telah ditambahkan akan muncul di Browser bagian XYZ Tiles seperti gambar berikut

Untuk memakai XYZ Tiles sebagai basemap dengan menarik koneksi dari Browser ke dalam halaman peta atau Layer, maka akan tampil seperti contoh berikut

XYZ Tile di WebGIS

Leafletjs

Untuk menggunakan XYZ Tiles sebagai basemap pada Leaflet JS dapat menggunakan L.tileLayer seperti kode berikut

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

Openlayer

Untuk menggunakan XYZ Tiles sebagai basemap di Openlayer dapat menggunakan XYZ di dalam TileLayer seperti contoh berikut

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import {fromLonLat} from 'ol/proj';
import XYZ from 'ol/source/XYZ';


var map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        attributions: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
  view: new View({
    center: fromLonLat([-121.1, 47.5]),
    zoom: 7
  })
});

Berikut Beberapa link XYZ Tiles yang dapat digunakan

Google Streets : https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}
Google Road: https://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={z}
Google Sattelite : https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}

Google Hybrid : http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}

Google Terrain: https://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}

ESRI Topo: https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}

Open Street Map : https://tile.openstreetmap.org/{z}/{x}/{y}.png

Open Street Map Black and White : http://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png

Open Street Map Cycle Map : http://tile.thunderforest.com/cycle/{z}/{x}/{y}.png

Stamen Terrain : http://a.tile.stamen.com/terrain/{z}/{x}/{y}.png

Carto Positron: https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png

Related Articles

Menampilkan Data Openstreetmap Dengan Overpass API

WebGIS Openstreetmap Kita pasti sudah familiar dengan peta dasar Openstreetmap. Pada tutorial ini akan membahas mengenai cara untuk memanfaatkan Openstreetmap

· 6 min read
Apa itu Folium?
· 1 min read