Compare commits
No commits in common. "maplibre" and "master" have entirely different histories.
16 changed files with 274 additions and 1180 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,88 +0,0 @@
|
|||
/*
|
||||
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});
|
||||
|
||||
});
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<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="../../../min/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>
|
||||
|
|
|
|||
|
|
@ -1800,7 +1800,6 @@ Maps
|
|||
.OxMap .OxLabel.OxMapControl.OxMapScale {
|
||||
right: 4px;
|
||||
bottom: 19px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.OxMap .OxPlaceControl.OxPlaceFlag {
|
||||
|
|
@ -1822,7 +1821,6 @@ Maps
|
|||
top: 4px;
|
||||
width: 136px;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1;
|
||||
}
|
||||
.OxMap .OxPlaceControl.OxPlaceDeselectButton {
|
||||
right: 4px;
|
||||
|
|
@ -2971,20 +2969,3 @@ Miscellaneous
|
|||
.OxTooltip > div {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
MapLibre GL cleanups
|
||||
================================================================================
|
||||
*/
|
||||
|
||||
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.maplibregl-popup-content {
|
||||
padding: 0px !important;
|
||||
border-radius: 5px;
|
||||
top: 50px;
|
||||
left: -4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,7 +99,6 @@ Ox.Map = function(options, self) {
|
|||
return place.name || '<span class="OxLight">Unnamed</span>';
|
||||
},
|
||||
maxMarkers: 100,
|
||||
nominatim: 'https://nominatim.openstreetmap.org',
|
||||
places: null,
|
||||
selected: '',
|
||||
showControls: false,
|
||||
|
|
@ -107,7 +106,6 @@ Ox.Map = function(options, self) {
|
|||
showStatusbar: false,
|
||||
showToolbar: false,
|
||||
showZoombar: false,
|
||||
style: 'https://tiles.openfreemap.org/styles/liberty',
|
||||
zoomOnlyWhenFocused: false
|
||||
// fixme: width, height
|
||||
})
|
||||
|
|
@ -145,7 +143,7 @@ Ox.Map = function(options, self) {
|
|||
self.map.fitBounds(mapBounds);
|
||||
} else {
|
||||
self.map.setZoom(self.minZoom);
|
||||
self.map.setCenter(new maplibregl.LngLat(0, 0));
|
||||
self.map.setCenter(new google.maps.LatLng(0, 0));
|
||||
}
|
||||
// fixme: the following is just a guess
|
||||
self.boundsChanged = true;
|
||||
|
|
@ -511,27 +509,23 @@ Ox.Map = function(options, self) {
|
|||
$placeControl.css({opacity: 0}).hide();
|
||||
});
|
||||
|
||||
if (window.maplibregl) {
|
||||
if (window.google) {
|
||||
// timeout needed so that the map is in the DOM
|
||||
setTimeout(initMap);
|
||||
} else if (window.googleCallback) {
|
||||
(function interval() {
|
||||
isLoaded() ? initMap() : setTimeout(interval, 100);
|
||||
}());
|
||||
} else {
|
||||
Ox.getStylesheet([
|
||||
Ox.PATH + 'UI/maplibre-gl/maplibre-gl.css',
|
||||
Ox.PATH + 'UI/maplibre-gl/maplibre-gl-geocoder.css'
|
||||
], () => {})
|
||||
$.getScript([
|
||||
Ox.PATH + 'UI/maplibre-gl/maplibre-gl.js',
|
||||
Ox.PATH + 'UI/maplibre-gl/maplibre-gl-geocoder.min.js',
|
||||
], initMap)
|
||||
}
|
||||
|
||||
function equalBonds(a, b) {
|
||||
return (
|
||||
a._sw.lat == b._sw.lat &&
|
||||
a._sw.lng == b._sw.lng &&
|
||||
a._ne.lat == b._ne.lat &&
|
||||
a._ne.lng == b._ne.lng
|
||||
)
|
||||
window.googleCallback = function() {
|
||||
delete window.googleCallback;
|
||||
initMap();
|
||||
};
|
||||
$.getScript(
|
||||
document.location.protocol
|
||||
+ '//maps.google.com/maps/api/js?callback=googleCallback&sensor=false'
|
||||
+ (Ox.Map.GoogleApiKey ? '&key=' + Ox.Map.GoogleApiKey : '')
|
||||
);
|
||||
}
|
||||
|
||||
function addPlaceToMap(place) {
|
||||
|
|
@ -541,11 +535,11 @@ Ox.Map = function(options, self) {
|
|||
if (!place) {
|
||||
var bounds = self.map.getBounds(),
|
||||
center = self.map.getCenter(),
|
||||
southwest = new maplibregl.LngLatBounds(
|
||||
bounds._sw, center
|
||||
southwest = new google.maps.LatLngBounds(
|
||||
bounds.getSouthWest(), center
|
||||
).getCenter(),
|
||||
northeast = new maplibregl.LngLatBounds(
|
||||
center, bounds._ne
|
||||
northeast = new google.maps.LatLngBounds(
|
||||
center, bounds.getNorthEast()
|
||||
).getCenter(),
|
||||
place = new Ox.MapPlace({
|
||||
alternativeNames: [],
|
||||
|
|
@ -556,14 +550,14 @@ Ox.Map = function(options, self) {
|
|||
map: that,
|
||||
name: '',
|
||||
type: 'feature',
|
||||
south: southwest.lat,
|
||||
west: southwest.lng,
|
||||
north: northeast.lat,
|
||||
east: northeast.lng
|
||||
south: southwest.lat(),
|
||||
west: southwest.lng(),
|
||||
north: northeast.lat(),
|
||||
east: northeast.lng()
|
||||
});
|
||||
}
|
||||
Ox.forEach(self.places, function(p, i) {
|
||||
if (equalBonds(place.bounds, p.bounds)) {
|
||||
if (place.bounds.equals(p.bounds)) {
|
||||
place = p;
|
||||
exists = true;
|
||||
return false; // break
|
||||
|
|
@ -595,23 +589,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 = toSpan(outerBounds),
|
||||
innerSpan = toSpan(innerBounds);
|
||||
return outerSpan.lat > innerSpan.lat &&
|
||||
outerSpan.lng > innerSpan.lng;
|
||||
var outerSpan = outerBounds.toSpan(),
|
||||
innerSpan = innerBounds.toSpan();
|
||||
return outerSpan.lat() > innerSpan.lat() &&
|
||||
outerSpan.lng() > innerSpan.lng();
|
||||
}
|
||||
|
||||
function centerChanged() {
|
||||
that.tooltip.remove()
|
||||
var tooltip = $('.OxMapMarkerTooltip');
|
||||
tooltip.length && Ox.$elements[$(tooltip[0]).data('oxid')].hide();
|
||||
self.center = self.map.getCenter();
|
||||
self.centerChanged = true;
|
||||
}
|
||||
|
|
@ -621,21 +609,9 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
function clickMap(event) {
|
||||
// Check if click hit any rectangle fill layers (which have rectangle click handlers)
|
||||
var features = self.map.queryRenderedFeatures(event.point, {
|
||||
layers: self.map.getStyle().layers
|
||||
.filter(layer => layer.id.includes('-fill'))
|
||||
.map(layer => layer.id)
|
||||
});
|
||||
|
||||
// If we clicked on a rectangle, don't process map click
|
||||
if (features.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var place = getSelectedPlace();
|
||||
if (self.options.clickable/* && !editing()*/) {
|
||||
getPlaceByLatLng(event.lngLat, self.map.getBounds(), function(place) {
|
||||
getPlaceByLatLng(event.latLng, self.map.getBounds(), function(place) {
|
||||
if (place) {
|
||||
addPlaceToMap(place);
|
||||
//selectPlace(place.id);
|
||||
|
|
@ -680,7 +656,7 @@ Ox.Map = function(options, self) {
|
|||
|
||||
function crossesDateline() {
|
||||
var bounds = self.map.getBounds();
|
||||
return bounds._sw.lng > bounds._ne.lng;
|
||||
return bounds.getSouthWest().lng() > bounds.getNorthEast().lng();
|
||||
}
|
||||
|
||||
function editing() {
|
||||
|
|
@ -705,9 +681,9 @@ Ox.Map = function(options, self) {
|
|||
// get initial map bounds
|
||||
self.options.places({}, function(result) {
|
||||
var area = result.data.area;
|
||||
callback(new maplibregl.LngLatBounds(
|
||||
new maplibregl.LngLat(area.west, area.south),
|
||||
new maplibregl.LngLat(area.east, area.north)
|
||||
callback(new google.maps.LatLngBounds(
|
||||
new google.maps.LatLng(area.south, area.west),
|
||||
new google.maps.LatLng(area.north, area.east)
|
||||
));
|
||||
});
|
||||
}
|
||||
|
|
@ -719,28 +695,24 @@ Ox.Map = function(options, self) {
|
|||
- self.options.showZoombar * 16;
|
||||
}
|
||||
|
||||
function getMapType() {
|
||||
return self.options.showLabels ? 'HYBRID' : 'SATELLITE'
|
||||
}
|
||||
|
||||
function getMaxZoom(point, callback) {
|
||||
if (arguments.length == 1) {
|
||||
callback = point;
|
||||
point = self.map.getCenter();
|
||||
}
|
||||
// fixme, why is getMaxZoom off by one?
|
||||
let maxZoom = self.map.getMaxZoom()
|
||||
setTimeout(() => {
|
||||
callback(maxZoom)
|
||||
})
|
||||
/*
|
||||
self.maxZoomService.getMaxZoomAtLatLng(point, function(data) {
|
||||
callback(data.status == 'OK' ? data.zoom : null);
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
function getMetersPerPixel() {
|
||||
// m/px = m/deg * deg/px
|
||||
const degreesPerPixel = 360 / (self.tileSize * Math.pow(2, self.map.getZoom()));
|
||||
const center = self.map.getCenter();
|
||||
return Ox.getMetersPerDegree(center.lat) * degreesPerPixel;
|
||||
var degreesPerPixel = 360 / (self.tileSize * Math.pow(2, self.map.getZoom()));
|
||||
return Ox.getMetersPerDegree(self.map.getCenter().lat()) * degreesPerPixel;
|
||||
}
|
||||
|
||||
function getMinZoom() {
|
||||
|
|
@ -762,40 +734,61 @@ Ox.Map = function(options, self) {
|
|||
: Ox.getObjectById(self.places, id);
|
||||
}
|
||||
|
||||
async function getPlaceByLatLng(latlng, bounds, callback) {
|
||||
// gets the place at latlng appropriate for current zoom level
|
||||
function getPlaceByLatLng(latlng, bounds, callback) {
|
||||
// gets the largest place at latlng that would fit in bounds
|
||||
var callback = arguments.length == 3 ? callback : bounds,
|
||||
bounds = arguments.length == 3 ? bounds : null;
|
||||
self.$loadingIcon && self.$loadingIcon.start();
|
||||
var results = await reverseGeocode(latlng);
|
||||
self.$loadingIcon && self.$loadingIcon.stop();
|
||||
|
||||
if (results.features.length) {
|
||||
// We only have one result based on current zoom level
|
||||
var feature = results.features[0];
|
||||
callback(new Ox.MapPlace(parseGeodata(feature)));
|
||||
|
||||
triggerGeocodeEvent({
|
||||
latLng: latlng,
|
||||
results: results.features
|
||||
});
|
||||
} else {
|
||||
Ox.Log('Map', 'geocode failed: no results');
|
||||
callback(null);
|
||||
}
|
||||
self.geocoder.geocode({
|
||||
latLng: latlng
|
||||
}, function(results, status) {
|
||||
self.$loadingIcon && self.$loadingIcon.stop();
|
||||
if (status == google.maps.GeocoderStatus.OK) {
|
||||
if (bounds) {
|
||||
Ox.forEach(results.reverse(), function(result, i) {
|
||||
if (
|
||||
i == results.length - 1 ||
|
||||
canContain(bounds, result.geometry.bounds || result.geometry.viewport)
|
||||
) {
|
||||
callback(new Ox.MapPlace(parseGeodata(results[i])));
|
||||
return false; // break
|
||||
}
|
||||
});
|
||||
} else {
|
||||
callback(new Ox.MapPlace(parseGeodata(results[0])));
|
||||
}
|
||||
}
|
||||
if (
|
||||
status == google.maps.GeocoderStatus.OK ||
|
||||
status == google.maps.GeocoderStatus.ZERO_RESULTS
|
||||
) {
|
||||
triggerGeocodeEvent({
|
||||
latLng: latlng,
|
||||
results: results
|
||||
});
|
||||
} else {
|
||||
Ox.Log('Map', 'geocode failed:', status);
|
||||
callback(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getPlaceByName(name, callback) {
|
||||
self.$loadingIcon && self.$loadingIcon.start();
|
||||
forwardGeocode({
|
||||
query: name
|
||||
}).then(function(results) {
|
||||
self.geocoder.geocode({
|
||||
address: name
|
||||
}, function(results, status) {
|
||||
self.$loadingIcon && self.$loadingIcon.stop();
|
||||
if (results.features.length) {
|
||||
callback(new Ox.MapPlace(parseGeodata(results.features[0])));
|
||||
if (status == google.maps.GeocoderStatus.OK) {
|
||||
callback(new Ox.MapPlace(parseGeodata(results[0])));
|
||||
}
|
||||
if (
|
||||
status == google.maps.GeocoderStatus.OK
|
||||
&& status != google.maps.GeocoderStatus.ZERO_RESULTS
|
||||
) {
|
||||
triggerGeocodeEvent({
|
||||
address: name,
|
||||
results: results.features
|
||||
results: results
|
||||
});
|
||||
} else {
|
||||
Ox.Log('Map', 'geocode failed:', status);
|
||||
|
|
@ -838,192 +831,36 @@ Ox.Map = function(options, self) {
|
|||
: null;
|
||||
}
|
||||
|
||||
function bbox2bounds(bbox) {
|
||||
return new maplibregl.LngLatBounds(
|
||||
new maplibregl.LngLat(bbox[0], bbox[1]),
|
||||
new maplibregl.LngLat(bbox[2], bbox[3])
|
||||
)
|
||||
}
|
||||
|
||||
function converNominatimFeature(feature) {
|
||||
const center = [
|
||||
feature.bbox[0] +
|
||||
(feature.bbox[2] - feature.bbox[0]) / 2,
|
||||
feature.bbox[1] +
|
||||
(feature.bbox[3] - feature.bbox[1]) / 2
|
||||
];
|
||||
const polygon = {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[feature.bbox[0], feature.bbox[1]],
|
||||
[feature.bbox[1], feature.bbox[2]],
|
||||
[feature.bbox[2], feature.bbox[3]],
|
||||
[feature.bbox[0], feature.bbox[3]],
|
||||
]
|
||||
},
|
||||
bounds: bbox2bounds(feature.bbox),
|
||||
place_name: feature.properties.display_name,
|
||||
properties: feature.properties,
|
||||
text: feature.properties.display_name,
|
||||
address_components: [
|
||||
{
|
||||
long_name: feature.properties.display_name,
|
||||
short_name: feature.properties.display_name,
|
||||
types: ['place']
|
||||
}
|
||||
],
|
||||
place_type: ['place'],
|
||||
};
|
||||
return polygon
|
||||
}
|
||||
|
||||
async function reverseGeocode(config) {
|
||||
const features = [];
|
||||
|
||||
// Use current map zoom level directly as Nominatim zoom level
|
||||
const currentMapZoom = Math.round(self.map.getZoom());
|
||||
// FIXME: map to nominatim zoom levels:
|
||||
// https://nominatim.org/release-docs/develop/api/Reverse/
|
||||
// zoom address detail
|
||||
// 3 country
|
||||
// 5 state
|
||||
// 8 county
|
||||
// 10 city
|
||||
// 12 town / borough
|
||||
// 13 village / suburb
|
||||
// 14 neighbourhood
|
||||
// 15 any settlement
|
||||
// 16 major streets
|
||||
// 17 major and minor streets
|
||||
// 18 building
|
||||
//
|
||||
console.log('Reverse geocoding: using map zoom =', currentMapZoom, 'for Nominatim zoom');
|
||||
let request = `${self.options.nominatim}/reverse?lat=${
|
||||
config.lat
|
||||
}&lon=${
|
||||
config.lng
|
||||
}&format=geojson&polygon_geojson=0&addressdetails=1&extratags=1&accept-language=en`;
|
||||
request += `&zoom=${currentMapZoom}`
|
||||
|
||||
try {
|
||||
const response = await fetch(request);
|
||||
const geojson = await response.json();
|
||||
|
||||
if (geojson.features && geojson.features.length > 0) {
|
||||
const feature = converNominatimFeature(geojson.features[0]);
|
||||
feature.zoom = currentMapZoom;
|
||||
features.push(feature);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Failed to reverseGeocode with error: ${e}`);
|
||||
}
|
||||
|
||||
return {
|
||||
features
|
||||
};
|
||||
}
|
||||
async function forwardGeocode(config) {
|
||||
const features = [];
|
||||
const request = `${self.options.nominatim}/search?q=${
|
||||
config.query
|
||||
}&format=geojson&polygon_geojson=0&addressdetails=1&accept-language=en`;
|
||||
try {
|
||||
const response = await fetch(request);
|
||||
const geojson = await response.json();
|
||||
for (const feature of geojson.features) {
|
||||
features.push(converNominatimFeature(feature));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Failed to forwardGeocode with error: ${e}`);
|
||||
}
|
||||
|
||||
return {
|
||||
features
|
||||
};
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
|
||||
getMapBounds(function(mapBounds) {
|
||||
|
||||
//Ox.Log('Map', 'init', mapBounds._sw, mapBounds._ne, mapBounds.getCenter())
|
||||
//Ox.Log('Map', 'init', mapBounds.getSouthWest(), mapBounds.getNorthEast(), mapBounds.getCenter())
|
||||
|
||||
//self.elevationService = new google.maps.ElevationService();
|
||||
//self.maxZoomService = new google.maps.MaxZoomService();
|
||||
//
|
||||
self.elevationService = new google.maps.ElevationService();
|
||||
self.geocoder = new google.maps.Geocoder();
|
||||
self.maxZoomService = new google.maps.MaxZoomService();
|
||||
|
||||
self.center = mapBounds ? mapBounds.getCenter() : new maplibregl.LngLat(0, 0);
|
||||
self.center = mapBounds ? mapBounds.getCenter() : new google.maps.LatLng(0, 0);
|
||||
self.zoom = self.minZoom;
|
||||
|
||||
self.sateliteStyle = {
|
||||
'version': 8,
|
||||
'sources': {
|
||||
'raster-tiles': {
|
||||
'type': 'raster',
|
||||
'tiles': [
|
||||
'https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
|
||||
'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
|
||||
'https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
|
||||
'https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
|
||||
],
|
||||
'tileSize': 256,
|
||||
'attribution':
|
||||
'FIXME',
|
||||
},
|
||||
},
|
||||
'layers': [
|
||||
{
|
||||
'id': 'simple-tiles',
|
||||
'type': 'raster',
|
||||
'source': 'raster-tiles',
|
||||
'roundZoom': true,
|
||||
'minzoom': 0,
|
||||
'maxzoom': 22
|
||||
},
|
||||
]
|
||||
};
|
||||
window.map = that.map = self.map = new maplibregl.Map({
|
||||
container: self.$map[0],
|
||||
that.map = self.map = new google.maps.Map(self.$map[0], {
|
||||
center: self.center,
|
||||
style: self.options.showLabels ? self.options.style : self.sateliteStyle,
|
||||
//noClear: true,
|
||||
//scrollwheel: !self.options.zoomOnlyWhenFocused,
|
||||
disableDefaultUI: true,
|
||||
disableDoubleClickZoom: true,
|
||||
mapTypeId: google.maps.MapTypeId[getMapType()],
|
||||
noClear: true,
|
||||
scrollwheel: !self.options.zoomOnlyWhenFocused,
|
||||
zoom: self.zoom
|
||||
})
|
||||
self.geocoder = new MaplibreGeocoder({
|
||||
forwardGeocode: forwardGeocode,
|
||||
reverseGeocode: reverseGeocode,
|
||||
})
|
||||
/*
|
||||
map.addControl(self.geocoder, {
|
||||
maplibregl
|
||||
});
|
||||
*/
|
||||
that.map.on('click', clickMap)
|
||||
that.map.on('zoom', zoomChanged)
|
||||
that.map.on('idle', mapChanged)
|
||||
that.map.on('moveend', boundsChanged)
|
||||
that.map.on('dragend', boundsChanged)
|
||||
that.map.on('zoomend', boundsChanged)
|
||||
/*
|
||||
that.map.on('resize', () => {
|
||||
that.resizeMap()
|
||||
})
|
||||
*/
|
||||
/*
|
||||
google.maps.event.addListener(self.map, 'bounds_changed', boundsChanged);
|
||||
google.maps.event.addListener(self.map, 'center_changed', centerChanged);
|
||||
google.maps.event.addListener(self.map, 'click', clickMap);
|
||||
google.maps.event.addListener(self.map, 'idle', mapChanged);
|
||||
google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
|
||||
google.maps.event.trigger(self.map, 'resize');
|
||||
*/
|
||||
|
||||
// needed to get mouse x/y coordinates on marker mouseover,
|
||||
// see http://code.google.com/p/gmaps-api-issues/issues/detail?id=2342
|
||||
/*
|
||||
that.overlayView = new google.maps.OverlayView();
|
||||
that.overlayView.setMap(self.map);
|
||||
that.overlayView.draw = function () {
|
||||
|
|
@ -1033,55 +870,52 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
}
|
||||
that.overlayView.draw();
|
||||
*/
|
||||
|
||||
that.map.on('load', () => {
|
||||
Ox.forEach(self.$controls, function($control) {
|
||||
$control.appendTo(self.$map);
|
||||
});
|
||||
Ox.forEach(self.$placeControls, function($placeControl) {
|
||||
$placeControl.appendTo(self.$map);
|
||||
});
|
||||
Ox.forEach(self.$controls, function($control) {
|
||||
$control.appendTo(self.$map);
|
||||
});
|
||||
Ox.forEach(self.$placeControls, function($placeControl) {
|
||||
$placeControl.appendTo(self.$map);
|
||||
});
|
||||
|
||||
if (self.options.find) {
|
||||
self.$findInput
|
||||
.value(self.options.find)
|
||||
.triggerEvent('submit', {value: self.options.find});
|
||||
} else {
|
||||
if (self.options.selected) {
|
||||
selectPlace(self.options.selected, true);
|
||||
}
|
||||
if (mapBounds) {
|
||||
if (isEmpty(mapBounds)) {
|
||||
self.map.setZoom(self.minZoom);
|
||||
} else {
|
||||
self.map.fitBounds(mapBounds);
|
||||
|
||||
}
|
||||
}
|
||||
if (self.map.getZoom() < self.minZoom) {
|
||||
if (self.options.find) {
|
||||
self.$findInput
|
||||
.value(self.options.find)
|
||||
.triggerEvent('submit', {value: self.options.find});
|
||||
} else {
|
||||
if (self.options.selected) {
|
||||
selectPlace(self.options.selected, true);
|
||||
}
|
||||
if (mapBounds) {
|
||||
if (isEmpty(mapBounds)) {
|
||||
self.map.setZoom(self.minZoom);
|
||||
} else {
|
||||
self.map.fitBounds(mapBounds);
|
||||
}
|
||||
}
|
||||
updateFormElements();
|
||||
if (self.map.getZoom() < self.minZoom) {
|
||||
self.map.setZoom(self.minZoom);
|
||||
}
|
||||
}
|
||||
updateFormElements();
|
||||
|
||||
that.resizeMap()
|
||||
self.loaded = true;
|
||||
self.boundsChanged = true;
|
||||
that.triggerEvent('load');
|
||||
})
|
||||
self.loaded = true;
|
||||
that.triggerEvent('load');
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function isEmpty(bounds) {
|
||||
return bounds._sw.lat == bounds._ne.lat
|
||||
&& bounds._sw.lng == bounds._ne.lng;
|
||||
// Google's bounds.isEmpty() is not reliable
|
||||
var southWest = bounds.getSouthWest(),
|
||||
northEast = bounds.getNorthEast();
|
||||
return southWest.lat() == northEast.lat()
|
||||
&& southWest.lng() == northEast.lng();
|
||||
}
|
||||
|
||||
function isLoaded() {
|
||||
return window.maplibregl && window.maplibregl.maps && window.maplibregl.LngLat;
|
||||
return window.google && window.google.maps && window.google.maps.LatLng;
|
||||
}
|
||||
|
||||
function mapChanged() {
|
||||
|
|
@ -1093,11 +927,12 @@ Ox.Map = function(options, self) {
|
|||
self.boundsChanged = false;
|
||||
return
|
||||
}
|
||||
var south = bounds._sw.lat,
|
||||
west = bounds._sw.lng,
|
||||
north = bounds._ne.lat,
|
||||
east = bounds._ne.lng;
|
||||
|
||||
var southWest = bounds.getSouthWest(),
|
||||
northEast = bounds.getNorthEast(),
|
||||
south = southWest.lat(),
|
||||
west = southWest.lng(),
|
||||
north = northEast.lat(),
|
||||
east = northEast.lng();
|
||||
self.options.places({
|
||||
keys: self.placeKeys,
|
||||
query: {
|
||||
|
|
@ -1164,8 +999,7 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
function pan(x, y) {
|
||||
console.log(x, y, self.$map.width())
|
||||
self.map.panBy([x * self.$map.width() / 2, y * self.$map.height() / 2]);
|
||||
self.map.panBy(x * self.$map.width() / 2, y * self.$map.height() / 2);
|
||||
};
|
||||
|
||||
function panToPlace() {
|
||||
|
|
@ -1181,24 +1015,22 @@ 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,
|
||||
northEast = bounds._ne,
|
||||
southWest = bounds._sw,
|
||||
var bounds = data.geometry.bounds || data.geometry.viewport,
|
||||
northEast = bounds.getNorthEast(),
|
||||
southWest = bounds.getSouthWest(),
|
||||
place = {
|
||||
alternativeNames: [],
|
||||
components: data.address_components,
|
||||
countryCode: getCountryCode(data.address_components),
|
||||
east: northEast.lng,
|
||||
east: northEast.lng(),
|
||||
editable: self.options.editable,
|
||||
fullGeoname: getFullGeoname(data.address_components),
|
||||
id: '_' + Ox.encodeBase32(Ox.uid()),
|
||||
map: that,
|
||||
north: northEast.lat,
|
||||
south: southWest.lat,
|
||||
type: getType(data.address_components[0].types, data),
|
||||
west: southWest.lng
|
||||
north: northEast.lat(),
|
||||
south: southWest.lat(),
|
||||
type: getType(data.address_components[0].types),
|
||||
west: southWest.lng()
|
||||
};
|
||||
place.geoname = data.formatted_address || place.fullGeoname;
|
||||
place.name = (place.geoname || place.fullGeoname).split(', ')[0];
|
||||
|
|
@ -1230,34 +1062,19 @@ Ox.Map = function(options, self) {
|
|||
) ? name : null;
|
||||
}).join(', ');
|
||||
}
|
||||
function getType(types, data) {
|
||||
function getType(types) {
|
||||
// see https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingAddressTypes
|
||||
types.unshift(data.properties.addresstype)
|
||||
console.log(types)
|
||||
|
||||
|
||||
var strings = {
|
||||
'country': ['country'],
|
||||
'region': [
|
||||
'administrative_area', 'colloquial_area',
|
||||
'state', 'county', 'region'
|
||||
],
|
||||
'city': [
|
||||
'locality', 'city', 'town', 'village'
|
||||
],
|
||||
'borough': [
|
||||
'neighborhood', 'postal_code', 'sublocality', 'suburb', 'borough',
|
||||
'neighbourhood',
|
||||
|
||||
],
|
||||
'region': ['administrative_area', 'colloquial_area'],
|
||||
'city': ['locality'],
|
||||
'borough': ['neighborhood', 'postal_code', 'sublocality'],
|
||||
'street': [
|
||||
'intersection', 'route',
|
||||
'street_address', 'street_number',
|
||||
'road',
|
||||
'street_address', 'street_number'
|
||||
],
|
||||
'building': [
|
||||
'airport', 'floor', 'premise', 'room', 'subpremise',
|
||||
'building',
|
||||
'airport', 'floor', 'premise', 'room', 'subpremise'
|
||||
],
|
||||
'feature': ['natural_feature', 'park']
|
||||
},
|
||||
|
|
@ -1509,7 +1326,7 @@ Ox.Map = function(options, self) {
|
|||
|
||||
function toggleLabels() {
|
||||
self.options.showLabels = !self.options.showLabels;
|
||||
self.map.setStyle(self.options.showLabels ? self.options.style : self.sateliteStyle)
|
||||
self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
|
||||
that.triggerEvent('togglelabels', {
|
||||
visible: self.options.showLabels
|
||||
});
|
||||
|
|
@ -1519,12 +1336,10 @@ 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,
|
||||
lng: data.latLng.lng
|
||||
lat: data.latLng.lat(),
|
||||
lng: data.latLng.lng()
|
||||
}
|
||||
}
|
||||
data.results.forEach(function(result) {
|
||||
|
|
@ -1532,24 +1347,23 @@ Ox.Map = function(options, self) {
|
|||
if (result.geometry[key]) {
|
||||
result.geometry[key] = {
|
||||
northEast: {
|
||||
lat: result.geometry[key]._ne.lat,
|
||||
lng: result.geometry[key]._ne.lng
|
||||
lat: result.geometry[key].getNorthEast().lat(),
|
||||
lng: result.geometry[key].getNorthEast().lng()
|
||||
},
|
||||
southWest: {
|
||||
lat: result.geometry[key]._sw.lat,
|
||||
lng: result.geometry[key]._sw.lng
|
||||
lat: result.geometry[key].getSouthWest().lat(),
|
||||
lng: result.geometry[key].getSouthWest().lng()
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
if (result.geometry.location) {
|
||||
result.geometry.location = {
|
||||
lat: result.geometry.location.lat,
|
||||
lng: result.geometry.location.lng
|
||||
lat: result.geometry.location.lat(),
|
||||
lng: result.geometry.location.lng()
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
that.triggerEvent('geocode', data);
|
||||
}
|
||||
|
||||
|
|
@ -1588,7 +1402,7 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
function zoomChanged() {
|
||||
var zoom = parseInt(self.map.getZoom());
|
||||
var zoom = self.map.getZoom();
|
||||
if (zoom < self.minZoom) {
|
||||
self.map.setZoom(self.minZoom);
|
||||
} else if (self.maxZoom && zoom > self.maxZoom) {
|
||||
|
|
@ -1629,7 +1443,8 @@ Ox.Map = function(options, self) {
|
|||
lng <n> Longitude
|
||||
@*/
|
||||
that.getCenter = function() {
|
||||
return self.map.getCenter();
|
||||
var center = self.map.getCenter();
|
||||
return {lat: center.lat(), lng: center.lng()};
|
||||
};
|
||||
|
||||
/*@
|
||||
|
|
@ -1729,7 +1544,7 @@ Ox.Map = function(options, self) {
|
|||
});
|
||||
updateFormElements();
|
||||
Ox.Log('Map', 'triggering google maps resize event, height', self.options.height)
|
||||
self.map.triggerRepaint()
|
||||
google.maps.event.trigger(self.map, 'resize');
|
||||
// self.map.setCenter(center);
|
||||
}
|
||||
return that;
|
||||
|
|
@ -1743,7 +1558,7 @@ Ox.Map = function(options, self) {
|
|||
lng <n> Longitude
|
||||
@*/
|
||||
that.setCenter = function(center) {
|
||||
self.map.setCenter(new maplibregl.LngLat(center.lng, center.lat));
|
||||
self.map.setCenter(new google.maps.LatLng(center.lat, center.lng));
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -46,15 +46,6 @@ Ox.MapEditor = function(options, self) {
|
|||
self.$list.size();
|
||||
self.$map.resizeMap();
|
||||
},
|
||||
places: function() {
|
||||
self.isAsync = Ox.isFunction(self.options.places);
|
||||
self.$list.options({
|
||||
items: self.isAsync ? self.options.places : Ox.clone(self.options.places)
|
||||
})
|
||||
self.$map.options({
|
||||
places: self.options.places
|
||||
})
|
||||
},
|
||||
selected: function() {
|
||||
self.$list.options({selected: self.options.selected});
|
||||
},
|
||||
|
|
@ -337,7 +328,7 @@ Ox.MapEditor = function(options, self) {
|
|||
columns: self.columns,
|
||||
columnsRemovable: true,
|
||||
columnsVisible: true,
|
||||
items: self.isAsync ? self.options.places : Ox.clone(self.options.places),
|
||||
items: Ox.clone(self.options.places),
|
||||
//items: self.options.places,
|
||||
// area needed for icon, geoname needed for flag
|
||||
keys: ['area', 'geoname', 'matches'],
|
||||
|
|
|
|||
|
|
@ -42,32 +42,16 @@ Ox.MapMarker = function(options) {
|
|||
Ox.forEach(options, function(val, key) {
|
||||
that[key] = val;
|
||||
});
|
||||
setColor()
|
||||
setSize()
|
||||
const element = document.createElement('div')
|
||||
element.style.border = '2px solid black'
|
||||
element.style.borderRadius = '50px'
|
||||
element.style.backgroundColor = '#' + Ox.toHex(that.color)
|
||||
element.style.width = element.style.height = that.size + 'px'
|
||||
that.marker = new maplibregl.Marker({
|
||||
that.marker = new google.maps.Marker({
|
||||
raiseOnDrag: false,
|
||||
element: element,
|
||||
//shape: {coords: [8, 8, 8], type: 'circle'},
|
||||
shape: {coords: [8, 8, 8], type: 'circle'}
|
||||
//title: that.place.name,
|
||||
//zIndex: 1000
|
||||
});
|
||||
that.tooltip = new maplibregl.Popup({
|
||||
closeButton: false,
|
||||
closeOnClick: false,
|
||||
className: 'tooltip'
|
||||
});
|
||||
that.tooltip.addClass
|
||||
|
||||
setOptions();
|
||||
|
||||
function click(event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
function click() {
|
||||
var key = that.map.getKey(),
|
||||
place, bounds, southWest, northEast;
|
||||
if (!that.place.selected) {
|
||||
|
|
@ -78,9 +62,9 @@ Ox.MapMarker = function(options) {
|
|||
place = that.map.getSelectedPlace();
|
||||
}
|
||||
if (place) {
|
||||
bounds = new maplibregl.LngLatBounds(
|
||||
new maplibregl.LngLatBounds(place.west, place.south),
|
||||
new maplibregl.LngLatBounds(place.east, place.north)
|
||||
bounds = new google.maps.LatLngBounds(
|
||||
new google.maps.LatLng(place.south, place.west),
|
||||
new google.maps.LatLng(place.north, place.east)
|
||||
);
|
||||
bounds = bounds.union(that.place.bounds);
|
||||
southWest = bounds.getSouthWest();
|
||||
|
|
@ -95,10 +79,10 @@ Ox.MapMarker = function(options) {
|
|||
map: that.map,
|
||||
name: '',
|
||||
type: 'feature',
|
||||
south: southWest.lat,
|
||||
west: southWest.lng,
|
||||
north: northEast.lat,
|
||||
east: northEast.lng
|
||||
south: southWest.lat(),
|
||||
west: southWest.lng(),
|
||||
north: northEast.lat(),
|
||||
east: northEast.lng()
|
||||
}));
|
||||
} else {
|
||||
that.map.options({selected: that.place.id});
|
||||
|
|
@ -121,15 +105,13 @@ Ox.MapMarker = function(options) {
|
|||
}
|
||||
|
||||
function drag(e) {
|
||||
// In MapLibre GL, get current position from marker directly
|
||||
var lngLat = that.marker.getLngLat();
|
||||
var northSouth = (that.place.north - that.place.south) / 2,
|
||||
lat = Ox.limit(
|
||||
lngLat.lat,
|
||||
e.latLng.lat(),
|
||||
Ox.MIN_LATITUDE + northSouth,
|
||||
Ox.MAX_LATITUDE - northSouth
|
||||
),
|
||||
lng = lngLat.lng,
|
||||
lng = e.latLng.lng(),
|
||||
span = Math.min(
|
||||
that.place.sizeEastWest * Ox.getDegreesPerMeter(lat) / 2, 179.99999999
|
||||
),
|
||||
|
|
@ -145,7 +127,9 @@ Ox.MapMarker = function(options) {
|
|||
}
|
||||
Ox.Log('Map', 'west', that.place.west, 'east', that.place.east, 'span', span);
|
||||
that.place.update();
|
||||
that.marker.setLngLat(that.place.center)
|
||||
that.marker.setOptions({
|
||||
position: that.place.center
|
||||
});
|
||||
that.place.rectangle.update();
|
||||
}
|
||||
|
||||
|
|
@ -197,30 +181,35 @@ Ox.MapMarker = function(options) {
|
|||
c.context.strokeStyle = 'rgb(' + border.join(', ') + ')';
|
||||
c.context.arc(r, r, r - 1, 0, 360);
|
||||
c.context.stroke();
|
||||
callback(new maplibregl.MarkerImage(
|
||||
callback(new google.maps.MarkerImage(
|
||||
c.canvas.toDataURL(),
|
||||
new maplibregl.Size(options.size, options.size),
|
||||
new maplibregl.Point(0, 0),
|
||||
new maplibregl.Point(r, r)
|
||||
new google.maps.Size(options.size, options.size),
|
||||
new google.maps.Point(0, 0),
|
||||
new google.maps.Point(r, r)
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
function mouseover(e) {
|
||||
that.tooltip.setLngLat(that.place.center).setHTML(
|
||||
'<div style="display: flex; gap: 8px; margin: 2px 2px"><img src="' + Ox.getFlagByGeoname(that.place.geoname, 16)
|
||||
+ '" style="border-radius: 4px;margin: auto"/>'
|
||||
+ '<div style="font-size: 9px;">'
|
||||
+ that.map.options('markerTooltip')(that.place) + '</div></div>'
|
||||
).addTo(that.map.map);
|
||||
var offset = that.map.offset(),
|
||||
xy = that.map.overlayView.getProjection()
|
||||
.fromLatLngToContainerPixel(e.latLng);
|
||||
that.tooltip.show(
|
||||
offset.left + Math.round(xy.x) - 4,
|
||||
offset.top + Math.round(xy.y) + 20
|
||||
);
|
||||
}
|
||||
|
||||
function mouseout() {
|
||||
that.tooltip.remove();
|
||||
that.tooltip.hide();
|
||||
}
|
||||
|
||||
function setColor() {
|
||||
var color = that.map.options('markerColor');
|
||||
function setOptions() {
|
||||
// workaround to prevent marker from appearing twice
|
||||
// after setting draggable from true to false (google maps bug)
|
||||
var fix = that.marker.getDraggable() && !that.place.editing,
|
||||
color = that.map.options('markerColor'),
|
||||
size = that.map.options('markerSize');
|
||||
//Ox.Log('Map', 'setOptions, that.map: ', that.map)
|
||||
if (color == 'auto') {
|
||||
that.color = typeColor[that.place.type] || typeColor['mapPlaceFeatureColor'];
|
||||
|
|
@ -229,10 +218,6 @@ Ox.MapMarker = function(options) {
|
|||
} else {
|
||||
that.color = color(that.place);
|
||||
}
|
||||
}
|
||||
|
||||
function setSize() {
|
||||
var size = that.map.options('markerSize');
|
||||
if (size == 'auto') {
|
||||
that.size = 8;
|
||||
Ox.forEach(areaSize, function(size, area) {
|
||||
|
|
@ -247,57 +232,50 @@ Ox.MapMarker = function(options) {
|
|||
} else {
|
||||
that.size = size(that.place);
|
||||
}
|
||||
}
|
||||
|
||||
function setOptions() {
|
||||
// workaround to prevent marker from appearing twice
|
||||
// after setting draggable from true to false (google maps bug)
|
||||
var fix = false, // that.marker.getDraggable() && !that.place.editing,
|
||||
size = that.map.options('markerSize');
|
||||
//Ox.Log('Map', 'setOptions, that.map: ', that.map)
|
||||
setColor()
|
||||
setSize()
|
||||
/* fixme, some of those can be set some not
|
||||
that.marker.setOptions({
|
||||
// fixme: cursor remains pointer
|
||||
cursor: that.place.editing ? 'move' : 'pointer',
|
||||
draggable: that.place.editing,
|
||||
element: Ox.MapMarkerImage({
|
||||
icon: Ox.MapMarkerImage({
|
||||
color: that.color,
|
||||
mode: that.place.editing ? 'editing' :
|
||||
that.place.selected ? 'selected' : 'normal',
|
||||
size: that.size,
|
||||
type: that.place.id[0] == '_' ? 'result' : 'place'
|
||||
}),
|
||||
})
|
||||
*/
|
||||
//that.marker._color = that.color;
|
||||
that.marker._element.style.cursor = that.place.editing ? 'move' : 'pointer';
|
||||
that.marker._element.height = that.marker._element.width = that.size + 'px'
|
||||
that.marker.setDraggable(that.place.editing);
|
||||
that.marker.setLngLat(that.place.center);
|
||||
position: that.place.center
|
||||
});
|
||||
if (fix) {
|
||||
that.marker.setVisible(false);
|
||||
setTimeout(function() {
|
||||
that.marker.setVisible(true);
|
||||
}, 0);
|
||||
}
|
||||
setTooltip();
|
||||
}
|
||||
|
||||
function setTooltip() {
|
||||
that.tooltip && that.tooltip.remove();
|
||||
that.tooltip = Ox.Tooltip({
|
||||
title: '<img src="'
|
||||
+ Ox.getFlagByGeoname(that.place.geoname, 16)
|
||||
+ '" style="float: left; width: 16px; height: 16px; margin: 1px 0 1px -1px; border-radius: 4px"/>'
|
||||
+ '<div style="float: left; margin: 4px -1px 0 4px; font-size: 9px;">'
|
||||
+ that.map.options('markerTooltip')(that.place) + '</div>'
|
||||
})
|
||||
.addClass('OxMapMarkerTooltip');
|
||||
}
|
||||
|
||||
/*@
|
||||
add <f> add to map
|
||||
() -> <f> add to map, returns MapMarker
|
||||
@*/
|
||||
that.add = function() {
|
||||
that.marker.addTo(that.map.map);
|
||||
const element = that.marker.getElement()
|
||||
if(element) {
|
||||
element.addEventListener('click', click)
|
||||
element.addEventListener('dblclick', dblclick)
|
||||
element.addEventListener('mouseover', mouseover)
|
||||
element.addEventListener('mouseout', mouseout)
|
||||
}
|
||||
that.marker.setMap(that.map.map);
|
||||
google.maps.event.addListener(that.marker, 'click', click);
|
||||
google.maps.event.addListener(that.marker, 'dblclick', dblclick);
|
||||
google.maps.event.addListener(that.marker, 'mouseover', mouseover);
|
||||
google.maps.event.addListener(that.marker, 'mouseout', mouseout);
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
@ -307,9 +285,9 @@ Ox.MapMarker = function(options) {
|
|||
@*/
|
||||
that.edit = function() {
|
||||
setOptions();
|
||||
that.marker.on('dragstart', dragstart);
|
||||
that.marker.on('drag', drag);
|
||||
that.marker.on('dragend', dragend);
|
||||
google.maps.event.addListener(that.marker, 'dragstart', dragstart);
|
||||
google.maps.event.addListener(that.marker, 'drag', drag);
|
||||
google.maps.event.addListener(that.marker, 'dragend', dragend);
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
@ -318,12 +296,8 @@ Ox.MapMarker = function(options) {
|
|||
() -> <f> remove marker from map, returns MapMarker
|
||||
@*/
|
||||
that.remove = function() {
|
||||
that.marker.remove();
|
||||
//that.marker.off('dragstart');
|
||||
//that.marker.off('drag');
|
||||
//that.marker.off('dragend');
|
||||
//fixme does this work to remove all events?
|
||||
that.marker.off();
|
||||
that.marker.setMap(null);
|
||||
google.maps.event.clearListeners(that.marker);
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
@ -332,9 +306,9 @@ Ox.MapMarker = function(options) {
|
|||
() -> <f> clear edit listeners, returns MapMarker
|
||||
@*/
|
||||
that.submit = function() {
|
||||
that.marker.off('dragstart');
|
||||
that.marker.off('drag');
|
||||
that.marker.off('dragend');
|
||||
google.maps.event.clearListeners(that.marker, 'dragstart');
|
||||
google.maps.event.clearListeners(that.marker, 'drag');
|
||||
google.maps.event.clearListeners(that.marker, 'dragend');
|
||||
return that;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ Ox.MapMarkerImage = (function() {
|
|||
themeData = Ox.Theme.getThemeData();
|
||||
|
||||
if (!cache[index]) {
|
||||
var color = options.rectangle ? [255, 255, 255, 1]
|
||||
var color = options.rectangle ? [0, 0, 0, 0]
|
||||
: options.color.concat(
|
||||
[options.type == 'place' ? 0.75 : 0.25]
|
||||
),
|
||||
|
|
@ -50,10 +50,12 @@ Ox.MapMarkerImage = (function() {
|
|||
c.context.strokeStyle = 'rgba(' + border.join(', ') + ')';
|
||||
c.context.arc(r, r, r - 1, 0, 360);
|
||||
c.context.stroke();
|
||||
cache[index] = document.createElement('img')
|
||||
cache[index].src = c.canvas.toDataURL()
|
||||
cache[index].width = options.size
|
||||
cache[index].height = options.size
|
||||
cache[index] = new google.maps.MarkerImage(
|
||||
c.canvas.toDataURL(),
|
||||
new google.maps.Size(options.size, options.size),
|
||||
new google.maps.Point(0, 0),
|
||||
new google.maps.Point(r, r)
|
||||
);
|
||||
}
|
||||
|
||||
return cache[index];
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ Ox.MapPlace = function(options) {
|
|||
|
||||
options = Ox.extend({
|
||||
east: 0,
|
||||
editable: true,
|
||||
editing: false,
|
||||
geoname: '',
|
||||
map: null,
|
||||
|
|
@ -45,24 +44,21 @@ Ox.MapPlace = function(options) {
|
|||
update();
|
||||
|
||||
function update(updateMarker) {
|
||||
if (that.west > that.east) {
|
||||
that.east += 360;
|
||||
}
|
||||
that.points = {
|
||||
ne: new maplibregl.LngLat(that.east, that.north),
|
||||
sw: new maplibregl.LngLat(that.west, that.south)
|
||||
ne: new google.maps.LatLng(that.north, that.east),
|
||||
sw: new google.maps.LatLng(that.south, that.west)
|
||||
};
|
||||
that.bounds = new maplibregl.LngLatBounds(that.points.sw, that.points.ne);
|
||||
that.bounds = new google.maps.LatLngBounds(that.points.sw, that.points.ne);
|
||||
that.center = that.bounds.getCenter();
|
||||
that.lat = that.center.lat;
|
||||
that.lng = that.center.lng;
|
||||
that.lat = that.center.lat();
|
||||
that.lng = that.center.lng();
|
||||
Ox.extend(that.points, {
|
||||
e: new maplibregl.LngLat(that.east, that.lat),
|
||||
s: new maplibregl.LngLat(that.lng, that.south),
|
||||
se: new maplibregl.LngLat(that.east, that.south),
|
||||
n: new maplibregl.LngLat(that.lng, that.north),
|
||||
nw: new maplibregl.LngLat(that.west, that.north),
|
||||
w: new maplibregl.LngLat(that.west, that.lat)
|
||||
e: new google.maps.LatLng(that.lat, that.east),
|
||||
s: new google.maps.LatLng(that.south, that.lng),
|
||||
se: new google.maps.LatLng(that.south, that.east),
|
||||
n: new google.maps.LatLng(that.north, that.lng),
|
||||
nw: new google.maps.LatLng(that.north, that.west),
|
||||
w: new google.maps.LatLng(that.lat, that.west)
|
||||
});
|
||||
// fixme: use bounds.toSpan()
|
||||
that.sizeNorthSouth = (that.north - that.south)
|
||||
|
|
@ -83,9 +79,8 @@ Ox.MapPlace = function(options) {
|
|||
place: that
|
||||
});
|
||||
} else if (updateMarker) {
|
||||
console.log("fixme update marker")
|
||||
//that.marker.update();
|
||||
//that.rectangle.update();
|
||||
that.marker.update();
|
||||
that.rectangle.update();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,178 +1,5 @@
|
|||
'use strict';
|
||||
|
||||
|
||||
class MapLibreRectangle {
|
||||
constructor(options = {}) {
|
||||
this.id = options.id || 'rectangle-' + Ox.uid();
|
||||
this.bounds = options.bounds;
|
||||
this.draggable = options.draggable || false;
|
||||
this.onclick = options.onclick || null
|
||||
}
|
||||
|
||||
_createRectangle() {
|
||||
const coords = this._getPolygonCoordinates();
|
||||
|
||||
const rectangleGeoJSON = {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [coords]
|
||||
},
|
||||
properties: {
|
||||
id: this.id
|
||||
}
|
||||
};
|
||||
var sourceId = `${this.id}-rectangles`
|
||||
this.source = this.map.getSource(sourceId)
|
||||
if (!this.source) {
|
||||
this.map.addSource(sourceId, {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
}
|
||||
});
|
||||
this.source = this.map.getSource(sourceId)
|
||||
|
||||
// Add fill layer
|
||||
var layerId = `${this.id}-fill`
|
||||
if (!this.map.getLayer(layerId)) {
|
||||
this.map.addLayer({
|
||||
id: layerId,
|
||||
type: 'fill',
|
||||
source: sourceId,
|
||||
paint: {
|
||||
'fill-color': '#088',
|
||||
'fill-opacity': 0.3
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add outline layer
|
||||
var layerId = `${this.id}-outline`
|
||||
if (!this.map.getLayer(layerId)) {
|
||||
this.map.addLayer({
|
||||
id: layerId,
|
||||
type: 'line',
|
||||
source: sourceId,
|
||||
paint: {
|
||||
'line-color': '#000',
|
||||
'line-width': 2
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
/*
|
||||
this.source._data.features.push(rectangleGeoJSON)
|
||||
this.source.setData(this.source._data)
|
||||
*/
|
||||
}
|
||||
|
||||
_getPolygonCoordinates() {
|
||||
const sw = this.bounds._sw;
|
||||
const ne = this.bounds._ne;
|
||||
|
||||
return [
|
||||
[sw.lng, ne.lat], // NW
|
||||
[ne.lng, ne.lat], // NE
|
||||
[ne.lng, sw.lat], // SE
|
||||
[sw.lng, sw.lat], // SW
|
||||
[sw.lng, ne.lat] // Close polygon
|
||||
];
|
||||
}
|
||||
|
||||
setBounds(bounds) {
|
||||
this.bounds = bounds;
|
||||
const coords = this._getPolygonCoordinates();
|
||||
const updatedData = {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [coords]
|
||||
},
|
||||
properties: {
|
||||
id: this.id
|
||||
}
|
||||
};
|
||||
var updated = false;
|
||||
this.source._data.features.forEach(feature => {
|
||||
if (feature.properties.id == this.id) {
|
||||
feature.geometry = updatedData.geometry
|
||||
updated = true
|
||||
}
|
||||
})
|
||||
if (!updated) {
|
||||
this.source._data.features.push(updatedData)
|
||||
}
|
||||
this.source.setData(this.source._data)
|
||||
}
|
||||
|
||||
getBounds() {
|
||||
return this.bounds;
|
||||
}
|
||||
|
||||
_enableDragging() {
|
||||
let isDragging = false;
|
||||
let startPos;
|
||||
|
||||
this.map.on('mousedown', `${this.id}-fill`, (e) => {
|
||||
e.preventDefault();
|
||||
isDragging = true;
|
||||
startPos = e.lngLat;
|
||||
this.map.getCanvas().style.cursor = 'grabbing';
|
||||
});
|
||||
|
||||
this.map.on('mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const dx = e.lngLat.lng - startPos.lng;
|
||||
const dy = e.lngLat.lat - startPos.lat;
|
||||
|
||||
const sw = [this.bounds[0][0] + dx, this.bounds[0][1] + dy];
|
||||
const ne = [this.bounds[1][0] + dx, this.bounds[1][1] + dy];
|
||||
|
||||
this.setBounds([sw, ne]);
|
||||
startPos = e.lngLat;
|
||||
});
|
||||
|
||||
this.map.on('mouseup', () => {
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
this.map.getCanvas().style.cursor = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
_enableClicking() {
|
||||
this.map.on('click', `${this.id}-fill`, e => {
|
||||
console.log('click', e)
|
||||
if (this.onclick) {
|
||||
e.preventDefault()
|
||||
//e.stopPropagation()
|
||||
this.onclick(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.source._data.features = this.source._data.features.filter(feature => {
|
||||
return feature.properties.id != this.id
|
||||
})
|
||||
this.source.setData(this.source._data)
|
||||
}
|
||||
|
||||
add() {
|
||||
this.setBounds(this.bounds)
|
||||
}
|
||||
|
||||
addTo(map) {
|
||||
this.map = map;
|
||||
this._createRectangle();
|
||||
if (this.draggable) this._enableDragging();
|
||||
this._enableClicking();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*@
|
||||
Ox.MapRectangle <f> MapRectangle Object
|
||||
(options) -> <o> MapRectangle Object
|
||||
|
|
@ -198,23 +25,14 @@ Ox.MapRectangle = function(options) {
|
|||
/*@
|
||||
rectangle <f> google.maps.Rectangle
|
||||
@*/
|
||||
/*
|
||||
that.rectangle = new google.maps.Rectangle({
|
||||
clickable: true,
|
||||
bounds: that.place.bounds
|
||||
});
|
||||
*/
|
||||
that.rectangle = new MapLibreRectangle({
|
||||
bounds: that.place.bounds,
|
||||
});
|
||||
that.rectangle.addTo(that.map.map);
|
||||
that.rectangle.onclick = click
|
||||
|
||||
/*@
|
||||
markers <a> array of markers (only corners for rectangle resizing)
|
||||
markers <a> array of markers
|
||||
@*/
|
||||
var cornerPositions = ['ne', 'nw', 'se', 'sw'];
|
||||
that.markers = cornerPositions.map(function(position) {
|
||||
that.markers = Ox.map(that.place.points, function(point, position) {
|
||||
return new Ox.MapRectangleMarker({
|
||||
map: that.map,
|
||||
place: that.place,
|
||||
|
|
@ -224,7 +42,7 @@ Ox.MapRectangle = function(options) {
|
|||
|
||||
setOptions();
|
||||
|
||||
function click(e) {
|
||||
function click() {
|
||||
if (
|
||||
that.map.options('editable')
|
||||
&& that.place.editable
|
||||
|
|
@ -246,7 +64,6 @@ Ox.MapRectangle = function(options) {
|
|||
? 'mapPlaceEditingBorder'
|
||||
: 'mapPlaceSelectedBorder'
|
||||
]);
|
||||
/*
|
||||
that.rectangle.setOptions({
|
||||
bounds: that.place.bounds,
|
||||
fillColor: color,
|
||||
|
|
@ -255,24 +72,14 @@ Ox.MapRectangle = function(options) {
|
|||
strokeOpacity: that.place.id[0] == '_' ? 0.5 : 1,
|
||||
strokeWeight: 2
|
||||
});
|
||||
*/
|
||||
/*
|
||||
console.log("fixme", {
|
||||
bounds: that.place.bounds,
|
||||
fillColor: color,
|
||||
fillOpacity: that.place.editing ? 0.1 : 0,
|
||||
strokeColor: color,
|
||||
strokeOpacity: that.place.id[0] == '_' ? 0.5 : 1,
|
||||
strokeWeight: 2
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
/*@
|
||||
add <f> add
|
||||
@*/
|
||||
that.add = function() {
|
||||
that.rectangle.add()
|
||||
that.rectangle.setMap(that.map.map);
|
||||
google.maps.event.addListener(that.rectangle, 'click', click);
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
@ -292,7 +99,8 @@ Ox.MapRectangle = function(options) {
|
|||
remove <f> remove
|
||||
@*/
|
||||
that.remove = function() {
|
||||
that.rectangle.remove();
|
||||
that.rectangle.setMap(null);
|
||||
google.maps.event.clearListeners(that.rectangle);
|
||||
return that;
|
||||
}
|
||||
|
||||
|
|
@ -313,8 +121,6 @@ Ox.MapRectangle = function(options) {
|
|||
that.update = function() {
|
||||
Ox.Log('Map', 'UPDATE...')
|
||||
setOptions();
|
||||
// Update the visual rectangle bounds
|
||||
that.rectangle.setBounds(that.place.bounds);
|
||||
Ox.forEach(that.markers, function(marker) {
|
||||
marker.update();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ Ox.MapRectangleMarker = function(options) {
|
|||
that[key] = val;
|
||||
});
|
||||
|
||||
/*
|
||||
that.markerImage = new google.maps.MarkerImage
|
||||
that.marker = new google.maps.Marker({
|
||||
cursor: that.position + '-resize',
|
||||
|
|
@ -36,39 +35,20 @@ Ox.MapRectangleMarker = function(options) {
|
|||
position: that.place.points[that.position],
|
||||
raiseOnDrag: false
|
||||
});
|
||||
*/
|
||||
// Create a simple DOM element for the corner handle
|
||||
var element = document.createElement('div');
|
||||
element.style.width = '8px';
|
||||
element.style.height = '8px';
|
||||
element.style.backgroundColor = 'white';
|
||||
element.style.border = '2px solid black';
|
||||
element.style.borderRadius = '2px';
|
||||
element.style.cursor = that.position + '-resize';
|
||||
element.style.boxSizing = 'border-box';
|
||||
|
||||
that.marker = new maplibregl.Marker({
|
||||
draggable: true,
|
||||
element: element,
|
||||
});
|
||||
that.marker.setLngLat(that.place.points[that.position])
|
||||
|
||||
function dragstart(e) {
|
||||
Ox.$body.addClass('OxDragging');
|
||||
// In MapLibre GL, get position from marker directly
|
||||
var lngLat = that.marker.getLngLat();
|
||||
that.drag = {
|
||||
lat: lngLat.lat,
|
||||
lng: lngLat.lng
|
||||
lat: e.latLng.lat(),
|
||||
lng: e.latLng.lng()
|
||||
};
|
||||
}
|
||||
|
||||
function drag(e) {
|
||||
// fixme: implement shift+drag (center stays the same)
|
||||
// In MapLibre GL, get current position from marker directly
|
||||
var lngLat = that.marker.getLngLat();
|
||||
var lat = Ox.limit(lngLat.lat, Ox.MIN_LATITUDE, Ox.MAX_LATITUDE),
|
||||
lng = lngLat.lng;
|
||||
Ox.Log('Map', e.pixel.x, e.pixel.y)
|
||||
var lat = Ox.limit(e.latLng.lat(), Ox.MIN_LATITUDE, Ox.MAX_LATITUDE),
|
||||
lng = e.latLng.lng();
|
||||
that.drag = {
|
||||
lat: lat,
|
||||
lng: lng
|
||||
|
|
@ -110,33 +90,32 @@ Ox.MapRectangleMarker = function(options) {
|
|||
add <f> add
|
||||
@*/
|
||||
that.add = function() {
|
||||
that.marker.addTo(that.map.map);
|
||||
that.marker.on('dragstart', dragstart);
|
||||
that.marker.on('drag', drag);
|
||||
that.marker.on('dragend', dragend);
|
||||
return that;
|
||||
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);
|
||||
};
|
||||
|
||||
/*@
|
||||
remove <f> remove
|
||||
@*/
|
||||
that.remove = function() {
|
||||
// Clean up MapLibre events
|
||||
that.marker.off('dragstart');
|
||||
that.marker.off('drag');
|
||||
that.marker.off('dragend');
|
||||
// Remove marker from map
|
||||
that.marker.remove();
|
||||
return that;
|
||||
that.marker.setMap(null);
|
||||
google.maps.event.clearListeners(that.marker);
|
||||
};
|
||||
|
||||
/*@
|
||||
update <f> update
|
||||
@*/
|
||||
that.update = function() {
|
||||
// Just update position - visual stays the same during editing
|
||||
that.marker.setLngLat(that.place.points[that.position]);
|
||||
return that;
|
||||
that.marker.setOptions({
|
||||
icon: Ox.MapMarkerImage({
|
||||
mode: 'editing',
|
||||
rectangle: true,
|
||||
type: that.place.id[0] == '_' ? 'result' : 'place'
|
||||
}),
|
||||
position: that.place.points[that.position]
|
||||
});
|
||||
};
|
||||
|
||||
return that;
|
||||
|
|
|
|||
|
|
@ -1,284 +0,0 @@
|
|||
/* Basics */
|
||||
.maplibregl-ctrl-geocoder,
|
||||
.maplibregl-ctrl-geocoder *,
|
||||
.maplibregl-ctrl-geocoder *:after,
|
||||
.maplibregl-ctrl-geocoder *:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
min-width: 240px;
|
||||
z-index: 1;
|
||||
border-radius: 4px;
|
||||
transition: width 0.25s, min-width 0.25s;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--input {
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
height: 50px;
|
||||
color: #404040; /* fallback */
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
padding: 6px 45px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--input::-ms-clear {
|
||||
display: none; /* hide input clear button in IE */
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--input:focus {
|
||||
color: #404040; /* fallback */
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 7px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder,
|
||||
.maplibregl-ctrl-geocoder .suggestions {
|
||||
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Collapsed */
|
||||
.maplibregl-ctrl-geocoder.maplibregl-ctrl-geocoder--collapsed {
|
||||
width: 50px;
|
||||
min-width: 50px;
|
||||
transition: width 0.25s, min-width 0.25s;
|
||||
}
|
||||
|
||||
/* Suggestions */
|
||||
.maplibregl-ctrl-geocoder .suggestions {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
left: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 110%; /* fallback */
|
||||
top: calc(100% + 6px);
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-bottom-left .suggestions,
|
||||
.maplibregl-ctrl-bottom-right .suggestions {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder .suggestions > li > a {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px 12px;
|
||||
color: #404040;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder .suggestions > .active > a,
|
||||
.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
|
||||
color: #404040;
|
||||
background-color: #f3f3f3;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--suggestion {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.maplibre-ctrl-geocoder--suggestion-icon {
|
||||
min-width: 30px;
|
||||
min-height: 24px;
|
||||
max-width: 30px;
|
||||
max-height: 24px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--suggestion-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--suggestion-match {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--suggestion-title,
|
||||
.maplibregl-ctrl-geocoder--suggestion-address {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--result {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.maplibre-ctrl-geocoder--result-icon {
|
||||
min-width: 30px;
|
||||
min-height: 24px;
|
||||
max-width: 30px;
|
||||
max-height: 24px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--result-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--result-title,
|
||||
.maplibregl-ctrl-geocoder--result-address {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.maplibregl-ctrl-geocoder--icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
speak: none;
|
||||
fill: #757575;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--icon-search {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 12px;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--icon-close {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--button:hover .maplibregl-ctrl-geocoder--icon-close {
|
||||
fill: #909090;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--icon-loading {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-top: 5px;
|
||||
margin-right: 0px;
|
||||
-moz-animation: rotate 0.8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
|
||||
-webkit-animation: rotate 0.8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
|
||||
animation: rotate 0.8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@-webkit-keyframes rotate {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Media queries*/
|
||||
@media screen and (min-width: 640px) {
|
||||
.maplibregl-ctrl-geocoder.maplibregl-ctrl-geocoder--collapsed {
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder {
|
||||
width: 33.3333%;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
max-width: 360px;
|
||||
}
|
||||
.maplibregl-ctrl-geocoder .suggestions {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--icon {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--icon-close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 3px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--icon-search {
|
||||
left: 7px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--input {
|
||||
height: 36px;
|
||||
padding: 6px 35px;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-geocoder--icon-loading {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-top: -2px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
.maplibre-gl-geocoder--error {
|
||||
color: #909090;
|
||||
padding: 6px 12px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -92,15 +92,13 @@ def build_oxjs(downloads=False, geo=False):
|
|||
|
||||
# copy & link
|
||||
ui_files = {'dev': [], 'min': []}
|
||||
css_files = ['maplibre-gl.css', 'maplibre-gl-geocoder.css']
|
||||
for path, dirnames, filenames in os.walk(source_path):
|
||||
for filename in filenames:
|
||||
if '_' not in path and filename[0] not in '._' \
|
||||
and not filename.endswith('~') \
|
||||
and not filename.endswith('.css') \
|
||||
and '/UI/svg' not in path \
|
||||
and (geo or '/Geo/' not in path):
|
||||
if filename.endswith('.css') and filename not in css_files:
|
||||
continue
|
||||
# write copies in min path
|
||||
source = os.path.join(path, filename)
|
||||
is_jquery = re.search(r'^jquery-[\d\.]+\.js$', filename)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue