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 OpenLayers 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:

<!DOCTYPE html>
<html lang='en'>
<meta charset='utf-8' />
    <style type="text/css">
        /* 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});


<body onLoad="init()">
<div id="map"></div>

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

|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

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.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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