oxjs/examples/maps/map_editor/js/example.js

88 lines
2.8 KiB
JavaScript

/*
In this example, we use Ox.MapEditor
*/
'use strict';
Ox.load(['UI', 'Geo'], function() {
var $storage = Ox.localStorage("map_editor")
var places = $storage('places') || []
var placesAPI = Ox.api(places, {
geo: true,
sort: '-area',
cache: true,
})
var $map = Ox.MapEditor({
addPlace: function(place, callback) {
place = Ox.clone(place)
place.id = Ox.encodeBase26((places.length ? Ox.max(places.map(p => Ox.decodeBase26(p.id))) : 0) + 1)
place.editable = true;
console.log("addPlace", place.id, place)
places.push(place)
$storage("places", places)
placesAPI.update(places)
setTimeout(() => {
Ox.Request.clearCache();
callback({
status: {
code: 200
},
data: place
})
}, 200)
},
editPlace: function(place, callback) {
place = Ox.clone(place)
places.forEach(p => {
if (p.id == place.id) {
Object.assign(p, place);
place = p
}
})
$storage("places", places)
placesAPI.update(places)
setTimeout(() => {
Ox.Request.clearCache();
callback({
status: {
code: 200
},
data: place
})
}, 200)
},
getMatches: function(names, callback) {
console.log("getMatches", names)
callback(23);
},
hasMatches: true, // FIXME: getMatches is enough
height: 800,
mode: 'add', // 'define',
names: null,
places: placesAPI,
removePlace: function(place, callback) {
console.log("removePlace", place.id, places)
places = places.filter(p => { return p.id != place.id })
console.log("new places", places)
$storage("places", places)
placesAPI.update(places)
setTimeout(() => {
Ox.Request.clearCache();
callback({
status: {
code: 200
},
})
}, 200)
},
selected: '',
showControls: false,
showLabels: false,
showTypes: true,
width: 600
})
.appendTo(Ox.$body);
Ox.$window.bind({resize: $map.resizeMap});
});