JSFiddle - React, Tailwind, and code Playground

leaflet polygon bounding circle vs polygon centroid

by abubelinha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css">
<div id="map"></div>
<script type="text/javascript">
		var datos = [{"nome":"CORGO (O)","centroide4326":"POINT(-7.43440176330014 42.9306072373524)","centrocirculo4326":"POINT(-7.4275874484587 42.9137487804977)","radio_m":"9796.75457704207","sup":"157324034.2","nome_mapa":"O CORGO"},{"nome":"CORU\u00d1A (A)","centroide4326":"POINT(-8.42195586872599 43.3463068190552)","centrocirculo4326":"POINT(-8.41099499759829 43.3458590791923)","radio_m":"4970.11081658606","sup":"38333339.9","nome_mapa":"A CORU\u00d1A"},{"nome":"CORTEGADA","centroide4326":"POINT(-8.14918094453837 42.2077306206501)","centrocirculo4326":"POINT(-8.14817910374008 42.2119765181349)","radio_m":"3800.28244129301","sup":"26886490","nome_mapa":"CORTEGADA"},{"nome":"CORCUBI\u00d3N","centroide4326":"POINT(-9.19778112871643 42.9307988888461)","centrocirculo4326":"POINT(-9.19446172249044 42.9146654411198)","radio_m":"4089.249564406","sup":"6601390.3","nome_mapa":"CORCUBI\u00d3N"},{"nome":"CORISTANCO","centroide4326":"POINT(-8.76781059889224 43.1607784212821)","centrocirculo4326":"POINT(-8.74434395071153 43.1593997767861)","radio_m":"9388.96188163798","sup":"141138108.2","nome_mapa":"CORISTANCO"},{"nome":"SANTA COMBA","centroide4326":"POINT(-8.80651555347816 43.0454309800597)","centrocirculo4326":"POINT(-8.79452315887964 43.0256755203371)","radio_m":"10922.9536307781","sup":"203675023.2","nome_mapa":"SANTA COMBA"},{"nome":"SANTISO","centroide4326":"POINT(-8.07066213412549 42.8682974021138)","centrocirculo4326":"POINT(-8.07665966902508...

CSS

#map {
  height: 400px;
}

JavaScript

// center of the map
var center = [42.928514,-9.260402];

// Create the map
var map = L.map('map').setView(center, 12);

// Set up the OSM layer
L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);

		function style(feature) {
			return {
				weight: 2.5,
				opacity: 1,
				color: 'grey',
				dashArray: '3',
				//fillColor: getColor(feature.properties.density),
				fillColor: Math.random()>1?'#000000':'#ffffff' /*getColorComarca(feature.properties.CodCOM) */ ,
				fillOpacity: Math.random()>1 ? 0.25 : 0
			};
		}
L.geoJson(statesData, {style: style}).addTo(map);

var punto,llcd,llcirc;
for(p=0;p<datos.length;p++) {
	punto= datos[p];
  llcd= punto.centroide4326.split("(")[1].split(")")[0].split(" ");
  console.log(punto.nome+": "+ llcd[0]+","+llcd[1]);
  llcirc= punto.centrocirculo4326.split("(")[1].split(")")[0].split(" ");
  //console.log(punto.nome+": "+ llcd[0]+","+llcd[1]);
  
  L.circle([llcirc[1],llcirc[0]], parseFloat(punto.radio_m), {
      color: 'red',
      fillColor: 'red',
      fillOpacity: 0.25
    }).bindPopup(punto.nome+': '+String(punto.sup/1000000)+' Km 2'+'\nRadio: '+punto.radio_m).addTo(map);
  
  L.marker([llcd[1],llcd[0]]).bindPopup(punto.nome_mapa+" - centro").addTo(map);
}
var latlngs=[];
for(v=0;v<poli.length;v++) {
	//console.log(poli[0]);
  punto=poli[v].split(" ");
  console.log(punto);
  latlngs.push([punto[1],punto[0]]);
}
var polygon = L.polygon(latlngs, {color: 'green'}).addTo(map);
map.fitBounds(polygon.getBounds());



/*
L.circle(center, 5496.53, {
      color: 'red',
      fillColor: 'red',
      fillOpacity: 0.5
    }).addTo(map);
L.marker([42.9372795171587,-9.26036188537649]).bindPopup("centroid").addTo(map);
*/