iCheck.js – jQuery plugin for checkboxes and radio buttons custom styling | Web Resources | Nacodes
lovely. 😉
Extend from this GeoServer – Custom Get Feature Info Display
Knowledge requirement – Freemaker
The standard template files is header.tpl
, content.tpl
, footer.tpl
.
header.tpl
usually where JavaScript, CSS, meta tag, title placed here.
footer.tpl
where you put your HTML page footer, Copyright, etc.
content.tpl
where we going to iterate through all the features to display interactive UI. But here, I’m going to explain the structure of all available variables.
/** features (array of Feature) [0] - fid - typeName - attributes -> name -> type -> isGeometry -> value - type -> name -> title -> abstract -> description -> keywords -> metadataLinks -> SRS -> nativeCRS [n] type (object of Feature Map) - name - attributes -> name -> type -> isGeometry **/
Accessing the variables as following:
<!-- Accessing Feature Type Name --> <h3>${type.name}</h3> <!-- Accessing Features at index 0 and assign to a variable named feature --> <#assign feature = features[0]> <!-- Get feature's attributes values and assign to a variable named attrs --> <#assign attrs = feature.attributes> <!-- Display an attribute --> <p>${attr.someFieldName.value}</p>
The result may display as below:
This is type name
some field name value
Reference: http://docs.geoserver.org/2.1.4/user/tutorials/freemarker.html
Other than the subject, what’s included here, as following:
// Create Map var map = new OpenLayers.Map('map'); // Add Google Map as base layer var base_layers = [ new OpenLayers.Layer.Google("Google Physical", { type : google.maps.MapTypeId.TERRAIN } ), new OpenLayers.Layer.Google("Google Streets", // the default { numZoomLevels : 20 } ), new OpenLayers.Layer.Google("Google Hybrid", { type : google.maps.MapTypeId.HYBRID, numZoomLevels : 20 } ), new OpenLayers.Layer.Google("Google Satellite", { type : google.maps.MapTypeId.SATELLITE, numZoomLevels : 22 } )]; // Add Base map to Map map.addLayers(base_layers); // Create a vector layer & add to the Map var v = new OpenLayers.Layer.Vector('Vector Layer'); map.addLayer(v); // Create a WKT, Read WKT and assign it's attributes / data var wkt = new OpenLayers.Format.WKT(); var feature = wkt.read('POINT(101.073433 4.665741)'); feature.attributes.label = 'this is label'; feature.attributes.radius = 10; feature.attributes.fill = '#ff0000'; // Create a custom style for above WKT // fillColor will fetch it's value from feature.attributes.fill using context.getFill // label will fetch it's value from feature.attributes.label using context.getLabel // pointRadius will fetch it's value from feature.attributes.radius using context.getRadius var style = new OpenLayers.Style( { strokeColor : "#FFFFFF", strokeOpacity : 1, strokeWidth : 1, fillColor : "${getFill}", fillOpacity : 0.75, pointRadius : "${getRadius}", pointerEvents : "visiblePainted", label : "${getLabel}" }, { context : { getLabel : function (f) { // display label if the zoom level more than 12 if(f.layer.map.getZoom() > 12) { return feature.attributes.label; } return ''; }, getRadius : function (f) { return parseInt(f.attributes.radius); }, getFill : function (f) { return f.attributes.fill; } } } ); // set style name for this feature's style var styleName = 'custom_style'; // set styleName to feature.renderIntent feature.renderIntent = styleName; // add style to Vector layer style map v.styleMap.styles[styleName] = style; // add feature to Vector layer v.addFeatures([feature]); // redraw the Vector layer v.redraw(); // set center & zoom level map.setCenter(new OpenLayers.LonLat(101.073433,4.665741).transform('EPSG:4326', 'EPSG:900913'), 7);
You CSV file similar to the following:
"a",1 "b",2 "c",3 "d",4
The SQL:
COPY table_name(col1,col2) FROM 'C:UsersPublicDocumentsCSVdata.csv' WITH DELIMITER AS ',' CSV QUOTE AS '"';
References: