[ES6] Display GeoJSON features (feat. Leaflet and Mapbox)

Readme.md

Display GeoJSON features (feat. Leaflet and Mapbox)

Example: http://arfeo.net/tests/geojson/

gistfile1.txt

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

<script type="text/javascript">

	window.onload = function() {

		const openJsonFile = (file) => {
			return new Promise(function(resolve, reject) {
				const _ = new XMLHttpRequest();
			    _.overrideMimeType("application/json");
			    _.open("GET", file, true);
			    _.onload = function() {
			    	if(this.readyState == 4) {
				        if(this.status >= 200 && this.status < 300) {
				            resolve(_.responseText);
				        } else {
				        	reject(_.statusText);
				        }
				    }
			    };
			    _.onerror = function () {
					reject(_.statusText);
				};
			    _.send();
			});
		};
		
		// Создаем карту
		const map = L.map('map').setView([55.92, 37.83], 12);

		// Добавляем на карту тайлы Mapbox
		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYXJmZW8iLCJhIjoiY2pjeGw5bG5nMTF5ZjMzczZoZWVzbWdyNSJ9.Yh3u2uEHErWpTvAg3Ak_qw', {
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
			maxZoom: 20,
			id: 'mapbox.streets',
			accessToken: 'pk.eyJ1IjoiYXJmZW8iLCJhIjoiY2pjeGw5bG5nMTF5ZjMzczZoZWVzbWdyNSJ9.Yh3u2uEHErWpTvAg3Ak_qw'
		}).addTo(map);

		// Открываем и парсим файл с данными в формате GeoJSON
		openJsonFile("output.geojson")
			.then(function(json) {
			    const data = JSON.parse(json);

			    // Расставляем фичи GeoJSON на карте
				for(const feature of data.features) {
					const x = L.geoJSON(feature).addTo(map);

					// Если фича -- точка, добавляем попап с названием (при наличии)
					if(feature.geometry.type === "Point")
						x.bindPopup((name = feature.properties.name) ? name : null);
				}
			})
			.catch(function(error) {
				console.error("Error:", error);
			});

	}
</script>

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