How can I adjust the obfuscation of an Azure indoor map?
As per tutorial (https://learn.microsoft.com/en-us/azure/azure-maps/how-to-use-indoor-module), the zoom level on load HTML is defined as:
new atlas.Map("map-id", {....
... zoom: 19,
});
The indoor map will only show on zoomlevel 19 or a higher value.
If I scroll (zoom out) of the map or change the base zoomlevel value in the HTML,
the building details are immediately no longer visible, only an outline remains.
Thanks for the help!
Currently it only shows details at zoom levels 19+. I don't believe their is an option to change this currently, but it is being looked into.
Curious about the need here. Does your building cover a very large area?
Do you want to be able to zoom in past level 22? Is so add maxZoom: 24 to the map options when loading.
Related
I would like to ask if there is a way on how to display the nameAlt of a unit instead of the unit label in displaying the indoor map.
https://learn.microsoft.com/en-us/azure/azure-maps/drawing-package-guide
In the drawing package guide, it shows the unit label but how can we also display the nameAlt?
I have not found any documentation about it. However, I have found that Azure Indoor Maps is using Mapbox GL JS as a rendering engine. For this reason, it seems that some documentation of Mapbox GL JS can be helpful until Azure Indoor Maps have more documentation. https://www.mapbox.com/blog/azure-maps-adds-data-driven-styling-powered-by-mapbox-gl
In this case, we have used the setLayoutProperty (https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setlayoutproperty and https://docs.mapbox.com/mapbox-gl-js/example/language-switch/) method to change it. However, we are not sure if the property name will change in the future, Azure Indoor Maps is on preview, and this kind of change can be risky.
This is the code snippet that we have used in our project to display the nameAlt property.
map.events.add('render', function (e) {
//Used the render function to get all the layers, including the layers for indoor maps.
//Set the nameAlt in the text-field instead of name in indoor_global_unit_label
map.map.setLayoutProperty('microsoft.maps.indoor.labels_indoor.indoor_global_unit_label', 'text-field', '{nameAlt}');
});
The display name is handled by the SDK and currently there is no way to override that.
I got an Azure Map and I have implemented a custom "change style" button that when pressed calls map.setStyle(). When I call this function using 'satellite' the switch is very quick. Like this:
map.setStyle({ 'style': 'satellite' });
But when I change the style "back" to 'road' the switch is super slow. Like this:
map.setStyle({ 'style': 'road' });
Am I doing something wrong?
The road layer has to load the styling layers for rendering the map, where as the satellite layer only renders image tiles with no road data. The team is working on loading performance of the base map styles which should help with this. Don't have an exact ETA yet but likely in the next few months.
I am trying to setup a layout such that it has an image with regions. Those regions,can have either other ImageView or TextView. I am able to achieve this at a high level using FrameLayout and RelativeLayout. However, it does not scale properly on different devices.
As an example here is an image
Yellow/Red Region - ImageView setup dynamically
Blue/Green Region - TextView
So On the Device, I want it to look like this:
And like this:
Note that Image scales correctly and so does child views in correct regions.
Can someone please share some ideas on how this could be achieved?
I was able to do this by writing a Custom View. I set the layout bonds based on the % offset.
For example the image would start at 15% off top and 10% off left and width is 30% card size etc.
I tested this with multiple devices and so far it is working as designed.
Have a look at Supporting Different Screen Sizes
Also have a look at Supporting Multiple Screens
This links has exactly what you are looking for. Follow the example and you will achieve the desired result.
These tutorials explains how to scale images based on the screen sizes and how to design your layout.
Extract from Google's dev site:-
Explicitly declare in the manifest which screen sizes your application supports
Provide different layouts for different screen sizes
Provide different bitmap drawables for different screen densities
Use OnConfigurationChanged() to determine the orientation and changes the views according to your requirements
public override void OnConfigurationChanged(Android.Content.Res.Configuration newConfig)
{
if(newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE){
//Change the Layout width and height attributes according to your requirements
Log.e("On Config Change","LANDSCAPE");
}else{
//Change the Layout width and height attributes according to your requirements
Log.e("On Config Change","PORTRAIT");
}
base.OnConfigurationChanged(newConfig);
}
Tilemill works great, mostly very usable! I managed to get to the part where I am making svg exports of my map made with osm-bright as a starter. That seems to be fine but I cant work out how the resolution I specify for the SVG relates to the zoom levels. I guess it has something to do with the tile size, can someone help me understand this?
Thanks a lot, Joris.
First, for printing, the resolution is 90.7 ppi (some OGC standard or whatever). Some round it down to 90 ppi.
Zoom-to-scale relation is calculated in this table: 1:2132 on z18, 1:4265 on z17 and so on. Also see this page on OSM wiki for formulas.
I'm working with nokia HERE maps and I want to add an additional layer of visualization graphics on top of a map. Since the possibilities to interact, manipulate and customize the graphics created by the HERE api are limited, I would like to work with d3.js/SVG for my visualizations.
My straight forward and obvious solution would have been to just add an absolute positioned SVG element on top of the map and giving it the same dimensions. But of course that takes every possibility to interact with the map. Is there any solution to add an overlay to the map which allows me to put SVG on it while maintaining the full interactivity (panning, zooming, clicking) of the map? Also it should be possible to interact with the SVG.
I know that there is a possibility to add a custom overlay of tiles provided by a tile server to HERE maps but that's not really what I'm looking for. I'm looking for something like the solution google has to offer to this problem. A set of custom layers which are always in sync with the corresponding map and have their own initialize, draw and remove methods. Is there something similar for HERE maps?
I think you are after the nokia.maps.map.provider.CanvasProvider class. This class provides a ground overlay bound to a specific area which offers a draw() method. The attach() method is the equivalent of your intialize I think, and you can refresh the overlay using update().
Depending upon your use case, I've also found the following techniques useful regarding SVG, Images and HERE Maps:
For an SVG marker which is anchored to a point and doesn't resize
use: SVG Markers
Alternatively override the Marker class and write using the low
level graphics commands to add flexibility to the rendering of a
marker anchored to a point. Like this: Defaced Marker
To add an image bound to a specific area use the ImageProvider class
To add a series of tiled images from a TMS (Tile Map Service) use the ImgTileProvider class
Alternatively if the [zoom][col][row] is useful to you and you
want to write SVG based stuff yourself try something like this example - which combines
SVG with 256x256 pixel markers.
Note that the HERE Maps API for JavaScript only supports SVG Tiny.
A class like the old nokia.maps.map.provider.CanvasProvider isn't even available on the new v3 API from Here.
Your best bet is on Leaflet using custom providers loading Here map tiles. Then you just load this Custom Overlay class and you're all set to draw D3, WebGL, whatever you need. Leaflet only loads the tiles from the providers and exposes some simple APIs. You will not have to deal with any of the providers' APIs.
Just don't forget to add your app_id and app_code to the provider class.