Picture Marker Symbols from Base64 Strings





Using jsformat with Sublime Text 26th July, 2014

There are many d3 demos like this but this one is mine 08th June, 2014


Picture Marker Symbols from Base64 Strings

Posted on .

The ArcGIS blog featured a post with a picture marker symbol generator a while back (full disclosure: written by a teammate of mine, Kelly Hutchins).

The general focus of the post was how to use symbols from in your own apps. As an added bonus, there is an option to generate base64 strings for symbols. This allows you to use strings to define picture marker symbols instead of images. Why would you want to do that, you ask? If each picture marker symbol is created from an image file, it takes an additional http request to retrieve the image. On the other hand, if you use base64 strings, no additional http request is necessary. When using lots of picture marker symbols, the overhead for additional http requests can impact performance (read: they’ll slow down your app).

The blog post linked above is great for generating base64 strings for symbols from, but what if you want a picture marker symbol from your own image? Keep reading…

When building the MLB Layer, I decided that I would use base64 strings for the images instead of references to the actual image files. To generate base64 strings from the images, I used a little python:

import glob, base64, json

sym_size = 27 
sym_type = "esriPMS"
sym_content_type = "image/png"
# list that will be jsonified
logo_list = []
# get paths for logos
logos = glob.glob("images/logos/*.png")

# loop through logos, generate base64 string from each
for logo in logos:
  team = logo.split("/")[len(logo.split("/"))-1].split(".")[0]
  print "generating b64 for %s" % team
  logo_file = open(logo, "rb")
  logo_data =
  logo_b64 = base64.b64encode(logo_data)

  sym_dict = {}
  sym_dict["contentType"] = sym_content_type
  sym_dict["imageData"] = logo_b64
  sym_dict["height"] = sym_size
  sym_dict["size"] = sym_size
  sym_dict["type"] = sym_type
  sym_dict["url"] = logo
  sym_dict["width"] = sym_size

  logo_dict = {}
  logo_dict["sym"] = sym_dict
  logo_dict["team"] = team

out = open("js/mlb_symbols.json", "w")

Now, that code isn’t going to win any prizes, but it gets the job done. It reads png files in a directory and creates JSON strings that can passed to the picture marker symbol constructor.

Once the JSON is loaded from a file on the server, creating picture marker symbols is as easy as:

var picSym = new esri.symbol.PictureMarkerSymbol(s.sym);

Where s is an element from the array in the output file from the python script above.

Astute observers will notice that the JSON strings generated include a path to an image file as the symbol JSON’s “url” property. The reason for this is outlined in that original ArcGIS blog post linked above: before Internet Explorer 8, IE couldn’t handle images created from base64 strings. This is unfortunate, but we don’t want to leave our IE7 users out in the cold so we fallback to the actual image for them.

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (0) ...