githubmirror/Leaflet

debug/tests/opacity.html
57 строк2 KB
Grant
Use preferred tile.openstreetmap.org URL (#8418)
28 авг 2022, 12:31
28 авг 2022, 12:31c2324e5
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet debug page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<link rel="stylesheet" href="../../dist/leaflet.css" />

	<link rel="stylesheet" href="../css/mobile.css" />
	<style>
		.mybox {
			background-color: red;
		}

	</style>
	<script src="../../dist/leaflet-src.js"></script>
</head>
<body>

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

	<script>

		var osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
			latlng = new L.LatLng(50.5, 30.51);

		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [osm]});

		//Create a marker, clicking it toggles opacity
		var opaqueIcon = new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'opaque. click to toggle' });
		var transparentIcon = new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'transparent' });
		var marker = new L.Marker(latlng, { icon: opaqueIcon });
		map.addLayer(marker);

		var visible = true;
		marker.on('click', function () {
		if (visible) {
			marker.setOpacity(0.3);
			marker.setIcon(transparentIcon)
		} else {
			marker.setOpacity(1);
			marker.setIcon(opaqueIcon);
		}
		visible = !visible;
		});

		var marker2 = new L.Marker(new L.LatLng(50.5, 30.52));
		map.addLayer(marker2);
		marker2.bindPopup('This is an amazing message. I shouldn\'t of deleted the Ipsum text');


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