[OpenLayers-Users] Proportional Symbol Mapping
Arnd Wippermann
arnd.wippermann at web.de
Sat Apr 5 17:16:36 EDT 2008
Hi Bjorn,
It seems that the 200 regular polygons behave as the 200 circles. I have
also thought, that the complex polygons would slow down the application. I
think up to 500 features the performance will be ok.
You can also think about WFS instead of WMS.
http://openlayers.org/dev/examples/wfs-reprojection.html
Mit freundlichen Grüssen
Arnd Wippermann
http://gis.ibbeck.de/ginfo/
-----Ursprüngliche Nachricht-----
Von: B.Sandvik at sms.ed.ac.uk [mailto:B.Sandvik at sms.ed.ac.uk]
Gesendet: Samstag, 5. April 2008 20:28
An: users at openlayers.org
Cc: Arnd Wippermann
Betreff: Re: AW: [OpenLayers-Users] Proportional Symbol Mapping
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