chingchai/countries.geojson

## countries.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              countries.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<html>
<head>
  <title>Leaflet WebMap</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin="" />
  <!-- Make sure you put this AFTER Leaflet's CSS -->
  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
  integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
  crossorigin=""></script>
  <!-- jquery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>
  <script>
  // initialize the map
  var map = L.map('map').setView([16, 100], 3);

  // load a tile layer
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  // load GeoJSON from an external file
  // $.getJSON("countries.geojson",function(data){
  //   // add GeoJSON layer to the map once the file is loaded
  //   L.geoJson(data).addTo(map);
  // });

  function addDataToMap(data, map) {
    var dataLayer = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        var popupText = "NAME: " + feature.properties.NAME
          + "<br>REGION: " + feature.properties.REGION_UN;
        //+ "<br><a href='" + feature.properties.url + "'>More info</a>";
        layer.bindPopup(popupText);
      }
    });
    dataLayer.addTo(map);
  }
  $.getJSON("countries.geojson", function (data) { addDataToMap(data, map); });

  </script>
</body>
</html>
	<html>
	<head>
	<title>Leaflet WebMap</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
	integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
	crossorigin="" />
	<!-- Make sure you put this AFTER Leaflet's CSS -->
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
	integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
	crossorigin=""></script>
	<!-- jquery -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<style>
	#map{ height: 100% }
	</style>
	</head>
	<body>

	<div id="map"></div>
	<script>
	// initialize the map
	var map = L.map('map').setView([16, 100], 3);

	// load a tile layer
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	// load GeoJSON from an external file
	// $.getJSON("countries.geojson",function(data){
	// // add GeoJSON layer to the map once the file is loaded
	// L.geoJson(data).addTo(map);
	// });

	function addDataToMap(data, map) {
	var dataLayer = L.geoJson(data, {
	onEachFeature: function (feature, layer) {
	var popupText = "NAME: " + feature.properties.NAME
	+ "<br>REGION: " + feature.properties.REGION_UN;
	//+ "<br><a href='" + feature.properties.url + "'>More info</a>";
	layer.bindPopup(popupText);
	}
	});
	dataLayer.addTo(map);
	}
	$.getJSON("countries.geojson", function (data) { addDataToMap(data, map); });

	</script>
	</body>
	</html>