Sumbera/index.html

## readme.md

      
                Raw

        
              readme.md
            
          
    Deafult SVG circle rendering by leaflet 1.0  using 24T points, compare to "scaled' SVG overlay used here: http://bl.ocks.org/Sumbera/7e8e57368175a1433791

  
## index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SVG default SVG  in Leaflet 1.0</title>

    <link rel="stylesheet" href="http://www.sumbera.com/gist/js/leaflet/svg/scaled/leaflet.css" />

    <style>
        body {
            margin: 0px;
        }
        #map {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: #333;
        }
    </style>
</head>
<body>
    <script src="http://www.sumbera.com/gist/js/leaflet/svg/scaled/leaflet.js"></script>
    <script src="http://www.sumbera.com/gist/data.js" charset="utf-8"></script>
    <div id="map">
    </div>
    <div id="tooltip" style="width:230px; height:100px;">
     </div>


    <script>


            var lmap = new  L.map('map').setView([50.00, 14.44], 9)
                        .addLayer(L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png"));


            var circles = new L.LayerGroup();

            var radius = 3;
            for (var i = 0; i <data.length; i++) {
                var d = data[i];
                var circle = L.circle([d[0],d[1]], radius, {
                    color: 'red',
                    fillColor: '#f03',
                    fillOpacity: 0.5
                }).addTo(circles);

            }

            circles.addTo(lmap);
            /***********************/


    </script>
</body>

</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>SVG default SVG in Leaflet 1.0</title>

	<link rel="stylesheet" href="http://www.sumbera.com/gist/js/leaflet/svg/scaled/leaflet.css" />

	<style>
	body {
	margin: 0px;
	}
	#map {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #333;
	}
	</style>
	</head>
	<body>
	<script src="http://www.sumbera.com/gist/js/leaflet/svg/scaled/leaflet.js"></script>
	<script src="http://www.sumbera.com/gist/data.js" charset="utf-8"></script>
	<div id="map">
	</div>
	<div id="tooltip" style="width:230px; height:100px;">
	</div>


	<script>


	var lmap = new L.map('map').setView([50.00, 14.44], 9)
	.addLayer(L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png"));


	var circles = new L.LayerGroup();

	var radius = 3;
	for (var i = 0; i <data.length; i++) {
	var d = data[i];
	var circle = L.circle([d[0],d[1]], radius, {
	color: 'red',
	fillColor: '#f03',
	fillOpacity: 0.5
	}).addTo(circles);

	}

	circles.addTo(lmap);
	/***********************/




	</script>
	</body>

	</html>