mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-27 02:05:21 +03:00
Migrate Google Maps to OpenStreetMap
This commit is contained in:
Miguel Angel Mulero Martinez
parent
61392ca27a
commit
04ca4a5f12
6 changed files with 105 additions and 75 deletions
2
libraries/openlayers/ol.css
Normal file
2
libraries/openlayers/ol.css
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-unselectable,.ol-viewport{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.ol-control{position:absolute;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}
|
||||
/*# sourceMappingURL=ol.css.map */
|
||||
8
libraries/openlayers/ol.js
Normal file
8
libraries/openlayers/ol.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
},
|
||||
"permissions": [
|
||||
"https://maps.googleapis.com/*",
|
||||
"https://api.openstreetmap.org/",
|
||||
"https://*.github.com/",
|
||||
"https://*.githubusercontent.com/",
|
||||
"http://*.baseflight.net/",
|
||||
|
|
@ -49,7 +49,11 @@
|
|||
"partitions": [
|
||||
{
|
||||
"name": "map",
|
||||
"accessible_resources" : ["tabs/map.html", "js/tabs/map.js", "/images/icons/cf_icon_position.png"]
|
||||
"accessible_resources" : ["tabs/map.html",
|
||||
"js/tabs/map.js",
|
||||
"/js/libraries/openlayers/ol.css",
|
||||
"/js/libraries/openlayers/ol.js",
|
||||
"/images/icons/cf_icon_position.png"]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@
|
|||
"accessible_resources": [
|
||||
"tabs/map.html",
|
||||
"js/tabs/map.js",
|
||||
"/js/libraries/openlayers/ol.css",
|
||||
"/js/libraries/openlayers/ol.js",
|
||||
"/images/icons/cf_icon_position.png"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,76 +1,86 @@
|
|||
window.addEventListener('message', function (e) {
|
||||
var mainWindow = e.source;
|
||||
var result = '';
|
||||
const DEFAULT_ZOOM = 16,
|
||||
DEFAULT_LON = 0,
|
||||
DEFAULT_LAT = 0,
|
||||
ICON_IMAGE = '/images/icons/cf_icon_position.png';
|
||||
|
||||
var iconGeometry,
|
||||
map,
|
||||
mapView,
|
||||
marker;
|
||||
|
||||
window.onload = initializeMap;
|
||||
|
||||
function initializeMap() {
|
||||
|
||||
var lonLat = ol.proj.fromLonLat([DEFAULT_LON, DEFAULT_LAT]);
|
||||
|
||||
mapView = new ol.View({
|
||||
center: lonLat,
|
||||
zoom: DEFAULT_ZOOM
|
||||
});
|
||||
|
||||
map = new ol.Map({
|
||||
target: 'map-canvas',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
view: mapView,
|
||||
controls: []
|
||||
});
|
||||
|
||||
var iconStyle = new ol.style.Style({
|
||||
image: new ol.style.Icon(({
|
||||
anchor: [0.5, 1],
|
||||
opacity: 1,
|
||||
scale: 0.5,
|
||||
src: ICON_IMAGE
|
||||
}))
|
||||
});
|
||||
|
||||
iconGeometry = new ol.geom.Point(lonLat);
|
||||
var iconFeature = new ol.Feature({
|
||||
geometry: iconGeometry
|
||||
});
|
||||
|
||||
iconFeature.setStyle(iconStyle);
|
||||
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: [iconFeature]
|
||||
});
|
||||
|
||||
var currentPositionLayer = new ol.layer.Vector({
|
||||
source: vectorSource
|
||||
});
|
||||
|
||||
map.addLayer(currentPositionLayer);
|
||||
|
||||
window.addEventListener('message', processMapEvents);
|
||||
}
|
||||
|
||||
function processMapEvents(e) {
|
||||
|
||||
try {
|
||||
switch(e.data.action){
|
||||
switch(e.data.action) {
|
||||
|
||||
case 'zoom_in':
|
||||
var zoom = map.getZoom();
|
||||
zoom++;
|
||||
map.setZoom(zoom);
|
||||
mapView.setZoom(mapView.getZoom() + 1);
|
||||
break;
|
||||
|
||||
case 'zoom_out':
|
||||
var zoom = map.getZoom();
|
||||
zoom--;
|
||||
map.setZoom(zoom);
|
||||
mapView.setZoom(mapView.getZoom() - 1);
|
||||
break;
|
||||
|
||||
case 'center':
|
||||
map.setCenter(new google.maps.LatLng(e.data.lat, e.data.lon));
|
||||
marker.setPosition( new google.maps.LatLng( e.data.lat, e.data.lon ) );
|
||||
map.panTo( new google.maps.LatLng( e.data.lat, e.data.lon ) );
|
||||
var center = ol.proj.fromLonLat([e.data.lon, e.data.lat]);
|
||||
mapView.setCenter(center);
|
||||
iconGeometry.setCoordinates(center);
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.log('message error');
|
||||
console.log('Map error ' + e);
|
||||
}
|
||||
});
|
||||
|
||||
function loadMapScript() {
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=initialize';
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
window.onload = loadMapScript;
|
||||
|
||||
var map;
|
||||
var marker;
|
||||
|
||||
function zoom_in(){
|
||||
var zoom = map.getZoom();
|
||||
zoom++;
|
||||
map.setZoom(zoom);
|
||||
}
|
||||
|
||||
function initialize() {
|
||||
|
||||
var mapOptions = {
|
||||
zoom: 17,
|
||||
zoomControl: false,
|
||||
streetViewControl: false,
|
||||
center: {lat: 53.570645, lng: 10.001362}
|
||||
};
|
||||
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
|
||||
|
||||
var image = {
|
||||
url: '/images/icons/cf_icon_position.png',
|
||||
scaledSize: new google.maps.Size(70, 70)
|
||||
};
|
||||
|
||||
marker = new google.maps.Marker({
|
||||
icon : image,
|
||||
position: new google.maps.LatLng(53.570645, 10.001362),
|
||||
map:map
|
||||
});
|
||||
|
||||
var infowindow = new google.maps.InfoWindow();
|
||||
|
||||
google.maps.event.addListener(marker, 'click', function() {
|
||||
infowindow.setContent('<p>Your Location: ' + map.getCenter() + '</p>');
|
||||
infowindow.open(map, marker);
|
||||
});
|
||||
|
||||
window.addEventListener('message', function(e) {
|
||||
var data = e.data;
|
||||
var origin = e.origin;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@
|
|||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="/js/libraries/openlayers/ol.css" type="text/css">
|
||||
<script src="/js/libraries/openlayers/ol.js"></script>
|
||||
|
||||
<script src="/js/tabs/map.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue