Giter VIP home page Giter VIP logo

timezone-picker's Introduction

Live demo: http://scratch.andrewl.in/timezone-picker/example.html

Prerequisites

  • jQuery
  • Google Maps Javascript API v3

Usage

See example.html

tar xvf tz_json
python -m SimpleHTTPServer
http://localhost:8000/example.html

Setup

To use in your site, extract tz_json.tgz to a web-accessible location on your server and pass in the path as the jsonRootUrl option

Options

  • fillColor: the color of the fill of the rendered timezones (default '#ffcccc')
  • fillOpacity: the opacity of the outline of rendered timezones (default 0.5)
  • initialLat: the initial latitude for the center point of the map (default 0)
  • initialLng: the initial longitude for the center point of the map (default 0)
  • initialZoom: the initial zoom level of the map (1-20, default to 2, 1 is most zoomed out)
  • jsonRootUrl: the default root URL for the JSON data files (default '/tz_json/')
  • strokeColor: the color of the outline of rendered timezones (default '#ff0000')
  • strokeWeight: the width of the outline of rendered timezones (default 2)
  • strokeOpacity: the opacity of the outline of rendered timezones (default 0.7)
  • onHover: callback when a timezone is hovered. Parameters: utcOffset (in minutes), tzNames (array of strings)
  • onReady: callback when all the data files are loaded
  • onSelected: callback when a timezone is selected via the infowindow. Parameters: olsonName, utcOffset (in minutes), tzName (eg. EST, GMT)

Methods

  • showInfoWindow(htmlString): show an infoWindow for the current selected region. Takes an HTML string as a parameter
  • hideInfoWindow(): hide it
  • setDate(Date): set the "relative" date for the picker for proper timezone names (eg. EST vs EDT)
  • selectZone(olsonName): programmatically select a timezone

CSS Classes

  • timezone-picker-infowindow: the main content container for the infowindow

For Data File Generation

This plugin uses a bunch of timezone data files on a web server.

  • bounding_boxes.json: an array of bounding boxes for each timezone (for hit testing)
  • hover_regions.json: an array of polygons representing hover regions for each timezone
  • polygons/*.json: polygon definitions for each timezone

Requires Python 2.6+ Requires libgeos-dev (sudo apt-get install libgeos-dev) Requires shapely (sudo pip install shapely) Requires pytz (sudo pip install pytz)

To Generate all timezone data JSON files

Acknowledgments

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.