Start here
User Guides
HTML |
---|
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script type="text/javascript">
JSON_CACHE = 'http://dlca.logcluster.org/';
MAP_RESOURCE = JSON_CACHE + "download/attachments/854504/dlca.json?api=v2";
//MAP_RESOURCE = "http://www.logcluster.org/dlca.json";
</script>
<div id="map" style="height: 600px; width: 90%; margin: auto;">
</div>
<script src="http://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('http://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png', {
maxZoom: 18,
minZoom: 2,
attribution: ''
});*/
var Thunderforest_Landscape = L.tileLayer('http://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> |