Leaflet - Diva

From GHER

(Difference between revisions)
Jump to: navigation, search
Line 25: 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/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>
+
-
+
-
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>
+
-
<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" style="height:700px;"></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/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>
Line 147: Line 72:
"Open Street Map": OpenStreetMap_Mapnik
"Open Street Map": OpenStreetMap_Mapnik
};
};
-
 
-
var legend = L.control({position: 'bottomright'});
 
L.control.coordinates({
L.control.coordinates({
Line 157: Line 80:
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) {
+
var legend = L.control({position: 'bottomright'});
-
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:28, 9 March 2017

Personal tools