diff --git a/examples/maps/map_editor/index.html b/examples/maps/map_editor/index.html new file mode 100644 index 00000000..294e941c --- /dev/null +++ b/examples/maps/map_editor/index.html @@ -0,0 +1,13 @@ + + + + World Map with Countries + + + + + + + + + diff --git a/examples/maps/map_editor/js/example.js b/examples/maps/map_editor/js/example.js new file mode 100644 index 00000000..e4a6f93b --- /dev/null +++ b/examples/maps/map_editor/js/example.js @@ -0,0 +1,37 @@ +/* +In this example, we use Ox.MapEditor +*/ + +'use strict'; + +Ox.load(['UI', 'Geo'], function() { + var $map = Ox.MapEditor({ + addPlace: function(place, callback) { + console.log("addPlace", place) + }, + editPlace: function(place, callback) { + console.log("editPlace", place) + }, + getMatches: function(names, callback) { + console.log("getMatches", names) + callback(23); + }, + hasMatches: true, // FIXME: getMatches is enough + height: 800, + mode: 'add', // 'define', + names: null, + places: [], + removePlace: function(place, callback) { + console.log("removePlace", place) + }, + selected: '', + showControls: false, + showLabels: false, + showTypes: true, + width: 600 + }) + .appendTo(Ox.$body); + + Ox.$window.bind({resize: $map.resizeMap}); + +}); diff --git a/source/UI/js/Map/Map.js b/source/UI/js/Map/Map.js index 031b94ae..7ba855a1 100644 --- a/source/UI/js/Map/Map.js +++ b/source/UI/js/Map/Map.js @@ -595,10 +595,17 @@ Ox.Map = function(options, self) { self.boundsChanged = true; } + function toSpan(bounds) { + return { + lat: bounds._ne.lat - bounds._sw.lat, + lng: bounds._ne.lng - bounds._sw.lng, + } + } + function canContain(outerBounds, innerBounds) { // checks if outerBounds _can_ contain innerBounds - var outerSpan = outerBounds.toSpan(), - innerSpan = innerBounds.toSpan(); + var outerSpan = toSpan(outerBounds), + innerSpan = toSpan(innerBounds); return outerSpan.lat > innerSpan.lat && outerSpan.lng > innerSpan.lng; } @@ -614,6 +621,8 @@ Ox.Map = function(options, self) { } function clickMap(event) { + console.log("not this one", event) + return var place = getSelectedPlace(); if (self.options.clickable/* && !editing()*/) { getPlaceByLatLng(event.lngLat, self.map.getBounds(), function(place) { @@ -753,19 +762,19 @@ Ox.Map = function(options, self) { self.$loadingIcon && self.$loadingIcon.start(); var results = await reverseGeocode(latlng); self.$loadingIcon && self.$loadingIcon.stop(); - if (true) { + if (results.features.length) { if (bounds) { - Ox.forEach(results, function(result, i) { + Ox.forEach(results.features, function(result, i) { if ( i == results.length - 1 || - canContain(bounds, result.geometry.bounds || result.geometry.viewport) + canContain(bounds, result.bounds) ) { - callback(new Ox.MapPlace(parseGeodata(results[i]))); + callback(new Ox.MapPlace(parseGeodata(result))); return false; // break } }); } else { - callback(new Ox.MapPlace(parseGeodata(results[0]))); + callback(new Ox.MapPlace(parseGeodata(results.features[0]))); } } if (!results.length) { @@ -1151,7 +1160,7 @@ Ox.Map = function(options, self) { function parseGeodata(data) { console.log("parseGeodata", data) // FIXME: data is geojson Feature with Polygon geometry now - var bounds = data.bounds || data.geometry.bounds || data.geometry.viewport, + var bounds = data.bounds, northEast = bounds._ne, southWest = bounds._sw, place = { @@ -1472,6 +1481,8 @@ Ox.Map = function(options, self) { // someone may want to cache google geocode data, so we fire an event. // google puts functions like lat or lng on the objects' prototypes, // so we create properly named properties, for json encoding + console.log(data) + /* if (data.latLng) { data.latLng = { lat: data.latLng.lat, @@ -1500,6 +1511,7 @@ Ox.Map = function(options, self) { } } }); + */ that.triggerEvent('geocode', data); } diff --git a/source/UI/js/Map/MapMarker.js b/source/UI/js/Map/MapMarker.js index d6efa2e8..446f7f31 100644 --- a/source/UI/js/Map/MapMarker.js +++ b/source/UI/js/Map/MapMarker.js @@ -51,8 +51,8 @@ Ox.MapMarker = function(options) { element.style.width = element.style.height = that.size + 'px' that.marker = new maplibregl.Marker({ raiseOnDrag: false, - shape: {coords: [8, 8, 8], type: 'circle'}, element: element, + //shape: {coords: [8, 8, 8], type: 'circle'}, //title: that.place.name, //zIndex: 1000 }); diff --git a/source/UI/js/Map/MapRectangle.js b/source/UI/js/Map/MapRectangle.js index 5f1771a5..57c23f94 100644 --- a/source/UI/js/Map/MapRectangle.js +++ b/source/UI/js/Map/MapRectangle.js @@ -140,8 +140,11 @@ class MapLibreRectangle { }); } _enableClicking() { - this.map.on('click', `${this.id}-fill`, e => { + this.map.on('click', `rectangles-fill`, e => { + console.log('click', e) if (this.onclick) { + e.preventDefault() + //e.stopPropagation() this.onclick(e) } }) @@ -219,7 +222,6 @@ Ox.MapRectangle = function(options) { function click(e) { console.log('rectangle click', e) - return if ( that.map.options('editable') && that.place.editable diff --git a/source/UI/js/Map/MapRectangleMarker.js b/source/UI/js/Map/MapRectangleMarker.js index bc9c1f0b..b123ece6 100644 --- a/source/UI/js/Map/MapRectangleMarker.js +++ b/source/UI/js/Map/MapRectangleMarker.js @@ -46,6 +46,7 @@ Ox.MapRectangleMarker = function(options) { type: that.place.id[0] == '_' ? 'result' : 'place' }), }); + that.marker.setLngLat(that.place.points[that.position]) function dragstart(e) { Ox.$body.addClass('OxDragging'); @@ -101,10 +102,13 @@ Ox.MapRectangleMarker = function(options) { add add @*/ that.add = function() { - that.marker.setMap(that.map.map); + that.marker.addTo(that.map.map); + console.log("add marker, fix events") + /* google.maps.event.addListener(that.marker, 'dragstart', dragstart); google.maps.event.addListener(that.marker, 'drag', drag); google.maps.event.addListener(that.marker, 'dragend', dragend); + */ }; /*@ @@ -112,21 +116,26 @@ Ox.MapRectangleMarker = function(options) { @*/ that.remove = function() { that.marker.remove(); - google.maps.event.clearListeners(that.marker); + console.log("remove marker, fix events") + //google.maps.event.clearListeners(that.marker); }; /*@ update update @*/ that.update = function() { - that.marker.setOptions({ - icon: Ox.MapMarkerImage({ + marker = new maplibregl.Marker({ + cursor: that.position + '-resize', + draggable: true, + element: Ox.MapMarkerImage({ mode: 'editing', rectangle: true, type: that.place.id[0] == '_' ? 'result' : 'place' }), - position: that.place.points[that.position] }); + marker.setLngLat(that.place.points[that.position]) + that.marker.remove() + that.marker = marker }; return that;