altilunium/cmax.html

## cmax.html
<!DOCTYPE html>
<html>
<head>
  <title>CuacaJakarta</title>
  <link rel="icon" href="https://storage.googleapis.com/wikibase-cloud-static/sites/530e38a80de265137fa0959f83556801/logos/64.ico?u=1709193904">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <style>
    .leaflet-image-layer {
  opacity: 0.7;
}

#map {
  position: absolute;
  width:100%;
  height: 100%;
  top:0px;
  left:0px;

}
  </style>


</head>
<body>
  <div id="map"></div>

  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script>

function isColorSimilar(colorA, colorB, tolerance) {
  // Extract RGB components from colorA and colorB
  const [r1, g1, b1] = colorA;
  const [r2, g2, b2] = colorB;

  // Calculate the Euclidean distance between the two colors
  const distance = Math.sqrt(
    Math.pow(r2 - r1, 2) +
    Math.pow(g2 - g1, 2) +
    Math.pow(b2 - b1, 2)
  );

  // Check if the distance is within the tolerance level
  return distance <= tolerance;
}

function areAllColorsSimilar(test, colorArray, tolerance) {
  const colorA = test; // Get the first color as the reference
  for (let i = 0; i < colorArray.length; i++) {
    const colorB = colorArray[i];
    if (isColorSimilar(colorA, colorB, tolerance)) {
      return true; // Return false if any color is not similar
    }
  }
  return false; // Return true if all colors are similar
}


// Create a canvas element
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

// Load the image
const image = new Image();
image.onload = function() {
  // Set the canvas size to match the image size
  canvas.width = image.width;
  canvas.height = image.height;

  // Draw the image onto the canvas
  context.drawImage(image, 0, 0);

  // Get the pixel data
  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = imageData.data;

  // Loop through each pixel
  for (let i = 0; i < pixels.length; i += 4) {
    var red = pixels[i];
    var green = pixels[i + 1];
    var blue = pixels[i + 2];
    var alpha = pixels[i + 3];

    var cA = [red,green,blue]
    var g32 = [[3,156,0],[1,255,2],[1,3,252],[2,148,255],[6,255,246],[254,255,1],[254,200,0],[254,200,0],[250,0,3],[200,0,2],[153,1,3],[255,1,254],[150,5,248],[254,119,6]]

    // Check if the pixel is not blue


    if (areAllColorsSimilar(cA,g32,60)  ) {
      // Set the alpha value to 0 (transparent)
      pixels[i + 3] = 200;
    }

    else {
      pixels[i + 3] = 0;
    }

  }

  // Put the modified pixel data back onto the canvas
  context.putImageData(imageData, 0, 0);

  // Convert the canvas to a data URL
  const modifiedImageURL = canvas.toDataURL();

  // Display the modified image
  const modifiedImage = new Image();
  modifiedImage.src = modifiedImageURL;
  document.body.appendChild(modifiedImage);
  console.log(modifiedImage.src)


var map = L.map('map').setView([-6.1170,106.8311], 10);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Data cuaca dari <a href="https://www.bmkg.go.id/satelit/satelit.bmkg?Sat=3&id=22"> BMKG Himawari-9 Rainfall Potential</a> | Data peta dari kontributor <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
}).addTo(map);

//var imageUrl = 'https://inderaja.bmkg.go.id/IMAGE/HIMA/H08_RP_Jakarta.png?' + escape(new Date());
var imageUrl = modifiedImage.src
var imageBounds = [[-8.1898,104.2185], [-3.8108, 109.0248]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);


};

// Set the source of the image
image.crossOrigin = "Anonymous";
image.src = 'c.webp';

  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>CuacaJakarta</title>
	<link rel="icon" href="https://storage.googleapis.com/wikibase-cloud-static/sites/530e38a80de265137fa0959f83556801/logos/64.ico?u=1709193904">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
	<style>
	.leaflet-image-layer {
	opacity: 0.7;
	}

	#map {
	position: absolute;
	width:100%;
	height: 100%;
	top:0px;
	left:0px;

	}
	</style>


	</head>
	<body>
	<div id="map"></div>

	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
	<script>

	function isColorSimilar(colorA, colorB, tolerance) {
	// Extract RGB components from colorA and colorB
	const [r1, g1, b1] = colorA;
	const [r2, g2, b2] = colorB;

	// Calculate the Euclidean distance between the two colors
	const distance = Math.sqrt(
	Math.pow(r2 - r1, 2) +
	Math.pow(g2 - g1, 2) +
	Math.pow(b2 - b1, 2)
	);

	// Check if the distance is within the tolerance level
	return distance <= tolerance;
	}

	function areAllColorsSimilar(test, colorArray, tolerance) {
	const colorA = test; // Get the first color as the reference
	for (let i = 0; i < colorArray.length; i++) {
	const colorB = colorArray[i];
	if (isColorSimilar(colorA, colorB, tolerance)) {
	return true; // Return false if any color is not similar
	}
	}
	return false; // Return true if all colors are similar
	}



	// Create a canvas element
	const canvas = document.createElement('canvas');
	const context = canvas.getContext('2d');

	// Load the image
	const image = new Image();
	image.onload = function() {
	// Set the canvas size to match the image size
	canvas.width = image.width;
	canvas.height = image.height;

	// Draw the image onto the canvas
	context.drawImage(image, 0, 0);

	// Get the pixel data
	const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
	const pixels = imageData.data;

	// Loop through each pixel
	for (let i = 0; i < pixels.length; i += 4) {
	var red = pixels[i];
	var green = pixels[i + 1];
	var blue = pixels[i + 2];
	var alpha = pixels[i + 3];

	var cA = [red,green,blue]
	var g32 = [[3,156,0],[1,255,2],[1,3,252],[2,148,255],[6,255,246],[254,255,1],[254,200,0],[254,200,0],[250,0,3],[200,0,2],[153,1,3],[255,1,254],[150,5,248],[254,119,6]]

	// Check if the pixel is not blue



	if (areAllColorsSimilar(cA,g32,60) ) {
	// Set the alpha value to 0 (transparent)
	pixels[i + 3] = 200;
	}

	else {
	pixels[i + 3] = 0;
	}

	}

	// Put the modified pixel data back onto the canvas
	context.putImageData(imageData, 0, 0);

	// Convert the canvas to a data URL
	const modifiedImageURL = canvas.toDataURL();

	// Display the modified image
	const modifiedImage = new Image();
	modifiedImage.src = modifiedImageURL;
	document.body.appendChild(modifiedImage);
	console.log(modifiedImage.src)


	var map = L.map('map').setView([-6.1170,106.8311], 10);

	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: 'Data cuaca dari <a href="https://www.bmkg.go.id/satelit/satelit.bmkg?Sat=3&id=22"> BMKG Himawari-9 Rainfall Potential</a> \| Data peta dari kontributor <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
	}).addTo(map);

	//var imageUrl = 'https://inderaja.bmkg.go.id/IMAGE/HIMA/H08_RP_Jakarta.png?' + escape(new Date());
	var imageUrl = modifiedImage.src
	var imageBounds = [[-8.1898,104.2185], [-3.8108, 109.0248]];

	L.imageOverlay(imageUrl, imageBounds).addTo(map);








	};

	// Set the source of the image
	image.crossOrigin = "Anonymous";
	image.src = 'c.webp';

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