mirror of
https://github.com/medialab-prado/datamad2017.git
synced 2024-12-26 20:51:22 +01:00
Pequeños ajustes y limpieza
This commit is contained in:
alay
parent
42596cea37
commit
c29c199642
2 changed files with 11 additions and 302 deletions
311
js/scripts.js
311
js/scripts.js
|
|
@ -268,15 +268,22 @@
|
||||||
|
|
||||||
//Openstreetmap with leaflet
|
//Openstreetmap with leaflet
|
||||||
|
|
||||||
var map = L.map('canvas-map-osm', {
|
var mapOptions ={
|
||||||
center: [40.41161,-3.69406],
|
|
||||||
zoomControl: false,
|
zoomControl: false,
|
||||||
scrollWheelZoom: false,
|
scrollWheelZoom: false,
|
||||||
zoom: 18,
|
zoom: 18,
|
||||||
minZoom: 18,
|
minZoom: 18,
|
||||||
maxZoom: 18,
|
maxZoom: 18,
|
||||||
dragging: false
|
dragging: false
|
||||||
});
|
}
|
||||||
|
|
||||||
|
if ($(window).width() < 768) {
|
||||||
|
mapOptions.center = [40.41172,-3.69406];
|
||||||
|
}else{
|
||||||
|
mapOptions.center = [40.41063,-3.69366];
|
||||||
|
};
|
||||||
|
|
||||||
|
var map = L.map('canvas-map-osm', mapOptions);
|
||||||
|
|
||||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
|
@ -301,303 +308,5 @@
|
||||||
$('#canvas-map').addClass('image-section').css('background-image','url(https://maps.googleapis.com/maps/api/staticmap?zoom=17¢er=' + mobileCenterMapCoordinates +'&size=' + $(window).width() + 'x700&scale=2&language=en&markers=icon:' + icon +'|'+ eventPlaceCoordinates +'&maptype=roadmap&style=visibility:on|lightness:40|gamma:1.1|weight:0.9&style=element:labels|visibility:off&style=feature:water|hue:0x0066ff&style=feature:road|visibility:on&style=feature:road|element:labels|saturation:-30)');
|
$('#canvas-map').addClass('image-section').css('background-image','url(https://maps.googleapis.com/maps/api/staticmap?zoom=17¢er=' + mobileCenterMapCoordinates +'&size=' + $(window).width() + 'x700&scale=2&language=en&markers=icon:' + icon +'|'+ eventPlaceCoordinates +'&maptype=roadmap&style=visibility:on|lightness:40|gamma:1.1|weight:0.9&style=element:labels|visibility:off&style=feature:water|hue:0x0066ff&style=feature:road|visibility:on&style=feature:road|element:labels|saturation:-30)');
|
||||||
}
|
}
|
||||||
|
|
||||||
//Google maps
|
|
||||||
if (typeof googleMaps !== 'undefined') {
|
|
||||||
var trap, autocomplete, directionsDisplay, geocoder, polyline, origin;
|
|
||||||
var markers = [];
|
|
||||||
var directionsService = new google.maps.DirectionsService();
|
|
||||||
var MY_MAPTYPE_ID = 'custom_style';
|
|
||||||
|
|
||||||
function initialize() {
|
|
||||||
directionsDisplay = new google.maps.DirectionsRenderer({
|
|
||||||
suppressMarkers: true
|
|
||||||
});
|
|
||||||
geocoder = new google.maps.Geocoder();
|
|
||||||
|
|
||||||
polyline = new google.maps.Polyline({
|
|
||||||
strokeColor: '#03a9f4',
|
|
||||||
strokeOpacity: 1,
|
|
||||||
strokeWeight: 2
|
|
||||||
});
|
|
||||||
|
|
||||||
var defaultOpts = [{
|
|
||||||
stylers: [{
|
|
||||||
lightness: 40
|
|
||||||
}, {
|
|
||||||
visibility: 'on'
|
|
||||||
}, {
|
|
||||||
gamma: 0.9
|
|
||||||
}, {
|
|
||||||
weight: 0.4
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
elementType: 'labels',
|
|
||||||
stylers: [{
|
|
||||||
visibility: 'on'
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
featureType: 'water',
|
|
||||||
stylers: [{
|
|
||||||
color: '#5dc7ff'
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
featureType: 'road',
|
|
||||||
stylers: [{
|
|
||||||
visibility: 'off'
|
|
||||||
}]
|
|
||||||
}];
|
|
||||||
|
|
||||||
var zoomedOpts = [{
|
|
||||||
stylers: [{
|
|
||||||
lightness: 40
|
|
||||||
}, {
|
|
||||||
visibility: 'on'
|
|
||||||
}, {
|
|
||||||
gamma: 1.1
|
|
||||||
}, {
|
|
||||||
weight: 0.9
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
elementType: 'labels',
|
|
||||||
stylers: [{
|
|
||||||
visibility: 'off'
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
featureType: 'water',
|
|
||||||
stylers: [{
|
|
||||||
color: '#5dc7ff'
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
featureType: 'road',
|
|
||||||
stylers: [{
|
|
||||||
visibility: 'on'
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
featureType: 'road',
|
|
||||||
elementType: "labels",
|
|
||||||
stylers: [{
|
|
||||||
saturation: -30
|
|
||||||
}]
|
|
||||||
}];
|
|
||||||
|
|
||||||
var mapOptions = {
|
|
||||||
zoom: 17,
|
|
||||||
minZoom: 2,
|
|
||||||
scrollwheel: false,
|
|
||||||
panControl: false,
|
|
||||||
draggable: true,
|
|
||||||
zoomControl: false,
|
|
||||||
zoomControlOptions: {
|
|
||||||
position: google.maps.ControlPosition.RIGHT_TOP
|
|
||||||
},
|
|
||||||
scaleControl: false,
|
|
||||||
mapTypeControl: false,
|
|
||||||
streetViewControl: false,
|
|
||||||
center: centerMap,
|
|
||||||
mapTypeControlOptions: {
|
|
||||||
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
|
|
||||||
},
|
|
||||||
mapTypeId: MY_MAPTYPE_ID
|
|
||||||
};
|
|
||||||
if ($(window).width() < 768) {
|
|
||||||
mapOptions.center = mobileCenterMap;
|
|
||||||
}
|
|
||||||
if (googleMaps == 'logistics') {
|
|
||||||
mapOptions.zoom = 5;
|
|
||||||
mapOptions.zoomControl = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);
|
|
||||||
var marker = new google.maps.Marker({
|
|
||||||
position: eventPlace,
|
|
||||||
animation: google.maps.Animation.DROP,
|
|
||||||
icon: icon,
|
|
||||||
map: map
|
|
||||||
});
|
|
||||||
markers.push(marker);
|
|
||||||
var defaultMapOptions = {
|
|
||||||
name: 'Default Style'
|
|
||||||
};
|
|
||||||
var zoomedMapOptions = {
|
|
||||||
name: 'Zoomed Style'
|
|
||||||
};
|
|
||||||
var defaultMapType = new google.maps.StyledMapType(defaultOpts, defaultMapOptions);
|
|
||||||
var zoomedMapType = new google.maps.StyledMapType(zoomedOpts, zoomedMapOptions);
|
|
||||||
map.mapTypes.set('default', defaultMapType);
|
|
||||||
map.mapTypes.set('zoomed', zoomedMapType);
|
|
||||||
if (googleMaps === 'logistics') {
|
|
||||||
map.setMapTypeId('default');
|
|
||||||
var input = (document.getElementById('location-input'));
|
|
||||||
autocomplete = new google.maps.places.Autocomplete(input);
|
|
||||||
google.maps.event.addListener(autocomplete, 'place_changed', function() {
|
|
||||||
marker.setVisible(false);
|
|
||||||
var place = autocomplete.getPlace();
|
|
||||||
if (place.geometry == 'undefined' || !place.geometry) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var address = '';
|
|
||||||
if (place.address_components) {
|
|
||||||
address = [
|
|
||||||
(place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
|
|
||||||
].join(' ');
|
|
||||||
}
|
|
||||||
geocoder.geocode({
|
|
||||||
'address': address
|
|
||||||
}, function(results, status) {
|
|
||||||
if (status == google.maps.GeocoderStatus.OK) {
|
|
||||||
origin = results[0].geometry.location;
|
|
||||||
calcRoute(origin, 'TRANSIT');
|
|
||||||
} else {
|
|
||||||
alert('Geocode was not successful for the following reason: ' + status);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
|
||||||
map.setMapTypeId('zoomed');
|
|
||||||
}
|
|
||||||
|
|
||||||
function calcRoute(origin, selectedMode) {
|
|
||||||
var request = {
|
|
||||||
origin: origin,
|
|
||||||
destination: eventPlace,
|
|
||||||
travelMode: google.maps.TravelMode[selectedMode]
|
|
||||||
};
|
|
||||||
directionsService.route(request, function(response, status) {
|
|
||||||
if (status == google.maps.DirectionsStatus.OK) {
|
|
||||||
map.setMapTypeId('zoomed');
|
|
||||||
directionsDisplay.setMap(map);
|
|
||||||
directionsDisplay.setDirections(response);
|
|
||||||
var leg = response.routes[0].legs[0];
|
|
||||||
makeMarker(leg.start_location);
|
|
||||||
makeMarker(leg.end_location);
|
|
||||||
$('#distance').text(leg.distance.text);
|
|
||||||
$('#estimateTime').text(leg.duration.text);
|
|
||||||
$('#mode-select').val(selectedMode);
|
|
||||||
$('#mode').removeClass('hidden');
|
|
||||||
var attribute = $('#mode-icon use').attr('xlink:href');
|
|
||||||
attribute = attribute.substring(0, attribute.indexOf('#') + 1) + 'icon-' + selectedMode.toLowerCase();
|
|
||||||
$('#mode-icon use').attr('xlink:href', attribute);
|
|
||||||
} else if (status != google.maps.DirectionsStatus.OK && selectedMode != 'DRIVING') {
|
|
||||||
calcRoute(origin, 'DRIVING');
|
|
||||||
} else {
|
|
||||||
var path = polyline.getPath();
|
|
||||||
path.push(origin);
|
|
||||||
path.push(eventPlace);
|
|
||||||
makeMarker(origin);
|
|
||||||
makeMarker(eventPlace);
|
|
||||||
var bounds = new google.maps.LatLngBounds();
|
|
||||||
bounds.extend(origin);
|
|
||||||
bounds.extend(eventPlace);
|
|
||||||
map.fitBounds(bounds);
|
|
||||||
polyline.setMap(map);
|
|
||||||
var distance = Math.round(google.maps.geometry.spherical.computeDistanceBetween(origin, eventPlace) / 1000);
|
|
||||||
$('#distance').text(distance + ' km');
|
|
||||||
$('#estimateTime').text('');
|
|
||||||
$('#find-flight').removeClass('hidden');
|
|
||||||
$('#mode').addClass('hidden');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
deleteMarkers();
|
|
||||||
$('#find-way').addClass('location-active');
|
|
||||||
setDirectionInput(origin);
|
|
||||||
$('#find-way h3').removeClass('fadeInUp').addClass('fadeOutDown');
|
|
||||||
}
|
|
||||||
|
|
||||||
function calcRouteFromMyLocation() {
|
|
||||||
if (navigator.geolocation) {
|
|
||||||
navigator.geolocation.getCurrentPosition(function(position) {
|
|
||||||
origin = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
|
|
||||||
calcRoute(origin, 'TRANSIT');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeMarker(position) {
|
|
||||||
var directionMarker = new google.maps.Marker({
|
|
||||||
position: position,
|
|
||||||
map: map,
|
|
||||||
icon: icon
|
|
||||||
});
|
|
||||||
markers.push(directionMarker);
|
|
||||||
}
|
|
||||||
|
|
||||||
function addMarker(location) {
|
|
||||||
var marker = new google.maps.Marker({
|
|
||||||
position: location,
|
|
||||||
map: map
|
|
||||||
});
|
|
||||||
markers.push(marker);
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteMarkers() {
|
|
||||||
for (var i = 0; i < markers.length; i++) {
|
|
||||||
markers[i].setMap(null);
|
|
||||||
}
|
|
||||||
markers = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
function smoothZoom(level) {
|
|
||||||
var currentZoom = map.getZoom(),
|
|
||||||
timeStep = 50;
|
|
||||||
var numOfSteps = Math.abs(level - currentZoom);
|
|
||||||
var step = (level > currentZoom) ? 1 : -1;
|
|
||||||
for (var i = 0; i < numOfSteps; i++) {
|
|
||||||
setTimeout(function() {
|
|
||||||
currentZoom += step;
|
|
||||||
map.setZoom(currentZoom);
|
|
||||||
}, (i + 1) * timeStep);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setDirectionInput(origin) {
|
|
||||||
geocoder.geocode({
|
|
||||||
'latLng': origin
|
|
||||||
}, function(results, status) {
|
|
||||||
if (status == google.maps.GeocoderStatus.OK && results[1]) {
|
|
||||||
var arrAddress = results[1].address_components;
|
|
||||||
$.each(arrAddress, function(i, address_component) {
|
|
||||||
if (address_component.types[0] == "locality") {
|
|
||||||
$('#result-name').text(address_component.long_name);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#mode-select').change(function() {
|
|
||||||
var selectedMode = $(this).val();
|
|
||||||
calcRoute(origin, selectedMode);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#direction-locate").click(calcRouteFromMyLocation);
|
|
||||||
|
|
||||||
$("#direction-cancel").click(function() {
|
|
||||||
$('#find-way').removeClass('location-active');
|
|
||||||
$('#location-input').val('');
|
|
||||||
$("#find-flight").addClass('hidden');
|
|
||||||
deleteMarkers();
|
|
||||||
directionsDisplay.setMap(null);
|
|
||||||
polyline.setMap(null);
|
|
||||||
map.setMapTypeId('default');
|
|
||||||
map.panTo(eventPlace);
|
|
||||||
if ($(window).width() < 768) {
|
|
||||||
map.setCenter(mobileCenterMap);
|
|
||||||
} else {
|
|
||||||
map.setCenter(centerMap);
|
|
||||||
}
|
|
||||||
makeMarker(eventPlace);
|
|
||||||
smoothZoom(5);
|
|
||||||
$('#find-way h3').removeClass('fadeOutDown').addClass('fadeInUp');
|
|
||||||
});
|
|
||||||
|
|
||||||
if (typeof autoDirectionEnabled !== 'undefined' && autoDirectionEnabled == true) {
|
|
||||||
calcRouteFromMyLocation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
google.maps.event.addDomListener(window, 'load', initialize);
|
|
||||||
}
|
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
|
||||||
2
js/scripts.min.js
vendored
2
js/scripts.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue