Ahwar/Leaflet JS Map - Polygon - Zoom Out Limits.html

## Leaflet JS Map - Polygon - Zoom Out Limits.html
<!DOCTYPE html>
<!-- A Leflet JS map of United States, and polygon is drawn around colorado state, have limit on zooming out -->

<head>
    <meta charset="UTF-8">
    <meta name="description" content="A Leflet JS map of United States, and polygon is drawn around colorado state, have limit on zooming out created by Muhammad Ahwar https://gist.github.com/Ahwar">
    <meta name="keywords" content="HTML, CSS, JavaScript, Leaflet, United States, colorado, polygon ">
    <meta name="author" content="Muhammad Ahwar">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    <style>
        #mapid {
            height: 550px;
        }
    </style>
</head>

<body>
    <p>A Leflet JS map of United States, and polygon is drawn around colorado state, have limit on zooming out</p>
    <div id="mapid"></div>

    <script>
        // construct center of map and set attributes
        var mymap = L.map('mapid', { zoomControl: false, attributionControl: false }).setView([51.805, -112.15], 3)
        // set zoo out limit, it will not zoom out further
        mymap.options.minZoom = 3;

        // Request visual layers from mapbox
        // the value of accessToken is an API key this API key will only work on specific website.
        // you can generate your own api key for your website from here. https://account.mapbox.com/
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512, // pixels of tile
            zoomOffset: -1,
            accessToken: 'pk.eyJ1IjoicHJvdG9uNzg2IiwiYSI6ImNrczcybXh6azAydzMzMGx1NGFhNDlteTIifQ.0V9bSTMLzdPmUir6ROPtLQ'
        }).addTo(mymap);
        // change zoom control button position to bottom left
        new L.Control.Zoom({ position: 'bottomleft' }).addTo(mymap);
        // Define the LatLng coordinates for the polygon's path.
        var polygon = L.polygon([
            [41.004329, -109.053522],
            [40.994492, -102.040782],
            [36.988042, -102.023541],
            [37.023335, -109.036167],
        ])
        // set backround style
        polygon.setStyle({ fillColor: '#F00' });
        // set polygon to map
        polygon.addTo(mymap);

    </script>
</body>
	<!DOCTYPE html>
	<!-- A Leflet JS map of United States, and polygon is drawn around colorado state, have limit on zooming out -->

	<head>
	<meta charset="UTF-8">
	<meta name="description" content="A Leflet JS map of United States, and polygon is drawn around colorado state, have limit on zooming out created by Muhammad Ahwar https://gist.github.com/Ahwar">
	<meta name="keywords" content="HTML, CSS, JavaScript, Leaflet, United States, colorado, polygon ">
	<meta name="author" content="Muhammad Ahwar">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
	integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
	crossorigin="" />
	<!-- Make sure you put this AFTER Leaflet's CSS -->
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
	integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
	crossorigin=""></script>
	<style>
	#mapid {
	height: 550px;
	}
	</style>
	</head>

	<body>
	<p>A Leflet JS map of United States, and polygon is drawn around colorado state, have limit on zooming out</p>
	<div id="mapid"></div>

	<script>
	// construct center of map and set attributes
	var mymap = L.map('mapid', { zoomControl: false, attributionControl: false }).setView([51.805, -112.15], 3)
	// set zoo out limit, it will not zoom out further
	mymap.options.minZoom = 3;

	// Request visual layers from mapbox
	// the value of accessToken is an API key this API key will only work on specific website.
	// you can generate your own api key for your website from here. https://account.mapbox.com/
	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
	attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	maxZoom: 18,
	id: 'mapbox/streets-v11',
	tileSize: 512, // pixels of tile
	zoomOffset: -1,
	accessToken: 'pk.eyJ1IjoicHJvdG9uNzg2IiwiYSI6ImNrczcybXh6azAydzMzMGx1NGFhNDlteTIifQ.0V9bSTMLzdPmUir6ROPtLQ'
	}).addTo(mymap);
	// change zoom control button position to bottom left
	new L.Control.Zoom({ position: 'bottomleft' }).addTo(mymap);
	// Define the LatLng coordinates for the polygon's path.
	var polygon = L.polygon([
	[41.004329, -109.053522],
	[40.994492, -102.040782],
	[36.988042, -102.023541],
	[37.023335, -109.036167],
	])
	// set backround style
	polygon.setStyle({ fillColor: '#F00' });
	// set polygon to map
	polygon.addTo(mymap);

	</script>
	</body>