CINXE.COM

<!DOCTYPE html> <html> <head><meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pobles de Catalunya - Mapa Total (beta)</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="/tarteaucitron/tarteaucitron.js"></script> <script> tarteaucitron.init({ "privacyUrl": "/politica_de_cookies.php", "hashtag": "#tarteaucitron", "cookieName": "tarteaucitron", "orientation": "middle", "groupServices": true, "showAlertSmall": false, "cookieslist": true, "showIcon": true, // "iconSrc": "", /* Optionnal: URL or base64 encoded image */ "iconPosition": "BottomLeft", "adblocker": false, "DenyAllCta" : true, "AcceptAllCta" : true, "highPrivacy": true, "handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */ "removeCredit": false, /* Remove credit link */ "moreInfoLink": true, /* Show more info link */ "useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */ "readmoreLink": "", /* Change the default readmore link pointing to tarteaucitron.io */ "mandatory": true /* Show a message about mandatory cookies */ }); </script> <link rel="stylesheet" type="text/css" href="/css/bootstrap.3.3.4.min.css"> <link rel="stylesheet" type="text/css" href="/css/styles20220324.css" /> <link rel="stylesheet" type="text/css" href="/css/bootstrap.custom.css" /> <link rel="stylesheet" type="text/css" href="/css/media.queries20210701.css" /> <style> @media (max-width: 1200px) { #mapamenu {margin-right: -25px} #mapamenu a {padding-right: 2px;padding-left: 2px} } </style> <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"> <link rel="manifest" href="/favicons/site.webmanifest"> <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#017863"> <link rel="shortcut icon" href="/favicons/favicon.ico"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-config" content="/favicons/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <script async src="https://cse.google.com/cse.js?cx=ca9b0919f2f4e91bf"></script>  <link rel="stylesheet" type="text/css" href="/css/mapa.css" /> </head> <body> <div id="mapa-total"> </div> <script src="//maps.google.com/maps/api/js?key=AIzaSyBmS-8zgtN5VJ_2fJZQW-R6nRZqoweMzhU"></script>  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>  <script src="/js/markerclusterer.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var municipis = {}; var elements = {}; var gmarkers = []; var paintedMarkers = []; var z = {}; var m = {}; var estils = null ; var periodes = null ; var tipus = null ; var map = null; var clusterer = null; var divLogoPdC = null; var divFiltres = null; var divEspera = null; var infoWindow = null; var capaContorns = null; var estilsSeleccionats = ['*']; // ['*'] vol dir "tots" var tipusSeleccionats = ['*']; var periodesSeleccionats = ['*']; var zoom; var latCentre; var lngCentre; var tipusMapa = 'ICC' // google.maps.MapTypeId.ROADMAP; // 'OSM' ?? var regExpHash = new RegExp(/^#*!(\d+)!(\d+\.\d*)!(\d+\.\d*)!(.*)!(.*)!(.*)!(.*)/); function filtreElements(e, segonFiltre) { // Filtra tipus, periodes, estils, etc. try { if (tipusSeleccionats[0] !== '*') { if (!e.id_tipus) return false; if (tipusSeleccionats.indexOf(e.id_tipus) == -1) return false; } if (estilsSeleccionats[0] !== '*') { if (!e.id_estil) return false; if (estilsSeleccionats.indexOf(e.id_estil) == -1) return false; } if (periodesSeleccionats[0] !== '*') { if (!e.id_periode) return false; if (periodesSeleccionats.indexOf(e.id_periode) == -1) return false; } } catch (e) { // No facis res... alert(e); } // Mira si hi ha un segon filtre if (segonFiltre && !segonFiltre(e)) return false; return true; } var esperant = 0; function espera(delta) { esperant += delta; if (esperant <= 0) $('#espera').hide(); else $('#espera').show(); } jQuery(function() { // Llegeix llista de municipis espera(+1); jQuery.ajax('/rest/municipis.php', { error: function(jqXHR, textStatus, errorThrown) { //alert("ERROR Municipis\nStatus: " + textStatus + "\nError: " + errorThrown); espera(-1); }, success: function(data, textStatus, jqXHR) { municipis = data; //alert(Object.keys(data).length); espera(-1); if (municipis && elements) pintaElements(elements); } }); // Llegeix la llista d'estils, periodes i tipus (vectors) estils = [{},{"id_estil":1,"estil":"Rom脿nic","ordre":40},{"id_estil":2,"estil":"G貌tic","ordre":50},{"id_estil":3,"estil":"Renaixement","ordre":60},{"id_estil":4,"estil":"Barroc","ordre":70},{"id_estil":5,"estil":"Neoclassicisme","ordre":80},{"id_estil":6,"estil":"Eclecticisme","ordre":100},{"id_estil":7,"estil":"Modernisme","ordre":110},{"id_estil":8,"estil":"Noucentisme","ordre":120},{},{"id_estil":10,"estil":"Historicisme","ordre":90},{},{"id_estil":12,"estil":"Estils contemporanis","ordre":140},{"id_estil":13,"estil":"Art antic","ordre":1},{"id_estil":14,"estil":"Racionalisme - Moviment Modern","ordre":130},{"id_estil":15,"estil":"Romanticisme","ordre":85},{"id_estil":16,"estil":"Art Dec贸","ordre":115},{"id_estil":17,"estil":"Beaux Arts - Monumentalisme Classicista","ordre":125}]; periodes = [{},{"id_periode":1,"periode":"Prehist貌ria","ordre":10},{"id_periode":2,"periode":"Segle IV ac a IV dc","ordre":20},{"id_periode":3,"periode":"Segle V a IX","ordre":30},{"id_periode":4,"periode":"Segle X a XII","ordre":40},{"id_periode":5,"periode":"Segle XIII a XV","ordre":50},{"id_periode":6,"periode":"Segle XVI-XVII","ordre":60},{"id_periode":7,"periode":"Segle XVIII","ordre":70},{},{},{"id_periode":10,"periode":"Segle XIX","ordre":80},{"id_periode":11,"periode":"1888-1910","ordre":90},{"id_periode":12,"periode":"1911-1929","ordre":100},{"id_periode":13,"periode":"1930-1939","ordre":110},{},{},{"id_periode":16,"periode":"1976-2000","ordre":130},{},{},{},{"id_periode":20,"periode":"1940-1975","ordre":120},{"id_periode":21,"periode":"Posterior al 2000","ordre":140}]; tipus = [{},{"id_tipus":1,"tipus":"Edifici religi贸s","ordre":null,"icona":"church-2.png"},{"id_tipus":2,"tipus":"Masia","ordre":null,"icona":"farm2.png"},{"id_tipus":3,"tipus":"Edifici residencial","ordre":null,"icona":"house.png"},{"id_tipus":4,"tipus":"Edifici p煤blic","ordre":null,"icona":"congress.png"},{"id_tipus":5,"tipus":"Castell","ordre":null,"icona":"castle-2.png"},{"id_tipus":6,"tipus":"Museu","ordre":null,"icona":"historical_museum.png"},{"id_tipus":7,"tipus":"Edifici industrial o agr铆cola","ordre":null,"icona":"factory.png"},{"id_tipus":8,"tipus":"Ponts i aq眉eductes","ordre":null,"icona":"bridge_old.png"},{},{"id_tipus":10,"tipus":"Jaciment arqueol貌gic","ordre":null,"icona":"museum_archeological.png"},{"id_tipus":11,"tipus":"Element singular","ordre":null,"icona":"star-3.png"},{"id_tipus":12,"tipus":"Parcs i jardins","ordre":null,"icona":"urbanpark.png"},{},{"id_tipus":14,"tipus":"Mercat","ordre":null,"icona":"conveniencestore.png"},{"id_tipus":15,"tipus":"Conjunt urban铆stic","ordre":null,"icona":"citysquare.png"},{"id_tipus":16,"tipus":"Muralles i torres fortificades","ordre":null,"icona":"tower.png"},{"id_tipus":17,"tipus":"Creus monumentals","ordre":null,"icona":"cross-2.png"},{"id_tipus":18,"tipus":"Edifici escolar","ordre":null,"icona":"school.png"},{"id_tipus":19,"tipus":"Ateneus i centres socials","ordre":null,"icona":"communitycentre.png"},{"id_tipus":20,"tipus":"Art funerari","ordre":null,"icona":"headstone-2.png"},{"id_tipus":21,"tipus":"Edifici administratiu o institucional","ordre":null,"icona":"office-building.png"},{"id_tipus":22,"tipus":"Fonts, pous i safareigs","ordre":null,"icona":"fountain-2.png"},{"id_tipus":23,"tipus":"Art P煤blic","ordre":null,"icona":"statue-2.png"},{"id_tipus":24,"tipus":"Establiment comercial","ordre":null,"icona":"conveniencestore.png"},{},{"id_tipus":26,"tipus":"Meg脿lit","ordre":null,"icona":"megalith.png"},{"id_tipus":27,"tipus":"Mol铆","ordre":null,"icona":"watermill-2.png"},{"id_tipus":28,"tipus":"Portals, arcs, llindes","ordre":null,"icona":"arch.png"},{"id_tipus":29,"tipus":"Estaci贸","ordre":null,"icona":"tren.png"},{"id_tipus":30,"tipus":"Hotels i hostals","ordre":null,"icona":"hotel.png"},{"id_tipus":31,"tipus":"Imatges, retaules i objectes lit煤rgics","ordre":null,"icona":"retaule.png"},{"id_tipus":32,"tipus":"Cabanes de pedra, forns i pous de gel","ordre":null,"icona":"hut.png"},{"id_tipus":33,"tipus":"Pintura mural urbana (grafit)","ordre":null,"icona":"mural.png"},{"id_tipus":34,"tipus":"Torres i dip貌sits d'aigua","ordre":null,"icona":"watertower.png"}]; creaIconesSegonsTipus(); // Pinta el mapa... pintaMapa(); }); function creaDivOnSoc() { var wrapper = document.createElement('div'); wrapper.id = 'myLocationWrapper'; wrapper.style.padding = '2px'; var ui = document.createElement('div'); ui.id = 'myLocation'; ui.style.backgroundColor = 'white'; ui.style.width = '40px'; ui.style.height = '40px'; ui.innerHTML = '<a id="myLocationA" href="javascript:OnSoc()"><img id="myLocationImg" alt="X"></a>'; wrapper.appendChild(ui); return wrapper; } function creaDivLogoPdC() { var wrapper = document.createElement('div'); wrapper.id = "wrapperLogoPdC"; wrapper.style.padding = '2px'; // Set CSS for the control border. var ui = document.createElement('div'); ui.id = "divLogoPdC"; ui.style.backgroundColor = 'transparent'; ui.style.width="250px"; ui.style.height="50px"; ui.style.marginTop = '4px'; ui.style.cursor = 'pointer'; ui.style.textAlign = 'left'; ui.style.padding = '4px'; ui.title = 'Pobles de Catalunya'; ui.innerHTML = "<a href=\"./\"><img id='pdcLogoMap' src=\"/img/pdc_trans.png\" alt=\"PdC\"></a>" + '<img src="/img/spiffygif_46x46.gif" alt="1 moment" id="espera"/>'; wrapper.appendChild(ui); return wrapper ; } function showMenu(){ $("#divEstils").slideToggle(); } function creaDivLlegenda() { var wrapper = document.createElement('div'); var nombreTipus = tipus.length; var imgs = ""; for (id_tipus = 1; id_tipus < nombreTipus; id_tipus++) { if (tipus[id_tipus].tipus != undefined) { imgs += "<p><img src='" + tipus[id_tipus]['icona'][false].url + "' style='vertical-align:middle'> " + tipus[id_tipus].tipus + " </p>"; } } wrapper.id = "llegenda"; wrapper.style.padding = '2px'; wrapper.style.background = "#ffffff"; wrapper.style.border = "1px solid #000000" wrapper.style.height = "200px"; wrapper.style.width = "200px"; wrapper.innerHTML = "<h2 style='background:#ccc; margin:0;padding:5px'>Llegenda</h2><div style='overflow-y:scroll; height: 170px;'>"+imgs+"</div>"; return wrapper; } function posaZoomICentre(zoom, centre) { var zoomActual = map.getZoom(); var centreActual = map.getCenter(); if (zoom != zoomActual) map.setZoom(zoom); if ( centreActual.lat().toFixed(6) != centre.lat().toFixed(6) || centreActual.lng().toFixed(6) != centre.lng().toFixed(6)) map.setCenter(centre); } function llegeixHash(hash, tocaMapa) { if (regExpHash.test(hash)) { var e = regExpHash.exec(hash); // Posa zoom i centre zoom = parseInt(e[1]); latCentre = parseFloat(e[2]); lngCentre = parseFloat(e[3]); if (tocaMapa) posaZoomICentre(zoom, new google.maps.LatLng(latCentre, lngCentre)); // Posa els filtres var algunCanviFiltre = false; if (tipusSeleccionats.toString() != e[4]) { tipusSeleccionats = e[4].split(","); $('#selectTipus').val(tipusSeleccionats); algunCanviFiltre = true; } if (periodesSeleccionats.toString() != e[5]) { periodesSeleccionats = e[5].split(","); $('#selectPeriodes').val(periodesSeleccionats); algunCanviFiltre = true; } if (estilsSeleccionats.toString() != e[6]) { estilsSeleccionats = e[6].split(","); $('#selectEstils').val(estilsSeleccionats); algunCanviFiltre = true; } if (algunCanviFiltre && tocaMapa) { filtraElements(elements, filtreElements); } // Posa el tipus de mapa if (e[7] !== undefined && tipusMapa.toString() != e[7]) { tipusMapa = e[7]; if (tocaMapa) map.setMapTypeId(tipusMapa); } return true; } return false; } function actualitzaHash() { zoom = map.getZoom(); var centre = map.getCenter(); latCentre = centre.lat().toFixed(6); lngCentre = centre.lng().toFixed(6); jQuery('#zoom').html(zoom); jQuery('#centre').html(latCentre + ", " + lngCentre); window.location.hash = '!' + zoom + '!' + latCentre + '!' + lngCentre + '!' + tipusSeleccionats.toString() + '!' + periodesSeleccionats.toString() + '!' + estilsSeleccionats.toString() + '!' + map.getMapTypeId() ; // I ara, si cal, fa virgueries com ara carregar informaci贸 // d'elements corresponents a la zona que estem mirant... // (de moment, no est脿 fet, he optat pel m猫tode "carrega-ho tot") if (false) { var vores = map.getBounds(); var ne = vores.getNorthEast(); var sw = vores.getSouthWest(); var latMax = ne.lat(); var lngMax = ne.lng(); var latMin = sw.lat(); var lngMin= sw.lng(); var latRange = latMax - latMin; var lngRange = lngMax - lngMin; // filtra... } } function WMSGetTileUrl_idee(tile, zoom, layers) // Mapa est脿ndard WMS, funci贸 que genera una URL per a demanar una "rajola" // Servidor idee { var projection = map.getProjection(); var zpow = Math.pow(2, zoom); var ul = new google.maps.Point(tile.x * 256 / zpow, (tile.y + 1) * 256 / zpow); var lr = new google.maps.Point((tile.x + 1) * 256 / zpow, (tile.y) * 256 / zpow); var ulw = projection.fromPointToLatLng(ul); var lrw = projection.fromPointToLatLng(lr); var bbox = ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat(); if (!layers) layers = "mtn_rasterizado" ; var url ="http://www.idee.es/wms/MTN-Raster/MTN-Raster?REQUEST=GetMap&VERSION=1.1.0&Service=WMS&FORMAT=JPEG&reaspect=false&LAYERS=" + layers + "&BBOX=" + bbox + "&width=256&height=256&SRS=EPSG:4326" /* Aquests no van, no trobo el "layer" que toca url = "http://geoserveis.icc.cat/icc_ct1m/wms/service?REQUEST=GetMap&VERSION=1.1.0&SERVICE=WMS&SRS=EPSG:4326&BBOX=" + bbox + "&WIDTH=256&HEIGHT=256&LAYERS=4&STYLES=&FORMAT=image/jpeg&BGCOLOR=0xFFFFFF&TRANSPARENT=TRUE&EXCEPTION=INIMAGE" url = "http://galileo.icc.cat/arcgis/services/icc_ct1m_v_r/MapServer/WMSServer?request=GetMap&VERSION=1.1.0&SERVICE=WMS&SRS=EPSG:4326&BBOX=" + bbox + "&WIDTH=256&HEIGHT=256&LAYERS=V21_PL&STYLES=&FORMAT=image/jpeg&BGCOLOR=0xFFFFFF&TRANSPARENT=TRUE&EXCEPTION=INIMAGE" */ return url; } function pintaMapa() { // Si el mapa ja est脿 pintat, no facis res... if (map) return; // Inicialitza valors per defecte zoom = 8; latCentre = 41.669156; lngCentre = 2.062893; // Mira si tenim hash per a centrar mapa // En cas afirmatiu, haurem canviat zoom, etc... var hashCorrecte = llegeixHash(window.location.hash, false); // Centre del mapa var centreMapa = new google.maps.LatLng(latCentre, lngCentre); // Crea mapa var opc = { center: centreMapa, zoom: zoom, mapTypeId: 'ICC', /* google.maps.MapTypeId.ROADMAP */ panControl: false, // no val la pena => ratol铆 rotateControl: false, scaleControl: true, mapTypeControl: true, // Sat猫l路lit, etc. mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN, 'ICC', 'IGN', // 'IDEE', 'MapQ', 'OSM', 'BN', 'HikeBike'], style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } } ; map = new google.maps.Map(document.getElementById("mapa-total"), opc); // Pinta una div amb als filtres... divFiltres = creaDivFiltres(); map.controls[google.maps.ControlPosition.RIGHT_TOP].push(divFiltres); // Afegeix opci贸 OpenStreetMap // Define OSM map type pointing at the OpenStreetMap tile server map.mapTypes.set("OSM", new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { return "http://tile.openstreetmap.org/" + zoom + '/' + coord.x + '/' + coord.y + ".png"; }, tileSize: new google.maps.Size(256, 256), name: 'OpenStreet', alt: 'OpenStreetMap', maxZoom: 18 })); /* map.mapTypes.set('MapQ', new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { return 'http://otile1.mqcdn.com/tiles/1.0.0/map/' + zoom + '/' + coord.x + '/' + coord.y + ".png"; }, tileSize: new google.maps.Size(256, 256), name: 'MapQuest', alt: 'MapQuest', maxZoom: 19 })); */ map.mapTypes.set('BN', new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { return "http://a.www.toolserver.org/tiles/bw-mapnik/" + zoom + '/' + coord.x + '/' + coord.y + ".png"; }, isPng: true, tileSize: new google.maps.Size(256, 256), name: 'OSM MapNik (B/N)', alt: 'MapNik / OpenStreetMap', maxZoom: 19 })); map.mapTypes.set('HikeBike', new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { return "http://toolserver.org/tiles/hikebike/" + zoom + '/' + coord.x + '/' + coord.y + ".png"; }, isPng: true, tileSize: new google.maps.Size(256, 256), name: 'Hike & Bike', alt: 'OpenStreetMap et ?', maxZoom: 19 })); // Mapa tamb茅 de l'ICC map.mapTypes.set('ICC', new google.maps.ImageMapType({ getTileUrl: function(tile, zoom) { var projection = map.getProjection(); var zpow = Math.pow(2, zoom); var ul = new google.maps.Point(tile.x * 256 / zpow, (tile.y + 1) * 256 / zpow); var lr = new google.maps.Point((tile.x + 1) * 256 / zpow, (tile.y) * 256 / zpow); var ulw = projection.fromPointToLatLng(ul); var lrw = projection.fromPointToLatLng(lr); var bbox = ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat(); var url ; url = "http://mapcache.icgc.cat/map/bases_noutm/service?" + "LAYERS=topo" + "&FORMAT=image/jpeg&EXCEPTIONS=application/vnd.ogc.se_xml&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:4326" + "&BBOX=" + bbox + "&WIDTH=256&HEIGHT=256" ; return url ; }, tileSize: new google.maps.Size(256, 256), maxZoom:19, minZoom:8, isPng: true, name: 'TopoICC', alt: 'Institut Cartogr脿fic de Catalunya' })); // Mapa IGN map.mapTypes.set('IGN', new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { return "http://www.ign.es/wmts/ign-base" + "?request=getTile" + "&layer=IGNBaseTodo" + "&TileMatrixSet=GoogleMapsCompatible" + "&TileMatrix=" + zoom + "&TileCol=" + coord.x + "&TileRow=" +coord.y + "&format=image/png"; }, tileSize: new google.maps.Size(256, 256), maxZoom:20, minZoom:0, isPng: true, name: 'BaseIGN', alt: 'Instituto Geogr谩fico Nacional' })); // M铆nima infraestructura per a cr猫dits dels mapes // Setup a copyright/credit line, emulating the standard Google style var creditNode = document.createElement('div'); creditNode.id = 'credit-control'; creditNode.style.fontSize = '11px'; creditNode.style.fontFamily = 'Arial, sans-serif'; creditNode.style.margin = '0 2px 2px 0'; creditNode.style.whitespace = 'nowrap'; creditNode.style.backgroundColor = 'rgba(255,255,255,0.8)'; creditNode.index = 0; // push the credit/copyright custom control map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(creditNode); // Posa el tipus de mapa segons el que digu茅s el hash map.setMapTypeId(tipusMapa); // Pinta un KML amb els contorns dels municipis... d'aqu铆 una miqueta capaContorns = new google.maps.KmlLayer ( { url:'http://www.poblesdecatalunya.cat/cartografia/LimitsMunicipis1000f.kml', map: map, preserveViewport: true, suppressInfoWindows: true, clickable: false // aix铆 no canvia la forma del cursor quan hi ets al damunt... }); // Pensar-se si volem "spiderfy" // https://github.com/jawj/OverlappingMarkerSpiderfier // var oms = new OverlappingMarkerSpiderfier(map); // Pinta una div on escriurem cosetes... divLogoPdC = creaDivLogoPdC(); map.controls[google.maps.ControlPosition.TOP_LEFT].push(divLogoPdC); // divLlegenda = creaDivLlegenda(); // map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(divLlegenda); // Afegeix un "event listener" per als canvis de zoom google.maps.event.addListener(map, 'zoom_changed', function() { loadViewElements(); // 0.450 despr茅s que el centre es mogui... actualitza hash window.setTimeout(function() { actualitzaHash(); }, 450); }); google.maps.event.addListener(map, 'center_changed', function() { window.setTimeout(function() { actualitzaHash(); }, 650); }); google.maps.event.addListenerOnce(map, 'idle', function() { var max_intents = 50 ; var big_this = this ; var funcio_afegeix_mtc = function() { mtc = document.getElementById('mtc'); if (mtc) { var d1 = big_this.getDiv() ; var d2 = d1.querySelector('div.gm-style-mtc') ; if (d2) { mtc.appendChild(d2); } else { Console.log("ERROR funcio_afegeix_mtc -> no trobo 'div.gm-style-mtc'\n"); } loadViewElements(); } else { if (max_intents--) { setTimeout(funcio_afegeix_mtc, 250); } else { loadViewElements(); } } } ; setTimeout(funcio_afegeix_mtc, 1000); }); //NEW EVENT google.maps.event.addListener(map, 'dragend', function(){ loadViewElements(); }); function deleteMarkers() { clearMarkers(); markers = []; } function clearMarkers() { setAllMap(null); } function clearOverlays() { for (var i = 0; i < markersArray.length; i++ ) { markersArray[i].setMap(null); } markersArray.length = 0; } google.maps.event.addListener(map, 'maptypeid_changed', function() { actualitzaHash(); // handle maptypeid_changed event to set the credit line var tipusMapa = map.getMapTypeId(); var dadesMapa = map.mapTypes[tipusMapa]; var credits = (dadesMapa.alt !== undefined ? 'Mapa: ' + dadesMapa.alt + ' ' : ''); creditNode.innerHTML = credits ; }); $(window).on('hashchange', function(ev) { window.setTimeout(function() { llegeixHash(document.location.hash, true); }, 250); }); // Si no ten铆em una posici贸 preestablerta, centra't all脿 on ets tu if (!hashCorrecte && navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); map.setZoom(16); }); } // Inicialitza les select... $('#selectTipus').val(tipusSeleccionats); $('#selectPeriodes').val(periodesSeleccionats); $('#selectEstils').val(estilsSeleccionats); } function getMap(map){ // First, determine the map bounds var bounds = map.getBounds(); // Then the points var swPoint = bounds.getSouthWest(); var nePoint = bounds.getNorthEast(); // Now, each individual coordinate var swLat = swPoint.lat(); var swLng = swPoint.lng(); var neLat = nePoint.lat(); var neLng = nePoint.lng(); //alert("SW LAT: "+swLat+ " SW LNG: " +swLng+ " NE LAT: " +neLat+ " NE LNG: " +neLng); } function filtraElements(elements, filtre) { for (var e in elements) { var element = elements[e]; if (element) { var marcador = element.marker; var araVisible = filtre(element); abansVisible = marcador ? marcador.getVisible() : null ; if (abansVisible != null && araVisible != abansVisible) { marcador.setVisible(araVisible); /** Aix貌, de fet, no cal if (!araVisible) clusterer.removeMarker(marcador, true); else clusterer.addMarker(marcador, true); **/ } } } // Repintem... clusterer.repaint(); // Actualitzem hash... actualitzaHash(); } function pintaElements(elements) { if (!map) pintaMapa(); var markers = []; var id ; for (id in elements) { var element = elements[id]; if (element) { if (paintedMarkers.indexOf(element.id) == -1) { //Not painted, paint var marker = new getMarker(element); elements[id]["marker"] = marker; markers.push(marker); paintedMarkers.push(element.id); } } } var opcionsClusterer = { maxZoom: 15, averageCenter: true, enableRetinaIcons: true, gridSize: 100, minimumClusterSize: 4, ignoreHidden: true, imagePath: '/img/markerclusterer/m' }; if (markers.length > 0) { if (clusterer) { clusterer.addMarkers(markers, true); canviaTipus($("#selectEstils")); canviaTipus($("#selectTipus")); canviaPeriode($("#selectPeriodes")); //clusterer.removeMarkers(dMarkers, true); } else { clusterer = new MarkerClusterer(map, markers, opcionsClusterer); } } } function pintaInfoMarcador(marker, element) { // Crea infowindow, si cal if (!infoWindow) infoWindow = new google.maps.InfoWindow(); // Calcula html que hi ha d'haver a dins var html = "<div class=\"marcador\"><h3><a href=\"element.php?e=" + element.id + "\">" + element.element + "</a></h3>" + "<a href=\"element.php?e=" + element.id + "\">" + "<img src=\"/fotos/mini/" + element.foto + ".jpeg\" />" + "</a>" + "<address>" + municipis[element.id_municipi].municipi + " (" + municipis[element.id_municipi].comarca + ")</address>" + (element.id_tipus ? tipus[element.id_tipus].tipus : "") + /* Hi hauria de ser sempre */ (element.id_periode ? " / " + periodes[element.id_periode].periode : "") + (element.id_estil ? " / " + estils[element.id_estil].estil : "") + "</div>"; // Posa el contingut, i ho pinta... infoWindow.setContent(html); infoWindow.open(map, marker); } var florDeLis = { path: 'M137.8125 399.9375 Q131.625 378.5625 117 363.9375 L105.75 358.3125 L105.75 351 L119.8125 336.9375 Q127.125 330.1875 130.5 321.1875 L130.5 307.6875 L96.1875 307.6875 L96.1875 293.0625 L109.125 293.0625 Q99.5625 273.375 90.8438 266.3438 Q82.125 259.3125 70.875 259.3125 Q63.5625 259.3125 55.6875 263.25 Q47.8125 267.1875 40.2188 274.7812 Q32.625 282.375 32.625 290.25 Q32.625 297 34.0312 304.0312 Q35.4375 311.0625 41.625 322.3125 Q41.625 326.25 38.8125 328.5 Q36 330.75 32.0625 330.75 Q21.375 316.6875 16.3125 306.8438 Q11.25 297 11.25 283.7812 Q11.25 269.4375 20.8125 254.5312 Q30.375 239.625 44.1562 232.5938 Q57.9375 225.5625 65.8125 225.5625 Q73.125 225.5625 82.6875 228.375 Q92.25 231.1875 100.6875 242.4375 Q109.125 253.6875 118.125 293.0625 L130.5 293.0625 L112.5 239.0625 Q107.4375 222.1875 107.4375 205.3125 Q107.4375 182.8125 112.7812 168.1875 Q118.125 153.5625 127.125 144.2812 Q136.125 135 144 134.4375 Q151.875 135 160.875 144.2812 Q169.875 153.5625 175.2188 168.1875 Q180.5625 182.8125 180.5625 205.3125 Q180.5625 222.1875 175.5 239.0625 L157.5 293.0625 L169.875 293.0625 Q178.875 253.6875 187.3125 242.4375 Q195.75 231.1875 205.3125 228.375 Q214.875 225.5625 222.1875 225.5625 Q230.0625 225.5625 243.8438 232.5938 Q257.625 239.625 267.1875 254.5312 Q276.75 269.4375 276.75 283.7812 Q276.75 297 271.6875 306.8438 Q266.625 316.6875 255.9375 330.75 Q252 330.75 249.1875 328.5 Q246.375 326.25 246.375 322.3125 Q252.5625 311.0625 253.9688 304.0312 Q255.375 297 255.375 290.25 Q255.375 282.375 247.7812 274.7812 Q240.1875 267.1875 232.3125 263.25 Q224.4375 259.3125 217.125 259.3125 Q205.875 259.3125 197.1562 266.3438 Q188.4375 273.375 178.875 293.0625 L191.8125 293.0625 L191.8125 307.6875 L157.5 307.6875 L157.5 321.1875 Q160.875 330.1875 168.1875 336.9375 L182.25 351 L182.25 358.3125 L171 363.9375 Q156.375 378.5625 150.1875 399.9375 L137.8125 399.9375 ZM144 376.3125 Q146.8125 363.375 155.8125 356.0625 L144 330.1875 L132.1875 356.0625 Q141.1875 363.375 144 376.3125 ZM144 281.8125 Q154.4062 250.0312 157.0781 235.6875 Q159.75 221.3438 159.75 205.3125 Q159.75 189 156.9375 176.625 Q154.125 164.25 150.75 159.1875 Q147.375 154.125 144 154.125 Q140.625 154.125 137.25 159.1875 Q133.875 164.25 131.0625 176.625 Q128.25 189 128.25 205.3125 Q128.25 221.3438 130.9219 235.6875 Q133.5938 250.0312 144 281.8125 ZM30.9375 267.1875 Q41.625 255.375 51.1875 251.4375 Q60.75 247.5 70.3125 247.5 Q83.25 247.5 98.4375 259.3125 Q91.6875 246.9375 83.5312 243.5625 Q75.375 240.1875 68.625 240.1875 Q61.875 240.1875 55.2656 242.5781 Q48.6562 244.9688 42.3281 250.1719 Q36 255.375 30.9375 267.1875 ZM257.0625 267.1875 Q252 255.375 245.6719 250.1719 Q239.3438 244.9688 232.7344 242.5781 Q226.125 240.1875 219.375 240.1875 Q212.625 240.1875 204.4688 243.5625 Q196.3125 246.9375 189.5625 259.3125 Q204.75 247.5 217.6875 247.5 Q227.25 247.5 236.8125 251.4375 Q246.375 255.375 257.0625 267.1875 Z', fillColor: '#f00', fillOpacity: 1, strokeColor: '#000', strokeWeight: 0.30, scale:0.11, anchor: new google.maps.Point(180, 400) }; var iconaNormal = { url: '//maps.google.com/mapfiles/marker.png', // This marker is 20 pixels wide by 32 pixels tall. size: new google.maps.Size(20, 32), // The origin for this image is 0,0. origin: new google.maps.Point(0,0), // The anchor for this image is the base of the flagpole at 0,32. anchor: new google.maps.Point(10, 32) }; function creaIconesSegonsTipus() { var size = new google.maps.Size(32, 37); var origin = new google.maps.Point(0,0); var anchor = new google.maps.Point(16, 37); var nombreTipus = tipus.length; // alert("nombreTipus: " + nombreTipus); for (id_tipus = 1; id_tipus < nombreTipus; id_tipus++) { var icona_normal = { url: "/img/icones-mapa/vermelles/" + tipus[id_tipus].icona, size: size, origin: origin, anchor: anchor } ; var icona_plus = { url: "/img/icones-mapa/blanques/" + tipus[id_tipus].icona, size: size, origin: origin, anchor: anchor } ; tipus[id_tipus]["icona"] = { false: icona_normal, true: icona_plus } } } function getMarker(element) { var icon ; try { var icon = tipus[element.id_tipus]["icona"][element.interes_turistic]; } catch (e) { // Per algun motiu hi ha algun tipus d'element sense icona, per si de cas, pinta "quelcom" icon = iconaNormal ; } // Pinta un marcador var marker = new google.maps.Marker({ position: new google.maps.LatLng(element.lat, element.lng), title: element.e, icon: icon }) ; // Associa un "event listener" quan es faci click al marcador google.maps.event.addListener(marker, 'click', function() { pintaInfoMarcador(marker, element); }); // I el retorna return marker; } function loadViewElements(){ // Llegeix la llista d'elements, via Ajax, i els pinta... var southWestLat = map.getBounds().getSouthWest().lat(); var southWestLng = map.getBounds().getSouthWest().lng(); var northEastLat = map.getBounds().getNorthEast().lat(); var northEastLng = map.getBounds().getNorthEast().lng(); jQuery.ajax({ url:'/rest/elementsv3.php', method: "GET", data: { lat_min: southWestLat, lat_max: northEastLat, lng_min: southWestLng, lng_max: northEastLng }, error: function(jqXHR, textStatus, errorThrown){ //alert("ERROR Elements\nStatus: " + textStatus + "\nError: " + errorThrown); espera(-1); }, success: function(data, textStatus, jqXHR) { if (elements.length == 0) { elements = data; } else { for (var idx_element in data) { var element = data[idx_element] ; if (paintedMarkers.indexOf(element.id) == -1) { elements[idx_element] = element ; } } } // Amaga i esborra markers actuals for (var i=0; i < gmarkers.length; i++) { gmarkers[i].setMap(null); } gmarkers = []; // pinta'ls al mapa if (municipis && elements) { pintaElements(elements); } espera(-1); } }); } function opcionsCriteris(criteris, id_criteri, nom_criteri) { var criterisOrdenats = criteris.slice(0).sort(function(a,b) { if (a.ordre !== null && a.ordre !== undefined) return a.ordre - b.ordre; else return (a[nom_criteri] < b[nom_criteri] ? -1:1); } ); var c; var html = "" for (c in criterisOrdenats) { //style='background-image:url(https://cdn0.iconfinder.com/data/icons/web-8/106/MagicStar-20.png);' var id = criterisOrdenats[c][id_criteri]; var criteri = criterisOrdenats[c][nom_criteri]; if (criteri !== undefined ) { if (nom_criteri == "tipus") { var url = criterisOrdenats[c]["icona"].false.url; html = html + '<option value="' + id + '" class="optionCustom" style="background-image:url(http://www.poblesdecatalunya.cat'+url+');"> <img src="http://www.poblesdecatalunya.cat'+url+'"> ' + criteri + '</option>' } else { html = html + '<option value="' + id + '">' + criteri + '</option>' } } } return html; } function canviaEstil(e) { var id_estil_seleccionat = $(e).val() || []; if ('*' == id_estil_seleccionat[0] || id_estil_seleccionat.length == 0) { $(e).val('*'); estilsSeleccionats = ['*']; } else { estilsSeleccionats = []; for (i in id_estil_seleccionat) estilsSeleccionats.push(parseInt(id_estil_seleccionat[i])); } // Filtra els elements visibles/no visibles filtraElements(elements, filtreElements); } function canviaTipus(e) { var id_tipus_seleccionat = $(e).val() || []; if ('*' == id_tipus_seleccionat[0] || id_tipus_seleccionat.length == 0) { $(e).val('*'); tipusSeleccionats = ['*']; } else { tipusSeleccionats = []; for (i in id_tipus_seleccionat) tipusSeleccionats.push(parseInt(id_tipus_seleccionat[i])) ; } filtraElements(elements, filtreElements); } function canviaPeriode(e) { var id_periode_seleccionat = $(e).val() || []; if ('*' == id_periode_seleccionat[0] || id_periode_seleccionat.length == 0) { $(e).val('*'); periodesSeleccionats = ['*']; } else { periodesSeleccionats = []; for (i in id_periode_seleccionat) periodesSeleccionats.push(parseInt(id_periode_seleccionat[i])); } filtraElements(elements, filtreElements); } function creaDivEspera() { var wrapper = document.createElement('div'); wrapper.id = 'wrapperEspera'; wrapper.innerHTML = '<img src="/img/spiffygif_42x42.gif" alt="Espera"/>'; return wrapper; } function creaDivFiltres() { var wrapper = document.createElement('div'); wrapper.id = "wrapperFiltres"; var selectEstils = "<select class=\"selectpicker\" multiple title=\"Tots\" data-width=\"200px\" id=\"selectEstils\" onchange=\"canviaEstil(this)\">" + opcionsCriteris(estils, "id_estil", "estil") + "</select>\n"; var selectTipus = "<select class=\"selectpicker\" data-width=\"200px\" multiple title=\"Tots\" id=\"selectTipus\" onchange=\"canviaTipus(this)\">" + opcionsCriteris(tipus, "id_tipus", "tipus") + "</select>\n"; var selectPeriodes = "<select class=\"selectpicker\" multiple data-width=\"200px\" title=\"Tots\" id=\"selectPeriodes\" onchange=\"canviaPeriode(this)\">" + opcionsCriteris(periodes, "id_periode", "periode") + "</select>\n"; var html = "<p class='text-right'><a id='btnShowMenu' class='btn btn-primary' href='#' onclick='showMenu()' style='margin-right:8px;'><i class='glyphicon glyphicon-menu-hamburger'></i> Men煤</a></p><div id=\"divEstils\" style=\"background:transparent;\">" + "<div id=\"mtc\"></div>" + "<form id=\"formFiltre\">" + "<label for=\"selectTipus\">Tipus</label><br/>" + selectTipus + "<br/>" + "<label for=\"selectPeriodes\">Per铆ode</label><br/>" + selectPeriodes + "<br/>" + "<label for=\"selectEstils\">Estils</label><br/>" + selectEstils + "<br/>" + "</form>" + "</div>"; wrapper.innerHTML = html; return wrapper; } //]]> </script> </body> </html>