Leaflet - Diva

From GHER

(Difference between revisions)
Jump to: navigation, search
Line 1: Line 1:
<html>
<html>
 +
<head>
 +
<meta charset="UTF-8"/>
 +
<meta name="viewport" content="width=device-width, initial-scale=1" />
 +
<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>
 +
<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">
 +
#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>
 +
</head>
 +
 +
<body>
 +
 +
<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/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/BSresult.js"></script>
 +
<script type="text/javascript" src="seismic_risk.js"></script>
 +
<script>
 +
 +
var map = L.map('map', {
 +
  center: [43., 35.],
 +
  zoom: 6
 +
});
 +
 +
map.createPane('labels');
 +
map.getPane('labels').style.zIndex = 950;
 +
map.getPane('labels').style.pointerEvents = 'none';
 +
 +
var Stamen_Terrain = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}', {
 +
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 +
subdomains: 'abcd',
 +
minZoom: 0,
 +
maxZoom: 18,
 +
ext: 'png'
 +
});
 +
 +
var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 +
maxZoom: 19,
 +
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 +
});
 +
 +
var cartodbAttribution = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
 +
 +
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
 +
attribution: cartodbAttribution
 +
}).addTo(map);
 +
 +
var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
 +
attribution: cartodbAttribution,
 +
pane: 'labels'
 +
}).addTo(map);
 +
 +
var baseMaps = {
 +
"Positron": positron,
 +
"Stamen Terrain": Stamen_Terrain,
 +
"Open Street Map": OpenStreetMap_Mapnik
 +
};
 +
 +
var legend = L.control({position: 'bottomright'});
 +
 +
<html>
<head>
<head>
<meta charset="UTF-8"/>
<meta charset="UTF-8"/>
Line 82: Line 158:
labelTemplateLng:"Lon: {x}"
labelTemplateLng:"Lon: {x}"
}).addTo(map);
}).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) {
 +
return d < -50 ? '#d73027' :
 +
  d < -45 ? '#f46d43' :
 +
  d < -40 ? '#fdae61' :
 +
  d < -35 ? '#fee090' :
 +
  d < -30 ? '#ffffbf' :
 +
  d < -25 ? '#e0f3f8' :
 +
  d < -20 ? '#abd9e9' :
 +
  d < -15 ? '#74add1' :
 +
  '#4575b4' ;
 +
}
 +
 +
function dataStyle(feature) {
 +
return {
 +
radius: 5,
 +
fillColor: getMoreColor(feature.properties.field),
 +
weight: 1,
 +
opacity: 1,
 +
color: 'black',
 +
fillOpacity: 0.7
 +
};
 +
}
 +
 +
var contourStyle = {
 +
weight: 3,
 +
opacity: 1,
 +
color : 'grey',
 +
fillOpacity: 0.
 +
}
 +
 +
var meshStyle = {
 +
weight: 0.5,
 +
opacity: .5,
 +
color : 'grey',
 +
fillOpacity: 0.
 +
}
 +
 +
var geojsonMarkerOptions = {
 +
radius: 5,
 +
fillColor: "#ff7800",
 +
color: "#000",
 +
weight: 1,
 +
opacity: 1,
 +
fillOpacity: 1
 +
};
 +
 +
 +
function fieldStyle(feature) {
 +
                return {
 +
radius: 5,
 +
                    fillColor: getMoreColor(feature.properties.field),
 +
                    color: getMoreColor(feature.properties.field),
 +
                    weight: 1,
 +
                    opacity: 0.4,
 +
                    fillOpacity: 0.7
 +
                };
 +
            }
 +
           
 +
            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, {
 +
style: dataStyle,
 +
onEachFeature: onEachFeature,
 +
pointToLayer: function (feature, latlng) {
 +
return L.circleMarker(latlng, {radius: 10, fillOpacity: 0.85});
 +
}
 +
}).addTo(map);
 +
 +
var overlayers = {
 +
"Contour" : divacontours,
 +
"Mesh (L=3)" : divamesh,
 +
"Observations" : divadata,
 +
"Field" : divafield
 +
};
 +
 +
L.control.layers(baseMaps, overlayers).addTo(map);
 +
 +
</script>
 +
 +
</body>
 +
</html>
 +
legend.onAdd = function (map) {
legend.onAdd = function (map) {

Revision as of 14:24, 9 March 2017


legend.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend'), grades = [-50, -45, -40, -35, -30, -25, -20, -15], labels = [];

div.innerHTML += 'Mixed layer depth (m)
'

// 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 += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); }

return div; };

legend.addTo(map);

function getMoreColor(d) { return d < -50 ? '#d73027' : d < -45 ? '#f46d43' : d < -40 ? '#fdae61' : d < -35 ? '#fee090' : d < -30 ? '#ffffbf' : d < -25 ? '#e0f3f8' : d < -20 ? '#abd9e9' : d < -15 ? '#74add1' : '#4575b4' ; }

function dataStyle(feature) { return { radius: 5, fillColor: getMoreColor(feature.properties.field), weight: 1, opacity: 1, color: 'black', fillOpacity: 0.7 }; }

var contourStyle = { weight: 3, opacity: 1, color : 'grey', fillOpacity: 0. }

var meshStyle = { weight: 0.5, opacity: .5, color : 'grey', fillOpacity: 0. }

var geojsonMarkerOptions = { radius: 5, fillColor: "#ff7800", color: "#000", weight: 1, opacity: 1, fillOpacity: 1 };


function fieldStyle(feature) {

               return {

radius: 5,

                   fillColor: getMoreColor(feature.properties.field),
                   color: getMoreColor(feature.properties.field),
                   weight: 1,
                   opacity: 0.4,
                   fillOpacity: 0.7
               };
           }		
           
           function onEachFeatureee(feature, layer) {

layer.bindPopup(feature.properties.field); };

function onEachFeature(feature, layer) {

var popupContent = "

I started out as a GeoJSON " + feature.geometry.type + ", but now I'm a Leaflet vector!

";

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, { style: dataStyle, onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, {radius: 10, fillOpacity: 0.85}); } }).addTo(map);

var overlayers = { "Contour" : divacontours, "Mesh (L=3)" : divamesh, "Observations" : divadata, "Field" : divafield };

L.control.layers(baseMaps, overlayers).addTo(map);

</script>

</body> </html>

Personal tools