--- /dev/null
+\r
+\r
+ serialized = new OpenLayers.Layer.WMS.Untiled( "Your symbolized polygons",\r
+ "http://193.190.223.53:8080/geoserver/wms", {layers:'topp:serialized_pols',GROUP:'remote',sld: '../stable_sld/permanent_sld/transparent_pols.sld',transparent:"true",format:t_img_format},{opacity:1},{'reproject': false});\r
+\r
+ queryEventHandler = new OpenLayers.Handler.Click({ 'map': map }, { ondblclick: function() {alert("double click")}, \r
+ 'click': function(e) { doGetFeatureInfo(e); }}); \r
+\r
+\r
+ myStyles = new OpenLayers.StyleMap({\r
+ "first": new OpenLayers.Style({\r
+ // pointRadius: "20", // sized according to type attribute\r
+ fillColor: "#bcf099",\r
+ strokeColor: "#3399ff",\r
+ strokeWidth: "2",\r
+ fillOpacity: "0.5"\r
+\r
+ }),\r
+ "default": new OpenLayers.Style({\r
+ pointRadius: "20", // sized according to type attribute\r
+ fillColor: "${color}",\r
+ fillOpacity: "${fillOpacity}",\r
+ strokeColor: "${strokeColor}",\r
+ strokeWidth: "${strokeWidth}",\r
+ strokeDashstyle: "${strokeDashstyle}"\r
+ }),\r
+ "select": new OpenLayers.Style({\r
+ fillColor: "##baa2e2",\r
+ strokeColor: "#3399ff",\r
+ fillOpacity: "0.5"\r
+ })\r
+ })\r
+\r
+ pointLayer = new OpenLayers.Layer.Vector("Point Layer",{styleMap: myStyles,GROUP:"remote"});\r
+ polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer",{GROUP:"remote",styleMap: myStyles["first"]});\r
+ \r
+ polygonLayerControl=new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon);\r
+ map.addControl(polygonLayerControl);\r
+ \r
+ \r
+ // toggle the queryEventHandler active state\r
+ function toggleQueryMode()\r
+ { \r
+\r
+ if(featureInfo.active) {\r
+ queryEventHandler.activate();\r
+ }\r
+ else {\r
+ queryEventHandler.deactivate();\r
+ }\r
+ }\r
+\r
+ \r
+\r
+\r
+\r
+function doGetFeatureInfo(evt) { \r
+ \r
+ var lonlat = map.getLonLatFromViewPortPx(evt.xy);\r
+ //console.info(lonlat);\r
+/* alert("You clicked near " + lonlat.lat + " N, " +\r
+ + lonlat.lon + " E");\r
+*/\r
+ x = parseFloat(lonlat.lon); // make into floats\r
+ y = parseFloat(lonlat.lat);\r
+ if (ppol_query=="false")\r
+ { \r
+ var ul = new Array();// x, y\r
+ var ur = new Array();\r
+ var bl = new Array();\r
+ var br = new Array();// x, y \r
+ ul[0] = x-0.1;\r
+ ul[1] = y+0.1;\r
+ bl[0]= x-0.1;\r
+ bl[1]= y-0.1;\r
+ ur[0]= x+0.1;\r
+ ur[1]= y +0.1;\r
+ br[0] = x+0.1;\r
+ br[1] = y-0.1;\r
+ bbox=[];\r
+ bbox.push(ul,bl,ur,br,ul); \r
+ \r
+//console.log("ppol_query false");\r
+ $.getScript('js_code/bind_results_sld.js');\r
+ }\r
+ else\r
+ {\r
+//console.log("ppol_query true"); \r
+ $.getScript('js_code/bind_results_ppol_adaptat.js'); \r
+ }\r
+ }\r
+\r
+/*\r
+map.addLayers([vlayer,edit_blank,edit_admin,shoreline,s_america1,s_america2,oceania1,oceania2]);\r
+shoreline.setVisibility(false);\r
+s_america1.setVisibility(false);s_america2.setVisibility(false);oceania1.setVisibility(false);oceania2.setVisibility(false);\r
+ map.setBaseLayer(edit_blank);\r
+ map.addLayer(edit_gbif);\r
+ edit_gbif.setVisibility(false);\r
+\r
+map.setCenter(bounds.getCenterLonLat(),map.getZoomForExtent(bounds));\r
+*/\r
+\r
+queryEventHandler2 = new OpenLayers.Handler.Click({ 'map': map }, { ondblclick: \r
+ function() {alert("dounle lick")}, 'click': function(e) {//\r
+ \r
+ doGetFeatureInfo(e); \r
+ }}); \r
+\r
+queryEventHandler2 = new OpenLayers.Handler.Click({ 'map': map }, { ondblclick: \r
+ function() {alert("dounle lick")}, 'click': function(e) {//\r
+ //alert("dogetfeature"); \r
+ doGetFeatureInfo(e); \r
+ }});\r
+ \r
+// toggle the queryEventHandler active state\r
+ function toggleQueryMode()\r
+ { \r
+\r
+ if(featureInfo.active) {\r
+ queryEventHandler.activate();\r
+ } \r
+ else {\r
+ queryEventHandler.deactivate();\r
+ }\r
+ }\r
+ function toggleQueryMode2()\r
+ { \r
+\r
+ if(featureInfo2.active) {\r
+ queryEventHandler.activate();\r
+ }\r
+ else {\r
+ queryEventHandler.deactivate();\r
+ }\r
+ }\r
+// map.zoomToMaxExtent(bounds);\r
+\r
+ //l'ordre influeeeix!\r
+function serialize(feature) \r
+ {\r
+\r
+ queryEventHandler.deactivate();\r
+//function(evt) {alert ('You clicked on marker m1'); OpenLayers.Event.stop (evt); }\r
+ \r
+ var wkt= new OpenLayers.Format.WKT(map.baseLayer.projection);\r
+ polygon = wkt.write(feature);\r
+ $.getScript('js_code/polygon_q_adaptat.js');\r
+\r
+ } \r
+\r
+ var f_options = {\r
+ hover: false,\r
+// highlightOnly: true,\r
+ click:true,\r
+ clickout: true,\r
+ onSelect: serialize\r
+ \r
+ };\r
+ \r
+ feature_select = new OpenLayers.Control.SelectFeature(vlayer, f_options);\r
+ //vlayer.events.register ('mouseout', vlayer, function() {alert("out")});\r
+ // feature_select\r
+ // OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';\r
+ function show_mouseover_text(evt)\r
+ {\r
+ textContent =\r
+ "The mouse is over" +\r
+ " feature '" + evt.feature.id + "'" +\r
+ " of group '" + evt.name + "'.";\r
+ // console.warn(textContent);\r
+ }\r
+\r
+\r
+ map.addControl(feature_select);\r
+ \r
+ var id=0;\r
+ var gml_serialize=function (feature)\r
+ {\r
+ // alert("sfd");\r
+\r
+ polygonLayer.setVisibility(true);\r
+\r
+\r
+\r
+ if (polygonLayer.features.length == 0) {id=0; } else { id=(polygonLayer.features.length -1);}\r
+ polygonLayer.features[id].fid=id;\r
+\r
+ html='<div id="polygon_symbolize" class="jqmdTL" style="background-size: 40%; z-index: 300;"><div class="jqmdTR"><div class="jqmdTC jqDrag">POLYGON SYMBOLIZER TOOL</div><input type="image" class="jqmdX jqmClose"/>';\r
+ html+='<form id="fill_form"><label>Polygon fill color<select style="margin-left:20px;"><option value="e4381b">red</option><option value="252ab6">blue</option><option value="617589">grey</option><option value="6ef028">green</option></select></form>';\r
+ html+='<form id="opacity_form"><label>Polygon opacity<select style="margin-left:20px;"><option value="1">100%</option><option value="0.5">50%</option><option value="0.3">30%</option><option value="0.1">10%</option><option value="0.01">0%</option></select></form>';\r
+ html+='<form id="stroke_width_form"><label>Stroke width<select style="margin-left:20px;"><option value="1">1</option><option value="2">2</option><option value="5">5</option></select></form>';\r
+ html+='<form id="stroke_color_form"><label>Polygon stroke color<select style="margin-left:20px;"><option value="e4381b">red</option><option value="252ab6">blue</option><option value="617589">grey</option><option value="6ef028">green</option></select></form>';\r
+ html+='<form id="stroke_opacity_form"><label>Stroke opacity<select style="margin-left:20px;"><option value="1">100%</option><option value="0.5">50%</option><option value="0">0%</option></select></form>';\r
+ html+='<form id="stroke_style_form"><label>Stroke style<select style="margin-left:20px;"><option value="solid">solid</option><option value="2_3">dotted</option><option value="2_7">long dotted</option><option value="4_2">short dash</option><option value="5_7">dashed</option><option value="10_5">long dashed</option><option value="10_30">Very long dashed</option></select></form>';\r
+ html+='<br><br><p>If desired, add a text to your polygon</p><br><TEXTAREA id="label" COLS=40 ROWS=3></TEXTAREA>';\r
+ html+='<form id="text_size_form"><label>Select the text size <select style="margin-left:20px;"><option value="5">5</option><option value="10">10</option><option value="30">30</option><option value="40">40</option></select></form>';\r
+ html+='</div><br> <input type="button" value="print it" id="serialize"/><div class="jqmdTC jqDrag">POLYGON SYMBOLIZER TOOL</div>';\r
+\r
+ if ($('#fill_form').length > 0)\r
+ {\r
+ $('#ex4').empty(); \r
+ $('#ex4').append(html);\r
+ }\r
+ else { $('#ex4').append(html);}\r
+ $('input.jqmdX').hover(function(){\r
+ $(this).addClass('jqmdXFocus')},function(){ $(this).removeClass('jqmdXFocus')}).focus(function(){this.hideFocus=true;$(this).addClass('jqmdXFocus')}).blur(function(){$(this).removeClass('jqmdXFocus')}).click(function(){$('#ex4').empty().hide();\r
+ });\r
+ msie=($.browser.msie==true)?true:false; \r
+ if (msie)\r
+ {\r
+\r
+ $('input.jqmdX').css('background','url(../mapviewer/img/close.gif) no-repeat top left').css('width','15px');\r
+ }\r
+ else \r
+ {\r
+ $('input.jqmdX').css('background','url(../mapviewer/img/close.gif) no-repeat top left');\r
+ }\r
+ $('input.jqmdX').hover(function(){$(this).addClass('jqmdXFocus')},function(){ $(this).removeClass('jqmdXFocus')}).focus(function(){this.hideFocus=true;$(this).addClass('jqmdXFocus')}).blur(function(){$(this).removeClass('jqmdXFocus')}).click(function(){$('#ex2').hide(); \r
+ });\r
+ $("#ex4") .jqDrag('.jqDrag')\r
+ .jqResize('.jqResize') ;\r
+\r
+ $("#ex4").animate({width:'420',height:'415'},"slow");\r
+\r
+ feature.attributes = {};\r
+\r
+ $("#ex4 input:button").click(function()\r
+ {\r
+\r
+ //defining the Feature in GML\r
+ feature.attributes['fill_color'] = $("#fill_form option:selected").val(); \r
+ feature.attributes['fill_opacity'] = $("#opacity_form option:selected").val(); \r
+ feature.attributes['stroke_color'] = $("#stroke_color_form option:selected").val();\r
+ feature.attributes['stroke_opacity'] = $("#stroke_opacity_form option:selected").val();\r
+ feature.attributes['stroke_width'] = $("#stroke_width_form option:selected").val();\r
+ feature.attributes['text_size'] = $("#text_size_form option:selected").val();\r
+ \r
+\r
+\r
+ // = $("#stroke_style_form option:selected").val();\r
+ switch ($("#stroke_style_form option:selected").val())\r
+ {\r
+ case 'solid': { feature.attributes['stroke_style']='no_style';break}\r
+ case '2_3':{ feature.attributes['stroke_style']="2 3 2 3";break;} //short dotted \r
+ case '2_7':{ feature.attributes['stroke_style']="2 7 2 7";break;} //long dotted\r
+ case '4_2':{ feature.attributes['stroke_style']="4 2 4 2";break;}\r
+ case '5_7':{feature.attributes['stroke_style']="5 7 5 7";break;}\r
+ case '10_5':{ feature.attributes['stroke_style']="10 5 10 5";break;}\r
+ case '10_30':{ feature.attributes['stroke_style']="10 30 10 30";break;} //very long dash\r
+ }\r
+ feature.attributes['label'] = $("#label").val();\r
+ feature.attributes['id'] = id;\r
+\r
+ //definint polygonLayer\r
+ polygonLayer.features[id].attributes.color=$("#fill_form option:selected").val(); \r
+ polygonLayer.features[id].attributes.fillOpacity=$("#opacity_form option:selected").val();\r
+ polygonLayer.features[id].attributes.strokeColor=$("#stroke_color_form option:selected").val();\r
+ polygonLayer.features[id].attributes.strokeWidth=$("#stroke_width_form option:selected").val();\r
+ polygonLayer.features[id].attributes.strokeDashstyle=$("#stroke_style_form option:selected").val();\r
+\r
+ polygonLayer.redraw();\r
+ //g variable is... new OpenLayers.Format.GML(); \r
+ var data = g.write(feature.layer.features); //ALL THE FEATURES will be written in g (& data) variable-->GML-->SLD\r
+ //OpenLayers.Util.getElement("gml").value = data;\r
+ var wkt= new OpenLayers.Format.WKT(map.baseLayer.projection);\r
+ to_insert = wkt.write(feature);\r
+\r
+ $.ajax({url:'../queries/data_insert.php',\r
+ processData:false, type:'GET',dataType:'text',data:'data='+to_insert+'&gid='+id+'&user='+userid,success:function()\r
+ {\r
+ // alert("polygon inserted on dbase");\r
+ //let's create SLD\r
+ $.ajax({url:'../gml_sld.php',\r
+ processData:false, type:'POST',dataType:'text',data:'data='+data+'&user='+userid,\r
+ success:function(url)\r
+ {\r
+ serialized.params.SLD=url;\r
+ if (serialized.map==null)\r
+ {\r
+ map.addLayer(serialized);\r
+ }\r
+ else{ \r
+ serialized.redraw();\r
+ }\r
+ polygonLayer.setVisibility(false);\r
+ }\r
+ })\r
+ }\r
+ });\r
+\r
+ $("input[name='Your symbolized polygons']").show().next().show();\r
+ //var text = format.write(doc);\r
+ })\r
+\r
+ } //end serialize function\r
+ vlayer.onFeatureInsert =function(){\r
+ $("input[name='Polygon to query']").show().next().show();\r
+ if (vlayer.features.length >1) {vlayer.destroyFeatures(vlayer.features[0])};\r
+ ppol_query="false"; \r
+\r
+ //user='no_user'; \r
+\r
+ feature_select.activate();\r
+ draw_to_query.deactivate();\r
+\r
+\r
+ };\r
+ polygonLayer.onFeatureInsert = gml_serialize;\r
+ var select_options = {\r
+ onClick: true,\r
+ multiple:false,\r
+ onUnselect:function(feature) {feature.selected=false;},\r
+ onSelect: function(feature) { \r
+ \r
+ polygonLayer.setVisibility(true);\r
+ feature.selected=true; \r
+ html='<div class="jqmdTL" style="background-size: 40%; z-index: 300;"><div class="jqmdTR"><div class="jqmdTC jqDrag">HOLA</div><input type="image" class="jqmdX jqmClose"/>';\r
+ html+='<b><div id="remove_div">Do you want to delete some polygon? if yes, you can select more than one (just click over it). Then, if really want to delete, just click';\r
+ html+='<button id="delete" onclick="remove()" value="Delete them!">Delete them!</button></div>';\r
+ \r
+ if ($('#remove_div').length == 0)\r
+ {\r
+ $('#ex5').empty(); \r
+ $('#ex5').append(html);\r
+\r
+msie=($.browser.msie==true)?true:false; \r
+if (msie)\r
+{$('input.jqmdX').css('background','url(../mapviewer/img/close.gif) no-repeat top left').css('width','15px');}\r
+else {$('input.jqmdX').css('background','url(../mapviewer/img/close.gif) no-repeat top left');}\r
+$('input.jqmdX').hover(function(){$(this).addClass('jqmdXFocus')},function(){ $(this).removeClass('jqmdXFocus')}).focus(function(){this.hideFocus=true;$(this).addClass('jqmdXFocus')}).blur(function(){$(this).removeClass('jqmdXFocus')}).click(function(){$('#ex2').hide(); });\r
+$("#ex5").animate({width:'280',height:'105'},"slow");\r
+ }\r
+ }\r
+ }; //END OnSelect de select_options \r
+ var select = new OpenLayers.Control.SelectFeature(polygonLayer, select_options);\r
+ map.addControl(select);\r
+ // select.activate(); \r
+\r
+\r
+\r
+ v_options = {\r
+ hover: true,\r
+ onSelect: function(feature) { \r
+ // console.warn(feature.attributes.code);\r
+ if ($("#polygon_info").length)\r
+ {\r
+ $("#polygon_info tr").each(function(i)\r
+ {\r
+ $(this).remove();\r
+\r
+\r
+ })\r
+\r
+ $("#polygon_info tbody").append('<tr><td>Polygon code: </td><td>'+feature.attributes.code+'</td></tr><tr><td>Number of genus: </td><td>'+feature.attributes.numtax+'</td></tr><tr><td>Number of records: </td><td>'+feature.attributes.numreg+'</td></tr><tr><td>Taxa/record: </td><td>'+feature.attributes.taxa_record+'</td></tr>'); \r
+\r
+\r
+ }\r
+\r
+ }\r
+ };\r
+ function v_toggle(element) {\r
+\r
+ if(element.checked==true) {\r
+ vectors.params.filter="<Filter><And><PropertyIsEqualTo><PropertyName>userid</PropertyName><Literal>"+userid+"</Literal></PropertyIsEqualTo></And></Filter>";\r
+ // v_select.activate();\r
+ if ($("#interactive_analysis_input").hasClass("first"))\r
+\r
+ {\r
+\r
+ map.addLayer(vectors);\r
+\r
+\r
+ $("#interactive_analysis_input").removeClass('first');\r
+ }\r
+ else { \r
+\r
+ vectors.setVisibility(true);\r
+\r
+ } \r
+ v_select.activate();\r
+\r
+ } \r
+ else \r
+ { \r
+ vectors.setVisibility(false);\r
+\r
+ v_select.deactivate();\r
+ }\r
+ }\r
+ myStyles2 = new OpenLayers.StyleMap({\r
+ "default": new OpenLayers.Style({ \r
+ fillColor: "#ebbc1e",\r
+ fillOpacity:0.25,\r
+ strokeColor: "#242b32",\r
+ strokeWidth: 1.5\r
+ }),\r
+ "select": new OpenLayers.Style({\r
+ fillColor: "#ee3e3a", //vermell\r
+ fillOpacity:0.5,\r
+ strokeWidth: 2,\r
+ strokeColor: "#3399ff"\r
+ })\r
+\r
+ });\r
+\r
+\r
+ vectors = new OpenLayers.Layer.WFS(\r
+ "My polygons to hover",\r
+ "http://193.190.223.53:8080/geoserver/wfs",\r
+ {typename: "topp:point_pol",\r
+ filter:"<Filter><And><PropertyIsEqualTo><PropertyName>userid</PropertyName><Literal>"+userid+"</Literal></PropertyIsEqualTo></And></Filter>"},\r
+ {isBaseLayer: false, extractAttributes: true, styleMap: myStyles2}\r
+ );\r
+ v_select = new OpenLayers.Control.SelectFeature(vectors, v_options);\r
+ map.addControl(v_select);\r
+ v_select.handlers.feature.stopDown = false;\r
+\r
+ v_select.handlers.feature.stopUp = false;\r
+\r
+ g = new OpenLayers.Format.GML();\r
+\r
+\r
+\r
+ //polygonLayer.features.attributes.color='#f9cac3';\r
BGBM BDI Projects / geo.git / blobdiff