In depth issue -
When a user loads Map Page it initially loads a map of the whole world before quickly loading just the map portion required.
Goal - What i want is to direct moves to my desired location instead of flashing the whole world first.
Cause - As per my knowledge, this is caused due to following code -
this.maper.events.add('ready', () => { })
But the above code is required too as all the other necessary actions are to be done inside this function only once map gets ready.
Please guide me how to achieve this ?
Set the map camera options when loading the map rather than after the map is loaded. For example:
map = new atlas.Map('myMap', {
center: [-110, 50],
zoom: 2,
view: 'Auto',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
Related
I have a reactjs application which needs to print receipts on a very specific paper. Each receipt has a 5.79" x 3.23" printable surface which is configured in CSS within our application as a printable div within a containing page. Printing from the application running in a standard browser is working fine, using a simple window.print(); and a test border applied to the edge of the printed DIV is displaying as expected.
When I try to run the same app wrapped with electron the printed output is scaled down significantly. If I increase my CSS to push the container div to 7.25" x 3.2" I can see the contents approximately fill the expected area.
Is there a known scale down when printing through electron or a setting I can adjust within either the BrowserWindow or webContents? To try and resolve this we did try modifying settings in electron.remote
const { remote } = window.require("electron");
var options = {
silent: false,
printBackground: true,
color: false,
margins: {
marginType: "none", //No setting here seems to make a difference
},
copies: 1,
}
remote.getCurrentWindow().webContents.print(options, (success, failureReason) => {
if (!success) console.log(failureReason);
});
I have an application that leverages Azure Maps to show pins of various locations on a map. All works great, but when I zoom out, some of the pins will disappear. When I zoom back in they reappear.
Is there a way to keep the map from hiding the pins even when zoomed out? I have set my iconOptions in the layer to...
layer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
ignorePlacement: true
},
});
But that hasn't really helped.
Also set the allowOverlap option to true. If displaying text in a symbol layer, and you want that to always show, set the same options under the textOptions of the symbol layer.
layer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
allowOverlap: true,
ignorePlacement: true
}
});
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.
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);
I've tried heard to solve the issue from previous questions raised in SE but unable to solve the issue by reading those So, posting as separate question.
I'm creating a marker layer using following code
mLayer = new OpenLayers.Layer.Vector(layerName, {
projection: map.displayProjection,
extractAttributes: true,
styleMap: new OpenLayers.StyleMap({'default' : Lstyle}),
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: getURL,
format: new OpenLayers.Format.GeoJSON()
})
});
My task is to calculate the average of the marker coordinates and set that as a center of the map, for that I want to fetch coordinates from mLayer object. Markers are displaying fine on map but when I'm printing mLayer.features.length in console it showing 0 but the size of the features is 10, this I'm able to see in firebug console by printing vLayer,this is the my JSON file.
Openlayers provides this feature:
http://dev.openlayers.org/docs/files/OpenLayers/Layer/Vector-js.html#OpenLayers.Layer.Vector.getDataExtent
Then use map.getZoomForExtent and map.panTo.
To set map center to markers mid point as Christophe Roussy suggested in comments is correct to some extent, but the problem with his code is, code will execute before layer is finished to download to browser, So for that we have to check whether the layer is finished or not as follows
layer.events.register('loadend', layer, function(evt){map.zoomToExtent(layer.getDataExtent() )} )
Its working fine for me.