Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>basemap</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <script src="https://cdn.maptiler.com/maplibre-gl-js/v2.4.0/maplibre-gl.js"></script>
  <link href="https://cdn.maptiler.com/maplibre-gl-js/v2.4.0/maplibre-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>
<div id="map"></div>
<div id="menu" class="toggle-buttons">
	<input id="https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json" type="radio" name="rtoggle" value="default" checked="checked">
	<label for="https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json">basemap</label>
	<input id="https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte-imagery.vt/style.json" type="radio" name="rtoggle" value="sat">
	<label for="https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte-imagery.vt/style.json">satellite</label>
</div>
</html>
              
            
!

CSS

              
                .toggle-buttons{
	position: absolute;
	bottom: 20px;
	right: 0;
	padding: 10px;
	font-family: sans-serif
}

.toggle-buttons input[type="radio"] {
	visibility: hidden;
}

.toggle-buttons label {
	background-color: #fff;
	border-radius: 0.5em;
	padding: 0.5em;
}

.toggle-buttons input:checked + label {
	background: #3887be;
	color: #ffffff;
	box-shadow: none;
}
              
            
!

JS

              
                			const map = new maplibregl.Map({
		container: 'map', // container ID
		// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
		style: 'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json', // style URL
		center: [8.461, 46.6521], // starting position [lng, lat]
		zoom: 13 // starting zoom
	});

	const layerList = document.getElementById('menu');
	const inputs = layerList.getElementsByTagName('input');

	for (const input of inputs) {
		input.onclick = (layer) => {
		const layerId = layer.target.id;
		map.setStyle(layerId);
		};
	}

      map.on('styledata', function () {
        
        map.loadImage(
            'https://api3.geo.admin.ch/images/babs/babs-65.png',
            function (error, image) {
                if (error) throw error;
                map.addImage('cat', image);
                map.addSource('bergstu', {
                    'type': 'geojson',
                    'data': {
                        'type': 'FeatureCollection',
                        'features': [
                            {
                                'type': 'Feature',
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [8.507,46.6517]
                                }
                            }
                        ]
                    }
                });
                map.addLayer({
                    'id': 'cat',
                    'type': 'symbol',
                    'source': 'bergstu',
                    'layout': {
                        'icon-image': 'cat',
                        'icon-size': 1
                    }
                });
            }
        );    
        
        
        
        
        map.addSource('area_A', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [8.469992020260566,46.65108631285874],
							[8.469466809302881,46.65166872229937],
							[8.468026162576939,46.65184273096104],
							[8.467355082152821,46.652710542188196],
							[8.466405260966528,46.65266229326051],
							[8.464599080662135,46.65314258826836],
							[8.462613761181808,46.653605524606284],
							[8.461680187248191,46.65368966724294],
							[8.460757808491298,46.652911952672426],
							[8.461274931509923,46.65262322003353],
							[8.462541537134781,46.65269707406817],
							[8.463425584072302,46.652177759928655],
							[8.465040862827202,46.65178443099432],
							[8.465927750763834,46.651416587447805],
							[8.466931525801913,46.65068783021723],
							[8.467614669358682,46.65045438883579],
							[8.468157426701008,46.65007069496472],
							[8.468604292720281,46.64970680402011],
							[8.469050611122373,46.64931450831003],
							[8.469448250810654,46.649254092662986],
							[8.46987717990918,46.64939225874888],
							[8.470518675620179,46.649859941465465],
							[8.47004432280459,46.650224088131004],
							[8.469992020260566,46.65108631285874]
                        ]
                    ]
                }
            }
        });
        map.addLayer({
            'id': 'area_Aa',
            'type': 'fill',
            'source': 'area_A',
            'layout': {},
            'paint': {
                'fill-color': '#088',
                'fill-opacity': 0.4
            }
        });
		
       map.addSource('area_B', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
							[8.470094772863119,46.65142629401172],
							[8.470673889189898,46.650786576213044],
							[8.477077852060225,46.649128000305254],
							[8.478763243672084,46.64952929985784],
							[8.479307079096857,46.652062242971205],
							[8.480870185137311,46.653960858461346],
							[8.479210818195089,46.65563323879851],
							[8.47570592472605,46.6564606495003],
							[8.471460361755181,46.65811853937576],
							[8.470311581111083,46.65846038689025],
							[8.468649324456782,46.65784094589419],
							[8.466623633692967,46.659080837410635],
							[8.46292587716249,46.65701183949667],
							[8.460802725229382,46.65455929033332],
							[8.460564847953629,46.65434361899821],
							[8.46585202495297,46.652496825575845],
							[8.467134002650893,46.65265571877973],
							[8.468002271991457,46.652032342441665],
							[8.469678852932846,46.65125013326105],
							[8.470094772863119,46.65142629401172]
                        ]
                    ]
                }
            }
        });
        map.addLayer({
            'id': 'area_Bb',
            'type': 'fill',
            'source': 'area_B',
            'layout': {},
            'paint': {
                'fill-color': '#CA1E1E',
                'fill-opacity': 0.4
            }
        });
		
       map.addSource('area_C', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
							[8.45554424946186,46.657219989834296],
							[8.452849926374537,46.65729134720296],
							[8.45117575311936,46.656756987448055],
							[8.450129010840849,46.65594241383442],
							[8.449358549961644,46.65519166825709],
							[8.44858917230816,46.65449772564472],
							[8.448767097542154,46.65518744310412],
							[8.447658427614227,46.655471886925035],
							[8.446275793989487,46.65581556140971],
							[8.447767591243416,46.65616221114656],
							[8.44836069785405,46.65699029721634],
							[8.447623973496166,46.65730932396615],
							[8.446276011815977,46.657302310221894],
							[8.445902807968562,46.65794008207309],
							[8.445655472471374,46.65869037845179],
							[8.445400192885918,46.65901460459779],
							[8.444815222809654,46.65936068126481],
							[8.444303234271262,46.65993338462294],
							[8.443502973537337,46.66053703724915],
							[8.443113672104548,46.66105183434143],
							[8.442272332987276,46.660926669989266],
							[8.441631962238716,46.661254277606055],
							[8.440690616514145,46.661669756660196],
							[8.438509005406427,46.66270217619896],
							[8.44162880628033,46.66404787881002],
							[8.44322292367287,46.6632289126657],
							[8.443473305465258,46.66263958152453],
							[8.44592668487519,46.66143420843398],
							[8.449986442287234,46.660081962317555],
							[8.453220549957381,46.65871798232165],
							[8.455621916167713,46.65769278531306],
							[8.45554424946186,46.657219989834296]
                        ]
                    ]
                }
            }
        });
        map.addLayer({
            'id': 'area_Cc',
            'type': 'fill',
            'source': 'area_C',
            'layout': {},
            'paint': {
                'fill-color': '#76CA1E',
                'fill-opacity': 0.4
            }
        });
		
      map.addSource('area_D', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
							[8.445123448948117,46.65284312699707],
							[8.444835473397331,46.65214869670626],
							[8.44467188620243,46.651044072599554],
							[8.448697232568168,46.649803912050125],
							[8.451365465877386,46.65012114198071],
							[8.45830139348353,46.65155930191671],
							[8.459677256717267,46.65275911362888],
							[8.461806169357825,46.653633966704106],
							[8.462535333573364,46.653794085737786],
							[8.461673821456023,46.654779104001776],
							[8.463070954140786,46.657092330837706],
							[8.467991466714759,46.66010105312718],
							[8.467401966619274,46.66092456495052],
							[8.465275429229811,46.661352833935105],
							[8.463147130512647,46.661563037155744],
							[8.460739922155666,46.66082706786273],
							[8.459226450108439,46.65934440700376],
							[8.456339000782298,46.65793082262288],
							[8.455886840544622,46.657290914989495],
							[8.455020305934378,46.658018348168554],
							[8.45292300097978,46.657658242191715],
							[8.450334788543556,46.65605244863407],
							[8.448599248666188,46.65443904269873],
							[8.445123448948117,46.65284312699707]
                        ]
                    ]
                }
            }
        });
        map.addLayer({
            'id': 'area_Dd',
            'type': 'fill',
            'source': 'area_D',
            'layout': {},
            'paint': {
                'fill-color': '#1E60CA',
                'fill-opacity': 0.4
            }
        });
        
 		           map.addSource('route_1', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'LineString',
                    'coordinates': [
                        [
						 [ 8.60891, 46.633199 ], [ 8.608834, 46.633239 ], [ 8.608654, 46.633258 ], [ 8.608367, 46.633264 ], [ 8.608237, 46.633293 ], [ 8.608199, 46.633315 ], [ 8.6082, 46.633363 ], [ 8.608317, 46.633453 ], [ 8.608448, 46.633609 ], [ 8.608525, 46.633758 ], [ 8.608525, 46.633858 ], [ 8.608461, 46.633905 ], [ 8.608375, 46.633949 ], [ 8.608307, 46.633947 ], [ 8.608248, 46.633924 ], [ 8.608161, 46.633833 ], [ 8.607986, 46.633721 ], [ 8.607654, 46.633632 ], [ 8.607399, 46.63362 ], [ 8.606972, 46.633511 ], [ 8.606925, 46.633511 ], [ 8.606849, 46.633537 ], [ 8.606729, 46.633625 ], [ 8.606485, 46.633878 ], [ 8.60638, 46.633949 ], [ 8.606291, 46.633982 ], [ 8.605472, 46.634223 ], [ 8.604827, 46.634491 ], [ 8.604573, 46.634553 ], [ 8.604389, 46.634631 ], [ 8.604209, 46.634773 ], [ 8.603935, 46.634868 ], [ 8.603797, 46.634957 ], [ 8.603502, 46.635018 ], [ 8.603339, 46.635076 ], [ 8.602975, 46.635053 ], [ 8.602039, 46.635191 ], [ 8.601667, 46.635203 ], [ 8.60156, 46.635232 ], [ 8.601502, 46.635312 ], [ 8.601379, 46.635326 ], [ 8.601237, 46.635353 ], [ 8.600596, 46.635558 ], [ 8.600419, 46.635592 ], [ 8.600239, 46.635598 ], [ 8.600039, 46.635586 ], [ 8.599834, 46.635528 ], [ 8.599692, 46.635442 ], [ 8.599569, 46.635322 ], [ 8.599486, 46.635223 ], [ 8.599321, 46.635014 ], [ 8.599113, 46.634787 ], [ 8.598973, 46.634684 ], [ 8.598835, 46.634611 ], [ 8.598564, 46.634484 ], [ 8.598429, 46.634448 ], [ 8.598352, 46.634428 ], [ 8.598236, 46.634396 ], [ 8.597902, 46.634362 ], [ 8.59756, 46.634387 ], [ 8.597257, 46.63444 ], [ 8.597036, 46.634574 ], [ 8.596906, 46.634739 ], [ 8.596874, 46.634895 ], [ 8.596917, 46.635049 ], [ 8.597121, 46.635325 ], [ 8.597142, 46.635402 ], [ 8.597117, 46.635467 ], [ 8.597088, 46.635488 ], [ 8.597041, 46.635514 ], [ 8.596909, 46.635531 ], [ 8.596803, 46.635506 ], [ 8.596739, 46.635449 ], [ 8.596706, 46.635385 ], [ 8.596713, 46.635061 ], [ 8.596665, 46.634964 ], [ 8.596507, 46.634842 ], [ 8.596452, 46.634827 ], [ 8.596423, 46.634845 ], [ 8.596386, 46.634855 ], [ 8.596358, 46.634856 ], [ 8.596311, 46.634844 ], [ 8.596278, 46.63482 ], [ 8.59619, 46.634907 ], [ 8.596108, 46.635024 ], [ 8.596067, 46.635082 ], [ 8.595867, 46.63537 ], [ 8.59583, 46.635432 ], [ 8.595695, 46.635643 ], [ 8.595553, 46.63587 ], [ 8.59538, 46.636147 ], [ 8.595114, 46.636581 ], [ 8.595002, 46.636803 ], [ 8.594901, 46.637027 ], [ 8.594853, 46.637137 ], [ 8.594807, 46.637332 ], [ 8.594791, 46.637387 ], [ 8.594765, 46.637499 ], [ 8.59475, 46.637568 ], [ 8.594565, 46.638244 ], [ 8.594426, 46.638587 ], [ 8.594298, 46.638871 ], [ 8.594136, 46.639141 ], [ 8.593938, 46.639384 ], [ 8.593531, 46.639766 ], [ 8.593429, 46.639846 ], [ 8.593252, 46.639968 ], [ 8.593033, 46.640113 ], [ 8.592899, 46.640267 ], [ 8.592837, 46.640387 ], [ 8.59277, 46.640769 ], [ 8.592729, 46.64086 ], [ 8.592659, 46.640929 ], [ 8.592604, 46.64097 ], [ 8.592526, 46.641006 ], [ 8.592328, 46.641037 ], [ 8.592329, 46.641076 ], [ 8.592275, 46.641163 ], [ 8.592222, 46.641195 ], [ 8.592159, 46.641215 ], [ 8.592088, 46.641476 ], [ 8.592064, 46.641764 ], [ 8.592027, 46.642073 ], [ 8.591972, 46.642336 ], [ 8.591742, 46.643257 ], [ 8.591376, 46.64473 ], [ 8.591307, 46.644953 ], [ 8.591214, 46.645114 ], [ 8.591172, 46.645159 ], [ 8.590916, 46.645345 ], [ 8.590521, 46.645564 ], [ 8.590398, 46.645671 ], [ 8.590317, 46.645766 ], [ 8.590252, 46.645955 ], [ 8.590273, 46.646156 ], [ 8.590338, 46.646312 ], [ 8.590474, 46.646627 ], [ 8.590576, 46.646884 ], [ 8.590593, 46.646929 ], [ 8.590599, 46.64695 ], [ 8.590745, 46.647393 ], [ 8.590822, 46.647646 ], [ 8.59084, 46.647735 ], [ 8.590851, 46.647874 ], [ 8.59081, 46.647994 ], [ 8.590672, 46.648144 ], [ 8.590502, 46.648263 ], [ 8.590252, 46.648401 ], [ 8.590044, 46.648491 ], [ 8.58956, 46.648643 ], [ 8.589104, 46.648687 ], [ 8.588912, 46.648689 ], [ 8.588359, 46.648638 ], [ 8.587481, 46.648559 ], [ 8.587246, 46.648567 ], [ 8.587012, 46.648614 ], [ 8.586746, 46.648712 ], [ 8.586523, 46.648864 ], [ 8.5864, 46.648971 ], [ 8.586353, 46.649038 ], [ 8.586345, 46.649086 ], [ 8.586388, 46.649137 ], [ 8.586425, 46.649152 ], [ 8.586519, 46.649158 ], [ 8.58661, 46.649127 ], [ 8.586933, 46.64891 ], [ 8.587058, 46.648847 ], [ 8.587208, 46.648803 ], [ 8.587377, 46.648784 ], [ 8.58775, 46.648837 ], [ 8.58815, 46.648936 ], [ 8.588522, 46.649024 ], [ 8.58862, 46.649055 ], [ 8.588673, 46.64909 ], [ 8.588701, 46.649154 ], [ 8.588664, 46.649215 ], [ 8.588624, 46.649237 ], [ 8.588505, 46.649251 ], [ 8.588289, 46.649223 ], [ 8.587806, 46.649133 ], [ 8.587611, 46.649099 ], [ 8.587323, 46.649092 ], [ 8.587052, 46.649141 ], [ 8.586691, 46.649319 ], [ 8.586578, 46.649446 ], [ 8.586577, 46.649478 ], [ 8.586612, 46.649525 ], [ 8.586648, 46.649543 ], [ 8.586728, 46.64955 ], [ 8.586832, 46.649528 ], [ 8.58712, 46.649377 ], [ 8.587218, 46.64935 ], [ 8.587334, 46.649344 ], [ 8.587438, 46.649358 ], [ 8.587521, 46.649386 ], [ 8.587576, 46.649424 ], [ 8.58764, 46.649503 ], [ 8.587651, 46.649569 ], [ 8.587632, 46.649638 ], [ 8.587583, 46.649698 ], [ 8.5875, 46.649748 ], [ 8.587402, 46.649778 ], [ 8.587293, 46.649785 ], [ 8.586867, 46.649759 ], [ 8.586542, 46.649789 ], [ 8.586388, 46.64982 ], [ 8.586223, 46.649888 ], [ 8.586068, 46.649953 ], [ 8.585947, 46.650028 ], [ 8.585813, 46.650131 ], [ 8.585686, 46.650256 ], [ 8.585569, 46.650519 ], [ 8.585484, 46.65098 ], [ 8.585407, 46.651158 ], [ 8.585302, 46.651305 ], [ 8.585066, 46.651549 ], [ 8.584693, 46.651791 ], [ 8.584555, 46.651979 ], [ 8.584546, 46.65208 ], [ 8.584586, 46.652249 ], [ 8.58478, 46.652523 ], [ 8.584829, 46.65269 ], [ 8.584813, 46.652871 ], [ 8.584739, 46.653054 ], [ 8.583899, 46.654244 ], [ 8.583437, 46.654779 ], [ 8.583016, 46.655224 ], [ 8.582483, 46.655829 ], [ 8.581999, 46.656403 ], [ 8.58199, 46.656459 ], [ 8.582033, 46.656546 ], [ 8.582121, 46.65657 ], [ 8.582196, 46.656564 ], [ 8.582284, 46.656499 ], [ 8.582422, 46.656233 ], [ 8.582523, 46.656098 ], [ 8.582761, 46.655867 ], [ 8.583042, 46.655653 ], [ 8.583166, 46.655575 ], [ 8.583392, 46.655524 ], [ 8.583502, 46.655528 ], [ 8.583671, 46.655566 ], [ 8.583784, 46.655621 ], [ 8.583844, 46.655654 ], [ 8.583915, 46.65573 ], [ 8.584034, 46.655889 ], [ 8.584117, 46.656046 ], [ 8.584317, 46.656671 ], [ 8.584557, 46.657314 ], [ 8.584712, 46.657557 ], [ 8.585098, 46.658165 ], [ 8.58538, 46.658551 ], [ 8.585629, 46.65877 ], [ 8.585851, 46.65891 ], [ 8.585916, 46.658976 ], [ 8.585941, 46.65904 ], [ 8.58591, 46.659097 ], [ 8.585876, 46.659125 ], [ 8.585803, 46.659137 ], [ 8.585727, 46.659127 ], [ 8.585654, 46.659086 ], [ 8.585181, 46.658624 ], [ 8.584911, 46.658308 ], [ 8.58479, 46.65826 ], [ 8.58471, 46.658254 ], [ 8.58464, 46.658273 ], [ 8.584594, 46.658357 ], [ 8.584646, 46.658437 ], [ 8.584888, 46.658683 ], [ 8.585228, 46.659094 ], [ 8.585578, 46.659514 ], [ 8.585913, 46.659963 ], [ 8.585963, 46.660065 ], [ 8.585975, 46.660162 ], [ 8.58588, 46.66057 ], [ 8.585892, 46.660636 ], [ 8.585928, 46.660731 ], [ 8.585966, 46.660794 ], [ 8.586169, 46.660938 ], [ 8.58735, 46.661555 ], [ 8.587644, 46.661659 ], [ 8.588011, 46.661779 ], [ 8.587919, 46.661867 ], [ 8.587855, 46.661901 ], [ 8.587757, 46.661908 ], [ 8.587172, 46.661681 ], [ 8.587004, 46.661656 ], [ 8.586952, 46.661652 ], [ 8.586851, 46.661668 ], [ 8.586822, 46.661683 ], [ 8.586798, 46.661703 ], [ 8.586743, 46.661762 ], [ 8.586733, 46.661858 ], [ 8.586781, 46.661975 ], [ 8.586894, 46.662114 ], [ 8.587345, 46.662696 ], [ 8.587479, 46.662917 ], [ 8.587913, 46.663792 ], [ 8.588095, 46.664325 ], [ 8.588296, 46.665089 ], [ 8.588288, 46.665201 ], [ 8.588251, 46.665317 ], [ 8.588159, 46.665426 ], [ 8.587708, 46.665791 ], [ 8.587654, 46.665916 ], [ 8.587656, 46.666052 ], [ 8.587819, 46.666263 ], [ 8.58785, 46.666291 ], [ 8.588012, 46.666462 ], [ 8.588085, 46.666518 ], [ 8.588128, 46.666551 ], [ 8.588732, 46.666886 ], [ 8.588793, 46.666924 ], [ 8.588823, 46.666987 ], [ 8.588813, 46.667034 ], [ 8.588748, 46.667077 ], [ 8.588665, 46.667102 ], [ 8.587977, 46.667213 ], [ 8.58716, 46.667274 ], [ 8.587098, 46.667313 ], [ 8.587106, 46.667392 ], [ 8.587176, 46.667492 ], [ 8.587465, 46.667757 ], [ 8.587562, 46.66784 ], [ 8.587622, 46.667886 ], [ 8.587543, 46.667912 ], [ 8.587487, 46.667924 ], [ 8.587383, 46.667946 ], [ 8.58735, 46.667958 ], [ 8.587321, 46.667971 ], [ 8.587288, 46.667992 ], [ 8.587219, 46.667983 ], [ 8.586543, 46.667997 ], [ 8.586208, 46.667953 ], [ 8.586143, 46.668107 ], [ 8.586117, 46.66817 ], [ 8.586166, 46.668254 ], [ 8.586054, 46.668353 ], [ 8.585783, 46.6684 ], [ 8.585339, 46.668344 ], [ 8.584772, 46.668381 ], [ 8.584514, 46.668392 ], [ 8.584377, 46.668423 ], [ 8.584201, 46.668585 ], [ 8.583917, 46.668531 ], [ 8.583724, 46.668526 ], [ 8.582897, 46.668605 ], [ 8.582725, 46.668574 ], [ 8.582126, 46.668378 ], [ 8.581819, 46.668307 ], [ 8.581708, 46.668297 ], [ 8.581538, 46.668302 ], [ 8.581006, 46.66831 ], [ 8.580314, 46.668218 ], [ 8.580076, 46.668261 ], [ 8.579382, 46.668505 ], [ 8.579079, 46.668539 ], [ 8.578517, 46.668462 ], [ 8.578239, 46.668426 ], [ 8.578014, 46.668383 ], [ 8.577853, 46.668325 ], [ 8.57774, 46.668264 ], [ 8.577532, 46.668086 ], [ 8.577161, 46.66766 ], [ 8.577061, 46.667596 ], [ 8.576948, 46.667552 ], [ 8.575966, 46.667315 ], [ 8.575354, 46.667226 ], [ 8.574978, 46.667178 ], [ 8.574659, 46.667119 ], [ 8.573638, 46.666846 ], [ 8.573554, 46.666809 ], [ 8.573029, 46.666459 ], [ 8.571813, 46.666042 ], [ 8.571348, 46.665845 ], [ 8.570837, 46.665582 ], [ 8.57053, 46.665475 ], [ 8.569924, 46.665374 ], [ 8.569381, 46.665232 ], [ 8.568552, 46.664973 ], [ 8.568415, 46.664927 ], [ 8.568132, 46.664887 ], [ 8.566272, 46.66489 ], [ 8.566012, 46.664867 ], [ 8.564499, 46.664662 ], [ 8.564279, 46.664653 ], [ 8.564022, 46.664699 ], [ 8.563425, 46.664904 ], [ 8.563111, 46.664981 ], [ 8.562833, 46.664989 ], [ 8.561992, 46.664911 ], [ 8.561068, 46.66479 ], [ 8.560802, 46.664739 ], [ 8.560104, 46.664534 ], [ 8.557802, 46.664241 ], [ 8.55488, 46.663578 ], [ 8.554634, 46.663494 ], [ 8.554388, 46.663378 ], [ 8.553644, 46.662962 ], [ 8.553345, 46.662825 ], [ 8.553004, 46.66274 ], [ 8.552241, 46.662598 ], [ 8.551767, 46.662529 ], [ 8.551531, 46.662524 ], [ 8.550991, 46.662577 ], [ 8.550647, 46.662629 ], [ 8.550014, 46.662809 ], [ 8.549858, 46.662833 ], [ 8.549761, 46.66284 ], [ 8.54964, 46.662842 ], [ 8.549276, 46.662785 ], [ 8.549094, 46.662718 ], [ 8.548931, 46.66262 ], [ 8.548472, 46.662219 ], [ 8.548282, 46.662129 ], [ 8.548053, 46.66206 ], [ 8.547887, 46.662024 ], [ 8.547023, 46.661906 ], [ 8.54615, 46.661891 ], [ 8.546026, 46.661876 ], [ 8.545848, 46.661846 ], [ 8.545373, 46.661689 ], [ 8.545043, 46.661597 ], [ 8.544432, 46.661545 ], [ 8.544084, 46.66148 ], [ 8.542781, 46.661134 ], [ 8.542367, 46.661021 ], [ 8.541755, 46.660858 ], [ 8.540939, 46.660686 ], [ 8.540254, 46.660611 ], [ 8.539442, 46.660607 ], [ 8.538595, 46.660486 ], [ 8.538349, 46.660508 ], [ 8.538008, 46.660576 ], [ 8.537835, 46.66059 ], [ 8.536589, 46.660549 ], [ 8.536084, 46.660516 ], [ 8.535758, 46.660444 ], [ 8.535502, 46.660362 ], [ 8.535036, 46.660139 ], [ 8.534902, 46.660122 ], [ 8.534799, 46.660124 ], [ 8.534532, 46.660199 ], [ 8.534434, 46.660211 ], [ 8.534387, 46.660208 ], [ 8.534286, 46.660188 ], [ 8.534203, 46.660145 ], [ 8.534138, 46.660073 ], [ 8.534113, 46.660009 ], [ 8.534088, 46.659928 ], [ 8.534046, 46.659795 ], [ 8.533947, 46.659598 ], [ 8.533159, 46.658753 ], [ 8.533023, 46.658645 ], [ 8.532853, 46.658571 ], [ 8.531763, 46.658299 ], [ 8.531632, 46.658251 ], [ 8.531367, 46.658111 ], [ 8.531216, 46.658008 ], [ 8.531147, 46.657929 ], [ 8.531121, 46.657851 ], [ 8.531161, 46.657608 ], [ 8.53115, 46.65755 ], [ 8.531085, 46.657491 ], [ 8.530964, 46.657472 ], [ 8.530894, 46.657485 ], [ 8.530839, 46.65751 ], [ 8.53081, 46.657543 ], [ 8.530797, 46.65762 ], [ 8.530867, 46.657731 ], [ 8.530892, 46.657809 ], [ 8.530892, 46.657871 ], [ 8.530893, 46.657938 ], [ 8.530911, 46.657985 ], [ 8.530948, 46.658079 ], [ 8.531058, 46.658212 ], [ 8.531234, 46.65835 ], [ 8.531337, 46.658411 ], [ 8.531614, 46.65854 ], [ 8.531781, 46.658617 ], [ 8.531946, 46.65874 ], [ 8.531995, 46.65885 ], [ 8.531986, 46.658963 ], [ 8.531882, 46.659214 ], [ 8.531897, 46.659349 ], [ 8.531952, 46.659502 ], [ 8.531956, 46.659613 ], [ 8.531675, 46.660216 ], [ 8.531662, 46.660522 ], [ 8.531631, 46.660725 ], [ 8.531528, 46.661018 ], [ 8.531537, 46.661121 ], [ 8.531682, 46.66133 ], [ 8.531698, 46.661415 ], [ 8.531625, 46.661497 ], [ 8.531502, 46.661519 ], [ 8.531395, 46.661493 ], [ 8.531328, 46.661407 ], [ 8.531381, 46.66094 ], [ 8.531239, 46.660344 ], [ 8.531272, 46.659972 ], [ 8.53119, 46.659592 ], [ 8.531128, 46.659499 ], [ 8.530932, 46.659313 ], [ 8.530791, 46.659137 ], [ 8.530528, 46.65862 ], [ 8.530375, 46.658491 ], [ 8.530305, 46.658452 ], [ 8.530035, 46.658344 ], [ 8.529317, 46.658081 ], [ 8.529122, 46.657959 ], [ 8.529007, 46.657809 ], [ 8.528881, 46.657544 ], [ 8.528663, 46.657112 ], [ 8.528638, 46.65701 ], [ 8.528653, 46.656857 ], [ 8.528701, 46.656697 ], [ 8.528689, 46.656514 ], [ 8.528781, 46.656244 ], [ 8.528644, 46.655795 ], [ 8.528678, 46.655533 ], [ 8.528605, 46.655385 ], [ 8.528538, 46.655321 ], [ 8.528421, 46.655255 ], [ 8.528282, 46.655204 ], [ 8.528052, 46.655153 ], [ 8.527758, 46.655111 ], [ 8.52729, 46.654986 ], [ 8.527166, 46.654922 ], [ 8.527038, 46.654824 ], [ 8.526946, 46.654784 ], [ 8.526709, 46.654713 ], [ 8.526082, 46.654574 ], [ 8.525951, 46.654516 ], [ 8.525721, 46.654316 ], [ 8.525364, 46.653844 ], [ 8.525327, 46.653722 ], [ 8.525394, 46.653479 ], [ 8.525394, 46.65339 ], [ 8.525362, 46.653308 ], [ 8.525222, 46.653187 ], [ 8.52518, 46.65313 ], [ 8.525139, 46.65306 ], [ 8.525088, 46.652805 ], [ 8.525043, 46.652723 ], [ 8.524902, 46.652566 ], [ 8.524768, 46.652485 ], [ 8.524511, 46.65241 ], [ 8.524406, 46.652398 ], [ 8.523577, 46.652441 ], [ 8.522761, 46.65245 ], [ 8.522493, 46.65245 ], [ 8.522181, 46.652425 ], [ 8.521955, 46.652424 ], [ 8.521485, 46.652481 ], [ 8.520914, 46.652513 ], [ 8.520674, 46.652568 ], [ 8.520295, 46.652694 ], [ 8.520094, 46.652745 ], [ 8.520004, 46.652754 ], [ 8.519561, 46.652715 ], [ 8.519361, 46.652726 ], [ 8.518874, 46.652643 ], [ 8.518746, 46.652639 ], [ 8.518575, 46.652665 ], [ 8.518399, 46.652715 ], [ 8.51823, 46.652725 ], [ 8.517629, 46.652605 ], [ 8.517429, 46.652593 ], [ 8.516769, 46.652617 ], [ 8.516663, 46.652609 ], [ 8.516543, 46.65259 ], [ 8.516156, 46.652459 ], [ 8.515993, 46.652462 ], [ 8.515531, 46.652565 ], [ 8.515389, 46.652623 ], [ 8.515246, 46.652757 ], [ 8.515093, 46.652936 ], [ 8.514957, 46.653013 ], [ 8.514718, 46.653113 ], [ 8.514543, 46.653147 ], [ 8.514339, 46.653143 ], [ 8.513719, 46.653022 ], [ 8.513504, 46.653 ], [ 8.513388, 46.653005 ], [ 8.513152, 46.653034 ], [ 8.512811, 46.653078 ], [ 8.512701, 46.653083 ], [ 8.512497, 46.65304 ], [ 8.511124, 46.652556 ], [ 8.510875, 46.652496 ], [ 8.51076, 46.652463 ], [ 8.510656, 46.652432 ], [ 8.510361, 46.652279 ], [ 8.510212, 46.652234 ], [ 8.509953, 46.65219 ], [ 8.509472, 46.652141 ], [ 8.509061, 46.652062 ], [ 8.508741, 46.652076 ], [ 8.508456, 46.652066 ], [ 8.508141, 46.651986 ], [ 8.507978, 46.651932 ], [ 8.507613, 46.65175 ], [ 8.507103, 46.651629 ], [ 8.506929, 46.651541 ], [ 8.506417, 46.651224 ], [ 8.506322, 46.651202 ], [ 8.506244, 46.651216 ], [ 8.506169, 46.65126 ], [ 8.50614, 46.651301 ], [ 8.506146, 46.651379 ], [ 8.506219, 46.651442 ], [ 8.506636, 46.651682 ], [ 8.506851, 46.651789 ], [ 8.507493, 46.651995 ], [ 8.507615, 46.652047 ], [ 8.507859, 46.6522 ], [ 8.50796, 46.652237 ], [ 8.508252, 46.652307 ], [ 8.508323, 46.652341 ], [ 8.508556, 46.652527 ], [ 8.508607, 46.652609 ], [ 8.50857, 46.652697 ], [ 8.508497, 46.652732 ], [ 8.508387, 46.652749 ], [ 8.508273, 46.652714 ], [ 8.508103, 46.652502 ], [ 8.508037, 46.652444 ], [ 8.507911, 46.652381 ], [ 8.507388, 46.652283 ], [ 8.507105, 46.652151 ], [ 8.50702, 46.65213 ], [ 8.506694, 46.65209 ], [ 8.506036, 46.651954 ], [ 8.505874, 46.651905 ], [ 8.505642, 46.651801 ], [ 8.505405, 46.651608 ], [ 8.505321, 46.651516 ], [ 8.504799, 46.650953 ], [ 8.504647, 46.650775 ], [ 8.504535, 46.650697 ], [ 8.504294, 46.650648 ], [ 8.504133, 46.650593 ], [ 8.503683, 46.650256 ], [ 8.502922, 46.649869 ], [ 8.502806, 46.649827 ], [ 8.502688, 46.64984 ], [ 8.502609, 46.649888 ], [ 8.502584, 46.649953 ], [ 8.502618, 46.650027 ], [ 8.502702, 46.650071 ], [ 8.502869, 46.650089 ], [ 8.503163, 46.650155 ], [ 8.503311, 46.650223 ], [ 8.503736, 46.650621 ], [ 8.503965, 46.65072 ], [ 8.504398, 46.650995 ], [ 8.504427, 46.651098 ], [ 8.504369, 46.651159 ], [ 8.504294, 46.651188 ], [ 8.504185, 46.651188 ], [ 8.504091, 46.651133 ], [ 8.50401, 46.650927 ], [ 8.503844, 46.650784 ], [ 8.503557, 46.650655 ], [ 8.50324, 46.650577 ], [ 8.503125, 46.650494 ], [ 8.503033, 46.650463 ], [ 8.502105, 46.650256 ], [ 8.500973, 46.65019 ], [ 8.50088, 46.650184 ] ]
						]
						
                    
                }
            }
        });
        map.addLayer({
            'id': 'route_11',
            'type': 'line',
            'source': 'route_1',
            'layout': {},
            'paint': {
                'line-color': '#FF0000',
              'line-width': 2
            }
        });
        
        
        
        
      map.addSource('Bergst', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
							[8.505428042423036,46.652520996785164],
							[8.505702085392606,46.65233092796101],
							[8.505666273232116,46.65121382088907],
							[8.506617747080735,46.650509820191644],
							[8.507944621785438,46.6507095011501],
							[8.509307559289397,46.65134065336947],
							[8.509207944848402,46.6520044791803],
							[8.508279779475725,46.65249615810835],
							[8.507441943353758,46.652549474666685],
							[8.506393837411926,46.652540360683254],
							[8.505883841714322,46.65262089712324],
							[8.505733379359512,46.6526620796232],
							[8.505428042423036,46.652520996785164]
                        ]
                    ]
                }
            }
        });
        map.addLayer({
            'id': 'Bergsturz_Sperrgebiet',
            'type': 'fill',
            'source': 'Bergst',
            'layout': {},
            'paint': {
                'fill-color': '#FF0000',
                'fill-opacity': 0.2
            }
        });
        map.addLayer({
            'id': 'Bergsturz_Sperrgebiet_line',
            "type": "line",
            "source": "Bergst",
            "paint": {
              "line-color": "rgba(255, 0, 0, 1)",
              "line-width": 3
            }
        });
  
    });
              
            
!
999px

Console