Тематические карты на leafletjs с плагинами
TRANSCRIPT
![Page 1: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/1.jpg)
Тематические картыс Leafllet и друзьями
Иван Игнатьев
![Page 2: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/2.jpg)
Материалы, примерыhttps://github.com/mithron/leaflet-lesson
или напрямую через вебhttp://mithron.github.io/leaflet-lesson/
![Page 3: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/3.jpg)
Тематические карты =
Карты с какой-либо темой
![Page 4: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/4.jpg)
Разбираться лениво...
![Page 5: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/5.jpg)
<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>
= Простота
![Page 6: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/6.jpg)
Suddenly! DATA
![Page 7: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/7.jpg)
На Карту!
![Page 8: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/8.jpg)
+ L.marker([55.75, 37.617]).addTo(map)
.bindPopup('Тут хорошо') .openPopup();
![Page 9: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/9.jpg)
Больше точек!!!
![Page 10: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/10.jpg)
Данные: открытые ледовые каткиhttp://data.mos.ru/datasets/1231
Количество элементов: 1489Добавим огня!
http://leafletjs.com/plugins.html
![Page 11: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/11.jpg)
Точки... Тысячи их.
![Page 12: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/12.jpg)
Сколько точек...
![Page 13: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/13.jpg)
<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>
![Page 14: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/14.jpg)
ПРОСТОLeaflet.
markercluster
![Page 15: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/15.jpg)
Точки на тематической карте?!!
НЕТ ПУТИ!
HEATMAP IT!
![Page 16: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/16.jpg)
Leaflet-heat ПРОСТОLeaflet.
heat
![Page 17: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/17.jpg)
<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>
![Page 18: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/18.jpg)
Больше чем точки?!!
![Page 19: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/19.jpg)
+ = ?
![Page 20: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/20.jpg)
Разбираться лениво...
Raphaël, d3.js...
![Page 21: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/21.jpg)
LEAFLET DATA VISUALISATION FRAMEWORK (DVF)
![Page 22: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/22.jpg)
...Немного хелперов для конвертации данных...
![Page 23: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/23.jpg)
<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>
![Page 24: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/24.jpg)
Ничего не понятно, но красиво...
![Page 25: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/25.jpg)
Разбор
![Page 26: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/26.jpg)
● 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
![Page 27: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/27.jpg)
А где легенда?
![Page 28: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/28.jpg)
Рисовать лениво...
![Page 29: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/29.jpg)
Видногде есть Wifi ,а где - еда
![Page 30: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/30.jpg)
<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>
![Page 31: Тематические карты на LeafletJS с плагинами](https://reader035.vdocuments.site/reader035/viewer/2022081721/55aa70df1a28ab512e8b45f0/html5/thumbnails/31.jpg)
И это далеко не все возможности Leaflet-DVF