Databases
StackOverflow2013
Postsdbo
POEfficiently plotting large number of markers on CloudMade map
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEfficiently plotting large number of markers on CloudMade map
    primarykey
    data
    text
    <p>So I am working on a website that utilizes the CloudMade JavaScript map. I have to load the map and then plot roughly 14,000 markers. The point of the website is to visualize the markers (they are each plotted with varying colors) across the United States. Because I am doing this, I can not use the clustering tools that are out there.</p> <p>Initially, I was using PHP to pull the data points from a database and plot them one by one on the map using the <code>map.addOverlay(MyMarker)</code> function. This took incredibly long, so I have since changed my approach. Now I have all the data in a JSON file and I use the following JavaScript code to plot the the points: </p> <pre><code> $(document).ready(function(){ var url="m/results.json"; $.getJSON(url,function(json){ $.each(json.posts,function(i,post){ var myMarkerLatLng = new CM.LatLng(post.Latitude,post.Longitude); var myMarker = new CM.Marker(myMarkerLatLng, { title: post.City + ", " + post.State, }); map.addOverlay(myMarker); }); }); }); </code></pre> <p>While this is much better, I would like it to be faster. Currently it loads in roughly 8 seconds, but I need it to be real time. To make the website faster, I have followed Google's Web Performance guidelines, <a href="https://developers.google.com/speed/docs/best-practices/rules_intro" rel="nofollow">https://developers.google.com/speed/docs/best-practices/rules_intro</a>. But in following those conventions, I run the above code at the end of the file. This allows the entire webpage to load (including the map), but it stalls for a few seconds and then plots all the markers all at once.</p> <p>Any tips or suggestions on making it faster?</p> <p>P.S. - I initially load the map of the entire US. Meaning I have to plot all of them on the initial loading =/. Unfortunately there is no way around that.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USfawaad
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POEfficiently plotting large number of markers on CloudMade map
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload