フォームとjavascriptを用いた地図でのピンの蓄積

Question

マップを使ったWEBアプリケーション(図鑑のようなもの)をつくりたいと思っています。

フォームから得た緯度経度の値をleafletを用いて地図上にプロットし，それを蓄積できるようにしたいです。
現在プロットはできるのですが，ページ遷移すると投稿したマーカーが全て初期化されてしまい，マーカーが蓄積できません。
これはレイヤーにマーカーが追加できていないということでしょうか？

ページ遷移の流れとしては
１．javascript側で投稿する場所の緯度経度を決める。
２．１で決めた緯度経度をphpのフォームに飛ばす。そして，詳細情報記入。
３．javascript側でphpから送信された緯度経度を基にマーカ－を設置する。
です。

改善方法等あればどなたかご教授お願いいたします。

//地図生成
var map = L.map('map');
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
}).addTo(map);
map.setView([○, ○], 12);

//クリック地点の緯度経度取得
map.on('click',function(e){
  var latitude=(Math.round(e.latlng.lat * 10000)) /10000;
  var longitude=(Math.round(e.latlng.lng * 10000)) /10000;

//テキストボックスに緯度経度代入
  document.getElementById('latitude').value=latitude;
  document.getElementById('longitude').value=longitude;

  var idokeido = L.marker(e.latlng, {
    draggable: true,
    title: "Resource location",
    alt: "Resource Location",
    riseOnHover: true,
    iconColor:'green'
  }).addTo(map)
    .bindPopup(e.latlng.toString());
  // Update marker on changing it's position
    idokeido.on("dragend", function (ev) {
    var chagedPos = ev.target.getLatLng();

    this.bindPopup(chagedPos.toString());
   });

});
//phpの変数をjavascriptの変数に変換
var lat = "<?php echo ($_POST['latitude']); ?>";
var lng = "<?php echo ($_POST['longitude']); ?>";

var latlng = [lat, lng];
var cc = "<?php echo ($_POST['comment']); ?>";

var toukou=L.marker(latlng).addTo(map);
toukou.bindPopup('<a href="#"><?php echo ($_POST['comment']); ?></a><br><?php echo ($_POST['image']); ?><br>');

//js-phpの変数設定
<?php
$latitude=$_POST['latitude'];
$longitude=$_POST['longitude'];
?>

<form action = "map.php" method = "post" enctype="multipart/form-data">
     ユーザ名<br>
<?php echo "<input type='text' name='name' value='". $hoji ."'><br />"; ?>
     カテゴリー<br>
        <select name="creature">
        <option value="shokubutu">植物</option>
        <option value="doubutu">動物</option>
        <option value="konchuu">昆虫</option>
        <option value="sakana">魚</option>
        </select><br>
     生物名<br />
        <input type="text" name="comment"><br />
    緯度経度<br>
<?php echo "<input type='text' name='latitude' value='". $latitude . "'<br>"; ?>
<?php echo "<input type='text' name='longitude' value='". $longitude ."'<br>"; ?>
     <br>画像<br>
        <input type="hidden" name="MAX_FILE_SIZE" value="300000">
        <input type="file" name="image"><br />
     パスワード<br>
        <input type="text" name="pass" size="5"><br />
        <input type="submit" name="submit" value="投稿"><br /><br />
</form>

Comments

[m.ts10806]

念のためphpもタグに追加しておいてください。ただ、どこにも投稿した緯度経度を保存されていないようですが、そのあたりはどのような想定で作られていますか？

[m.ts10806]

phpのリクエスト送信は送信したときだけですよ。保存して蓄積してそれを呼び出す仕組みが必要です。

[ohayou]

ただピンを置く場合は　var marker=L.marker([○, ○]).addTo(map); marker.bindPopup("<b>hello</b>");　でできたのですが，変数からマーカーを設置する場合は保存が必要なのですか？

[m.ts10806]

置いただけで「ここに置いたよ」という情報をどこにも保存してませんよね。変数にも寿命があり、スコープというやつですが、処理が終わったら破棄されます。データベースなりなんなりに保存しておかないと蓄積はされませんよ。

[ohayou]

なるほどありがとうございます。データベースを使ってやってみようと思います。回答ありがとうございました！

[m.ts10806]

先に回答がついたのでコメントで済ませてしまいました。失礼しました。データベース利用の場合もそれはそれで壁にあたりやすいのでそのときはまた質問あげてみてください

[ohayou]

お返事遅れてしまって申し訳ございません。かしこまりました。頼りにしてます。

Answer 1

ご提示のソースコードでは、データを保存する部分がないようです。
ご提示されていない部分で保存されている可能性もありますが、保存されているマーカーを地図上にプロットする部分のコードもないようです。

質問者が動作させているコードが見える限りのとおりでしたら、保存と読み込みのコードを書く必要があります。
「マーカーの蓄積」を共有する必要がないのであれば LocalStorage を利用されるといいでしょう。利用の仕方をご存じなければ、まずそれを学習する必要があります。
そうでないなら、サーバに保存する必要がありますので、PHPで処理する必要があるでしょう。データベースの利用についてご存じなければ、それを学習する必要があります。

Comments

[ohayou]

データベースを使ってみようと思います。丁寧なご回答ありがとうございました。