Compare commits
No commits in common. "f3e0632f0e0f9f13352a9d4dd64ed848cfabae50" and "8dbfcc0ecec4af0b3f7cbfba4b91f1ee334864fe" have entirely different histories.
f3e0632f0e
...
8dbfcc0ece
6 changed files with 16 additions and 89 deletions
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>World Map with Countries</title>
|
||||
<meta http-equiv="Keywords" content="Lists"/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../../source/UI/themes/oxlight/png/icon16.png"/>
|
||||
<script type="text/javascript" src="../../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { e.origin == window.location.origin && eval('(' + e.data + ')'); });</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/*
|
||||
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});
|
||||
|
||||
});
|
||||
|
|
@ -595,17 +595,10 @@ 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 = toSpan(outerBounds),
|
||||
innerSpan = toSpan(innerBounds);
|
||||
var outerSpan = outerBounds.toSpan(),
|
||||
innerSpan = innerBounds.toSpan();
|
||||
return outerSpan.lat > innerSpan.lat &&
|
||||
outerSpan.lng > innerSpan.lng;
|
||||
}
|
||||
|
|
@ -621,8 +614,6 @@ 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) {
|
||||
|
|
@ -762,19 +753,19 @@ Ox.Map = function(options, self) {
|
|||
self.$loadingIcon && self.$loadingIcon.start();
|
||||
var results = await reverseGeocode(latlng);
|
||||
self.$loadingIcon && self.$loadingIcon.stop();
|
||||
if (results.features.length) {
|
||||
if (true) {
|
||||
if (bounds) {
|
||||
Ox.forEach(results.features, function(result, i) {
|
||||
Ox.forEach(results, function(result, i) {
|
||||
if (
|
||||
i == results.length - 1 ||
|
||||
canContain(bounds, result.bounds)
|
||||
canContain(bounds, result.geometry.bounds || result.geometry.viewport)
|
||||
) {
|
||||
callback(new Ox.MapPlace(parseGeodata(result)));
|
||||
callback(new Ox.MapPlace(parseGeodata(results[i])));
|
||||
return false; // break
|
||||
}
|
||||
});
|
||||
} else {
|
||||
callback(new Ox.MapPlace(parseGeodata(results.features[0])));
|
||||
callback(new Ox.MapPlace(parseGeodata(results[0])));
|
||||
}
|
||||
}
|
||||
if (!results.length) {
|
||||
|
|
@ -1160,7 +1151,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,
|
||||
var bounds = data.bounds || data.geometry.bounds || data.geometry.viewport,
|
||||
northEast = bounds._ne,
|
||||
southWest = bounds._sw,
|
||||
place = {
|
||||
|
|
@ -1481,8 +1472,6 @@ 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,
|
||||
|
|
@ -1511,7 +1500,6 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
that.triggerEvent('geocode', data);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
|
|
|
|||
|
|
@ -140,11 +140,8 @@ class MapLibreRectangle {
|
|||
});
|
||||
}
|
||||
_enableClicking() {
|
||||
this.map.on('click', `rectangles-fill`, e => {
|
||||
console.log('click', e)
|
||||
this.map.on('click', `${this.id}-fill`, e => {
|
||||
if (this.onclick) {
|
||||
e.preventDefault()
|
||||
//e.stopPropagation()
|
||||
this.onclick(e)
|
||||
}
|
||||
})
|
||||
|
|
@ -222,6 +219,7 @@ Ox.MapRectangle = function(options) {
|
|||
|
||||
function click(e) {
|
||||
console.log('rectangle click', e)
|
||||
return
|
||||
if (
|
||||
that.map.options('editable')
|
||||
&& that.place.editable
|
||||
|
|
|
|||
|
|
@ -46,7 +46,6 @@ 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');
|
||||
|
|
@ -102,13 +101,10 @@ Ox.MapRectangleMarker = function(options) {
|
|||
add <f> add
|
||||
@*/
|
||||
that.add = function() {
|
||||
that.marker.addTo(that.map.map);
|
||||
console.log("add marker, fix events")
|
||||
/*
|
||||
that.marker.setMap(that.map.map);
|
||||
google.maps.event.addListener(that.marker, 'dragstart', dragstart);
|
||||
google.maps.event.addListener(that.marker, 'drag', drag);
|
||||
google.maps.event.addListener(that.marker, 'dragend', dragend);
|
||||
*/
|
||||
};
|
||||
|
||||
/*@
|
||||
|
|
@ -116,26 +112,21 @@ Ox.MapRectangleMarker = function(options) {
|
|||
@*/
|
||||
that.remove = function() {
|
||||
that.marker.remove();
|
||||
console.log("remove marker, fix events")
|
||||
//google.maps.event.clearListeners(that.marker);
|
||||
google.maps.event.clearListeners(that.marker);
|
||||
};
|
||||
|
||||
/*@
|
||||
update <f> update
|
||||
@*/
|
||||
that.update = function() {
|
||||
marker = new maplibregl.Marker({
|
||||
cursor: that.position + '-resize',
|
||||
draggable: true,
|
||||
element: Ox.MapMarkerImage({
|
||||
that.marker.setOptions({
|
||||
icon: 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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue