Created
August 12, 2021 02:14
-
-
Save Ahwar/e472ce905e9edc68acfcaef5e947ead2 to your computer and use it in GitHub Desktop.
A Leflet JS map of United States, and polygon is drawn around colorado state, have limit on zooming out
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment