opendatahack/index.html at master · mithron/opendatahack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<html>
<head>
	<title>Московские школы</title>
	<meta charset="utf-8">
	<meta property="og:title" content="Расходы школ Москвы"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="http://schools.mithron.me"/>
    <meta property="og:image" content="http://schools.mithron.me/project-cover2.png"/>
    <meta property="og:site_name" content="Расходы школ Москвы"/>
    <meta property="og:description"
         content="Cколько и кому платят школы Москвы. Графики и сравнения. Проголосуйте за сайт http://budgetapps.ru/contest#projects ."/>

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

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <link rel="stylesheet" href="leaflet-dvf/dist/css/dvf.css" type="text/css" />
    <script type="text/javascript" src="leaflet-dvf/dist/leaflet-dvf.min.js"></script>

    <link rel="stylesheet" href="Leaflet.StyledLayerControl/css/styledLayerControl.css" />
    <script src="Leaflet.StyledLayerControl//src/styledLayerControl.js"></script>

	<script src="leaflet-sidebar/src/L.Control.Sidebar.js"></script>
	<link rel="stylesheet" href="leaflet-sidebar/src/L.Control.Sidebar.css" />

	<link rel="stylesheet" href="Leaflet.loading/src/Control.Loading.css" />
    <script src="Leaflet.loading/src/Control.Loading.js"></script>

	<link rel="stylesheet" href="Leaflet.label/dist/leaflet.label.css" />
    <script src="Leaflet.label/dist/leaflet.label.js"></script>

	<script src="spin.min.js"></script>

	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


</head>
<body>

	<script>allowed = true;	</script>
	<script src="school_data_short.min.js"></script>
    <script src="global.js"></script>

	<div id="hidden"><audio id="instrPlayer" src="http://tts.voicetech.yandex.net/generate?text='Здравствуйте!Перед%20вами - справочник%20по%20расходам%20московских%20школ%20%20%20Здесь%20представлены%20расходы%20лучших%20школ%20Москвы%20%20тех%20школ%20%20которые%20входили%20хотя%20бы%20раз%20в%20список%20что%20выпускается%20ежегодно%20Департаментом%20Образования%20Москвы.Пока%20что%20загружаются%20данные%20немного%20об%20этом%20инструменте%20%20В%20правой%20панели%20Вы%20можете%20выбрать%20те%20школы%20которые%20вас%20интересуют%20Они%20будут%20представлены%20на%20карте%20У%20выбранных%20школ%20будет%20отображена%20круговая%20диаграмма%20расходов.На%20диаграмме%20пропорционально%20сумме%20отображены%20контакты,%20при%20наведении%20мышки%20на%20них%20во всплывающем%20окне%20показана%20сумма и поставщик. Школы%20линиями%20соединены%20с%20поставщиками.Толщина%20линии%20пропорциональна%20сумме%20контракта.Если%20кликнуть%20линию%20то%20будет%20показано%20местоположение%20поставщика%20и%20его%20название.Цвет%20индивидуально%20идентифицирует%20поставщика.Цвет%20на%20круговой%20диаграмме%20и%20линии%20совпадает'&format=mp3&lang=ru-RU&speaker=zahar&key=519d3768-9302-4f28-8eab-0eb1bf9579d5" autoplay="autoplay" type="audio/mp3" preload="none"></audio></div>
	<div id="sidebar">
		<h1>Здравствуйте!</h1>
		<p>Перед вами - справочник по расходам московских школ. Здесь представлены расходы лучших школ Москвы - тех школ, которые входили хотя бы раз в список, выпускаемый Департаментом Образования Москвы. </p>
		<p>Пока что загружаются данные - немного об этом инструменте. </p>
		<p>В правой панели Вы можете выбрать те школы, которые вас интересуют. Они будут представлены на карте. У выбранных школ будет отображена круговая диаграмма расходов по годам. На диаграмме пропорционально сумме отображены контакты, при наведении мышки на них во всплывающем окне показана сумма и поставщик. </p>
		<p>Школы линиями соединены с поставщиками. Толщина линии пропорциональна сумме контракта. Если кликнуть линию, то будет показано местоположение поставщика и его название.
		</p>
		<p>Цвет индивидуален для каждого поставщика школы и совпадает у линии и на круговой диаграмме.</p>
		<p>В проекте использованы: данные Департамента Образования города Москвы(списки лучших школ), открытые данные о  школах (дасасет 747) Портала открытых данных Правительства Москвы, а также открытые данные о госзакупках проекта ГосЗатраты. Подробности о проекте см. <a target="_blank" href="https://docs.google.com/document/d/1N6m1Snru_fbvPqIr1hWMTvsbBWLc6mCHfhvOYXg73-E/pub">тут</a>.</p>

		<button onclick="disableAudio('instrPlayer')">Отключить озвучку</button>
	</div>

	<div id="map"></div>

	<script>
	var map;

	var resize = function () {
		var $map = $('#map');

		$map.height($(window).height() - $('div.navbar').outerHeight());

		if (map) {
			map.invalidateSize();
		}
	};

	$(window).on('resize', function () {
		resize();
	});

	resize();

	map = L.map('map').setView([55.75, 37.63], 10);

	var accessToken = 'pk.eyJ1IjoibWl0aHJvbiIsImEiOiJiT0wwZkMwIn0.MnqefBaviEHMB3li6tpL4g';
	var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v4/mithron.lake28fh/{z}/{x}/{y}.png?access_token=' + accessToken, { maxZoom: 18,
				attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
				}).addTo(map);

        // Add a layer control
    var base = [];
    var over = [];
    var layerControl = L.Control.styledLayerControl(base, over, { collapsed:false, container_width: "200px",
            container_maxHeight: "550px",  group_maxHeight: "550px", exclusive: false}).addTo(map);

	var loadingControl = L.Control.loading({
            separate: true, spinjs:true,
			spin: { lines: 15, length: 5, width: 5, radius: 4, corners: 1, rotate: 13,
			direction: 1, color: '#000', speed: 1, trail: 60, shadow: false, hwaccel: false,
			zIndex: 2e9, top: '50%', left: '50%'
			}
                });
    map.addControl(loadingControl);
	map.fire("dataloading");

	var sidebar = L.control.sidebar('sidebar', {
            closeButton: true,
            position: 'left'
       });
    map.addControl(sidebar);
    setTimeout(function () {
            sidebar.show();
        }, 500);

	for(var i=0; i<schoolData.length; i++) {
		if (schoolData[i].inn){
            var marker = new L.Marker([schoolData[i].lat,schoolData[i].lng], options = { inn: schoolData[i].inn} );
            var group = L.layerGroup([marker]);
            layerControl.addOverlay(group, schoolData[i].full_name, {groupName : "Школы Москвы", expanded:true});
        }}

	if (getURLParameter('school') != null) {
		var schoolINN = getURLParameter('school').split('/')[0];
		if (schoolINN != null) {
			for(var key in layerControl._layers) {
				if (layerControl._layers.hasOwnProperty(key)) {
					if(layerControl._layers[key].layer._layers[key-1].options.inn == schoolINN) {
						layerControl._layers[key].layer.addTo(map);
						onOverlayAdd(layerControl._layers[key].layer);
					}
				}
			}
		}
	}

    map.on("overlayadd", function(e) {
		onOverlayAdd(e.layer);
		});

	map.fire("dataload");
	</script>
</body></html>