Clustering Markers On Leaflet Maps

So you’re creating an interactive map using Leaflet and have diligently added your 8107 markers to the map.

Leaflet – Too Many Markers!

Uh-oh. Definitely slow and pretty much doesn’t provide a user experience. What do we do now?

There’s a great plugin for Leaflet called Leaflet.markercluster by Dave Leaver which will save us.

Leaflet Clusters

This plugin clusters the markers and shows the number of items in each cluster, and as we zoom it adjusts the clusters based on the current view. This not only makes the map easier for the user to understand, it’s also a lot more efficient.

If you followed my previous Leaflet tutorial, adding the clustering plugin is extremely simple. Let’s take a look.

Continue reading →

Creating An Interactive Map With Leaflet and OpenStreetMap

I’ve known for a while that the interactive map of the world showing some of my bloodstain pattern analysis software customers was kind of slow. I also knew that I was using a very outdated version of Google’s API for displaying the data. Yesterday I decided to take a look at it to see what I needed to do to fix it up.

Old Google Map

My first stop was the Google page about moving to v3 of the API. Apparently I needed to get a new API key by signing up for something with my Google Account. Google has added usage limits and now tracks absolutely everything (yes, they probably did before, but now it’s more explicit). I also needed to consider whether or not I can use the maps on a commercial site.

I don’t like hurdles, and I like simplicity, so I decided to look around for alternatives. I remembered looking at OpenStreetMap (OSM) several years ago when I originally built my map and deciding it wasn’t quite good enough. I decided to check it out again to see how they were doing. My how things change!

OpenStreetMap

Because I’m a good lazy developer (by that I mean I avoid writing things when they already exist, are well-coded, and maintainable), my first thought was to grab a WordPress plugin and to use it for my map. I tried out the OSM – OpenStreetMap plugin. While it sort-of worked for what I was trying to do, it was not as customizable as I’d like, it seemed too heavy for one map on one site, and it tied me to WordPress (which my other site hasn’t moved to yet).

My next thought was to look for a JavaScript library with a nice API to integrate and handle most of the heavy lifting. Poking around the OSM site, I ran across OpenLayers. It looked pretty powerful, and has a ton of stuff in its API. I downloaded it (10M?) and took a look but I really just wanted something simpler. Then I found Leaflet. Exactly what I needed. Small, simple, great documentation, and some really straightforward examples.

Leaflet

Even though I had to brush up on some JavaScript, jQuery, and JSON concepts—things I rarely use— I ended up researching possibilities and replacing my Google Map with an OpenStreetMap/Leaflet version in just a couple of hours. It’s now much faster and simpler to customize.

New OpenStreetMap/Leaflet Map

In this article, I’ll step through an example that shows how to:

set up a simple map using the Leaflet JavaScript library
load marker locations from a JSON file
change the marker icon
have the markers show some data when clicked

Continue reading →

QTextDocument, HTML, and Unicode: It’s All Greek To Me

To generate reports in my Qt-based software, I create a QTextDocument, which may contain some Unicode characters, convert it to HTML, and then save it to a file.

QFile file( fileName );

if ( !file.open( QIODevice::WriteOnly | QIODevice::Text ) )
   return false;

QTextStream out( &file );
out << mDoc.toHtml();

QFile file( fileName );

if ( !file.open( QIODevice::WriteOnly | QIODevice::Text ) )

return false;

QTextStream out( &file );

out << mDoc.toHtml();

But the Unicode characters were not being being displayed properly when I opened it in a browser:

Unicode Not Displayed Properly

Taking a look at the generated HTML, I noticed that the content encoding was not being set:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" />

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html><head><meta name="qrichtext" content="1" />

So I thought I could simply specify the encoding in the call to toHtml() which would set the encoding in the HTML header.

QFile file( fileName );

if ( !file.open( QIODevice::WriteOnly | QIODevice::Text ) )
   return false;

QTextStream out( &file );
out << mDoc.toHtml( "utf-8" );

QFile file( fileName );

if ( !file.open( QIODevice::WriteOnly | QIODevice::Text ) )

return false;

QTextStream out( &file );

out << mDoc.toHtml( "utf-8" );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html><head><meta name="qrichtext" content="1" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

That looks better! But wait…

Unicode Still Not Displayed Properly

Uhhh… That looks worse.

After scouring the interwebs, I eventually found the answer. The QTextStream encodes based on the system locale so if you don’t set it explicitly you might not get what you expect. According to the QTextStream docs:

By default, QTextCodec::codecForLocale() is used, and automatic unicode detection is enabled.

For some reason the automatic detection did not work for my case, but the solution is to set the encoding manually using QTextStream::setCodec() like this:

QFile file( fileName );

if ( !file.open( QIODevice::WriteOnly | QIODevice::Text ) )
   return false;

QTextStream out( &file );

out.setCodec( "utf-8" );

out << mDoc.toHtml( "utf-8" );

QFile file( fileName );

if ( !file.open( QIODevice::WriteOnly | QIODevice::Text ) )

return false;

QTextStream out( &file );

out.setCodec( "utf-8" );

out << mDoc.toHtml( "utf-8" );

Aha! Now my Greek looked Greek!

Unicode Displayed Properly

WP-Syntax Style Sheet Order Fix

~~I’m using Ryan McGeary‘s excellent WP-Syntax plugin for syntax highlighting of code in WordPress. [It is now maintained by Steve Zahm.]~~

Update [7 Apr 2014]: I’m, uh, no longer using Ryan’s WP-Syntax plugin… I switched to Crayon Syntax Highlighter so I could have more control over the layout. The examples below are using Crayon now.

Without the plugin, simply using the <code> tag, code looks like this:

/* Hello World program */


#include <stdio.h>
int main( int argc, char *argv[] )
{
    printf("Hello World");

return 0; }

With the WP-Syntax plugin, it is formatted to make it much more readable:

/* Hello World program */

#include <stdio.h>

int main( int argc, char *argv[] )
{
    printf("Hello World");

    return 0;
}

/* Hello World program */

#include <stdio.h>

int main( int argc, char *argv[] )

{

printf("Hello World");

return 0;

}

One problem with the plugin though is that the CSS style sheet for the plugin is being included after some external Javascript in the head element of the HTML document. This prevents some browsers from loading the CSS in parallel which can delay loading of the page. A good way to catch these kinds of things is to use Google’s Page Speed plugin.

Continue reading →

Techozoic Fluid Child Theme CSS

~~So I’m using Jeremy Clark‘s Techozoic Fluid WordPress theme for this site. Kinda cool, eh?~~

Update [27 Mar 2017]: I’m now using Raam Dev‘s Independent Publisher as my base theme.

I wanted to modify and minify the style.css file and make a couple of other changes. Given these other changes, I decided the best solution was to make a WordPress child theme. So I followed the instructions and expected that the header would reflect my new style.css file.

Alas, taking a look at the page source, it did not:

<link rel="stylesheet" type="text/css" media="screen" href="http://asmaloney.com/wp-content/themes/techozoic-fluid/style.css" />

1	<link rel="stylesheet" type="text/css" media="screen" href="http://asmaloney.com/wp-content/themes/techozoic-fluid/style.css" />

So I took a look at themes/techozoic-fluid/header.php, and found the problem on line 76:

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/style.css" />

1	<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/style.css" />

It looked like get_template_directory_uri() was returning the main theme’s directory, not the child theme. Sure enough, the docs state:

In the event a child theme is being used, the parent theme directory URI will be returned, not the child theme directory URI

The fix was simple. Changing it to the following grabs the css file from the child theme:

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_stylesheet_uri(); ?>" />

1	<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_stylesheet_uri(); ?>" />

Voilà!

<link rel="stylesheet" type="text/css" media="screen" href="http://asmaloney.com/wp-content/themes/asmaloney/style.css" />

1	<link rel="stylesheet" type="text/css" media="screen" href="http://asmaloney.com/wp-content/themes/asmaloney/style.css" />