if( ! $ ) { var $ = jQuery; console.log('Weird bugfix required'); }
$( window ).resize(function() { fixMapHeight(); });
function fixMapHeight() { var canvas = $( "#trashless_map__canvas" ); var height = window.innerHeight - canvas.offset().top - 40; canvas.height(height); }
fixMapHeight(); var trashless_map_styles = [ { "elementType": "geometry", "stylers": [ { "color": "#ebe3cd" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#523735" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f1e6" } ] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [ { "color": "#c9b2a6" } ] }, { "featureType": "administrative.land_parcel", "elementType": "geometry.stroke", "stylers": [ { "color": "#dcd2be" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#ae9e90" } ] }, { "featureType": "landscape.natural", "elementType": "geometry", "stylers": [ { "color": "#dfd2ae" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#dfd2ae" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#93817c" } ] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [ { "color": "#a5b076" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#447530" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#f5f1e6" } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#fdfcf8" } ] }, { "featureType": "road.arterial", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#f8c967" } ] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [ { "color": "#e9bc62" } ] }, { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry", "stylers": [ { "color": "#e98d58" } ] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry.stroke", "stylers": [ { "color": "#db8555" } ] }, { "featureType": "road.local", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#806b63" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#dfd2ae" } ] }, { "featureType": "transit.line", "elementType": "labels.text.fill", "stylers": [ { "color": "#8f7d77" } ] }, { "featureType": "transit.line", "elementType": "labels.text.stroke", "stylers": [ { "color": "#ebe3cd" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#dfd2ae" } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "color": "#b9d3c2" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#92998d" } ] } ]; var iconBase = '/wp-content/plugins/trashless-map/icons/'; var icons = { event: { icon: iconBase + 'event.png' }, user: { icon: iconBase + 'user2.png' }, info: { icon: iconBase + 'info-i_maps.png' }, post: { icon: iconBase + 'event.png' } };
var markers = []; function handle_mousedown(e){ window.my_dragging = {}; my_dragging.pageX0 = e.pageX; my_dragging.pageY0 = e.pageY; my_dragging.elem = this; my_dragging.offset0 = $(this).offset(); function handle_dragging(e){ var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0); var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0); $(my_dragging.elem) .offset({top: top, left: left}); } function handle_mouseup(e){ $('body') .off('touchmove', handle_dragging) .off('mousemove', handle_dragging) .off('mouseup', handle_mouseup) .off('touchend', handle_mouseup); } $('body') .on('touchend', handle_mouseup) .on('touchmove', handle_dragging) .on('mouseup', handle_mouseup) .on('mousemove', handle_dragging); }
var trashless_map = {
'startCenter' : null, 'map' : null, 'markers' : [], 'startFilter' : null, 'filter' : null, 'infowindow': null,
'geoInitialize': function () { if (navigator.geolocation && ! trashless_map.startCenter ) { console.log('Initializing Trashless map: Browser detect for current position'); navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude };
trashless_map.startCenter = pos; console.log('Got current position'); trashless_map.initialize(); }, function( err) { console.log('Got no current position: error', err ); trashless_map.initialize(); }); } else { console.log('Initializing Trashless map: Got no current position: not available'); trashless_map.initialize(); } },
'initialize': function () { var map;
var myCenter= ( trashless_map.startCenter ? trashless_map.startCenter : new google.maps.LatLng(52.370216,4.895168) );
var mapProp = { center:myCenter, zoom:12, mapTypeId:google.maps.MapTypeId.ROADMAP /*, styles: trashless_map_styles */ };
var infowindow = new google.maps.InfoWindow(); trashless_map.map = map=new google.maps.Map(document.getElementById("trashless_map__canvas"),mapProp);
map.addListener('idle', function() { trashless_map.reload() } ); var layerpanel = jQuery('#trashless_map_checkboxes') jQuery( '#trashless_map_checkboxes input' ).on( 'click' , function() { trashless_map.reload() } ); jQuery('#trashless_map_checkboxes .maplayer-toggle a').click(function(event){ event.preventDefault(); jQuery('#trashless_map_checkboxes').toggleClass('collapsed'); }); layerpanel.mousedown(handle_mousedown); }, //initialize
/* Reload items from server based on mop bounds and checkboxes */
'reload': function() { var map = trashless_map.map; console.log('Map is now idle'); console.log( trashless_map ); console.log( map.getCenter());
console.log( "Json call:", "/wp-content/plugins/trashless-map/trashless-map.json.php" );
jQuery.ajax( { url: "/wp-content/plugins/trashless-map/trashless-map.json.php", data: { 'rnd': Math.random(), 'lat0': map.getBounds().getNorthEast().lat(), 'lng0': map.getBounds().getNorthEast().lng(), 'lat1': map.getBounds().getSouthWest().lat(), 'lng1': map.getBounds().getSouthWest().lng(), 'filter': trashless_map.filter, 'myimpact': jQuery('#tl_check_my').prop( "checked" ), 'filter_events_fut': jQuery('#tl_filter_events1').prop( "checked" ), 'types' : { 'tl_event': jQuery('#tl_check_tl_event').prop( "checked" ), 'tl_walk': jQuery('#tl_check_tl_walk').prop( "checked" ), 'tl_date': jQuery('#tl_check_tl_date').prop( "checked" ), 'tl_news': jQuery('#tl_check_tl_news').prop( "checked" ), 'tl_a001': jQuery('#tl_check_tl_a001').prop( "checked" ), 'tl_a004': jQuery('#tl_check_tl_a004').prop( "checked" ), 'user': jQuery('#tl_check_user').prop( "checked" ),
} } } ).done(function( data ) {
if ( console && console.log ) { console.log( "Sample of data:", data.slice( 0,512 ) ); }; // console.log( "json data: ", data ); trashless_map.showMarkers( map, data ); }); },
/* Show markers after reload */
'showMarkers': function( map, data ) {
var positions = JSON.parse( data );
if ( console && console.log ) { console.log( "Show markers ("+positions.length+")" ); };
var remove = [];
/* determine which markers are already on the map. */ /* determine if they have to be removed from the map ( out of bounds / checkbox selection ) */
for( var i in trashless_map.markers ) { var keep = false; var marker = trashless_map.markers[i];
for( var j in positions ) { loc = positions[j]; if( loc.post_id == marker.post_id && loc.user_id == marker.user_id ) { console.log('keeping', i , marker , 'loc: '+loc.post_id, 'marker: '+marker.post_id ); keep = true; break; } }
if( ! keep ) remove.push(i); }
// Remove markers from remove array. // We are going to splice, shifting indexes so have to work from high to low.
for( i=remove.length - 1; i>=0; i-- ) { { console.log('removing', marker ); trashless_map.markers[remove[i]].setMap(null); trashless_map.markers.splice(remove[i],1); } }
/* Determine which markers to add to the map. */
for( var ip in positions ) { var loc = positions[ip];
var add = true; for( var i in trashless_map.markers ) { var marker = trashless_map.markers[i]; // what does this do and why this way? if( loc.post_id == marker.post_id && loc.user_id == marker.user_id ) { add = false; console.log('not adding '+marker.post_id); break; } // no entries without a name (username or post) /* doesnt work yet if( marker. == null ) { add = false; console.log('not adding empty name'+marker.post_id); break; }*/ }
if( add ) { console.log('adding '+loc.post_id); console.log('extravar'+loc.prof1); var extra1 = ''; var extra2 = ''; if( loc.prof1 !== '' && loc.type == 'user' ){ extra1 = 'd';} if( loc.prof2 !== '' && loc.type == 'user' ){ extra2 = 'w';}
if( loc.type == 'tl_a004' || loc.type == 'tl_a001' || loc.type == 'tl_date' || loc.type == 'user' || loc.type == 'tl_news' || loc.type == 'tl_event' ){ var marker = new google.maps.Marker({ position: new google.maps.LatLng( loc.lat, loc.lng), map: map, animation: google.maps.Animation.DROP, icon: iconBase + loc.type + extra1 + extra2 + '.png',
url: loc.url, });
marker.post_id = loc.post_id; marker.user_id = loc.user_id; marker.post_type = loc.type; marker.loc = loc;
trashless_map.markers.push( marker );
if( loc.type == 'tl_event' ) { var datetime1 = new Date(); var datetime2 = new Date( loc.date.replace( ' ' , 'T' ).replace( '00:00:00' , '23:59:59' ) +'Z' );
var interval = datetime2.valueOf() - datetime1.valueOf(); console.log('Show infoWindow?? '+loc.name , interval , loc.date , datetime1 , datetime2 );
if( interval >= 0 ) {
/* var marker = new google.maps.Marker({ position: new google.maps.LatLng( loc.lat, loc.lng), map: map, icon: ( icons[loc.type] ? icons[loc.type].icon : iconBase + loc.type + '.png' ), url: loc.url, }); */
console.log('Yes Show !!!'); marker.infowindow = new google.maps.InfoWindow(); marker.infowindow.setContent( loc.text ); marker.infowindow.open(map, marker); } } }
/** arthur naar if verplaatst marker.post_id = loc.post_id; marker.user_id = loc.user_id; marker.post_type = loc.type; marker.loc = loc;
trashless_map.markers.push( marker ); */
/* Show info windows on upcomming events */
google.maps.event.addListener(marker, 'click', function() {
trashless_map.highlightMarker( this ); trashless_map.loadMarkerInfo( this ); }); }; };
if ( console && console.log ) { console.log( "Show markers done" ); }; },
'loadMarkerInfo': function( marker , reload ) {
var loc = marker.loc; console.log('marker ', marker );
if( marker.infoData && ! reload ) { trashless_map.showMarkerInfo( marker );
} else { console.log('Getting info popup for ', this ); loc.random = Math.random(); $.ajax({ url: '/wp-content/plugins/trashless-map/marker-pages/'+loc.type+'.php', data: loc }).done(function( data ) {
marker.infoData = data;
trashless_map.showMarkerInfo( marker );
}); }
//markers.push(marker); },
'highlightMarker': function( marker ) { var loc = marker.loc;
if( loc.type == 'tl_a004' ) { var icon_default = iconBase + loc.type + '.png'; for (var j = 0; j < markers.length; j++) { markers[j].setIcon(icon_default); } var icon_click = iconBase + loc.type + '-click.png'; marker.setIcon(icon_click); } }, 'showMarkerInfo': function( marker ) { console.log("data loc var :",marker.loc); console.log("data php file :",marker.infoData); if (screen.width < 800){ if( trashless_map.infowindow ) { trashless_map.infowindow.close(); } console.log("data php file voor div :",marker.infoData); $('#campground_info').html(marker.infoData); } else { if(! trashless_map.infowindow ) trashless_map.infowindow = new google.maps.InfoWindow( { zIndex: 1000 } ); trashless_map.infowindow.close(); trashless_map.infowindow.setContent( marker.infoData ); trashless_map.infowindow.open(trashless_map.map, marker); } } }; google.maps.event.addDomListener(window, 'load', trashless_map.geoInitialize);