แผนที่
เนื้อหาส่วนนี้เกี่ยวข้องกับการแสดงผลข้อมูลบนแผนที่ เมื่อทำการนำเข้าข้อมูล ประมวลผล และพร้อมสำหรับแสดงผลแล้ว นอกจากการดำเนินการผ่านหน้าเว็บไซต์ สำหรับนักพัฒนาสามารถนำ API Services ไปประยุกต์และพัฒนาเว็บไซต์ของคุณได้
หากข้อมูลของคุณมีขนาดใหญ่หรือต้องการเพิ่มประสิทธิภาพแสดงผล การแปลงข้อมูลเป็นไทล์เป็นทางเลือกที่ดี สำหรับการพัฒนาเว็บไซต์ที่มีการแสดงข้อมูลเชิงพื้นที่ที่มีความซับซ้อนและมีขนาดใหญ่
สร้าง Vector Tiles ด้วย API
เมื่อนำเข้า ชุดข้อมูลเชิงจุด เส้น หรือพื้นที่ (Features Collection) เช่น ตำแหน่งร้านค้า หรือ ข้อมูลเชิงพื้นที่ต่อเนื่อง เช่น อุณหภูมิ เข้าสู่ ฐานข้อมูลเชิงพื้นที่ เราสามารถใช้ บริการสร้างไทล์ เพื่อแปลงข้อมูลให้เป็นรูปแบบที่เหมาะสำหรับการแสดงผลบนแผนที่ ทำให้การเรียกดูและวิเคราะห์ข้อมูลทำได้รวดเร็วขึ้น กระบวนสร้างไทล์ข้อมูล Features ซึ่งมีกระบวนการในด้าน API ดังต่อไปนี้
- สร้าง Collection ที่มี
itemTypeเท่ากับ Tile - แปลงข้อมูล Features Collection ให้เป็นไทล์
- ทดสอบเรียกดูผลลัพธ์การสร้างไทล์
ตารางรายการ API สำหรับนำเข้าข้อมูล Features
| Order | Name | Method | Path |
|---|---|---|---|
| 1 | POST | /features/1.0-beta/collections | |
| 2 | POST | /processes/vallaris/214bffaba098493005c5/:collectionId | |
| 3 | GET | /tiles/1.0-beta/tiles/:collectionID |
สร้าง Coverage Tiles ด้วย API
กระบวนสร้างไทล์ของข้อมูล Coverages เมื่อ Coverage ของคุณได้ถูกจัดเก็บที่ Geo Store สามารถนำข้อมูลมาแปลงให้อยู่รูปแบบไทล์ เพื่อการแสดงผลที่มีประสิทธิภาพ ซึ่งมีกระบวนสร้าง Coverage Tiles ด้วย API ดังต่อไปนี้
- สร้าง Collection ที่มี
itemTypeเท่ากับ CoverageTile - สร้าง Thumbnail เพื่อแสดงตัวอย่างข้อมูล Coverage ซึ่งต้องระบุพารามิเตอร์เพิ่มเติมสำหรับการกำหนดค่าของแสดงผล สามารถศึกษาเพิ่มเติมได้ที่ ตารางพารามิเตอร์การสร้าง Thumbnail
- แปลงข้อมูล Coverage Collection ให้อยู่ในรูปแบบไทล์
- ทดสอบเรียกดูผลลัพธ์การสร้างไทล์
ตารางรายการ API สำหรับนำเข้าข้อมูล Coverages
| Order | Name | Method | Path |
|---|---|---|---|
| 1 | POST | /features/1.0-beta/collections | |
| 2 | POST | /coverages/1.0-beta/manager/style/:collectionID/jobs | |
| 3 | POST | /coverages/1.0-beta/manager/maketile/:tileCollectionId/jobs | |
| 4 | GET | /maps/coverage/1.0-beta/maps/:CoverageTileID/tms/:z/:x/:y |
ตารางพารามิเตอร์การสร้างภาพ Thumbnail
| พารามิเตอร์ | ค่าที่สามารถระบุได้ | คำอธิบาย |
|---|---|---|
| type | rgb gray classification | ประเภทของภาพที่ต้องการแสดงผล |
| method | EqualInterval Quantiles NaturalBreaks | วิธีการแบ่งชั้นข้อมูล (ใช้เมื่อ type = classification) |
| color | Reds Greens Blues viridis rocket flare crest magma mako pastel Spectral | ชุดสีที่ใช้ในการแสดงผลข้อมูล (ใช้เมื่อ type = classification) |
| reverse | true false | กำหนดการกลับสีของการแบ่งชั้น (ใช้เมื่อ type = classification) |
สร้าง Map Style ด้วย API
กระบวนการสร้างแผนที่ คุณสามารถสร้างสรรค์และออกแบบแผนที่ในรูปแบบต่างๆ เพื่อแสดงข้อมูลเชิงพื้นที่ จุด เส้น พื้นที่ (Features)ภาพถ่ายดาวเทียม หรือภาพถ่ายทางอากาศ (Raster) ให้เหมาะสมและมีประสิทธิภาพ
การสร้างแผนที่ฐาน
แผนที่มีแผนที่ฐาน (Basemap) เป็นองค์ประกอบ เป็นส่วนช่วยให้เข้าใจข้อมูลที่ต้องการแสดงผลมากขึ้น เนื่องจากได้เรียนรู้ข้อมูลสิ่งแวดล้อมที่เกี่ยวข้อง โดยการสร้างต้องกำหนดแหล่งข้อมูล (Source) และรูปแบบแผนที่ (Map Style) ตามโครงสร้างการออกแบบ JSON Style ของ Maplibre Expression ซึ่งในการสร้างมีกระบวนการดังต่อไปนี้
- สร้างแผนที่ฐาน
- ระบุข้อมูลรายละเอียดของแผนที่ (Add Meta data)
- เพิ่มชั้นข้อมูลแผนที่ (Add Layer)
ตารางรายการ API สำหรับสร้างแผนที่
| Order | Name | Method | Path |
|---|---|---|---|
| 1 | POST | /styles/1.0-beta/styles | |
| 2 | PUT | /styles/1.0-beta/styles/:styleId/metadata | |
| 3 | PUT | /styles/1.0-beta/styles/:styleId |
ตัวอย่างโครงสร้าง JSON Style สำหรับแผนท ี่ฐาน
{
"version": 8,
"name": "Vallaris Default",
"sources": {
"osm": {
"id": "osm",
"type": "vector",
"url": "https://va-cdn-02.vallarismaps.com/core/api/tiles/1.0-beta/tiles/public/osm"
}
},
"sprite": "https://va-cdn-02.vallarismaps.com/core/tiles/sprite/sprites",
"glyphs": "https://va-cdn-02.vallarismaps.com/core/tiles/fonts/{fontstack}/{range}.pbf",
"layers": [{
"id": "background",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"background-color": {
"stops": [
[
1, "rgba(233, 219, 219, 0.68)"
],
[
15, "rgba(250, 247, 247, 0.68)"
]
]
}
},
"type": "background"
}, {
"filter": ["all",
["==", "$type", "Polygon"],
["==", "class", "residential"]
],
"id": "landuse-residential",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "rgba(247, 239, 212, 0.59)",
"fill-opacity": 0.6
},
"source": "osm",
"source-layer": "landuse",
"type": "fill"
}, {
"filter": ["==", "class", "grass"],
"id": "landcover_grass",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "rgba(140, 237, 203, 0.66)",
"fill-opacity": 0.45
},
"source": "osm",
"source-layer": "landcover",
"type": "fill"
}, {
"id": "park",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "#d8e8c8",
"fill-opacity": 1
},
"source": "osm",
"source-layer": "park",
"type": "fill"
}, {
"filter": ["==", "class", "wood"],
"id": "landcover_wood",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "#d8e8c8",
"fill-opacity": {
"base": 1,
"stops": [
[
8,
0.6
],
[
22,
1
]
]
}
},
"source": "osm",
"source-layer": "landcover",
"type": "fill"
}, {
"filter": ["==", "$type", "Polygon"],
"id": "water",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "hsl(205, 56%, 73%)",
"fill-opacity": 1
},
"source": "osm",
"source-layer": "water",
"type": "fill"
}, {
"filter": ["==", "subclass", "ice_shelf"],
"id": "landcover-ice-shelf",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "hsl(47, 26%, 88%)",
"fill-opacity": 0.8
},
"source": "osm",
"source-layer": "landcover",
"type": "fill"
}, {
"filter": ["==", "subclass", "glacier"],
"id": "landcover-glacier",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "hsl(47, 22%, 94%)",
"fill-opacity": {
"base": 1,
"stops": [
[
0,
1
],
[
8,
0.5
]
]
}
},
"source": "osm",
"source-layer": "landcover",
"type": "fill"
}, {
"filter": ["all",
["in", "class", "sand"]
],
"id": "landcover_sand",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-antialias": false,
"fill-color": "rgba(232, 214, 38, 1)",
"fill-opacity": 0.3
},
"source": "osm",
"source-layer": "landcover",
"type": "fill"
}, {
"filter": ["all",
["==", "class", "pitch"]
],
"id": "landuse_pitch",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "rgba(214, 243, 195, 0.85)"
},
"source": "osm",
"source-layer": "landuse",
"type": "fill"
}, {
"filter": ["all",
["==", "class", "university"]
],
"id": "landuse_university",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "rgba(247, 232, 186, 0.46)"
},
"source": "osm",
"source-layer": "landuse",
"type": "fill"
}, {
"filter": ["all",
["==", "class", "school"]
],
"id": "landuse_school",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "rgba(247, 232, 186, 0.46)",
"fill-opacity": 0.5
},
"source": "osm",
"source-layer": "landuse",
"type": "fill"
}, {
"filter": ["all",
["==", "class", "hospital"]
],
"id": "landuse_hospital",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "rgba(255, 221, 238, 0.57)"
},
"source": "osm",
"source-layer": "landuse",
"type": "fill"
}, {
"filter": ["==", "class", "agriculture"],
"id": "landuse_agriculture",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "#eae0d0"
},
"source": "osm",
"source-layer": "landuse",
"type": "fill"
}, {
"filter": ["==", "class", "national_park"],
"id": "landuse_overlay_national_park",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "#E1EBB0",
"fill-opacity": {
"base": 1,
"stops": [
[
5,
0
],
[
9,
0.75
]
]
}
},
"source": "osm",
"source-layer": "landcover",
"type": "fill"
}, {
"id": "park_outline",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "rgba(159, 183, 118, 0.69)",
"line-dasharray": [
0.5,
1
]
},
"source": "osm",
"source-layer": "park",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "tunnel"]
],
"id": "waterway-tunnel",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "hsl(205, 56%, 73%)",
"line-dasharray": [
3,
3
],
"line-gap-width": {
"stops": [
[
12,
0
],
[
20,
6
]
]
},
"line-opacity": 1,
"line-width": {
"base": 1.4,
"stops": [
[
8,
1
],
[
20,
2
]
]
}
},
"source": "osm",
"source-layer": "waterway",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["!in", "brunnel", "tunnel", "bridge"]
],
"id": "waterway",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "hsl(205, 56%, 73%)",
"line-opacity": 1,
"line-width": {
"base": 1.4,
"stops": [
[
8,
1
],
[
20,
8
]
]
}
},
"source": "osm",
"source-layer": "waterway",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "tunnel"],
["==", "class", "transit"]
],
"id": "tunnel_railway_transit",
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 0,
"paint": {
"line-color": "rgba(47, 69, 197, 1)",
"line-dasharray": [
1,
0
],
"line-opacity": {
"base": 1,
"stops": [
[
11,
0
],
[
16,
1
]
]
},
"line-width": 3.5
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"id": "building",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-antialias": true,
"fill-color": "hsl(35, 8%, 85%)",
"fill-opacity": {
"base": 1,
"stops": [
[
13,
0
],
[
15,
1
]
]
},
"fill-outline-color": {
"stops": [
[
15, "rgba(236, 231, 231, 1)"
],
[
16, "rgba(236, 231, 231, 1)"
]
]
}
},
"source": "osm",
"source-layer": "building",
"type": "fill"
}, {
"filter": ["==", "$type", "Point"],
"id": "housenumber",
"layout": {
"text-field": "{housenumber}",
"text-font": ["Kanit"],
"text-size": 8
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 17,
"paint": {
"text-color": "rgba(212, 177, 146, 1)"
},
"source": "osm",
"source-layer": "housenumber",
"type": "symbol"
}, {
"filter": ["all",
["==", "$type", "Polygon"],
["in", "brunnel", "bridge"]
],
"id": "road_bridge_area",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"fill-color": "hsl(47, 26%, 88%)",
"fill-opacity": 0.5
},
"source": "osm",
"source-layer": "transportation",
"type": "fill"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["in", "class", "path", "track"]
],
"id": "road_path",
"layout": {
"line-cap": "square",
"line-join": "bevel"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "rgba(215, 212, 212, 0.29)",
"line-dasharray": [
1,
1
],
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
8
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "class", "ferry"]
],
"id": "road_ferry",
"layout": {
"line-cap": "round",
"line-join": "round",
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 13,
"paint": {
"line-color": "rgba(208, 151, 151, 0.5)",
"line-dasharray": [
1,
2
],
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
5
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["in", "class", "minor", "service"]
],
"id": "road_minor",
"layout": {
"line-cap": "round",
"line-join": "round",
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 13,
"paint": {
"line-color": "rgba(222, 208, 208, 0.41)",
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
10
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "tunnel"],
["==", "class", "minor_road"]
],
"id": "tunnel_minor",
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "#efefef",
"line-dasharray": [
0.36,
0.18
],
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "tunnel"],
["in", "class", "primary", "secondary", "tertiary", "trunk"]
],
"id": "tunnel_major",
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "#fff",
"line-dasharray": [
0.28,
0.14
],
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
30
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "Polygon"],
["in", "class", "runway", "taxiway"]
],
"id": "aeroway-area",
"layout": {
"visibility": "visible"
},
"metadata": {
"mapbox:group": "1444849345966.4436",
"vallaris:group": "Basemap"
},
"minzoom": 4,
"paint": {
"fill-color": "rgba(255, 255, 255, 1)",
"fill-opacity": {
"base": 1,
"stops": [
[
13,
0
],
[
14,
1
]
]
}
},
"source": "osm",
"source-layer": "aeroway",
"type": "fill"
}, {
"filter": ["all",
["in", "class", "taxiway"],
["==", "$type", "LineString"]
],
"id": "aeroway-taxiway",
"layout": {
"line-cap": "round",
"line-join": "round",
"visibility": "visible"
},
"metadata": {
"mapbox:group": "1444849345966.4436",
"vallaris:group": "Basemap"
},
"minzoom": 12,
"paint": {
"line-color": "rgba(255, 255, 255, 1)",
"line-opacity": 1,
"line-width": {
"base": 1.5,
"stops": [
[
12,
1
],
[
17,
10
]
]
}
},
"source": "osm",
"source-layer": "aeroway",
"type": "line"
}, {
"filter": ["all",
["in", "class", "runway"],
["==", "$type", "LineString"]
],
"id": "aeroway-runway",
"layout": {
"line-cap": "round",
"line-join": "round",
"visibility": "visible"
},
"metadata": {
"mapbox:group": "1444849345966.4436",
"vallaris:group": "Basemap"
},
"minzoom": 4,
"paint": {
"line-color": "rgba(249, 244, 244, 0.75)",
"line-opacity": 1,
"line-width": {
"base": 1.5,
"stops": [
[
11,
4
],
[
17,
50
]
]
}
},
"source": "osm",
"source-layer": "aeroway",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["in", "class", "trunk", "primary"]
],
"id": "road_trunk_primary",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "rgba(255, 204, 136, 0.86)",
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
30
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["in", "class", "secondary", "tertiary"]
],
"id": "road_secondary_tertiary",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "rgba(255, 204, 136, 0.86)",
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
20
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "class", "motorway"]
],
"id": "road_major_motorway",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "rgba(255, 167, 74, 0.71)",
"line-offset": 0,
"line-width": {
"base": 1.4,
"stops": [
[
8,
1
],
[
16,
10
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "oneway", -1]
],
"id": "road_oneway_opposite",
"layout": {
"icon-image": "oneway",
"icon-padding": 2,
"icon-rotate": 180,
"icon-rotation-alignment": "map",
"icon-size": {
"stops": [
[
15,
0.5
],
[
19,
1
]
]
},
"symbol-placement": "line",
"symbol-spacing": 200,
"text-font": ["Kanit", "Kanit"],
"text-size": 8
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 15,
"paint": {
"icon-opacity": 0.5
},
"source": "osm",
"source-layer": "transportation",
"type": "symbol"
}, {
"filter": ["all",
["==", "class", "transit"],
["!=", "brunnel", "tunnel"]
],
"id": "railway-transit",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "rgba(31, 150, 13, 1)",
"line-opacity": {
"base": 1,
"stops": [
[
11,
0
],
[
16,
1
]
]
},
"line-width": 2.5
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["==", "class", "rail"],
"id": "railway",
"layout": {
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-blur": 0,
"line-color": "rgba(117, 115, 112, 1)",
"line-offset": 0,
"line-opacity": 1,
"line-pattern": "",
"line-width": 1.5
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "bridge"]
],
"id": "waterway-bridge-case",
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "#bbbbbb",
"line-gap-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
},
"line-width": {
"base": 1.6,
"stops": [
[
12,
0.5
],
[
20,
10
]
]
}
},
"source": "osm",
"source-layer": "waterway",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "bridge"]
],
"id": "waterway-bridge",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "hsl(205, 56%, 73%)",
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source": "osm",
"source-layer": "waterway",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "bridge"],
["in", "class", "path", "pedestrian"]
],
"id": "bridge_path_pedestrian_casing",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "hsl(35, 6%, 80%)",
"line-dasharray": [
1,
0
],
"line-width": {
"base": 1.2,
"stops": [
[
14,
1.5
],
[
20,
18
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "bridge"],
["in", "class", "path", "pedestrian"]
],
"id": "bridge_path_pedestrian",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "hsl(0, 0%, 100%)",
"line-dasharray": [
1,
0.3
],
"line-width": {
"base": 1.2,
"stops": [
[
14,
0.5
],
[
20,
10
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "bridge"],
["==", "class", "minor_road"]
],
"id": "bridge_minor case",
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "#dedede",
"line-gap-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
},
"line-width": {
"base": 1.6,
"stops": [
[
12,
0.5
],
[
20,
10
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "bridge"],
["in", "class", "primary", "secondary", "tertiary", "trunk"]
],
"id": "bridge_major case",
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "rgba(244, 235, 235, 1)",
"line-gap-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
},
"line-width": {
"base": 1.6,
"stops": [
[
12,
0.5
],
[
20,
10
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "bridge"],
["==", "class", "minor_road"]
],
"id": "bridge_minor",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "#efefef",
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "LineString"],
["==", "brunnel", "bridge"],
["in", "class", "primary", "secondary", "tertiary", "trunk"]
],
"id": "bridge_major",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "rgba(255, 255, 255, 0)",
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
30
]
]
}
},
"source": "osm",
"source-layer": "transportation",
"type": "line"
}, {
"filter": ["all",
["in", "admin_level",
4,
6,
8
],
["!=", "maritime",
1
]
],
"id": "admin_sub",
"layout": {
"line-miter-limit": 2,
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-blur": 0,
"line-color": "rgba(148, 148, 148, 0.9)",
"line-dasharray": [
4,
1.2
],
"line-width": 0.7
},
"source": "osm",
"source-layer": "boundary",
"type": "line"
}, {
"filter": ["all",
["<=", "admin_level",
2
],
["==", "$type", "LineString"],
["==", "maritime",
0
]
],
"id": "admin_country",
"layout": {
"line-cap": "round",
"line-join": "round",
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"line-color": "rgba(56, 56, 56, 1)",
"line-width": {
"base": 1.3,
"stops": [
[
3,
0.6
],
[
22,
15
]
]
}
},
"source": "osm",
"source-layer": "boundary",
"type": "line"
}, {
"filter": ["all",
["==", "$type", "Point"],
["==", "rank",
1
]
],
"id": "poi_label",
"layout": {
"icon-size": 1,
"text-anchor": "top",
"text-field": "{name:latin}\n{name:nonlatin}",
"text-font": ["Kanit"],
"text-max-width": 8,
"text-offset": [
0,
0.5
],
"text-size": 11,
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 14,
"paint": {
"text-color": "#666",
"text-halo-blur": 1,
"text-halo-color": "rgba(255,255,255,0.75)",
"text-halo-width": 1
},
"source": "osm",
"source-layer": "poi",
"type": "symbol"
}, {
"filter": ["all",
["has", "iata"]
],
"id": "airport-label",
"layout": {
"icon-image": "airport_11",
"icon-size": 1,
"text-anchor": "top",
"text-field": "{name:latin}\n{name:nonlatin}",
"text-font": ["Kanit"],
"text-max-width": 8,
"text-offset": [
0,
0.5
],
"text-size": 8,
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 10,
"paint": {
"text-color": "#666",
"text-halo-blur": 1,
"text-halo-color": "rgba(255,255,255,0.75)",
"text-halo-width": 1
},
"source": "osm",
"source-layer": "aerodrome_label",
"type": "symbol"
}, {
"filter": ["==", "$type", "LineString"],
"id": "road_major_label",
"layout": {
"symbol-placement": "line",
"text-field": "{name:latin} {name:nonlatin}",
"text-font": ["Kanit"],
"text-letter-spacing": 0.1,
"text-rotation-alignment": "map",
"text-size": {
"base": 1.4,
"stops": [
[
10,
8
],
[
20,
10
]
]
},
"text-transform": "uppercase"
},
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"text-color": "#000",
"text-halo-color": "hsl(0, 0%, 100%)",
"text-halo-width": 2
},
"source": "osm",
"source-layer": "transportation_name",
"type": "symbol"
}, {
"filter": ["all",
["==", "$type", "Point"],
["!in", "class", "city", "state", "country", "continent"]
],
"id": "place_label_other",
"layout": {
"text-anchor": "center",
"text-field": "{name:latin}\n{name:nonlatin}",
"text-font": ["Kanit"],
"text-max-width": 6,
"text-size": {
"stops": [
[
8,
9
],
[
12,
12
]
]
},
"visibility": "visible"
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 8,
"paint": {
"text-color": "hsl(0, 0%, 25%)",
"text-halo-blur": 0,
"text-halo-color": "hsl(0, 0%, 100%)",
"text-halo-width": 1.5
},
"source": "osm",
"source-layer": "place",
"type": "symbol"
}, {
"filter": ["all",
["==", "$type", "Point"],
["==", "class", "city"]
],
"id": "place_label_city",
"layout": {
"text-field": "{name:latin}\n{name:nonlatin}",
"text-font": ["Kanit"],
"text-max-width": 10,
"text-size": {
"stops": [
[
3,
8
],
[
8,
10
]
]
},
"visibility": "visible"
},
"maxzoom": 16,
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"text-color": "hsl(0, 0%, 0%)",
"text-halo-blur": 0,
"text-halo-color": "hsla(0, 0%, 100%, 0.75)",
"text-halo-width": 2
},
"source": "osm",
"source-layer": "place",
"type": "symbol"
}, {
"filter": ["all",
["==", "$type", "Point"],
["==", "class", "country"],
["!has", "iso_a2"]
],
"id": "country_label-other",
"layout": {
"text-field": "{name:latin}",
"text-font": ["Noto Sans Regular"],
"text-max-width": 10,
"text-size": {
"stops": [
[
3,
12
],
[
8,
22
]
]
},
"visibility": "visible"
},
"maxzoom": 12,
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"text-color": "hsl(0, 0%, 13%)",
"text-halo-blur": 0,
"text-halo-color": "rgba(255,255,255,0.75)",
"text-halo-width": 2
},
"source": "osm",
"source-layer": "place",
"type": "symbol"
}, {
"filter": ["all",
["==", "$type", "Point"],
["==", "class", "country"],
["has", "iso_a2"]
],
"id": "country_label",
"layout": {
"text-field": "{name:latin}\n{name:nonlatin}",
"text-font": ["Kanit", "Kanit"],
"text-max-width": 10,
"text-size": {
"stops": [
[
3,
10
],
[
8,
22
]
]
},
"visibility": "visible"
},
"maxzoom": 12,
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"text-color": "hsl(0, 0%, 13%)",
"text-halo-blur": 0,
"text-halo-color": "rgba(255,255,255,0.75)",
"text-halo-width": 2
},
"source": "osm",
"source-layer": "place",
"type": "symbol"
}, {
"filter": ["all",
["in", "class", "bus", "rail", "airport"]
],
"id": "poi_transit",
"layout": {
"icon-image": "{class}_11",
"text-anchor": "left",
"text-field": "{name:latin} {name:nonlatin}",
"text-font": ["Kanit"],
"text-max-width": 9,
"text-offset": [
0.9,
0
],
"text-size": {
"stops": [
[
10,
6
],
[
15,
8
],
[
22,
9
]
]
}
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 14,
"paint": {
"icon-color": "rgba(66, 64, 64, 1)",
"icon-opacity": 0.7,
"text-color": "#666",
"text-halo-blur": 0.5,
"text-halo-color": "#ffffff",
"text-halo-width": 1
},
"source": "osm",
"source-layer": "poi",
"type": "symbol"
}, {
"filter": ["all",
["==", "$type", "Point"],
[">=", "rank",
1
],
["<", "rank",
7
]
],
"id": "poi_z14",
"layout": {
"icon-image": "{class}_11",
"text-anchor": "top",
"text-field": "{name_en} {name:nonlatin}",
"text-font": ["Kanit"],
"text-max-width": 9,
"text-offset": [
0,
0.6
],
"text-size": {
"stops": [
[
10,
6
],
[
15,
8
],
[
22,
9
]
]
}
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 14,
"paint": {
"icon-color": "rgba(66, 64, 64, 1)",
"icon-opacity": 0.7,
"text-color": "#666",
"text-halo-blur": 0.5,
"text-halo-color": "#ffffff",
"text-halo-width": 1
},
"source": "osm",
"source-layer": "poi",
"type": "symbol"
}, {
"filter": ["all",
["==", "$type", "Point"],
[">=", "rank",
7
],
["<", "rank",
20
]
],
"id": "poi_z15",
"layout": {
"icon-image": "{class}_11",
"text-anchor": "top",
"text-field": "{name_en} {name:nonlatin}",
"text-font": ["Kanit"],
"text-max-width": 9,
"text-offset": [
0,
0.6
],
"text-size": {
"stops": [
[
2,
6
],
[
10,
8
],
[
15,
9
]
]
}
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 15,
"paint": {
"icon-color": "rgba(66, 64, 64, 1)",
"icon-opacity": 0.7,
"text-color": "#666",
"text-halo-blur": 0.5,
"text-halo-color": "#ffffff",
"text-halo-width": 1
},
"source": "osm",
"source-layer": "poi",
"type": "symbol"
}, {
"filter": ["all",
["==", "$type", "Point"],
[">=", "rank",
20
]
],
"id": "poi_z16",
"layout": {
"icon-image": "{class}_11",
"text-anchor": "top",
"text-field": "{name_en} {name:nonlatin}",
"text-font": ["Kanit"],
"text-max-width": 9,
"text-offset": [
0,
0.6
],
"text-size": {
"stops": [
[
10,
6
],
[
15,
8
],
[
22,
9
]
]
}
},
"metadata": {
"vallaris:group": "Basemap"
},
"minzoom": 16,
"paint": {
"icon-color": "rgba(66, 64, 64, 1)",
"icon-opacity": 0.7,
"text-color": "#666",
"text-halo-blur": 0.5,
"text-halo-color": "#ffffff",
"text-halo-width": 1
},
"source": "osm",
"source-layer": "poi",
"type": "symbol"
}],
"bearing": 0,
"center": [
100.4915,
13.753727
],
"metadata": {
"vallaris:groups": {
"Basemap": {
"collapsed": true,
"color": "rgba(0,166,79,1)",
"name": "Basemap"
}
}
},
"pitch": 0,
"zoom": 15
}
การเพิ่มชั้นข้อมูล (Add Layer)
การเพิ่มชั้นข้อมูลไทล์ คือ การเพิ่มชั้นข้อมูลที่ต้องการนำมาแสดงผลบนแผนที่ ซึ่งแหล่งข้อมูลที่นำมาเพิ่มเป็นข้อมูลไทล์ ที่อยู่ในระบบ Vallaris Maps โดยสามารถเพิ่มชั้นข้อมูลที่ฟิลด์ sources ซึ่งไฮท์ไลท์ให้เห็นในตัวอย่างโครงสร้างการเพิ่มชั้นข้อมูล (Add Layer) เมื่อทำการเพิ่มข้อมูลไปยังฟิลด์ sources แล้วต้องมีการกำหนดรูปแบบการแสดงผลข้อมูลด้วย JSON Style ที่ฟิลด์ layers ควบคู่ไปด้วย
จากตัวอย่างโครงสร้างการเพิ่มชั้นข้อมูล (Layer) จะสังเกตเห็นข้อมูลที่อยู่ฟิลด์ sources มีข้อมูลจำนวน 1 ชั้นข้อมูล คือชั้นข้อมูลไทล์ (Tiles) ที่มี ชื่อว่า "Provinces Thailand" ซึ่งมีการดึงข้อมูลมาจากลิงก์ TileJSON มาใช้ในการแสดงผลและตกแต่งสไตล์
ตัวอย่างโครงสร้างการเพิ่มชั้นข้อมูล (Layer)
{
"version": 8,
"name": "Vallaris Blank",
"sources": {
"66ee6e264a092f62e2ce45c5": {
"id": "66ee6e264a092f62e2ce45c5",
"title": "Provinces Thailand",
"type": "vector",
"url": "https://va-cdn-02.vallarismaps.com/core/api/tiles/1.0-beta/tiles/66ee6e264a092f62e2ce45c5?api_key=<YOUR_API_KEY>"
}
},
"sprite": "https://va-cdn-02.vallarismaps.com/core/tiles/sprite/sprites",
"glyphs": "https://va-cdn-02.vallarismaps.com/core/tiles/fonts/{fontstack}/{range}.pbf",
"layers": [{
"id": "background",
"metadata": {
"vallaris:group": "Basemap"
},
"paint": {
"background-color": "rgba(0, 0, 0, 0)"
},
"type": "background"
}, {
"id": "provinces_th",
"maxzoom": 22,
"minzoom": 0,
"paint": {
"fill-color": "rgba(178, 199, 86,1)",
"fill-opacity": 0.5
},
"source": "66ee6e264a092f62e2ce45c5",
"source-layer": "66ee6e264a092f62e2ce45c5",
"type": "fill"
}],
"bearing": 0,
"center": [
102.368675,
14.151285
],
"metadata": {
"vallaris:groups": {
"Basemap": {
"collapsed": true,
"color": "rgba(0,166,79,1)",
"name": "Basemap"
}
}
},
"pitch": 0,
"zoom": 5
}