Skip to content
GitLab
Commit 10ec554b authored by Kachina Natalia's avatar Kachina Natalia
Browse files

карта и стили

parent 2b960c8e
master
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 4583 additions and 517 deletions
+4583 -517
g-map.html 0 → 100644
+ 409
- 0
View file @ 10ec554b
<!doctype html>
<html lang="ru">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions Service (Complex)</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
const $mapMenu = $('#map-menu'),
$mapInfo = $('#map-info'),
markers = [
{
color: '#5f4643',
objects: [
{
lat: 56.3181658,
lng: 43.9908674,
title: 'Большая Покровская улица',
iconUrl: '/uploads/workshops/projects/flanders19/img/map_icon_0_0.png',
imageUrl: '/uploads/workshops/projects/flanders19/img/map_photo_0_0.jpg',
desc: '<p>Стартуем на главной пешеходной улице города. Здесь сосредоточено множество кафе, ресторанов и баров. Приходи сюда послушать уличных музыкантов, купить сувениры и зарядиться беззаботным настроением.</p>'
},
{
lat: 50.82727113,
lng: 4.35778792,
title: 'Особняк P. Hankar',
iconUrl: '/uploads/workshops/projects/flanders19/img/map_icon_0_1.png',
imageUrl: '/uploads/workshops/projects/flanders19/img/map_photo_0_1.jpg',
desc: '<p>Архитектор Пол Анкар быстро завоевал признание, привнеся японские мотивы в развитие стиля модерн. Особняк П. Анкара был построен в 1893 году. Фасад знакового для творчества архитектора дома отличает инновационный дизайн, символизирующий разрыв с традиционной архитектурой.</p>',
pageDetailUrl: 'https://visit.brussels/site/en/place/Maison-P-Hankar'
},
{
lat: 50.82785021,
lng: 4.35970535,
title: 'Особняк A. Ciamberlani',
iconUrl: '/uploads/workshops/projects/flanders19/img/map_icon_0_2.png',
imageUrl: '/uploads/workshops/projects/flanders19/img/map_photo_0_2.jpg',
desc: '<p>Особняк А. Чиамберлани — творение архитектора Анкара, которое было построено в 1897 году. Отличительная черта особняка — сочетание различных материалов: кованые элементы из стали, кирпич и натуральный камень использованы в оформлении фасада здания.</p>',
pageDetailUrl: 'https://visit.brussels/site/en/place/Hotel-Ciamberlani'
},
{
lat: 50.82960658,
lng: 4.35962726,
title: 'Особняк Otlet',
iconUrl: '/uploads/workshops/projects/flanders19/img/map_icon_0_3.png',
imageUrl: '/uploads/workshops/projects/flanders19/img/map_photo_0_3.jpg',
desc: '<p>Особняк Отле был построен архитектором О. Ван Риссельберге по заказу г-на Отле в 1984 году. В своей работе архитектор полностью отказался от традиционных архитектурных приемов, но сохранил некоторые из принципов итальянского ренессанса.</p>',
pageDetailUrl: 'https://visit.brussels/site/en/place/Maison-Otlet'
},
{
lat: 50.82779389,
lng: 4.36197095,
title: 'Особняк Tassel',
iconUrl: '/uploads/workshops/projects/flanders19/img/map_icon_0_4.png',
imageUrl: '/uploads/workshops/projects/flanders19/img/map_photo_0_4.jpg',
desc: '<p>Особняк Тассель, внесенный в список Всемирного наследия ЮНЕСКО, сочетает в себе множество эстетических и практических аспектов стиля ар-нуво. Стоить обратить внимание на сужающиеся боковые и расширяющиеся центральные окна — значимая деталь, демонстрирующая важность гармонии.</p>',
pageDetailUrl: 'https://visit.brussels/site/en/place/Tassel-Hotel'
},
{
lat: 50.82635731,
lng: 4.36541384,
title: 'Особняк Solvay House',
iconUrl: '/uploads/workshops/projects/flanders19/img/map_icon_0_5.png',
imageUrl: '/uploads/workshops/projects/flanders19/img/map_photo_0_5.jpg',
desc: '<p>Роскошный городской особняк «Солвей Хаус» был построен Виктором Орта в 1894 году для сына известного промышленника Эрнеста Солвея. Архитектор получил полный карт-бланш на воплощение своих представлений о красоте и функциональности, что отразилось на интерьере и мебели в доме, спроектированной самим Орта.</p>',
pageDetailUrl: 'https://visit.brussels/site/en/place/Solvay-House'
}
]
},
}
var waypts = [
{
location: new google.maps.LatLng(56.3297724, 44.0003789),
stopover: true
},
{
location: new google.maps.LatLng(56.328171, 44.0042404),
stopover: true
},
{
location: new google.maps.LatLng(56.3304633, 44.0072506),
stopover: true
},
{
location: new google.maps.LatLng(56.3278669, 44.0208546),
stopover: true
},
{
location: new google.maps.LatLng(56.3273042, 43.982859),
stopover: true
},
{
location: new google.maps.LatLng(56.3251822, 43.9602989),
stopover: true
}
];
data = [
[
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#e9e9e9"
},
{
"lightness": 17
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
},
{
"lightness": 20
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 16
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
},
{
"lightness": 21
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#dedede"
},
{
"lightness": 21
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
},
{
"lightness": 16
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#333333"
},
{
"lightness": 40
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#f2f2f2"
},
{
"lightness": 19
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#fefefe"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#fefefe"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
}
]
];
var directionsService = new google.maps.DirectionsService;
var directionsRenderer = new google.maps.DirectionsRenderer;
// Create a map and center it on Manhattan.
var map = new google.maps.Map(document.getElementById('map'), {});
directionsRenderer.setMap(map);
// Create a renderer for directions and bind it to the map.
// Instantiate an info window to hold step text.
var stepDisplay = new google.maps.InfoWindow;
// Display the route between the initial start and end selections.
calculateAndDisplayRoute(
directionsRenderer, directionsService, waypts, stepDisplay, map);
}
function calculateAndDisplayRoute(directionsRenderer, directionsService,
waypts, stepDisplay, map) {
// First, remove any existing markers from the map.
directionsService.route({
origin: new google.maps.LatLng(56.3181658, 43.9908674),
destination: new google.maps.LatLng(56.3295369, 43.8551764),
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'WALKING'
}, function (response, status) {
if (status === 'OK') {
directionsRenderer.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
let route = theme = data[0];
map.setOptions({
styles: theme,
});
console.log(theme);
function initMap() {
let route = markers[0].objects,
color = markers[0].color,
theme = data[0],
l = route.length - 1,
points = route.map(function (obj) {
return {
location: {
lat: obj.lat,
lng: obj.lng
}
}
}),
start = {
lat: route[0].lat,
lng: route[0].lng
},
finish = {
lat: route[l].lat,
lng: route[l].lng
};
}
function _setRoute(start, finish, points, color) {
directionsDisplay.setOptions({
suppressMarkers: true,
polylineOptions: {
strokeColor: color,
// strokeOpacity: .66,
strokeWeight: 3
}
});
function _setMarkers(markers) {
let infowindow = null;
activeMarkers.forEach(function(marker) {
marker.setMap(null);
});
activeMarkers = [];
markers.forEach(function(point, i) {
const coordinates = {lat: point.lat, lng: point.lng},
image = point.iconUrl,
popupContent = '<h1><a href="' + point.pageDetailUrl + '" target="_blank">' + point.title + '</a></h1>' +
'<img src="' + point.imageUrl + '" alt="">' +
'<p>' + point.desc + '</p>';
let marker = new google.maps.Marker({
position: coordinates,
map: map,
icon: image
});
activeMarkers.push(marker);
marker.addListener('click', function() {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: popupContent
});
infowindow.open(map, marker);
}, false, false);
});
map.addListener('click', function() {
if (infowindow) {
infowindow.close();
}
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBGE-84fB5nRRSmwLM1a7Sx6A75vH-g4M&callback=initMap"></script>
</body>
\ No newline at end of file
main.js deleted 100644 → 0
+ 0
- 517
View file @ 2b960c8e
const $mapMenu = $('#map-menu'),
$mapInfo = $('#map-info'),
markers = [
{
title: 'Шедевры ар-нуво и ар-деко',
desc: 'Конец XIX века — расцвет ар-нуво в Брюсселе. Стиль, доминирующий в искусстве до 1920 года, проявился не только в архитектуре, но также в дизайне мебели, предметов декора и ювелирном искусстве. После Первой мировой войны изящность и плавность линий стиля ар-нуво уступила место геометричности и абстрактности ар-деко. Этот маршрут включает в себя настоящие шедевры обоих стилей.',
color: '#dc508d',
objects: [
{
lat: 50.82090346,
lng: 4.35220579,
title: 'Особняк Hannon',
iconUrl: '/uploads/workshops/projects/flanders19/img/map_icon_0_0.png',
imageUrl: '/uploads/workshops/projects/flanders19/img/map_photo_0_0.jpg',
desc: '<p>Особняк Аннон — настоящий шедевр, построенный в стиле ар-нуво архитектором Жюлем Бруфо по заказу инженера Эдуарда Аннона в 1902 году.</p>',
pageDetailUrl: 'https://visit.brussels/site/en/place/Hotel-Hannon'
},
{
lat: 50.84283199,
lng: 4.35068231,
title: 'Комик-стрип Stam & Pilou',
iconUrl: '/uploads/workshops/projects/flanders19/img/map_icon_3_14.png',
imageUrl: '/uploads/workshops/projects/flanders19/img/map_photo_3_5.jpg',
desc: '<p>Стэм (балансирует на табуретке) и его подруга Пилу (сидит у Стэма на голове) постоянно попадают в комичные ситуации. Интересный факт — знак, который держит дедушка Фонс, гласит — «Sprekt a mooiertoêl!», что на брюссельском диалекте означает «говорите на своем родном языке».</p>',
pageDetailUrl: 'https://visit.brussels/site/en/place/Stam-Pilou-Comic-Strip-Wall'
}
]
},
],
data = [
[
{
"featureType": "administrative",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
// "color": "#424241"
"color": "#ffffff"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
// {
// // "weight": "7"
// },
// {
// // "color": "#fdec06"
// }
]
},
{
"featureType": "administrative.province",
"elementType": "labels.text.fill",
"stylers": [
{
// "color": "#424241"
"color": "#ffffff"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
// "color": "#424241"
"color": "#ffffff"
},
{
"weight": "1.00"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
// {
// // "color": "#fdec06"
// },
// {
// // "weight": "10.00"
// }
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [
{
// "color": "#424241"
"color": "#ffffff"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
// {
// // "color": "#fdec06"
// },
// {
// // "weight": "7.00"
// }
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#424241"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
// {
// // "color": "#fdec06"
// },
// {
// "gamma": "7"
// },
// {
// // "weight": "10.00"
// }
]
},
{
"featureType": "landscape",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#70b584"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#93c7a2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#53a988"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#75c4e3"
}
]
}
],
];
let activeMarkers = [];
function initMap() {
let route = markers[0].objects,
color = markers[0].color,
theme = data[0],
l = route.length - 1,
points = route.map(function(obj) {
return {
location: {
lat: obj.lat,
lng: obj.lng
}
}
}),
start = {
lat: route[0].lat,
lng: route[0].lng
},
finish = {
lat: route[l].lat,
lng: route[l].lng
};
const map = new google.maps.Map(document.getElementById('map-route'), {
disableDefaultUI: true
}),
directionsService = new google.maps.DirectionsService(),
directionsDisplay = new google.maps.DirectionsRenderer();
function _setRoute(start, finish, points, color) {
directionsDisplay.setOptions({
suppressMarkers: true,
polylineOptions: {
strokeColor: color,
// strokeOpacity: .66,
strokeWeight: 7
}
});
const request = {
origin: new google.maps.LatLng(start),
destination: new google.maps.LatLng(finish),
waypoints: points,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map);
}
function _setMarkers(markers) {
let infowindow = null;
activeMarkers.forEach(function(marker) {
marker.setMap(null);
});
activeMarkers = [];
markers.forEach(function(point, i) {
const coordinates = {lat: point.lat, lng: point.lng},
image = point.iconUrl,
popupContent = '<h1><a href="' + point.pageDetailUrl + '" target="_blank">' + point.title + '</a></h1>' +
'<img src="' + point.imageUrl + '" alt="">' +
'<p>' + point.desc + '</p>';
let marker = new google.maps.Marker({
position: coordinates,
map: map,
icon: image
});
activeMarkers.push(marker);
marker.addListener('click', function() {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: popupContent
});
infowindow.open(map, marker);
}, false, false);
});
map.addListener('click', function() {
if (infowindow) {
infowindow.close();
}
});
}
map.setOptions({
styles: theme,
});
_setRoute(start, finish, points, color);
_setMarkers(route);
$mapInfo.html('<h1>' + markers[0].title + '</h1>' + markers[0].desc);
$mapMenu
.on('click', 'a', function() {
console.log(data.length);
const id = $(this).data('id') || 0,
route = markers[id].objects,
color = markers[id].color,
theme = data.length > 1 ? data[id] : data[0],
l = route.length - 1,
points = route.map(function(obj) {
return {
location: {
lat: obj.lat,
lng: obj.lng
}
}
}),
start = {
lat: route[0].lat,
lng: route[0].lng
},
finish = {
lat: route[l].lat,
lng: route[l].lng
};
$('.active', $mapMenu).removeClass('active');
$(this).addClass('active');
map.setOptions({
styles: theme,
});
_setRoute(start, finish, points, color);
_setMarkers(route);
$mapInfo.html('<h1>' + markers[id].title + '</h1><p>' + markers[id].desc + '</p>');
return false;
});
}
\ No newline at end of file
map-old.html 0 → 100644
+ 1946
- 0
View file @ 10ec554b
This diff is collapsed.
map.css deleted 100644 → 0
+ 0
- 0
View file @ 2b960c8e
map.js 0 → 100644
+ 1895
- 0
View file @ 10ec554b
This diff is collapsed.
index.html → other.html
+ 333
- 0
View file @ 10ec554b
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment