Часто на сайте нужно сделать карту города с обозначением границы этого самого города. Самый просто способ воспользоваться конструктором карт от Яндекса или Google. И разместить эту карту на сайте.
Но что, если городов, с которыми требуется произвести данную манипуляцию много, (определите сами сколько это много, как долго вы готовы создавать карты в конструкторе к каждому городу).
Для большого количества городов можно воспользоваться openstreetmap.org.
Что нам потребуется:
Начнем:
<div id="map" style="width:100%;height: 400px;"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&coordorder=longlat" type="text/javascript"></script>
При загрузке YandexMap следует указать coordorder, это требуется потому что openstreetmap присылает широту и долготу в обратном порядке. Можно конечно пройти весь присылаемый массив и поменять координаты местами, но проще загрузить YandexMap, учитывая данный момент.
<script>
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [37.617635, 55.755814],
zoom: 11
}, {
searchControlProvider: "yandex#search"
}
);
//Расположим метку на карте(если это требуется)
var object_service = [{name: "Москва",center: [37.617635, 55.755814]}];
collection = new ymaps.GeoObjectCollection(null, { preset: "islands#greenIcon" });
myMap.geoObjects.add(collection);
for (var i = 0, l = object_service.length; i < l; i++) {
createPlacemark(object_service[i], collection);
}
function createPlacemark(item, collection){
placemark = new ymaps.Placemark(item.center, { balloonContent: item.name });
collection.add(placemark);
}
//Запросим у openstreetmap полигон, для от рисовки на карте
var url = "http://nominatim.openstreetmap.org/search";
$.getJSON(url, {q: "Москва, Россия", format: "json", polygon_geojson: 1}).then(function (data) {
console.log(data);
$.each(data, function(ix, place) {
if ("relation" == place.osm_type && "place" == place.class) {
if(place.geojson.type == "MultiPolygon"){//Если openstreetmap прислал множество полигонов
place.geojson.coordinates.forEach(function(item, i) {
myMap.geoObjects.add(new ymaps.Polygon(item));
});
}else{//Если openstreetmap один полигон
var p = new ymaps.Polygon(place.geojson.coordinates);
myMap.geoObjects.add(p);
}
}
});
//отцентруем полигоны и метки чтобы они все помещались на видимую часть карты
myMap.setBounds(myMap.geoObjects.getBounds(),{checkZoomRange: true});
}, function (err) {
console.log(err);
});
}
</script>
Результат работы:
Естественно у openstreetmap можно получить множество других данных для отображения на карте, и немного модифицировав данный скрипт вы сможете отобразить полученную информацию, повысив интерактивность вашего сайта.
З.Ы. А еще мы пишем много полезной информации в блоге Стократ. Добро пожаловать.
