Sign up ×
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>

share|improve this question

2 Answers 2

Have a look at my (former) course 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: 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.