rectangle to fade out after a 3 seconds - Javascript Leaflet

Javascript examples for Leaflet:Configuration

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

Description

rectangle to fade out after a 3 seconds

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>hide rect with animation</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script> 
      <style id="compiled-css" type="text/css">

<style>
   body {//from   ww w.j  av a 2  s  .  c  o m
      font-family: sans-serif;
      font-size: small;
      margin: 0;
   }
   #map {
      height: 350px;
      width: 100%;
   }
   li {
      margin: 10px;
      cursor: pointer;
      list-style: none;
   }
   #tag {
      width: 100px;
      margin: 3px;
}

      </style> 
      <!-- End styling the map  -->  
      <script type="text/javascript">
    window.onload=function(){
        var oceans = new L.TileLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}.png");
       var map = L.map('map', {
           center: [53.01478, -10.34157],
           zoom: 4,
           layers: [oceans],
           detectRetina: true,
           minZoom:4
       });
       //add map tp the baselayer group
       var baseLayers = {
           "Oceans": oceans,
       };
       L.control.layers(baseLayers).addTo(map);
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
var rect = L.rectangle(bounds, { weight: 1.0, color:  "blue", fill:"True", className: "auto_hide" });
rect.addTo(map);
map.fitBounds(bounds);
setTimeout(function(){
    $(".auto_hide").animate({ opacity: 0 }, 500, function() {
  });
}, 3000);
    }

      </script> 
   </head> 
   <body> 
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> 
      <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
      <!-- Load Esri Leaflet from CDN --> 
      <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script> 
      <div class="dark" runat="server" id="map" style="width: 100%; height: 400px; border:1px solid black;"></div>  
   </body>
</html>

Related Tutorials