Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS
Тематические карты на LeafletJS с плагинами.
31
Тематические карты с Leafllet и друзьями Иван Игнатьев
-
Upload
ivan-ignatyev -
Category
Technology
-
view
365 -
download
3
Transcript of Тематические карты на LeafletJS с плагинами.
Тематические картыс Leafllet и друзьями
Иван Игнатьев
Материалы, примерыhttps://github.com/mithron/leaflet-lesson
или напрямую через вебhttp://mithron.github.io/leaflet-lesson/
Тематические карты =
Карты с какой-либо темой
Разбираться лениво...
<html><head>
<title>Example</title><meta charset="utf-8"><link rel="stylesheet" href="http://cdn.leafletjs.
com/leaflet-0.7.3/leaflet.css" /><script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.
js"></script></head><body>
<div id="map" style="height: 100%;"> </div><script>
var map = L.map('map').setView([55.75, 37.63], 10);L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i875mjb7'}).addTo(map);
</script></body></html>
= Простота
Suddenly! DATA
На Карту!
+ L.marker([55.75, 37.617]).addTo(map)
.bindPopup('Тут хорошо') .openPopup();
Больше точек!!!
Данные: открытые ледовые каткиhttp://data.mos.ru/datasets/1231
Количество элементов: 1489Добавим огня!
http://leafletjs.com/plugins.html
Точки... Тысячи их.
Сколько точек...
<head>
+<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster.js"> </script><link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" /><link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
</script></head><body>
+ var markers = L.markerClusterGroup();for(var i=0; i<iceFields.length; i++) {
var marker = L.marker([iceFields[i].Lat, iceFields[i].Lon]).bindPopup(iceFields[i].Cells.ObjectShortName);
markers.addLayer(marker);};
map.addLayer(markers);
</body>
ПРОСТОLeaflet.
markercluster
Точки на тематической карте?!!
НЕТ ПУТИ!
HEATMAP IT!
Leaflet-heat ПРОСТОLeaflet.
heat
<head>
+<script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"> </script>
</head><body>
+ var heat = L.heatLayer([[iceFields[0].Lat, iceFields[0].Lon]],{radius: 100});for(var i=1; i<iceFields.length; i++) { heat.addLatLng([iceFields[i].Lat, iceFields[i].Lon]);}heat.addTo(map);
</body>
Больше чем точки?!!
+ = ?
Разбираться лениво...
Raphaël, d3.js...
LEAFLET DATA VISUALISATION FRAMEWORK (DVF)
...Немного хелперов для конвертации данных...
<head>
+<link rel="stylesheet" href="http://humangeo.github.com/leaflet-dvf/dist/css/dvf.css" type="text/css" /><script type="text/javascript" src="http://humangeo.github.com/leaflet-dvf/dist/leaflet-dvf.min.js"> </script>
</head><body>
=> for(var i=0; i<iceFields.length; i++) {
var options = { data: { 'WiFi': bool2Int(iceFields[i].Cells.ObjectHasWifi), 'Cafe': bool2Int(iceFields[i].Cells.ObjectHasEatery), 'WC': bool2Int(iceFields[i].Cells.ObjectHasToilet) },
chartOptions: {'WiFi': { fillColor: '#4A7FFB', color: '#4A7FFB', minValue: 0, maxValue: 1, maxHeight:
20,displayText: function() { return iceFields[i].Cells.ObjectHasWifi; }},
'Cafe': { fillColor: '#05F020', color: '#05F020', minValue: 0, maxValue: 1, maxHeight: 20,
displayText: function() { return iceFields[i].Cells.ObjectHasEatery; }},'WC': { fillColor: '#F09F13', color: '#F09F13', minValue: 0, maxValue: 1,
maxHeight: 20,displayText: function() { return iceFields[i].Cells.ObjectHasToilet; }}},
weight: 1, radius: 4, fillOpacity: 0.7, width: 12 };var marker = new L.BarChartMarker(new L.LatLng(iceFields[i].Lat, iceFields[i].Lon),
options).addTo(map);
};</body>
Ничего не понятно, но красиво...
Разбор
● data: { 'WiFi':bool2Int(iceFields[i].Cells.ObjectHasWifi), 'Cafe': bool2Int(iceFields[i].Cells.ObjectHasEatery), 'WC': bool2Int(iceFields[i].Cells.ObjectHasToilet) },
● chartOptions: { 'WiFi': {fillColor: '#4A7FFB', color: '#4A7FFB', minValue: 0, maxValue: 1, maxHeight: 20, displayText: function() { return iceFields[i].Cells.ObjectHasWifi; }},
● weight: 1, radius: 4, fillOpacity: 0.7, width: 12
А где легенда?
Рисовать лениво...
Видногде есть Wifi ,а где - еда
<head>
+<link rel="stylesheet" href="http://humangeo.github.com/leaflet-dvf/dist/css/dvf.css" type="text/css" /><script type="text/javascript" src="http://humangeo.github.com/leaflet-dvf/dist/leaflet-dvf.min.js"> </script>
</head><body>
=>var barChartOptions = { recordsField: '', locationMode: L.LocationModes.LATLNG, latitudeField: "Lat",
longitudeField: "Lon", codefield: 0, chartOptions: { 'Cells.ObjectHasWifi': { fillColor: '#4A7FFB', color: '#4A7FFB', minValue: 0, maxValue: 1, minHeight: 4, maxHeight: 20, displayName: 'Wifi', displayText: int2bool },
'Cells.ObjectHasEatery': { fillColor: '#05F020', color: '#05F020', minValue: 0, maxValue: 1, minHeight: 4, maxHeight: 20, displayName: 'Кафе', displayText: int2bool },
'Cells.ObjectHasToilet': { fillColor: '#F09F13', color: '#F09F13', minValue: 0, maxValue: 1, minHeight: 4, maxHeight: 20, displayName: 'Туалет', displayText: int2bool }
},layerOptions: { fillOpacity: 0.9, opacity: 0.5, weight: 1, width: 12, gradient: true, dropShadow: true },displayOptions: { },
tooltipOptions: { iconSize: new L.Point(80,55), iconAnchor: new L.Point(-5,55)} };
var legendControl = new L.Control.Legend();legendControl.addTo(map);
var barLayer = new L.BarChartDataLayer(iceFields, barChartOptions);barLayer.addTo(map);
</body>
И это далеко не все возможности Leaflet-DVF
