Since you are using a KML file with attributes in the ExtendedData section, you need to tell the KML parser to use a simple attribute key:value model if you want to write rule based styling without an additional conversion function.

new OpenLayers.Format.KML({
               extractStyles: false,
               extractAttributes: true,
kvpAttribures: true, // <- THAT is the important part you are missing
               srsName: "EPSG:900913"
            })

Matt Priour


On 12/14/2012 6:53 AM, [email protected] wrote:
OL Users,

I can't get the rule-base styling to work on a KML file.

Please find below my JS, HTML and KML files.

I would appreciate very much if someone could help me.

I examined the examples, read the documentation and double checked the KML file structure. Evertyhing indicate that the rule-based styling should work, but it doesn't.

I created a simple kml file with one attribute for each placemark. I can get the attributes rendered as labels, but I can not do the rule-based styling to work It looks like the rules are not being evaluated because I only get the elseifFilter style result rendered. It does not evaluate the other two EQUAL_TO rules, or any other Filter.Comparison rule.

Thanks in advance,

Reinaldo

*** JS FILE **************************************
var map = new OpenLayers.Map("map");

var vector_style = new OpenLayers.Style(
  {
        fillColor: "#00ff00",
        fillOpacity: 0.1,
        strokeWidth: 1,
        strokeColor: "#0000ff",
        strokeOpacity: 4,
//        label: '${state}',
//        fontColor: "#ff0000",
//        fontFamily: "sans-serif",
//        fontSize: "10px",
//        fontWeight: "bold"
},
//{
//context: {
//state: function(feature){ return feature.attributes.SUMMER.value; }
//}},
  {
   rules: [
     new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.EQUAL_TO,
            property: "SUMMER",
            value: 1000.123
          }),
            symbolizer: {
           fillColor: "#ff0000",
           fillOpacity: 1.0,
           strokeWidth: 1,
           strokeColor: "#ff0000",
           strokeOpacity: 4,
          }
         }),
     new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.EQUAL_TO,
            property: "SUMMER",
            value: 2000.123
          }),
            symbolizer: {
           fillColor: "#00ff00",
           fillOpacity: 1.0,
           strokeWidth: 1,
           strokeColor: "#00ff00",
           strokeOpacity: 4,
          }
         }),
     new OpenLayers.Rule({
         // apply this rule if no others apply
            elseFilter: true,
            symbolizer: {
               fillColor: "#ffff00",
               fillOpacity: 1.0,
               strokeWidth: 1,
               strokeColor: "#ffffff",
               strokeOpacity: 4,
              }
         })
     ]
  }
);

var vector_style_map = new OpenLayers.StyleMap({
'default': vector_style
});

var vectorlayer = new OpenLayers.Layer.Vector("SOLAR RAD BAHIA", {
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
           url: "kml/ba_diff_simple1.kml",
            format: new OpenLayers.Format.KML({
               extractStyles: false,
               extractAttributes: true,
               srsName: "EPSG:900913"
            })
        }),
        styleMap: vector_style_map
});

var googleLayer = new OpenLayers.Layer.Google("Google Satellite",
            {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
        );

map.addLayers([googleLayer, vectorlayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();

*** HTML FILE **************************************
<!DOCTYPE html>
<html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; ">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false";></script>
<style type="text/css">
#map {
    width: 600px;
    height: 450px;
    border: 1px solid black;
}
</style>
    </head>
    <body>
        <h1 id="title">OpenLayers Example</h1>
        <div id="tags">simple, basic, light</div>
        <div id="map" class="smallmap"></div>
        <script src="../lib/OpenLayers.js"></script>
        <script src="example1.js"></script>
    </body>
</html>

*** KML FILE **************************************
<kml xmlns="http://www.opengis.net/kml/2.2";>
  <Document>
    <Folder>
      <name>diffuse_summer</name>
      <Schema name="ba_diffuse_summer" id="ba_summerId">
    <SimpleField name="SUMMER" type="double"></SimpleField>
      </Schema>
      <Placemark>
        <Style>
          <LineStyle>
            <color>ff0000ff</color>
          </LineStyle>
          <PolyStyle>
            <fill>0</fill>
          </PolyStyle>
        </Style>
        <ExtendedData>
          <SchemaData schemaUrl="#ba_summerId">
            <SimpleData name="SUMMER">1000.123</SimpleData>
          </SchemaData>
        </ExtendedData>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
<coordinates>-39.551991120000018,-8.654038020000009 -39.461196960000017,-8.650702980000011 -39.457748160000023,-8.738279009999998 -39.54856104000001,-8.741648970000023 -39.551991120000018,-8.654038020000009</coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <Style>
          <LineStyle>
            <color>ff0000ff</color>
          </LineStyle>
          <PolyStyle>
            <fill>0</fill>
          </PolyStyle>
        </Style>
        <ExtendedData>
          <SchemaData schemaUrl="#ba_summerId">
            <SimpleData name="SUMMER">2000.123</SimpleData>
          </SchemaData>
        </ExtendedData>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
<coordinates>-39.370407120000024,-8.647350030000021 -39.27961296000003,-8.643977999999999 -39.27612708000003,-8.731485000000008 -39.366936000000003,-8.734890960000024 -39.370407120000024,-8.647350030000021</coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <Style>
          <LineStyle>
            <color>ff0000ff</color>
          </LineStyle>
          <PolyStyle>
            <fill>0</fill>
          </PolyStyle>
        </Style>
        <ExtendedData>
          <SchemaData schemaUrl="#ba_diffuse_summerId">
            <SimpleData name="SUMMER">3000.123</SimpleData>
          </SchemaData>
        </ExtendedData>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
<coordinates>-41.365158120000011,-8.805078990000009 -41.274315,-8.802090000000005 -41.271233040000013,-8.890313040000013 -41.362098840000023,-8.893332990000021 -41.365158120000011,-8.805078990000009</coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
    </Folder>
  </Document>
</kml>



------------------------------------------------------------------------

Reinaldo Escada Chohfi
Sócio Gerente
GeoDesign Internacional
www.geodesign.com.br <http://www.geodesign.com.br>
Tel./Fax: (12) 3153-5115

Inteligência e Tecnologia Espacial de Ponta



_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users

_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users

Reply via email to