農場主の日常

なんちゃってエンジニアの日常をつらづらと

NP_MapBlogへのリスト表示の追加方法

 うちのページで表示しているNP_MapblogのGoogleMapsアイコンのリスト表示について、数年前のオーダーで、何人かの方に質問を受けていたのですが、時間がとれず、回答できませんでした。
 たまたまページをいじっているのもあわせて、修正点をまとめてみようかなと。

 調査結果と修正方法は、まとめてフォーラムへも投稿。
Nucleus(JP)フォーラム :: トピックを表示 - 地図表示とGPS連動プラグイン(NP_GoogleMaps, NP_GPSMap,NP_MapBlog)

 修正は結構いろんな場所なのだけれど、Diffを取りつつ以下に書く方法で。

  まず前提として、NP_GoogleMapsに、アルファベットのアイコン表示を行う改造が行われている物とします。
 改造方法は以下になります。
http://japan.nucleuscms.org/bb/viewtopic.php?p=15245#15245

 上記改造を行った上で、NP_MapBlogの371行目付近、
function doTemplateVar(&$item, $mode = '', $param1 = '') {
global $CONF;
$i = $this->pointnumber;
switch ($mode) {

のあとに、
case 'STARTL' :
echo "\$map['list$i'] = <<<LIST{$i}\n";
break;
case 'ENDL' :
echo "\nLIST$i;\n";
$this->listnumber += 1;
break;

を追加。
 472行目付近、
$bid = (int)$b->blogid;
$this->pointnumber = 0;

のあとに、
$this->listnumber = 0;
を追加、
 677行目付近、
eval($this->code);
$map['p'] = $this->pointnumber;

のあとに、
if ($itemmode) {
$map['List'] = 0;
} else {
$map['List'] = $this->listnumber;
}

を追加、
679行目付近、
for ($i = 0; $i < $this->pointnumber; $i++ ) {
$map["info$i"] = preg_replace('/\r|\n/', ' ', $map["info$i"]);

のあとに、
$map["list$i"] = preg_replace('/\r|\n/', ' ', $map["list$i"]);
を追加。

 NP_GoogleMaps側の変更として、379行目付近
function DrawMap($mapdata, $i = '') {
$script = " var map$i = new GMap(document.getElementById(\"map$i\"));\n";

のあとに、
if($mapdata['List'] > 0) {
$sList = " var List$i = document.getElementById(\"list$i\");\n";
$sList .= " var Listhtml$i = \"\";\n";
}

を追加。
455行目付近、
$script .= " GEvent.addListener(marker[$j], \"click\", function() {\n"
. " marker[$j].openInfoWindowHtml(info[$j]);\n"
. " });\n";
// $script .= " GEvent.addListener(marker2[$j], \"click\", function() {\n"
// . " marker2[$j].openInfoWindowHtml(info[$j]);\n"
// . " });\n";

のあとに、
if($mapdata['List'] > 0) {
if (($max > 1)&&($max <= 25)) {
$sList .= " Listhtml$i += \"<img width='20' height='34' src='http://www.google.com/mapfiles/marker$letter.png' alt='$letter' border='0' />\";\n";
} else {
$sList .= " Listhtml$i += \"<img width='20' height='34' src='http://www.google.com/mapfiles/marker.png' alt='' border='0' />\";\n";
}
$sList .= " Listhtml$i += \"<a href='javascript:allopener$i(". $k . ")' >" . $mapdata["list$k"] . " }

を追加。
518行目付近、
if (!($mapdata['info'] === '') && !($mapdata['info'] === null)) {
$p = $mapdata['info'];
$script .= " map$i.recenterOrPanToLatLng(marker[$p].point);\n";
$script .= " marker[$p].openInfoWindowHtml(info[$p]);\n";
}

のあとに、
if($mapdata['List'] > 0) {
$sList .= " List$i.innerHTML = Listhtml$i;\n";
$sList .= " function allopener$i(i){marker[i].openInfoWindowHtml(info[i] );}\n";
$script .= $sList;
}

を追加。
532行目付近、
function createInlineLink($map, $i) {
return '<div id="map' .$i. '" style="width: '
.$map['width'] .'px; height: '.$map['height'] .'px"></div>'. "\n";

を、
function createInlineLink($map, $i) {
// return '<div id="map' .$i. '" style="width: '
// .$map['width'] .'px; height: '.$map['height'] .'px"></div>'. "\n";
$InlineLink = '<div id="map' .$i. '" style="width: '
.$map['width'] .'px; height: '.$map['height'] .'px"></div>'. "\n";
if( $map['List'] > 0 ) {
$InlineLink .= '<div id="list' .$i. '"></div>'. "\n";
}
return $InlineLink;

に変更。

 ここまでの変更を行った上で、MapBlog用のテンプレートを作成します。
 テンプレートのアイテムの本体に、
<%MapBlog(STARTL)%><%MapBlog(INFO)%><small>::<%category%></small>
<%MapBlog(ENDL)%>
<%MapBlog(START)%>
<small><a href="<%itemlink%>"><%title%></a><BR>
<%MultipleCategories%><BR>
<%MapBlog(INFO)%><BR>
<%MapBlog(THUMBNAIL,120)%></small>
<%MapBlog(END)%>

のような記載を行います。このうち、
<%MapBlog(STARTL)%><%MapBlog(INFO)%><small>::<%category%></small>
<%MapBlog(ENDL)%>

部分が、リスト表示のフォーマットになります。
 <%MapBlog(STARTL)%>と<%MapBlog(ENDL)%>に囲まれた部分の指定でリスト表示します。
 リスト表示を行うテンプレートは、この2つの表記と、通常のMapBlog表示用のテンプレート変数<%MapBlog(START)%> と<%MapBlog(END)%>が必要です。
 また、<%MapBlog(STARTL)%>と<%MapBlog(ENDL)%> は<%MapBlog(START)%>よりも前に書く必要があります。
 リスト表示が不要な場合は、<%MapBlog(STARTL)%>と<%MapBlog(ENDL)%>を書かなければ表示を行いません。

 リスト表示の制御は、CSSにて行うことができます。
 上記修正のうち、リスト表示を行っているのは、
function createInlineLink($map, $i) {
// return '<div id="map' .$i. '" style="width: '
// .$map['width'] .'px; height: '.$map['height'] .'px"></div>'. "\n";
$InlineLink = '<div id="map' .$i. '" style="width: '
.$map['width'] .'px; height: '.$map['height'] .'px"></div>'. "\n";
if( $map['List'] > 0 ) {
$InlineLink .= '<div id="list' .$i. '"></div>'. "\n"; //06-04-20
}
return $InlineLink;

 部分ですので、<div id="list0"></div>部分の表示をCSSにて制御することができます。
 いろいろ応用してみてください。


関連記事[GoogleMaps

前後の記事 - [Nucleus]::タイトル一覧

コメント


コメントはありません。



コメントの追加


トラックバック

このエントリにトラックバックはありません
このトラックバックURLを使ってこの記事にトラックバックを送ることができます。

↑ PAGE TOP