Clustering Markers On Leaflet Maps

posted by Andy Maloney

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

Leaflet - Too Many Markers!

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

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.

Read the remainder of this entry »

3 Comments so far. Join the Conversation
     

QSignalMapper Example Revisited

posted by Andy Maloney

Qt Library

Qt Library

Several years ago I wrote a short piece on QSignalMapper to give a quick example of how it can be used. Since then, Qt5 has been released and C++11 is now A Thing.

One of the cool things introduced in Qt5 is a new overload for the QObject::connect() method:

This means we can use function pointers instead of the old (char *) based method. One of the big advantages of using the new method is that it can check signal/slot connections at compile-time instead of only at run-time. If the signature of either the sender or receiver changes the code will fail to compile. (If you are using C++11 and like to write “clever” code, you can now use lambda expressions as well!) There’s a decent overview of the new method in this blog post by Olivier Goffart.

I recently started updating my aging codebase to Qt5 and C++11 and one of the things I’m changing is all my connections to use the new format. I ran into an issue almost immediately that I thought I’d document in case I can save someone some time.

Read the remainder of this entry »

Be the first to comment
     

Qt Patches: QGraphicsView & QImageWriter

posted by Andy Maloney

QGraphicsView

Two and a half years ago I wrote about a UX bug with QGraphicsView where it would reset the selection in the view if you tried to extend it with a rubberband selection. I have been using those changes in the version of Qt I maintain for my software.

I finally took the time to figure out how to use the gerrit code review system for submitting patches to the Qt project, and worked with several other developers to get it in shape for merging into the codebase for Qt 5.5.

Qt Library

Qt Library

The way I implemented the changes in my old post was inelegant but functional, so I cleaned it up for submission. Then, based on suggestions from Andreas Hanssen, Dominik Haumann, and Thorbjørn Martsum, took it to the next level to make it elegant. I was even forced to add tests before it would be accepted! <gasp> (Thanks again guys!)

The changes will appear in Qt 5.5, but they will not be backported to Qt4. I have, however, created patches for both if you need to use them:

Qt4 Patch: QGraphicsView_Rubberband_Select_Qt4_patch.diff

Qt5 Patch: QGraphicsView_Rubberband_Select_Qt5_patch.diff


QImageWriter

I also revisited my patch from three years ago for QImageWriter which added the ability to turn on the optimize and progressive scan switches for writing JPEGs, which I also was maintaining in my own version of Qt.

This work had input from another developer, Gunnar Sletta, and became a better commit because of it (thanks Gunnar!).

These changes will also be part of Qt 5.5 and won’t be backported to Qt4. I have created patches for both Qt4 and Qt5 if you need them:

Qt4 Patch: QImageWriter_Qt4_patch.diff

Qt5 Patch: QImageWriter_Qt5_patch.diff


I hope these changes and patches are useful to someone out there. Based on this positive experience I hope to contribute more small changes I have lying around somewhere…

6 Comments so far. Join the Conversation
     

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

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

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

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

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

Read the remainder of this entry »

78 Comments so far. Join the Conversation
     

Converting Between cv::Mat and QImage or QPixmap

posted by Andy Maloney

In a previous article, I outlined how to compile OpenCV for Mac OS X and to build and run a small example. In that post I used OpenCV‘s High-Level GUI (highgui) module to display a simple interface using the Qt framework. This is great if you’re writing a one-off program or are just experimenting with OpenCV, but how do you interface with your own Qt-based project if you don’t want to (or can’t) use the highgui module?

OpenCV Library

OpenCV Library

+

Qt Library

Qt Library

The first hurdle is converting between data formats so you can work with images in both OpenCV and Qt. So how do you move an image’s data between a cv::Mat and a QImage or QPixmap so you can display it in a widget?

In this article, I present some functions to handle these conversions and explain how to use them.

Read the remainder of this entry »

24 Comments so far. Join the Conversation
     

Packaging a Mac OS X Application Using a DMG

posted by Andy Maloney

I learned early on in my software career that packaging up a release of an application can be a real pain. Not only is it time consuming, but it is quite easy to forget a file or miss something when there are so many steps involved and you have to do it frequently. The solution to this is to automate the process. Putting together scripts to package up a release helps avoid missing steps and speeds up development and deployment of releases and updates.

One of the challenges of automating this on Mac OS X is figuring out how to script the creation of Apple disk image (DMG) files. Getting the arguments to hdiutil correct can be quite a challenge! In this post, I’ll give an example of a script I use to do the following:

  • Copy all the necessary files to a staging area
  • Strip and compress the executable files and libraries
  • Create a DMG of the correct size for the release
  • Add a link to /Applications to the DMG
  • Add a background to the DMG so when it opens up your company logo or application graphic appears
  • Check the background image’s DPI to ensure it is 72. Fix it if it’s not.
  • Resize the window and icons, and position items in the DMG so when it opens everything is in the right place
  • Create a final, compressed DMG

Packaging An Application Using a DMG

Packaging An Application Using a DMG

Let’s take a look… Read the remainder of this entry »

14 Comments so far. Join the Conversation
     

Clean Up Your LinkedIn Page

posted by Andy Maloney

Over the years, LinkedIn has been adding “content” to the data feed and to the right-hand side of the home page which cannot be turned off in the preferences – things like Jobs You May Be Interested In (I’m not) and Companies You May Want To Follow (I don’t). The worst of these is the LinkedIn Today blob at the top of the updates.

LinkedIn Today Blob

LinkedIn Today Blob

When it initially showed up, I put in a ticket asking how to turn it off and was told that they were working on it. Six months later I hadn’t heard back, so I asked again (and again) and they have now informed me that it’s permanent.

Well I’ve decided to make it unpermanent by hiding all these spammy bits with Adblock Plus. (If you are not surfing with an ad blocker, you should. Adblock Plus is simple to install and it will enhance your browsing experience and your life in general.)

LinkedIn Today - Kill It With Fire!

Here’s how to do it…

Update 07 May 2012: Added instructions to remove Sponsored Content
Update 18 July 2014: Added instructions to remove LinkedIn Pulse

Read the remainder of this entry »

7 Comments so far. Join the Conversation