JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<div id="map_canvas"></div>
</div>
<script src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script src="http://jscott.me/minify/media/js/jsundoable.js"></script>
CSS
html {
height: 100%;
}
#map_canvas, #main, #container, body {
width: auto;
height: auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
JavaScript
var WoosmapEditor = function() {
var undoManager = new UndoManager({
undoChange: function() {
$(undoManager).trigger('stackchange');
},
redoChange: function() {
$(undoManager).trigger('stackchange');
}
});
var _map;
var _model = function() {
function createMarker(position) {
var marker = new google.maps.Marker({position:position});
marker.setMap(_map);
undoManager.undoable("create marker", deleteMarker, [marker]);
$(_model).trigger('markerAdded', [marker]);
return marker;
}
function deleteMarker(marker) {
marker.setMap(null);
undoManager.undoable("delete marker", createMarker, [marker.getPosition()]);
$(_model).trigger('markerDeleted', [marker]);
}
function createPolyline(points) {
var polyline = new google.maps.Polyline({path:points});
polyline.setMap(_map);
undoManager.undoable("create polyline", deletePolyline, [polyline]);
$(_model).trigger('polylineAdded', [polyline]);
return polyline;
}
function deletePolyline(polyline) {
polyline.setMap(null);
undoManager.undoable("delete polyline", createPolyline, [polyline.getPath()]);
$(_model).trigger('polylineDeleted', [polyline]);
}
function addPointToPolyline(polyline, point) {
var newSize = polyline.getPath().push(point);
console.log('new size: ' + newSize);
undoManager.undoable("add polyline point", deletePointFromPolyline, [polyline]);
$(_model).trigger('polylinePointAdded', [polyline, point]);
}
function deletePointFromPolyline(polyline) {
var path = polyline.getPath();
var oldPoint = path.pop();
undoManager.undoable("delete polyline point", addPointToPolyline, [polyline,...