Posts Tagged Javascript

Posted on Programming

Adding text to google maps markers

If you’ve ever used the Google Maps Javascript API, you’re probably aware that marker labels can only be one letter long. But sometimes you want them to say something meaningful, and often that takes more than a single character.

In case you’re looking for a way to display arbitrary strings in a Google Maps marker, good news, here’s how you can do it!

You can pass a data URL when you’re supplying an image for an marker, which is great. We can send it some SVG which includes our label text.

  1. Import your marker icon into Illustrator, or some other vector graphics software.
  2. Type in some sample text, formatted however you like.
  3. Export it as SVG.
  4. Create a function that replaces the sample text with whatever you want to display, and returns the adjusted SVG
  5. Pass that to the Google Maps API as a data URL.

// Generate a pin!
function createPin(text) {
	var svg = '...'; // Imagine there's SVG here.
	return 'data:image/svg+xml,' + svg.replace('sample-text', text);
// Create the map. Position and style it however you like
var map = new google.maps.Map(document.getElementById('maps_marker_text_example'), {
	center: {lat: 49.264691, lng: -123.100},
// Create the marker
var marker = new google.maps.Marker({
	map: map,
	icon: createPin('delicious burritos'), // Generate the SVG for this marker
	position: {lat: 49.2630584, lng: -123.0945}

Bam! You’re done. You’ve got map markers showing custom text.

One thing to be aware of is the <svg /> tag must include width and height attributes, otherwise weird things will happen. When I exported from Illustrator, my file had a viewBox attribute, but no width and height. So if yours is missing those, add them in.


Posted on Programming

Don’t starve together

I’ve been playing Don’t Starve Together lately, and it’s awesome. There’s a constant sense of pressure imposed by the passage of time, days turn to night, a mild Autumn to bleak Winter. It makes any wasted time seem at worst dire, or at best mildly frustrating.

There are so many items you can cobble together, with twigs, bunny-flesh, and the like. At least 144, by my count. But unless you memorize their positions and ingredients, you’re going to waste a lot of time searching through categories for some item you’re sure you’d seen but just can’t seem to find.

I, myself, often kept a wikia tab open on my secondary monitor. But as I’m sure you’re aware, Wikia is slow and prone to annoying ads blaring sound this way and that. And even so, didn’t provide an ideal interface for that sort of thing.

I wanted to type in “charcoal” and immediately see what I could make. Or “crock pot” and see what I needed. Or even “science” to see everything that’s in that category.

And now I can!

The What can I make page is where I spend most of my time. The What do I need page is for those situations where I’m starting a new game, and know I want to create, say, 2 crock pots and 1 bird cage. It’ll tell me everything I need to collect to fulfill my crafting dreams.

If you find anything that doesn’t work, let me know, I haven’t tested it all that much.

I made it just using jquery. Then I remade it using backbone. Then I remade it using webpack, sass and react. Because why not?

This is the backbone version, because the react interface felt strangely clunky.


Posted on Programming

The past present and future, all at your command with HTML5

Dear Diary,

With the onset of HTML5 becoming increasingly supported among the many browsers out there, there are going to be a number of important changes coming to the way things work. Things such as… the MathML and SVG support, a large number of new elements and deprecation of some older obsolete ones, and most importantly (for the purposes of this article) an important change to the history API functionality!

Unfortunately, HTML5 isn’t supported in every browser… largely because older versions of browser either can’t support it or just aren’t being updated to support it. People should update their browser anyway… so many unnecessary headaches caused by having to go back and debug some random old version of IE or Firefox because someone is reluctant to update. I will say, props to Chrome for silently updating itself to the latest version and indicating that a core app restart is required with those little coloured arrows!

Posted on Programming

Rock, paper, scissors, bots!

This Google AI challenge thing seems so neat, and like it’d be fun! Because who doesn’t like bots??

A couple of nights ago I made a rock/paper/scissors bot arena. You can make bots using Javascript and have them compete.

It seemed like it’d be fun to make, and who knows, maybe it’ll trick some people into trying out some easy programming since it’s all web-based.

It’s a little weirder than normal Javascript, but that’s because the code gets wrapped into an object before use:

Posted on Uncategorised

128×128 and 256×256 icons and polls

On June 2, 2007, I received an e-mail requesting that I add 128×128 and 256×256 pixel icons to the .ICO resource Bradicon creates. I added them on Bradicon’s dev site, and replied that same day, but have yet to receive an email back. I didn’t end up publishing the changes to Bradicon.

That was a long time ago!

Luke brought it up again last night, and I started to think about it. The changes to the code would be super, super easy. I am a little worried that people may be upset if their icons are suddenly ~22 times as large in file size, which is a substantial increase. ~0.3 MB seems excessive for a favicon.

Posted on Programming

Firefox and Google Visualization

A project I’m working, for a company in far-away London, has to do with reporting. But who knows which web browsers they prefer there? I certainly don’t, which is why I’ve been testing in Firefox, Chrome, Safari, Opera, and IE. To be honest, it’s just something i normally do.

And what’s a report without a few graphs? Probably boring!

I decided to use Google Visualization to generate the graphs. Not such a big deal, since I used it as recently as two posts ago.

But things didn’t go quite as I’d expected.

Posted on Programming

“sniffing” after the past

People tend to over-react. I’m not sure why; they must derive some enjoyment from it.

And I could definitely see that being the result of this:

If pleasure from paranoia is your thing, that’s cool we can still be friends. But you should probably skip the rest of this post because I will point out that it cannot see which websites you’ve visited, so much as detect whether you’ve visited a website. A small, but in my opinion, very important distinction. The two would be equivalent if it checked every possible URL.