700x700_two_map.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Side Street Security</title>
    <script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=e2fb6cf32f1f0c1470f2b8b5b045bb01"></script>
    <script>
      var map01, map02;

      function addEventHandler(obj, eventName, handler){
        if(document.attachEvent){
          obj.attachEvent("on" + eventName, handler);
        }else if(document.addEventListener){
          obj.addEventListener(eventName, handler, false);
        }
      }

      addEventHandler(window, "load", function(){
        initMap();
        requestSensorList();
        setSensorEmulation();
      });

      function initMap(){
        var options = {
          center: new daum.maps.LatLng(37.526038607305985, 126.85468311890439),
          level: 3
        };
        map01 = new daum.maps.Map(document.getElementById('map_01'), options);
        map02 = new daum.maps.Map(document.getElementById('map_02'), options);
        daum.maps.event.addListener(map02, 'dragend', function(){dragAndZoomEventHandler();});
        daum.maps.event.addListener(map02, 'zoom_changed', function(){dragAndZoomEventHandler();});

        //센서위치 위도경도값을 얻기위해 지도 클릭시 마커를 표시하고 위도 경도를 출력하는 기능
        //daum.maps.event.addListener(map02, 'click', function(mouseEvent){
        // var thisLatLng = mouseEvent.latLng;
        //    var markerPosition  = new daum.maps.LatLng(thisLatLng.getLat(), thisLatLng.getLng());
        //    var marker = new daum.maps.Marker({
        //      position: markerPosition
        //    });
        //    marker.setMap(map02);
        //    console.log(thisLatLng.getLat() + " - " + thisLatLng.getLng());
        //  });
      }

      function dragAndZoomEventHandler(){
        //to-do
        //request sensor list to server
        setInterval(function(){
          for(var emulSensorId in emulSensorObjList){
            emulSensorObjList[emulSensorId].updateWindowOffsetPosition();
          }
        }, 1);
      }

      function requestSensorList(){
        //var map01Bounds = map01.getBounds();
        //alert(map01Bounds.toString());
        //var map01SWLatLng = map01Bounds.getSouthWest(); //South West Coordinates
        //var map01NELatLng = map01Bounds.getNorthEast(); //North East Coordinates

        //latitude  : 위도 - 북위 90°  ~ 남위 90°
        //longitude : 경도 - 동경 180° ~ 서경 180°
        //다음지도는 우리나라만 표시되므로 항상 북위, 동경
        var sensorListJson = '{"sensor_list":[{"id":"sensor_001", "lat":37.52625429, "lng":126.854233},{"id":"sensor_002", "lat":37.5262545, "lng":126.8544027},{"id":"sensor_003", "lat":37.5261103, "lng":126.854369},{"id":"sensor_004", "lat":37.52615063, "lng":126.8541936},{"id":"sensor_005", "lat":37.52602895, "lng":126.8541599},{"id":"sensor_006", "lat":37.52597962, "lng":126.854341},{"id":"sensor_007", "lat":37.52585793, "lng":126.854296},{"id":"sensor_008", "lat":37.52586671, "lng":126.8541093},{"id":"sensor_009", "lat":37.52578127, "lng":126.8542339},{"id":"sensor_010", "lat":37.52580849, "lng":126.8543923},{"id":"sensor_011", "lat":37.52584935, "lng":126.8546467},{"id":"sensor_012", "lat":37.52609268, "lng":126.8546972},{"id":"sensor_013", "lat":37.52631798, "lng":126.8547363},{"id":"sensor_014", "lat":37.52648859, "lng":126.8542665},{"id":"sensor_015", "lat":37.52674545, "lng":126.8543226},{"id":"sensor_016", "lat":37.52684034, "lng":126.8545543},{"id":"sensor_017", "lat":37.52700232, "lng":126.8543899},{"id":"sensor_018", "lat":37.52710625, "lng":126.8546499},{"id":"sensor_019", "lat":37.52707954, "lng":126.8549045},{"id":"sensor_020", "lat":37.5269669, "lng":126.8548934},{"id":"sensor_021", "lat":37.52684523, "lng":126.854871},{"id":"sensor_022", "lat":37.52673709, "lng":126.8548486},{"id":"sensor_023", "lat":37.52661541, "lng":126.8548149},{"id":"sensor_024", "lat":37.52671344, "lng":126.853938},{"id":"sensor_025", "lat":37.52673125, "lng":126.8537683},{"id":"sensor_026", "lat":37.52660957, "lng":126.8537346},{"id":"sensor_027", "lat":37.52648789, "lng":126.8536952},{"id":"sensor_028", "lat":37.5263572, "lng":126.8536615},{"id":"sensor_029", "lat":37.5262896, "lng":126.853639},{"id":"sensor_030", "lat":37.52617694, "lng":126.853611},{"id":"sensor_031", "lat":37.52606878, "lng":126.8535829},{"id":"sensor_032", "lat":37.52598784, "lng":126.8537018},{"id":"sensor_033", "lat":37.52599219, "lng":126.8535774},{"id":"sensor_034", "lat":37.52592459, "lng":126.8535549},{"id":"sensor_035", "lat":37.52585248, "lng":126.8535324},{"id":"sensor_036", "lat":37.52577589, "lng":126.8535269},{"id":"sensor_037", "lat":37.52569476, "lng":126.8534931},{"id":"sensor_038", "lat":37.52572667, "lng":126.8537985},{"id":"sensor_039", "lat":37.52578111, "lng":126.8541038},{"id":"sensor_040", "lat":37.52566848, "lng":126.8541041},{"id":"sensor_041", "lat":37.52554237, "lng":126.8541269},{"id":"sensor_042", "lat":37.52542976, "lng":126.8541385},{"id":"sensor_043", "lat":37.52533522, "lng":126.8541952},{"id":"sensor_044", "lat":37.52560505, "lng":126.85381},{"id":"sensor_045", "lat":37.52551049, "lng":126.8538442},{"id":"sensor_046", "lat":37.52541138, "lng":126.85385},{"id":"sensor_047", "lat":37.52533482, "lng":126.8538671},{"id":"sensor_048", "lat":37.52527636, "lng":126.8539521},{"id":"sensor_049", "lat":37.52560011, "lng":126.8534594},{"id":"sensor_050", "lat":37.52546497, "lng":126.8534709},{"id":"sensor_051", "lat":37.52536584, "lng":126.8534485},{"id":"sensor_052", "lat":37.52527124, "lng":126.85346},{"id":"sensor_053", "lat":37.52516308, "lng":126.8534263},{"id":"sensor_054", "lat":37.52505043, "lng":126.8534039},{"id":"sensor_055", "lat":37.52493329, "lng":126.8533928},{"id":"sensor_056", "lat":37.52485674, "lng":126.8534269},{"id":"sensor_057", "lat":37.52476209, "lng":126.8533875},{"id":"sensor_058", "lat":37.52488905, "lng":126.854049},{"id":"sensor_059", "lat":37.52513673, "lng":126.8539693},{"id":"sensor_060", "lat":37.52518227, "lng":126.8543709},{"id":"sensor_061", "lat":37.52538965, "lng":126.8544949},{"id":"sensor_062", "lat":37.52560131, "lng":126.8544266},{"id":"sensor_063", "lat":37.52575482, "lng":126.8547035},{"id":"sensor_064", "lat":37.52566924, "lng":126.8547206},{"id":"sensor_065", "lat":37.52556113, "lng":126.8547265},{"id":"sensor_066", "lat":37.52541252, "lng":126.854772},{"id":"sensor_067", "lat":37.52536283, "lng":126.854659},{"id":"sensor_068", "lat":37.52526826, "lng":126.8546874},{"id":"sensor_069", "lat":37.52517818, "lng":126.8547102},{"id":"sensor_070", "lat":37.52507458, "lng":126.8547218},{"id":"sensor_071", "lat":37.52497549, "lng":126.8547389},{"id":"sensor_072", "lat":37.5251057, "lng":126.8543823},{"id":"sensor_073", "lat":37.52497509, "lng":126.8544108},{"id":"sensor_074", "lat":37.52540373, "lng":126.854953},{"id":"sensor_075", "lat":37.5252596, "lng":126.8549759},{"id":"sensor_076", "lat":37.52519203, "lng":126.8549817},{"id":"sensor_077", "lat":37.52502988, "lng":126.8550047},{"id":"sensor_078", "lat":37.52565611, "lng":126.8550317},{"id":"sensor_079", "lat":37.525895, "lng":126.8551331},{"id":"sensor_080", "lat":37.52633625, "lng":126.8549399},{"id":"sensor_081", "lat":37.52631389, "lng":126.8550701},{"id":"sensor_082", "lat":37.52618771, "lng":126.8550364},{"id":"sensor_083", "lat":37.52611111, "lng":126.8550252},{"id":"sensor_084", "lat":37.52602098, "lng":126.8550027},{"id":"sensor_085", "lat":37.52589479, "lng":126.8549634},{"id":"sensor_086", "lat":37.52593575, "lng":126.855297},{"id":"sensor_087", "lat":37.52617004, "lng":126.8553249},{"id":"sensor_088", "lat":37.52640438, "lng":126.8553866},{"id":"sensor_089", "lat":37.5270303, "lng":126.8551648},{"id":"sensor_090", "lat":37.527008, "lng":126.8553459},{"id":"sensor_091", "lat":37.52699017, "lng":126.8555043},{"id":"sensor_092", "lat":37.52684605, "lng":126.8555329},{"id":"sensor_093", "lat":37.52673342, "lng":126.8555331},{"id":"sensor_094", "lat":37.52659833, "lng":126.8555842},{"id":"sensor_095", "lat":37.52649474, "lng":126.8556014},{"id":"sensor_096", "lat":37.5263461, "lng":126.8556243},{"id":"sensor_097", "lat":37.52626952, "lng":126.8556245},{"id":"sensor_098", "lat":37.52613892, "lng":126.8556643},{"id":"sensor_099", "lat":37.52605785, "lng":126.8556814},{"id":"sensor_100", "lat":37.52596329, "lng":126.8557156},{"id":"sensor_101", "lat":37.5258642, "lng":126.8557327},{"id":"sensor_102", "lat":37.52571559, "lng":126.8557783},{"id":"sensor_103", "lat":37.52558497, "lng":126.8557955},{"id":"sensor_104", "lat":37.52543182, "lng":126.8558127},{"id":"sensor_105", "lat":37.52533727, "lng":126.8558638},{"id":"sensor_106", "lat":37.52525168, "lng":126.855864},{"id":"sensor_107", "lat":37.52513908, "lng":126.8558868},{"id":"sensor_108", "lat":37.52514307, "lng":126.8554626},{"id":"sensor_109", "lat":37.52505751, "lng":126.8554911},{"id":"sensor_110", "lat":37.52599955, "lng":126.8558965},{"id":"sensor_111", "lat":37.52601773, "lng":126.8560322},{"id":"sensor_112", "lat":37.52604496, "lng":126.8561962},{"id":"sensor_113", "lat":37.52692772, "lng":126.8560135},{"id":"sensor_114", "lat":37.52693655, "lng":126.8558664},{"id":"sensor_115", "lat":37.52695435, "lng":126.8556797},{"id":"sensor_116", "lat":37.52731503, "lng":126.8559109},{"id":"sensor_117", "lat":37.52721144, "lng":126.8559338},{"id":"sensor_118", "lat":37.52715289, "lng":126.8559452},{"id":"sensor_119", "lat":37.52677462, "lng":126.8560647},{"id":"sensor_120", "lat":37.52665749, "lng":126.8560706},{"id":"sensor_121", "lat":37.52651784, "lng":126.8560765},{"id":"sensor_122", "lat":37.52642777, "lng":126.8560937},{"id":"sensor_123", "lat":37.52627466, "lng":126.8561505},{"id":"sensor_124", "lat":37.52589632, "lng":126.8562135},{"id":"sensor_125", "lat":37.52580173, "lng":126.856225},{"id":"sensor_126", "lat":37.52565311, "lng":126.8562592},{"id":"sensor_127", "lat":37.525518, "lng":126.8562934},{"id":"sensor_128", "lat":37.52538289, "lng":126.8563276},{"id":"sensor_129", "lat":37.52527028, "lng":126.8563448},{"id":"sensor_130", "lat":37.52518471, "lng":126.8563619},{"id":"sensor_131", "lat":37.52561284, "lng":126.8564912},{"id":"sensor_132", "lat":37.52562204, "lng":126.8566495},{"id":"sensor_133", "lat":37.52566738, "lng":126.856887},{"id":"sensor_134", "lat":37.52613123, "lng":126.8567504},{"id":"sensor_135", "lat":37.52640595, "lng":126.8566763},{"id":"sensor_136", "lat":37.5266537, "lng":126.8566532},{"id":"sensor_137", "lat":37.52685624, "lng":126.8565058},{"id":"sensor_138", "lat":37.52686952, "lng":126.8563134},{"id":"sensor_139", "lat":37.52694753, "lng":126.8538018},{"id":"sensor_140", "lat":37.52716381, "lng":126.8538353},{"id":"sensor_141", "lat":37.52724023, "lng":126.8536994},{"id":"sensor_142", "lat":37.52726259, "lng":126.8535636},{"id":"sensor_143", "lat":37.52729388, "lng":126.8533712},{"id":"sensor_144", "lat":37.52731168, "lng":126.8531902},{"id":"sensor_145", "lat":37.52719552, "lng":126.853971},{"id":"sensor_146", "lat":37.52717775, "lng":126.8541747},{"id":"sensor_147", "lat":37.52722312, "lng":126.8544348},{"id":"sensor_148", "lat":37.52745294, "lng":126.8544909},{"id":"sensor_149", "lat":37.52755051, "lng":126.8532406},{"id":"sensor_150", "lat":37.52723052, "lng":126.8531337},{"id":"sensor_151", "lat":37.5271224, "lng":126.853134},{"id":"sensor_152", "lat":37.52697368, "lng":126.853089},{"id":"sensor_153", "lat":37.52686099, "lng":126.8530383},{"id":"sensor_154", "lat":37.52677537, "lng":126.8530215},{"id":"sensor_155", "lat":37.52670325, "lng":126.8529877},{"id":"sensor_156", "lat":37.52664012, "lng":126.8529369},{"id":"sensor_157", "lat":37.52665343, "lng":126.8527785},{"id":"sensor_158", "lat":37.52689228, "lng":126.8528459},{"id":"sensor_159", "lat":37.52712214, "lng":126.8529303},{"id":"sensor_160", "lat":37.52736997, "lng":126.8529694},{"id":"sensor_161", "lat":37.5266176, "lng":126.8529426},{"id":"sensor_162", "lat":37.52658679, "lng":126.853531},{"id":"sensor_163", "lat":37.52659115, "lng":126.8534122},{"id":"sensor_164", "lat":37.52657743, "lng":126.8532425},{"id":"sensor_165", "lat":37.52652319, "lng":126.8531012},{"id":"sensor_166", "lat":37.52652753, "lng":126.8529711},{"id":"sensor_167", "lat":37.52644185, "lng":126.8528977},{"id":"sensor_168", "lat":37.52635624, "lng":126.8528866},{"id":"sensor_169", "lat":37.52629309, "lng":126.8528245},{"id":"sensor_170", "lat":37.5262074, "lng":126.8527455},{"id":"sensor_171", "lat":37.5261038, "lng":126.852757},{"id":"sensor_172", "lat":37.52606334, "lng":126.8528306},{"id":"sensor_173", "lat":37.52597782, "lng":126.8528873},{"id":"sensor_174", "lat":37.52605469, "lng":126.8531134},{"id":"sensor_175", "lat":37.52591033, "lng":126.8529553},{"id":"sensor_176", "lat":37.52578438, "lng":126.8531083},{"id":"sensor_177", "lat":37.52563131, "lng":126.8531934},{"id":"sensor_178", "lat":37.52547809, "lng":126.8531485},{"id":"sensor_179", "lat":37.52534292, "lng":126.8531374},{"id":"sensor_180", "lat":37.52523027, "lng":126.853115},{"id":"sensor_181", "lat":37.52510865, "lng":126.8531266},{"id":"sensor_182", "lat":37.52502756, "lng":126.8531268},{"id":"sensor_183", "lat":37.52495547, "lng":126.8531212},{"id":"sensor_184", "lat":37.52484754, "lng":126.8532742},{"id":"sensor_185", "lat":37.52484734, "lng":126.8531101},{"id":"sensor_186", "lat":37.52487402, "lng":126.8528329},{"id":"sensor_187", "lat":37.52514883, "lng":126.8528324},{"id":"sensor_188", "lat":37.52539207, "lng":126.8528093},{"id":"sensor_189", "lat":37.5256264, "lng":126.8528654},{"id":"sensor_190", "lat":37.52655682, "lng":126.8547981},{"id":"sensor_191", "lat":37.5267084, "lng":126.8571848},{"id":"sensor_192", "lat":37.52655977, "lng":126.8572134},{"id":"sensor_193", "lat":37.52644264, "lng":126.8572136},{"id":"sensor_194", "lat":37.52627155, "lng":126.8572931},{"id":"sensor_195", "lat":37.52619499, "lng":126.8573216},{"id":"sensor_196", "lat":37.52617663, "lng":126.8570388},{"id":"sensor_197", "lat":37.52605884, "lng":126.8564903},{"id":"sensor_198", "lat":37.52610061, "lng":126.8575084},{"id":"sensor_199", "lat":37.52593847, "lng":126.857537},{"id":"sensor_200", "lat":37.52574931, "lng":126.8575826},{"id":"sensor_201", "lat":37.5257537, "lng":126.8574808},{"id":"sensor_202", "lat":37.52572638, "lng":126.8572433},{"id":"sensor_203", "lat":37.52570373, "lng":126.8571415},{"id":"sensor_204", "lat":37.52565023, "lng":126.8576054},{"id":"sensor_205", "lat":37.52558717, "lng":126.8576112},{"id":"sensor_206", "lat":37.5255151, "lng":126.8576226},{"id":"sensor_207", "lat":37.52538448, "lng":126.8576399},{"id":"sensor_208", "lat":37.52581279, "lng":126.8579162},{"id":"sensor_209", "lat":37.52611463, "lng":126.8579269},{"id":"sensor_210", "lat":37.5262451, "lng":126.8577796},{"id":"sensor_211", "lat":37.52628156, "lng":126.8581246},{"id":"sensor_212", "lat":37.5266008, "lng":126.8576149},{"id":"sensor_213", "lat":37.52666402, "lng":126.8577392},{"id":"sensor_214", "lat":37.5266148, "lng":126.8580165},{"id":"sensor_215", "lat":37.5265925, "lng":126.8582032},{"id":"sensor_216", "lat":37.52655225, "lng":126.8584522},{"id":"sensor_217", "lat":37.52655251, "lng":126.8586728},{"id":"sensor_218", "lat":37.52649419, "lng":126.8588765},{"id":"sensor_219", "lat":37.52636358, "lng":126.858905},{"id":"sensor_220", "lat":37.52635883, "lng":126.8586958},{"id":"sensor_221", "lat":37.52631808, "lng":126.8585261},{"id":"sensor_222", "lat":37.52612447, "lng":126.8586114},{"id":"sensor_223", "lat":37.52604788, "lng":126.8586115},{"id":"sensor_224", "lat":37.52592179, "lng":126.858657},{"id":"sensor_225", "lat":37.52590359, "lng":126.8584986},{"id":"sensor_226", "lat":37.5258583, "lng":126.8583064},{"id":"sensor_227", "lat":37.52582654, "lng":126.8581142},{"id":"sensor_228", "lat":37.52595369, "lng":126.8589624},{"id":"sensor_229", "lat":37.52583661, "lng":126.8589965},{"id":"sensor_230", "lat":37.52572852, "lng":126.859025},{"id":"sensor_231", "lat":37.52563393, "lng":126.8590422},{"id":"sensor_232", "lat":37.52676904, "lng":126.8589099},{"id":"sensor_233", "lat":37.52645871, "lng":126.8593404},{"id":"sensor_234", "lat":37.52645402, "lng":126.8591877},{"id":"sensor_235", "lat":37.52621501, "lng":126.8589845},{"id":"sensor_236", "lat":37.52602172, "lng":126.8593356},{"id":"sensor_237", "lat":37.52694275, "lng":126.8572579},{"id":"sensor_238", "lat":37.52567107, "lng":126.8525598},{"id":"sensor_239", "lat":37.52593244, "lng":126.8526272},{"id":"sensor_240", "lat":37.52640521, "lng":126.8524226},{"id":"sensor_241", "lat":37.52617991, "lng":126.8523778},{"id":"sensor_242", "lat":37.5260132, "lng":126.8523612},{"id":"sensor_243", "lat":37.52586447, "lng":126.8523106},{"id":"sensor_244", "lat":37.52570224, "lng":126.8522713},{"id":"sensor_245", "lat":37.5255761, "lng":126.8522716},{"id":"sensor_246", "lat":37.52535092, "lng":126.8523229},{"id":"sensor_247", "lat":37.52517071, "lng":126.8523176},{"id":"sensor_248", "lat":37.52504002, "lng":126.8522839},{"id":"sensor_249", "lat":37.52485982, "lng":126.8522786},{"id":"sensor_250", "lat":37.52475167, "lng":126.8522562},{"id":"sensor_251", "lat":37.52464806, "lng":126.8522621},{"id":"sensor_252", "lat":37.52478798, "lng":126.8524767},{"id":"sensor_253", "lat":37.52500874, "lng":126.852482},{"id":"sensor_254", "lat":37.52531962, "lng":126.8525153},{"id":"sensor_255", "lat":37.52561698, "lng":126.8525373},{"id":"sensor_256", "lat":37.52559379, "lng":126.8520057},{"id":"sensor_257", "lat":37.52540008, "lng":126.8520061},{"id":"sensor_258", "lat":37.52517483, "lng":126.8520065},{"id":"sensor_259", "lat":37.52508002, "lng":126.8518483},{"id":"sensor_260", "lat":37.5249899, "lng":126.8518315},{"id":"sensor_261", "lat":37.52495403, "lng":126.8519673}]}';
        onSensorListResponse(sensorListJson);
      }

      var sensorObjList = {};
      var emulSensorObjList = {};
      function onSensorListResponse(pSensorListJson){
        var sensorListJsonObj = eval("(" + pSensorListJson + ")");
        var sensorListArray = sensorListJsonObj.sensor_list;
        for(var i = 0 ; i < sensorListArray.length ; i++){
          var sensorInfo = sensorListArray[i];
          if(sensorObjList[sensorInfo.id]){
            console.log("duplicated sensor id : " + sensorInfo.id + " - ignore");
            continue;
          }
          sensorObjList[sensorInfo.id] = new SensorClass(map01, sensorInfo.id, sensorInfo.lat, sensorInfo.lng);
          emulSensorObjList[sensorInfo.id] = new SensorEmulateClass(map02, sensorInfo.id, sensorInfo.lat, sensorInfo.lng);
        }
      }

      function SensorClass(pMap, pSensorId, pLat, pLng){
        var content = '<div id="' + pSensorId + '" style="height:10px; width:10px; border:2px solid #FF0000; border-radius:10px;"></div>';
        var position = new daum.maps.LatLng(pLat, pLng);
        var customOverlay = new daum.maps.CustomOverlay({
          position: position,
          content: content,
          xAnchor: 0.5,
          yAnchor: 0.5
        });
        customOverlay.setMap(pMap);
        this.sensorId = pSensorId;
        this.sensorObj;
        this.setSensingValue = function(pValue){
          if(pValue < 0){console.log("value under zero - treat as zero"); pValue = 0;}
          if(!this.sensorObj){
            this.sensorObj = document.getElementById(this.sensorId);
            if(!this.sensorObj){return;}
          }
          var targetSize = (pValue * 2 + 10);
          this.sensorObj.style.marginTop = "-" + pValue + "px";
          this.sensorObj.style.marginLeft = "-" + pValue + "px";
          this.sensorObj.style.width = targetSize + "px";
          this.sensorObj.style.height = targetSize + "px";
          this.sensorObj.style.borderRadius = targetSize + "px";
        }
      }

      function SensorEmulateClass(pMap, pSensorId, pLat, pLng){
        this.sensorObjId = "emul_" + pSensorId;
        var content = '<div id="' + this.sensorObjId + '" style="height:10px; width:10px; border:2px solid #FF0000; border-radius:10px;"></div>';
        var position = new daum.maps.LatLng(pLat, pLng);
        var customOverlay = new daum.maps.CustomOverlay({
          position: position,
          content: content,
          xAnchor: 0.5,
          yAnchor: 0.5
        });
        customOverlay.setMap(pMap);
        this.sensorObj;
        this.windowOffsetLeft;
        this.windowOffsetTop;
        this.updateWindowOffsetPosition = function(){
          if(!this.sensorObj){
            this.sensorObj = document.getElementById(this.sensorObjId);
            if(!this.sensorObj){
              this.windowOffsetLeft = null;
              this.windowOffsetTop = null;
              return;
            }
          }
          this.windowOffsetLeft = 0;
          this.windowOffsetTop = 0;
          var curObj = this.sensorObj;
          while(curObj != document.body && curObj != null){
            this.windowOffsetLeft += curObj.offsetLeft;
            this.windowOffsetTop  += curObj.offsetTop;
            curObj = curObj.parentElement;
          }
        }
        this.updateWindowOffsetPosition();
      }

      var curMouseX;
      var curMouseY;
      function setSensorEmulation(){
        addEventHandler(window, "mousemove", function(event){
          curMouseX = event.clientX;
          curMouseY = event.clientY;
        });
        setInterval(function(){
          if(!curMouseX || !curMouseY){return;}
          var sensorDataJson = "";
          for(var emulSensorId in emulSensorObjList){
            var sensorValue = 0;
            var emulSensor = emulSensorObjList[emulSensorId];
            if(emulSensor && emulSensor.windowOffsetLeft && emulSensor.windowOffsetTop){
              var xDistance = Math.abs(emulSensor.windowOffsetLeft - curMouseX);
              var yDistance = Math.abs(emulSensor.windowOffsetTop  - curMouseY);
              var sDistance = Math.floor(Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2)));
              var MAX_DISTANCE = 20;
              if(sDistance > MAX_DISTANCE){sDistance = MAX_DISTANCE;}
              sensorValue = MAX_DISTANCE - sDistance;
            }
            if(sensorDataJson == ""){sensorDataJson = '{"sensor_value_list":[';}
            else{sensorDataJson += ",";}
            sensorDataJson += '{"sensor_id":"' + emulSensorId + '","sensor_value":' + sensorValue + '}';
          }
          sensorDataJson += "]}";
          onSensorDataResponse(sensorDataJson);
        }, 300);
      }

      function onSensorDataResponse(pJsonParam){
        var paramObj = eval("(" + pJsonParam + ")");
        var sensorValueList = paramObj.sensor_value_list;
        for(var i = 0 ; i < sensorValueList.length ; i++){
          var sensorValue = sensorValueList[i];
          sensorObjList[sensorValue.sensor_id].setSensingValue(sensorValue.sensor_value);
        }
      }
    </script>
  </head>
  <body>
    <div id="map_01" style="width:700px; height:700px; position:absolute; top:10px; left:10px;  border:1px solid #000000;"></div>
    <div id="map_02" style="width:700px; height:700px; position:absolute; top:10px; left:720px; border:1px solid #000000;"></div>
  </body>
</html>

Comments