make map fill parent element
This commit is contained in:
rlx
parent
6496f4d0f6
commit
802600f19f
3 changed files with 110 additions and 32 deletions
|
|
@ -963,6 +963,18 @@ Maps
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
.OxMap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.OxMap > * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.OxMapButton {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
|
|
|
|||
|
|
@ -8982,6 +8982,7 @@ requires
|
|||
selected: [],
|
||||
width: 256
|
||||
})
|
||||
.addClass('OxListMap')
|
||||
.options(options || {})
|
||||
.css({
|
||||
width: self.options.width + 'px',
|
||||
|
|
@ -9211,6 +9212,7 @@ requires
|
|||
self.$map = new Ox.Map({
|
||||
clickable: true,
|
||||
editable: true,
|
||||
findPlaceholder: 'Find on Map',
|
||||
height: self.options.height,
|
||||
places: places,
|
||||
statusbar: true,
|
||||
|
|
@ -9223,7 +9225,7 @@ requires
|
|||
that.triggerEvent('addplace', data);
|
||||
},
|
||||
resize: function() {
|
||||
self.$map.resizeMap();
|
||||
self.$map.resizeMap(); // fixme: don't need event
|
||||
},
|
||||
selectplace: selectPlace
|
||||
});
|
||||
|
|
@ -9334,23 +9336,19 @@ requires
|
|||
// fixme: isClickable? hasZoombar?
|
||||
clickable: false,
|
||||
editable: false,
|
||||
height: 256,
|
||||
findPlaceholder: 'Find',
|
||||
labels: false,
|
||||
markers: 100,
|
||||
places: [],
|
||||
selected: null,
|
||||
statusbar: false,
|
||||
toolbar: false,
|
||||
width: 256,
|
||||
zoombar: false
|
||||
})
|
||||
.options(options || {})
|
||||
.css({
|
||||
width: self.options.width + 'px',
|
||||
height: self.options.height + 'px'
|
||||
})
|
||||
.click(function() {
|
||||
that.gainFocus();
|
||||
.addClass('OxMap')
|
||||
.click(function(e) {
|
||||
!$(e.target).is('input') && that.gainFocus();
|
||||
})
|
||||
.bindEvent({
|
||||
key_0: function() {
|
||||
|
|
@ -9442,7 +9440,7 @@ requires
|
|||
.appendTo(self.$toolbar)
|
||||
self.$findInput = new Ox.Input({
|
||||
clear: true,
|
||||
placeholder: 'Find on Map',
|
||||
placeholder: self.options.findPlaceholder,
|
||||
width: 192
|
||||
})
|
||||
.css({float: 'right', margin: '4px'})
|
||||
|
|
@ -9454,8 +9452,10 @@ requires
|
|||
|
||||
self.$map = new Ox.Element('div')
|
||||
.css({
|
||||
width: self.options.width + 'px',
|
||||
height: getMapHeight() + 'px'
|
||||
left: 0,
|
||||
top: self.options.toolbar * 24 + 'px',
|
||||
right: 0,
|
||||
bottom: self.options.zoombar * 16 + self.options.statusbar * 24 + 'px'
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
|
|
@ -9463,6 +9463,9 @@ requires
|
|||
self.$zoombar = new Ox.Bar({
|
||||
size: 16
|
||||
})
|
||||
.css({
|
||||
bottom: self.options.statusbar * 24 + 'px'
|
||||
})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
|
|
@ -9470,24 +9473,29 @@ requires
|
|||
self.$statusbar = new Ox.Bar({
|
||||
size: 24
|
||||
})
|
||||
.css({
|
||||
bottom: 0
|
||||
})
|
||||
.appendTo(that);
|
||||
self.$placeNameInput = new Ox.Input({
|
||||
placeholder: 'Name',
|
||||
width: Math.floor((self.options.width - 112) / 2)
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'left', margin: '4px 2px 4px 4px'})
|
||||
//.css({position: 'absolute', left: 4, top: 4})
|
||||
.css({float: 'left', margin: '4px 1px 4px 4px'})
|
||||
.appendTo(self.$statusbar);
|
||||
self.$placeGeonameInput = new Ox.Input({
|
||||
placeholder: 'Geoname',
|
||||
width: Math.ceil((self.options.width - 112) / 2)
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'left', margin: '4px 2px 4px 2px'})
|
||||
.appendTo(self.$statusbar)
|
||||
//.css({position: 'absolute', left: 104, top: 4})
|
||||
.css({float: 'left', margin: '4px 1px 4px 4px'})
|
||||
.appendTo(self.$statusbar);
|
||||
self.$placeButton = new Ox.Button({
|
||||
title: 'New Place',
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'left', margin: '4px 4px 4px 2px'})
|
||||
.css({float: 'right', margin: '4px 4px 4px 2px'})
|
||||
.bindEvent({
|
||||
click: clickPlaceButton
|
||||
})
|
||||
|
|
@ -9592,7 +9600,6 @@ requires
|
|||
self.resultPlace = place;
|
||||
place.add();
|
||||
}
|
||||
Ox.print('EXISTS', exists, 'SELECTING', place.id)
|
||||
selectPlace(place.id);
|
||||
}
|
||||
|
||||
|
|
@ -9624,6 +9631,8 @@ requires
|
|||
}
|
||||
|
||||
function centerChanged() {
|
||||
Ox.print('CENTER CHANGED')
|
||||
self.center = self.map.getCenter();
|
||||
self.centerChanged = true;
|
||||
}
|
||||
|
||||
|
|
@ -9665,7 +9674,7 @@ requires
|
|||
arrows: true,
|
||||
max: self.maxZoom,
|
||||
min: self.minZoom,
|
||||
size: self.options.width,
|
||||
size: that.width(),
|
||||
thumbSize: 32,
|
||||
thumbValue: true,
|
||||
value: self.map.getZoom()
|
||||
|
|
@ -9818,6 +9827,9 @@ requires
|
|||
|
||||
function initMap() {
|
||||
var mapBounds;
|
||||
|
||||
updateFormElements()
|
||||
|
||||
self.elevationService = new google.maps.ElevationService();
|
||||
self.geocoder = new google.maps.Geocoder();
|
||||
self.maxZoomService = new google.maps.MaxZoomService();
|
||||
|
|
@ -9846,9 +9858,10 @@ requires
|
|||
google.maps.event.addListener(self.map, 'click', clickMap);
|
||||
google.maps.event.addListener(self.map, 'idle', mapChanged);
|
||||
google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
|
||||
google.maps.event.addListenerOnce(self.map, 'tilesloaded', tilesLoaded);
|
||||
if (mapBounds) {
|
||||
self.map.fitBounds(mapBounds);
|
||||
self.zoom = self.map.getZoom();
|
||||
//self.zoom = self.map.getZoom();
|
||||
}
|
||||
// fixme: use tilesloaded event!
|
||||
/*
|
||||
|
|
@ -9866,6 +9879,12 @@ requires
|
|||
google.maps.event.trigger(self.map, 'resize');
|
||||
//that.gainFocus();
|
||||
that.triggerEvent('load');
|
||||
function tilesLoaded() {
|
||||
return;
|
||||
self.$placeNameInput.options({
|
||||
size: 400
|
||||
}).css({width: 400});
|
||||
}
|
||||
}
|
||||
|
||||
function mapChanged() {
|
||||
|
|
@ -9895,6 +9914,9 @@ requires
|
|||
getMaxZoom(function(zoom) {
|
||||
if (zoom != self.maxZoom) {
|
||||
self.maxZoom = zoom;
|
||||
if (self.map.getZoom() > zoom) {
|
||||
self.map.setZoom(zoom);
|
||||
}
|
||||
constructZoomInput();
|
||||
}
|
||||
});
|
||||
|
|
@ -9906,7 +9928,7 @@ requires
|
|||
}
|
||||
|
||||
function pan(x, y) {
|
||||
self.map.panBy(x * self.options.width / 2, y * self.mapHeight / 2);
|
||||
self.map.panBy(x * self.$map.width() / 2, y * self.$map.height() / 2);
|
||||
};
|
||||
|
||||
function parseGeodata(data) {
|
||||
|
|
@ -9992,6 +10014,7 @@ requires
|
|||
}
|
||||
|
||||
function resizeMap() {
|
||||
/*
|
||||
Ox.print('resizeMap', self.options.width, self.options.height);
|
||||
var center = self.map.getCenter();
|
||||
self.mapHeight = getMapHeight();
|
||||
|
|
@ -10006,6 +10029,7 @@ requires
|
|||
});
|
||||
google.maps.event.trigger(self.map, 'resize');
|
||||
self.map.setCenter(center);
|
||||
*/
|
||||
}
|
||||
|
||||
function selectPlace(id) {
|
||||
|
|
@ -10029,7 +10053,6 @@ requires
|
|||
if (self.options.statusbar) {
|
||||
place = getSelectedPlace();
|
||||
if (place) {
|
||||
Ox.print('P L A C E', place)
|
||||
title = place.id[0] == '_' ? 'Add Place' : 'Remove Place';
|
||||
} else {
|
||||
title = 'New Place';
|
||||
|
|
@ -10072,6 +10095,17 @@ requires
|
|||
place.editing && place.undo();
|
||||
}
|
||||
|
||||
function updateFormElements() {
|
||||
var width = that.width();
|
||||
self.$zoomInput && constructZoomInput();
|
||||
self.$placeNameInput.options({
|
||||
width: Math.floor((width - 112) / 2)
|
||||
});
|
||||
self.$placeGeonameInput.options({
|
||||
width: Math.ceil((width - 112) / 2)
|
||||
});
|
||||
}
|
||||
|
||||
function zoom(z) {
|
||||
self.map.setZoom(self.map.getZoom() + z);
|
||||
}
|
||||
|
|
@ -10099,9 +10133,9 @@ requires
|
|||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
if (key == 'height' || key == 'width') {
|
||||
/*if (key == 'height' || key == 'width') {
|
||||
resizeMap();
|
||||
} else if (key == 'places') {
|
||||
} else */if (key == 'places') {
|
||||
loadPlaces();
|
||||
} else if (key == 'selected') {
|
||||
selectPlace(value);
|
||||
|
|
@ -10147,6 +10181,25 @@ requires
|
|||
};
|
||||
|
||||
that.resizeMap = function() {
|
||||
|
||||
/*
|
||||
Ox.print('resizeMap', self.options.width, self.options.height);
|
||||
var center = self.map.getCenter();
|
||||
self.mapHeight = getMapHeight();
|
||||
self.minZoom = getMinZoom();
|
||||
that.css({
|
||||
height: self.options.height + 'px',
|
||||
width: self.options.width + 'px'
|
||||
});
|
||||
self.$map.css({
|
||||
height: self.mapHeight + 'px',
|
||||
width: self.options.width + 'px'
|
||||
});
|
||||
google.maps.event.trigger(self.map, 'resize');
|
||||
self.map.setCenter(center);
|
||||
*/
|
||||
|
||||
/*
|
||||
Ox.print('Ox.Map.resizeMap()');
|
||||
var center = self.map.getCenter();
|
||||
self.options.height = that.$element.height();
|
||||
|
|
@ -10161,6 +10214,9 @@ requires
|
|||
self.options.zoombar && self.$zoomInput.options({
|
||||
size: self.options.width
|
||||
});
|
||||
*/
|
||||
updateFormElements();
|
||||
google.maps.event.trigger(self.map, 'resize');
|
||||
return that;
|
||||
}
|
||||
|
||||
|
|
@ -10204,7 +10260,6 @@ requires
|
|||
update();
|
||||
|
||||
function update() {
|
||||
Ox.print('PLACE UPDATE', that.marker);
|
||||
that.points = {
|
||||
ne: new google.maps.LatLng(that.north, that.east),
|
||||
sw: new google.maps.LatLng(that.south, that.west)
|
||||
|
|
@ -10248,7 +10303,7 @@ requires
|
|||
}
|
||||
|
||||
that.add = function() {
|
||||
Ox.print('MapPlace add', that)
|
||||
//Ox.print('MapPlace add', that)
|
||||
that.visible = true;
|
||||
that.marker.add();
|
||||
return that;
|
||||
|
|
@ -10292,7 +10347,6 @@ requires
|
|||
}
|
||||
|
||||
that.remove = function() {
|
||||
Ox.print('MapPlace remove', that)
|
||||
that.editing && that.submit();
|
||||
that.selected && that.deselect();
|
||||
that.visible = false;
|
||||
|
|
@ -10310,7 +10364,6 @@ requires
|
|||
|
||||
that.submit = function() {
|
||||
if (editable()) {
|
||||
Ox.print('submit')
|
||||
that.editing = false;
|
||||
that.marker.update();
|
||||
that.rectangle.deselect();
|
||||
|
|
@ -10437,7 +10490,7 @@ requires
|
|||
}
|
||||
|
||||
that.add = function() {
|
||||
Ox.print('MapMarker add', that)
|
||||
//Ox.print('MapMarker add', that)
|
||||
that.marker.setMap(that.map.map);
|
||||
google.maps.event.addListener(that.marker, 'click', click);
|
||||
return that;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@ $(function() {
|
|||
zoombar: true
|
||||
})
|
||||
.bindEvent({
|
||||
resize: function(event, data) {
|
||||
map.resizeMap();
|
||||
},
|
||||
selectplace: function(event, data) {
|
||||
Ox.print('DATA', data)
|
||||
panel.replaceElement(1, list = new Ox.TreeList({
|
||||
|
|
@ -83,7 +86,8 @@ $(function() {
|
|||
}
|
||||
}));
|
||||
}
|
||||
}),
|
||||
});
|
||||
|
||||
list = new Ox.TreeList({
|
||||
data: [],
|
||||
width: 256
|
||||
|
|
@ -95,6 +99,8 @@ $(function() {
|
|||
},
|
||||
{
|
||||
element: list,
|
||||
resizable: true,
|
||||
resize: [128, 256, 384],
|
||||
size: 256
|
||||
}
|
||||
],
|
||||
|
|
@ -102,14 +108,21 @@ $(function() {
|
|||
})
|
||||
.appendTo($('body'));
|
||||
|
||||
map.gainFocus();
|
||||
|
||||
//setTimeout(function() {
|
||||
//map.appendTo($('body'));
|
||||
map.gainFocus();
|
||||
//}, 2000)
|
||||
|
||||
|
||||
/*
|
||||
$(window).resize(function() {
|
||||
map.options({
|
||||
height: window.innerHeight,
|
||||
width: window.innerWidth - 256
|
||||
});
|
||||
});
|
||||
*/
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue