Use two osmdroid Map Views in one Activity - android

I want to use two Map Fragments, each with a different fragment, side-by-side in an activity. The left map is planned to show a overview over a specific area, the right one zooms in to a specific point.
The problem I'm having is, that only the first (left) map fragment is being correctly shown, the second (right) one shows a world map:
Zooming is not working on the right map.
Here is a part of the code I'm using:
private void initializeMap()
{
MapTileProviderBasic tileProviderOSM = new MapTileProviderBasic(getApplicationContext());
ITileSource tileSourceOSM = new XYTileSource("OpenFireMap", null, 1, 18, 256, ".png", new String[]{"http://openfiremap.org/hytiles/"});
tileProviderOSM.setTileSource(tileSourceOSM);
TilesOverlay tilesOverlayOSM = new TilesOverlay(tileProviderOSM, this.getBaseContext());
tilesOverlayOSM.setLoadingBackgroundColor(Color.TRANSPARENT);
OsmFragment frag = (OsmFragment) getFragmentManager().findFragmentById(R.id.osmMap);
osmMap = frag.getMap();
osmMap.setMultiTouchControls(true);
osmMap.getOverlays().add(tilesOverlayOSM);
MapTileProviderBasic tileProviderOSMDetail = new MapTileProviderBasic(getApplicationContext());
ITileSource tileSourceOSMDetail = new XYTileSource("OpenFireMap", null, 1, 18, 256, ".png", new String[]{"http://openfiremap.org/hytiles/"});
tileProviderOSMDetail.setTileSource(tileSourceOSMDetail);
TilesOverlay tilesOverlayOSMDetail = new TilesOverlay(tileProviderOSMDetail, this.getBaseContext());
tilesOverlayOSMDetail.setLoadingBackgroundColor(Color.TRANSPARENT);
OsmFragment fragDetail = (OsmFragment) getFragmentManager().findFragmentById(R.id.osmMapDetail);
osmMapDetail = fragDetail.getMap();
osmMapDetail.setMultiTouchControls(true);
osmMapDetail.getOverlays().add(tilesOverlayOSMDetail);
}
If I change either one of the fragments to a GoogleMaps fragment, the osmdroid map loads correctly.
Any ideas why this is happening and how I can fix it? I'm using the newest osmdroid version from gradle (v5.6.4)
Thanks in advance.
EDIT:
I changed the variable declation, but it still doesn't work.

You have to create separate TilesOverlays for different map views. Currently you are using the single overlay in two fragments, this can not work.

So I found the solution. The problem was, that the MapView is within a fragment and the fragment is a custom class which had the hardcoded ID's and layouts in it. The solution which worked for me was duplicating the custom fragment class and editing the ID and Layout. Then in MainActivity I had to change the varaible declaration and the cast from OsmFragment to OsmFragmentDetail
Now both maps are showing the wanted content.

Related

Adding dynamic markers on mapbox does not work with SymbolLayer

I am currently developing android map using mapbox sdk, and I want to add multiple markers when user click on one button. and I type below in my onStyleLoaded but it's not showing anything
List<Feature> symbolLayerIconFeatureList = new ArrayList<>();
symbolLayerIconFeatureList.add(Feature.fromGeometry(
Point.fromLngLat(31.995560, 34.767070)));
symbolLayerIconFeatureList.add(Feature.fromGeometry(
Point.fromLngLat(31.995979, 34.744110)));
symbolLayerIconFeatureList.add(Feature.fromGeometry(
Point.fromLngLat(31.995010, 34.767380)));
style.addImage("charge-icon-id", BitmapFactory.decodeResource(
MapboxNavigationActivity.this.getResources(), R.drawable.map_marker_dark));
style.addSource(new GeoJsonSource("charge-source-id",
FeatureCollection.fromFeatures(symbolLayerIconFeatureList)));
SymbolLayer destinationSymbolLayer = new SymbolLayer("charge-layer-id", "charge-source-id");
destinationSymbolLayer.withProperties(iconImage("charge-icon-id"),
iconAllowOverlap(true),
iconIgnorePlacement(true)
);
style.addLayer(destinationSymbolLayer);
May I ask what are the problem?
It's a bit tough to say without some more context/information, but I'm guessing that the issue is related to the order in which you're adding the source, layer, and image. Take a look at this example: https://docs.mapbox.com/android/maps/examples/marker-symbol-layer/
You'll want to add the image, source, and layer before the style is loaded. You can then make additional adjustments/add data when the style is loaded using the onStyleLoaded listener.
Disclaimer: I work at Mapbox.

If I don't want cluster marker on here map, what shoud I do ? Please

I'm trying show all my map makers on Here maps, but I don't want cluster them to a number, like image. I used Here maps app, markers not clustered Here Maps.
What should I do ?.
You can find information about it here.
You can use the ClusterLayer class.
ClusterLayer cl = new ClusterLayer();
If you want to customize the image use their ImageClusterStyle & ClusterTheme.
ImageClusterStyle imageCluster = new ImageClusterStyle(img);
ClusterTheme theme = new ClusterTheme();
theme.setStyleForDensityRange(2, 9, imageCluster);
cl.setTheme(theme);

SKMaps in Android not displaying annotations

I had created a demo app to known about SKMaps, it worked good with adding annotations. However, now I have moved the code to actual project with the same requirements. Added annotations is not being displayed. I tried with both SKAnnotationView (custom view) and default Annotation type like SKAnnotation.SK_ANNOTATION_TYPE_RED and SKAnnotation.SK_ANNOTATION_TYPE_PURPLE. Nothing is being added to the map.
I have a custom view pager in the same screen, I removed the same and checked still didn't work. SKMapViewHolder is added dynamically.
Code snippet for adding SKMapViewHolder dynamically:
SKMapViewHolder mMapHolder = new SKMapViewHolder(OfflineMapScreen.this);
mMapHolder.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
RelativeLayout outerLayout = (RelativeLayout) findViewById(R.id.outer_layout);
outerLayout.addView(mMapHolder);
RelativeLayout.LayoutParams rlp = (android.widget.RelativeLayout.LayoutParams) mMapHolder.getLayoutParams();
rlp.addRule(RelativeLayout.BELOW, R.id.header);
mMapHolder.setLayoutParams(rlp);
mOSMMapView = mMapHolder.getMapSurfaceView();
mOSMMapView.setMapSurfaceListener(this);
mOSMMapView.getMapSettings().setFollowerMode(SKMapFollowerMode.NONE);
mOSMMapView.getMapSettings().setMapPanningEnabled(true);
mOSMMapView.getMapSettings().setInertiaPanningEnabled(true);
mOSMMapView.getMapSettings().setCompassShown(false);
mOSMMapView.getMapSettings().setCurrentPositionShown(false);
mOSMMapView.setZoomSmooth(14f, 500);
Anybody has the solution for this? Code snippet of adding annotations can be seen here: http://postimg.org/image/sdbwzej9z/
In the image you provided we have noticed that when setting the location you are reusing the same value for both latitude and longitude. Use something like:
annotationDrawable.setLocation(new SKCoordinate(Double.valueOf(aPlace.getLongitude()),Double.valueOf(aPlace.getLatitude())) ;

Unable to close InfoWindow after switching to new Visual Refresh

I decided I'd give the new Visual Refresh that was announced at Google I/O 2013 a try, since all it takes to get the new basemaps/UI is a single property/query string.
JavaScript API
function initializeMap() {
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
google.maps.visualRefresh = true;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
-- OR --
Static Maps API
https://maps.googleapis.com/maps/api/staticmap?center=1600%20Amphitheatre%20Parkway%20Mountain%20View,%20CA%2094043&size=400x400&sensor=false
And it worked great, my maps now use the new basemap tiles and UI.
However since the change, when I open an InfoWindow on a mobile device (using the Javascript API), the close button in the top right hand corner of it doesn't seem to respond any longer. Has any one else observed this? I'm trying to find out if it's a bug with my code or with Google's.
UPDATE:
Here's a basic Fiddle I'm using to test with. Works on Chrome, IE & Firefox but not on mobile devices (Only been able to try android so far)
http://jsfiddle.net/vG3WE/1
I noticed the same effect on some Apple devices. Consider this as a very dirty hack, but if you don't want to wait until this bug is fixed, you can implement the close event yourself so that it should also work on mobile devices:
First of all you need to define an ID for your info window content (you'll need that later on)
var contentString = '<div id="infowindowContent">You should be able to close me</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Then you need to attach a listener for the domready-event of this infowindow. Cause if this event is fired, you know that the info window is attached to the DOM and you can start implementing the following hack:
google.maps.event.addListener(infowindow, 'domready', function() {
var infowindowCloseButton = $($($("#infowindowContent").parents()[2]).children()[0]);
infowindowCloseButton.click(function(){
infowindow.close();
});
});
What we do is pretty simple: We just navigate to the close button of the infowindow and attach a mouseclick event to close this infowindow.
I put together a small example:
http://chatmap.eu/playground/closeInfoWindows.html
As I said: It is very dirty but it worked for me.

Google Maps Setting Marker Icon Only Duplicates Over Default Icon

I'm developing a Phonegap app that involves Google Maps, and when I load a map and put a marker down on it, I get strange behavior when I set the icon of the marker. Basically, the new image that loads as the icon only loads over the default marker icon. Here's a screenshot of what I'm talking about:
This is the code I'm using to change the appearance of the marker:
carMarker = new google.maps.Marker();
carMarker.setPosition(new google.maps.LatLng(latitude, longitude));
var background = new google.maps.MarkerImage("images/parkreminderpop.png",
new google.maps.Size(100, 90),
new google.maps.Point(0, 0),
new google.maps.Point(50, 90),
new google.maps.Size(100, 90));
var image = new google.maps.MarkerImage(photoURI,
new google.maps.Size(96, 68),
new google.maps.Point(0, 0),
new google.maps.Point(48, 88),
new google.maps.Size(96, 68));
carMarker.setIcon(image);
carMarker.setShadow(background);
Thanks for the help!
I think this sample code will be helpful for you.
This is the post related to the above sample code given.
An important thing to remind you is Do not forget to include Google Maps API into your page by adding this single line,
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
Mejo Wilson
I'm not sure what was up, but the problem seems to have disappeared. Sorry to anyone having the same issue who can't find a solution.

Categories

Resources