OpenLayers – Custom Style for Individual Features
Other than the subject, what’s included here, as following:
- Add Google Map as base map
- How to create vector layer
- How to add features to vector layer
- How to use WKT and display it on Map
- How to create dynamic label, radius & fill in OpenLayers Style
- How to display label based on zoom level
// 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);
Hi
Its nice post.
I am competing my academic project using geoserver+http apache+post GIS+ext ..
In my project i want to add google map as base layer but don’t know how to fetch google map to my code.I am using open street map but ..its not looking good….can u please help me to complete my academic project. Thanks in advance
Hi,using OpenLayers is the answer. see my codes above,it does what’s exactly you need. 😉