40 - TinyOWS 4 - TinyOWS と OpenLayers を使った WFS-T

40-4 TinyOWS と OpenLayers を使った WFS-T「Sample: WFS-T with TinyOWS and OpenLayers（http://mapserver.org/trunk/tinyows/openlayershowto.html）」
ここでは、「35 - WFS-T（WFS Transaction） 4 - Point, Line, Polygon レイヤを設定」で使った「ol016-nippon_bmi_akiruno_pgis.html」を修正して TinyOWS で WFS-T を試してみます。GeoServer のレイヤは MapServer に修正します。
最初に、tinyOWS を作成します。

user@debian7-vmw:~$ cd tinyows-1.1.0/demo
user@debian7-vmw:~/tinyows-1.1.0/demo$ ls
ABOUT       france.shp  install.sh     tinyows.xml     world.dbf  world.shx
france.dbf  france.shx  install.sh.in  tinyows.xml.in  world.shp
user@debian7-vmw:~/tinyows-1.1.0/demo$ cp tinyows.xml tinyows.xml_org
user@debian7-vmw:~/tinyows-1.1.0/demo$ vim tinyows.xml

<tinyows online_resource="http://127.0.0.1/cgi-bin/tinyows"
         schema_dir="/usr/local/share/tinyows/schema/">

  <pg host="127.0.0.1" user="user" password="password" dbname="nippon_bmi" port="5432" />

  <metadata name="TinyOWS Server"
            title="TinyOWS Server - Akiruno Service" />

  <contact name="Akiruno Server"
         site="http://www.debian7-vmw/"
         email="user@debian7-vmw" />

  <layer retrievable="1"
         writable="1"
         ns_prefix="npn"
         ns_uri="http://www.myhome.net/"
         name="akiruno_point"
         title="Akiruno Point" />

  <layer retrievable="1"
         writable="1"
         ns_prefix="npn"
         ns_uri="http://www.myhome.net/"
         name="akiruno_line"
         title="Akiruno Line" />

  <layer retrievable="1"
         writable="1"
         ns_prefix="npn"
         ns_uri="http://www.myhome.net/"
         name="akiruno_polygon"
         title="Akiruno Polygon" />

</tinyows>

user@debian7-vmw:~/tinyows-1.1.0/demo$ su
パスワード:
root@debian7-vmw:/home/user/tinyows-1.1.0/demo# cp tinyows.xml /etc
root@debian7-vmw:/home/user/tinyows-1.1.0/demo#
root@debian7-vmw:/home/user/tinyows-1.1.0/demo# exit
exit
user@debian7-vmw:~/tinyows-1.1.0/demo$ cd ../
user@debian7-vmw:~/tinyows-1.1.0$ ./tinyows --check

TinyOWS version:   1.1.0
FCGI support:      No
Config File Path:  /etc/tinyows.xml (TinyOWS XML)
PostGIS Version:   1.5.3
PostGIS dsn:       host=127.0.0.1 user=user password=password dbname=nippon_bmi port=5432 
Output Encoding:   UTF-8
Database Encoding: UTF8
Schema dir:        /usr/local/share/tinyows/schema/
Display bbox:      Yes
Estimated extent:  No
Check schema:      Yes
Check valid geoms: Yes
Available layers:
 - public.akiruno_point (2451) -> npn:akiruno_point [RW]
 - public.akiruno_line (2451) -> npn:akiruno_line [RW]
 - public.akiruno_polygon (2451) -> npn:akiruno_polygon [RW]

「ol020-nippon_bmi_akiruno_pgis.html」
---

<title>WMS Example BMI Akiruno PGIS2 TinyOWS</title>

---

  akirunoPoint = new OpenLayers.Layer.Vector("Akiruno Point", {
   strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy[0]],
   projection: new OpenLayers.Projection("EPSG:2451"),
   protocol: new OpenLayers.Protocol.WFS({
    version: "1.0.0",
    srsName: "EPSG:2451",
    url: "http://127.0.0.1/cgi-bin/tinyows",
    featureNS :  "http://www.myhome.net/",
    featureType: "akiruno_point",
    geometryName: "the_geom",
    schema: "http://127.0.0.1/cgi-bin/tinyows?request=DescribeFeatureType&service=wfs&version=1.0.0&typename=npn:akiruno_point"
    })
   });

  akirunoLine = new OpenLayers.Layer.Vector("Akiruno Line", {
   strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy[1]],
   projection: new OpenLayers.Projection("EPSG:2451"),
   protocol: new OpenLayers.Protocol.WFS({
    version: "1.0.0",
    srsName: "EPSG:2451",
    url: "http://127.0.0.1/cgi-bin/tinyows",
    featureNS :  "http://www.myhome.net/",
    featureType: "akiruno_line",
    geometryName: "the_geom",
    schema: "http://127.0.0.1/cgi-bin/tinyows?request=DescribeFeatureType&service=wfs&version=1.0.0&typename=npn:akiruno_line"
    })
   });

  akirunoPolygon = new OpenLayers.Layer.Vector("Akiruno Polygon", {
   strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy[2]],
   projection: new OpenLayers.Projection("EPSG:2451"),
   protocol: new OpenLayers.Protocol.WFS({
    version: "1.0.0",
    srsName: "EPSG:2451",
    url: "http://127.0.0.1/cgi-bin/tinyows",
    featureNS :  "http://www.myhome.net/",
    featureType: "akiruno_polygon",
    geometryName: "the_geom",
    schema: "http://127.0.0.1/cgi-bin/tinyows?request=DescribeFeatureType&service=wfs&version=1.0.0&typename=npn:akiruno_polygon"
    })
   });

---

「version=1.0.0」にします。
「version=1.1.0」にすると、フィーチャが表示できなくなりました。Firbug の「コンソール」->「All」の「POST」のメッセージに

<?xml version='1.0' encoding='UTF-8'?>
<ows:ExceptionReport
 xmlns='http://www.opengis.net/ows'
 xmlns:ows='http://www.opengis.net/ows'
 xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
 xsi:schemaLocation='http://www.opengis.net/ows http://schemas.opengis.net/ows/1.0.0/owsExceptionReport.xsd'
 version='1.1.0' language='en'>
 <ows:Exception exceptionCode='InvalidParameterValue' locator='request'>
  <ows:ExceptionText>XML request isn't valid</ows:ExceptionText>
 </ows:Exception>
</ows:ExceptionReport>

と表示されました。これは、理由はわかりませんが、GML3 がサポートされないためだとおもわれます。
参考：「Working Around the LibXML2 XSD Schema GML Bug（http://mapserver.org/tinyows/libxmlschemagmlbug.html）」

40 - TinyOWS 3 - マップファイルの TinyOWS 設定例

40-3 マップファイルの TinyOWS 設定例
「Configuring TinyOWS with a standard Mapfile」を参考にマップファイルの設定例をみてみます。実際に設定はしませんでした。
TinyOWS は設定ファイルとしてマップファイルをサポートしています。MapServer と TinyOWS をひとつのファイルで設定出来ます。TinyOWS は、すべてのマップファイルパラメータを扱えません。
マップファイルの場所を TinyOWS バイナリに "TINYOWS_MAPFILE" 環境設定を使って示します。

マップファイルの例 tinyows.map

MAP
 NAME "TinyOWS"
 WEB
  METADATA
   "tinyows_schema_dir" "/usr/local/share/tinyows/schema/"
   "tinyows_onlineresource" "127.0.0.1/cgi-bin/tinyows.fcgi"
   "wfs_title" "TinyOWS service provided by a MapFile"
   "wfs_contact" "foo@bar.net"
  END
 END

 LAYER
  NAME 'France'
  CONNECTIONTYPE postgis
  CONNECTION "host=127.0.0.1 user=user password=password  dbname=tinyows_demo port=5432"
  METADATA
   'wfs_title' 'France'
   'wfs_namespace_prefix' 'tows'
   'wfs_namespace_uri' 'http://www.tinyows.org/'
   'wfs_srs' 'EPSG:27582'
   'tinyows_table' 'france'
   'tinyows_writable' '1'
   'tinyows_retrievable' '1'
  END
  DUMP TRUE
 END
END

● CONNECTIONTYPE には、PostGIS のみ扱えます。
● TinyOWS は、マップファイルで有効な WFS パラメータをすべて扱えるわけではありません。しかし、マップファイル内で TinyOWS のすべての部分を設定できます。
● CONNECTION は、データベースの接続設定です。
● PROJECTION は、wfs_srs を設定します。
● マップファイルの LAYER と FILTER は構造解析されません。
● 初期値は、TinyOWS ですが、TinyOWS と MapServer によって分配された共通属性でもあります。
● TinyOWS は、マップファイルの DATA 要素を使えないので、各レイヤでtinyows_table（tinyows_schema）を使わなければなりません。
● DUMP が TRUE に設定されていないレイヤは、読み書きできません。

40 - TinyOWS 2 - XML ファイルを使った設定

40-2 XML ファイルを使った設定
「Configuring TinyOWS with an XML File（http://mapserver.org/trunk/tinyows/configfile.html）」
TinyOWS を設定する最も簡単な方法は、tinyows.xml ファイルを使います。
パスの初期設定は、/etc/tinyows.xml です。TINYOWS_CONFIG_FILE 環境設定で、独自のパス設定ができます。

40-2-1 設定ファイルの例
「Configuration file simple Example」
demo ディレクトリに tinyows.xml という設定ファイルの例があります。これを /etc ディレクトリにコピーします。

<tinyows online_resource="http://127.0.0.1/cgi-bin/tinyows"
         schema_dir="/usr/local/share/tinyows/schema/">

  <pg host="127.0.0.1" user="postgres" password="postgres" dbname="tinyows_demo" port="5432"/>

  <metadata name="TinyOWS Server"
            title="TinyOWS Server - Demo Service" />

  <layer retrievable="1"
         writable="1"
         ns_prefix="tows"
         ns_uri="http://www.tinyows.org/"
         name="world"
         title="World Administrative Boundaries" />

  <layer retrievable="1"
         writable="1"
         ns_prefix="tows"
         ns_uri="http://www.tinyows.org/"
         name="france"
         title="French Administrative Sub Boundaries (IGN - GeoFLA Departements)" />

</tinyows>

40-2-2 設定ファイルのテスト
「Testing your config.xml file」
次のコマンドで、設定ファイルのテストをします。

user@debian7-vmw:~/tinyows-1.1.0$ ./tinyows --check

Content-Type: application/xml

<?xml version='1.0' encoding='UTF-8'?>
<ows:ExceptionReport
 xmlns='http://www.opengis.net/ows'
 xmlns:ows='http://www.opengis.net/ows'
 xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
 xsi:schemaLocation='http://www.opengis.net/ows http://schemas.opengis.net/ows/1.0.0/owsExceptionReport.xsd'
 version='1.1.0' language='en'>
 <ows:Exception exceptionCode='ConnectionFailed' locator='init_OWS'>
  <ows:ExceptionText>Connection to database failed</ows:ExceptionText>
 </ows:Exception>
</ows:ExceptionReport>

データベースに接続できませんでした。
ログを出力するように tinyows.xml の内容に次のように追加します。

<tinyows online_resource="http://127.0.0.1/cgi-bin/tinyows"
         schema_dir="/usr/local/share/tinyows/schema/"
         log="/var/log/tinyows.log"
         log_level="15">
---

上記コマンドを実行します。ログをみると、

user@debian7-vmw:~/tinyows-1.1.0$ vim /var/log/tinyows.log 
[Wed Mar 19 20:32:27 2014] [EVENT] == TINYOWS STARTUP ==
[Wed Mar 19 20:32:27 2014] [ERROR] FATAL:  ???"postgres"???????????????
FATAL:  ???"postgres"???????????????

[Wed Mar 19 20:32:27 2014] [ERROR] Connection to database failed
[Wed Mar 19 20:32:27 2014] [EVENT] == TINYOWS SHUTDOWN ==

postgres ユーザで接続できないのを解決できなかったので、一般ユーザで接続できるようにします。

root@debian7-vmw:~# vim /etc/tinyows.xml
---
  <pg host="127.0.0.1" user="user" password="password" dbname="tinyows_demo" port="5432"/>
---

user@debian7-vmw:~/tinyows-1.1.0$ su - postgres
パスワード:
postgres@debian7-vmw:~$ psql tinyows_demo 
psql (9.1.12)
"help" でヘルプを表示します.

tinyows_demo=# \d

                  リレーションの一覧
 スキーマ |       名前        |     型     |  所有者  
----------+-------------------+------------+----------
 public   | france            | テーブル   | postgres
 public   | france_gid_seq    | シーケンス | postgres
 public   | geography_columns | ビュー     | postgres
 public   | geometry_columns  | テーブル   | postgres
 public   | spatial_ref_sys   | テーブル   | postgres
 public   | world             | テーブル   | postgres
 public   | world_gid_seq     | シーケンス | postgres
(7 行)

tinyows_demo=# ALTER VIEW geography_columns OWNER TO user;
ALTER VIEW
tinyows_demo=# ALTER TABLE geometry_columns OWNER TO user;
ALTER TABLE
tinyows_demo=# ALTER TABLE spatial_ref_sys OWNER TO user;
ALTER TABLE
tinyows_demo=# ALTER TABLE france OWNER TO user;
ALTER TABLE
tinyows_demo=# ALTER TABLE world OWNER TO user;
ALTER TABLE
tinyows_demo=# ALTER SEQUENCE france_gid_seq OWNER TO user;
ALTER SEQUENCE
tinyows_demo=# ALTER SEQUENCE world_gid_seq OWNER TO user;
ALTER SEQUENCE
tinyows_demo=# \d

                 リレーションの一覧
 スキーマ |       名前        |     型     | 所有者 
----------+-------------------+------------+--------
 public   | france            | テーブル   | user
 public   | france_gid_seq    | シーケンス | user
 public   | geography_columns | ビュー     | user
 public   | geometry_columns  | テーブル   | user
 public   | spatial_ref_sys   | テーブル   | user
 public   | world             | テーブル   | user
 public   | world_gid_seq     | シーケンス | user
(7 行)

tinyows_demo=# \q

user@debian7-vmw:~/tinyows-1.1.0$ ./tinyows --check
TinyOWS version:   1.1.0
FCGI support:      No
Config File Path:  /etc/tinyows.xml (TinyOWS XML)
PostGIS Version:   1.5.3
PostGIS dsn:       host=127.0.0.1 user=user password=password dbname=tinyows_demo port=5432 
Output Encoding:   UTF-8
Database Encoding: UTF8
Schema dir:        /usr/local/share/tinyows/schema/
Log file:          /var/log/tinyows.log
Log level:         ERROR EVENT QUERY SQL
Display bbox:      Yes
Estimated extent:  No
Check schema:      Yes
Check valid geoms: Yes
Available layers:
 - public.world (4326) -> tows:world [RW]
 - public.france (27582) -> tows:france [RW]

40 - TinyOWS 1 - インストール

40-1 インストール
今まで WFS-T（Web Feature Service - Transactions）を実行するのに GeoServer を使用しましたが、TinyOWS は軽量で、 WFS-Tを素速く実行できます。
TinyOWS（http://mapserver.org/trunk/tinyows/index.html）を参考に試してみます。

40-1-1 必要なもの
「Requires（TinyOWS Installation
http://mapserver.org/trunk/tinyows/serverinstallation.html）」にある次のものは Debian wheezy でサポートされています。
Synaptic パッケージマネージャでインストールを 確認してください。

LibXML2 (2.8 version or later)
PostGIS (1.5.x version or later)
PostgreSQL (with libpq headers)
cgi-bin をサポートする Web サーバ
Fast-CGI（推奨）私は使用しませんでした。

40-1-2 インストール
「Installing from a stable source release」に従って、tinyows をインストールしましたが、バイナリファイルが作成されませんでした。
その過程で追加インストールするパッケージがありました。一番下に示しておきます。


「“tinyows” 1.1.0-4 source package in Debian “unstable”（https://launchpad.net/debian/sid/+source/tinyows/1.1.0-4）」にある「tinyows_1.1.0.orig.tar.gz 」を使用してインストールします。

user@debian7-vmw:~/ダウンロード$ ls
---
tinyows_1.1.0.orig.tar.gz
---
user@debian7-vmw:~/ダウンロード$ tar xvzf tinyows_1.1.0.orig.tar.gz
user@debian7-vmw:~/ダウンロード$ cd tinyows-1.1.0/
user@debian7-vmw:~/ダウンロード/tinyows-1.1.0$ ./configure
checking for gcc... gcc
checking whether the C compiler works... yes
checking for C compiler default output file name... a.out
checking for suffix of executables...
checking whether we are cross compiling... no
checking for suffix of object files... o
checking whether we are using the GNU C compiler... yes
checking whether gcc accepts -g... yes
checking for gcc option to accept ISO C89... none needed
checking for X... no
checking for $CC... no
checking for -c... no
checking for $CFLAGS... no
checking for $CPPFLAGS... no
checking for conftest.$ac_ext... no
checking for >&5... no
checking for xml2-config... /usr/bin/xml2-config
checking for libxml2 version... 2.8.0
checking for git... yes
checking for pg_config... /usr/bin/pg_config
checking for PostgreSQL version... PostgreSQL 9.1.12
checking for shp2pgsql... /usr/bin/shp2pgsql
checking for flex... flex
checking lex output file root... lex.yy
checking lex library... -lfl
checking whether yytext is a pointer... yes
checking how to run the C preprocessor... gcc -E
checking for grep that handles long lines and -e... /bin/grep
checking for egrep... /bin/grep -E
checking for ANSI C header files... yes
checking for sys/types.h... yes
checking for sys/stat.h... yes
checking for stdlib.h... yes
checking for string.h... yes
checking for memory.h... yes
checking for strings.h... yes
checking for inttypes.h... yes
checking for stdint.h... yes
checking for unistd.h... yes
checking for FCGI_Accept in -lfcgi... no
checking now FCGI in alternate fastcgi include dir
checking for FCGI_Accept in -lfcgi... (cached) no
configure: WARNING: \n\nNo FastCGI support. Performances will be strongly reduced !\n
configure: creating ./config.status
config.status: creating Makefile
config.status: creating src/ows_define.h
config.status: creating demo/tinyows.xml
config.status: creating demo/install.sh
config.status: creating test/wfs_100/config_wfs_100.xml
config.status: creating test/wfs_110/config_wfs_110.xml
config.status: creating test/wfs_100/install_wfs_100.sh
config.status: creating test/wfs_110/install_wfs_110.sh
------------------------
NOTA: This TinyOWS version will need at least PostGIS 1.5.x
------------------------
user@debian7-vmw:~/ダウンロード/tinyows-1.1.0$ make
gcc -o tinyows src/fe/fe_comparison_ops.c src/fe/fe_error.c src/fe/fe_filter.c src/fe/fe_filter_capabilities.c src/fe/fe_function.c src/fe/fe_logical_ops.c src/fe/fe_spatial_ops.c src/mapfile/mapfile.c src/ows/ows_bbox.c src/ows/ows.c src/ows/ows_config.c src/ows/ows_error.c src/ows/ows_geobbox.c src/ows/ows_get_capabilities.c src/ows/ows_layer.c src/ows/ows_metadata.c src/ows/ows_psql.c src/ows/ows_request.c src/ows/ows_srs.c src/ows/ows_storage.c src/ows/ows_version.c src/struct/alist.c src/struct/array.c src/struct/buffer.c src/struct/cgi_request.c src/struct/list.c src/struct/mlist.c src/struct/regexp.c src/wfs/wfs_describe.c src/wfs/wfs_error.c src/wfs/wfs_get_capabilities.c src/wfs/wfs_get_feature.c src/wfs/wfs_request.c src/wfs/wfs_transaction.c src/ows/ows_libxml.c -I/usr/include/libxml2 -L/usr/lib -lxml2 -g -O2 -std=c99 -pedantic -Wall -I/usr/include/postgresql -L/usr/lib -lpq  -I/usr/include/fastcgi   -lfl
src/struct/cgi_request.c: In function ‘cgi_getback_query’:
src/struct/cgi_request.c:72:10: warning: variable ‘s’ set but not used [-Wunused-but-set-variable]
src/wfs/wfs_transaction.c: In function ‘wfs_insert_xml’:
src/wfs/wfs_transaction.c:319:42: warning: variable ‘layer_ns_prefix’ set but not used [-Wunused-but-set-variable]
user@debian7-vmw:~/ダウンロード/tinyows-1.1.0$ su
パスワード:
root@debian7-vmw:/home/user/ダウンロード/tinyows-1.1.0# make install
-----
TinyOWS Schema install dir in /usr/local/share/tinyows/schema
mkdir -p /usr/local/share/tinyows
rm -rf /usr/local/share/tinyows/schema
cp -rf schema /usr/local/share/tinyows/
-----
Now:
 1) copy 'tinyows' binary to cgi-bin directory
 2) - put a workable tinyows.xml file in /etc dir
    - OR launch 'make install-demo' as a superuser
root@debian7-vmw:/home/user/ダウンロード/tinyows-1.1.0# ls
LICENSE      Makefile.vc  VERSION    demo  nmake.opt  test
Makefile     NEWS      configure    doc   schema     tinyows
Makefile.in  README      configure.in    ms4w  src
root@debian7-vmw:/home/user/ダウンロード/tinyows-1.1.0# make install-demo





次に、tinyows バイナリを cgi-bin にコピーします。
root@debian7-vmw:/home/user/ダウンロード/tinyows-1.1.0# cp tinyows /usr/lib/cgi-bin/

参考：
user@debian7-vmw:~$ cd ダウンロード
user@debian7-vmw:~/ダウンロード$ wget http://download.osgeo.org/mapserver/tinyows-1.1.0.tar.bz2
--2014-03-14 20:46:11--  http://download.osgeo.org/mapserver/tinyows-1.1.0.tar.bz2
download.osgeo.org (download.osgeo.org) をDNSに問いあわせています... 140.211.15.132
download.osgeo.org (download.osgeo.org)|140.211.15.132|:80 に接続しています... 接続しました。
HTTP による接続要求を送信しました、応答を待っています... 200 OK
長さ: 1182951 (1.1M) [application/x-bzip2]
`tinyows-1.1.0.tar.bz2' に保存中

100%[======================================>] 1,182,951    366K/s 時間 3.2s   

2014-03-14 20:46:20 (366 KB/s) - `tinyows-1.1.0.tar.bz2' へ保存完了 [1182951/1182951]
user@debian7-vmw:~/ダウンロード$ ls
---
tinyows-1.1.0.tar.bz2
---
user@debian7-vmw:~/ダウンロード$ tar xvjf tinyows-1.1.0.tar.bz2
user@debian7-vmw:~/ダウンロード$ cd tinyows-1.1.0/
user@debian7-vmw:~/ダウンロード/tinyows-1.1.0$ ./configure
checking for gcc... gcc
checking whether the C compiler works... yes
checking for C compiler default output file name... a.out
checking for suffix of executables...
checking whether we are cross compiling... no
checking for suffix of object files... o
checking whether we are using the GNU C compiler... yes
checking whether gcc accepts -g... yes
checking for gcc option to accept ISO C89... none needed
checking for X... no
checking for $CC... no
checking for -c... no
checking for $CFLAGS... no
checking for $CPPFLAGS... no
checking for conftest.$ac_ext... no
checking for >&5... no
checking for xml2-config... no
configure: error: couldn't find xml2-config, try using --with-xml2-config=PATH
user@debian7-vmw:~/ダウンロード/tinyows-1.1.0$ make
make: *** ターゲットが指定されておらず, makefile も見つかりません.  中止.

"Debian xml2-config" で検索すると 「libxml2-dev」のパッケージに含まれているようです。
 Synaptic パッケージマネージャで「libxml2-dev」をインストールします。

user@debian7-vmw:~/ダウンロード/tinyows-1.1.0$ ./configure
checking for gcc... gcc
checking whether the C compiler works... yes
checking for C compiler default output file name... a.out
checking for suffix of executables...
checking whether we are cross compiling... no
checking for suffix of object files... o
checking whether we are using the GNU C compiler... yes
checking whether gcc accepts -g... yes
checking for gcc option to accept ISO C89... none needed
checking for X... no
checking for $CC... no
checking for -c... no
checking for $CFLAGS... no
checking for $CPPFLAGS... no
checking for conftest.$ac_ext... no
checking for >&5... no
checking for xml2-config... /usr/bin/xml2-config
checking for libxml2 version... 2.8.0
checking for git... yes
checking for pg_config... /usr/bin/pg_config
You need to install postgresql-server-dev-X.Y for building a server-side extension or libpq-dev for building a client-side application.
checking for PostgreSQL version...
You need to install postgresql-server-dev-X.Y for building a server-side extension or libpq-dev for building a client-side application.
./configure: line 3095: test: : integer expression expected
You need to install postgresql-server-dev-X.Y for building a server-side extension or libpq-dev for building a client-side application.
You need to install postgresql-server-dev-X.Y for building a server-side extension or libpq-dev for building a client-side application.
You need to install postgresql-server-dev-X.Y for building a server-side extension or libpq-dev for building a client-side application.
You need to install postgresql-server-dev-X.Y for building a server-side extension or libpq-dev for building a client-side application.
checking for shp2pgsql... /usr/bin/shp2pgsql
checking for flex... no
checking for lex... no
configure: error: "TinyOWS: Need flex to compile"

 Synaptic パッケージマネージャで「postgresql-server-dev-9.1」をインストールします。（依存関係のあるパッケージもインストールします。）

user@debian7-vmw:~/ダウンロード/tinyows-1.1.0$ ./configure
checking for gcc... gcc
checking whether the C compiler works... yes
checking for C compiler default output file name... a.out
checking for suffix of executables...
checking whether we are cross compiling... no
checking for suffix of object files... o
checking whether we are using the GNU C compiler... yes
checking whether gcc accepts -g... yes
checking for gcc option to accept ISO C89... none needed
checking for X... no
checking for $CC... no
checking for -c... no
checking for $CFLAGS... no
checking for $CPPFLAGS... no
checking for conftest.$ac_ext... no
checking for >&5... no
checking for xml2-config... /usr/bin/xml2-config
checking for libxml2 version... 2.8.0
checking for git... yes
checking for pg_config... /usr/bin/pg_config
checking for PostgreSQL version... PostgreSQL 9.1.12
checking for shp2pgsql... /usr/bin/shp2pgsql
checking for flex... no
checking for lex... no
configure: error: "TinyOWS: Need flex to compile"

 Synaptic パッケージマネージャで「flex」をインストールします。

user@debian7-vmw:~/ダウンロード/tinyows-1.1.0$ ./configure
checking for gcc... gcc
checking whether the C compiler works... yes
checking for C compiler default output file name... a.out
checking for suffix of executables...
checking whether we are cross compiling... no
checking for suffix of object files... o
checking whether we are using the GNU C compiler... yes
checking whether gcc accepts -g... yes
checking for gcc option to accept ISO C89... none needed
checking for X... no
checking for $CC... no
checking for -c... no
checking for $CFLAGS... no
checking for $CPPFLAGS... no
checking for conftest.$ac_ext... no
checking for >&5... no
checking for xml2-config... /usr/bin/xml2-config
checking for libxml2 version... 2.8.0
checking for git... yes
checking for pg_config... /usr/bin/pg_config
checking for PostgreSQL version... PostgreSQL 9.1.12
checking for shp2pgsql... /usr/bin/shp2pgsql
checking for flex... flex
checking lex output file root... lex.yy
checking lex library... -lfl
checking whether yytext is a pointer... yes
checking how to run the C preprocessor... gcc -E
checking for grep that handles long lines and -e... /bin/grep
checking for egrep... /bin/grep -E
checking for ANSI C header files... yes
checking for sys/types.h... yes
checking for sys/stat.h... yes
checking for stdlib.h... yes
checking for string.h... yes
checking for memory.h... yes
checking for strings.h... yes
checking for inttypes.h... yes
checking for stdint.h... yes
checking for unistd.h... yes
checking for FCGI_Accept in -lfcgi... no
checking now FCGI in alternate fastcgi include dir
checking for FCGI_Accept in -lfcgi... (cached) no
configure: WARNING: \n\nNo FastCGI support. Performances will be strongly reduced !\n
configure: creating ./config.status
config.status: creating Makefile
config.status: creating src/ows_define.h
config.status: creating demo/tinyows.xml
config.status: creating demo/install.sh
config.status: creating test/wfs_100/config_wfs_100.xml
config.status: creating test/wfs_110/config_wfs_110.xml
config.status: creating test/wfs_100/install_wfs_100.sh
config.status: creating test/wfs_110/install_wfs_110.sh
------------------------
NOTA: This TinyOWS version will need at least PostGIS 1.5.x
------------------------

user@debian7-vmw:~/ダウンロード/tinyows-1.1.0$ su
パスワード:
root@debian7-vmw:/home/user/ダウンロード/tinyows-1.1.0# make install
-----
TinyOWS Schema install dir in /usr/local/share/tinyows/schema
mkdir -p /usr/local/share/tinyows
rm -rf /usr/local/share/tinyows/schema
cp -rf schema /usr/local/share/tinyows/
-----
Now:
 1) copy 'tinyows' binary to cgi-bin directory
 2) - put a workable tinyows.xml file in /etc dir
    - OR launch 'make install-demo' as a superuser
root@debian7-vmw:/home/user/ダウンロード/tinyows-1.1.0# make install-demo

39 - OpenLayers Mobile 6 - jQuery Mobile

39-6 OpenLayers with jQuery Mobile
「OpenLayers with jQuery Mobile（mobile-jq.html）」を参考に、 jQuery Mobile を使用して地図を表示します。
jQuery Mobile は、HTML5 の仕様で、タッチ操作に最適化したモバイルアプリケーションを開発するための JavaScript のフレームワークです。

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「mobile-jq.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「mobile_jq.js」を開きます。

c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。

d 「ファイル」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol019f-nippon_bmi_takata_pgis.html」と入力し、「次へ」ボタンをクリックします。

e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「mobile-jq.html」の内容をコピーして「ol019f-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile-jq_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-jq.js」の内容をコピーして貼り付け、修正します。

h 同じように、新規に「style.mobile-jq_takata.css」ファイルを作成し、「File Template」ウィンドウで「CSS Template」をクリックして選択し、「完了」ボタンをクリックして、「style.mobile-jq.css」の内容をコピーして貼り付け、修正します。

「ol019f-nippon_bmi_takata_pgis.html」

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>OpenLayers with jQuery Mobile(R.Takata)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">

<!-- 追加 -->
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2452.js"></script>
<!-- 追加ここまで -->

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

<!-- 修正 -->
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" />
  <link rel="stylesheet" href="style.mobile-jq_takata.css" type="text/css">
  <script type="text/javascript" src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script>
  <script src="mobile-base_takata.js"></script>
  <script src="mobile-jq_takata.js"></script>
<!-- 修正ここまで -->

 </head>
 <body>
  <h1 id="title">OpenLayers with jQuery Mobile(R.Takata)</h1>
  <div id="tags">
   mobile, jquery
  </div>
  <p id="shortdesc">
   Using jQuery Mobile to display an OpenLayers map.
  </p>

  <div data-role="page" id="mappage">
   <div data-role="content">
    <div id="map"></div>
   </div>
   <div data-role="footer">
<!-- 「http://ws.geonames.org/searchJSON?'」 がサービス停止のため
    <a href="#searchpage" data-icon="search" data-role="button">Search</a>
-->
    <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>

---

「mobile-jquery_takata.js」
---

$('#popup').live('pageshow',function(event, ui){
 var li = "";
 for(var attr in selectedFeature.attributes){
  li += "<li><div style='width:25%;float:left'>"
   + attr
   + "</div><div style='width:75%;float:right'>" 
   + selectedFeature.attributes[attr] + "</div></li>";
 }
 $("ul#details-list").empty().append(li).listview("refresh");
});

/* 「http://ws.geonames.org/searchJSON?'」 がサービス停止のため検索できません
$('#searchpage').live('pageshow',function(event, ui){
 $('#query').bind('change', function(e){
  $('#search_results').empty();
   if ($('#query')[0].value === '') {
    return;
   }
   $.mobile.showPageLoadingMsg();

   // Prevent form send
   e.preventDefault();

   var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10';
    searchUrl += '&name_startsWith=' + $('#query')[0].value;
    $.getJSON(searchUrl, function(data) {
     $.each(data.geonames, function() {
      var place = this;
      $('<li>')
       .hide()
       .append($('<h2 />', {
        text: place.name
       }))
       .append($('<p />', {
        html: '<b>' + place.countryName + '</b> ' + place.fcodeName
       }))
      .appendTo('#search_results')
      .click(function() {
       $.mobile.changePage('#mappage');
       var lonlat = new OpenLayers.LonLat(place.lng, place.lat);
       map.setCenter(lonlat.transform(gg, sm), 10);
      })
     .show();
    });
    $('#search_results').listview('refresh');
    $.mobile.hidePageLoadingMsg();
    });
 });
 // only listen to the first event triggered
 $('#searchpage').die('pageshow', arguments.callee);
});
*/

function initLayerList() {
---

39 - OpenLayers Mobile 5 - Mobile Sencha

39-5 Mobile Sencha
「Mobile Sencha（mobile-sencha.html）」を参考に、 Sencha Touch を使用して地図を表示します。
Sencha Touch は、HTML5 の仕様でモバイルアプリケーションを開発するための JavaScript のフレームワークです。

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「mobile-sencha.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「mobile_base.js」と「mobile_sencha.js」を開きます。

c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。

d 「ファイル」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol019e-nippon_bmi_takata_pgis.html」と入力し、「次へ」ボタンをクリックします。

e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「mobile-sencha.html」の内容をコピーして「ol019e-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile-base_takata.js」と「mobile-sencha_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-base.js」と「mobile-sencha.js」の内容をコピーして貼り付け、修正します。

次のアイコンは、OpenLayers ホームページの 「Release Examples (2.13.1)」からダウンロードしました。
mobile-loc.png
minus1.png
list.png

「ol019e-nippon_bmi_takata_pgis.html」でボタンの表示、「mobile-sencha_takata.js」でボタンが押されたときの動作、「mobile-base_takata.js」で地図の表示が設定されています。

「ol019e-nippon_bmi_takata_pgis.html」

<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>OpenLayers with Sencha Touch(R.Takata)</title>

<!-- 追加 -->
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2452.js"></script>
<!-- 追加ここまで -->

<!-- 修正 -->
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" />
  <script type="text/javascript" src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script>
<!-- 修正ここまで -->

  <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css">
  <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"></script>

<!-- 修正 -->
  <script src="mobile-sencha_takata.js"></script>
  <script src="mobile-base_takata.js"></script>
<!-- 修正ここまで -->

  <style>
/* 「http://ws.geonames.org/searchJSON?'」 がサービス停止のため
   .searchList {
    min-height: 150px;
   }
   .close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
   }
*/

   img.minus {
    -webkit-mask-image: url(OpenLayers-2.13.1/img/minus1.png); /* 修正 */
   }
   img.layers {
    -webkit-mask-image: url(OpenLayers-2.13.1/img/list.png); /* 修正 */
   }

   .gx-layer-item {
    margin-left: 10px;
   }
   #map {
    width: 100%;
    height: 100%;
   }
   .olControlAttribution {
    font-size: 10px;
    bottom: 5px;
    right: 5px;
   }
   #title, #tags, #shortdesc {
    display: none;
   }
  </style>

  <script>
   var app = new Ext.Application({
    name: "ol",
    launch: function() {
     this.viewport = new Ext.Panel({
      fullscreen: true,
      dockedItems: [{
       dock: "bottom",
       xtype: "toolbar",
       ui: "light",
       layout: {
        pack: "center"
       },
       items: [

/* 「http://ws.geonames.org/searchJSON?'」 がサービス停止のため検索できません
                 {
        iconCls: "search",
        iconMask: true,
        handler: function() {
         // this is the app
         if (!app.searchFormPopupPanel) {
          app.searchFormPopupPanel = new App.SearchFormPopupPanel({
           map: map
          });
         }
         app.searchFormPopupPanel.show('pop');
        }
       },
*/

         {
       iconCls: "locate",
       iconMask: true,
       handler: function() {
        var geolocate = map.getControlsBy("id", "locate-control")[0];
        if (geolocate.active) {
         geolocate.getCurrentLocation();
        } else {
         geolocate.activate();
        }
       }
      }, {

---
「mobile-base_takata.js」
---
/**
 * Custom class for the Search
 */

/* 「http://ws.geonames.org/searchJSON?'」 がサービス停止のため検索できません
App.SearchFormPopupPanel = Ext.extend(Ext.Panel, {
 map: null,
 floating: true,
 modal: true,
 centered: true,
 hideOnMaskTap: true,
 width: Ext.is.Phone ? undefined : 400,
 height: Ext.is.Phone ? undefined : 400,
 scroll: false,
 layout: 'fit',
 fullscreen: Ext.is.Phone ? true : undefined,
 url: 'http://ws.geonames.org/searchJSON?',
 errorText: 'Sorry, we had problems communicating with geonames.org. Please try again.',
 errorTitle: 'Communication error',
 maxResults: 6,
 featureClass: "P",
    
 createStore: function(){
  this.store = new Ext.data.Store({
   model: 'Geonames',
   proxy: {
    type: 'scripttag',
    timeout: 5000,
    listeners: {
     exception: function(){
      this.hide();
      Ext.Msg.alert(this.errorTitle, this.errorText, Ext.emptyFn);
     },
     scope: this
    },
    url: this.url,
    reader: {
     type: 'json',
     root: 'geonames'
    }
   }
  });
 },

 doSearch: function(searchfield, evt){
  var q = searchfield.getValue();
  this.store.load({
   params: {
    featureClass: this.featureClass,
    maxRows: this.maxResults,
    name_startsWith: encodeURIComponent(q)
   }
  });
 },

//
 onItemTap: function(dataView, index, item, event){
  var record = this.store.getAt(index);
  var lon = record.get('lng');
  var lat = record.get('lat');
  var lonlat = new OpenLayers.LonLat(lon, lat);
  map.setCenter(lonlat.transform(gg, sm), 12);
  this.hide("pop");
 },
//

 initComponent: function(){
  this.createStore();
  this.resultList = new Ext.List({
   scroll: 'vertical',
   cls: 'searchList',
   loadingText: "Searching ...",
   store: this.store,
   itemTpl: '<div>{name} ({countryName})</div>',
   listeners: {
    itemtap: this.onItemTap,
    scope: this
   }
  });

  this.formContainer = new Ext.form.FormPanel({
   scroll: false,
   items: [{
    xtype: 'button',
    cls: 'close-btn',
    ui: 'decline-small',
    text: 'Close',
    handler: function(){
     this.hide();
    },
    scope: this 
   }, {
    xtype: 'fieldset',
    scroll: false,
    title: 'Search for a place',
    items: [{
     xtype: 'searchfield',
     label: 'Search',
     placeHolder: 'placename',
     listeners: {
      action: this.doSearch,
      scope: this
     }
    },
    this.resultList
    ]
   }]
  });

  this.items = [{
   xtype: 'panel',
   layout: 'fit',
   items: [this.formContainer]
  }];
  App.SearchFormPopupPanel.superclass.initComponent.call(this);
 }
});
*/

---

39 - OpenLayers Mobile 4 - Mobile Drawing

39-4 Mobile Drawing
「Mobile Drawing（mobile-drawing.html）」を参考に、モバイル機器で使用する編集ツールバーを追加します。

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「mobile-drawing.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「mobile_drawing.js」を開きます。

c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。

d 「ファイル」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol019d-nippon_bmi_takata_pgis.html」と入力し、「次へ」ボタンをクリックします。

e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「mobile-drawing.html」の内容をコピーして「ol019d-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile-drawing_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-drawing.js」の内容をコピーして貼り付け、修正します。

「ol019d-nippon_bmi_takata_pgis.html

<!DOCTYPE html>
<html>
 <head>
  <title>OpenLayers Mobile Drawing(R.Takata)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">

<!-- 追加 -->
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2452.js"></script>
<!-- 追加ここまで -->

<!-- 修正 -->
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" />
  <script type="text/javascript" src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script>
  <script src="mobile-drawing_takata.js"></script>
<!-- 修正ここまで -->
  <style>

---

「mobile-drawing_takata.js」

var bounds = new OpenLayers.Bounds(55000,-121000,78000,-97000); // 追加

function init() {

---

/*
 var osm = new OpenLayers.Layer.OSM();
 osm.wrapDateLine = false;
*/

 map = new OpenLayers.Map({
  div: 'map',
//  projection: 'EPSG:900913',
//  numZoomLevels: 18,

// ここから追加
  projection: new OpenLayers.Projection("EPSG:2452"),
  displayProjection: new OpenLayers.Projection("EPSG:4326"),
  maxResolution: 'auto',
  units: 'meters',
  maxExtent: bounds,
  restrictedExtent: bounds.clone(),
 // ここまで

  controls: [
   new OpenLayers.Control.TouchNavigation({
    dragPanOptions: {
     enableKinetic: true
    }
   }),
   new OpenLayers.Control.Zoom(),
   toolbar
  ],
//  layers: [osm, vector],

// ここから追加
  layers: [
   new OpenLayers.Layer.WMS( "R.Takata Height WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata5m-epsg2452'
    },{
     isBaselayer: true
   }),

   new OpenLayers.Layer.WMS( "Iwate Kuiki WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:iwate_kuiki',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Kukakusen WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_kukakusen',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Choaza WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_choaza',
     transparent: true,

     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Kaigan WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_kaigan',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Suigai WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_suigai',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Suiiki WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_suiiki',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Suikozo WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_suikozo',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Doro WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_doro',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Dorokozo WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_dorokozo',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Kido WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_kido',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Kenchiku WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_kenchiku',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "Iwate Public Facilities WMS",
    "http://192.168.1.200:8080/geoserver/wms",
     layers: 'npn:iwate_pf',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),
   vector
  ],
// 追加ここまで

//  center: new OpenLayers.LonLat(0, 0),
//  zoom: 1,
  center: bounds.getCenterLonLat(), // 修正
  zoom: 0,
  theme: null
 });

 // activate the first control to render the "navigation icon"
 // as active
 toolbar.controls[0].activate();
}

39 - OpenLayers Mobile 3 - Mobile Layers

39-3 Mobile Layers
「Mobile Layers（mobile-layers.html）」を参考に、WMS、WFS、KML レイヤを表示します。

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「mobile-layers.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「mobile_layers.js」を開きます。

c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。

d 「ファイル」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol019c-nippon_bmi_takata_pgis.html」と入力し、「次へ」ボタンをクリックします。

e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「mobile-layers.html」の内容をコピーして「ol019c-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile-layers_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-layers.js」の内容をコピーして貼り付け、修正します。

「ol019c-nippon_bmi_takata_pgis.html」

<!DOCTYPE html>
<html>

  <head>
  <title>OpenLayers Mobile Layers(R.Takata)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">

<!-- 追加 -->
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2452.js"></script>
<!-- 追加ここまで -->

<!-- 修正 -->
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" />
  <link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css">
  <script type="text/javascript" src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script>
  <script src="mobile-layers_takata.js"></script>
<!-- 修正ここまで -->

---

「mobile-layers_takata.js」

// initialize map when page ready
var map;
var bounds = new OpenLayers.Bounds(55000,-121000,78000,-97000); // 追加

// Get rid of address bar on iphone/ipod
var fixSize = function() {
 window.scrollTo(0,0);
 document.body.style.height = '100%';
 if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
  if (document.body.parentNode) {
   document.body.parentNode.style.height = '100%';
  }
 }
};

setTimeout(fixSize, 700);
setTimeout(fixSize, 1500);

// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; // 修正

function init() {
 map = new OpenLayers.Map({
  div: "map",
  theme: null,

// ここから追加
  projection: new OpenLayers.Projection("EPSG:2452"),
  displayProjection: new OpenLayers.Projection("EPSG:4326"),
  maxResolution: 'auto',
  units: 'meters',
  maxExtent: bounds,
  restrictedExtent: bounds.clone(),
 // ここまで

  controls: [
   new OpenLayers.Control.Attribution(),
   new OpenLayers.Control.TouchNavigation({
    dragPanOptions: {
     enableKinetic: true
    },
   }),
   new OpenLayers.Control.Zoom()    
  ]
 });

// ここから修正
 var wms = new OpenLayers.Layer.WMS( "R.Takata Height WMS",
  "http://192.168.1.200:8080/geoserver/wms",
  {
   layers: 'npn:rikuzentakata5m-epsg2452'
  },{
   isBaselayer: true
 });

 var kml = new OpenLayers.Layer.Vector("KML", {
  projection: map.displayProjection,
  strategies: [new OpenLayers.Strategy.Fixed()],
  protocol: new OpenLayers.Protocol.HTTP({
   url: "kml/rikuzentakata.kml",
   format: new OpenLayers.Format.KML({
    extractStyles: true,
    extractAttributes: true
   })
  }),
  renderers: renderer
 });

 var wfs = new OpenLayers.Layer.Vector( "R.Takata Kukakusen WFS", {
  strategies: [new OpenLayers.Strategy.Fixed()],
  protocol: new OpenLayers.Protocol.WFS({
   url: "http://192.168.1.200:8080/geoserver/wfs",
   featureType: "rikuzentakata_kukakusen",
   featureNS: "http://www.myhome.net/npn"
  }),
  renderers: renderer
 });
 // ここまで

 map.addLayers([wms, wfs, kml]);
// map.addLayers([wms, wfs]);
// map.setCenter(new OpenLayers.LonLat(-104, 42), 3);
 map.setCenter(bounds.getCenterLonLat(), 0); // 追加
};

39 - OpenLayers Mobile 2 - Mobile Navigation

39-2 Mobile Navigation
「Mobile Navigation（mobile-navigation.html）」を参考に、マルチタッチデバイス専用のナビゲーションを試してみます。
１本の指でダブルタップするとズームイン、２本の指で（シングル）タップするとズームアウトします。

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「mobile-navigation.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「mobile_navigation.js」を開きます。

c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。

d 「ファイル」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol019b-nippon_bmi_takata_pgis.html」と入力し、「次へ」ボタンをクリックします。

e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「mobile_navigation.html」の内容をコピーして「ol019b-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile-navigation_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-navigation.js」の内容をコピーして貼り付け、修正します。

「ol019b-nippon_bmi_takata_pgis.html」

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Mobile Navigation Example(R.Takata)</title>

<!-- 追加 -->
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2452.js"></script>
<!-- 追加ここまで -->

<!-- 修正 -->
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" />
  <link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css">
  <script type="text/javascript" src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script>
  <script type="text/javascript" src="mobile-navigation_takata.js"></script>
<!-- 修正ここまで -->

<!-- 追加 地図に合わせてビューを変更-->
  <style>
   .smallmap {
    width: 256px;
    height: 256px;
    border: 1px solid #ccc;
   }
  </style>
<!-- 追加ここまで -->
 </head>

 <body onload="init()">
  <h1 id="title">Mobile Navigation(R.Takata)</h1>
  <div id="tags">
   mobile, touch, drag, move, zoom, navigate
  </div>
  <div id="shortdesc">Demonstrate map navigation on mobile</div>
  <div id="map" class="smallmap"></div>
  <div id="docs">

---

「mobile-navigation_takata.js」

var map;
var bounds = new OpenLayers.Bounds(55000,-121000,78000,-97000); // 追加

function init() {
 map = new OpenLayers.Map({
  div: "map",
  theme: null,
//  projection: new OpenLayers.Projection("EPSG:900913"),
//  numZoomLevels: 18,

// ここから追加
  projection: new OpenLayers.Projection("EPSG:2452"),
  displayProjection: new OpenLayers.Projection("EPSG:4326"),
  maxResolution: 'auto',
  units: 'meters',
  maxExtent: bounds,
 // ここまで

  controls: [
   new OpenLayers.Control.TouchNavigation({
    dragPanOptions: {
     enableKinetic: true
    }
   }),
   new OpenLayers.Control.Zoom()
  ],

  layers: [
/*
   new OpenLayers.Layer.OSM("OpenStreetMap", null, {
    transitionEffect: 'resize'
   })
*/

// ここから追加（mobile_tanaka.js と同じ）
   new OpenLayers.Layer.WMS( "R.Takata Height WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata5m-epsg2452'
    },{
     isBaselayer: true
   }),
---
// 追加ここまで
  ]
 });

// map.setCenter(new OpenLayers.LonLat(0, 0), 3);
 map.zoomToMaxExtent();
}

39 - OpenLayers Mobile 1 - OpenLayers Mobile

39-1 OpenLayers Mobile

「OpenLayers Mobile（mobile.html）」を参考に、陸前高田市の地図を表示してみます。

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「mobile.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「mobile.js」を開きます。

c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。

d 「ファイル」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol019-nippon_bmi_takata_pgis.html」と入力し、「次へ」ボタンをクリックします。

e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「mobile.html」の内容をコピーして「ol019-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile.js」の内容をコピーして貼り付け、修正します。

「ol019-nippon_bmi_takata_pgis.html」

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Basic Mobile Example(R.Takata)</title>

<!-- 追加 -->
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2452.js"></script>
<!-- 追加ここまで -->

<!-- 修正 -->
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css">
  <script src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script>
  <script src="mobile_takata.js"></script>
<!-- 修正ここまで -->

  <style>
---

  </style>
 </head>
 <body>
  <h1 id="title">Basic Mobile Example(R.Takata)</h1>

---

「mobile_takata.js」

// initialize map when page ready
var map;
var bounds = new OpenLayers.Bounds(55000,-121000,78000,-97000); // 追加

// Get rid of address bar on iphone/ipod
var fixSize = function() {
 window.scrollTo(0,0); // 指定座標にスクロール
 document.body.style.height = '100%';
 if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
// ユーザの環境確認
  if (document.body.parentNode) {
   document.body.parentNode.style.height = '100%';
  }
 }
};

setTimeout(fixSize, 700);
setTimeout(fixSize, 1500);

var init = function () {
　// create map
 map = new OpenLayers.Map({
  div: "map",
  theme: null,

// ここから追加
  projection: new OpenLayers.Projection("EPSG:2452"),
  displayProjection: new OpenLayers.Projection("EPSG:4326"),
  maxResolution: 'auto',
  units: 'meters',
  maxExtent: bounds,
  restrictedExtent: bounds.clone(),
 // ここまで

  controls: [
   new OpenLayers.Control.Attribution(),
   new OpenLayers.Control.TouchNavigation({
    dragPanOptions: {
     enableKinetic: true
    },
   }),
   new OpenLayers.Control.Zoom()    
  ],

  layers: [
/*
   new OpenLayers.Layer.OSM("OpenStreetMap", null, {
    transitionEffect: 'resize'
   })
*/

// ここから追加
   new OpenLayers.Layer.WMS( "R.Takata Height WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata5m-epsg2452'
    },{
     isBaselayer: true
   }),

   new OpenLayers.Layer.WMS( "Iwate Kuiki WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:iwate_kuiki',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Kukakusen WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_kukakusen',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Choaza WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_choaza',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Kaigan WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_kaigan',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Suigai WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_suigai',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Suiiki WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_suiiki',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Suikozo WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_suikozo',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Doro WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_doro',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Dorokozo WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_dorokozo',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Kido WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_kido',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "R.Takata Kenchiku WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata_kenchiku',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.WMS( "Iwate Public Facilities WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:iwate_pf',
     transparent: true,
     format: 'image/png'
    },{
     isBaselayer: false
   })
// 追加ここまで
  ],

// center,zoom を設定しないとページを開いたときに地図が表示されません。
// （そのときに、+ボタンを１回クリック（拡大）すると表示されます。）
  center: bounds.getCenterLonLat(), // 修正
  zoom: 0 // 修正
 });
};