Clickable control on leaflet - Javascript Leaflet

Javascript examples for Leaflet:Configuration

  1. HOME
  2. Javascript
  3. Leaflet
  4. Configuration

Description

Clickable control on leaflet

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> 
      <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
      <style id="compiled-css" type="text/css">

#map {//  www.  j  a va 2s.  co  m
   height:100%;
   width:100%;
   margin:0;
}
.mainMenu {
   padding: 6px 8px;
   font: 14px/16px Arial, Helvetica, sans-serif;
   background: white;
   background: rgba(255, 255, 255, 0.8);
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   width: 300px;
}
body {
   background-color:#FFFFFF;
   color: #000000;
   font-size:87.5%;
   font-family: Arial, 'Lucida Sans Unicode';
   line-height: 1.5;
   text-align: left;
   height: 100%;
   width: 100%;
}
html {
   height: 100%;
   width: 100%;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
      var map = L.map('map').setView([0.27, 37.66], 6);
      // add an OpenStreetMap tile layer
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      var mainMenu = L.Control.extend({
          options: {
              position: 'topright'
          },
          onAdd: function (map) {
              this._div = L.DomUtil.create('div', 'mainMenu');
              this._div.innerHTML = '<h3>Main Menu</h3>';
              this._div.innerHTML += '<h4>Data:</h4> MODIS NDVI <h4>AOI:</h4> Kenya, Africa <br><br>'
              this._div.innerHTML += '<h4>Indicator:</h4>'
              this._div.innerHTML += '<form><form id="form" class="form" action="" method="POST">' +
                  '<select name="indicator"><option value="NDVI_ABS">NDVI<br>' +
                  '<option value="NDVI_VCI">VCI<br>' +
                  '<option value="RAIN_ABS">Precipitation<br>' +
                  '</select>';
              this._div.innerHTML += '<input type="submit" id="refreshBtn" value="Refresh Map"  name="submit"></form>';
              return this._div;
          },
      });
      map.addControl(new mainMenu());
      $('#refreshBtn').on('click', function () {
          console.log('hello world');
      });
    });

      </script> 
   </head> 
   <body>  
      <div id="map">
         asasd
      </div>   
   </body>
</html>

Related Tutorials