better filesystem structure for modules and themes; 'minified' ui if debug option not set; dynamially generated map markers
This commit is contained in:
rolux
parent
358ee1bc96
commit
4489e88f44
596 changed files with 115093 additions and 17682 deletions
184
source/Ox.UI/js/Map/Ox.MapMarker.js
Normal file
184
source/Ox.UI/js/Map/Ox.MapMarker.js
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=js
|
||||
|
||||
Ox.MapMarker = function(options) {
|
||||
|
||||
options = Ox.extend({
|
||||
color: [255, 0, 0],
|
||||
map: null,
|
||||
place: null,
|
||||
size: 16
|
||||
}, options);
|
||||
|
||||
var that = this;
|
||||
|
||||
Ox.forEach(options, function(val, key) {
|
||||
that[key] = val;
|
||||
});
|
||||
that.marker = new google.maps.Marker({
|
||||
raiseOnDrag: false,
|
||||
shape: {coords: [8, 8, 8], type: 'circle'},
|
||||
title: that.place.name,
|
||||
//zIndex: 1000
|
||||
});
|
||||
|
||||
setOptions();
|
||||
|
||||
function click() {
|
||||
if (!that.place.selected) {
|
||||
that.map.options({selected: that.place.id});
|
||||
} else if (that.map.getKey() == 'meta') {
|
||||
that.map.options({selected: null});
|
||||
} else if (that.map.getKey() == 'shift') {
|
||||
that.map.zoomToPlace();
|
||||
} else {
|
||||
that.map.panToPlace();
|
||||
}
|
||||
}
|
||||
|
||||
function dragstart(e) {
|
||||
|
||||
}
|
||||
|
||||
function drag(e) {
|
||||
var northSouth = (that.place.north - that.place.south) / 2,
|
||||
lat = Ox.limit(
|
||||
e.latLng.lat(),
|
||||
Ox.MIN_LATITUDE + northSouth,
|
||||
Ox.MAX_LATITUDE - northSouth
|
||||
),
|
||||
lng = e.latLng.lng(),
|
||||
span = Math.min(
|
||||
that.place.sizeEastWest * Ox.getDegreesPerMeter(lat) / 2, 179.99999999
|
||||
);
|
||||
degreesPerMeter = Ox.getDegreesPerMeter(lat);
|
||||
that.place.south += lat - that.place.lat;
|
||||
that.place.north += lat - that.place.lat;
|
||||
that.place.west = lng - span;
|
||||
that.place.east = lng + span;
|
||||
if (that.place.west < -180) {
|
||||
that.place.west += 360;
|
||||
} else if (that.place.east > 180) {
|
||||
that.place.east -= 360;
|
||||
}
|
||||
Ox.print('west', that.place.west, 'east', that.place.east, 'span', span);
|
||||
that.place.update();
|
||||
that.marker.setOptions({
|
||||
position: that.place.center
|
||||
})
|
||||
that.place.rectangle.update();
|
||||
}
|
||||
|
||||
function dragend(e) {
|
||||
|
||||
}
|
||||
|
||||
function getMarkerImage(options, callback) {
|
||||
// unused
|
||||
options = Ox.extend({
|
||||
background: [255, 0, 0],
|
||||
editing: false,
|
||||
result: false,
|
||||
selected: false,
|
||||
size: 16
|
||||
}, options);
|
||||
var background = options.result ? [255, 255, 0] : [255, 0, 0],
|
||||
border = options.editing ? [128, 128, 255] :
|
||||
options.selected ? [255, 255, 255] : [0, 0, 0],
|
||||
c = Ox.canvas(options.size, options.size),
|
||||
image,
|
||||
r = options.size / 2;
|
||||
if (Ox.isArray(background)) {
|
||||
c.context.fillStyle = 'rgba(' + background.join(', ') + ', 0.5)';
|
||||
c.context.arc(r, r, r - 2, 0, 360);
|
||||
c.context.fill();
|
||||
renderImage();
|
||||
} else {
|
||||
image = new Image();
|
||||
image.onload = renderImage;
|
||||
image.src = background;
|
||||
}
|
||||
function renderImage() {
|
||||
//var i;
|
||||
if (Ox.isString(background)) {
|
||||
c.context.drawImage(image, 1, 1, options.size - 2, options.size - 2);
|
||||
/*
|
||||
c.imageData = c.context.getImageData(0, 0, options.size, options.size);
|
||||
c.data = c.imageData.data;
|
||||
for (i = 3; i < c.data.length; i += 1) {
|
||||
c.data[i] = Math.round(c.data[i] * 0.5);
|
||||
}
|
||||
c.context.putImageData(c.imageData, 0, 0);
|
||||
*/
|
||||
}
|
||||
c.context.beginPath();
|
||||
c.context.lineWidth = 2;
|
||||
c.context.strokeStyle = 'rgb(' + border.join(', ') + ')';
|
||||
c.context.arc(r, r, r - 1, 0, 360);
|
||||
c.context.stroke();
|
||||
callback(new google.maps.MarkerImage(
|
||||
c.canvas.toDataURL(),
|
||||
new google.maps.Size(options.size, options.size),
|
||||
new google.maps.Point(0, 0),
|
||||
new google.maps.Point(r, r)
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
function setOptions() {
|
||||
// workaround to prevent marker from appearing twice
|
||||
// after setting draggable from true to false (google maps bug)
|
||||
var fix = that.marker.getDraggable() && !that.place.editing;
|
||||
//Ox.print('setOptions, that.color', that.color)
|
||||
that.marker.setOptions({
|
||||
// fixme: cursor remains pointer
|
||||
cursor: that.place.editing ? 'move' : 'pointer',
|
||||
draggable: that.place.editing,
|
||||
icon: Ox.MapMarkerImage({
|
||||
color: that.color,
|
||||
mode: that.place.editing ? 'editing' :
|
||||
that.place.selected ? 'selected' : 'normal',
|
||||
size: that.size,
|
||||
type: that.place.id[0] == '_' ? 'result' : 'place'
|
||||
}),
|
||||
position: that.place.center
|
||||
});
|
||||
if (fix) {
|
||||
that.marker.setVisible(false);
|
||||
setTimeout(function() {
|
||||
that.marker.setVisible(true);
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
that.add = function() {
|
||||
that.marker.setMap(that.map.map);
|
||||
google.maps.event.addListener(that.marker, 'click', click);
|
||||
return that;
|
||||
};
|
||||
|
||||
that.edit = function() {
|
||||
setOptions();
|
||||
google.maps.event.addListener(that.marker, 'dragstart', dragstart);
|
||||
google.maps.event.addListener(that.marker, 'drag', drag);
|
||||
google.maps.event.addListener(that.marker, 'dragend', dragend);
|
||||
};
|
||||
|
||||
that.remove = function() {
|
||||
that.marker.setMap(null);
|
||||
google.maps.event.clearListeners(that.marker);
|
||||
return that;
|
||||
};
|
||||
|
||||
that.submit = function() {
|
||||
google.maps.event.clearListeners(that.marker, 'dragstart');
|
||||
google.maps.event.clearListeners(that.marker, 'drag');
|
||||
google.maps.event.clearListeners(that.marker, 'dragend');
|
||||
}
|
||||
|
||||
that.update = function() {
|
||||
setOptions();
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue