I'm not very experienced on these platforms so I need your help.
I have edited and add various information in a specific place on OSM (Open Street Maps) and I would like to create a progressive web app which will withdraw these specific info and use the map to my app.
Any suggestions for searching material? I have in mind something like MAPS.ME app but in but in a much smaller range.
Thank you!
Just use the Google Maps API with the tiles from OSM. The PWA stuff is the same regardless of the MAps requirement.
More info: -
var mapTypeArray = [google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, "OSM"];
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "//b.tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OSM",
maxZoom: 19
}));
Related
Xcode shows me two privacy settings:
Privacy - Location Always Usage Description
and
Privacy - Location When In Use Usage Description
I don't need always the user location. Is there a way to disable the first usage description with the plugin?
I use the plugin with this code:
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function(pos) {
map.setCenter(new google.maps.LatLng(49.890224, 20.475327));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
icon: "img/pos.png",
title: "My Location"
});
}, function(err) {
// error
});
Any help much appreciated.
Since iOS 10 , you must specifies the reason for your app to access the user's location information or others user private data.
To do so you need to update your info.plist (please see the image) via Xcode or directly via cordova/ionic how to add specific configuration parameters to iOS info.plist
I am passing proper latitude and longitude to the map but it shows old map, having old lat lng. I know I am doing something wrong in this, but I can't figure out it. My project in ionic framework and for map I am using this plugin map plugin
This my html code
<div style="width:100%;height:200px" id="mapDisplay"></div>
This my angularJS code
var getLat = $scope.dealer.lat;
var getLng = $scope.dealer.lng;
var address = $scope.dealer.address;
var mapDiv = document.getElementById("mapDisplay");
const myGeoLocation = new plugin.google.maps.LatLng(getLat,getLng);
var map = plugin.google.maps.Map.getMap(mapDiv, {
'camera': {
'latLng': myGeoLocation,
'zoom': 15
}
});
map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
map.addMarker({
'position': myGeoLocation,
'title': address
}, function(marker) {
marker.showInfoWindow();
});
});
From the docs of the map plugin you are using
This plugin generates only one map instance using the Map.getMap()
method. In general, you may want to create multiple maps, but this
plugin doesn't allow it.
So your plugin.google.maps.Map.getMap is only grabbing the existing instance, not creating a new one and the plugin.google.maps.event.MAP_READY is only fired once, the first time. However looking at the source code it looks like the instance exposes a remove method which you can use to destroy the existing instance and create a new one with the new sets of coordinates when the callback is called, e.g: map.remove(function() { /** reset map coordinates **/ }
** Extra **
If you just need to display a map with a set of coordinates you can do it using the native app by passing lat/lon to the $cordovaInAppBrowser plugin. As an example for iOS and Android you'd have the following:
iOS
$cordovaInAppBrowser.open('maps://?q=<latitude>,<longitude>', '_system');
Android
$cordovaInAppBrowser.open('geo:0,0?q=<latitude>,<longitude>', '_system');
And finally you need to enable the geo uri in your config.xml like so:
<allow-intent href="geo:*" />
The plugin doesn't allow to create multiple maps instance More detail.
But you can achieve this by using this code
var map = plugin.google.maps.Map.getMap(div);
map.clear();
map.off();
map.trigger("test");
map.addEventListener(plugin.google.maps.event.MAP_READY);
Currently I am exporting a DEM using Agisoft as a TIF. From here is it possible to display a elevation model in leaflet or are there other steps required?
If your TIF files are already split into tiles, then you next step is a tile server. Often these are created as web services, and you can use a web server such as Apache, IIS, or you can easily roll your own in .NET or Ruby, etc.
Your tile server will provide tiles (images chopped up into an evenly-spaced grid, often 256px x 256px, but it could be whatever) based on a tile request which often looks something like this: http://tileserver/tiles/elevation/z/x/y
You can create a Leaflet base layer of your elevation tiles using JavaScript (which could be hosted on the same web server, or another). Here is a simple example that does so for a USGS elevation data source. It also demonstrates how you can customize tile layer options such as the tile size and the min & max zooms.
var mapElemId = 'map';
var mapOptions = {
center: [48.699864, -113.802159],
zoom: 9
};
var map = L.map(mapElemId, mapOptions);
var tileUrl = 'http://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}';
var tileOptions = {
tileSize: 256, // 256 is default
minZoom: 1,
maxZoom: 19,
attribution: 'Tiles Courtesy USGS'
};
L.tileLayer(tileUrl, tileOptions).addTo(map);
#map {
height: 180px;
}
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div id='map'></div>
If you do not already have tiles, you can create them using a variety of methods and programs. Here is one example that is a good description of the process: http://blog.thematicmapping.org/2013/10/terrain-building-with-threejs-part-1.html
And another good reference for creating your own tiles from OpenStreetMaps: http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles
If you need help with the specifics just let me know!
So I have this web-app using angularJS and nodeJS. I don't want to just use localhost to demo my project because it doesn't looks cool at all when I type "node server.js" and then go to localhost.....
Since I intend to use Firebase for the data, I have noticed that Firebase provides hosting. I tried it, but it seems to only host the index.html and not through/using server.js. I have customized files for the server to use/update. So, how can I tell Firebase Hosting to use my server and related files when hosting?
Is it possible to tell Firebase, hey, run "node server.js" to host my index.html?
I'm guessing by the way you are wording the question you want to see this site from "the internet".
Two routes you could go here.
a) Serve your index through Firebase hosting. Firebase only hosts assets. If your Angular app is being served through Node then you will need to change your architecture to be more SPA-ish
SPA-ish would be like an index bootstrap that interacts with the backend purely through API's.
You would host the API server on something more appropriate like through Nodejitsu.
b) Serve the whole thing through something like Nodejitsu (hosting platform) or your very own VM managed by a different kind of hosting company like BuyVM.net.
Another idea, is if your nodejs app is independent of the angularjs app (however they use shared data, and perform operations on that data model) you could separate the two and connect them only via firebase.
Firebase hosting -> index.html and necessary angularjs files.
Locally (your PC) -> server.js which just connects to firebase and trigger on changed data.
I have done this for a few projects and it's a handy way to access the outside world (internet) while maintaining some semblence of security by not opening ports blindly.
I was able to do this to control a chromecast at my house while at a friends house
Here's an example from my most recent project (I'm trying to make a DVR).
https://github.com/onaclov2000/webdvr/blob/master/app.js
var FB_URL = '';
var Firebase = require('firebase');
var os = require('os')
var myRootRef = new Firebase(FB_URL);
var interfaces = os.networkInterfaces();
var addresses = [];
for (k in interfaces) {
for (k2 in interfaces[k]) {
var address = interfaces[k][k2];
if (address.family == 'IPv4' && !address.internal) {
addresses.push(address.address)
}
}
}
// Push my IP to firebase
// Perhaps a common "devices" location would be handy
var ipRef = myRootRef.push({
"type": "local",
"ip": addresses[0]
});
myRootRef.on('child_changed', function(childSnapshot, prevChildName) {
// code to handle child data changes.
var data = childSnapshot.val();
var localref = childSnapshot.ref();
if (data["commanded"] == "new") {
console.log("New Schedule Added");
var schedule = require('node-schedule');
var date = new Date(data["year"], data["month"], data["day"], data["hh"], data["mm"], 0);
console.log(date);
var j = schedule.scheduleJob(date, function(channel, program, length){
console.log("Recording Channel " + channel + " and program " + program + " for " + length + "ms");
}.bind(null, data["channel"], data["program"], data["length"]));
localref.update({"commanded" : "waiting"});
}
});
When I change my "commanded" data at the FB_URL, to "new" (which can be accomplished by angularjs VERY Simply, using an ng-click operation for example) it'll schedule a recording for a particular date and time (not all actually functional at the moment).
I might be late but since 3 years have passed there is an solution available now from Firebase in the form of cloud functions
Its not straight forward but looks promising if one can refactor their code a bit
Is there any way to fetch user's mobile number in phone gap app?
There is no way you could directly use it in phonegap first you should find how to do this in each platform(ios,android,..) then with phonegap-plugins you could integrate them in your app easily. be aware that this solution is platform base
tip: what you are doing is against apple legal Agreement and you will rejected from apple app store if you use that in your application .
https://github.com/macdonst/TelephoneNumberPlugin
I havnt tried it but i think it works for android devices
Try this document
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-contacts/index.html#navigatorcontactspickcontact
This code 100% work fine
function onDeviceReady() {
// Now safe to use device APIs
window.addEventListener("batterystatus", onBatteryStatus, false);
$("#contact").click(function () {
navigator.contacts.pickContact(function (contact) {
console.log('The following contact has been selected:' + JSON.stringify(contact));
$("#contact_details").html('The following contact has been selected:' + JSON.stringify(contact.phoneNumbers));
}, function (err) {
console.log('Error: ' + err);
});
});
}