Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Leaflet Layers Control Example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">		
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
		<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" /><![endif]-->
		
		<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
        
     <script type="text/javascript" src="https://dl.dropbox.com/u/3778864/ljsts/lib/javascript.util.js"></script>
        <script type="text/javascript" src="https://dl.dropbox.com/u/3778864/ljsts/lib/jsts.js"></script>
        <script type="text/javascript" src="https://raw.github.com/olooney/attache-array-js/master/attache.array.min.js"></script>
      
    <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/3778864/gjson/prahaul4326light.js"></script>
</head>
<body>
	<div id="map" style="width: 100%; height: 600px"></div>

	
	<script>
		// create a map in the "map" div, set the view to a given place and zoom
      var map = L.map('map' ).setView([50.0811946, 14.4131435],15);
    

			

        L.tileLayer('http://{s}.tile.cloudmade.com/2ab823d932f34b33acb1dfec079223bd/997/256/{z}/{x}/{y}.png').addTo(map);
			
 
     
      
 var reader = new jsts.io.GeoJSONReader();
 

          
          
   var divadlo = { "type": "Polygon", "coordinates": [ [ [ 14.4138323, 50.0808133 ], [ 14.4138501, 50.0804383 ], [ 14.4137216, 50.0804193 ], [ 14.4135762, 50.0804033 ], [ 14.4134087, 50.0806937 ], [ 14.4133498, 50.0807816 ], [ 14.4132486, 50.0810886 ], [ 14.4132183, 50.0810856 ], [ 14.4131779, 50.0810817 ], [ 14.4131435, 50.0811946 ], [ 14.413183, 50.0812004 ], [ 14.4132274, 50.0812069 ], [ 14.4132186, 50.0812657 ], [ 14.4133192, 50.0812675 ], [ 14.4133183, 50.0812972 ], [ 14.4133175, 50.0813266 ], [ 14.4136614, 50.0813305 ], [ 14.4136621, 50.0813055 ], [ 14.4136631, 50.0812713 ], [ 14.4137506, 50.0812718 ], [ 14.4138323, 50.0808133 ] ] ] };        

      
      /*     
     var featureLayer = new L.GeoJSON();
        // Set a default style for out the polygons will appear
        var defaultStyle = {
            color: "red",
            weight: 1,
            opacity: 0.6,
            fillOpacity: 0.1,
            fillColor: "red"
        };
        // Define what happens to each polygon just before it is loaded on to
        // the map. This is Leaflet's special way of goofing around with your
        // data, setting styles and regulating user interactions.
        var onEachFeature = function(feature, layer) {
            // All we're doing for now is loading the default style. 
            // But stay tuned.
            layer.setStyle(defaultStyle);
        };
        
        // Finally, add the layer to the map.
        map.addLayer(featureLayer); 
      */
      
  
    for (var i = 0; i < 100; i++) {
      var input = reader.read(prahalight.features[i].geometry);
 var buffer = input.buffer(0.0001);
 
      var parser = new jsts.io.GeoJSONParser();
 
    
 
 var input = parser.write(input);
 var buffer = parser.write(buffer);

      // var myLayer = L.geoJson().addTo(map);
      //myLayer.addData(buffer);    
    var myStyle2 = {
    "color": "red",
    "weight": 2,
    "opacity": 1,
      'fill':false,
      'clickable':false
};

      var myStyle = {
    "color": "blue",
    "weight": 1,
    "opacity": 0.65,
     'clickable':false   
};
      
L.geoJson(buffer, {
    style: myStyle
}).addTo(map);   
      
   L.geoJson(input, {
    style: myStyle2
}).addTo(map);    
      
 
          }

	</script>
</body>
</html>