Как реализовать данную карту, при наведении менять цвет страны а при нажатии ставить метку и естественно отдавать какой-то параметр на бекэнд, мои предположения это svg карта плюс js, но опять опыта реализации нет? Подскажите как реализовать или же если я правильно думаю то ткните на хорошую статью. Заранее спасибо!)
-
Зачем предполагать, когда можно посмотреть с помощью чего это сделано в Firebug/WebInspector?– OceinicCommented 26 сент. 2015 в 6:12
-
В смысле? Это же скрин макета)– Николай БаташовCommented 27 сент. 2015 в 11:20
-
Примеры карт с использованием d3.js: octoperf.com/blog/2018/04/17/… bl.ocks.org/micahstubbs/8e15870eb432a21f0bc4d3d527b2d14f– finCommented 26 мар. 2019 в 16:25
3 ответа
Эта задача полностью решается через API Яндекс.Карт. По пунктам:
Добавить страны мира на карту и раскрасить их можно через модуль Регионы. Пример в песочнице Яндекса и пример на jsfiddle, где сделана карта мира без подложки.
ymaps.regions.load('001', { lang: 'ru', quality: 1 }).then(function (result) { var regions = result.geoObjects; map.geoObjects.add(regions); }, function () { alert('No response'); });
Обрабатывать клики по полигонам стран можно через систему событий, пример есть в этой статье документации.
По клику также можно ставить метку в точку клика, вот так:
myMap.events.add('click', function (e) { var coords = e.get('coords'); myMap.geoObjects.add(new ymaps.Placemark(coords)) });
Подробно решение с помощью API Яндекс.Карт рассмотрено в этом вопросе: Как сделать интерактивную карту мира без подписей / контурную карту
Можно реализовать с помощью Google Maps.
Вам нужно будет найти координаты полигонов в raw формате (если Вы желаете использовать kml формат, помните, что он умеет обрабатывать только click событие).
Далее нужно создать полигоны, как, можно найти в поиске: Google Maps Polygon Example
Объект Polygon умеет обрабатывать нужные Вам события (click, mouseover, ...), нужно только назначить Ваш обработчик, документацию можно найти в поиске: Google Maps Polygon Options
Оформление можно сделать с помощью Google Maps Wizard
P.S. Для вставки ссылок не хватает рейтинга
Можно использовать замечательную JS библиотеку для карт – LeafletJS. Вот и урок по созданию карты как вы хотите – называется Interactive Choropleth Map