Permalink
Browse files

simple-view.html: refactored to have less js code specific to each ov…

…erlay
  • Loading branch information...
1 parent fea3835 commit 177e52dbdd917d1f4028541f139ad903a425e403 @trey0 trey0 committed Oct 22, 2012
Showing with 97 additions and 43 deletions.
  1. +1 −1 geocamTiePoint/models.py
  2. +96 −42 geocamTiePoint/templates/geocamTiePoint/simple-view.html
@@ -183,7 +183,7 @@ def getSimpleViewHtml(tileRootUrl, metaJson, slug):
{'name': metaJson['name'],
'slug': slug,
'tileRootUrl': tileRootUrl,
- 'bounds': metaJson['bounds'],
+ 'bounds': dumps(metaJson['bounds']),
'tileUrlTemplate': '%s/[ZOOM]/[X]/[Y].png' % slug,
'tileSize': 256})
@@ -7,75 +7,129 @@
height: 100%;
}
#map_canvas {
- height: 80%;
+ height: 90%;
}
</style>
</head>
-<h1>MapFasten: {{ name }}</h1>
<div>
<a href="#" onclick="window.location = 'view-source:' + window.location; return false;">View Source</a>
- - You can copy and paste the JavaScript from this page into your own Google Maps API Map to display your overlay
+ - Copy and paste the JavaScript from this page into your own Google Maps API Map to display your overlay
+</div>
+<div>
+ <b>MapFasten: {{ name }}</b>&nbsp;
+ <label for="opacity_{{ slug }}">
+ Opacity
+ </label>
+ <select id="opacity_{{ slug }}">
+ <option value="0">Hide</option>
+ <option value="0.25">25%</option>
+ <option value="0.5">50%</option>
+ <option value="0.75">75%</option>
+ <option value="1" selected>100%</option>
+ </select>
+ <button id="zoom_{{ slug }}">Zoom To Overlay Bounds</button>
</div>
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
-var map;
+function MapFastenOverlay(name, slug, tileRootUrl, bounds) {
+ this.name = name;
+ this.tileRootUrl = tileRootUrl;
+ var sw = new google.maps.LatLng(bounds.south, bounds.west);
+ var ne = new google.maps.LatLng(bounds.north, bounds.east);
+ this.bounds = new google.maps.LatLngBounds(sw, ne);
+
+ this.updateOpacity = this.updateOpacity.bind(this);
+ this.zoom = this.zoom.bind(this);
-function findOverlay(map, name) {
+ this.opacitySelector = document.getElementById('opacity_' + slug);
+ this.opacitySelector.addEventListener("change", this.updateOpacity);
+
+ var zoomButton = document.getElementById('zoom_' + slug);
+ zoomButton.addEventListener("click", this.zoom);
+
+ this.added = false;
+ this.opacity = null;
+}
+
+MapFastenOverlay.prototype.find = function() {
for (var i=0; i < map.overlayMapTypes.getLength(); i++) {
var overlayType = map.overlayMapTypes.getAt(i);
- if (overlayType.name == name) {
+ if (overlayType.name == this.name) {
return [i, overlayType];
}
}
throw 'overlay not found';
-}
+};
-function addOverlay_{{ slug }}(map) {
- // edit tileRootUrl if you move the tiles
- var tileRootUrl = '{{ tileRootUrl }}';
-
- var overlayOptions = {
- name: '{{ name }}',
- getTileUrl: function(coord, zoom) {
- return (tileRootUrl + '/' +
- zoom + '/' +
- coord.x + '/' +
- coord.y + '.png');
- },
- tileSize: new google.maps.Size({{ tileSize }}, {{ tileSize }})
- };
- var overlayType = new google.maps.ImageMapType(overlayOptions);
- map.overlayMapTypes.insertAt(0, overlayType);
-}
+// opacity in range 0..1; 0.5 = 50% opaque
+MapFastenOverlay.prototype.setOpacity = function(opacity) {
+ // remove if needed
+ if (this.added && opacity == 0) {
+ var idx = this.find()[0];
+ map.overlayMapTypes.setAt(idx, null);
-function zoomToOverlay_{{ slug }}(map) {
- var sw = new google.maps.LatLng({{ bounds.south }}, {{ bounds.west }});
- var ne = new google.maps.LatLng({{ bounds.north }}, {{ bounds.east }});
- map.fitBounds(new google.maps.LatLngBounds(sw, ne));
-}
+ this.added = false;
+ this.opacity = null;
+ return;
+ }
-// opacity in range 0..1; 0.5 = 50% opaque
-function setOverlayOpacity_{{ slug }}(map, opacity) {
- var overlayType = findOverlay(map, '{{ name }}')[1];
- overlayType.setOpacity(opacity);
-}
+ // add if needed
+ if (!this.added && opacity != 0) {
+ var self = this;
+ var overlayOptions = {
+ name: this.name,
+ getTileUrl: function(coord, zoom) {
+ return (self.tileRootUrl + '/' +
+ zoom + '/' +
+ coord.x + '/' +
+ coord.y + '.png');
+ },
+ tileSize: new google.maps.Size({{ tileSize }}, {{ tileSize }})
+ };
+ var overlayType = new google.maps.ImageMapType(overlayOptions);
+ map.overlayMapTypes.insertAt(0, overlayType);
-function removeOverlay_{{ slug }}(map) {
- var idx = findOverlay(map, '{{ name }}')[0];
- map.overlayMapTypes.setAt(idx, null);
-}
+ this.added = true;
+ this.opacity = 1;
+ }
+
+ // adjust opacity if needed
+ if (opacity != this.opacity) {
+ var overlayType = this.find()[1];
+ overlayType.setOpacity(opacity);
+ this.opacity = opacity;
+ }
+};
+
+MapFastenOverlay.prototype.updateOpacity = function() {
+ var idx = this.opacitySelector.selectedIndex;
+ var value = this.opacitySelector.options[idx].value;
+ this.setOpacity(parseFloat(value));
+};
+
+MapFastenOverlay.prototype.zoom = function() {
+ map.fitBounds(this.bounds);
+};
+
+/**********************************************************************/
+
+var map;
+var overlay_{{ slug }};
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
- addOverlay_{{ slug }}(map);
- zoomToOverlay_{{ slug }}(map);
- // setOverlayOpacity_{{ slug }}(map, 0.5);
- // removeOverlay_{{ slug }}(map);
+
+ overlay_{{ slug }} = new MapFastenOverlay('{{ name }}', '{{ slug }}',
+ '{{ tileRootUrl }}',
+ {{ bounds|safe }});
+
+ overlay_{{ slug }}.setOpacity(1);
+ overlay_{{ slug }}.zoom();
}
google.maps.event.addDomListener(window, 'load', initialize);

0 comments on commit 177e52d

Please sign in to comment.