Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am still a beginner in learning GeoServer and OpenLayers. I tried to create thematic maps of the map that I publish in GeoServer. I used openlayer to show the map in web browser. When i want to create thematic maps based on data from the attributes that I have, I find the color constraints of thematic maps can not arise. What to make thematic maps should be used SLD in GeoServer?

Here this code :

indoprop /* General settings / body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: small; } / The map and the location bar */ #map { clear: both; position: relative; width: 600px; height: 600px; border: 1px solid black; }

    <script type="text/javascript" src="OpenLayers.js"></script>

        <script type="text/javascript">

            var map;
            var jogja;
            var data= new Array();

            var wilayah= new Array();
            wilayah['3401']="kulon progo";
            wilayah['3403']="gunung kidul";
            wilayah['3471']="kota yogyakarta";

            var batas = [0, 500, 1000, 2000];
            var warna = ["#EEFFFF","#6DD5FF","#19A3FF","#0048FF"];

        function init(){
            map = new OpenLayers.Map('map',{
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoom(),
                new OpenLayers.Control.ScaleLine(),
                new OpenLayers.Control.MousePosition(),

            var context = {
                getColor: function(feature){
                var id = feature.attributes.idkab;
                var val=data[id];
                var color = "white";

                var i =0;
                    if (val<batas[i+1]){
                        color = warna[i];
                    if (val !=null && color == "white"){
                        color = warna[batas.length-1];
                    return color;
                getLabel: function (feature){
                    return wilayah[feature.attributes.idkab];

            var template = {
                strokeColor: "#808080",
                strokeWidth: 1,
                graphicZIndex: 1,
                fillColor: "${getColor}",
                label: "${getLabel}",
                labelAlign: "cm"

            var style = new OpenLayers.Style(template, {context: context});
            var myStyle = new OpenLayers.StyleMap(style);

            jogja = new OpenLayers.Layer.WMS ("jogja", "http://localhost:8080/geoserver/cite/wms", {layers: 'cite:jogja', styleMap: myStyle});




<div id="map"></div>

sorry if a lot of mistakes. thanks for the positive response that you gave. I would say many thanks for all the answers that can help me because it's my final project which was a requirement for graduation from my college.

share|improve this question

2 Answers 2

Have a look at my (former) course https://www.e-education.psu.edu/geog585/ especially lessons 7 & 8 to get you started.

share|improve this answer
+1 That looks like a great resource for beginners, with step-by-step instructions and illustrations. –  whuber Jun 27 '12 at 16:39
thanks.. i'll learn it –  disna Jun 27 '12 at 18:27

I hope it is not to late to reply, I am a new user to the forum.

To do this with WMS you have to work on server side (Geoserver , Mapserver etc)

However, I found demos on how to do this on the client side (Javascript and Openlayers), but you would have to get the data from the server as WFS (with additional attributes for theme) or have the data already in memory / file.

for instance: http://openlayers.org/dev/examples/styles-unique.html the same principle should work for other geometries (not just for points)

best regards, Joaquim Muchaxo.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.