Leaflet - Diva

From GHER

(Difference between revisions)
Jump to: navigation, search
Line 5: Line 5:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<script src ="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
 +
<link rel="stylesheet" href='http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/Leaflet/lib/Leaflet.Coordinates-0.1.5.css'>
<style type="text/css">
<style type="text/css">
#map { height : 500px; }
#map { height : 500px; }
 +
.legend {
 +
line-height: 18px;
 +
color: #555;
 +
background: white;
 +
}
 +
.legend i {
 +
width: 18px;
 +
height: 18px;
 +
float: left;
 +
margin-right: 8px;
 +
opacity: 1.;
 +
}
</style>
</style>
</head>
</head>
Line 12: Line 25:
<body>
<body>
-
<div id="map"></div>
+
<div id="map"></div>
 +
<script type="text/javascript" src='http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/Leaflet/lib/Leaflet.Coordinates-0.1.5.min.js'></script>
<script type="text/javascript" src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/Leaflet/BlackSea/MLD1.geojson"></script>
<script type="text/javascript" src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/Leaflet/BlackSea/MLD1.geojson"></script>
<script type="text/javascript" src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/Leaflet/BlackSea/contour.geojson"></script>
<script type="text/javascript" src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/Leaflet/BlackSea/contour.geojson"></script>
<script type="text/javascript" src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/Leaflet/BlackSea/BSmeshL3.geojson"></script>
<script type="text/javascript" src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/Leaflet/BlackSea/BSmeshL3.geojson"></script>
-
<script type="text/javascript" src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/Leaflet/BlackSea/field.geojson"></script>
+
<script type="text/javascript" src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/Leaflet/BlackSea/BSresult.js"></script>
 +
<script type="text/javascript" src="seismic_risk.js"></script>
<script>
<script>
Line 58: Line 73:
};
};
-
//Function to change the color according to the altitude
+
var legend = L.control({position: 'bottomright'});
-
function getColor(d) {
+
-
return d < -100 ? '#0c2c84' :
+
-
  d < -75 ? '#225ea8' :
+
-
  d < -50 ? '#1d91c0' :
+
-
  d < -25 ? '#41b6c4' :
+
-
  d < -10 ? '#7fcdbb' :
+
-
  d < -5 ? '#c7e9b4' :
+
-
'#ffffcc';
+
-
}
+
 +
L.control.coordinates({
 +
position:"bottomleft",
 +
decimals:3,
 +
decimalSeperator:".",
 +
labelTemplateLat:"Lat: {y}",
 +
labelTemplateLng:"Lon: {x}"
 +
}).addTo(map);
 +
 +
legend.onAdd = function (map) {
 +
 +
var div = L.DomUtil.create('div', 'info legend'),
 +
grades = [-50, -45, -40, -35, -30, -25, -20, -15],
 +
labels = [];
 +
 +
div.innerHTML += '<b>Mixed layer depth (m)</b><br>' 
 +
 +
// loop through our density intervals and generate a label with a colored square for each interval
 +
for (var i = 0; i < grades.length; i++) {
 +
div.innerHTML +=
 +
'<i style="background:' + getMoreColor(grades[i] + 1) + '"></i> ' +
 +
grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
 +
}
 +
 +
return div;
 +
};
 +
 +
legend.addTo(map);
function getMoreColor(d) {
function getMoreColor(d) {
-
return d < -100 ? '#d73027' :
+
return d < -50 ? '#d73027' :
-
  d < -80 ? '#f46d43' :
+
  d < -45 ? '#f46d43' :
-
  d < -60 ? '#fdae61' :  
+
  d < -40 ? '#fdae61' :  
-
  d < -50 ? '#fee090' :  
+
  d < -35 ? '#fee090' :  
-
  d < -40 ? '#ffffbf' :  
+
  d < -30 ? '#ffffbf' :  
-
  d < -30 ? '#e0f3f8' :
+
  d < -25 ? '#e0f3f8' :
  d < -20 ? '#abd9e9' :  
  d < -20 ? '#abd9e9' :  
-
  d < -10 ? '#74add1' :
+
  d < -15 ? '#74add1' :
  '#4575b4' ;
  '#4575b4' ;
}
}
Line 92: Line 125:
};
};
}
}
-
+
 
var contourStyle = {
var contourStyle = {
weight: 3,
weight: 3,
opacity: 1,
opacity: 1,
-
color : 'blue',
+
color : 'grey',
fillOpacity: 0.
fillOpacity: 0.
}
}
Line 120: Line 153:
                 return {
                 return {
radius: 5,
radius: 5,
-
                     fillColor: getColor(feature.properties.field),
+
                     fillColor: getMoreColor(feature.properties.field),
-
                     color: getColor(feature.properties.field),
+
                     color: getMoreColor(feature.properties.field),
                     weight: 1,
                     weight: 1,
                     opacity: 0.4,
                     opacity: 0.4,
Line 127: Line 160:
                 };
                 };
             }
             }
 +
           
 +
            function onEachFeatureee(feature, layer) {
 +
layer.bindPopup(feature.properties.field);
 +
};
 +
 +
function onEachFeature(feature, layer) {
 +
var popupContent = "<p>I started out as a GeoJSON " +
 +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
 +
 +
if (feature.properties && feature.properties.field) {
 +
popupContent += feature.properties.field;
 +
}
 +
 +
layer.bindPopup(popupContent);
 +
}
 +
 +
 +
 +
var divamesh = new L.GeoJSON(mesh, {style: meshStyle});
 +
var divafield = new L.GeoJSON(field, {style: fieldStyle}).addTo(map);
 +
var divacontours = new L.GeoJSON(contours, {style: contourStyle}).addTo(map);
var divadata = new L.GeoJSON(datapoints, {
var divadata = new L.GeoJSON(datapoints, {
style: dataStyle,
style: dataStyle,
 +
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {radius: 10, fillOpacity: 0.85});
return L.circleMarker(latlng, {radius: 10, fillOpacity: 0.85});
}
}
-
});
+
}).addTo(map);
-
+
-
var divacontours = new L.GeoJSON(contours, {
+
-
  style: contourStyle
+
-
});
+
-
+
-
+
-
var divamesh = new L.GeoJSON(mesh, {
+
-
  style: meshStyle
+
-
});
+
-
+
-
divadata.addTo(map);
+
-
divacontours.addTo(map);
+
-
                        divamesh.addTo(map);
+
-
+
var overlayers = {
var overlayers = {
-
"Contour" : L.layerGroup([divacontours ]),
+
"Contour" : divacontours,
-
"Mesh" : L.layerGroup([divamesh]),
+
"Mesh (L=3)" : divamesh,
-
"Data" : L.layerGroup([divadata]),
+
"Observations" : divadata,
 +
"Field" : divafield
};
};

Revision as of 14:22, 9 March 2017

Personal tools