//var myoverlays =[]; //overlays added by my server
var control = '';
var mylayers = [];
var settinglayers = [];
var settings = {};
var iconsar = [];
var LassoObj = {};
var mapopts = {
  preferCanvas: true,
  //    attributionControl: false, //caueses geocode to fail 
};
var currentbaselayer = 'Default';//'Hybrid';
var alayers = [];
var viewset = false;
var mastgrpadded = false; //maybe used to set view but focusing on geojson 0

var map = L.map('map', mapopts).setView([38, -80], 10);

map.on('baselayerchange', function (e) {
  // console.log(e.layer);
  currentbaselayer = e.name;
  // console.log(currentbaselayer);

});


map.on('overlayremove', function (e) {
  // console.log(e.layer);
  // currentbaselayer =e.name;
  //   console.log(currentbaselayer);

  var taindex = alayers.indexOf(e.name);

  if (taindex > -1) {
    alayers.splice(taindex, 1);
  }
  // console.log(alayers); 
});

map.on('overlayadd', function (e) {
  // console.log(e.layer);
  alayers.push(e.name);
  // console.log(currentbaselayer);
  // console.log(alayers); 
});


if (maprealm == 'agent') {
  leafletapp_geocodesearch();
}


//measure control
//a fix for errors
L.Control.Measure.include({
	// set icon on the capture marker
	_setCaptureMarkerIcon: function () {
		// disable autopan
		this._captureMarker.options.autoPanOnFocus = false;

		// default function
		this._captureMarker.setIcon(
			L.divIcon({
				iconSize: this._map.getSize().multiplyBy(2)
			})
		);
	},
});

var measure = L.control.measure({}).addTo(map);

/*
var measureControl = L.control.measure();
measureControl.addTo(map);
*/

//L.simpleMapScreenshoter().addTo(map);

leafletapp_customicons();


leafletapp_externaloverlays();

leafletapp_readsettingsfile();


leafletapp_onmove();


leafletapp_onclick();
leafletapp_menu();
//leafletapp_watermark();

///////////////////////////////////////
//LASSO OPTIONAL INIT IN READ SETTINGS//
///////////////////////////////////////
function LassoEvents() {
  //LASSO//
  LassoObj.toggleLasso = document.querySelector('#toggleLasso');
  LassoObj.contain = document.querySelector('#contain');
  LassoObj.intersect = document.querySelector('#intersect');
  LassoObj.lassoEnabled = document.querySelector('#lassoEnabled');
  LassoObj.lassoResult = document.querySelector('#lassoResult');

  map.on('mousedown', () => {
    resetSelectedState();
  });
  map.on('lasso.finished', event => {

    setSelectedLayers(event.layers);


    // return false;
  });
  map.on('lasso.enabled', () => {

    map.off('click');
    LassoObj.lassoEnabled.innerHTML = 'Enabled';
    resetSelectedState();
  });
  map.on('lasso.disabled', () => {


    LassoObj.finished = Date.now();
    map.on('click', leafletapp_onclickfun);
    LassoObj.lassoEnabled.innerHTML = 'Disabled';


    //return false;

  });

  LassoObj.toggleLasso.addEventListener('click', () => {
    if (lassoControl.enabled()) {
      lassoControl.disable();
    } else {
      lassoControl.enable();
    }
  });

  contain.addEventListener('change', () => {
    lassoControl.setOptions({ intersect: intersect.checked });
  });
  intersect.addEventListener('change', () => {
    lassoControl.setOptions({ intersect: intersect.checked });
  });

}

function resetSelectedState() {
  map.eachLayer(layer => {
    if (layer instanceof L.Marker && !(layer instanceof L.MarkerCluster)) {
      layer.setIcon(new L.Icon.Default());
    } else if (layer instanceof L.Path) {
      layer.setStyle({ color: '#3388ff' });
    }
  });

  LassoObj.lassoResult.innerHTML = '';
}
function setSelectedLayers(layers) {
  resetSelectedState();
  var Lassoed = {};
  Lassoed["Lassoed"] = {};

  layers.forEach(layer => {
    //console.log(layer.userid);
    // var properties = layer.properties;
    //console.log(layer);
    // Lassoed.push(layer.userid);
    Lassoed["Lassoed"][layer.userid] = layer.userid;


    if (layer instanceof L.Marker && !(layer instanceof L.MarkerCluster)) {
      layer.setIcon(new L.Icon.Default({ className: 'selected ' }));
    } else if (layer instanceof L.Path) {
      layer.setStyle({ color: '#ff4620' });
    }
  });

  LassoObj.lassoResult.innerHTML = layers.length ? `Selected ${layers.length} layers ` : '';

  //console.log(Lassoed);
  //Lassoed

  $.post("/z/mapdraw?command=leaflet&step=lassoed&skin=ajax", Lassoed).done(function (data) {
    LassoObj.lassoResult.innerHTML = data;
    DropDownUrlinit();
    console.log('URL ACTIVATED');
  });


}

//END LASSO//



function leafletapp_geocodesearch() {
  //only executes for agents
  //geocode 
/*
   var searchControl = L.esri.Geocoding.geosearch({
    position: 'topright',
        providers: [
          L.esri.Geocoding.arcgisOnlineProvider({
   
          })
        ]
      }).addTo(map);


  var results = L.layerGroup().addTo(map);
  */
/*

      // listen for the results event and add every result to the map
      searchControl.on("results", function (data) {
        results.clearLayers();
        for (var i = data.results.length - 1; i >= 0; i--) {
          results.addLayer(L.marker(data.results[i].latlng));
        }
      });
*/

// apikey: 'YOUR_API_KEY'


 //quit working when upgrade esri to v3
 var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();


  //https://services.wvgis.wvu.edu/arcgis/rest/services/Planning_Cadastre/WV_Parcels/MapServer/
  var RedOakGeo = L.esri.Geocoding.arcgisOnlineProvider({
    url: 'https://www.property4u.com/z/mapdraw?command=geocode&step=redoakgeo&type=p&qin=',
    searchFields: ['CountyName'], // Search these fields for text matches

    label: 'RED OAK RESULTS', // Group suggestions under this header
    maxResults: '15',
    formatSuggestion: function (feature) {
      //console.dir(feature);
      //return 'HELLO '+feature.properties.display; // format suggestions like this.
    }
  });




  var corner1 = L.latLng(37.1411, -82.8003),
    corner2 = L.latLng(40.6888, -77.6728),
    bounds = L.latLngBounds(corner1, corner2);


  var searchControl = L.esri.Geocoding.geosearch({
    position: 'topright',
    providers: [arcgisOnline],
    searchBounds: bounds,
  }).addTo(map);

  var results = L.layerGroup().addTo(map);

  searchControl.on('results', function (data) {
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
  });


  if (maprealm == 'agent') //agent only searches
  {
    //causes returns from session execute and is agent retstricted for every execute....
    //too much outside traffice and security failures
    //listing search
    var searchControl2 = L.esri.Geocoding.geosearch({
      position: 'topright',
      placeholder: 'Search Red Oak',
      providers: [RedOakGeo],
      searchBounds: bounds,
    }).addTo(map);
  }

  var results2 = L.layerGroup().addTo(map);

  searchControl2.on('results', function (data) {
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results2.addLayer(L.marker(data.results[i].latlng));
    }
  });




}


function leafletapp_addlayercontrol() {


  //BASE MAP
  //sets the initial active basemap
  
  if (settings.basemap) map.addLayer(mylayers.base[settings.basemap]);
  else {
    //this causes an error, but I dont have a solution
   mylayers.base['Default'].addTo(map);
  }






  //called after settings file is read
  var overlays = {};
  for (var index in mylayers.overlays) {
    overlays[index] = mylayers.overlays[index];



  }
  for (var lname in settinglayers.overlays) overlays[lname] = settinglayers.overlays[lname];



  var baselayers = {};
  for (var index in mylayers.base) {
    baselayers[index] = mylayers.base[index];
  }



  //LOAD WITH INTITAL MAP LOAD
  if (settings["initoverlays"]) {
    for (var index in settings["initoverlays"]) {
      mylayers.overlays[index].addTo(map);
      alayers.push(mylayers.overlays[index].name);
    }
  }



  var collap = true;

  if (settings["theoverlays"]) {
    for (var index in settings["theoverlays"]) {
      overlays[settings["theoverlays"][index]].addTo(map);

      if (index==0) {

      }


    }
  }
  else {
    //disply all setting layers on map
    var mastgrp = new L.featureGroup();
    var mastgrpadded = false;
    for (var lname in settinglayers.overlays) {
      settinglayers.overlays[lname].addTo(map);
      settinglayers.overlays[lname].addTo(mastgrp);
      mastgrpadded = 'true';

      overlays[lname] = settinglayers.overlays[lname];


    }

  }




  if (!settings.layers.geojson) {
    //default view geojson layers take priority
    leafletapp_setview();
  }


 

  //LAYER CONTROL
  //control =L.control.activeLayers(baselayers, overlays, {collapsed: collap});
  //control.addTo(map);
  L.control.layers(baselayers, overlays, { collapsed: collap }).addTo(map);



  //scale
  L.control.scale().addTo(map);





}


function leafletapp_setview() {

console.log("RUNNING NON GEOJSON BASED VIEW");

   //VIEW 
  if (settings.view) {
console.log("USING VIEW SETTING");

    map.setView([settings.view.latitude, settings.view.longitude], settings.view.zoom);
   } else if (settings.masterlayer) {
console.log("USING MASTER LAYER");
          map.fitBounds(settinglayers.overlays[settings.masterlayer].getBounds());
  }
  else if (mastgrpadded == 'true') {
console.log("USING MATER GROUP");
 //map.fitBounds(settinglayers.overlays[settings.masterlayer].getBounds());

    map.fitBounds(mastgrp.getBounds());
     mastgrp.bringToFront();
  } else {


    //map.fitBounds(settinglayers.overlays[0].getBounds());


    console.log("NO BOUNDS METHOR FOUND");
  }


  if (settings.zoom) {
    console.log("CHANGING ZOOM");
    map.setZoom(settings.zoom);
  }

}


function leafletapp_customicons() {

  iconsar['redoaksign'] = L.icon({
    iconUrl: '/objects/mailbox_icon.png',

    iconSize: [38, 38], // size of the icon
    iconAnchor: [19, 30], // point of the icon which will correspond to marker's location
    //  popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
  });


  iconsar['redoaksign'] = L.icon({
    iconUrl: '/objects/maps/googlemapsign.png',

    iconSize: [38, 38], // size of the icon
    iconAnchor: [19, 19], // point of the icon which will correspond to marker's location
    //  popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
  });


  iconsar['wvumailboxIcon'] = L.icon({
    iconUrl: '/objects/mailbox_icon.png',

    iconSize: [38, 38], // size of the icon
    iconAnchor: [19, 19], // point of the icon which will correspond to marker's location
    //  popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
  });


  //oilandgas
  iconsar['activewell'] = L.icon({
    iconUrl: '/objects/oilandgas/activewell.png',

    iconSize: [12, 12], // size of the icon
    iconAnchor: [6, 6], // point of the icon which will
  })

  iconsar['allother'] = L.icon({
    iconUrl: '/objects/oilandgas/allother.png',

    iconSize: [24, 24], // size of the icon
    iconAnchor: [12, 12], // point of the icon which will
  })

  iconsar['neverdrilled'] = L.icon({
    iconUrl: '/objects/oilandgas/neverdrilled.png',

    iconSize: [24, 24], // size of the icon
    iconAnchor: [12, 12], // point of the icon which will
  })
  iconsar['neverissued'] = L.icon({
    iconUrl: '/objects/oilandgas/neverissued.png',

    iconSize: [24, 24], // size of the icon
    iconAnchor: [12, 12], // point of the icon which will
  })
  iconsar['permitapplication'] = L.icon({
    iconUrl: '/objects/oilandgas/permitapplication.png',

    iconSize: [24, 24], // size of the icon
    iconAnchor: [12, 12], // point of the icon which will
  })
  iconsar['permitissued'] = L.icon({
    iconUrl: '/objects/oilandgas/permitissued.png',

    iconSize: [24, 24], // size of the icon
    iconAnchor: [12, 12], // point of the icon which will
  })
  iconsar['plugged'] = L.icon({
    iconUrl: '/objects/oilandgas/plugged.png',

    iconSize: [24, 24], // size of the icon
    iconAnchor: [12, 12], // point of the icon which will
  })



}
function leafletapp_onmove() {
  if (maprealm == 'agent') {
    map.on('move', function (e) {
      if (gmapready) {
        var latitude = map.getCenter().lat;
        var longitude = map.getCenter().lng;
        var zoom = map.getZoom()
        gmapsetbounds(latitude, longitude, zoom);
      }
    });
  }
}



function leafletapp_menu() {
  //menu

  var murl = "/z/mapdraw?command=leaflet&step=menu&skin=ajax";
  if (mapid) murl += "&mapid=" + mapid;
  if (maprealm) murl += "&maprealm=" + maprealm;
  $.get(murl).done(function (mdata) {
    // alert(mdata);
    L.control.slideMenu(mdata, { position: 'bottomright', menuposition: 'bottomright' }).addTo(map);

  });

  //https://github.com/domoritz/leaflet-locatecontrol
  L.control.locate(
    {
      setView: 'untilPanOrZoom',
      keepCurrentZoomLevel: true
    }).addTo(map);

  map.addControl(new L.Control.Fullscreen());
}

function leafletapp_onclick() {
  if (maprealm == 'agent') {


    map.on('click',
      leafletapp_onclickfun);

    /*
         //on click function
        map.on('click', function(e){    
            leafletapp_onclickfun(e);
        });
  */
  }



}


function leafletapp_onclickfun(e) {

  var now = Date.now();


  if ((now - LassoObj.finished) < 3000) {
    return false;
  }


  //lassoEnabled
  /*  
   if (lassoControl.enabled()) { 
    console.log("lasso  enabled");
    return false; }
   else { console.log("lasso not enabled");}
   */
  var theoverlays = {};
  for (i = 0; i < alayers.length; i++) {
    theoverlays[i] = alayers[i];
  }

  var latlng = e.latlng;

  var popup = L.popup()
    .setLatLng(latlng)
    .setContent('loading')
    .openOn(map);

  //<xmin>, <ymin>, <xmax>, <ymax>            
  //map.getBounds().getEast() - ;
  //  var height = map.getBounds().getNorth() - map.getBounds().getSouth();                          



  var url = "/z/mapdraw?command=leaflet&step=query&skin=ajax&latlan=" + latlng.toString();

  if (settings.querykey) {
    url += "&key=" + settings.querykey;
  }

  url += "&overlays=" + JSON.stringify(theoverlays);
  url += "&maprealm=" + maprealm;
  url += "&bounds=" + map.getBounds().getWest() + "," + map.getBounds().getSouth() + "," + map.getBounds().getEast() + "," + map.getBounds().getNorth();
  $.get(url).done(function (data) {
    popup.setContent(data);
    popup.update();
  });
}





function leafletapp_readsettingsfile() {
  if (readsettings != 'true') {
    //alert("NOT READONG SETTINGS FILE");
    leafletapp_addlayercontrol();
    return; //I guess its possible
  }

  //DYNAMIC OVERLAYS








  // $.getJSON("/temp60/"+mapid+"_settings.json", function(settingsread)
  ///z/doc?command=view&allfile=true&file=".$qq['filename']
  $.getJSON("/z/doc?command=view&allfile=true&file={tempdirs}/60daytemp/" + mapid + "_settings.json", function (settingsread) {

    settings = settingsread;

    settinglayers["overlays"] = [];

    if (settings.leafletplugin) {
      if (settings.leafletplugin['lasso']) {
        const lassoControl = L.control.lasso().addTo(map);
        //L.control.lasso().addTo(map);
        //LASSO//  

        $(document).ready(function () {
          LassoEvents();
        });
      }
    }

    if (settings.markers) {


      //alert("HERE");
      var mOpt = [];
      for (mlname in settings.markers) {

        //var mgroup = new L.featureGroup(); //each mlname (layer name has a group)

        if (settings.nocluster) var mgroup = new L.featureGroup();
        else var mgroup = L.markerClusterGroup();



        for (id in settings.markers[mlname]) {



          if (settings.markers[mlname][id].icon) {
            // if(!urlpattern.test(str)) {
            var iconurl = settings.markers[mlname][id].icon;
            //} else {
            //    var iconurl="/objects/logos/googlemapsign.png";
            // }


            var mIcon = L.icon({
              iconUrl: iconurl,

              iconSize: [38, 38], // size of the icon
              iconAnchor: [19, 19], // point of the icon which will correspond to marker's location
              //  popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });
            mOpt['icon'] = mIcon;
          }




          if (settings.markers[mlname][id].numberlabel) {
            mOpt['icon'] = new L.AwesomeNumberMarkers({
              number: settings.markers[mlname][id].numberlabel,
              markerColor: "blue"
            });
          }
          /*
          if (settings.markers[mlname][id].numberlabel)
          {
              mOpt['icon']=  new L.NumberedDivIcon({number: settings.markers[mlname][id].numberlabel})
          }
          */


          if (settings.markers[mlname][id].draggable) {
            mOpt['draggable'] = settings.markers[mlname][id].draggable;


          }


          //alert(id+" "+settings.markers[mlname][id]['lat']+" "+settings.markers[mlname][id]['lon']);
          var marker = L.marker([settings.markers[mlname][id]['lat'], settings.markers[mlname][id]['lon']], mOpt);

          if (settings.markers[mlname][id].draggable) {

            marker.on('dragend', function (e) {
              document.getElementById("latlonlocation").value = marker.getLatLng().lat + "," + marker.getLatLng().lng;
            });

          }




          if (settings.markers[mlname][id].bindpopup) {
            marker.bindPopup(settings.markers[mlname][id].bindpopup);
          }

          marker.userid = id;
          marker.username = mlname;


          marker.addTo(mgroup);

        }


        settinglayers.overlays[mlname] = mgroup;
        if (!settings.layers.geojson) {
          map.fitBounds(mgroup.getBounds());
        }
      }



    }

    ///////////////////////////////
    ///////LAYER GROUPS////////////
    ///////////////////////////////     


    var group = new L.featureGroup();

    group.on('layeradd', function () {
      if (!settings.view) map.fitBounds(group.getBounds());
      //L.control.layers.addOverlay(imageOverlayNew, newLayerName);
    });



    if (settings.layers.geojson) {

      for (i in settings.layers.geojson) {

        console.log("adding "+i);
        var geojsonLayer = new L.GeoJSON.AJAX(settings.layers.geojson[i]['url'],
          { 
            onEachFeature: leafletapp_onEachFeature 
          }
        );

        if (i==0) {
        geojsonLayer.on('data:loaded', function (e) {
          //  alert('loaded primary');

           console.log("LOADED PRIMARY ");

            map.fitBounds(this.getBounds());

            
            if (settings.zoom) {
              map.setZoom(settings.zoom);
            }

            geojsonLayer.addTo(map).bringToFront();
        });
        } else {


        geojsonLayer.on('data:loaded', function (e) {
           geojsonLayer.addTo(map).bringToBack();

        });
      }
        settinglayers.overlays[settings.layers.geojson[i]['id']] = geojsonLayer;
        
       // if (!settings.masterlayer) settings.masterlayer = settings.layers.geojson[i]['id'];
   


        

      } //ends for loop

    }


/*
 //052625 I dont think we want to support KML any more
    //layer ids //https://stackoverflow.com/questions/34322864/finding-a-specific-layer-in-a-leaflet-layergroup-where-layers-are-polygons
    if (settings.layers.kmlfiles) {
      var track = [];
      var cnt = 0;
      var trkcolor = '#FF0000';//#FF0000';
      for (i in settings.layers.kmlfiles) {
        //alert(i+' '+settings.layers.kmlfiles[i]['url']);
        //alert();
        // if (i==0) continue;

        // var  track[i] new Object();
        // alert(settings.layers.kmlfiles[i]['url']);   
        track[i] = new L.KML(settings.layers.kmlfiles[i]['url'], { async: true });
        track[i].on('loaded', function (e) {
          ++cnt;


          if (cnt >= settings.layers.kmlfiles.length) {
            // all images loaded here
            // alert('loade');

            for (ii in settings.layers.kmlfiles) {
              //alert(ii);


              if (settings.layers.kmlfiles[ii]['color']) {
                trkcolor = settings.layers.kmlfiles[ii]['color'];
              }

              track[ii].setStyle({ color: trkcolor, fill: false, weight: 4, bubblingMouseEvents: false });
              if (settings.layers.kmlfiles[ii]['id']) {
                track[ii].id = settings.layers.kmlfiles[ii]['id'];
                //alert(track[ii].id);
              }



              group.addLayer(track[ii]);




              // L.control.layers

              // L.control.addOverlay(track[ii],"blah");
              if (settings.layers.kmlfiles[ii]['overlayname']) track[ii].id = settings.layers.kmlfiles[i]['overlayname'];
              else track[ii].id = "kml_" + ii;

              //add to active layer array for requesting
              alayers.push(track[ii].id);

              //add click
              if (maprealm == 'agent') {
                track[ii].on('click', function (event) { leafletapp_onclickfun(event); });
              }



              settinglayers.overlays[track[ii].id] = track[ii];
              //control.addOverlay(track[ii],track[ii].id);
              //track[ii].addTo(map);



            }

            leafletapp_addlayercontrol(); //wait till kml files are loaded if there are some
          } else {
            // still more images to load
            // alert('loading');


          }
        });

      }



    }
    else {
      // alert('no knl files');

      leafletapp_addlayercontrol(); // no KML go ahead
    }

*/


 leafletapp_addlayercontrol();

    //WATER MARK///
    L.Control.Watermark = L.Control.extend({
      onAdd: function (map) {
        var img = L.DomUtil.create('img');
        if (settings.watermark)//watermark
        {
          img.src = settings.watermark;
        }
        else {
          img.src = '/objects/maps/mapwatermarkredoak.png';
        }
        img.style.width = '50px';

        return img;
      },

      onRemove: function (map) {
        // Nothing to do here
      }
    });

    L.control.watermark = function (opts) {
      return new L.Control.Watermark(opts);
    }

    L.control.watermark({ position: 'bottomleft' }).addTo(map);

  });







}
function leafletapp_onEachFeature(feature, layer) {
  // does this feature have a property named popupContent?
  if (feature.properties && feature.properties.popup) {
    layer.bindPopup(feature.properties.popup);
  }


  if (feature.hasOwnProperty('style')) {
 
    var scrstyle = feature.style;
   // console.log(scrstyle);
    layer.setStyle(scrstyle);
  }


  


}
function leafletapp_externaloverlays($q) {


  //BASE MAPS

  //var mylayers.base=[];
  //var mylayers.overlays=[];


  mylayers["base"] = [];

  mylayers["base"]['RoadMap'] = L.gridLayer.googleMutant({
    maxZoom: 24,
    type: 'roadmap',
    //streetViewControl: true,
  });

  mylayers["base"]["Satelite"] = L.gridLayer.googleMutant({
    maxZoom: 24,
    type: 'satellite',
    // streetViewControl: true,
  });


  mylayers["base"]["Hybrid"] = L.gridLayer.googleMutant({
    maxZoom: 24,
    type: 'hybrid',
    // streetViewControl: true,
  });


  //https://client.stadiamaps.com/dashboard/#/property/41494/
  mylayers["base"]["Default"] = L.gridLayer.googleMutant({
    maxZoom: 24,
    type: 'hybrid',
    // streetViewControl: true,
  });
  /*
  = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.{ext}', {
    minZoom: 0,
    maxZoom: 20,
    attribution: '&copy; CNES, Distribution Airbus DS, © Airbus DS, © PlanetObserver (Contains Copernicus Data) | &copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    ext: 'jpg'
  });
*/




  //
  /*
      mylayers["base"]["Topo1"] =L.esri.tiledMapLayer({
          maxZoom: 24,
          url: "https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer"
      });
  */

  mylayers["base"]["Topo"] = L.esri.tiledMapLayer({
    maxZoom: 24,
    maxNativeZoom: 16,
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
  });

  mylayers["base"]["TopoAlt"] = L.esri.tiledMapLayer({
    maxZoom: 24,
    maxNativeZoom: 16,
    url: "https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer"
  });


  mylayers["base"]["ShadedHillside"] = L.esri.tiledMapLayer({
    maxZoom: 24,
    url: "https://tagis.dep.wv.gov/arcgis/rest/services/webMercator/WVhillshade_wm/MapServer"
  });




  if (maprealm == 'agent') {
    mylayers["base"]["Leafless (slow)"] = L.esri.dynamicMapLayer({
      url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Imagery_BaseMaps_EarthCover/wv_imagery_WVGISTC_leaf_off_mosaic/MapServer",

      //f: 'image',
      //format: 'png24',
    });


    /* 
       mylayers["base"]["Leafless"] =L.esri.dynamicMapLayer({
       url: "https://services.wvgis.wvu.edu/arcgis/rest/services/ImageryBaseMaps/wv_aerial_photos_mixed_resolutions_wm/MapServer"
     });
     
         mylayers["base"]["Samb"] =L.esri.dynamicMapLayer({
       url: "https://services.wvgis.wvu.edu/arcgis/rest/services/ImageryBaseMaps/wv_aerial_photos_SAMB_2003_2ft_wm/MapServer"
     });
     */
  }


  //https://services.wvgis.wvu.edu/arcgis/rest/services/Applications/floodTool_publicView/MapServer
  mylayers["overlays"] = [];

  mylayers.overlays["FloodPUB"] = L.esri.dynamicMapLayer({
    url: 'https://services.wvgis.wvu.edu/arcgis/rest/services/Hazards/floodTool_publicView/MapServer',
    layers: [1],
    f: 'image',
    format: 'png24',
    opacity: 0.4,

  });



  //https://services.wvgis.wvu.edu/arcgis/rest/services/Applications/floodTool_expertView/MapServer/4
  mylayers.overlays["FloodEX"] = L.esri.dynamicMapLayer({
    url: 'https://services.wvgis.wvu.edu/arcgis/rest/services/Hazards/floodTool_expertView/MapServer',
    layers: [4],
    f: 'image',
    format: 'png24',
    opacity: 0.7,

  });





  //https://services.wvgis.wvu.edu/arcgis/rest/services/Planning_Cadastre/WV_Parcels_Appsrv_2018/MapServer
  //removed 022419

  mylayers.overlays["TaxMaps"] = L.esri.dynamicMapLayer({
    url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Planning_Cadastre/WV_Parcels/MapServer",
    layers: [0, 1],
    f: 'image',
    format: 'svg',
    opacity: 1
  });



  mylayers.overlays["ForestandParks"] = L.esri.dynamicMapLayer({
    url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Boundaries/wv_protected_lands/MapServer",
    layers: [0, 3, 7],
    f: 'image',
    format: 'svg',
    opacity: .5
  });


  //layers: [7],
  mylayers.overlays["Trails"] = L.esri.dynamicMapLayer({
    url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Applications/trails_trailService/MapServer/",
    layers: [0, 1, 2, 3, 4, 5, 6, 7],
    f: 'image',
    format: 'png',
    opacity: .8
  });




  //https://services.wvgis.wvu.edu/arcgis/rest/services/Boundaries/wv_political_boundary/MapServer

  mylayers.overlays["City Bounds"] = L.esri.dynamicMapLayer({

    url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Boundaries/wv_political_boundary/MapServer",
    layers: [1],
    f: 'image',
    format: 'png',
    opacity: .4
  });



  mylayers.overlays["Counties"] = L.esri.dynamicMapLayer({

    url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Boundaries/wv_political_boundary/MapServer",
    layers: [0],
    f: 'image',
    format: 'png',
    opacity: .6
  });


  //https://services.wvgis.wvu.edu/arcgis/rest/services/Applications/wv_reference_roads_streams_placeNames/MapServer
  //https://gis.transportation.wv.gov/arcgis/rest/services/Base_Maps/WVDOT_Base_Map_UTM/MapServer
  //https://gis.transportation.wv.gov/arcgis/rest/services/Base_Maps/RoadCache/MapServer //quit working?
  /*
   *             	maxZoom: 24,
         maxNativeZoom: 14,
       url: "https://gis.transportation.wv.gov/arcgis/rest/services/Base_Maps/WVDOT_Base_Map_UTM/MapServer"
   */
  /*
    mylayers.overlays["WVDOT"] =L.esri.tiledMapLayer({
  
     url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Applications/wv_reference_roads_streams_placeNames/MapServer"
    }); 
    */
  mylayers.overlays["WVDOT"] = L.esri.dynamicMapLayer({

    url: "https://gis.transportation.wv.gov/arcgis/rest/services/Base_Maps/WVDOT_Base_Map_WM/MapServer",
    f: 'image',
    format: 'png',
    opacity: .8
  });


  mylayers.overlays["WVDOTown"] = L.esri.dynamicMapLayer({

    url: "https://gis.transportation.wv.gov/arcgis/rest/services/Roads_And_Highways/Publication_LRS/MapServer",
    layers: [39],
    f: 'image',
    format: 'png'
  });




  mylayers.overlays["CELL SERVICE"] = L.esri.tiledMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/WestVirginiaBroadbandOnlineV10/WvTechnologyGroupD/MapServer",
    opacity: .6
  });

  //  https://atlas.wvgs.wvnet.edu/arcgis/rest/services/WestVirginiaBroadbandOnlineV10/WvTechnologyGroupD/MapServer/tile/13/3148/2273


  /*
    mylayers.overlays["INTERNET"] =L.esri.tiledMapLayer({
      url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/WestVirginiaBroadbandOnlineV10/WestVirginiaBroadbandMap/MapServer"
    }); 
    
    */
  mylayers.overlays["INTERNET"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/WestVirginiaBroadbandOnlineV10/WestVirginiaBroadbandMap/MapServer/",
    layers: [0, 1, 2, 3, 6],
    f: 'image',
    format: 'png',
    opacity: .8
  });
  /*
      mylayers.overlays["BROKEN"] =  L.esri.dynamicMapLayer({
    url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Test/Delinquent_Properties/MapServer/",
    layers: [0],
    f: 'image',
    format: 'png',
    opacity: .8
  });  
  */




  //https://atlas.wvgs.wvnet.edu/arcgis/rest/services/WestVirginiaBroadbandOnlineV10/WestVirginiaBroadbandMap/MapServer/export?dpi=96&transparent=true&format=png8&layers=show%3A5&bbox=-8890219.307347577%2C4634977.6505620135%2C-8888690.566782001%2C4635777.850701806&bboxSR=102100&imageSR=102100&size=1280%2C670&f=image


  /*
     mylayers.overlays["PoliticalBoundaries"] =  L.esri.dynamicMapLayer({
      url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Boundaries/wv_political_bdry_wm/MapServer/",
      layers: [4],
      f: 'image',
      format: 'svg',
      opacity: 1
    });
  */
  /*
  mylayers.overlays["1ftTopo"] = L.esri.featureLayer({
    url: 'https://services.wvgis.wvu.edu/arcgis/rest/services/Elevation/wv_contour_1ft/MapServer/16',
  })
  */
  /* //cant get tiles to work even on their test site
     mylayers.overlays["1ftTopo tile"] =L.esri.tiledMapLayer({
      url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Elevation/wv_contour_1ft/MapServer/16",
      useCors: true,
      opacity: .6
    });  
  */

  /*
  mylayers.overlays["Geology"] = L.esri.featureLayer({
    url: 'https://services.wvgis.wvu.edu/arcgis/rest/services/Geoscientific_Information/WV_Geology/MapServer/0',
  })
  
  */
  /*
    mylayers.overlays["1ftTopo dyn"] =  L.esri.dynamicMapLayer({
      url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Elevation/wv_contour_1ft/MapServer",
      layers: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
      f: 'image',
      format: 'svg',
      opacity: 1
    }); 
  */

  /*
    mylayers.overlays["gnis"] =  L.esri.dynamicMapLayer({
      url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Location/wv_GNIS/MapServer",
      layers: [0],
      f: 'image',
      format: 'svg',
      opacity: 1
    }); 
  */



  /*
    mylayers.overlays["Geology"] =  L.esri.dynamicMapLayer({
      url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Geoscientific_Information/WV_Geology/MapServer",
      layers: [0,1,2,3,4,5],
      f: 'image',
      format: 'svg',
      opacity: 1
    }); 
  
     mylayers.overlays["Geologytiled"] =L.esri.tiledMapLayer({
      url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Geoscientific_Information/WV_Geology/MapServer/0",
      opacity: .6,
      useCors: true,
    });  
  
    mylayers.overlays["Geologyfeature"] = L.esri.featureLayer({
      url: 'https://services.wvgis.wvu.edu/arcgis/rest/services/Geoscientific_Information/WV_Geology/MapServer/0',
       f: 'image',
      format: 'svg',
      opacity: 1
   });
  */

  mylayers.overlays["1ftTopo"] = L.esri.dynamicMapLayer({
    url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Elevation/wv_contour_1ft/MapServer",
    useCors: true,
  });



  mylayers.overlays["Water"] = L.esri.dynamicMapLayer({
    url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Utilities_Communication/WV_WaterSewer_WVWDA/MapServer",
    layers: [0, 2, 4],
    f: 'image',
    format: 'png',
    opacity: .6,
    useCors: false,
  });


  mylayers.overlays["Sewer"] = L.esri.dynamicMapLayer({
    url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Utilities_Communication/WV_WaterSewer_WVWDA/MapServer",
    layers: [1, 3, 5],
    f: 'image',
    format: 'png',
    opacity: .6,
    useCors: false,
  });






  mylayers.overlays["Addresses"] = L.esri.featureLayer({
    url: 'https://services.wvgis.wvu.edu/arcgis/rest/services/Planning_Cadastre/WV_Parcels/MapServer/5',
    // fields: 'fulladdr,municipality,State,Zip',
    minZoom: 16,
    pointToLayer: function (geojson, latlng) {

      //make address
      var addresspopup = geojson.properties.FULLADDR + "<BR>" + geojson.properties.MUNICIPALITY + ", " + geojson.properties.State + " " + geojson.properties.Zip;
      addresspopup += '<BR><a href="https://www.google.com/search?q=' + geojson.properties.FULLADDR + ' ' + geojson.properties.MUNICIPALITY + '%2C ' + geojson.properties.State + ' ' + geojson.properties.Zip + '" target="_BLANK">Google</a>';

      return L.marker(latlng, {
        icon: iconsar['wvumailboxIcon']
      }).bindPopup(addresspopup);
    }
  });


  //alayers

  /*
     mylayers.overlays["OilAndGasWells"] =  L.esri.dynamicMapLayer({
      url: "https://tagis.dep.wv.gov/arcgis/rest/services/app_services/oog2/MapServer",
      layers: [0,1,2,3,4],
      f: 'image',
      format: 'PNG',
      opacity: 1,
      useCors: false
    }); 
   */


  //Eagle_A_WM  //Eagle_WM
  mylayers.overlays["Coal Eagle A"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/Coal_Web_Mercator/Eagle_A_WM/MapServer",
    layers: [0, 1, 2, 3, 4, 5],
    f: 'image',
    format: 'png',
    opacity: .4
  });


  mylayers.overlays["Coal Eagle"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/Coal_Web_Mercator/Eagle_WM/MapServer",
    layers: [0, 1, 2, 3, 4, 5],
    f: 'image',
    format: 'png',
    opacity: .4
  });

  mylayers.overlays["Coal Low Pow"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/Coal_Web_Mercator/Lower_Powellton_WM/MapServer",
    layers: [0, 1, 2, 3, 4, 5],
    f: 'image',
    format: 'png',
    opacity: .4
  });


  mylayers.overlays["Coal Low War Eag"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/Coal_Web_Mercator/Lower_War_Eagle_WM/MapServer",
    layers: [0, 1, 2, 3, 4, 5],
    f: 'image',
    format: 'png',
    opacity: .4
  });


  mylayers.overlays["Coal Pow"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/Coal_Web_Mercator/Powellton_WM/MapServer",
    layers: [0, 1, 2, 3, 4, 5],
    f: 'image',
    format: 'png',
    opacity: .4
  });


  mylayers.overlays["Coal Eagle Low"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/Coal_Web_Mercator/Eagle_Lower_Split_1_WM/MapServer",
    layers: [0, 1, 2, 3, 4, 5],
    f: 'image',
    format: 'png',
    opacity: .4
  });


  mylayers.overlays["Coal lit eagle"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/Coal_Web_Mercator/Little_Eagle_WM/MapServer",
    layers: [0, 1, 2, 3, 4, 5],
    f: 'image',
    format: 'png',
    opacity: .4
  });

  mylayers.overlays["Coal war eagle"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/Coal_Web_Mercator/Middle_War_Eagle_WM/MapServer",
    layers: [0, 1, 2, 3, 4, 5],
    f: 'image',
    format: 'png',
    opacity: .4
  });


  mylayers.overlays["Coal Geln Tunn"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/Coal_Web_Mercator/Glenalum_Tunnel_WM/MapServer",
    layers: [0, 1, 2, 3, 4, 5],
    f: 'image',
    format: 'png',
    opacity: .4
  });


  mylayers.overlays["Coal Peerless"] = L.esri.dynamicMapLayer({
    url: "https://atlas.wvgs.wvnet.edu/arcgis/rest/services/Coal_Web_Mercator/Peerless_WM/MapServer",
    layers: [0, 1, 2, 3, 4, 5],
    f: 'image',
    format: 'png',
    opacity: .4
  });


  //Eagle_A_WM  
  //Eagle_WM
  //Lower_Powellton_WM
  //Lower_War_Eagle_WM
  //Powellton_WM 
  //Eagle_Lower_Split_1_WM 
  //Little_Eagle_WM
  //Middle_War_Eagle_WM
  //Glenalum_Tunnel_WM 
  //Peerless_WM 


  //https://atlas2.wvgs.wvnet.edu/server/rest/services/OilGas_WVOG/WVOG/MapServer/
  mylayers.overlays["OilAndGasWells"] = L.esri.featureLayer({
    url: 'https://tagis.dep.wv.gov/arcgis/rest/services/app_services/oog2/MapServer/7',
    // fields: 'fulladdr,municipality,State,Zip',
    useCors: false,
    minZoom: 12,
    pointToLayer: function (geojson, latlng) {

      //make address


      /*
       var addresspopup =
      'API: <button onclick="window.location.href = \'https://w3docs.com\';">Click Here</button><BR>'
      +geojson.properties.RespParty+"<BR>"
      +geojson.properties.WellType+"<BR>"
      +geojson.properties.WellDepth+"<BR>"
      +"Fromation: "+geojson.properties.Formation+"<BR>"   
      +"Status: "+geojson.properties.WellStatus;   
      */
      var addresspopup =
        'API: <a href="https://apps.dep.wv.gov/oog/wellsearch/wellApi.cfm?api=' + geojson.properties.api + '" target="_blank">' + geojson.properties.api + "</a><BR>"
        + geojson.properties.RespParty + "<BR>"
        + geojson.properties.WellType + "<BR>"
        + geojson.properties.WellDepth + "<BR>"
        + "Fromation: " + geojson.properties.Formation + "<BR>"
        + "Status: " + geojson.properties.WellStatus;

      // var addresspopup ="data";
      /*
           'PermitID' => '083-01066',
           'County' => '083',
           'Permit' => '01066',
           'api' => '4708301066',
           'WellType' => 'Vertical',
           'WellUse' => 'Not Available',
           'WellDepth' => 'Deep',
           'WellRig' => 'Not Available',
           'PermitType' => 'Plugging',
           'IssueDate' => '1987/07/17',
           'CompDate' => NULL,
           'RespParty' => 'EQT PRODUCTION COMPANY',
           'WellStatus' => 'Plugged',
           'FarmName' => 'MOWER LTD. PARTNERSHIP',
           'WellNumber' => '2535-5A',
           'RecDate' => NULL,
           'Marcellus' => 'u',
           'Formation' => 'NA',   
      */

      var ico = "allother";
      if (geojson.properties.WellStatus == 'Never Drilled') ico = "neverdrilled";
      if (geojson.properties.WellStatus == 'Active Well') ico = "activewell";
      if (geojson.properties.WellStatus == 'Plugged') ico = "plugged";


      var thismarker = L.marker(latlng, {
        icon: iconsar[ico]
      });
      // thismarker.bindTooltip(addresspopup);
      var popup = L.popup();
      popup.setContent(addresspopup);
      thismarker.bindPopup(popup);
      return thismarker;





    }
  });

  //https://tagis.dep.wv.gov/arcgis/rest/services/WVDEP_enterprise/oil_gas/MapServer/identify?f=json&returnFieldName=true&returnGeometry=true&returnUnformattedValues=true&returnZ=false&tolerance=12&imageDisplay=520%2C403%2C96&geometry=%7B%22x%22%3A-8957836.670356916%2C%22y%22%3A4753723.865242845%7D&geometryType=esriGeometryPoint&sr=102100&mapExtent=-8966684.256380916%2C4751698.283993291%2C-8956747.442703854%2C4759208.222022299&layers=visible%3A7
  //show:0,1,2,3,4,5,6,8,9
  //https://atlas2.wvgs.wvnet.edu/server/rest/services/OilGas_WVOG/WVOG/MapServer/
  mylayers.overlays["DEP OG"] = L.esri.dynamicMapLayer({
    url: 'https://tagis.dep.wv.gov/arcgis/rest/services/app_services/oog2/MapServer/',
    // fields: 'fulladdr,municipality,State,Zip',
    layers: [0, 1, 2, 3, 4, 5, 6, 8, 9],
    useCors: false,
    minZoom: 12,

  });






  mylayers.overlays["DLC"] = L.esri.dynamicMapLayer({
    url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Planning_Cadastre/Delinquent_Properties/MapServer",
    layers: [0, 1],
    f: 'image',
    format: 'svg',
    opacity: .4
  });










  //var dbasel=mylayers.base.Hybrid;

  //alert(dbasel);



}






//rotate marker
(function () {
  // save these original methods before they are overwritten
  var proto_initIcon = L.Marker.prototype._initIcon;
  var proto_setPos = L.Marker.prototype._setPos;

  var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');

  L.Marker.addInitHook(function () {
    var iconOptions = this.options.icon && this.options.icon.options;
    var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
    if (iconAnchor) {
      iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px');
    }
    this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center bottom';
    this.options.rotationAngle = this.options.rotationAngle || 0;

    // Ensure marker keeps rotated during dragging
    this.on('drag', function (e) { e.target._applyRotation(); });
  });

  L.Marker.include({
    _initIcon: function () {
      proto_initIcon.call(this);
    },

    _setPos: function (pos) {
      proto_setPos.call(this, pos);
      this._applyRotation();
    },

    _applyRotation: function () {
      if (this.options.rotationAngle) {
        this._icon.style[L.DomUtil.TRANSFORM + 'Origin'] = this.options.rotationOrigin;

        if (oldIE) {
          // for IE 9, use the 2D rotation
          this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
        } else {
          // for modern browsers, prefer the 3D accelerated version
          this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)';
        }
      }
    },

    setRotationAngle: function (angle) {
      this.options.rotationAngle = angle;
      this.update();
      return this;
    },

    setRotationOrigin: function (origin) {
      this.options.rotationOrigin = origin;
      this.update();
      return this;
    }
  });
})();
//end rotate



function exportmap(event) {
  // alert('v3');
  event.preventDefault();
  var currentmap = {};

  currentmap.leaflet = {};

  currentmap.mapid = mapid;
  currentmap.leaflet.basemap = currentbaselayer; //control.getActiveBaseLayer().name; //depends on avtive layers plugin
  // var alayers = control.getActiveOverlayLayers(); //set by action
  // alert(JSON.stringify(alayers, censor(alayers)));
  //currentmap.theoverlays=JSON.stringify(alayers);
  currentmap.leaflet.theoverlays = {};
  for (i = 0; i < alayers.length; i++) {
    currentmap.leaflet.theoverlays[i] = alayers[i];
  }

  currentmap.leaflet.view = {};

  currentmap.leaflet.view.latitude = map.getCenter().lat;
  currentmap.leaflet.view.longitude = map.getCenter().lng;
  currentmap.leaflet.view.zoom = map.getZoom();
  currentmap.height = $('#map').height();
  currentmap.width = $('#map').width();



  //  var cmap = [];

  //  cmap['leaflet']=currentmap;


  //alert(JSON.stringify(currentmap));
  $('#currentmapfield').val(JSON.stringify(currentmap));
  $('#exportform').submit();


}


function leafletapp_watermark() {

  L.Control.Watermark = L.Control.extend({
    onAdd: function (map) {
      var img = L.DomUtil.create('img');
      if (settings.watermark) {
        img.src = settings.watermark;
      }
      else {
        img.src = '/objects/maps/mapwatermarkredoak.png';
      }
      img.style.width = '50px';

      return img;
    },

    onRemove: function (map) {
      // Nothing to do here
    }
  });

  L.control.watermark = function (opts) {
    return new L.Control.Watermark(opts);
  }

  L.control.watermark({ position: 'bottomleft' }).addTo(map);

}

function leafletapp_setsize(size) {
  // alert('here');
  var sar = size.split('x');

  //  alert(sar[0]+" "+sar[1]);
  //alert($("#"+mapdivid).height()/2);
  $("#" + mapdivid).height(sar[1]);
  $("#" + mapdivid).width(sar[0]);
  //$("#"+mapid).height(500); 
  //$("#"+mapid).width(500); 
  map.invalidateSize();


}