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);
Related
In my React application. I'm using the Google Places API Autocomplete so users will be able to type their location and their city/state/country info will be automatically filled in, but I'm getting a problem I can't solve.
const autocomplete = new google.maps.places.Autocomplete(input);
When I don't specify options to the second parameter. Everything works good but I only want to return the user's city, state, and country but when I specify a type. The autocomplete don't even show me results.
I hope that there could be something wrong when declaring your option object. But I can't exactly say without having a look at your code.
But this is the example provided by google in their google Maps Api. I hope that this will solve your problem.
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
var input = document.getElementById('searchTextField');
var options = {
types: ['(cities)'],
componentRestrictions: {country: 'fr'} // show only results for country France
};
autocomplete = new google.maps.places.Autocomplete(input, options);
For more details you can refer google maps API
https://developers.google.com/maps/documentation/javascript/places-autocomplete
How should I create face detection web application which capture photo and save when face comes in-front of camera.
Which technology currently available to achieve this.
Please Help...
I've been using a wonderful solution called tracking.js (You can find it here). It's simple and wonderful.
Here's an example of how I use it in my code:
var trackerTask;
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
trackerTask = tracking.track('#vid', tracker, { camera: true })
tracker.on('track', function (event) {
// Do stuff when face was detected
});
// To stop tracking:
setTimeout(function () {
trackerTask.stop();
}, 500);
In the above example, replace #vid with your HTML5 <video> element.
Anybody know how to show driving directions between two points using ArcGis javascript api with location co ordinates only (not with place name or address)
I need to implement driving directions to a particular point(point B) from current user location(point A, I have the user location from browser) where the destination Point B's latitude and longitude is stored in my database,,,
pls help '
You can use RouteTask to get the result.
var routeParams = new RouteParameters();
routeParams.stops = new FeatureSet();
routeParams.returnRoutes = false;
routeParams.returnDirections = true;
routeParams.directionsLengthUnits = Units.MILES;
routeParams.outSpatialReference = new SpatialReference({ wkid:102100 });
if the locations are in lat long, convert it to WebMercator using webMercatorUtils
routeParams.stops.features.add(new Graphic(pointA));
routeParams.stops.features.add(new Graphic(pointB));
You can use your own service url here if you have one.
var routeTask = new RouteTask("http://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World");
routeTask .solve(routeParams, function(result){
//handle route result.
}, function(err){
//handle error
});
If you are using Directions dijit, it already has methods to add Point geometry. https://developers.arcgis.com/javascript/3/jsapi/directions-amd.html#addstop
Hope this was helpful.
I'm using LokiJS to save in local storage (well, I'm trying) .
What I want to do is a ToDo app, my controller is as follows:
.controller('Dash', function($scope) {
var db = new loki('loki.json');
$scope.name="";
$scope.lname="";
var users=db.getCollection('users');
if (users==null) {
$scope.message="It's null";
var users = db.addCollection('users');
}else{
$scope.message="It's ready";
}
$scope.insert=function(namesI, lnameI){
users.insert({
name: namesI,
lname:lnameI
});
}
The issue is that everytime that I test it, the message is "It's null". Although before already I have inserted data. I mean, everytime I launch the app, the database is created.
How I can persist the data?
*I'm not using any cordova plugin.
You are not providing a loadHandler function, so you are trying to access collections before Loki is finished loading the json file. Look at this example for a clarification on how to use the autoLoadHandler.
Also bear in mind that at some stage you need to call db.saveDatabase() to persist, or else you need to provide an autoSaveInterval value when instantiating Loki.
I'm trying to use the approach described in this question, but instead of using jQuery to perform the ajax request, I'm using angularJS $http method. I've already verified and the features are being loaded into the source of the layer, but nothing is shown.
Here is the definition of the source:
var vectorSource = new ol.source.Vector({
loader: function(extent, resolution){
$http.get(url).success(function(data){
var formatGeo = new ol.format.GeoJSON();
var features = formatGeo.readFeatures(data,
{featureProjection: 'EPSG:4326'});
vectorSource.addFeatures(features);
console.log(vectorSource.getFeatures().length);
})},
strategy: ol.loadingstrategy.bbox
});
Is there any incompatibility problems with using angularJS and openlayers?
The problem was the mismatch of the projection of the data in my GeoJSON (EPSG:4326) and of the map (OpenLayers3 default, EPSG:3857).
To solve the problem, I changed the projection of the data that I was using to build the GeoJSON to EPSG:3857. Since the data was stored in a postGis database, I used the function ST_Transform to change the projection of the geom column contaning the objects.