OpenLayers5 Workshop - 3.4 Making things look bright

3 Vector Tile
3.4 Making things look bright
ものを明るく見せる

There have been many attempts to create tools and formats for styling maps. The most popular formats were probably SLD and CartoCSS. A graphical tool that comes to mind is Atlas Styler. But none of these format or tools were really convenient to use.

マップをスタイルするためにツールとフォーマットを作成する試みがたくさんあります。最も一般的なフォーマットは、おそらく、SLD と CartoCSS です。頭に浮かぶグラフィカルツールは、Atlas Styler です。これらのフォーマット、または、ツールは、使うのに本当に便利ではありません。

Mapbox finally came up with Mapbox Studio, a very user friendly style editor, and the Mapbox Style format. The Mapbox Style format is supported by a growing number of applications, and a graphical Open Source editor, Maputnik, is available for creating and modifying Mapbox Style files.

Mapbox は、とても使いやすいスタイルエディタ、Mapbox Studio と Mapbox Style フォーマットをついに出しました。Mapbox Style フォーマットは、増え続けるアプリケーションによって支援され、グラフィカル Open Source エディタ Maputnik は、Mapbox Style ファイルを作成し編集することに利用できます。

The ol-mapbox-style package adds support for the Mapbox Style format to OpenLayers. Let's see if we can get a nicer looking map than the one from the previous exercise.

ol-mapbox-style パッケージは、OpenLayers に Mapbox Style フォーマットのためのサポートを追加します。前回の演習からより見栄えの良いマップを取得できるかみてみます。

Creating Mapbox Style files in Maputnik
Maputnik で Mapbox Style ファイルを作成

You can play with a live instance of Maputnik at https://maputnik.github.io/editor/, or download and install it locally. I have created a file with our ugly style. You can download that file, ugly.json, and open it in Maputnik to verify it looks just as ugly there as it does in our OpenLayers application:

https://maputnik.github.io/editor/ にあるか、または、ローカルでダウンロードしインストールして Maputnik のインスタンス化で楽しめます。私は ugly スタイルでファイルを作成しています。あなたはそのファイル、ugly.json をダウンロードし、OpenLayers アプリケーションで実行するのと同じようにそこで ugly かを確かめるために Maputnik で開きます。

Ugly style in Maputnik

Create a map from a Mapbox Style in OpenLayers
OpenLayers で Mapbox Style からマップを作成

We'll import the apply function from the ol-mapbox-style package, so we can simply have a map with all the contents from a style file rendered into our map-container. But first we need to install the package:

ol-mapbox-style から apply ファンクションをインポートすると、map-container に描画されたスタイルファイルからすべてのコンテンツと一緒にマップを簡単に持つことができます。しかし、最初にパッケージをインストールする必要があります：

npm install ol-mapbox-style@beta

（訳注：実施には npm install ol-mapbox-style）

Now we can import the function into our main.js:

main.js にファンクションをインポートします：

import {apply} from 'ol-mapbox-style';

We can also remove all other imports except for these two:

これら２つを除いて他のインポートすべても削除します：

import 'ol/ol.css';
import Overlay from 'ol/Overlay';

While we are at cleaning up, we can also delete the key, map, layer definitions. And we can – of course – remove all the style code. Finally, in index.html, we can remove the line that adds the Open Sans font, and the background-color for the map.

クリーンアップの間、key、map、layer 定義も削除できます。そして、もちろん、スタイルコードをすべて削除できます。最後に、index.html で Open Sans ファンとを追加するラインとマップの background-color を削除します。

Instead of the previous map code, we need a single line to create a map from our ugly Mapbox style, which we insert below our imports:

前述のマップコードのかわりに、ugly Mapbox スタイルからマップを作成するための１つのラインが必要で、import の下に挿入します：

const map = apply('map-container', './data/ugly.json');

This should give us the same ugly map as before, just with less application code. But hey, we wanted to make things look bright, and not look at an ugly map again. So let's open the 'OSM Bright' from Maputnik's Gallery Styles, and use that. I have prepared it already, and made the result available as http://localhost:3000/data/bright.json. So let's change the apply() line to

これは前回と同じ ugly map を、より少ないアプリケーションコードで、与えます。しかし、おい、明るく見せたいし、また、 ugly（見苦しい）マップを見たくありません。それでは、Maputnik's Gallery Styles から 'OSM Bright' を開き、それを使います。それはすでに準備されていて、http://localhost:3000/data/bright.json として結果を利用できます。それでは、 apply() ラインを変更します：

const map = apply('map-container', './data/bright.json');

What a relief. Finally we can enjoy a nice looking world map, and zoom to Boston!

ホッとしました。最後に、見栄えの良い世界地図を楽しみ、ボストンにズームインします。

A bright map of Boston

And note that our map is still interactive, meaning you get an info popup when you click on any geometry.

このマップは、まだ、インタラクティブな状態で、ジオメトリをクリックしたとき情報ポッパップを取得することに注意してください。

■□ Debian9 で試します■□
「Interact with VectorTile features」の例を表示します。 最初に、ol-mapbox-style パッケージをインストールします。

nob61@deb9-vmw:~/openlayers-workshop-en$ npm install ol-mapbox-style@beta
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

+ ol-mapbox-style@3.0.0-beta.9
added 2 packages from 1 contributor, removed 16 packages, updated 3 packages and audited 7504 packages in 10.782s found 0 vulnerabilities

「Styling a VectorTile layer」で使用した index.html のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp index.html index.html_styling
user@deb9-vmw:~/openlayers-workshop-en$ vim index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>OpenLayers</title>
  <style>
   html, body, #map-container {
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: sans-serif;
    background-color: rgb(248, 244, 240);
   }
   .arrow_box {
    position: relative;
    background: #000;
    border: 1px solid #003c88;
   }
   .arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
   }
   .arrow_box:after {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000;
    border-width: 10px;
    margin-left: -10px;
   }
   .arrow_box:before {
    border-color: rgba(0, 60, 136, 0);
    border-top-color: #003c88;
    border-width: 11px; 
    margin-left: -11px; 
   } 
   .arrow_box { 
    border-radius: 5px; 
    padding: 10px; 
    opacity: 0.8; 
    background-color: black; 
    color: white; 
   }
   #popup-content { 
    max-height: 200px; 
    overflow: auto; 
   } 
   #popup-content th { 
    text-align: left; 
    width: 125px; 
   }
  </style>
 </head>
 <body>
  <div id="map-container"></div>
  <div class="arrow_box" id="popup-container"> 
   <div id="popup-content"></div>
  </div>
 </body>
</html>

「Styling a VectorTile layer」」で使用した main.js のバックアップを保存して次のように修正します。削除するインポート（import）、key、layer、map の定義などは、ugly.json ファイルに記述されています。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_styling
user@deb9-vmw:~/openlayers-workshop-en$ vim main.js

import 'ol/ol.css';
import Overlay from 'ol/Overlay';
import {apply} from 'ol-mapbox-style'; 

const map = apply('map-container', './data/ugly.json'); 

const overlay = new Overlay({
 element: document.getElementById('popup-container'),
 positioning: 'bottom-center',
 offset: [0, -10],
 autoPan: true
});
map.addOverlay(overlay);

overlay.getElement().addEventListener('click', function() {
 overlay.setPosition();
});

map.on('click', function(e) {
 let markup = '';
 map.forEachFeatureAtPixel(e.pixel, function(feature) {
  markup += `${markup && '<hr>'}<table>`;
  const properties = feature.getProperties();
  for (const property in properties) {

   markup += `<tr><th>${property}</th><td>${properties[property]}</td></tr>`;

  }
  markup += '</table>';
 }, {hitTolerance: 1});

 if (markup) {
  document.getElementById('popup-content').innerHTML = markup;
  overlay.setPosition(e.coordinate);
 }
});

'npm start' を実行すると次のようなメッセージが表示され、コンパイルできませんました。

nob61@deb9-vmw:~/openlayers-workshop-en$ npm start

$gt; ol-workshop@0.0.0 start /home/nob61/openlayers-workshop-en
$gt; webpack-dev-server --mode=development

ℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
✖ ｢wdm｣: 
ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/util/color.js
Module parse failed: Unexpected token (17:5)
You may need an appropriate loader to handle this file type.
|  */
| class Color {
|     r: number;
|     g: number;
|     b: number;
 @ ./node_modules/ol-mapbox-style/index.js 23:0-60 190:38-43
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 ./main.js
---
ℹ ｢wdm｣: Failed to compile.