Add Sochi

index.html

@@ -47,68 +47,6 @@ <h4 class="panel-title">
 <script src="places/moscow.js"></script>
 
 <script src="templates.js"></script>
-<script type="text/javascript">
-    $('#map').height($(window).height() * .75)
-    var map, selectedViolation
-
-    DG.then(function () {
-        map = DG.map('map', {
-            fullscreenControl: false,
-            center: [55.75354, 37.623796],
-            zoom: 14
-        })
-
-        var selectedIcon = DG.icon({
-            iconUrl: 'img/active.png',
-            iconSize: [22, 34]
-        })
-        var inactiveIcon = DG.icon({
-            iconUrl: 'img/inactive.png',
-            iconSize: [22, 34]
-        })
-        var visitedIcon = DG.icon({
-            iconUrl: 'img/visited.png',
-            iconSize: [22, 34]
-        })
-
-        var markerList = []
-        for (var category of data) {
-            for (var place of category.list) {
-                var opts = {}
-                if ('status' in place) {
-                    switch (place.status) {
-                        case 'inactive':
-                            opts.icon = inactiveIcon
-                            break
-                        case 'visited':
-                            opts.icon = visitedIcon
-                            break
-                    }
-                }
-                var marker = DG.marker([place.x, place.y], opts).bindPopup(place.name)
-                markerList.push(marker)
-            }
-        }
-        var group = DG.featureGroup(markerList).addTo(map)
-        DG.control.location({position: 'topleft'}).addTo(map)
-
-        $('a.list-group-item').on('click', function () {
-            if (undefined !== selectedViolation) selectedViolation.removeFrom(map)
-
-            var label = $('span.label', this).text()
-            var coordinates = $(this).data('geo').split(',').map(function (item) {
-                return parseFloat(item.trim())
-            })
-
-            selectedViolation = DG.marker(coordinates, {icon: selectedIcon}).addTo(map).bindLabel(label)
-            map.setView(coordinates)
-
-            $list.find('a.list-group-item').each(function () {
-                $(this).removeClass('active')
-            })
-            $(this).toggleClass('active')
-        })
-    })
-</script>
+<script src="script.js"></script>
 </body>
 </html>

places/moscow.js

@@ -1,3 +1,6 @@
+var geoCenter = [55.75354, 37.623796]
+var geoZoom = 14
+
 var data = [
     {
         'title': 'По плану',

places/sochi.js

@@ -0,0 +1,55 @@
+var geoCenter = [43.553525, 39.966202]
+var geoZoom = 11
+
+var data = [
+    {
+        'title': 'Места',
+        'list': [
+            {
+                'name': 'Ж/д вокзал Сочи',
+                'x': 43.591519,
+                'y': 39.727893,
+            },
+            {
+                'name': 'Ж/д вокзал Адлер',
+                'x': 43.433226,
+                'y': 39.911785,
+            },
+        ]
+    },
+    {
+        'title': 'Достопримечательности',
+        'list': [
+            {
+                'name': 'Олимпийский парк',
+                'x': 43.405172,
+                'y': 39.954947,
+            },
+            {
+                'name': 'Красная поляна',
+                'x': 43.68426,
+                'y': 40.240688,
+            },
+            {
+                'name': 'Сочи Парк',
+                'x': 43.402818,
+                'y': 39.967146,
+            },
+            {
+                'name': 'Дендрарий',
+                'x': 43.568584,
+                'y': 39.73992,
+            },
+            {
+                'name': 'Ривьера',
+                'x': 43.590859,
+                'y': 39.715737,
+            },
+            {
+                'name': 'Океанариум',
+                'x': 43.471624,
+                'y': 39.894941,
+            },
+        ]
+    },
+]

script.js

@@ -0,0 +1,61 @@
+$('#map').height($(window).height() * .75)
+var map, selectedViolation
+
+DG.then(function () {
+    map = DG.map('map', {
+        fullscreenControl: false,
+        center: geoCenter,
+        zoom: geoZoom
+    })
+
+    var selectedIcon = DG.icon({
+        iconUrl: 'img/active.png',
+        iconSize: [22, 34]
+    })
+    var inactiveIcon = DG.icon({
+        iconUrl: 'img/inactive.png',
+        iconSize: [22, 34]
+    })
+    var visitedIcon = DG.icon({
+        iconUrl: 'img/visited.png',
+        iconSize: [22, 34]
+    })
+
+    var markerList = []
+    for (var category of data) {
+        for (var place of category.list) {
+            var opts = {}
+            if ('status' in place) {
+                switch (place.status) {
+                    case 'inactive':
+                        opts.icon = inactiveIcon
+                        break
+                    case 'visited':
+                        opts.icon = visitedIcon
+                        break
+                }
+            }
+            var marker = DG.marker([place.x, place.y], opts).bindPopup(place.name)
+            markerList.push(marker)
+        }
+    }
+    var group = DG.featureGroup(markerList).addTo(map)
+    DG.control.location({position: 'topleft'}).addTo(map)
+
+    $('a.list-group-item').on('click', function () {
+        if (undefined !== selectedViolation) selectedViolation.removeFrom(map)
+
+        var label = $('span.label', this).text()
+        var coordinates = $(this).data('geo').split(',').map(function (item) {
+            return parseFloat(item.trim())
+        })
+
+        selectedViolation = DG.marker(coordinates, {icon: selectedIcon}).addTo(map).bindLabel(label)
+        map.setView(coordinates)
+
+        $list.find('a.list-group-item').each(function () {
+            $(this).removeClass('active')
+        })
+        $(this).toggleClass('active')
+    })
+})

sochi.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>☼ Сочи</title>
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+    <link href="style.css" rel="stylesheet">
+</head>
+<body>
+
+<div class="container px-2 pb-3">
+    <div id="map" class="w-100 mb-1"></div>
+    <div class="accordion"></div>
+</div>
+
+<!-- Шаблоны -->
+<div style="display: none">
+    <div id="pattern-category">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h4 class="panel-title">
+                    <a data-toggle="collapse" data-parent="#accordion" href="#%id">%name</a>
+                    <span class="tag tag-pill tag-default">%count</span>
+                </h4>
+            </div>
+            <div id="%id" class="panel-collapse collapse">
+                <div class="list-group mb-1">%list</div>
+            </div>
+        </div>
+    </div>
+    <div id="pattern-place">
+        <a href="#" class="list-group-item list-group-item-action" data-geo="%x, %y">
+            <span class="label %status">%name</span>
+        </a>
+    </div>
+</div>
+
+
+<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
+<script src="//maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
+
+<script src="places/sochi.js"></script>
+
+<script src="templates.js"></script>
+<script src="script.js"></script>
+</body>
+</html>