[OpenLayers-Users] Proportional Symbol Mapping

Bjorn Sandvik B.Sandvik at sms.ed.ac.uk
Sat Apr 5 14:27:50 EDT 2008


Hi Arnd,

Thank you for sharing this solution!
It seems to work on: 
http://localhost/thematicmapping/experiments/openlayers/propsymbols2.html

Do you think that this solution will have some performance issues due to 
more "complex" polygons?
The good thing is that no event handling is needed when the user zoom 
the map.

Bjorn

Arnd Wippermann wrote:
> Hi Bjorn,
>
> Looking with interest at your map, I have a workaround. You can draw a
> regular polygon with enough corners to look like a circle.
>
> I have taken your code to test it. It seems to do what you want. It works
> for OL 2.5 and 2.6, but with 2.6 the hover is broken.
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
>   <title>Open Layers Example</title>
>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
>   <style type="text/css">
>     html, body { height: 100%; }
>     body {
>     margin:0px;
>     background-color:white;
>     overflow:hidden;
>     font-family:Arial;
>     }
>     #map {
>       width: 100%;
>       height: 100%;
>     }
>    </style>
>     <script src="OpenLayers_2.5_R4878_full_decimal.js"></script>
> <!--    <script src="OpenLayers_2.6a_RC1.js"></script> -->
>     <script type="text/javascript">
>         var lon = 5;
>         var lat = 40;
>         var zoom = 3;
>         var map, layer, vectors;
>
>         function init(){
>             var options = {
>                 numZoomLevels: 6,
>             };
>             map = new OpenLayers.Map( 'map', options );
>             wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
>                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
>
>             naturalearth = new OpenLayers.Layer.TMS( "Natural Earth",
> "http://thematicmapping.org/maptiles/", {layername: 'naturalearth',
> serviceVersion: '.', type:'png'} );
>
>
>             vectors  = new OpenLayers.Layer.Vector("N-Eck Layer");
>             //vectors.setVisibility(false, true);
>             map.addLayers([wms, naturalearth, vectors]);
>
>             OpenLayers.loadURL("data/internet_users_2005_symbol.json", {},
> null, onLoad, onLoadFailed);
>             map.addControl(new OpenLayers.Control.LayerSwitcher());
>             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
>             map.addControl(new OpenLayers.Control.MousePosition());
>
>            var options = {
>                hover: true,
>                 onSelect: serialize
>             };
>             var select = new OpenLayers.Control.SelectFeature(vectors,
> options);
>             map.addControl(select);
>             select.activate();
>
>             vectors.setVisibility(true, true);
>
>         }
>
>         function onLoad(r) {
>             if (r.status == 200) {
>                 var parser = new OpenLayers.Format.GeoJSON();
>                 var features = parser.read(r.responseText);
>
>                 for (var i = 0; i < features.length; i++) {
>
>                     var feature = features[i];
>                     var value = feature.attributes['value'];
>                     var name = feature.attributes['name'];
>                     var pop = feature.attributes['population'];
>
>                     //Openlayers.Geometry.Point
>                     var origin = {};
>                     origin.x = features[i].geometry.x;
>                     origin.y = features[i].geometry.y;
>
>                     var objF =
> OpenLayers.Geometry.Polygon.createRegularPolygon(origin, (3 + (pop * (40 /
> 1312978855)))/5.5, 25, 0);
>
>                     //Erstelle feature
>                     var theFeature = new
> OpenLayers.Feature.Vector(objF,null,null);
>                     theFeature.style = OpenLayers.Util.extend({},
> OpenLayers.Feature.Vector.style['default']);
>
>                     theFeature.style.fillOpacity = 0.9;
>                     theFeature.style.fillColor =
> feature.attributes['colour'];
>
>                     theFeature.attributes['value']      = value;
>                     theFeature.attributes['name']       = name;
>                     theFeature.attributes['population'] = pop;
>
>                     //add feature
>                     vectors.addFeatures(theFeature);
>
>                 }
>                 vectors.renderer.clear();
>                 vectors.moveTo(null, true); // Error in IE
>
>                 features = null;
>
>             }
>         }
>
>         function onLoadFailed(r) {
>             //something went wrong
>         }
>
>         function serialize() {
>                 //code
>                 var Msg = vectors.selectedFeatures[0].attributes["name"] + "
> : ";
>                 Msg    +=
> vectors.selectedFeatures[0].attributes["population"] + " : ";
>                 Msg    += vectors.selectedFeatures[0].attributes["value"];
>                 document.getElementById("value").innerHTML = Msg;
>         }
>
>
>     </script>
>
>   </head>
>   <body onload="init()">
>     <div id="map"></div>
>     <div id="value"
> style="position:absolute;left:10px;bottom:10px;border:2px solid
> #AAAAFF;padding:2px;background-color:#CCCCCC"></div>
>   </body>
> </html> 
>
> -----Ursprüngliche Nachricht-----
> Von: users-bounces at openlayers.org [mailto:users-bounces at openlayers.org] Im
> Auftrag von Bjorn Sandvik
> Gesendet: Donnerstag, 3. April 2008 23:05
> An: users at openlayers.org
> Betreff: [OpenLayers-Users] Proportional Symbol Mapping
>
> Hi,
>
> I'm currently testing the capabilities of doing thematic mapping with
> OpenLayers.
>
> This is a proportional symbol map based on GeoJSON encoded data:
> http://thematicmapping.org/experiments/openlayers_propsymb.htm
>
> My question: Is there a way to keep the relative size of the symbols when
> the users zoom in/out?
> (symbols should keep their size relative to the size of the countries).
>
> Bjorn
>
> http://blog.thematicmapping.org
>
>
>
>
> --
> The University of Edinburgh is a charitable body, registered in Scotland,
> with registration number SC005336.
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
>
>   


-- 
The University of Edinburgh is a charitable body, registered in
Scotland, with registration number SC005336.




More information about the Users mailing list