Newer
Older
2023-c122213 / map / last / last-map.js
//function iconClick() {
//var clickCount = 0;
var mymap = L.map("mymap").setView([38.891, 139.824], 13);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution:
   '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

var moguraxIcon = L.icon({
	iconUrl:"mogurax.png",
	iconSize:[75,75],
	iconAnchor:[37,75],
	popupAnchor:[0,-70]
	});
	
    var moguraIcon = L.icon({
    	iconUrl:"mogura.png",
    	iconSize:[75,75],
    	iconAnchor:[37,75],
    	popupAnchor:[0,-70]
        });
        
 var moguraxxIcon = L.icon({
    	iconUrl:"moguraxx.png",
    	iconSize:[75,75],
    	iconAnchor:[37,75],
    	popupAnchor:[0,-70]
        });

//var marker = L.marker([38.919584, 139.827638],{icon:moguraIcon}).addTo(mymap).bindPopup("日和山公園");
//var p1 = L.marker([38.91463864,139.83655262],{icon:moguraIcon}).addTo(mymap).bindPopup("市役所");
var p1 = L.marker([38.902518,139.820064],{icon:moguraIcon}).addTo(mymap).bindPopup("ト一屋高見台店");
var p3 = L.marker([38.893482,139.819486],{icon:moguraIcon}).addTo(mymap).bindPopup("公益大");
var p4 = L.marker([38.890760,139.854155],{icon:moguraIcon}).addTo(mymap).bindPopup("日本海病院");
var p5 = L.marker([38.906964,139.831553],{icon:moguraIcon}).addTo(mymap).bindPopup("市営体育館");
var p6 = L.marker([38.922029,139.846108],{icon:moguraIcon}).addTo(mymap).bindPopup("酒田駅");

var point = 0 ;

 p1.on('click', function(){
    if (p1.getIcon() === moguraIcon) {
      p1.setIcon(moguraxIcon);
      point ++;
    }
  });
  
  p3.on('click', function(){
    if (p3.getIcon() === moguraIcon) {
      p3.setIcon(moguraxIcon);
      point ++;
    }
  });
  
  p4.on('click', function(){
    if (p4.getIcon() === moguraIcon) {
      p4.setIcon(moguraxIcon);
      point ++;
    }
  });
  
  p5.on('click', function(){
    if (p5.getIcon() === moguraIcon) {
      p5.setIcon(moguraxIcon);
      point ++;
    }
  });
  
  p6.on('click', function(){
    if (p6.getIcon() === moguraIcon) {
      p6.setIcon(moguraxIcon);
      point ++;
    }
  });
  
//  var point = 0;
//  function ClickEvent (e){
//       point ++;
//    }
//    var msg = null;
//msg.innerText = `残り ${point}秒`;

    // 3. Marker-Instanceに対して、.on('click', CallBackFunc) でClickイベントの関数を登録!
//    const siyakusyo = L.marker([38.91463864,139.83655262]).addTo(map).on('click', (e) => {
//        ClickEvent(e);
//    });
  
  

//var marker = L.marker([38.919584, 139.827638]).addTo(mymap).bindPopup('地図上のどこかをクリックしてください').openPopup();
//    function moveIcon(e) {
//	marker.setLatLng(e.latlng).bindPopup(
//	    ++clickCount + "回目のクリックです.\n" + e.latlng
//	).openPopup();
//    }
//    mymap.on('click', moveIcon);
//}
//document.addEventListener("DOMContentLoaded", iconClick);

function startCountdown() {
  var time = 10;
  var countdown = document.getElementById('countdown');
  var point = 0;
  
  p1.on('click', function(){
      point ++;
  });
  
  p3.on('click', function(){
      point ++;
  });
  
  p4.on('click', function(){
      point ++;
  });
  
   p6.on('click', function(){
      point ++;
  });
  
  p6.on('click', function(){
      point ++;
  });
  

  var timer = setInterval(function() {
    countdown.innerHTML = time;
    time--;
    
    if (point == 5) {
    	clearInterval(timer);
	alert("clear!酒田の平和は守られた。");
    	
    }
    
    if (time < 0) {
      clearInterval(timer);
      alert("Time's up!");
	if (p1.getIcon() === moguraxIcon || moguraIcon) {
	      p1.setIcon(moguraxxIcon);}
	if (p3.getIcon() === moguraxIcon) {
	      p3.setIcon(moguraxxIcon);}
	if (p4.getIcon() === moguraxIcon) {
	      p4.setIcon(moguraxxIcon);}
	if (p5.getIcon() === moguraxIcon) {
	      p5.setIcon(moguraxxIcon);}
	if (p6.getIcon() === moguraxIcon) {
	      p6.setIcon(moguraxxIcon);}
    }
   
  }, 1000);
}