maptoolkit
Version:
Utilidades para trabajar con el mapa de google web.
286 lines • 12.1 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { InfoBubble } from 'js-info-bubble';
import { MtEventSource } from "./mteventsource";
import { MtMarkerGroupCollection } from "./mkcollection";
var _noop = function () {
};
var _defRouteOptions = {
travelMode: 'TRANSIT',
strokeColor: 'pink',
strokeOpacity: 1,
strokeWeight: 6
};
var _defBubbleInfoOptions = {
content: '',
position: null,
shadowStyle: 1,
padding: 0,
backgroundColor: "#fff",
borderRadius: 2,
arrowSize: 0,
borderWidth: 1,
borderColor: "#f3f3f3",
disableAutoPan: false,
hideCloseButton: false,
arrowPosition: 50,
backgroundClassName: '',
minWidth: 300,
minHeight: 50,
arrowStyle: 0,
};
var MapToolkit = (function (_super) {
__extends(MapToolkit, _super);
function MapToolkit(nativeMap, _options) {
var _this = _super.call(this) || this;
_this.nativeMap = nativeMap;
_this._bubbleMarkup = "<div>{{name}}</div>";
var self = _this;
_this._options = _options || {};
google.maps.event.addListener(self.nativeMap, 'idle', function () {
self.event(MapToolkit.EVT_MAP_IDLE).emit({ source: self, evt: {} });
});
google.maps.event.addListener(self.nativeMap, 'click', function (event) {
self.event(MapToolkit.EVT_MAP_CLICK).emit({ source: self, evt: event });
});
google.maps.event.addListener(self.nativeMap, "zoom_changed", function () {
self.event(MapToolkit.EVT_MAP_ZOOM_CHANGED).emit({ source: self, evt: {} });
if (self._markerSelected) {
self._ubicarInfoBubble(self.nativeMap.getZoom(), self._markerSelected);
}
});
_this._markerGroupCollection = new MtMarkerGroupCollection();
return _this;
}
MapToolkit.prototype.option = function (name, defValue) {
return this._options[name] != void 0 ? this._options[name] : defValue;
};
MapToolkit.prototype.getSelectedMarker = function () {
return this._markerSelected;
};
MapToolkit.prototype.addMarker = function (marker, group) {
if (marker) {
this.addAllMarkers([marker], group);
}
return this;
};
MapToolkit.prototype.addAllMarkers = function (markers, group) {
var _this = this;
if (markers && markers.length) {
this._markerGroupCollection.addAllMarkers(markers, group).forEach(function (mk) {
mk.event(MapToolkit.EVT_MAP_MARKER_CLICK).addListener(function (args) {
_this._markerSelected = args.source;
_this.event(MapToolkit.EVT_MAP_MARKER_CLICK).emit({
source: _this,
marker: args.source,
evt: args.evt
});
});
if (_this.option("markerIconSelector")) {
mk.setIcon(_this.option("markerIconSelector")(mk.model));
}
mk.show(_this.nativeMap);
});
}
return this;
};
MapToolkit.prototype.setMarker = function (marker, group) {
this.setAllMarkers([marker], group);
};
/**
* Elimina los markers que no estan mostrandose y adiciona los nuevos.
* @param markers
* @param group
*/
MapToolkit.prototype.setAllMarkers = function (markers, group) {
if (markers && markers.length) {
var toRemove = [], toUpdate = [], toAdd = [];
var currMarkers = this._markerGroupCollection.getGroup(group);
var setMkIds = {};
//busco los markers que no estan en el mapa y los pongo para adicionar
//ademas hago un map de los ids para luego verificar los q no estan en currMarkers y eliminarlos
markers.forEach(function (m) {
setMkIds[m.getId()] = true;
if (!currMarkers.containsKey(m.getId())) {
toAdd.push(m);
}
else {
toUpdate.push(m);
}
});
currMarkers.forEach(function (id, mk) {
if (!setMkIds[mk.getId()]) {
toRemove.push(mk);
}
});
//actualizo los markers
toUpdate.forEach(function (m) {
var actualMk = currMarkers.getValue(m.getId());
actualMk.setPosition(m.getPosition());
actualMk.setModel(m.model);
});
//elimino los que no estan en markers
this.removeAllMarkers(toRemove, group);
//adiciono los que no estan en currMarkers
this.addAllMarkers(toAdd, group);
}
return this;
};
MapToolkit.prototype.removeMarker = function (id, group) {
var mk = this._markerGroupCollection.removeMarker(id, group);
if (mk) {
mk.remove();
return mk;
}
};
MapToolkit.prototype.removeAllMarkers = function (markers, group) {
if (markers && markers.length) {
this._markerGroupCollection.removeMarkers(markers, group).forEach(function (m) {
m.remove();
});
}
};
MapToolkit.prototype.removeGroup = function (group) {
var markers = this._markerGroupCollection.removeGroup(group);
if (markers) {
markers.forEach(function (mk) {
mk.remove();
});
}
};
MapToolkit.prototype.centerMapToMarkers = function () {
var markers = this._markerGroupCollection.toArray();
if (markers.length > 0) {
var latMin = markers[0].getPosition().lat(), latMax = markers[0].getPosition().lat(), lngMin = markers[0].getPosition().lng(), lngMax = markers[0].getPosition().lng();
var i;
for (i = 1; i < markers.length; i++) {
latMin = markers[i].getPosition().lat() < latMin ? markers[i].getPosition().lat() : latMin;
latMax = markers[i].getPosition().lat() > latMax ? markers[i].getPosition().lat() : latMax;
lngMin = markers[i].getPosition().lng() < lngMin ? markers[i].getPosition().lng() : lngMin;
lngMax = markers[i].getPosition().lng() > lngMax ? markers[i].getPosition().lng() : lngMax;
}
var mediaLat = (latMin + latMax) / 2, mediaLng = (lngMin + lngMax) / 2;
//busco el rig mas cercano a la media
var markerMiddle = markers[0];
var difCentro = Math.abs(Math.abs(markerMiddle.getPosition().lat()) - Math.abs(mediaLat)) +
Math.abs(Math.abs(markerMiddle.getPosition().lng() - Math.abs(mediaLng)));
for (i = 1; i < markers.length; i++) {
var difRig = Math.abs(Math.abs(markers[i].getPosition().lat()) - Math.abs(mediaLat)) +
Math.abs(Math.abs(markers[i].getPosition().lng()) - Math.abs(mediaLng));
if (difRig < difCentro) {
markerMiddle = markers[i];
difCentro = difRig;
}
}
this.centerMap(markerMiddle.getPosition(), 5);
}
};
MapToolkit.prototype.centerMap = function (pos, zoom) {
if (typeof (pos) == "string") {
var vals = pos.split(",");
pos = new google.maps.LatLng(parseFloat(vals[0]), parseFloat(vals[1]));
}
this.nativeMap.setCenter(pos);
this.nativeMap.setZoom(zoom);
};
MapToolkit.prototype.centerAndZoomToMarkers = function (positions) {
positions = positions || this._markerGroupCollection.toArray().map(function (mk) {
return mk.getPosition();
});
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < positions.length; i++) {
latlngbounds.extend(new google.maps.LatLng(positions[i].lat(), positions[i].lng()));
}
var zprev = this.nativeMap.getZoom();
this.nativeMap.fitBounds(latlngbounds);
this.nativeMap.setZoom(zprev);
};
MapToolkit.prototype.getZoom = function () {
return this.nativeMap.getZoom();
};
MapToolkit.prototype.getCenter = function () {
return this.nativeMap.getCenter();
};
MapToolkit.prototype.getBounds = function () {
return this.nativeMap.getBounds();
};
MapToolkit.prototype.paintCircle = function (radio, center, circleOpts, clickListener) {
var self = this;
if (self._radioSearchPaint)
self._radioSearchPaint.setMap(null);
// Add the circle for this city to the map.
self._radioSearchPaint = new google.maps.Circle(circleOpts);
if (clickListener)
google.maps.event.addListener(self._radioSearchPaint, 'click', function (event) {
clickListener(event);
});
return self._radioSearchPaint;
};
MapToolkit.prototype.showInfoBubble = function (options) {
options = Object.assign({}, _defBubbleInfoOptions, options, {
map: this.nativeMap,
position: this._getInfoBubblePositionForMarkerPosition(this.nativeMap.getZoom(), options.position)
});
this.closeInfoBubble();
var infoBubble = new InfoBubble(options);
infoBubble.open();
this._infoBubbleOpened = infoBubble;
};
MapToolkit.prototype.closeInfoBubble = function () {
this._infoBubbleOpened && this._infoBubbleOpened.close();
};
MapToolkit.prototype.showRoute = function (start, end, options) {
var self = this;
options = Object.assign({}, _defRouteOptions, options);
return new Promise(function (resolve, reject) {
var request = {
origin: start,
destination: end,
travelMode: options.travelMode
};
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: { strokeColor: options.strokeColor },
suppressMarkers: true
});
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(self.nativeMap);
self._routeDrawed = directionsDisplay;
resolve(self._routeDrawed);
}
else {
reject({ response: response, status: status });
}
});
});
};
MapToolkit.prototype.clearRoute = function () {
if (this._routeDrawed) {
this._routeDrawed.setMap(null);
this._routeDrawed = null;
}
};
MapToolkit.prototype._getInfoBubblePositionForMarkerPosition = function (zoom, pos) {
var newLat = pos.lat() + (0.00004 * Math.pow(2, (19 - zoom)));
return new google.maps.LatLng(newLat, pos.lng());
};
MapToolkit.prototype._ubicarInfoBubble = function (zoom, marker) {
if (this._infoBubbleOpened) {
//position infoBubble for each zoom level change, based on arithmetic logic (notice the power of 2)
this._infoBubbleOpened.setPosition(this._getInfoBubblePositionForMarkerPosition(zoom, marker.getPosition()));
}
};
return MapToolkit;
}(MtEventSource));
export { MapToolkit };
//# sourceMappingURL=maptoolkit.js.map