<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	
	>
<channel>
	<title>Comments on: OpenLayers Can Be Faster!</title>
	<atom:link href="/2010/03/19/openlayers-can-be-faster/feed/" rel="self" type="application/rss+xml" />
	<link>/2010/03/19/openlayers-can-be-faster/</link>
	<description>on web development</description>
	<lastBuildDate>Fri, 26 Oct 2018 21:40:18 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.0.3</generator>
	<item>
		<title>By: Stoimen</title>
		<link>/2010/03/19/openlayers-can-be-faster/comment-page-1/#comment-12672</link>
		<dc:creator><![CDATA[Stoimen]]></dc:creator>
		<pubDate>Mon, 22 Mar 2010 11:38:20 +0000</pubDate>
		<guid isPermaLink="false">/?p=1364#comment-12672</guid>
		<description><![CDATA[Yes, you have to register event listener for every marker, but that&#039;s really a pain. Better approach is to use event delegation, i.e. attach event listener to the marker layer DIV and than to process all the children. Thus whenever you add markers they will have this event listener attached to them, because it&#039;s attached to their parent in reality.

regards,
stoimen]]></description>
		<content:encoded><![CDATA[<p>Yes, you have to register event listener for every marker, but that&#8217;s really a pain. Better approach is to use event delegation, i.e. attach event listener to the marker layer DIV and than to process all the children. Thus whenever you add markers they will have this event listener attached to them, because it&#8217;s attached to their parent in reality.</p>
<p>regards,<br />
stoimen</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: ilotus</title>
		<link>/2010/03/19/openlayers-can-be-faster/comment-page-1/#comment-12671</link>
		<dc:creator><![CDATA[ilotus]]></dc:creator>
		<pubDate>Mon, 22 Mar 2010 10:05:03 +0000</pubDate>
		<guid isPermaLink="false">/?p=1364#comment-12671</guid>
		<description><![CDATA[Dear Stoimen,

Thanks a lot for your fast response! I&#039;ll try it! 

Other than the zoom in/out issue, i did registered a mouseover event of a popup for every marker. Without implementing the marker layer, is there anyways to register the mouseover event for the markers ?

Best Regards,
ilotus]]></description>
		<content:encoded><![CDATA[<p>Dear Stoimen,</p>
<p>Thanks a lot for your fast response! I&#8217;ll try it! </p>
<p>Other than the zoom in/out issue, i did registered a mouseover event of a popup for every marker. Without implementing the marker layer, is there anyways to register the mouseover event for the markers ?</p>
<p>Best Regards,<br />
ilotus</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Stoimen</title>
		<link>/2010/03/19/openlayers-can-be-faster/comment-page-1/#comment-12670</link>
		<dc:creator><![CDATA[Stoimen]]></dc:creator>
		<pubDate>Mon, 22 Mar 2010 08:57:23 +0000</pubDate>
		<guid isPermaLink="false">/?p=1364#comment-12670</guid>
		<description><![CDATA[Hi,

I actually noticed that all the chain from new OpenLayers.Marker is slow because once you make instance of an Icon class, than pass it as a parameter to the Marker class and than add it for every marker to the Markers Layer. 
What I think is that you basically can avoid all this, because the final result of generation of all these DOM elements is slow. Important note is to say that after changing all this process to simple innerHTML string manipulation the zoom in/out will not be as smooth as before.

Now the code may look like something like:
&lt;pre lang=&quot;javascript&quot;&gt;
for (var i = 0; i &lt; 300; i++) {
	var thumbnail = new Icon();
	var marker = new Marker(lon,lat,icon);
	map.markerLayer.addMarker(marker);
}
&lt;/pre&gt;
which is slow. What I did is that I noticed all this was producing a simply DOM nodes so I switched to string concatenation.
&lt;pre lang=&quot;javascript&quot; &gt;
var emptyString = &#039;&#039;;
for (var i = 0; i &lt; 300; i++) {
	// here i need to convert Lon Lat to pixels this is done by OpenLayers
	ll = map.getLayerPxFromLonLat(new OpenLayers.LonLat(lon,lat));	
	
	// than simply concatenate the markup to the emptyString
	emptyString +=&#039;&lt;div id=&quot;OL_Icon_&#039;+i+&#039;&quot; style=&quot;position:absolute;top:&#039;+ll.y+&#039;px;left:&#039;+ll.x+&#039;px&quot;&gt;&lt;img src=&quot;yourmarker&quot; /&gt;&lt;/div&gt;&#039;;
}
&lt;/pre&gt;
// after the loop has finished.. append all this to the dom via innerHTML, which is way faster than appendChild
markersDiv.innerHTML = emptyString;

You&#039;ll see this is very very fast comparing to the OpenLayers method. 

If you&#039;ve any questions don&#039;t hesitate to ask. I&#039;ll be very glad to help you!

regards,
stoimen]]></description>
		<content:encoded><![CDATA[<p>Hi,</p>
<p>I actually noticed that all the chain from new OpenLayers.Marker is slow because once you make instance of an Icon class, than pass it as a parameter to the Marker class and than add it for every marker to the Markers Layer.<br />
What I think is that you basically can avoid all this, because the final result of generation of all these DOM elements is slow. Important note is to say that after changing all this process to simple innerHTML string manipulation the zoom in/out will not be as smooth as before.</p>
<p>Now the code may look like something like:</p>
<pre lang="javascript">
for (var i = 0; i < 300; i++) {
	var thumbnail = new Icon();
	var marker = new Marker(lon,lat,icon);
	map.markerLayer.addMarker(marker);
}
</pre>
<p>which is slow. What I did is that I noticed all this was producing a simply DOM nodes so I switched to string concatenation.</p>
<pre lang="javascript" >
var emptyString = '';
for (var i = 0; i < 300; i++) {
	// here i need to convert Lon Lat to pixels this is done by OpenLayers
	ll = map.getLayerPxFromLonLat(new OpenLayers.LonLat(lon,lat));	
	
	// than simply concatenate the markup to the emptyString
	emptyString +='<div id="OL_Icon_'+i+'" style="position:absolute;top:'+ll.y+'px;left:'+ll.x+'px"><img src="yourmarker" />';
}
</pre>
<p>// after the loop has finished.. append all this to the dom via innerHTML, which is way faster than appendChild<br />
markersDiv.innerHTML = emptyString;</p>
<p>You'll see this is very very fast comparing to the OpenLayers method. </p>
<p>If you've any questions don't hesitate to ask. I'll be very glad to help you!</p>
<p>regards,<br />
stoimen</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: ilotus</title>
		<link>/2010/03/19/openlayers-can-be-faster/comment-page-1/#comment-12669</link>
		<dc:creator><![CDATA[ilotus]]></dc:creator>
		<pubDate>Mon, 22 Mar 2010 08:51:29 +0000</pubDate>
		<guid isPermaLink="false">/?p=1364#comment-12669</guid>
		<description><![CDATA[Dear Stoimen,  

Your idea is cool! I&#039;m been tried to resolve this headache, I&#039;m not a good grasp of your idea &quot;generated all the markers as markup with innerHTML&quot;. In convention, the markers are added to the marker layer..so how to position the markers with using innerHtml ?

Thanks in advance!]]></description>
		<content:encoded><![CDATA[<p>Dear Stoimen,  </p>
<p>Your idea is cool! I&#8217;m been tried to resolve this headache, I&#8217;m not a good grasp of your idea &#8220;generated all the markers as markup with innerHTML&#8221;. In convention, the markers are added to the marker layer..so how to position the markers with using innerHtml ?</p>
<p>Thanks in advance!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: stoyan</title>
		<link>/2010/03/19/openlayers-can-be-faster/comment-page-1/#comment-12654</link>
		<dc:creator><![CDATA[stoyan]]></dc:creator>
		<pubDate>Sat, 20 Mar 2010 18:06:19 +0000</pubDate>
		<guid isPermaLink="false">/?p=1364#comment-12654</guid>
		<description><![CDATA[yeah!]]></description>
		<content:encoded><![CDATA[<p>yeah!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: farrah</title>
		<link>/2010/03/19/openlayers-can-be-faster/comment-page-1/#comment-12647</link>
		<dc:creator><![CDATA[farrah]]></dc:creator>
		<pubDate>Fri, 19 Mar 2010 13:26:51 +0000</pubDate>
		<guid isPermaLink="false">/?p=1364#comment-12647</guid>
		<description><![CDATA[hi stoimen,

nice post again, even i don&#039;t get what&#039;s openlayers and what&#039;s used aobut]]></description>
		<content:encoded><![CDATA[<p>hi stoimen,</p>
<p>nice post again, even i don&#8217;t get what&#8217;s openlayers and what&#8217;s used aobut</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Stoimen</title>
		<link>/2010/03/19/openlayers-can-be-faster/comment-page-1/#comment-12641</link>
		<dc:creator><![CDATA[Stoimen]]></dc:creator>
		<pubDate>Fri, 19 Mar 2010 09:34:29 +0000</pubDate>
		<guid isPermaLink="false">/?p=1364#comment-12641</guid>
		<description><![CDATA[thanks!]]></description>
		<content:encoded><![CDATA[<p>thanks!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: ol</title>
		<link>/2010/03/19/openlayers-can-be-faster/comment-page-1/#comment-12640</link>
		<dc:creator><![CDATA[ol]]></dc:creator>
		<pubDate>Fri, 19 Mar 2010 09:33:35 +0000</pubDate>
		<guid isPermaLink="false">/?p=1364#comment-12640</guid>
		<description><![CDATA[cool cool cool that rocks]]></description>
		<content:encoded><![CDATA[<p>cool cool cool that rocks</p>
]]></content:encoded>
	</item>
</channel>
</rss>
