Skip to content

Migrate from Google Maps to Open Source alternative #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Benjamin-Mueggenburg wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Migrate from Google Maps to Open Source alternative #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f5c1ee6
Add files via upload
Benjamin-Mueggenburg Oct 27, 2018
3ccef1e
Update index.html
Benjamin-Mueggenburg Oct 27, 2018
12c8115
Update index.html
Benjamin-Mueggenburg Oct 27, 2018
0bccd75
Update README.md
Benjamin-Mueggenburg Oct 27, 2018
ebf5fdc
Update index.html
Benjamin-Mueggenburg Oct 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions Drola_Base_Node/api/requirements.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
autobahn>=18.10.1
Twisted>=18.9.0
87 changes: 43 additions & 44 deletions Drola_Base_Node/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>DroLa Admin Pannel</title>
<title>DroLa Admin Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=" drola admin pannel" />
Expand All @@ -30,12 +30,20 @@
new WOW().init();
</script>
<!--//end-animate-->
<!----webfonts--->clear
<!---webfonts--->clear

<link href='//fonts.googleapis.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<!---//webfonts--->
<!-- Meters graphs -->
<script src="js/jquery-1.10.2.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<!-- Placed js at the end of the document so the pages load faster -->

</head>
Expand All @@ -53,6 +61,8 @@ <h1><a href="index.html">DroLa <span>Admin</span></a></h1>
<a href="index.html"><i class="lnr lnr-home"></i> </a>
</div>



<!--logo and iconic logo end-->
<div class="left-side-inner">

Expand Down Expand Up @@ -157,9 +167,10 @@ <h1><a href="index.html">DroLa <span>Admin</span></a></h1>
<!--notification menu end -->
</div>

<div class="col-md-4 span_8 scrollbar" style="width: 100%; height: 1000px" id="maploaded"> </div>
<div class="col-md-4 span_8 scrollbar" style="width: 100%; height: 1000px; z-index: 1" id="mapid"></div>



</div>
<!--body wrapper start-->
</div>
<!--body wrapper end-->
Expand All @@ -178,26 +189,22 @@ <h1><a href="index.html">DroLa <span>Admin</span></a></h1>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<script>
function initMap() {
var home ={ lat:6.827059, lng:80.152336};
var uoc_ground = {lat:6.900824,lng:79.860342};//6.900824, 79.860342
var akurala ={lat:6.207258,lng:80.062729}
map = new google.maps.Map(document.getElementById("maploaded"), {
zoom: 18,
center: uoc_ground//akurala//uoc_ground
});
geocoder = new google.maps.Geocoder;

<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/web-socket-js/1.0.0/web_socket.js">
</script>

<script type="text/javascript">
var home = { lat:6.827059, lng:80.152336, zoom:10};
var mymap = L.map('mapid').setView([home["lat"], home["lng"]], home["zoom"]);

}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkHhuEUMXW6ActUczGPk_JCTEdh8_njw0&callback=initMap">
</script>

<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/web-socket-js/1.0.0/web_socket.js">
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a','b','c']
}).addTo( mymap );


</script>

<script type="text/javascript">
Expand All @@ -214,32 +221,24 @@ <h1><a href="index.html">DroLa <span>Admin</span></a></h1>

//var dt=getDrone(data);
if(drones.hasOwnProperty(data.name)){
var pos = new google.maps.LatLng( data.lat, data.lng );
console.log(data.name,data.lat,data.lng);
drones[data.name]["marker"].setPosition( pos );

var path = drones[data.name]["path"].getPath();
path.push(pos);
drones[data.name]["path"].setPath(path);

var newpos = new L.LatLng(data.lat, data.lng)
mymap.setView(newpos);
drones[data.name]["marker"].setLatLng( newpos );

var path = drones[data.name]["path"].getLatLngs();
path.push(newpos);
drones[data.name]["path"].setLatLngs(path);
}
else{
var pos = new google.maps.LatLng( data.lat, data.lng );
var path = [pos]
var marker = new google.maps.Marker({
position: pos,
label: data.name,
title: "Last Seen",
map: map
});
var flightPath = new google.maps.Polyline({
path: path,
strokeColor: colors.pop(),
strokeOpacity: 0.8,
strokeWeight: 4
});

flightPath.setMap(map);
var newpos = new L.LatLng(data.lat, data.lng)
mymap.panTo(newpos);
var path = [newpos]

var marker = L.marker({lat: data.lat, lng: data.lng}, {title:"Last Seen"}).addTo(mymap);

var flightPath = L.polyline(path, {color: colors.pop(), weight:4, opacity:0.8}).addTo(mymap);

//console.log("dt==null", data.name,data.lat,data.lng);
var drone = {
"marker" : marker,
Expand Down
9 changes: 7 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,18 @@ Setup the units according to the shematics given in the `LoRa_End_Node`. End nod
```
npm start
```
3) Start the Websocket server and Websocket client to see the the end node locations in the browser application
3) Install neccessary python packages for websocket server and client
```
cd Drola_Base_Node/api
pip install -r requirements.txt
```
4) Start the Websocket server and Websocket client to see the the end node locations in the browser application
```
cd Drola_Base_Node/api
python socket_server.py
python read_serial.py
```
4) Go to http://localhost:3000/ in your browser to see all the locations of the Live End Nodes.
5) Go to http://localhost:3000/ in your browser to see all the locations of the Live End Nodes.

**Note:** You can test the api by running `socket_client.py` instead of `read_serial.py`. It will show you some hard-coded locations. Trusted zones are not implemented yet to protect AES keys. The keys are hardcoded in this version.

Expand Down