Start here
User Guides
HTML |
---|
<link rel="stylesheet" href="httphttps://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script type="text/javascript"> JSON_CACHE = 'httphttps://dlca.logcluster.org/'; MAP_RESOURCE = JSON_CACHE + "download/attachments/854504/dlca.json?api=v2"; //MAP_RESOURCE = "httphttps://www.logcluster.org/dlca.json"; </script> <div id="map" style="height: 600px; width: 90%; margin: auto;"> </div> <script src="httphttps://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <script type="text/javascript"> /********************************/ /**** LEAFLET MAP DEFINITION ***/ /********************************/ var popup = L.popup(); var zoom = 3; var map = L.map('map', { zoomControl: true }).setView([0, 25], zoom); var legend = L.control({ position: 'bottomright' }); /*var Thunderforest_Landscape = L.tileLayer('httphttps://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png', { maxZoom: 18, minZoom: 2, attribution: '' });*/ var Thunderforest_Landscape = L.tileLayer('httphttps://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', { maxZoom: 18, minZoom: 2, attribution: '' }); Thunderforest_Landscape.addTo(map); function chooseStyle(url) { var other = { weight: 2, color: "#fff", opacity: 1, fillColor: "#666666", fillOpacity: 0.5 }; var orange = { weight: 2, color: "#fff", opacity: 1, fillColor: "#4A9F21", fillOpacity: 0.8 }; (url.length > 0) ? style = orange : style = other; return style; } var countries2colors = new Array(); // Country to Colour Model function C2C(country, document) { this.country = country; this.document = document; } function ShowDocuments(countries) { $.ajax({ url: MAP_RESOURCE, type: "GET", dataType: "json", success: function (data) { LoadLayers(countries, data); }, error: function (xhr) { Raven.captureMessage("Error loading map resources."); } }); } function LoadLayers(countries, involvedCountries) { for (var i = 0; i < involvedCountries.length; i++) { for (var j = 0; j < countries.features.length; j++) { if (countries.features[j].id == involvedCountries[i].ISO2) { countries2colors.push(new C2C(countries.features[j], involvedCountries[i])); } } } ColorMap(countries2colors); } function ColorMap(countries2colors) { for (var i = 0; i < countries2colors.length; i++) { L.geoJson(countries2colors[i].country, { style: function () { return chooseStyle(countries2colors[i].document.URL); }, onEachFeature: function (feature, layer) { var popupContent = ""; if (countries2colors[i].document.URL.length > 0) { popupContent = "<h3 class='feature-title'><a href='" + countries2colors[i].document.URL + "' target='_blank'>" + countries2colors[i].document.Name + "</a></h3><p>D-LCA</p>"; } else { popupContent = "<p>No D-LCA available for " + feature.properties.name + "</p>"; } layer.bindPopup(popupContent); } }).addTo(map); } } $(document).ready(function () { $.ajax({ url: JSON_CACHE + 'download/attachments/854504/world-countries.json?api=v2', type: "GET", dataType: "json", success: function (data) { ShowDocuments(data); }, error: function (xhr) { //alert("Error loading world countries data."); } }); }); </script> |