Display vector tiles and changed style¶
Display vector tiles and changed style
display_vector_tiles_and_changed_style.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Display vector tiles and changed style</title>
<meta property="og:description" content="Display vector tiles and changed style" />
<script src="./v0.10.1/mapray.min.js"></script>
<script src="./v0.10.1/maprayui.min.js"></script>
<link rel="stylesheet" href="./v0.10.1/mapray.css">
<style>
body {margin: 0; padding: 0;}
html, body, div#mapray-container { height: 100%; }
</style>
</head>
<body>
<div id="mapray-container"></div>
</body>
</html>
<script>
var style_json = {
"version": 8,
"sources": {
"ofmtiles": {
"type": "vector",
"minzoom": 2,
"maxzoom": 14,
"tiles": [ "https://tiles.openfreemap.org/planet/20241016_001001_pt/{z}/{x}/{y}.pbf" ]
}
},
"sprite_ofm": "https://tiles.openfreemap.org/sprites/ofm_f384/ofm",
"sprite": "https://opentiles.mapray.com/sprite/maki/sprite",
"glyphs": "https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf",
"layers": [
{
"id": "place_town",
"type": "symbol",
"source": "ofmtiles",
"source-layer": "place",
"minzoom": 9,
"filter": [
"match",
[ "get", "class" ],
[ "town" ], true,
false
],
"layout": {
"icon-image": ["image", "town"],
"icon-size": 1.5,
"text-field": ["get", "name"],
"text-font": [ "Noto Sans CJK JP Regular" ],
"text-letter-spacing": 0.1,
"text-max-width": 9,
"text-size": [
"interpolate",
[ "linear" ],
[ "zoom" ],
8, 10, // zoom 8 text-size 10
12, 12 // zoom 12 text-size 12
],
"text-transform": "uppercase",
"text-anchor": "top",
"text-offset": [ 0, -2 ]
},
"paint": {
"icon-color": "#ddf",
"icon-halo-color": [ "rgb", 96, 96, 96],
"icon-halo-width": 1,
"text-color": "#ddf",
"text-halo-blur": 1,
"text-halo-color": "#666",
"text-halo-width": 1
}
},
{
"id": "place_city",
"type": "symbol",
"source": "ofmtiles",
"source-layer": "place",
"minzoom": 2,
"filter": [
"match",
[ "get", "class" ],
[ "city" ], true,
[ "suburb" ], true,
false
],
"layout": {
"icon-image": ["image", "city"],
"icon-size": 1.5,
"text-field": ["get", "name"],
"text-font": [ "Noto Sans Italic" ],
"text-letter-spacing": 0.1,
"text-max-width": 9,
"text-size": [
"interpolate",
[ "linear" ],
[ "zoom" ],
8, 10, // zoom 8 text-size 10
12, 12 // zoom 12 text-size 12
],
"text-transform": "uppercase",
"text-anchor": "top",
"text-offset": [ 0, -2 ]
},
"paint": {
"icon-color": [ "match", ["get", "class"], ["suburb"], "#ddf", "#aaf"], // city #faa suburb #fdd
"icon-halo-color": [ "rgb", 96, 96, 96],
"icon-halo-width": 1,
"text-color": [ "match", ["get", "class"], ["suburb"], "#ddf", "#aaf"], // city #faa suburb #fdd
"text-halo-blur": 1,
"text-halo-color": "#666",
"text-halo-width": 1
}
},
{
"id": "place_prefecture",
"type": "symbol",
"source": "ofmtiles",
"source-layer": "place",
"minzoom": 6,
"filter": [
"match",
[ "get", "class" ],
[ "province" ], true,
false
],
"layout": {
"icon-image": ["image", "circle"],
"icon-size": 1,
"text-field": ["get", "name"],
"text-font": [ "Noto Sans Italic" ],
"text-letter-spacing": 0.1,
"text-max-width": 9,
"text-size": [
"interpolate",
[ "linear" ],
[ "zoom" ],
8, 10, // zoom 8 text-size 10
12, 12 // zoom 12 text-size 12
],
"text-transform": "uppercase",
"text-anchor": "top",
"text-offset": [ 0, -2 ]
},
"paint": {
"icon-color": "#88f",
"icon-halo-color": ["rgb", 64, 64, 64],
"icon-halo-width": 1,
"text-color": "#88f",
"text-halo-blur": 1,
"text-halo-color": "#444",
"text-halo-width": 1
}
},
{
"id": "place_capital",
"type": "symbol",
"source": "ofmtiles",
"source-layer": "place",
"minzoom": 2,
"filter": [
"all",
[ "match",
[ "get", "class" ],
[ "city" ], true,
false ],
[ "match",
[ "get", "capital" ],
2, true,
false ]
],
"layout": {
"icon-image": ["image", "circle"],
"icon-size": 1.5,
"text-field": ["get", "name"],
"text-font": [ "Noto Sans Italic" ],
"text-letter-spacing": 0.1,
"text-max-width": 9,
"text-size": [
"interpolate",
[ "linear" ],
[ "zoom" ],
8, 12, // zoom 8 text-size 12
12, 14 // zoom 12 text-size 14
],
"text-transform": "uppercase",
"text-anchor": "top",
"text-offset": [ 0, -2 ]
},
"paint": {
"icon-color": "#c8f",
"icon-halo-color": [ "rgb", 96, 96, 96],
"icon-halo-width": 1,
"text-color": "#c8f",
"text-halo-blur": 1,
"text-halo-color": "#666",
"text-halo-width": 1
}
},
{
"id": "place_country",
"type": "symbol",
"source": "ofmtiles",
"source-layer": "place",
"minzoom": 2,
"filter": [
"match",
[ "get", "class" ],
[ "country" ], true,
false
],
"layout": {
"icon-image": ["image", "circle"],
"icon-size": 1,
"text-field": [ "get", "name" ],
"text-font": [ "Noto Sans Italic" ],
"text-letter-spacing": 0.1,
"text-max-width": 9,
"text-size": [
"interpolate",
[ "linear" ],
[ "zoom" ],
8, 16, // zoom 8 text-size 16
12, 18 // zoom 12 text-size 18
],
"text-transform": "uppercase",
"text-anchor": "top",
"text-offset": [ 0, -2 ]
},
"paint": {
"icon-color": "#44f",
"icon-halo-color": ["rgb", 0, 0, 0],
"icon-halo-width": 1,
"text-color": "#44f",
"text-halo-blur": 1,
"text-halo-color": "#000",
"text-halo-width": 1
}
}
]
}
class TileJsonProvider extends mapray.vectile.TileProvider {
constructor() {
super();
}
requestMeta() {
const controller = new AbortController();
return {
promise: this.getMetaData(),
canceller: () => { controller.abort(); },
};
}
requestTile( area ) {
const controller = new AbortController();
return {
promise: this.getTileBinary( area ),
canceller: () => { controller.abort(); },
};
}
init( source ) {
if ( source && source['tiles'] ) {
this.prefix = source['tiles'][0];
this.minLevel = ( source?.minzoom ) ?? 0;
this.maxLevel = ( source?.maxzoom ) ?? 22;
}
}
getMetaData() {
return Promise.resolve( {
min_level: Number( this.minLevel ),
max_level: Number( this.maxLevel ),
} );
}
async getTileBinary( area ) {
const url = this.makeTileDataURL( area );
const response = await fetch( url );
if ( response.ok ) {
return response.arrayBuffer();
} else {
throw new Error( response.statusText );
}
}
makeTileDataURL( area ) {
return this.prefix.replace( '{z}', `${area.z}` ).replace( '{x}', `${area.x}` ).replace( '{y}', `${area.y}` );
}
}
class TileJsonProviderFactory extends mapray.vectile.ProviderFactory {
constructor() {
super();
this.provider = new TileJsonProvider();
}
createTileProvider( _sourceId, jsonSource ) {
if ( this.provider ) {
this.provider.init( jsonSource );
}
return this.provider;
}
createSpriteProvider( location ) {
return location ? new mapray.vectile.StandardSpriteProvider( location ) : null;
}
}
const cloudApi = new mapray.cloud.CloudApiV2({
tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
});
const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
} );
uiviewer.setCameraPosition( {
longitude: 140.092591,
latitude: 34.047398,
height: 268191
} );
uiviewer.setLookAtPosition( {
longitude: 140.071835,
latitude: 35.731372,
height: 25
} );
var style = mapray.vectile.StyleManager.create( uiviewer.viewer, style_json, new TileJsonProviderFactory() );
style.promise
.then( ( manager ) => {
uiviewer.viewer.setVectileManager( manager );
} )
.catch( () => uiviewer.viewer.setVectileManager( null ) );
</script>
Info
このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。