JSFiddle - React, Tailwind, and code Playground

leaflet for circles

by abubelinha

HTML

<!--link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"/>
<script>L_PREFER_CANVAS = true</script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'>
</script-->


<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
<script src='https://unpkg.com/leaflet-image@latest/leaflet-image.js'></script>

<script src="https://www.nayuki.io/res/smallest-enclosing-circle/smallest-enclosing-circle.js"></script>


<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="http://davidbau.com/encode/seedrandom.js"></script>

<div id="cover">Generating pdf</div>
<div id="mapid"></div>
<button id="download">download</button>

CSS

#mapid{
            /* height: 480px;*/
			height: 300px; width: 300px; /*[297, 210] */
        }
        #download {
            position:absolute;
            top:10px;
            right:10px;
            z-index:1000;
        }
        
        #cover {
            display: none;
            text-align: center;
            padding-top: 200px;
            background: #CCC;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10000;
        }
        
        #cover.active{
            display: block;
        }

JavaScript

var map = L.map('mapid',{preferCanvas: true}).setView([42.763, -8.02], 7);
var statesData = {"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-7.65,43.02],[-7.77,43.15],[-7.87,43.10],[-7.85,43.0],[-7.65,43.02]]]},"properties":{"NomeConcel":"Polygon 1"}},
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-7.50,42.20],[-7.50,42.30],[-7.89,42.30],[-7.89,42.20],[-7.50,42.20]]]},"properties":{"NomeConcel":"Polygon 2"}}
]};

map.fitBounds([[43.8, -6.7],[41.8, -9.3]]);
var cover = document.getElementById('cover');
var tilelayer;
		tilelayer=L.tileLayer('http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=3fed0b2e3cfa4e4d9bf2fa90c90e141c', {
                attribution: '&copy; Thunderforest cycle map',
                maxZoom: 18
            });
map.addLayer(tilelayer);

            function style(feature) {
				var puntos=feature.geometry.coordinates[0];
				var points=[];
				var concello=feature.properties.NomeConcel;
				var gra10km={"lat":0.0899,"lon":0.12311};
				var steplon=gra10km["lon"]/3;
				var steplat=gra10km["lat"]/3; // graos de equivalencia  a 10/3 Km de lonxitude (no paralelo 43) e de latitude (en todo o mundo)
				var metrosporgrado=10000/gra10km["lon"];
				//console.log(puntos);
				for(var p=0;p<puntos.length;p++) {
					console.log(concello+" puntos["+p+"] = "+puntos[p][0]+","+puntos[p][1]+" ou ben "+ JSON.stringify(puntos[p]));
					var punto={"x":Number(puntos[p][0]),"y":Number(0+puntos[p][1])};
					points.push(punto);
					if(p>50) alert(p);
				}
				var circ = makeCircle(points);
				//circle.y=parseInt(circle.y * 1000)/1000;
				var conc={"concello": concello,"puntos":puntos,"points":points,"circle": circ};
				console.log(concello); console.log(circ);
				var ll=L.latLng(circ.x, circ.y);
				L.circle([circ.y, circ.x], {radius: circ.r*metrosporgrado }).addTo(map);
				/*
				if(circle.x !== 'undefined' && circle.y !== 'undefined' && circle.r !== 'undefined')...