8 - MapServer でマップファイルのテスト

8-0 ka-Map が動作しない
MapServer のバージョンが 6 になって MapScript の仕様が変わりました。
これによって、ka-Map で地図が表示できなくなりました。マップファイルの表示テストをするのに使いやすかったので残念です。

MapServer Migration Guide
http://mapserver.org/MIGRATION_GUIDE.html#migration

の MapServer 5.6 to 6 Migration の PHP MapScript Changes にある変更点の中に、

---
Class properties that have been removed
 mapObj: imagetype, imagequality, interlace, scale, transparent
---

とあり、ka-Map で影響のある主なものは、imagetype と scale です。
一番影響があるのは、scale と思われます。
私のスキルでは修正できませんでした。


8-1 MapServer 付属の OpenLayers
MapServer に組み込まれた OpenLayers を使って、マップファイルのテストをします。
これは表示テスト用なので、レイヤ別の表示などの機能の設定はできません。

MapServer OpenLayers Viewer
http://mapserver.org/cgi/openlayers.html

の Opening the OpenLayers viewer in your browser に itasca demo（6 MapServer のインストール の 6-4 動作確認 で使った workshop-5.4）

http://localhost/cgi-bin/mapserv?mode=browse&template=openlayers&layer=lakespy2&layer=dlgstln2&map=/var/www/workshop/itasca.map

の /var/www/workshop/itasca.map の部分を自分のマップファイルの位置にします。

Web ブラウザのアドレスバーに次のように入力して Enter キーを押します。

http://localhost/cgi-bin/mapserv?mode=browse&template=openlayers&layer=lakespy2&layer=dlgstln2&map=/home/user/mapsite/workshop-5.4/itasca.map


8-2 マップデータの準備
前回の ka-Map の使い方を参考に地図を表示してみます。

マップファイルを保存する mapfile フォルダとマップデータを保存する mapdata フォルダを作成します。

~/mapsite$ ls ../
---
mapdata/
mapfile/
mapsite/
---

国境のデータを準備します。

NaturalEarth ホームページ
http://www.naturalearthdata.com/

の、「Get the Data」をクリックします。

Downloads サイト
http://www.naturalearthdata.com/downloads/

の「Small scale data, 1:110m」の「Cultural」をクリックします。

1:110m　Cultural Vectors サイト
http://www.naturalearthdata.com/downloads/110m-cultural-vectors/

の「Download all 110m cultural themes」をクリックしてダウンロードします。
「110m_cultural」というフォルダを作成してその中で解凍し、maodataフォルダに移動します。

~/ダウンロード$ mkdir 110m_cultural
~/ダウンロード$ mv 110m_cultural.zip  110m_cultural
~/ダウンロード$ cd 110m_cultural
~/ダウンロード/110m_cultural$ unzip 110m_cultural.zip
~/ダウンロード/110m_cultural$ cd ../
~/ダウンロード/$ mv 110m_cultural ../mapdata/


///// 参考 /////
OpenStreetMap のデータを使った国境のデータが

OpenStreetMap DATA ホームページ
http://openstreetmapdata.com/

にあります。
ページの下の方にある「Show me the data」ボタンをクリックします。
http://openstreetmapdata.com/data ページの「Land Polygons」をクリックします。
http://openstreetmapdata.com/data/land-polygon ページの「Format: Shapefile, Projection: WGS84, Last update: 2013-09-28 08:19
(Large polygons not split)」の左側の「Download」ボタンをクリックします。
land-polygons-complete-4326.zip 解凍します。
nob61@debian7-vmw:~/ダウンロード$ ls
---
land-polygons-complete-4326.zip
---
nob61@debian7-vmw:~/ダウンロード$ unzip land-polygons-complete-4326.zip
Archive:  land-polygons-complete-4326.zip
  inflating: land-polygons-complete-4326/README 
 extracting: land-polygons-complete-4326/land_polygons.cpg 
  inflating: land-polygons-complete-4326/land_polygons.dbf 
  inflating: land-polygons-complete-4326/land_polygons.prj 
  inflating: land-polygons-complete-4326/land_polygons.shp
  inflating: land-polygons-complete-4326/land_polygons.shx 
nob61@debian7-vmw:~/ダウンロード$ ls
---
land-polygons-complete-4326
land-polygons-complete-4326.zip
---
///// ここまで /////


Blue Marble 画像の準備します。

NASA Visible:October, Blue Marble Next Generation w/ Topography and Bathymetry
http://visibleearth.nasa.gov/view.php?id=73826

の world.topo.bathy.200410.3x5400x2700.jpg をダウンロードします。

次の内容のワールドファイル world.topo.bathy.200410.3x5400x2700.jpgW を作成します。

0.06666666666666667
0.00000
0.00000
-0.06666666666666667
-179.96666666666667
89.96666666666667


8-3 マップファイルの準備
基本のマップファイルは、

An Introduction MapServer - MapServer 6.2.1
http://mapserver.org/introduction.html

の Introduction to the Mapfile を参考に作成します。

MAP
# NAME "sample"
 NAME "global_map"
 STATUS ON
# SIZE 600 400
 SIZE 600 300
# SYMBOLSET "../etc/symbols.txt"
 EXTENT -180 -90 180 90
 UNITS DD
# SHAPEPATH "../data"
 SHAPEPATH "../mapdata"
 IMAGECOLOR 255 255 255
# FONTSET "../etc/fonts.txt"

#
# Start of web interface definition
#
 WEB
# IMAGEPATH "/ms4w/tmp/ms_tmp/"
  IMAGEPATH "/home/user/mapsite/ms_tmp/"
  IMAGEURL "/mapsite/ms_tmp/"
 END # WEB

#
# Start of layer definitions
#
 LAYER
  NAME global-raster
  TYPE RASTER
  STATUS DEFAULT
#  DATA bluemarble.gif
  DATA "../mapdata/world.topo.bathy.200410.3x5400x2700.jpg"
 END # LAYER
 LAYER
  NAME country-boundary
  TYPE POLYGON
  STATUS ON
  DATA "110m_cultural/ne_110m_admin_0_boundary_lines_land.shp"
  CLASS
   NAME 'Country Boundary'
   STYLE
    COLOR 200 100 100
   END
  END
 END
END # MAP

Webブラウザのアドレスバーに次のように入力して Enter キーを押します。

http://localhost/cgi-bin/mapserv?mode=browse&template=openlayers&layer=global-laster&layer=country-boundary&map=/home/user/mapfile/global.map

基本部分
http://localhost/cgi-bin/mapserv?mode=browse&template=openlayers

マップファイル global.map の レイヤー LAYER
&layer=global-laster
&layer=countries-border

マップファイルの位置
&map=/home/user/mapfile/global.map

次のように地図が表示されます。

9 マップデータ 9 - ka-Map Layer Nameを日本語にする

9-4-8 Layer Nameを日本語にする
Identify/Query（ポイント表示）、Search（検索）結果のレイヤ名Layer Nameの日本語表示

QueryクエリやSearch検索の結果が表示されるマップインフォメーションMap Infoの部分のレイヤ名Layer Nameを日本語名にしてみました。

Identify/Query:
htdocs/map_query_float.phpファイルの次の行（２か所）

echo "<p>Layer Name:</p> <h6>" . $oLayer->name . "</h6>";

を次のようにかえます。

---
 //get LAYER_TITLE
 $szLayerTitle = $oLayer->getMetaData("group_title");
 if ($szLayerTitle != '') {
   $layertitle = $szLayerTitle;
 } else {
   $layertitle = $oLayer->name;
 }
 //END get LAYER_TITLE
 echo "<p>Layer Name:</p> <h6>" . $layertitle . "</h6>";

Search:
htdocs/tools/search/kaSearch.phpファイルの次の行（1か所）

echo "<p>Layer Name:</p> <h6>" . $oLayer->name . "</h6>";

を次のようにかえます。

 //get LAYER_TITLE
 $szLayerTitle = $oLayer->getMetaData("group_title");
 if ($szLayerTitle != '') {
 $layertitle = $szLayerTitle;
 } else
 $layertitle = $oLayer->name;
 //END get LAYER_TITLE
 echo "<p>Layer Name:</p> <h6>" . $layertitle . "</h6>";

9 マップデータ 8 - ka-Map 日本語の地図のLegend（凡例）設定

9-4-7 日本語の地図のLegend（凡例）設定
Legend（凡例）の日本語表示

htdocs/legend_template.html を見ると、MapServerが出力する Legend を利用しているので、mapfileで設定するとCLASS NAMEの日本語がそのまま表示できます。

マップファイル nippon_bmi_tokyo_pgis.map の LEGEND を次のように追加します。

---
LEGEND
  TRANSPARENT TRUE
  LABEL
    TYPE TRUETYPE  #フォントのタイプ
    FONT vl-gothic #フォントの種類
    COLOR 0 0 0    #フォントの色
    ENCODING UTF-8 #文字コード
    SIZE 10        #フォントの大きさ
    OFFSET 0 -4    #文字の位置 数字は左右、上下の順
  END
END
---

tokyo_kukaku レイヤのクラス名を"行政区画"に修正します。

---
 LAYER
   NAME tokyo_kukaku
   GROUP tokyo_kukaku
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=nippon_bmi host=localhost user=user password=password"
   DATA "the_geom from tokyo_kukaku"
#   DATA "../mapdata/tokyo_bmi/AdmArea.shp"
   METADATA
    "group_title" "行政区画"
    "queryable" "true"
    "searchfield" "name"
    "fields" "name:Name"
   END
   CLASS
    NAME "行政区画"
    STYLE
     COLOR 255 255 204
     OUTLINECOLOR 204 204 204
    END
    LABEL
     MINFEATURESIZE 40
     TYPE TRUETYPE
     FONT vl-gothic
     ENCODING utf-8
     SIZE 8
    END
   END
   TEMPLATE name_template.html
 END
---

9 マップデータ 7 - ka-Map 日本語の地図の Search 設定

9-4-6 日本語の地図の Search 設定
Query は、結果を日本語で表示できます。
Search は、抽出がうまくできず、すべてのデータが表示されます。
コードに修正が必要です。

nippon_bmi_tokyo_pgis.mapのgyoseikaiレイヤにSearchに必要な設定を追加します。

---
 LAYER
   NAME tokyo_kukaku
   GROUP tokyo_kukaku
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=nippon_bmi host=localhost user=user password=password"
   DATA "the_geom from tokyo_kukaku"
#   DATA "../mapdata/tokyo_bmi/AdmArea.shp"
   METADATA
    "group_title" "行政区画"
    "queryable" "true"
    "searchfield" "name"
    "fields" "name:Name"
   END
   CLASS
    NAME "kukaku"
    STYLE
     COLOR 255 255 204
     OUTLINECOLOR 204 204 204
    END
    LABEL
     MINFEATURESIZE 40
     TYPE TRUETYPE
     FONT vl-gothic
     ENCODING utf-8
     SIZE 8
    END
   END
   TEMPLATE name_template.html
 END
---

しかし、これだけでは結果が抽出されません。
これは、ka-Map が utf-8 で入力した文字と、ISO-8859-13 の文字コードのマップデータの比較に限定しているからのようです。

マップデータの文字コードを ka-Map で表示できるように変換するようにしました。
htdocs/tools/search/kaSearch.php ファイルの次の行を修正します。

//iconv("UTF-8", "ISO-8859-13", $_REQUEST['searchstring']);
//$psearch = $searchstring; //Kumar version

次の行の下に//get LAYERENCODING以下を追加

$szSearchfield = $oLayer->getMetaData('searchfield'); //140行あたり
//PRINTING STUFF

//get LAYERENCODING ここから追加
$oLayer = $oMap->getLayer($i);
$szLayerEncode = $oLayer->getMetaData("layer_encoding");
if ($szLayerEncode != '') {
$layerencode = $szLayerEncode;
} else {
$layerencode = 'utf-8';
}
//END get LAYERENCODING ここまで
// コメントアウトした行をここへ
$searchstring = iconv("utf-8", $layerencode, $_REQUEST['searchstring']);
$psearch = $searchstring; //Kumar version
---

すべてのecho <td>"$val"</td>;の前に次の行を追加します。(275行あたり)

$val = iconv($layerencode, "UTF-8", $val);


すべて修正した後の画像です。

9 マップデータ 6 - ka-Map 日本語の地図のQuery設定

9-4-5 日本語の地図のQuery設定

nippon_bmi_tokyo_pgis.map の tokyo_kukaku レイヤにクエリに必要な設定を追加します。

---
 LAYER
   NAME tokyo_kukaku
   GROUP tokyo_kukaku
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=nippon_bmi host=localhost user=user password=password"
   DATA "the_geom from tokyo_kukaku"
#   DATA "../mapdata/tokyo_bmi/AdmArea.shp"
  LABELITEM "name"
  METADATA
   "group_title" "行政界"
   "queryable" "true" #ここを追加
   "fields" "name:区市町村" #ここを追加
  END
  CLASS
   NAME "kukaku"
   STYLE
    COLOR 255 255 204
    OUTLINECOLOR 204 204 204
   END
   LABEL #ここから追加
    MINFEATURESIZE 40
    TYPE TRUETYPE
    FONT vl-gothic
    ENCODING utf-8
    SIZE 8
   END #ここまで
  END
  TEMPLATE name_template.html #ここを追加
 END
---

name_template.htmlの内容は次のようになります。
nippon_bmi_tokyo_pgis.map と同じフォルダにおいてください。

<html>
 <head>
  <title>Name Template</title>
 </head>
 <body>
  <li>[name]
 </body>
</html>

■参考
シェイプファイルで地図表示するときは、結果が文字化けしてしまいます。
これは、ka-Map は文字エンコード utf-8 で処理するのですが、シェイプファイルのデータは Shift-JIS だからです。

シェイプファイルのデータの文字コードを ka-Map で表示できるように次のようにしました。
Search 機能の修正にも必要ですので、ここで設定しておきます。
まず、マップファイル nippon_bmi_tokyo_pgis.map の tokyo_kukaku レイヤのメタデータ（METADATA）にシェイプファイルのデータの文字コード SJIS を指定します。

---
METADATA
 "group_title" "行政界"
 "layer_encoding" "SJIS" #ここを追加
 "queryable" "true"
 "fields" "name:Name"
END
---

htdocs/map_query_float.php ファイルの すべての 「//END METADATA」 の前につぎのように追加します。

---
//get LAYERENCODING ここから追加
$szLayerEncode = $oLayer->getMetaData("layer_encoding");
 if ($szLayerEncode != '') {
  $layerencode = $szLayerEncode;
 } else {
  $layerencode = 'utf-8';
 }
// ここまで
//END METADATA
---

すべての echo"<td>$val</td>"; の前に次の行を追加します。

$val = iconv($layerencode, "UTF-8", $val);


すべて修正した後の画像です。

9 マップデータ 5 - ka-Map GROUPの日本語表示

9-4-4 GROUPの日本語表示

GROUPのタイトルを日本語にします

Main Page/ja-Ka-Map Wiki
http://ka-map.ominiverdi.org/wiki/index.php/Main_Page/ja

の　 マップファイル設定　の　Adding International character support for layer names レイヤー名に国際文字を使用するには　をクリックします。

ここには、レイヤー名に国際文字を使用する方法が英語で書いてあります。
また、[ka-Map-user]メーリングリストも参考にしました。
(1) add a metadata which called "group_title" in each group in .map file（マップファイルのメタデータ metadata に group_title を追加）に書かれている設定でマップファイルに設定します。

nippon_bmi_tokyo_pgis.map の tokyo_kukaku レイヤを次のように追加します。

---
 LAYER
   NAME tokyo_kukaku
   GROUP tokyo_kukaku
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=nippon_bmi host=localhost user=user password=password"
   DATA "the_geom from tokyo_kukaku"
#   DATA "../mapdata/tokyo_bmi/AdmArea.shp"
   METADATA #追加
     "group_title" "行政区画" #追加
   END #追加
   CLASS
     NAME "kukaku"
     STYLE
       COLOR 255 255 204
       OUTLINECOLOR 204 204 204
     END
   END
 END
---

(2) in kamap.js file は、Adding International character support for layer nameではなく、メーリングリストを参考に次のように追加します。
（ka-map/htdocs/kaMap.js）

---
this.opacity = (typeof(o.opacity) != 'undefined') ? o.opacity : 100;

this.title = (typeof(o.title) != 'undefined') ? o.title : 'unnamed'; //この行を追加

this.imageformat = (typeof(o.imageformat) != 'undefined') ? o.imageformat : null;
---

(3) add the "title" attribute like... もメーリングリストを参考に次のように追加します。
init.php ファイルに
（ka-map/htdocs/init.php）

---
/* detect layer opacity (default 100% opaque) */
$opacity = $oLayer->getMetaData('opacity');
if ($opacity == '') {
$opacity = 100;
}

$title = $oLayer->getMetaData('group_title'); //この行を追加

/* detect tile source options (cache, redraw, nocache, or auto) */
$tileSource =
strtolower($oLayer->getMetaData('tile_source'));
if(($tileSource != 'cache') && ($tileSource != 'redraw') && ($tileSource != 'refresh') && ($tileSource != 'nocache')) {
$tileSource = 'auto';
}

---
//$dynamicgroup only if present
$dynamicgroup =($szDynamicgroup)?"dynamicgroup:'".$szDynamicgroup."',":'';

$szLayers .= "map.addLayer(new _layer( { ".
  "name:'".$groupName."',".
  "visible:".$status.",".
  "opacity:".$opacity.",".
  "title:'".$title."',". //この行を追加
  "imageformat:'".$imageformat."',".
  "queryable:".$szQueryable.",".
  "subgroup:'".$szSubgroup."',".//Added by full (legend Tree)
$dynamicgroup.
  "tileSource:'".$tileSource."',".
  "redrawInterval:".$redrawInterval.",".
  "refreshInterval:".$refreshInterval.",".
  "scales: new Array('".implode("','",$groupScaleVis)."')}));";
}
---

(4)in kaLegend.js file を次のように修正します。
（ka-map/htdocs/kaLegend.js）
---
//td.innerHTML = name; //この行のコメントアウト
td.innerHTML = oLayer.title; //この行を追加
---

しかし、これでは、GROUPを設定していないものも含めたすべてのマップファイルのすべてのレイヤのメタデータ METADATA に "group_title" を設定しないと、Map info のレイヤ名が空欄になってしまいます。
そこで、独自に次のように修正してみました。

---
//td.innerHTML = name; //この行のコメントアウト
//ここから追加
if (oLayer.title != '') {
 gtitle = oLayer.title;
} else {
 gtitle = name;
}
td.innerHTML = gtitle;
//ここまで
---

9 マップデータ 4 - ka-Map で地図の表示

9-4 ka-Map で地図の表示

基盤地図情報の行政区画を ka-Map で表示してみます。


9-4-1 フォントの準備

mapfile ディレクトリに次の内容の fonts.txt を作成します。

kochi-gothic /usr/share/fonts/truetype/kochi/kochi-gothic.ttf
sazanami-gothic /usr/share/fonts/truetype/sazanami/sazanami-gothic.ttf
vl-gothic /usr/share/fonts/truetype/vlgothic/VL-Gothic-Regular.ttf
vl-pgothic /usr/share/fonts/truetype/vlgothic/VL-PGothic-Regular.ttf

どれか１行でOKです。
フォント名 フォントがある場所の絶対パス　という内容になっています。
フォント名は任意のわかりやすい名前をつけてください。
パスはSynapticパッケージマネージャで、例えば gothic で検索するとパッケージ一覧が表示されます。
インストールされているパッケージを選択し、プロパティをクリックしてインストール済みファイルタブをクリックすると、パスが表示されます。


9-4-2 マップファイルの作成

次の内容で nippon_bmi_tokyo_pgis.map を作成します。

MAP
 NAME nippon_bmi_tokyo_pgis_map
 STATUS ON
 SIZE 600 300
 EXTENT -279000 1054000 -185000 1104000 # 島部を除く東京の範囲
 UNITS meters
 IMAGECOLOR 255 255 255
 IMAGETYPE png
 FONTSET "fonts.txt"

 WEB
   IMAGEPATH "/home/user/mapsite/ms_tmp/kacache/"
   IMAGEURL "/mapsite/ms_tmp/kacache/"
 END

 LEGEND
   TRANSPARENT TRUE
   LABEL
     TYPE TRUETYPE
     FONT vl-gothic
     COLOR 0 0 0
     ENCODING UTF-8
     SIZE 10
     OFFSET 0 -4
   END
 END

 SCALEBAR
   TRANSPARENT TRUE
 END

 LAYER
   NAME tokyo_kukaku
   GROUP tokyo_kukaku
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=nippon_bmi host=localhost user=user password=password"
   DATA "the_geom from tokyo_kukaku"
#   DATA "../mapdata/tokyo_bmi/AdmArea.shp"
   CLASS
     NAME "kukaku"
     STYLE
       COLOR 255 255 204
       OUTLINECOLOR 204 204 204
     END
   END
 END

END #MAP

9-4-3 config.php の修正

ka-map/include/config.php を nippon_bmi_tokyo_pgis.map 用に次のように追加します。
userは自分の環境に合わせて換えます。

---
 $aszWeather = array(
         'title' => 'Global Weather',
         'path' => '/home/user/mapfile/global.map",
         'scale' => array( 100000000, 50000000, 15000000 ),
         'format' => 'PNG'
 );
// ここから追加
 $aszBmiTokyo = array (
         'title' => '東京 基盤地図情報',
         'path' => '/home/user/mapfile/nippon_bmi_tokyo_pgis.map',
         'scales' => array( 500000, 250000, 100000 ),
         'format' =>'PNG'
 );
// ここまで
---

$aszMapFilesをつぎのように修正します。

---
 $aszMapFiles = array( /* 'gmap' => $aszGMap */
　　　　　　　　　　　　　　　'weather' => $aszWeather,
　　　　　　　　　　　　　　　'bmitokyo' => $aszBmiTokyo

/* Add more elements to this array to offer multiple mapfiles */

);
---

ka-Map で「東京 基盤地図情報」を選択し、地図を表示させます。

7 ka-map 7 - Search 検索

7-8 Search 検索
バージョン1.0または CVS バージョンで動作します。

Main Page/ja-Ka-Map Wiki
http://ka-map.ominiverdi.org/wiki/index.php/Main_Page/ja

の　ユーザーガイド　の　Search System - 検索したデータの位置へパン・ズームするための設定　をクリックします。


ここには、サーチシステムを動作させる方法が書いてあります。
クエリを設定してある場合は次の行をマップファイル（global.map）のメタデータ（METADATA）に追加するだけです。

"searchfield" "name"

countries レイヤのコードは次のようになります。

---
LAYER
 NAME countries
 GROUP countries
 TYPE LINE
 STATUS ON
 DATA "mapdata/worlddata/countries_simpl.shp"
 METADATA
  "queryable" "true"
  "searchfield" "name" #ここを追加
  "fields" "name:Name"
 END
 CLASS
 NAME "Country Boundaries"
  STYLE
   COLOR 200 100 100
  END
 END
 TEMPLATE name_template.html
END
---

7 ka-map 6 - Query クエリー

7-7 Query クエリー

Main Page/ja-Ka-Map Wiki
http://ka-map.ominiverdi.org/wiki/index.php/Main_Page/ja

の　ユーザーガイド　の　Query - How to setup a ka-Map! point and click query information system using the maps legend "i" icon　をクリックします。
（地図の凡例 "i" アイコンを使った、任意の場所を指してクリックする ka-Map のクエリ情報システムのセットアップ）

ここには、クエリシステムを動作させる方法が書いてあります。
Mapfile Query Configuration for ka-Map!（ka-Map のためのマップファイルクエリ設定）に書かれている設定でクエリ機能を有効にします。

global.map を例にしてみます。
countries レイヤに METADATA オブジェクトを追加して

"queryable" "true"

を追加します。
このとき、このマップファイルのレイヤがクエリ可能なka-Mapのレイヤとして機能するためにグループ（GROUP）を定義してください。

---
LAYER
 NAME countries
 GROUP countries #必須
 TYPE LINE
 STATUS ON
 DATA "mapdata/worlddata/countries_simpl.shp"
 METADATA #ここを追加
  "queryable" "true" #ここを追加
 END #ここを追加
 CLASS
  NAME "Country Boundaries"
  STYLE
   COLOR 200 100 100
  END
 END
END
---

さらに、Using MapServer's Templating System for Queries を参考にクエリテンプレートを追加します。
global.map と同じフォルダに次の内容で name_template.html（ファイル名は任意）作成してください。

<html>
 <head><title>Name Template</title></head>
 <body>
  <li> [name]
 </body>
</html>

name: freegis_worlddata_0.1-simpl の属性の名前。 name という項目名で国名が設定されてます。

global.map に次の行を追加します。

TEMPLATE name_template.html

Ominiverdi's query system を参考に global.map のメタデータ（Metadata）に次の行を追加します。

fields "name:Name"

countries レイヤのコードは次のようになります。

---
LAYER
 NAME countries
 GROUP countries #必須
 TYPE LINE
 STATUS ON
 DATA "mapdata/worlddata/countries_simpl.shp"
 METADATA
  "queryable" "true"
  fields "name:Name" #ここを追加
 END
 CLASS
 NAME "Country Boundaries"
  STYLE
   COLOR 200 100 100
  END
 END
 TEMPLATE name_template.html #ここを追加
END
---

7 ka-map 5 - レイヤーの表示・非表示

7-6 レイヤーの表示・非表示
レイヤを個別に表示・非表示ができます。

Main Page/ja-Ka-Map Wiki
http://ka-map.ominiverdi.org/wiki/index.php/Main_Page/ja

の　 ユーザーガイド　の　Layers - レイヤーの表示・非表示を切り替えるための設定　をクリックします。

ここに書かれているようにマップファイルを編集してみます。
global.mapを例にしてみます。

最初の TRANCEPARENT は追加しません。

レイヤ（LAYER）セクションにグループ（GROUP）を次のように追加します。
これによって、ka-Map左側の凡例にレイヤグループを追加します。

---
LAYER
NAME countries
GROUP countries #ここを追加
TYPE LINE
---

7 ka-map 4 - テスト

7-4 ka-Map のテスト

Main Page/ja-Ka-Map Wiki
http://ka-map.ominiverdi.org/wiki/index.php/Main_Page/ja


の　マニュアル　の　Testing the Basic Application/ja 基本アプリケーションのテスト（日本語）　をクリックします。

基本アプリケーションのテスト　の　マップのロード　にしたがって操作します。
Web ブラウザを起動してアドレスバーに次のように入力して Enter キーを押してください。

http://localhost/mapsite/ka-map/htdocs

左側のマップインフォが表示されました。
画像は描画しようとしていますが、何も表示されません。


7-5 テストの修正
Webブラウザを起動してアドレスバーに次のように入力してEnterキーを押してください。

http://localhost/mapsite/ka-map/htdocs/tile.php

今回は何も表示されません。
Debian 5 lenny で試したときは次のようなエラーが表示されました。

Warning: dl() [function.dl]: Dynamically loaded extensions aren't enabled in /home/user/mapsite/ka-map/htdocs/tile.php on line 212

Fatal error: Call to undefined function imagecreatefrompng() in /home/user/mapsite/ka-map/htdocs/tile.php(292) : eval()'d code on line 1

試しに、php5-gdがインストールされていなければインストールします。
Apache を再起動して

#/etc/ini.d/apache2 restart

Web ブラウザを起動してアドレスバーに次のように入力してEnterキーを押してください。

http://localhost/mapsute/ka-map/htdocs/tile.php



画像が表示されればOKです。
Web ブラウザを起動してアドレスバーに次のように入力してEnterキーを押してください。

http://localhost/mapsite/ka-map/htdocs/



地図が表示されればOKです。

7 ka-map 3 - 設定

7-3 ka-Map の設定（config.php など）
ka-Map 設定ファイル　の config.php の修正の前に次の操作をします。
ka-map/include ディレクトリに config.dist.php ファイルがあるので、同じディレクトリにconfig.php という名前でコピーします。

~/mapsite$ cp ka-map/include/config.dist.php ka-map/include/config.php

ライブラリポインタの設定　の通りに config.php を修正していきます。
（vimなどエディタを使い慣れていない人は、使い慣れた操作ができるテキスト・エディタで起動します。
アプリケーション−アクセサリ−テキスト・エディタ　［一般ユーザでOK］）

$szPHPMapScriptModule = 'php_mapscript_46.'.PHP_SHLIB_SUFFIX;
->$szPHPMapScriptModule = 'php_mapscript.'.PHP_SHLIB_SUFFIX;

他は修正しません。
gmap の部分はつぎのようにすべてコメントアウトします。

/* $aszGMap = array (
 *        'title' => 'GMap 75',
 *        'path' => '../../gmap/htdocs/gmap75.map',
 *        'scales' => array( 40000000, 25000000, 12000000, 7500000, 3000000, 1000000 ),
 *        'format' =>'PNG'
 *         Sample authorized_users entry. See auth.php for more details:
 *          ,'authorized_users' => array('popplace' => array('user1', 'user2'),
 *                                       'park'     => array('user1')
 *         
 *);
 */

global.map 用に次のように追加します。
userは自分の環境に合わせて換えます。

 $aszWeather = array(
         'title' => 'Global Weather',
         'path' => '/home/user/mapfile/global.map',
         'scales' => array( 100000000, 50000000, 15000000 ),
         'format' => 'PNG'
 );

$aszMapFiles を次のように修正します。

 $aszMapFiles = array( /* 'gmap' => $aszGMap */
　　　　　　　　　　　　　　　'weather' => $aszWeather

/* Add more elements to this array to offer multiple mapfiles */

);

$szMap を次のように修正します。

/* $szMap = 'gmap'; */
$szMap = 'weather';

$szBaseCacheDir（画像一時保存フォルダ）を次のように修正します。

$szBaseCacheDir = "/tmp/kacache/";
-> $szBaseCacheDir = "/home/user/mapsite/ms_tmp/kacache/";

ka-Mapはパーミッションに問題なければ画像一保存フォルダを自動的に作成します。
また、マップファイルの IMAGEPATH や IMAGURL が正しくなくても地図を表示します。
地図の表示が成功した後、もう一度設定を確認してください。

続く ...

7 ka-map 2 - 準備

7-3 マップデータとマップファイルの準備
マップファイルを保存する mapfile フォルダとマップデータを保存する mapdata フォルダを作成します。

~/mapsite$ ls ../
---
mapdata/
mapfile/
mapsite/
---

必要なパッケージが準備できたので、マニュアルを進めていきます。
マニュアル　の　■Preparing MapServer/ja マップサーバの準備（日本語）　をクリックします。

マップサーバーの準備とマップスクリプト・プログラミング・ライブラリは準備できています。
参考に読んでみてください。

データの準備　の１番目の　here　のリンクが切れているので次のサイトからダウンロードします。

http://ftp.intevation.de/freegis/worlddata/

の　freegis_worlddata-0.1_simpl.tar.gz　をクリックしてダウンロードしてください。
３番目の　here をクリックして　cloud_image.zip　をダウンロードします。
解凍した次のファイルとフォルダを mapdata フォルダに移動します。

day_cloud.twf
day_cloud.tif
freegis_worlddata-0.1_simpl/（フォルダ名が長いので worlddata にかえました）

freegis_worlddata-0.1_simpl が国境ファイルがあるフォルダ、day_cloud(.tif,.twf) が画像ファイルとそのデータです。

マップサーバーの設定　のコードを global.map という名前のファイルで保存します。
次の行を修正してください。

DATA "data/day_clouds.tif"
->DATA "../mapdata/day_clouds.tif"

DATA "data/countries_simpl.shp"
->DATA "../mapdata/worlddata/countries_simpl.shp"

全体は次のようになります。

MAP
 NAME global_map
 STATUS ON
 SIZE 600 300
 EXTENT -180 -90 180 90
 UNITS DD
 IMAGECOLOR 255 255 255
 IMAGETYPE png

 WEB
#   IMAGEPATH "/opt/fgs/apps/kamap-0.1.1/htdocs/tmp/"
#   IMAGEURL "/ka-map/tmp/"
#    影響はありませんがここをかえるならこうなります。
   IMAGEPATH "/home/user/mapsite/ms_tmp/"
   IMAGEURL "/mapsite/ms_tmp/"
 END

 LEGEND
   TRANSPARENT TRUE
 END

 SCALEBAR
   TRANSPARENT TRUE
 END

 LAYER
   NAME clouds
   TYPE RASTER
   STATUS ON
   DATA "../mapdata/day_clouds.tif"
 END

 LAYER
   NAME countries
   GROUP countries
   TYPE LINE
   STATUS ON
   DATA "../mapdata/worlddata/countries_simpl.shp"
   CLASS
     NAME "Country Boundaries"
     STYLE
       COLOR 200 100 100
     END
   END
 END
END #MAP END

後で他にも修正するところがありますが、今のところはこのまま保存します。
ディレクトリの構成は次の様になります。

mapsite/ka-map/
mapfile/global.map
mapdata/day_cloud.twf
mapdata/day_cloud.tif
mapdata/worlddata/

マップファイルのテスト　のように端末（terminal:ターミナル）で入力してEnterキーを押します。

~/mapfile$ shp2img -m global.map -o global.png

bash: shp2img: command not foundと表示されたら Synaptic パッケージマネージャでmapserver-bin をインストールします。
エラーが表示されなければ、global.png が作成されます。
画像ビューアで表示してみます。
（アプリケーション−グラフィックス−画像ビューア）



続く ...

7 ka-map 1 - インストール

ka-Map を使うと、MapServer を使用するときに、自分でHTMLファイルを作らなくても、地図を作成することができます。
地図を確認するときに便利なので、インストールしておきます。


7-1 インストールの準備
ka-Map Wiki 日本語ページを参考にインストールしてみました。

Main Page/ja-Ka-Map Wiki
http://ka-map.ominiverdi.org/wiki/index.php/Main_Page/ja

このページには、現在文字化けしていて表示できません。

ka-Map!について　に公式サイトのリンクがあるのでこちらを参考にします。

ka-Map.MapTools.org
http://ka-map.maptools.org/

その下の特徴に必要なパッケージがあります。
このうち、MapServerの章で地図を表示していればApacheとMapServerは準備できています。
Synapticパッケージマネージャでphp5を検索してphp5とphp5-mapscriptをインストールします。
PHPが動作しているかを確認するために次の内容のphpinfo.phpファイルをWebブラウザで表示します。
phpinfo.phpファイルは /home/user/mapsite に作成します。

<?php phpinfo() ?>

Webブラウザのアドレスバーに次のように入力してEnterキーを押します。

http://localhost/mapsite/phpinfo.php

次のようなページが表示されなければApacheを再起動してください。



Root Terminalで次のように入力しEnterキーを押します。

#/etc/init.d/apache2 restart


7-2 ka-Mapのインストール
ka-Mapをインストールします。

Main Page/ja-Ka-Map Wiki
http://ka-map.ominiverdi.org/wiki/index.php/Main_Page/ja

の　マニュアル　の

Preparing ka-Map/ja ka-Map!の準備（日本語：文字化けしていません。）
http://ka-map.ominiverdi.org/wiki/index.php/Preparing_ka-Map/ja

をクリックします。
パッケージは

gz で圧縮された tar アーカイブ
zip アーカイブ
オンライン CVS リポジトリー

があります。CVS バージョンをインストールしてみました。
Synaptic パッケージマネージャで CVS クライアントをインストールします。
cvs を検索して cvs をインストール指定します。
server_path の右側のリンクをクリックすると ka-Map-CVS ページに移動するので、端末（ターミナル）を起動して例にしたがって入力してダウンロードします。
（mapsite ディレクトリに移動しておくと、ここに ka-map フォルダが作成されます。）

~/mapsite$ cvs -d:pserver:cvsanon@cvs.maptools.org:/cvs/maptools/cvsroot checkout "ka-map"

インストールが終わると　ka-map　フォルダが作成されます。
（上のコマンドの　chekout　の後の　ka-map　がフォルダ名になります。）
ka-map のフォルダ構造を確かめます。

~/mapsite$ ls ka-map/
---
htdocs/
include/
---

セキュリティ上の注意　にも目を通しておいてください。

続く ...

最近、Google Map の公開設定が話題になっています

先生方が家庭訪問などの参考に、 Google Map を使って場所を確認するために使っている情報が一般公開されていることが話題になっています。
Google のサービスはコミュニケーションの手段として使われることを前提としているものが多いので、初期設定が「一般公開」になっているのも分かるような気がします。

ウェッブ上のサービスは、設定も含めて、データの機密性が完全に守られるものではないと思っています。
万が一情報が漏れても対処できるようなデータ管理の仕方を考えておいた方がいいでしょう。

また、自分のコンピュータでデータを管理できるように、ローカルで運用できる方法ならもう少し安全になるかもしれません。
例えば、Google Earth などがあります。これにもデータを公開する機能があるので注意が必要です。ただ、環境によって動作しないこともあります。

自分があったらいいなと思うサービスが次々と現実化しています。
Google Map も使っていますが、これがなかなかよくできて気に入っています。
これから自分なりにカスタマイズできるような地図をつくりたいと思っているので、MapServer を利用した KaMap や OpenLayers を使いこなせるようになりたいです。

OpenLayers 4kamap_sampleで試す

kamap_sample.htmlをみてみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>kamap sample</title>

  <!-- 基本のデザインを設定しています -->
  <link rel="stylesheet" href="theme/default/style.css" type="text/css" />

  <!-- 地図のデザインを設定しています -->
  <style type="text/css">
   #map {
    width: 512px;
    height: 512px;
    border: 1px solid black;
   }
  </style>

  <!-- OpenLayersライブラリの読み込み -->
  <script src="lib/OpenLayers.js"></script>

  <!-- 地図の表示スクリプト -->
  <script type="text/javascript">
   var map; //宣言
   function init(){ //ウィンドウを読み込んだときに実行される関数
    map = new OpenLayers.Map('map'); //ページに地図を埋め込む

    var gw_ka = new OpenLayers.Layer.KaMap("Global Weather",
     "http://localhost/ka-map/tile.php", {g: "countries", map: "weather"});
     /* ka-Mapの地図を埋め込みます。
       *()の中は、("このレイヤの名前","tile.phpの場所",{g:"マップファイルのGROUP名", map:"ka-Mapの地図名"});   
 */
    map.addLayer(gw_ka); //地図にレイヤを追加
    map.addControl(new OpenLayers.Control.LayerSwitcher()); //地図右上にある＋、レイヤ切り替え
    map.zoomToMaxExtent(); //
   }
  </script>
 </head>
 <body onload="init()">
 <!-- init()関数の読み込み -->

  <h1 id="title">KaMap Example</h1>
  
  <div id="tags"></div>
  
  <!-- 地図表示の場所 --> 
  <div id="map"></div>
  
  <div id="docs"></div>
 </body>
</html>

プレゼンテーション 12XML Overlays 地図上に面を描く

XML Overlays ４０ー４３ページ

XML Overlays Drawing Polygons ４３ページ
地図上に面を描きます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="imagetoolbar" content="no">
<title>XMLOverlay Polygon Sample  - ka-Map!</title>

<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>

<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>

<!-- added for XMLOverlay -->
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/excanvas.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_jsgraphics.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/XMLOverlay/kaXmlOverlay.js"></script>
<!-- end added for XMLOverlay -->

<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;

SET_DHTML();

function myOnLoad()
{
    initDHTMLAPI();

    myKaMap = new kaMap( 'viewport' );

    myKaMap.registerForEvent( KAMAP_MAP_INITIALIZED, null, myMapInitialized );

     //自分の環境に合わせて変更してください
    myKaMap.server = 'http://localhost/ka-map/';

    //kaNavigatorのkaZoomerを設定しています。
    var kaNav = new kaNavigator( myKaMap );
    kaNav.activate();
    myKaZoomer = new kaZoomer(myKaMap);
    drawPage();
    myKaMap.initialize('worldata');

}

function myMapInitialized(){
                printMyOverlay();
}


//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
    var browserWidth = getInsideWindowWidth();
    var browserHeight = getInsideWindowHeight();

    var viewport = getRawObject('viewport');

    viewport.style.width = browserWidth + "px";
    viewport.style.height = browserHeight + "px";

    myKaMap.resize();
}
</script>

<script type="text/javascript">
/*
*  ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array


var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat');
aPoints[1] = new Array(41.23,2.11,'Barcelona');
aPoints[2] = new Array(48.52,2.19,'Paris');
aPoints[3] = new Array(41.53,12.29,'Rome');
aPoints[4] = new Array(43.47,11.15,'Florence');
aPoints[5] = new Array(41.11,29.08,'Istanbul');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo');
aPoints[7] = new Array(46.31,6.38,'Lausanne');

//the function
var canvas = null;
function printMyOverlay () {

                myXmlOverlay = new kaXmlOverlay( myKaMap, 250 ); //z-index

                var line =null;
                var coordinates = "";


                //上記のpoint arrayを順番に読み込んでいます。
                for(i=0;i<aPoints.length;i++){
                        var  latitude = aPoints[i][0];
                        var longuitude = aPoints[i][1];

                        //ポイントを描いています
                        var pointId = i;
                        var my_point =myXmlOverlay.addNewPoint(pointId, longuitude, latitude);
                        var my_symbol = new kaXmlSymbol();
                        my_symbol.size = 12;
                        my_symbol.color = '#ff0000';
                        my_point.onmouseover = myPointClicked;

                        my_point.addGraphic(my_symbol);

                        if (i>0) coordinates += ",";
                        coordinates += longuitude + " " + latitude;
                }
                //ポイントをi順に線で結んでいきます
                my_point = myXmlOverlay.addNewPoint("Line",longuitude, latitude);
                line = new kaXmlLinestring(my_point);
                line.readCoordinates(my_point, coordinates);
                line.color = 'yellow';
                line.stroke = 2;
                my_point.addGraphic(line);

               //閉じている線の内側を塗りつぶしています
               my_point = myXmlOverlay.addNewPoint("myPoly",longuitude, latitude);
               poly = new kaXmlPolygon(my_point);
               poly.readCoordinates(my_point, coordinates);
                poly.color = 'green';
                my_point.addGraphic(poly);
}


function myPointClicked(){
        alert(this.mylabel);
}

/*
*  END OF ADDED CODE
*/
</script>

<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: #d9d9d9;
  overflow: hidden;
}

#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #000000;
  cursor: move;
  -moz-box-sizing: border-box;
}

</style>
</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport"> </div>
</div>
</body>
</html>

プレゼンテーション 11XML Overlays 地図上に線を描く

XML Overlays ４０ー４４ページ

XML Overlays Drawing Lines ４２ページ
地図上に線を描きます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="imagetoolbar" content="no">
<title>XMLOverlay Line Sample - ka-Map!</title>

<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>

<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>

<!-- added for XMLOverlay -->
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/excanvas.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_jsgraphics.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/XMLOverlay/kaXmlOverlay.js"></script>
<!-- end added for XMLOverlay -->

<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;
var queryParams = null;
SET_DHTML();


function myOnLoad()
{
    initDHTMLAPI();

    myKaMap = new kaMap( 'viewport' );

         //自分の環境に合わせて変更してください
        myKaMap.server = 'http://localhost/ka-map/';

    myKaMap.registerForEvent( KAMAP_MAP_INITIALIZED, null, myMapInitialized );

    //kaNavigatorのkaZoomerを設定しています。
    var kaNav = new kaNavigator( myKaMap );
    kaNav.activate();
    myKaZoomer = new kaZoomer(myKaMap);
    drawPage();
    myKaMap.initialize( 'worldata');

}

function myMapInitialized(){
                printMyOverlay();
}


//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
    var browserWidth = getInsideWindowWidth();
    var browserHeight = getInsideWindowHeight();

    var viewport = getRawObject('viewport');

    viewport.style.width = browserWidth + "px";
    viewport.style.height = browserHeight + "px";
   
    myKaMap.resize();
}
</script>

<script type="text/javascript">
/*
*  ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array


var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat');
aPoints[1] = new Array(41.23,2.11,'Barcelona');
aPoints[2] = new Array(48.52,2.19,'Paris');
aPoints[3] = new Array(41.53,12.29,'Rome');
aPoints[4] = new Array(43.47,11.15,'Florence');
aPoints[5] = new Array(41.11,29.08,'Istanbul');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo');
aPoints[7] = new Array(46.31,6.38,'Lausanne');

//the function
var canvas = null;
//線を描く関数
function printMyOverlay () {

                myXmlOverlay = new kaXmlOverlay( myKaMap, 250 );　//z-index
                var line =null;
                var coordinates = "";

                   //上記のpoint arrayを順番に読み込んでいます。
                for(i=0;i<aPoints.length;i++){
                        var  latitude = aPoints[i][0];
                        var longuitude = aPoints[i][1];

                        var pointId = i;
                        var my_point =myXmlOverlay.addNewPoint(pointId, longuitude, latitude);

                        if (i>0) coordinates += ",";
                        coordinates += longuitude + " " + latitude;
                }
                   //ポイントをi順に線で結んでいきます
                my_point = myXmlOverlay.addNewPoint("Line",longuitude, latitude);
                line = new kaXmlLinestring(my_point);
                line.readCoordinates(my_point, coordinates);
                line.color = 'yellow';
                line.stroke = 2;
                my_point.addGraphic(line);
}


function myPointClicked(){
        alert(this.mylabel);
}

/*
*  END OF ADDED CODE
*/
</script>

<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: #d9d9d9;
  overflow: hidden;
}

#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #000000;
  cursor: move;
  -moz-box-sizing: border-box;
}


</style>
</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport"></div>
</div>
</body>
</html>

プレゼンテーション 10XML Overlays 地図上に点を描く

XML Overlays ４０ー４４ページ

XML Overlays Drawing Points ４１ページ
地図上に点を描きます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>XMLOverlay Point sample - ka-Map!</title>

<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>

<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>
<!-- added for XMLOverlay -->
<script type="text/javascript" src="http://localhost/ka-map/excanvas.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_jsgraphics.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/XMLOverlay/kaXmlOverlay.js"></script>
<!-- end added for XMLOverlay -->

<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;
SET_DHTML();

function myOnLoad()
{
    initDHTMLAPI();

    myKaMap = new kaMap( 'viewport' );

         //自分の環境に合わせて変更してください
        myKaMap.server = 'http://localhost/ka-map/';
        myKaMap.registerForEvent( KAMAP_MAP_INITIALIZED, null, mapInitialized );

    //kaNavigatorのkaZoomerを設定しています。
    var kaNav = new kaNavigator( myKaMap );
    kaNav.activate();
    myKaZoomer = new kaZoomer(myKaMap);
    drawPage();
    myKaMap.initialize('worldata');
}

//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
    var browserWidth = getInsideWindowWidth();
    var browserHeight = getInsideWindowHeight();

    var viewport = getRawObject('viewport');

    viewport.style.width = browserWidth + "px";
    viewport.style.height = browserHeight + "px";

    myKaMap.resize();
}

//点を描く関数を呼び出しています。
function mapInitialized( eventID, mapName )
{
                printMyOverlay();
}
</script>

<script type="text/javascript">
/*
*  ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array


var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat');
aPoints[1] = new Array(41.23,2.11,'Barcelona');
aPoints[2] = new Array(48.52,2.19,'Paris');
aPoints[3] = new Array(41.53,12.29,'Rome');
aPoints[4] = new Array(43.47,11.15,'Florence');
aPoints[5] = new Array(41.11,29.08,'Istanbul');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo');
aPoints[7] = new Array(46.31,6.38,'Lausanne');

var myOverlay;

//点を描く関数
function printMyOverlay () {

        myOverlay = new kaXmlOverlay( myKaMap, 300 );//z-index

        myOverlay.handler_onclick = myPointClicked;
        myOverlay.collision = true;//重なったとき間引き
        myOverlay.col_size = 30;
        var line =null;
        var i;

          //上記のpoint arrayを順番に読み込んでいます。
        for(i=0;i<aPoints.length;i++){

                var  latitude = aPoints[i][0];
                var longuitude = aPoints[i][1];
                var pointId = i;
                var my_point = myOverlay.addNewPoint(pointId, longuitude, latitude);
                var my_symbol = new kaXmlSymbol();
                my_symbol.size = 12;
                my_symbol.color = '#ff0000';

                my_point.addGraphic(my_symbol);

        }

        myOverlay.resetCollisionPoints();
}

//ポインタをクリックしたときに実行される関数
function myPointClicked(p){
        alert(p.pid);
}

//ポインタが重なったときに実行される関数
function myPointOver(t){
        alert(t + " over");
}

var myXmlOverlay;

function ovrFromXml( ovr ) {

        if (ovr) {
        myXmlOverlay = new kaXmlOverlay( myKaMap, 250 );
                myXmlOverlay.handler_onclick = myPointClicked;
        myXmlOverlay.loadXml(ovr);
        }
}

/*
*  END OF ADDED CODE
*/
</script>

<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: #d9d9d9;
  overflow: hidden;
}

#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #000000;
  cursor: move;
  -moz-box-sizing: border-box;
}

</style>
</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport"> </div>
</div>
</body>
</html>

プレゼンテーション 9ツールチップ

Tooltips ３８ページ
ツールチップ（tooltip）は一般的なグラフィックユーザインターフェイス要素です。
itemにカーソル（ポインタ）を重ねると、itemに関する補足情報が記された小さなボックスが現れます。

foss4g2007/tooltip_example.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>ka-Map!</title>

<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>

<!-- added for demo -->
<script type="text/javascript" src="http://localhost/ka-map/tools/tooltip/kaToolTip.js"></script>

<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;
var queryParams = null;
SET_DHTML();


function myOnLoad()
{
    initDHTMLAPI();

        //Ka-Map init
    myKaMap = new kaMap( 'viewport' );

         //自分の環境に合わせて変更してください
        myKaMap.server = 'http://localhost/ka-map/';

    //kaNavigatorのkaZoomerを設定しています。
    var kaNav = new kaNavigator( myKaMap );
    kaNav.activate();
    myKaZoomer = new kaZoomer(myKaMap);
    drawPage();
    myKaMap.initialize('worldata');

        //Demo function
     printMyTips();
}

//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
    var browserWidth = getInsideWindowWidth();
    var browserHeight = getInsideWindowHeight();

    var viewport = getRawObject('viewport');

    viewport.style.width = browserWidth + "px";
    viewport.style.height = browserHeight + "px";

    myKaMap.resize();
}
</script>

<!-- ポイントの描画。ポインタを重ねた時の動作も含まれています。 -->
<script type="text/javascript">
/*
*  ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array
//Arrayの中身は、経度、緯度、名前、外部リンク、画像の順になってます。
//インターネットにつないでいる状態で、外部リンクが表示されます。
var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat','http://en.wikipedia.org/wiki/Rabat%2C_Morocco','../foss4g2006/img/300px-Rabat_Mausole_MohammedV.jpg');
aPoints[1] = new Array(41.23,2.11,'Barcelona','http://en.wikipedia.org/wiki/Barcelona%2C_Spain','../foss4g2006/img/240px-Sta-eulalia.jpg');
aPoints[2] = new Array(48.52,2.19,'Paris','http://en.wikipedia.org/wiki/Paris%2C_France','../foss4g2006/img/250px-Aftnn_The_Seine_from_the_Eiffel_Tower.jpg');
aPoints[3] = new Array(41.53,12.29,'Rome','http://en.wikipedia.org/wiki/Roma%2C_Italia','../foss4g2006/img/300px-Castel_Sant_Angelo.jpg');
aPoints[4] = new Array(43.47,11.15,'Florence','http://en.wikipedia.org/wiki/Florence%2C_Italy','../foss4g2006/img/210px-Florence.jpg');
aPoints[5] = new Array(41.11,29.08,'Istanbul','http://en.wikipedia.org/wiki/Istanbul%2C_Turkey','../foss4g2006/img/275px-240774807TYycPB_ph.jpg');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo','http://en.wikipedia.org/wiki/Santo_Domingo','../foss4g2006/img/300px-Santo_domingo.jpg');
aPoints[7] = new Array(46.31,6.38,'Lausanne','http://en.wikipedia.org/wiki/Lausanne%2C_Switzerland','../foss4g2006/img/250px-Cathedral_on_a_hill_in_Lausanne.jpg');

//the function
var canvas = null;
var toolTip = null;

        function printMyTips () {

                var idx = 50;//canvas zindex
                canvas = myKaMap.createDrawingCanvas(idx);

                toolTip = new kaToolTip( myKaMap);
                var offsetX=-6;//offset to move the image left-right
                var offsetY=-19;//offset to move the image top-bottom
                toolTip.setTipImage(myKaMap.server + 'images/tip-green.png',offsetX,offsetY);

                   //上記のpoint arrayを順番に読み込んでいます。
                for(i=0;i<aPoints.length;i++){
                        var div = document.createElement('div');

                        var img = document.createElement('img');
                        img.src = myKaMap.server + 'images/tip-red.png';

                        img.style.position='absolute';
                        img.style.left='-6px';
                        img.style.top='-19px';

                        //set the event
                        img.onmouseover=myTipClicked;

                        //set the label
                        img.mylabel = aPoints[i][2];

                        //append image the our div
                        div.appendChild(img);

                        //add the object to our map
                        var lon = aPoints[i][0];
                        var lat = aPoints[i][1];
                        myKaMap.addObjectGeo(canvas,lat,lon,div);
                }

        }

//ポインタが重なったときに実行される関数
function myTipClicked(){
        //alert(this.mylabel);
        for(i=0;i<aPoints.length;i++){
                if(aPoints[i][2] == this.mylabel){

                        var myurl = aPoints[i][3];
                        var myimg = aPoints[i][4];
                        var lon = aPoints[i][0];
                        var lat = aPoints[i][1];

                            //ボックス内に書かれるHTMLタグ
                        var textToShow = '';
                        textToShow += '<div style="position:absolute;width:10px;right:10px;top:10px;color:red;border:1px solid black;"><a href="#" onclick="toolTip.move()">X</a></div>';
                        textToShow += '<h1>'+this.mylabel+'</h1>';
                        textToShow += '<a href="' + myurl + '" target="_blank"><img src="' + myimg + '" width="200px"></a>';
                        toolTip.setText( textToShow );

                        toolTip.moveGeo(lat,lon);
                }
        }
}

/*
*  END OF ADDED CODE
*/
</script>

<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: #d9d9d9;
  overflow: hidden;
}
#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #000000;
  cursor: move;
  -moz-box-sizing: border-box;
}


</style>

//自分の環境に合わせて href="" の指定を修正してください。
<link rel="stylesheet" href="http://localhost/ka-map/tools/tooltip/tooltip.css" type="text/css" />

</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport">
<div id="kaLogo"></div>
</div>
</body>
</html>