Тематические карты на LeafletJS с плагинами.

1. Тематические карты с Leafllet и друзьями Иван Игнатьев

2. Материалы, примеры https://github.com/mithron/leaflet-lesson или напрямую через веб http://mithron.github.io/leaflet-lesson/

3. Тематические карты = Карты с какой-либо темой

4. Разбираться лениво...

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="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> = Простота

6. Suddenly! DATA

7. На Карту!

8. + L.marker([55.75, 37.617]).addTo(map) .bindPopup('Тут хорошо') .openPopup();

9. Больше точек!!!

10. Данные: открытые ледовые катки http://data.mos.ru/datasets/1231 Количество элементов: 1489 Добавим огня! http://leafletjs.com/plugins.html

11. Точки... Тысячи их.

12. Сколько точек...

13. <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>

14. ПРОСТО Leaflet. markercluster

15. Точки на тематической карте?!! НЕТ ПУТИ! HEATMAP IT!

16. Leaflet-heat ПРОСТО Leaflet. heat

17. <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>

18. Больше чем точки?!!

19. + = ?

20. Разбираться лениво... Raphaël, d3.js...

21. LEAFLET DATA VISUALISATION FRAMEWORK (DVF)

22. ...Немного хелперов для конвертации данных...

23. + <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>

24. Ничего не понятно, но красиво...

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. А где легенда?

28. Рисовать лениво...

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="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

Тематические карты на LeafletJS с плагинами.

Тематические карты на LeafletJS с плагинами.

Recommended

More Related Content

More from Ivan Ignatyev

More from Ivan Ignatyev(20)

Тематические карты на LeafletJS с плагинами.