HTML и SVG: создаём интерактивную карту
Давайте создадим интерактивную карту. Чего-нибудь. Что значит интерактивную? Ну, она должна взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Думаю, этого достаточно, чтобы считать её интерактивной.
Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG — это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript’ом.
Что же, начнём?
Самые нетерпеливые, могут сразу посмотреть демо, но я предлагаю читать обо всём по порядку.
Готовим карту
Для начала нам нужна суть. То бишь сама карта. В случае, если гугл не помогает, то её можно нарисовать и самому, даром что в Inkscape это сделать не трудно.
Я же, к примеру, возьму карту одной круглой страны (исходник на Wikimedia Commons)
Поскольку, по моему замыслу, у областей карты не должно быть различного окраса, то вначале я вырезаю из интересующих меня тегов <path> стили fill и stroke, зато взамен даю этим элементам нужные мне class и id. Например, для регионов и для городов.
Далее, в секции <defs> изображения помещаем до боли знакомое:
Вот и обещанный мною CSS в действии. В принципе, этого уже достаточно. Diff.
Результат: 
Вставляем SVG в HTML
Достаточно подробно этот процесс был освещён в хабратопике К вопросу о кроссбраузерном использовании SVG.
Мы же будем использовать HTML5 и воспользуемся самым простым, гуманным и стандартным способом:
Все браузеры, поддерживающие SVG, его корректно «скушают» и покажут. И даже дадут нам с ним поработать. При одном условии: если веб-сервер отдаст его с MIME-типом image/svg+xml. Другой MIME-тип может очень смутить Google Chrome (но не Оперу, которая из тега твёрдо знает, что идёт за SVG и на провокации не поддаётся).
Второй правильный метод — вставка SVG-кода прямо в HTML. Великолепно с точки зрения скриптинга, но поддержка браузерами пока похуже. Кстати, заметьте, что SVG, вставленный в «либеральный» HTML, всё-таки остаётся «суровым» XML’ем. Так что кавычки и закрывающие теги обязательны.
Подводные грабли
Но не всё так просто. Сразу можно заметить, что браузеры упорно не хотят масштабировать нашу карту, а если она не влезает, то показывают полосы прокрутки, вот так: 
Чтобы заставить браузеры работать с SVG так, как мы ожидаем, следует убрать в SVG-файле из тега <svg> атрибуты width и height (или задать им значения в 100%), а вставить специально предназначенный для браузеров атрибут viewBox со значениями координат левого верхнего и правого нижнего углов изображения:
Diff.
После этого ситуация значительно улучшается, но другую граблю нам подкладывает Google Chrome: он упорно стремится смасштабировать картинку по высоте до высоты элемента <object>, а не увеличить высоту <object> согласно ширине тега и пропорциям изображения, как ведут себя остальные браузеры. 
Жаль. Придётся привлечь JavaScript и подогнать высоту элемента вручную.
Diff.
Результат: 
Взаимодействуем с SVG
Чтобы нам взаимодействовать с SVG, вписаннным прямо в HTML, ничего не нужно — он уже часть DOM веб-страницы.
Получить доступ к SVG, вставленным через <object> чуть сложнее:
Да, jQuery работает с SVG, но только частично. Например, я заметил, что не работают функции addClass и removeClass, а так же поиск по классам ( jQuery(".class") ). Приходится извращаться.
Заметьте, что я использую событие window.onload, так как нам необходимо дождаться полной загрузки страницы, вместе со всеми связанными элементами (в числе которых и наша карта). Однако и тут Google Chrome спешит подложить нам свинью: в том случае, если скрипт с window.onload находится в html-коде до тега <object>, то код в обработчике выполняется ДО того, как карта на самом деле загрузится. Поэтому тег <script> необходимо разместить после нашей карты. Sad but true.
Интерактивность первая: выделяем районы на карте щелчком по чекбоксу на странице.
Для этого взаимодействия нам понадобятся чекбоксы в каждой строке таблицы с районами, а так же совпадающие или схожие id у строк таблицы и районов на карте.
Здесь мы будем при щелчке по флажку ставить или убирать класс selected у соответствующей области на карте, а так уже у самой строки. Это несложно:
Соответственно, нужно добавить и стилевые определения для данного класса. Предоставляю вам это сделать самостоятельно, согласно своих вкусов и предпочтений. Diff. 
Интерактивность вторая: вскрываем/показываем названия на карте щелчком по чекбоксу на странице.
Это взаимодействие делается ещё проще. Вставляем на страницу <input type="checkbox" > и немножко яваскрипта, который добавляет/удаляет всем связанным с названиями элементам на карте класс hidden
Вот так. 
Интерактивность третья: подсвечиваем районы на карте при наведении на строку таблицы (и наоборот)
Для этого необходимо повешать обработчики события onhover как на таблицу:
…так и на районы на карте:
Для того, чтобы мы это видели, добавим соответствующие CSS-правила в страницу:
…и в SVG-карту:
При наведении мышкой на строку таблицы (или на район на карте) на соответствующий район на карте (на строку таблицы) вешается нужный для подсвечивания класс. Чтобы приведённый выше код работал, необходимо, чтобы у районов на карте и строк таблицы были совпадающие (или схожие) id. Diff. 
Интерактивность четвёртая: Отображаем данные со страницы на карте
Ну что же, банальное присваивание классов, наверное, уже наскучило. Пускай карта нам показывает на себе какие-нибудь данные.
Перво-наперво: данные. Добавим к нашей табличке пару столбцов, например «Люди» и «Деньги». Внимание: Данные взяты от балды и никакого отношения к реальному Аместрису не имеют. А так же радиокнопки, по которым будем переключать, какие данные показывать.
Во-вторых, нам нужно место на карте, где будут отображаться данные. Добавим на карту пять блоков <text> (по одному на каждый регион, соотнеся их id с регионами) и соответствующие стили в <defs>:
Ну и JavaScript-код, который будет брать данные из ячеек таблицы и помещать в блоки текста:
И по переключению радиокнопок карта будет показывать нужные цифры. Вуаля! 
Интерактивность пятая: всплывающие подсказки
Возможно, это уже и лишнее, но пусть будет. Для ровного счёта.
Для данного взаимодействия возьмём плагин jQuery.tooltip и привяжем его к областям на карте. Текст для подсказок будем брать, конечно же, из таблицы:
Diff.
И так далее…
Разумеется, этим возможности взаимодействия с SVG не ограничиваются. Вы можете делать всё. Перетасовывать DOM, менять страницу и SVG по AJAX-запросам и многое, многое другое. Дерзайте.
Результат
Оставшиеся подводные камни
Из известных проблем пока что можно отметить, что Google Chrome не выводит на печать SVG-картинки. Это или его баг или баг WebKit в целом.
Обратная совместимость
Почти все современные браузеры поддерживают SVG: IE 9+, Opera 8+, Firefox 3+ (в Firefox 1.5+ частичная поддержка), Chrome всех версий, Safari 3.2+ (более полный список)
Но увы и ах, светлое будущее целиком всё никак не наступит и задумываться о поддержке старых браузеров всё же приходится.
Стандартный и самый простой путь, если SVG — это просто картинка: вставляем замещающее содержимое (отрендеренную в PNG картинку и абзац текста) внутрь тега <object>.
Если в браузере поддержки SVG нет, будет показана PNG-картинка и текст, уведомляющий пользователей, что их браузер устарел. Никакого интерактива. Впрочем, он, может быть, не очень-то и нужен. Правда, есть один минус — как я заметил, современные браузеры упорно скачивают себе замещающую png-картинку, несмотря на то, что они её всё равно не отобразят.
Желающие могут воспользоваться детектированием поддержки SVG с помощью Modernizr и наворотить на яваскрипте что-нибудь посложнее.
В более сложных случаях вам могут помочь многочисленные решения на Flash, VML или Canvas (или на всех вместе). Список можно посмотреть здесь: HTML5 Crossbrowser Polyfills, но те решения, которые я опробовал, мне, к сожалению, не помогли. Возможно потому, что тот SVG c CSS’ом, что я набросал на коленке — оказался им не по зубам.
Конвертирование SVG в PNG
В сети есть много мест, где можно конвертнуть SVG-картинку во что-нибудь другое. Я же предложу воспользоваться командой rsvg-convert из пакета librsvg2-bin. Примерно вот так:
Впрочем, она может преобразовывать и в другие форматы, а так же увеличивать/уменьшать картинку, смотрите —help.
Для массовых преобразований можно сочинить команду посложнее или посмотреть примеры в форумной ветке, где я эту команду и нашёл.
Интерактивная карта для сайта на чистом JS
Приветствую, друзья, сегодняшняя тема урока — интерактивная карта на чистом JavaScript. Вы сможете реализовать карту для своего сайта на основе любой картинки. Мы не будем использовать плагины, библиотеки или даже jQuery для этого. Все, что нам нужно, это только программа Inkscape . Её мы будем использовать для определения зон взаимодействия на карте. Подробнее расскажу дальше, а пока давайте начинать!
Интерактивная карта — подготовка к созданию
Для начала, нужно определиться, на основе какого изображения вы будете делать карту. Для примера, сегодня я покажу как создать карту материков. Вы же, как говорилось выше, можете использовать любое изображение для интерактивной карты. Для этой задачи я подобрал вот такую картинку:
Далее необходимо перейти на сайт разработчика Inkscape и скачать программу. Не беспокойтесь, там очень простая установка. Все что нужно делать, это просто кликать «Далее». После этого запускаем программу и нажимаем на «New document». У вас должно открыться новое пустое окно. Далее идем в File > Open и выбираем то изображение, которое и будет служить интерактивной картой для сайта. После всего этого нужно кликнуть на карандаш в панели инструментов слева и обвести ту часть изображения, которая и будет интерактивной (их может быть сколько угодно). В данном случае я выделил Африку и Австралию. Далее в правом меню вам нужно найти кнопку «View and edit XML tree», которая выглядит как лист и код. В ней вы сможете найти ваши элементы и их координаты, которые записаны в атрибуте «d»
HTML разметка
С программой пока все, но не спешите её закрывать, она нам еще пригодится. Теперь перейдем к написанию HTML разметки для карты. Все, что вам нужно сделать, это создать обертку карты, поместить внутри неё картинку и пустой svg тег, как показано ниже
Далее необходимо добавить те обводки, что вы рисовали, на карту. Для этого нужно для каждой обводки скопировать «d» тег, и вставить его в такой же атрибут в теге path. Так же, давайте сразу зададим обводку. Для этого нужно добавить 2 атрибута stroke и stroke-width. В stroke нужно поместить цвет обводки, а в stroke-width — толщину. Пример:
Далее добавим вот такой CSS
Если после этого у вас не совпали обводки с картинкой — не пугайтесь, мы еще не настроили viewBox для нашего svg. Для того, что бы сделать это, идем снова в программу, и делаем все как на картинке ниже:
Это значение нужно вставить в атрибут viewBox тега svg, как на примере ниже:
Добавим интерактивности для карты
Начнем с простого, добавим анимацию для того интерактивного участка, на который пользователь наводит мышью. Ну и уберем черный фон для элементов.
Далее я реализую отображение названия континента при наведении, а так же появление попап окна с подробной информацией о континенте и фото при клике. Это достаточно просто, так что я сразу размещу готовый код с. Кстати, если вы хотите узнать более подробно о том, как делать попап окна на чистом js — ознакомьтесь с этой статьей и уроком.
Интерактивная карта для сайта на чистом JavaScript — результат
Спасибо, что прочитали. Если у вас остались любые вопросы — смело задавайте их в комментариях на YouTube или в нашем Telegram-чате . Так же буду благодарен, если вы ознакомитесь с другими моими статьями:
Creating an interactive SVG map on the web with D3
I was recently approached with a task I was unfamiliar with. It involved painting a SVG map on a webpage with clickable points of interest. The problem was that the user should be able to zoom and pan across the map. I found the information on the internet on this topic rather scarce. Hence I am here, telling you how I solved my problem. If you are the type of person looking for the complete code, see Conclusion.
For the tutorial I recommend using CodePen where the complete solution is hosted or a similar service since we are going to make a very small iterative project. We are not going to be using any frameworks or languages other than Babel to transpile the code.
Basic zooming and panning
First lets add basic HTML layout
Exit fullscreen mode
And style it a litte
Exit fullscreen mode
What we see is a map of Alexander III conquest from Issos to Babylon in French. However we see only a part of the map and on larger screens on the side we get a large portion of red SVG background sticking out. What we want is an experience where the user is able to pan and zoom across the map. However they should not be allowed to get out of the map bounds.
In order to achieve this we need to use D3 library. It includes a lot of utility methods and modules that help you create charts, tables, maps and other interactive experiences on the web using JavaScript and HTML. Many higher level libraries use it as the groundwork. I will not go into detail about library API but rather leave relevant links where possible.
Exit fullscreen mode
Now when we run the code we should be able to pan across the image. But at the moment we are not bound to the image limits and may go outside of the bounds infinitely. To fix this we should use extent configuration for the zoom behaviour.
Scrolling to zoom inside the CodePen iframe seems to not be working on dev.to. Please open the CodePen in a different tab to see it properly.
Exit fullscreen mode
Now we are unable to pan outside the image. However we still see red background on the sides. This is clearly due to the fact that we are zoomed out too far. To fix this we need to make our scaleExtent more accurate.
You may experiment and see that if we remove scaleExtent we would be able to zoom out far enough to fit the whole image in the viewport. In this case translateExtent would not allow us to pan at all since the actual extent of the translate is already reached.
Exit fullscreen mode
At this point it may become clear that I chose a fairly poor image as an example since it too small to really justify the ability to zoom. But you get the point nevertheless!
Congrats! We got what we wanted to achieve. However there is still a thing we need check. What if we want to zoom and pan across multiple elements? Like an image with a few circles over it?
Groups and interactive elements
Let’s add a red circle over our image.
Exit fullscreen mode
Now when we zoom and pan the image the circle always stays at the same place. In our case this circle may mark a place of a significant battle and we want it to be on the map. To fix this we should wrap our image with the circle inside a group g .
Exit fullscreen mode
Now when we pan and zoom the image the circle stays at the same place on the map. Brilliant!
Window resizes
Still, there is a bug left. When you resize the window our scaling and panning brakes! To fix this we need to listen to resize events on window and update our extent properties. this is how our code would look like:
Exit fullscreen mode
Now resize your window and see that after a resize our translate and scale bounds still work properly.
Minimap
I think it would be quite interesting to implement a read-only minimap using the knowledge we just gained. Let’s duplicate our image into a preview group outside the image (so that id does not scale or pan).
Exit fullscreen mode
Now we need to update the code to inject a viewport rectangle into the preview box.
I recommend you try think of a solution yourself before you go ahead!
Exit fullscreen mode
Do not forget to update the width and height of the viewport on window resizes!
Next update the zoomed function to transform both the image and the viewport. It is important to note that the transform we apply in this function is destined for the image. So it does not scale the viewport but the content. The trick is to invert the scale since the amount that the viewport scales is inversely proportial to how the content scales.
Exit fullscreen mode
Profit! Now you have a minimap for your SVG map. Still we can go event further! How about allowing the user to click on a location on the minimap to jump to it?
Clickable minimap
To achieve that add a listener to click event on preview group. When clicked, calculate the position from the top left corner of the minimap. Then divide it by the scale of the minimap to get the position on the actual map. Finally, use this position to move the viewport.
Since we use the translateTo method it would not allow the user to clip out of bounds using the minimap since this method respects extent properties.
Exit fullscreen mode
Check it out! And you can still use the minimap pan around the actual map. If you do not want that call image.call(zoom) instead of svg.call(zoom) . Then zoom will only listen to clicking and dragging over the image but not the minimap.
Conclusion
Hope you found this tutorial useful! If you did, your like on the post would make my day, and if you did not I would appreciate your comment. I should note that you can use any SVG markup as the image in this tutorial. So it is entirely and easily possible to have different points of interest on the image that you might make interactive with popups and etc.
Как сделать интерактивную карту на сайт, без сторонних библиотек. SVG + HTML + CSS + jQuery
В этом видео я показываю, как быстро и просто сделать интерактивную SVG-карту, которая часто используется на сайтах торговых комплексов, на сайтах по продаже квартир и т. д.
На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.
1.6K постов 16.8K подписчика
Правила сообщества
Не забывайте поддерживать авторов плюсами!
— Добавлять нетематические посты, последнее решение за модератором
— Рекламировать какую-либо продукцию в виде постов
— Делится любыми интересными историями, связанными с фрилансом 🙂
На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.
98 лайков за месяц это зашло? Да и комменты сомнительные. Плюс реклама университета, не попадает ли она под запрет сообщества?
Делал недавно интерактивную карту в той же связке, но без использования встраиваемых изображений. В векторном редакторе делается svg c необходимым контуром разделенным на слои (к примеру как в видео контур коровы), затем в html вставляется через тег object и через js обрабатываем как угодно. Хоть hover-ы вешай, хоть стили меняй. Если интересно могу подробней рассказать.
Погоня патруля за самокатчиком
Не успел!
Успокойтесь!
КГБ наносит ответный удар!
ЦРУ начало вербовать россиян через ТГ, записав агитационный ролик (кстати, очень вовремя, учитывая, что теперь грозит до пожизненного за госизмену)
Но Кей Джи Би нанес ответный удар!
Ответ на пост «Паша действует»
В ломбарде часто встречалась с правоохранительными органами по поводу краж, грабежей и прочего.
Однажды принесли ноут, продать. Один из «продавцов» попросил салфетки, мол «руки грязные». Я на это внимания не обратила. Уже договор заполнили и деньги из кассы доставала, как пришли люди по форме с заплаканными мальчишкой со следами побоев. Говорят, что у мальчишки отобрали ноутбук и избили.
Сразу убрала деньги обратно в кассу, порвала договор и указала на этих мужиков, которые потихоньку двигали к выходу. А на стойке салфетка вся в крови. Не знаю, как не заметила этого сначала, должно было насторожить.
Не знаю, чем дело закончилась. Попросила полицейских не приплетать нас к этому.
Финальный экзамен для немецких полицейских собак на сохранение спокойствия перед кошкой (1987)
Ниндзя в Лос-Анджелесе
несколько часов обычные копы не могли взять подозреваемого. Газ и шокеры в его случае не работали. Спецназу помогла только серия светошумовых гранат.
Ответ на пост «Добро пожаловать в США! У них есть»
Всегда голову ломал как свои дробные дюймы считают?
А вот так и считают, прямо вместе с футами, живи теперь с этим!
Мама-кошка и котята пересекают улицу Нью-Йорка, 1925 год
Нашивки летчиков США времен Холодной войны
Такие надписи были на изнанке куртки американских военных лётчиков с просьбами о помощи на разных языках.
Торпеда BMW
Патрульный на Fairfax County Parkway, Вирджиния остановил BMW 7 серии, и пока он разговаривал с водителем, в машину влетела бэха под управлением 17-летнего парня, который не вписался в поворот.
Офицер чудом не пострадал, равно как, водитель М3, и его пассажир — у них незначительные травмы. Водитель семёрки обратился в госпиталь. Пацана ждет лишение за опасное вождение.
УПД
Это повтор, нашел у быдшафера, но там как обычно ни ссылок, ни описания, а из-за плашки предупреждения о баяне нет
Грабители вытащили из дома камеру слежения, которая стала транслировать их жизнь
Двое мужчин в конце марта обокрали дом в Милуоки (Висконсин). В момент ограбления, дом ремонтировали. Воры вынесли из дома инструменты на сумму около $8000 а также камеру видеонаблюдения. Которая на момент преступления была включена. Грабители у себя дома оставили камеру на кухонном столе. Правоохранители пока велось расследование, следили за грабителями более недели. Так, камера зафиксировала беседу между мужчинами, в ходе которой они обсуждали сбыт наркотических веществ.
Риелтор Эрика Виншип из Premier Point Realty поделилась журналистами видео с камеры, снятым через неделю после ограбления. «Мы видим, как люди употребляют наркотики. Мы видим, как люди говорят о том, как они продавали наркотики и куда уходили деньги». Уиншип сказала, что может только предположить, что они не осознают что камера все еще ведет передачу» — сказал Уиншип.
Полиция приехала разнимать драчунов
Он не хотел чтобы его привлекли за превышение полномочий
Видео с нагрудной камеры. Офицер полиции остался жив.
Первая чернокожая женщина в полиции Окленда
Сандра Браун, первая чернокожая женщина в полиции Окленда, получает инструкции по стрельбе из ружья, 1970 г.
Если это не остановит преступность — ничто не остановит!
Бразильская военная полиция, патрулирующая улицы острова Маражо
США нашли секретное отделение полиции КНР в Нью-Йорке, арестовали двух сотрудников, сообщает американский минюст
Федеральная прокуратура в Бруклине предъявила мужчинам обвинения в сговоре с Китайской Народной Республикой и уничтожении улик в связи с китайским полицейским аванпостом в Нижнем Манхэттене.
Прошлой осенью агенты контрразведки ФБР провели обыск на китайском полицейском посту, расположенном на Восточном Бродвее в Чайнатауне.
По данным минюста, арестованные сотрудники полиции КНР распространяли "пропаганду" через фейковые аккаунты в интернете, в том числе о выборах в США.
Еще 34 офицерам полиции КНР предъявили обвинения в преследовании политических активистов за рубежом, в том числе в Нью-Йорке.
Двое мужчин были арестованы рано утром в понедельник по федеральным обвинениям, обвиняющим их в сговоре с целью действовать в качестве агентов Китайской Народной Республики в связи с полицейским аванпостом, который действовал в Китайском квартале Манхэттена, по словам людей, осведомленных в этом вопросе.
Аванпост был одной из более чем 100 операций китайской полиции по всему миру, которые нервировали дипломатов и сотрудников разведки. Этот случай представляет собой первый случай, когда были выдвинуты уголовные обвинения в связи с таким полицейским аванпостом, сказал один из людей.
Дело против 61-летнего Лу Цзянвана и 59-летнего Чэнь Цзиньпина выросло из расследования ФБР и прокуратуры США в Бруклине в отношении заставы в Китайском квартале, которая проводила полицейские операции без юрисдикции или дипломатического одобрения.
Прошлой осенью агенты контрразведки ФБР провели обыск в офисах outpost, расположенных на третьем этаже невзрачного здания на Восточном Бродвее, 107, что указывает на эскалацию глобального спора по поводу усилий Китая по охране своей диаспоры далеко за пределами своих границ.
Официальные лица Ирландии, Канады и Нидерландов призвали Китай прекратить аналогичные операции в своих странах. Рейд ФБР в Нью-Йорке был первым известным примером изъятия властями материалов с одного из аванпостов.
Не удалось сразу определить, были ли у мужчин адвокаты. Мистер Лу, который также известен как Гарри Лу, живет в Бронксе и является натурализованным американским гражданином. Мистер Чен живет на Манхэттене; его гражданство не удалось сразу подтвердить.
В документах налогового управления США за 2018 год г-н Лу был указан как президент некоммерческой организации под названием America Changle Association NY, в офисах которой размещался полицейский аванпост. Характер связи г-на Чена с группой не может быть немедленно определен.
Пресс-секретарь прокуратуры США отказалась от комментариев, а представитель ФБР не сразу ответил на запрос о комментариях.
По словам осведомленных людей, двум мужчинам были предъявлены обвинения в препятствовании правосудию и в уничтожении улик, а также в заговоре с целью действовать в качестве агентов Китайской Народной Республики.
Ожидалось, что обвинения будут объявлены позже в понедельник на пресс-конференции в Бруклине прокурором США Бреоном С. Пис; помощником директора ФБР, который возглавляет нью-йоркское отделение, Майклом Дрисколлом; и высшим должностным лицом Министерства юстиции по национальной безопасности в Вашингтоне Дэвидом Ньюманом.
Когда в январе впервые сообщили об обыске, посольство Китая в Вашингтоне преуменьшило роль постов, заявив, что они укомплектованы добровольцами, которые помогали гражданам Китая выполнять рутинные задачи, такие как продление их водительских прав на родине.
Но "Нью-Йорк таймс" ознакомилась с сообщениями китайских государственных средств массовой информации, в которых полиция и местные китайские чиновники описывали операции совершенно по-разному.
Официальные лица, которых называли поименно, превозносили эффективность офисов, часто называемых центрами обслуживания зарубежной полиции. В некоторых отчетах аванпосты описывались как “собирающие разведданные” и раскрывающие преступления за рубежом без участия местных чиновников.
Эти публичные заявления оставили неясным, кто именно руководил офисами. В некоторых случаях они были описаны как возглавляемые добровольцами; в других — сотрудниками.
Малолетний агрессор. Как наказать?
Нужен совет юриста, полицейского, психолога.
Ситуация: моя племянница, 12 лет, возвращалась домой. Болтала с подружкой по телефону. Сказала подружке фразу «Ты что, совсем уже?»
Рядом с домом играли две незнакомые девочки примерно такого же возраста. Они решили, что сказанная по телефону фраза относится к ним, и пристали к племяннице. Одна из девочек стала хватать ее за руки, ударила по животу. Племянница кричала «отпусти, что я тебе сделала то?», но нападавшая девочка не отставала. Племянница попыталась вырваться, но нападавшая девочка ее догнала, и поставила подножку.
Просматривая записи с камер, мы внимательно изучили момент падения: нападавшая не просто поставила подножку, не просто бросила на землю, но держала племянницу таким образом, чтобы она не могла сгруппироваться и смягчить последствия падения. В действиях нападавшей видно, что движение умелое, — отточеное, оттренированное.
Когда о случившему узнал брат, он позвонил в полицию с вопросом: что делать? Ему сказали связаться с родителями девочки. Он подошел к девочке, и попросил позвонить родителям. Та вначале заявляла, что родителей у нее нет, потом — что нет телефона. Брат предложил позвонить с его телефона, она заявила, что не знает номера. В итоге ей на телефон позвонили, она поняла, что врать бесполезно, и позвонила отцу. Передала трубку брату, тот объяснил ситуацию, отец девочки пообещал подойти. Брат, на всякий случай, запомнил номер, на который звонила девочка.
Ждали-ждали, никто не пришел.
Брат повез племянницу в травпункт, в итоге ее положили в больницу с предварительным диагнозом «перелом позвоночника».
Возвращаясь с больницы, брат заехал в полицию, написал заявление. Указал номер телефона родителей нападавшей девочки. Его опросила инспектор по делам несовершеннолетних, сразу сказала ему, что никакого дела не будет, потому что нападавшая — слишком маленькая, и возраста ответственности не достигла.
Затем он обратился в ТСЖ, там ему помогли снять записи с камер наблюдения на доме. С нескольких ракурсов, одна запись даже со звуком.
На записях четко видно и слышно, что племянница идет, девочки ее окрикивают, она четко отвечает «Это не тебе», после чего на нее нападают. Племянница пытается вырвать руки и убежать, но ее хватают, бьют, а потом и роняют на спину.
Брат разговаривал с подружкой племянницы (при ее родителях, конечно). Она подтвердила что в разговоре не было ни матов, ни оскорблений, племяшка реально сказала «ты что, совсем уже?» а потом «Это не тебе», а потом «Ой, тут ко мне лезут»).
Также выяснилось, что нападавшая девочка — местная знаменитость, ее знают в соседних дворах, она живет в соседнем доме и часто бьёт там детей, у нее даже есть прозвище «бешеная сука». Поговаривают, что ее дома бьет отчим, а кто-то из детей даже рассказал, что видел ее с символикой «Редан» (есть такое опасное подростковое движение в Новосибирске).
Брат позвонил инспектору по делам несовершеннолетних, предложил привезти записи, но получил ответ, что записи не нужны, дела никакого не будет, поскольку нападавшая — малолетняя.
Через какое-то время ему позвонила инспектор, пригласила за Постановлением об отказе в возбуждении дела. В Постановлении сказано, что в действиях нападавшей содержаться признаки преступления, но в силу малолетства привлекать к ответственности не будут.
Брат спросил, неужели ничего не будет сделано, неужели с родителями девочки даже разговор не будет проведён, на что ему ответили, что нападавшая — малолетняя, на учете не состоит. Он спросил, не поставят ли ее на учет — инспектор сказала, что не будет этим заниматься.
Также, брат ознакомился с материалами дела. Там было объяснение нападавшей девочки: она заявила, что они мирно играли, пока их не обложили матом, и она нее решила «разобраться и наказать». Про «обложили матом» она соврала, конечно — напомню, есть записи со звуком, там четко слышно, кто и что кому сказал.
Еще в материалах дела была характеристика на нападавшую, выданная школой. О, это отдельная песня. Судя по характеристике, на нападавшей пробу стоить негде. Она:
— систематически инициирует конфликты с одноклассниками и другими учащимися школы,
— выражается нецензурной бранью,
— часто применяет физическую силу к детям,
— предпочитает конфликтовать за пределами школы, — не имеет ценностных ориентиров,
— с ее матерью систематически проводятся беседы по поводу поведения (силами классного руководителя, директора, социального педагога, завуча), но это не дает результаты.
Тогда брат сходил на консультацию к юристу. Тот сказал, что существует судебная практика, в силу которой за подобное поведение детей ставят на учет, а родителей —
привлекают к административной ответственности за неисполнение обязанностей по воспитанию ребенка. Юрист порекомендовал брату обратиться в комиссию по делам несовершеннолетних -мол, пусть ставят на учет, хоть нападать на других не будет. Юрист дал вот такую практику.
Решение Одоевского районного суда Тульской области от 11 июля 2021 г. по делу № 12-34/2021: «… В соответствии с ч.1 ст.5.35 КоАП РФ неисполнение или ненадлежащее исполнение родителями или иными законными представителями несовершеннолетних обязанностей по содержанию, воспитанию, обучению, защите прав и интересов несовершеннолетних влечет предупреждение или наложение административного штрафа в размере от ста до пятисот рублей.
Объектом административного правонарушения рассматриваемой категории являются общественные отношения, связанные с правами и защитой интересов несовершеннолетних.
Объективная сторона ч.1 ст.5.35 КоАП РФ характеризуется невыполнением родителями и иными лицами своих обязанностей по воспитанию и обучению детей – заботы о нравственном воспитании, физическом развитии детей и укреплении их здоровья, создании необходимых условий для своевременного получения ими образования, успешного обучения и т.д.
Как усматривается из материалов дела, <данные изъяты>, привлечена к административной ответственности за ненадлежащее исполнение своих родительских обязанностей по воспитанию несовершеннолетнего сына <данные изъяты>, а именно: вследствие недостаточного контроля матери за поведением своего несовершеннолетнего сына и его воспитания, последний 12 марта 2021 года примерно в 12 часов 00 минут около <адрес> в <адрес>, подверг избиению своего одноклассника, несовершеннолетнего <данные изъяты>, 15 апреля 2010 года, нанеся ему телесные повреждения, имеющие признаки легкого вреда здоровью»
Еще брат пару раз видел нападавшую девочку на лице возле дома, та была без шапки, хотя у нас в Новосибирске еще минусовые температуры. То есть, есть подозрение, что за девочкой не очень хорошо присматривают.
Брат сходил в администрацию, на комиссию. Там была инспектор ПДН. Она сказала комиссии, что знает эту девочку, и что ее всего 11 лет, поэтому рано ставить ее на учет.
Брат рассказал все, что знает — и что рассказывают про девочку, и что видел ее без шапки. Ему сказали «не ваше дело. А судебная практика нас не касается».
И брату, и мне сложившаяся ситуация кажется опасной.
Фактически, полиция знает, что есть девочка, чье поведение асоциально. Что из этой девочки может вырасти преступница. И самое правильное, что полиция может сейчас делать — это поставить девочку на учет, провести профилактическую работу. Может, еще в человека воспитают?
Но почему-то полиция этого не делает.
Вопрос: а что можно с этим сделать? Куда жаловаться, куда писать?
Будет ли законно, если брат напишет о случившему в школу, где учится нападавшая девочка? Может, хоть там с ней профилактическую работу проведут?
Законно ли будет, если о случившемся в местных чатах написать? Родители соседних домов расскажут детям о «бешеной суке», может, это их спасет?
Что еще можно сделать?
Кто знает, ставят ли на учет в 11 лет? Возможно, есть судебная практика на этот счет?