Category Archives: JavaScript

Campus Map

A New Generation of Campus Maps

“Anytime I feel lost, I pull out a map and stare. I stare until I have reminded myself that life is a giant adventure, so much to do, to see.”
— Angelina Jolie

conf-listing2014 has been a great year for getting out of my comfort zone, and in keeping with that theme, last month I gave my first-ever conference presentation with a couple of amazing colleagues at HighEdWeb 2014 in Portland, Oregon. I wish I could say that I nailed it, but honestly I tried to pack waaaay too much information into a limited amount of time, and was pretty nervous for the first 10 minutes or so. Still, it was well attended, we got some great questions and feedback afterward, and it was an exciting new experience that I would definitely recommend to anyone else looking to push out of their professional or personal comfort zone.

This presentation was about online maps—specifically higher-ed campus maps—and over the past several months I’ve collected a lot of information and resources that I’d like to share, in case it’s helpful to anyone else who is new-ish to online maps. Some of this will apply specifically to people working at colleges and universities, but there’s also some that could be useful to anyone interested in web-based mapping.

Before we jump in:

« here’s a link to the full slide deck ».

Continue reading A New Generation of Campus Maps

Looking back in time by 900hp, on Flickr

A better simple slideshow

If you don’t have time to do it right, when will you have time to do it over?
— John Wooden

It’s a do-over! This is another fairly basic slideshow, written in javascript, html, and css. This is a dual-purpose project, it’s meant (1) to be something you can drop right into your page and use if you so choose, but it’s also meant (2) as an example/tutorial showing you how to build a simple DIY slideshow from scratch on your own. You can see a couple of demos of the finished product here: http://leemark.github.io/better-simple-slideshow/. Continue reading A better simple slideshow

Pulling JSON data from a public data API

“It is a capital mistake to theorize before one has data.” ― Arthur Conan Doyle

The Go Code Colorado crew, photo by Allison Daniell of Stellar Propeller Studio
Go Code Colorado photos by Allison Daniell of Stellar Propeller Studio

I had the opportunity recently to participate in Go Code Colorado, an “apps challenge” (think weekend hackathon + startup pitch competition) meant to make public data more accessible. It was an awesome experience and it got me thinking about government/public data, and how to use it and combine it in ways that can help people.

Here’s a quick example of how to pull data from one such public data source,  the Colorado Business Entity Database.   Basically, anyone starting a new business or forming a business entity in Colorado, whether that be a sole proprietership, partnership, LLC, corporation, etc, has to file documents and register their business with the Secretary of State’s office, and that information becomes public data. What we’re going to do in this example is to use state-provided API to pull a list of current businesses in a particular ZIP code, and list out their names, street addresses, and cities.
Continue reading Pulling JSON data from a public data API

Slide Projector by macattck, on Flickr

A simple DIY responsive image slideshow made with HTML5, CSS3, and JavaScript

“It takes half your life before you discover life is a do-it-yourself project.” ― Napoleon Hill

IMPORTANT: I’ve written a new more robust slideshow, along with a code walkthough/tutorial. If you’re looking for a slideshow to use on your own site, it’ll be better and easier to use than this one. Go check it out: http://themarklee.com/2014/10/05/better-simple-slideshow/

A while back I wrote about a technique for building a simple automatically cycling slideshow using CSS animations, no JavaScript required. While that is definitely an interesting technique, it’s also pretty limited in how you can use it. For example, often with an image slideshow rather than just auto-advancing the slides you may want to let the user have control, so they can navigate forwards and backwards through the images at their own pace. These days you also may want a slideshow that’s responsive, so that it will work across a wide range of devices, automatically resize to fit different screen sizes, and maybe even allow some more touch-centric interaction–like swiping to the left or right instead of clicking “previous” and “next” buttons to cycle through the slides.

If this is what you need and you’re just looking for a drop-in solution, there’s no reason to reinvent the wheel, there are some great slideshow options out there already (here are just a few: Unslider, SwipeJS, SlidesJS). However if you’re more of the do-it-yourself type and you want to custom-build your own to suit your exact needs, or just want to see how it can be done, then it’s pretty easy to get started with just a little bit of HTML, CSS, and JavaScript.
Continue reading A simple DIY responsive image slideshow made with HTML5, CSS3, and JavaScript

Geolocation Part II: Building Interactive Maps with Leaflet

“A map does not just chart, it unlocks and formulates meaning; it forms bridges between here and there, between disparate ideas that we did not know were previously connected.”
― Reif Larsen

A couple of weeks ago I wrote about using the Geolocation API, and walked through the minimal code necessary to get the user’s longitude and latitude. Now I want to take it just a step further, and show how to use Leaflet to show the users current location on a map. Continue reading Geolocation Part II: Building Interactive Maps with Leaflet

Image by deeminllama: http://fc08.deviantart.net/fs45/f/2009/086/a/3/you_are_here_by_deeminllama.jpg

Super-simple Geolocation

“Remember, no matter where you go, there you are.” ― Buckaroo Banzai

Over the past several years mobile devices have brought us a lot of new great features and capabilities, things that people now are starting to expect from computing devices. Features like touch-capability, then multi-touch, GPS to tell where the device (and user) is, motion- and light-sensing, device orientation, access to the device’s camera, and even more. Wouldn’t it be great if web developers had access to all of those amazing new device features? Well, some of that is possible right now.
Continue reading Super-simple Geolocation