| /trunk/applications/rendu/squelettes/js/rendu.js |
|---|
| New file |
| 0,0 → 1,363 |
| var map = null; |
| var tableau_marqueurs = new Array(); |
| var infowindow = new google.maps.InfoWindow(); |
| var infos_observations = new Array(); |
| var type_espece = '0'; |
| var espece = '0'; |
| var evenement = '0'; |
| var annee = '0'; |
| var mois = '1'; |
| var departement = '0'; |
| function getUrlBaseJrest() { |
| url_page_courante = document.URL; |
| if(url_page_courante.indexOf('http://www.') != -1) { |
| return urlBaseJrest; |
| } else { |
| return urlBaseJrest.replace('http://www.','http://'); |
| } |
| } |
| function traiterParametresUrl() { |
| var vars = [], hash; |
| var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); |
| for(var i = 0; i < hashes.length; i++) |
| { |
| hash = hashes[i].split('='); |
| vars.push(hash[0]); |
| vars[hash[0]] = hash[1]; |
| } |
| if(vars['type_espece'] != null) { |
| type_espece = vars['type_espece']; |
| $('#selecteur_liste_types_especes').val(type_espece); |
| } |
| if(vars['espece'] != null) { |
| if(type_espece != '0') { |
| modifierTableauEspeces(); |
| } |
| espece = vars['espece']; |
| $('#selecteur_especes').val(espece); |
| } |
| if(vars['evenement'] != null) { |
| if(espece != 0) { |
| modifierTableauEvenement() |
| } |
| evenement = vars['evenement']; |
| $('#selecteur_evenements').val(evenement); |
| } |
| if(vars['annee'] != null) { |
| annee = vars['annee']; |
| $('#selecteur_liste_annees').val(annee); |
| } else { |
| date = new Date() |
| annee = date.getFullYear(); |
| $('#selecteur_liste_annees').val(annee); |
| } |
| if(vars['mois'] != null) { |
| mois = vars['mois']; |
| } else { |
| date = new Date() |
| mois = date.getMonth() + 1; |
| } |
| if(vars['departement'] != null) { |
| departement = vars['departement']; |
| } |
| if(vars['cacher_criteres'] != null && vars['cacher_criteres'] == '1') { |
| $(".criteres").hide(); |
| } |
| } |
| function obtenirCodeWidget() { |
| var UrlBase = window.location; |
| UrlBase += '?'; |
| if(type_espece != '0') UrlBase += "type_espece="+type_espece; |
| if(espece != '0') UrlBase += "&espece="+espece; |
| if(evenement != '0') UrlBase += "&evenement="+evenement; |
| if(annee != '0') UrlBase += "&annee="+annee; |
| if(mois != '0') UrlBase += "&mois="+mois; |
| UrlBase += "&cacher_criteres=1"; |
| code_widget = '<iframe src="'+UrlBase+'" width="375px" height="470px"><p>Votre navigateur ne supporte pas les iframes.</p></iframe>' |
| return code_widget; |
| } |
| $('#lien_cette_recherche').ready(function() { |
| $('#lien_cette_recherche').click(function() { |
| window.alert(obtenirCodeWidget()); |
| return false; |
| }); |
| }); |
| $(document).ready(function() { |
| traiterParametresUrl(); |
| }); |
| /** |
| ************************************************************************************************ |
| ************************************************************************************************ |
| Fonctions concernant les gestion des filtres sur la carte |
| ************************************************************************************************ |
| ************************************************************************************************ |
| **/ |
| function initialiserSliderDates() { |
| dates = new Array("jan","fev","mar","avr","mai","jun","jui","aou","sep","oct","nov","dec"); |
| $("#slider_date").slider({ |
| min: 1, |
| max: 13, |
| value: mois |
| }); |
| taille_criteres = Math.round($("#slider_date").width()/(dates.length)); |
| valeurs_slider = '<table id="table_dates"><tbody><tr>'; |
| for (i in dates) { |
| valeurs_slider += '<td class="conteneur_date">'+dates[i]+'</td>'; |
| } |
| valeurs_slider += '</tr></tbody></table>'; |
| $("conteneur_date").css(".conteneur_date{ width:"+taille_criteres+"px;}"); |
| $("#valeurs_date").html(valeurs_slider); |
| $("#slider_date").bind("slide", function(event, ui) { |
| mois = $("#slider_date").slider("value"); |
| obtenirObservations(); |
| return true; |
| }); |
| $(window).bind("resize", resizeWindow); |
| function resizeWindow( e ) { |
| taille_criteres = Math.round($("#slider_date").width()/(dates.length)); |
| $("#css_slider").html(".conteneur_date{ width:"+taille_criteres+"px;}"); |
| } |
| } |
| function initialiserListeTypesEspeces() { |
| $('#selecteur_liste_types_especes').change(function() { |
| type_espece = $('select#selecteur_liste_types_especes option:selected').val(); |
| modifierTableauEspeces(); |
| obtenirObservations(); |
| }); |
| } |
| function modifierTableauEspeces() { |
| id_type_espece = $('select#selecteur_liste_types_especes option:selected').val(); |
| $elements_liste = tableau_especes[id_type_espece]; |
| chaine_elements_liste = ''; |
| chaine_elements_liste = '<option value="0" class="espece_type_0" selected="selected"> toutes les espèces </option>'; |
| for(i in $elements_liste) { |
| chaine_elements_liste += '<option value='+i+'>'+$elements_liste[i]+'</option>'; |
| } |
| $('#selecteur_especes').html(chaine_elements_liste); |
| } |
| function initialiserListeEspeces() { |
| $('#selecteur_especes').change(function() { |
| espece = $('select#selecteur_especes option:selected').val(); |
| modifierTableauEvenements(); |
| obtenirObservations(); |
| }); |
| } |
| function modifierTableauEvenements() { |
| id_espece = $('select#selecteur_especes option:selected').val(); |
| $elements_liste = tableau_evenements_especes[id_espece]; |
| $elements_liste = $elements_liste.split(','); |
| chaine_elements_liste = ''; |
| chaine_elements_liste = '<option value="0" class="espece_type_0" selected="selected"> tous les evènements </option>'; |
| for(i in $elements_liste) { |
| chaine_elements_liste += '<option value='+$elements_liste[i]+'>'+tableau_evenements[$elements_liste[i]]+'</option>'; |
| } |
| $('#selecteur_evenements').html(chaine_elements_liste); |
| } |
| function initialiserListeEvenements() { |
| $('#selecteur_evenements').change(function() { |
| evenement = $('select#selecteur_evenements option:selected').val(); |
| obtenirObservations(); |
| }); |
| } |
| function initialiserListeAnnees() { |
| $('#selecteur_liste_annees').change(function() { |
| annee = $('select#selecteur_liste_annees option:selected').val(); |
| obtenirObservations(); |
| }); |
| } |
| $('#slider_date').ready(function() { |
| initialiserSliderDates(); |
| initialiserListeTypesEspeces(); |
| initialiserListeEspeces(); |
| initialiserListeEvenements(); |
| initialiserListeAnnees(); |
| obtenirObservations(); |
| }); |
| /** |
| ************************************************************************************************ |
| ************************************************************************************************ |
| Fonctions concernant la carte permettant de pointer d'afficher l'emplacement des observation |
| ************************************************************************************************ |
| ************************************************************************************************ |
| **/ |
| function initialiserCarte() { |
| if($('#map_canvas').length == 0) { |
| return; |
| } |
| var latlng = new google.maps.LatLng(47.0504, 2.2347); |
| var myOptions = { |
| zoom: 5, |
| center: latlng, |
| mapTypeId: google.maps.MapTypeId.HYBRID |
| }; |
| map = new google.maps.Map(document.getElementById("map_canvas"), |
| myOptions); |
| marker = new google.maps.Marker({ |
| position: latlng, |
| title:"" |
| }); |
| } |
| function obtenirObservations() { |
| requete = '?annee='+annee+'&mois='+mois; |
| if(type_espece != '0' && espece == '0') { |
| requete += '&type_espece='+type_espece; |
| } |
| if(espece != '0') { |
| requete += '&espece='+espece; |
| } |
| if(evenement != '0') { |
| requete += '&evenement='+evenement; |
| } |
| if(departement != '0') { |
| requete += '&departement='+departement; |
| } |
| $.get(getUrlBaseJrest()+'OdsExport/ExportObservationJson/'+requete, function(data) { |
| infos_observations = jQuery.parseJSON(data); |
| if(tableau_marqueurs.length > 0) { |
| viderMarqueurs(); |
| } |
| for(i in infos_observations) { |
| creerEtAjouterMarqueur(i, infos_observations[i]); |
| } |
| }); |
| } |
| function creerEtAjouterMarqueur(id_marqueur, infos_obs) { |
| latlng = new google.maps.LatLng(infos_obs['latitude'],infos_obs['longitude']); |
| tableau_marqueurs[id_marqueur] = new google.maps.Marker({ |
| position: latlng, |
| title:infos_obs.evenenement |
| }); |
| google.maps.event.addListener(tableau_marqueurs[id_marqueur], 'click', function() { |
| contenu_fenetre = formaterContenuFenetre(infos_obs.obs); |
| infowindow.close(); |
| infowindow.content = contenu_fenetre; |
| infowindow.open(map,this); |
| }); |
| tableau_marqueurs[id_marqueur].setDraggable(false); |
| tableau_marqueurs[id_marqueur].setClickable(true); |
| tableau_marqueurs[id_marqueur].setMap(map); |
| } |
| function viderMarqueurs() { |
| infowindow.close(); |
| for(i in tableau_marqueurs) { |
| tableau_marqueurs[i].setMap(null); |
| } |
| tableau_marqueurs = new Array(); |
| } |
| function obtenirMarqueurPourStade(stade) { |
| iconeStade = '../images/marqueur_'+stade+'.png'; |
| return iconeStade; |
| } |
| function formaterContenuFenetre(infos_obs) { |
| contenu_fenetre = ''; |
| for(i in infos_obs) { |
| nom_stade =''; |
| if(infos_obs[i].code_bbch != '') { |
| nom_stade = ' stade '+infos_obs[i].code_bbch; |
| } |
| contenu_fenetre += '<div class="fenetre_infos">'; |
| contenu_fenetre += '<div class="nom_sci">'+infos_obs[i].nom_scientifique+'</div>'; |
| contenu_fenetre += '<div class="nom_sci">'+infos_obs[i].evenenement+nom_stade+'</div>'; |
| contenu_fenetre += '<div class="date_obs"> Observé le : '+infos_obs[i].date+' </div>'; |
| contenu_fenetre += '</div><br />'; |
| } |
| return contenu_fenetre; |
| } |
| $('#map_canvas').ready(function() { |
| initialiserCarte(); |
| }); |
| /trunk/applications/rendu/squelettes/js/iconmaker.js |
|---|
| New file |
| 0,0 → 1,228 |
| /** |
| * @name MapIconMaker |
| * @version 1.1 |
| * @author Pamela Fox |
| * @copyright (c) 2008 Pamela Fox |
| * @fileoverview This gives you static functions for creating dynamically |
| * sized and colored marker icons using the Charts API marker output. |
| */ |
| /* |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| /** |
| * @name MarkerIconOptions |
| * @class This class represents optional arguments to {@link createMarkerIcon}, |
| * {@link createFlatIcon}, or {@link createLabeledMarkerIcon}. Each of the |
| * functions use a subset of these arguments. See the function descriptions |
| * for the list of supported options. |
| * @property {Number} [width=32] Specifies, in pixels, the width of the icon. |
| * The width may include some blank space on the side, depending on the |
| * height of the icon, as the icon will scale its shape proportionately. |
| * @property {Number} [height=32] Specifies, in pixels, the height of the icon. |
| * @property {String} [primaryColor="#ff0000"] Specifies, as a hexadecimal |
| * string, the color used for the majority of the icon body. |
| * @property {String} [cornerColor="#ffffff"] Specifies, as a hexadecimal |
| * string, the color used for the top corner of the icon. If you'd like the |
| * icon to have a consistent color, make the this the same as the |
| * {@link primaryColor}. |
| * @property {String} [strokeColor="#000000"] Specifies, as a hexadecimal |
| * string, the color used for the outside line (stroke) of the icon. |
| * @property {String} [shadowColor="#000000"] Specifies, as a hexadecimal |
| * string, the color used for the shadow of the icon. |
| * @property {String} [label=""] Specifies a character or string to display |
| * inside the body of the icon. Generally, one or two characters looks best. |
| * @property {String} [labelColor="#000000"] Specifies, as a hexadecimal |
| * string, the color used for the label text. |
| * @property {Number} [labelSize=0] Specifies, in pixels, the size of the label |
| * text. If set to 0, the text auto-sizes to fit the icon body. |
| * @property {String} [shape="circle"] Specifies shape of the icon. Current |
| * options are "circle" for a circle or "roundrect" for a rounded rectangle. |
| * @property {Boolean} [addStar = false] Specifies whether to add a star to the |
| * edge of the icon. |
| * @property {String} [starPrimaryColor="#FFFF00"] Specifies, as a hexadecimal |
| * string, the color used for the star body. |
| * @property {String} [starStrokeColor="#0000FF"] Specifies, as a hexadecimal |
| * string, the color used for the outside line (stroke) of the star. |
| */ |
| /** |
| * This namespace contains functions that you can use to easily create |
| * dynamically sized, colored, and labeled icons. |
| * @namespace |
| */ |
| var MapIconMaker = {}; |
| /** |
| * Creates an icon based on the specified options in the |
| * {@link MarkerIconOptions} argument. |
| * Supported options are: width, height, primaryColor, |
| * strokeColor, and cornerColor. |
| * @param {MarkerIconOptions} [opts] |
| * @return {GIcon} |
| */ |
| MapIconMaker.createMarkerIcon = function (opts) { |
| var width = opts.width || 32; |
| var height = opts.height || 32; |
| var primaryColor = opts.primaryColor || "#ff0000"; |
| var strokeColor = opts.strokeColor || "#000000"; |
| var cornerColor = opts.cornerColor || "#ffffff"; |
| var baseUrl = "http://chart.apis.google.com/chart?cht=mm"; |
| var iconUrl = baseUrl + "&chs=" + width + "x" + height + |
| "&chco=" + cornerColor.replace("#", "") + "," + |
| primaryColor.replace("#", "") + "," + |
| strokeColor.replace("#", "") + "&ext=.png"; |
| var icon = new GIcon(G_DEFAULT_ICON); |
| icon.image = iconUrl; |
| icon.iconSize = new GSize(width, height); |
| icon.shadowSize = new GSize(Math.floor(width * 1.6), height); |
| icon.iconAnchor = new GPoint(width / 2, height); |
| icon.infoWindowAnchor = new GPoint(width / 2, Math.floor(height / 12)); |
| icon.printImage = iconUrl + "&chof=gif"; |
| icon.mozPrintImage = iconUrl + "&chf=bg,s,ECECD8" + "&chof=gif"; |
| iconUrl = baseUrl + "&chs=" + width + "x" + height + |
| "&chco=" + cornerColor.replace("#", "") + "," + |
| primaryColor.replace("#", "") + "," + |
| strokeColor.replace("#", ""); |
| icon.transparent = iconUrl + "&chf=a,s,ffffff11&ext=.png"; |
| icon.imageMap = [ |
| width / 2, height, |
| (7 / 16) * width, (5 / 8) * height, |
| (5 / 16) * width, (7 / 16) * height, |
| (7 / 32) * width, (5 / 16) * height, |
| (5 / 16) * width, (1 / 8) * height, |
| (1 / 2) * width, 0, |
| (11 / 16) * width, (1 / 8) * height, |
| (25 / 32) * width, (5 / 16) * height, |
| (11 / 16) * width, (7 / 16) * height, |
| (9 / 16) * width, (5 / 8) * height |
| ]; |
| for (var i = 0; i < icon.imageMap.length; i++) { |
| icon.imageMap[i] = parseInt(icon.imageMap[i]); |
| } |
| return icon; |
| }; |
| /** |
| * Creates a flat icon based on the specified options in the |
| * {@link MarkerIconOptions} argument. |
| * Supported options are: width, height, primaryColor, |
| * shadowColor, label, labelColor, labelSize, and shape.. |
| * @param {MarkerIconOptions} [opts] |
| * @return {GIcon} |
| */ |
| MapIconMaker.createFlatIcon = function (opts) { |
| var width = opts.width || 32; |
| var height = opts.height || 32; |
| var primaryColor = opts.primaryColor || "#ff0000"; |
| var shadowColor = opts.shadowColor || "#000000"; |
| var label = MapIconMaker.escapeUserText_(opts.label) || ""; |
| var labelColor = opts.labelColor || "#000000"; |
| var labelSize = opts.labelSize || 0; |
| var shape = opts.shape || "circle"; |
| var shapeCode = (shape === "circle") ? "it" : "itr"; |
| var baseUrl = "http://chart.apis.google.com/chart?cht=" + shapeCode; |
| var iconUrl = baseUrl + "&chs=" + width + "x" + height + |
| "&chco=" + primaryColor.replace("#", "") + "," + |
| shadowColor.replace("#", "") + "ff,ffffff01" + |
| "&chl=" + label + "&chx=" + labelColor.replace("#", "") + |
| "," + labelSize; |
| var icon = new GIcon(G_DEFAULT_ICON); |
| icon.image = iconUrl + "&chf=bg,s,00000000" + "&ext=.png"; |
| icon.iconSize = new GSize(width, height); |
| icon.shadowSize = new GSize(0, 0); |
| icon.iconAnchor = new GPoint(width / 2, height / 2); |
| icon.infoWindowAnchor = new GPoint(width / 2, height / 2); |
| icon.printImage = iconUrl + "&chof=gif"; |
| icon.mozPrintImage = iconUrl + "&chf=bg,s,ECECD8" + "&chof=gif"; |
| icon.transparent = iconUrl + "&chf=a,s,ffffff01&ext=.png"; |
| icon.imageMap = []; |
| if (shapeCode === "itr") { |
| icon.imageMap = [0, 0, width, 0, width, height, 0, height]; |
| } else { |
| var polyNumSides = 8; |
| var polySideLength = 360 / polyNumSides; |
| var polyRadius = Math.min(width, height) / 2; |
| for (var a = 0; a < (polyNumSides + 1); a++) { |
| var aRad = polySideLength * a * (Math.PI / 180); |
| var pixelX = polyRadius + polyRadius * Math.cos(aRad); |
| var pixelY = polyRadius + polyRadius * Math.sin(aRad); |
| icon.imageMap.push(parseInt(pixelX), parseInt(pixelY)); |
| } |
| } |
| return icon; |
| }; |
| /** |
| * Creates a labeled marker icon based on the specified options in the |
| * {@link MarkerIconOptions} argument. |
| * Supported options are: primaryColor, strokeColor, |
| * starPrimaryColor, starStrokeColor, label, labelColor, and addStar. |
| * @param {MarkerIconOptions} [opts] |
| * @return {GIcon} |
| */ |
| MapIconMaker.createLabeledMarkerIcon = function (opts) { |
| var primaryColor = opts.primaryColor || "#DA7187"; |
| var strokeColor = opts.strokeColor || "#000000"; |
| var starPrimaryColor = opts.starPrimaryColor || "#FFFF00"; |
| var starStrokeColor = opts.starStrokeColor || "#0000FF"; |
| var label = MapIconMaker.escapeUserText_(opts.label) || ""; |
| var labelColor = opts.labelColor || "#000000"; |
| var addStar = opts.addStar || false; |
| var pinProgram = (addStar) ? "pin_star" : "pin"; |
| var baseUrl = "http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl="; |
| var iconUrl = baseUrl + pinProgram + "'i\\" + "'[" + label + |
| "'-2'f\\" + "hv'a\\]" + "h\\]o\\" + |
| primaryColor.replace("#", "") + "'fC\\" + |
| labelColor.replace("#", "") + "'tC\\" + |
| strokeColor.replace("#", "") + "'eC\\"; |
| if (addStar) { |
| iconUrl += starPrimaryColor.replace("#", "") + "'1C\\" + |
| starStrokeColor.replace("#", "") + "'0C\\"; |
| } |
| iconUrl += "Lauto'f\\"; |
| var icon = new GIcon(G_DEFAULT_ICON); |
| icon.image = iconUrl + "&ext=.png"; |
| icon.iconSize = (addStar) ? new GSize(23, 39) : new GSize(21, 34); |
| return icon; |
| }; |
| /** |
| * Utility function for doing special chart API escaping first, |
| * and then typical URL escaping. Must be applied to user-supplied text. |
| * @private |
| */ |
| MapIconMaker.escapeUserText_ = function (text) { |
| if (text === undefined) { |
| return null; |
| } |
| text = text.replace(/@/, "@@"); |
| text = text.replace(/\\/, "@\\"); |
| text = text.replace(/'/, "@'"); |
| text = text.replace(/\[/, "@["); |
| text = text.replace(/\]/, "@]"); |
| return encodeURIComponent(text); |
| }; |