Тематические карты на LeafletJS с плагинами.
•
3 likes•2,627 views
Рассмотрение использования leafletjs с плагинами для создания тематических карт на примере Москвы и карты ледовых катков.
![<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=/slideshow/leafletjs-44967838/44967838/"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>
= Простота](https://image.slidesharecdn.com/leaflet-dvf-150221135157-conversion-gate01/85/LeafletJS-5-320.jpg)
![+ L.marker([55.75, 37.617]).addTo(map)
.bindPopup('Тут хорошо')
.openPopup();](https://image.slidesharecdn.com/leaflet-dvf-150221135157-conversion-gate01/85/LeafletJS-8-320.jpg)
![<head>
+
<script src=/slideshow/leafletjs-44967838/44967838/"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>](https://image.slidesharecdn.com/leaflet-dvf-150221135157-conversion-gate01/85/LeafletJS-13-320.jpg)
![<head>
+
<script src=/slideshow/leafletjs-44967838/44967838/"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>](https://image.slidesharecdn.com/leaflet-dvf-150221135157-conversion-gate01/85/LeafletJS-17-320.jpg)
![+
<link rel="stylesheet" href="http://humangeo.github.com/leaflet-dvf/dist/css/dvf.css" type="text/css" />
<script type="text/javascript" src=/slideshow/leafletjs-44967838/44967838/"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>](https://image.slidesharecdn.com/leaflet-dvf-150221135157-conversion-gate01/85/LeafletJS-23-320.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](https://image.slidesharecdn.com/leaflet-dvf-150221135157-conversion-gate01/85/LeafletJS-26-320.jpg)
Тематические карты на LeafletJS с плагинами.
- 1. Тематические карты с Leafllet и друзьями Иван Игнатьев
- 2. Материалы, примеры https://github.com/mithron/leaflet-lesson или напрямую через веб http://mithron.github.io/leaflet-lesson/
- 3. Тематические карты = Карты с какой-либо темой
- 5. <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=/slideshow/leafletjs-44967838/44967838/"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> = Простота
- 7. На Карту!
- 8. + L.marker([55.75, 37.617]).addTo(map) .bindPopup('Тут хорошо') .openPopup();
- 10. Данные: открытые ледовые катки http://data.mos.ru/datasets/1231 Количество элементов: 1489 Добавим огня! http://leafletjs.com/plugins.html
- 12. Сколько точек...
- 13. <head> + <script src=/slideshow/leafletjs-44967838/44967838/"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>
- 15. Точки на тематической карте?!! НЕТ ПУТИ! HEATMAP IT!
- 17. <head> + <script src=/slideshow/leafletjs-44967838/44967838/"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>
- 19. + = ?
- 22. ...Немного хелперов для конвертации данных...
- 23. + <link rel="stylesheet" href="http://humangeo.github.com/leaflet-dvf/dist/css/dvf.css" type="text/css" /> <script type="text/javascript" src=/slideshow/leafletjs-44967838/44967838/"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>
- 25. Разбор
- 26. ● 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
- 27. А где легенда?
- 29. Видно где есть Wifi , а где - еда
- 30. <head> + <link rel="stylesheet" href="http://humangeo.github.com/leaflet-dvf/dist/css/dvf.css" type="text/css" /> <script type="text/javascript" src=/slideshow/leafletjs-44967838/44967838/"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>
- 31. И это далеко не все возможности Leaflet-DVF