Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Тематические карты
с Leafllet и друзьями
Иван Игнатьев
Материалы, примеры
https://github.com/mithron/leaflet-lesson
или напрямую через веб
http://mithron.github.io/leaflet-lesso...
Тематические карты
=
Карты с какой-либо темой
Разбираться лениво...
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.
com/leaflet...
Suddenly! DATA
На Карту!
+ L.marker([55.75, 37.617]).addTo(map)
.bindPopup('Тут хорошо')
.openPopup();
Больше точек!!!
Данные: открытые ледовые катки
http://data.mos.ru/datasets/1231
Количество элементов: 1489
Добавим огня!
http://leafletjs....
Точки...
Тысячи их.
Сколько точек...
<head>
+
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster.js"> </script>
<link rel="...
ПРОСТО
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...
Больше чем точки?!!
+ = ?
Разбираться лениво...
Raphaël, d3.js...
LEAFLET DATA
VISUALISATION
FRAMEWORK
(DVF)
...Немного хелперов для
конвертации данных...
+
<link rel="stylesheet" href="http://humangeo.github.com/leaflet-dvf/dist/css/dvf.css" type="text/css" />
<script type="t...
Ничего не
понятно, но
красиво...
Разбор
● data: { 'WiFi':bool2Int(iceFields[i].Cells.
ObjectHasWifi), 'Cafe': bool2Int(iceFields[i].Cells.
ObjectHasEatery), 'WC':...
А где легенда?
Рисовать лениво...
Видно
где есть Wifi ,
а где - еда
<head>
+
<link rel="stylesheet" href="http://humangeo.github.com/leaflet-dvf/dist/css/dvf.css" type="text/css" />
<script ...
И это далеко не все возможности
Leaflet-DVF
Upcoming SlideShare
Loading in …5
×

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

1,994 views

Published on

Рассмотрение использования leafletjs с плагинами для создания тематических карт на примере Москвы и карты ледовых катков.

Published in: Technology
  • Be the first to comment

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

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

×