cookbooks/dns/files/default/html/dns.js

   1 function createMap(divName, jsonFile) {
   2   // Create a map
   3   var map = L.map(divName);
   4
   5   // Add OpenStreetMap layer
   6   L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
   7     attribution: "© <a target=\"_parent\" href=\"https://www.openstreetmap.org\">OpenStreetMap</a> and contributors, under an <a target=\"_parent\" href=\"https://www.openstreetmap.org/copyright\">open license</a>",
   8     maxZoom: 18
   9   }).addTo(map);
  10
  11   // Add the JSON file as an overlay
  12   $.ajax({
  13     url: jsonFile,
  14     success: function(json) {
  15       var jsonLayer = L.geoJson(json, {
  16         style: function(feature) {
  17           return { color: feature.properties.colour, weight: 2, opacity: 1 }
  18         },
  19         onEachFeature: function (feature, layer) {
  20           layer.bindPopup(feature.properties.origin + " via " + feature.properties.server);
  21           layer.on("mouseover", function () {
  22             this.setStyle({ weight: 5 });
  23           });
  24           layer.on("mouseout", function () {
  25             this.setStyle({ weight: 2 });
  26           });
  27         }
  28       }).addTo(map);
  29
  30       map.fitBounds(jsonLayer.getBounds());
  31     }
  32   });
  33
  34   return map;
  35 }