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: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Im >> Auftrag von Bjorn Sandvik >> Gesendet: Donnerstag, 3. April 2008 23:05 >> An: [email protected] >> 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 >> [email protected] >> http://openlayers.org/mailman/listinfo/users >> >> >> >> > > > -- The University of Edinburgh is a charitable body, registered in Scotland, with registration number SC005336. _______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users
