$(function() {
if (!mapboxgl.supported()) {
\t \t alert('Your browser does not support Mapbox GL');
\t \t }
\t \t var initMap = function(){
\t \t mapboxgl.accessToken = 'pk.eyJ1IjoiamFtZXNwYWNrIiwiYSI6ImNqMDI5amtvZzAwNjIzM3QwYTZkbjk5c3MifQ.9jiCjBzXNG1IqvezOddnHA';
\t var map = new mapboxgl.Map({
\t \t container: 'multiple_poly',
\t \t \t \t style: 'mapbox://styles/mapbox/satellite-v9',
\t \t
\t \t center: [103.32718927498,2.],
\t \t zoom: 15
\t \t });
\t \t map.on('load', function() {
\t \t \t map.addSource("polygon_one",
\t \t \t {
\t \t \t "type":"geojson",
\t \t \t "data":{
\t \t \t \t "type":"FeatureCollection",
\t \t \t \t \t "features":[
\t \t \t \t \t \t {"type":"Feature","properties":[],"geometry":{"coordinates":[[[73.045157852226,26.303612426466],[73.045501174966,26.291685547272],[73.051166000414,26.299611287628],[73.045157852226,26.303612426466]]],"type":"Polygon"}},
\t \t \t \t \t ]
\t \t \t \t }
\t \t \t });
\t \t \t map.addSource("polygon_two",
\t \t \t {
\t \t \t "type":"geojson",
\t \t \t "data":{
\t \t \t \t "type":"FeatureCollection",
\t \t \t \t \t "features":[
\t \t \t \t \t \t {"type":"Feature","properties":[],"geometry":{"coordinates":[[[73.01923698434584,26.286793889676773],[73.01726287851736,26.274403503526514],[73.02696174635398,26.277635905719848],[73.02972176719453,26.28963931883034],[73.01923698434584,26.286793889676773]]],"type":"Polygon"}},
\t \t \t \t \t ]
\t \t \t \t }
\t \t \t });
\t \t \t map.addLayer({
\t \t "id": "quota-one",
\t \t "type": "line",
\t \t "source": "polygon_one",
\t \t "layout": {
\t "line-cap": "round",
\t "line-join": "round"
\t },
\t "paint": {
\t "line-color": "red",
\t "line-width": 3
\t },
\t \t "filter": ["==", "$type", "Polygon"]
\t \t });
\t \t map.addLayer({
\t \t "id": "quota-two",
\t \t "type": "line",
\t \t "source": "polygon_two",
\t \t "layout": {
\t "line-cap": "round",
\t "line-join": "round"
\t },
\t "paint": {
\t "line-color": "green",
\t "line-width": 3
\t },
\t \t "filter": ["==", "$type", "Polygon"]
\t \t });
\t \t \t
\t \t map.flyTo({center:[73.01923698434584,26.286793889676773],zoom: 13});
\t \t });
\t }
\t \t initMap();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css" rel="stylesheet">
<div id="multiple_poly" style="width: 400px;height: 400px"></div>