[OpenLayers-Users] Proportional Symbol Mapping
Bjorn Sandvik
B.Sandvik at sms.ed.ac.uk
Sat Apr 5 16:51:09 EDT 2008
Correct url:
http://thematicmapping.org/experiments/openlayers/propsymbols2.html
Bjorn
Bjorn Sandvik wrote:
> 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