I'm trying to implement leaflet maps in ionic apps. I refer this link. Then, I need to add new button using leaflet plugins: easyButton but failed to implement it. Any ideas?
in cli
npm install leaflet-easybutton
in your *.page.ts
import 'leaflet-easybutton';
example:
const helloPopup = L.popup().setContent('Hello World!');
L.easyButton('fa-globe', function(btn, map) {
helloPopup.setLatLng(map.getCenter()).openOn(map);
}).addTo( this.map);
Related
I am using google maps in my flutter app, I have done drawn paths from one point to another using flutter_polyline_points, Now I want to get turn by turn navigation as mentioned in this attached picture, is this possible in flutter, or how I will achieve this
This is Google Map Turn by Turn Navigation View. You can launch it using Android Intent Plus lib
AndroidIntent mapIntent = AndroidIntent(
action:'action_view',
package: 'com.google.android.apps.maps',
data: 'google.navigation:q=$yourDestinationLat,$yourDestinationLng'
);
mapIntent.launch();
Read more at this link
I might have skipped some documentation about flutter_map plugin, but I could not find any way to use a simple .png image as a custom icon for a Mapbox marker?
Should I maybe use another plugin? Or is there a way to do what I attempted to do?
You can do that with the mapbox_gl plugin by calling
MapboxMapController.addSymbol(
SymbolOptions(
geometry: LatLng(latitude, longitude),
iconImage: iconImage,
);
You can use the name of one of your asset images as iconImage or the name of one of the icons included in your style (e.g. 'defaultMarker' should be included in every style).
There is also an example of this in the place_symbol.dart file of the plugin's example project.
Does anyone know how to get the URL for a Mapbox vector tile map (aka a "style")? I can only get a style address that looks like this: mapbox://styles/myusername/r3411y10ngh4sh3tc3tc, but I am using a plugin that requires a URL to integrate Mapbox's Vector Tiles with Leaflet: https://github.com/SpatialServer/Leaflet.MapboxVectorTile/blob/master/docs/configuration.md
I tried substituting the style address provided by Mapbox for the URL
var config = {
url: "mapbox://styles/myusername/fwaoij32wlfij23slkfj3",
...etc
};
var mvtSource = new L.TileLayer.MVTSource(config);
map.addLayer(mvtSource);
but I get an error where it can't read the style address as a URL. Any suggestions? Should I be using a different plugin?
Update
In short, the URL for a Mapbox style is not yet available. Here is a response I received from Mapbox:
Leaflet is not yet compatible with styles made in Mapbox Studio since these styles require a GL-based renderer. We're currently working on a new API to allow you to use your Studio style with Leaflet, we expect it to launch in a few weeks.
At this time, you can use Mapbox GL JS to load your Mapbox Studio style. You can still access raster map IDs (maps made with Mapbox Editor, Mapbox Studio Classic) to load with Leaflet - these are found under the "Classic" tab in the Studio dashboard.
The Leaflet.MapboxVectorTile plugin uses a different approach to styles than, for example, the Mapbox GL JS library does.
Styles you create in Mapbox Studio can be downloaded as JSON, but for Leaflet.MapboxVectorTile you have to create them programmatically as you can see in the documentation. You can still use their vector tile URL https://b.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=<public api token>, but styles would probably have to be rewritten/done from scratch again.
You can use the Mapbox Gl Javascript to create a map with the style you created, but I don't know how extensive your current project is and if it would conflict with other (Leaflet) plugins:
mapboxgl.accessToken = '<public API token>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/<your name>/<style id>',
center: [-74.50, 40],
zoom: 9
});
I am trying to put mapkit in my phonegap (Cordova 2.2) application. I am following all the instructions but when I build the application then I get the white screen with the buttons "show,hide,shrink,zoom,clear" in the bottom of my simulator screen.
Can anyone please help me to how to show the map?
I was having same issue, problem was that I have not entered the plugin name mapkitview in the phonegap.plist file
Also in the js file, sometimes if you have downloaded the older version of plugin, you need to switch between phonegap and cordova as javascript variables.
I need a view in my app to refresh everytime the app comes back to the foreground. The code below is working perfectly with Android but nothing happens on iOS.
$ionicPlatform.on('resume', function() {
if($state.current.name == "app.listar_aprovacoes"){
// code to refresh scope and view.
};
});
I also tried the following and it also doesn't work with iOS:
document.addEventListener("resume", function() {
var alertPopup = $ionicPopup.alert({
title: 'Foo',
template: 'Bar'
});
}, false);
So could you help me out with a solution to this problem?
Thanks!
EDIT: For some reason, updating the platform using ionic platform update ios didn't update the code for this. I removed the platform and added it again and it started working.
Try using window.addEventListener('resume', callback); as well.
Also make sure you have the Cordova Device Plugin.
You can install it by using:
ionic plugin add cordova-plugin-device
Generally, with the plugin installed, the first ($ionicPlatform.on('resume', ...)) method should work. I tested both on iOS and Android.
For some reason, updating the platform using ionic platform update ios didn't update the code for this. I removed the platform and added it again and it started working.