dosx / timezone-picker Goto Github PK

This more of a question than an issue.
I was looking for a graphic timezone picker and your project seems to work great. We might also need to deploy it in private LAN's etc is it possible to use it without an internet connection with a saved map or some thing of that nature ?

Hi, i'm using the default configuration of the plugin but i don't see the timezone info div.
I have to set some particular option or is a bug?

Edit: Nevermind it works

tz_world has been updated a few times to deal with new time zones and border changes. Please update to the current version. Thanks.

I don't know what is different from running it locally within the provided python server vs my ASP.Net application, but once it is running in my ASP.Net application (even the test environment of localhost), I get an error from google saying that I need an API key. I can certainly add one since it is free, but it doesn't seem like I should need one.

Has anybody else run into this?

Thanks
Greg

http://scratch.andrewl.in/timezone-picker/example_site/openlayers_example.html

When Twitter Bootstrap styles are in use, the Google Map zoom controls and popup arrows are distorted. This problem is not specific to timezone-picker, but is a common use case.

However, there is a simple fix (which I found on Stack Overflow). I'm filing this issue to recommend the maintainers add this to the documentation (since it burned me a few hours).

Simply add the following styles to the map control element.

#zonepicker img {
  max-width: none;
}

In the OpenLayers implementation, the scrollwheel doesn't zoom. I believe this is controlled by the OpenLayers.Control.Navigation.zoomWheelEnabled setting.

Using the timezone picker from a 2014-12-11 git clone, trying to put the picker in a Bootstrap modal dialog in an Angular app. So there are plenty of ways this could be user error.

The deal is that after a page reload the picker renders and works beautifully. If I close or cancel the dialog and then click the link to open the dialog again, the map renders mostly gray and centered somewhere over the Pacific (see screenie).

Hi, do you have any opinions on licensing?

I would like to use this in a small, for-pay project of mine.

Click on the island of Fiji. It highlights the island, but shows no time zone. Appears to be the same in either Google Maps or OpenLayers demos.

Is something wrong with the source data?

Is there anyway to get a list of locations and timezones so that we can generate a select dropdown?

For example:

<option value="PDT">America/Los Angeles</option>
<option value="PDT">America/Vancouver</option>
etc...

Right now, you have to go through the JSON files and somehow extract it, which is not trivial.

Thanks for a great plugin!

how to implement this in ios ?

they don't mention that you also need simplejson (which is now included as part of python and just called json apparently).

The list of packages to install should include:

simplejson (sudo pip simplejson)

Would you please be so kind to update the live demos such that they show the Olson time zone id when you hover or click on the zone?

Thanks,
Matt

This is an awesome control. I really appreciate the work you put into this.

Google Maps looks great, but it's not very friendly in terms of licensing:
https://developers.google.com/maps/licensing

There is a free alternative called OpenLayers that would pair nicely with your timezone-picker logic: http://openlayers.org

Any chance you could integrate it into your timezone picker control? Perhaps as an option, leaving Google Maps available for those that want it.

This would also solve issue #2 - since it would work offline.

Thanks!

The Timezone Picker makes Safari Crash. Working fine in Firefox and Chrome, but Safari crashes on loading of the page: http://scratch.andrewl.in/timezone-picker/example_site/gmaps_example.html

Live demos

• Google Maps: http://scratch.andrewl.in/timezone-picker/example_site/gmaps_example.html
• OpenLayers: http://scratch.andrewl.in/timezone-picker/example_site/openlayers_example.html

Prerequisites

• jQuery
• Google Maps Javascript API v3 or OpenLayers

Usage

See gmaps_example.html and openlayers_example.html

./setup_example.sh
./run.sh
http://localhost:8000/gmaps_example.html
http://localhost:8000/openlayers_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

For those who use OpenLayers with Twitter Bootstrap, you need to make .img to have max-width: none.

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)
• useOpenLayers: use OpenLayers instead of Google maps

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
• NOTE: if you are using Twitter Bootstrap and google maps, you may need something like

#zonepicker img {
  max-width: none;
}

to prevent distortion of your map controls (thanks michaelahlers!)

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+
• libgeos-dev (sudo apt-get install libgeos-dev) (for Mac OS, install this: http://trac.osgeo.org/geos/)
• pip (sudo easy_install pip)
• shapely (sudo pip install shapely)
• pytz (sudo pip install pytz)

To Generate all timezone data JSON files

• Download and extract the tz_world file from http://efele.net/maps/tz/world/tz_world.zip
• python script/gen_json.py <path-to-tz_world.shp> <output-dir>
• Be very patient...

Or you could just use the files from extracting tz_json.tgz.

Acknowledgments

• Thanks to Eric Muller for creating the timezone shape files (http://efele.net/maps/tz/world)
• Thanks to Zachary Forest Johnson for the shp file loading python scripts (http://indiemaps.com/blog/2008/03/easy-shapefile-loading-in-python/)