I do not find options to hide / remove profile ui(Traffic, Driving, Walking, Cycling) from the mapbox direction. Is there any options available?
screenshot of profile ui section area. This is the section, I need to hide,Click here to view the profile ui section pic of mapbox directions
The code that i have implemented,
enableMapboxDirection() {
mapboxgl.accessToken = 'pk.eyJ1Ijoid2FsYWEtbWFwIiwiYSI6ImNqN2VuYmluZjBwZ2UzMnBqM20wNnJieWkifQ.2pKH-XbfOZuXzX9pEqGBjw';
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
controls: {
instructions: false,
},
unit: 'metric',
profile: 'driving',
});
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9'
});
map.on('load', function() {
directions.on('route', function(e) {
console.log(e); // Logs the current route shown in the interface.
console.log('Your Destination ',directions.getDestination());
console.log('Your Origin ',directions.getOrigin());
});
});
map.addControl(directions, 'top-left');
}
You can hide the profile UI with the controls.profileSwitcher parameter. This option is added by the mapbox team few days ago.
You can hide the profile UI by adding this:
controls: {
profileSwitcher: false
}
Related
I generated a list of Maki Icons I want to use via the original icon editor.
drawMarkers() {
let self = this;
const mapboxgl = require("mapbox-gl");
let data = this.draw.getAll();
data.features.forEach((feature) => {
if (feature.geometry.type == "Point") {
var icon = feature.properties.icon;
var title = feature.properties.title;
if (typeof title === "undefined") {
title = "Info";
} else {
var popup = new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(`<h3>${title}</h3>`);
var marker = new mapboxgl.Marker({
color: '#333',
draggable: false,
scale: 1,
})
.setLngLat(feature.geometry.coordinates)
.setPopup(popup)
.addTo(self.map);
}
});
The Markers are showed correctly on the Mapbox.
The GeoJSON is like this:
"type":"FeatureCollection",
"features":[
{
"id":"c749de6a6eac6b1cfdda890e7c665e0d",
"type":"Feature",
"properties":{
"icon":"ferry",
"title":"This should show a Ferry icon",
"portColor":"#d9eb37"
},
"geometry":{
"coordinates":[
6.12,
22.44
],
"type":"Point"
}
},
I want the Maki Icons also added in the Marker, but I cannot find any documentation of how icons can be used inside the Mapbox Marker.
Who can help me out? I'm using the Mapbox GL JS for Web.
It depends on how you've created your map. You can either:
Create your own map style using the Maki icons you've generated. This is done using the Mapbox studio to create your custom map style, then adding it to your application.
Create custom markers that use the maki .svg files you've created. This can be done by passing a custom element to the new mapboxgl.Marker() function. So, instead of:
var marker = new mapboxgl.Marker({
color: '#333',
draggable: false,
scale: 1,
})
you would pass:
var marker = new mapboxgl.Marker(customElement)
where customElement uses the data from your icons variable.
I'm not sure if you're using plain JS here, but there's some examples on the mapbox docs of ways you can do this.
Because you've generated your own list of Maki icons, I'd suggest downloading them and maybe host them somewhere so that you can get away with creating your markers with <img src="link to hosted maki marker"/> or something of the sort
I have draw direction to more then 2 park in gl mapbox.
I have try this code but not work perfectly.
mapboxgl.accessToken = 'pk.eyJ1IjoiYWNoYWxwcmFqYXBhdGkiLCJhIjoiY2lyNGkwZGsxMDFpenUybHd5bjRtMjVjeiJ9.2teTa5MmVqOW-MDpryv56w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/achalprajapati/cis1byfch0008hgnitiwbym9c',
center: [-122.222461, 37.172263],
zoom: 8
});
var directions = new mapboxgl.Directions({
unit: 'metric', // Use the metric system to display distances.
profile: 'walking', // Set the initial profile to walking.
container: 'directions', // Specify an element thats not the map container.
// proximity: [-122.222453, 37.172271] // Give search results closer to these coordinates higher priority.
});
debugger;
//map.addControl(new mapboxgl.Directions());
//map.addControl(directions);
map.on('load', function () {
directions.setOrigin([-122.222461, 37.172263]);
directions.addWaypoint(0, [-122.222461, 37.172263]);
directions.addWaypoint(1, [-122.483318, 37.724502]);
directions.setDestination([-122.483318, 37.724502]);
});
directions.on('route', function (e) {
console.log(e.route); // Logs the current route shown in the interface.
});
there was a breaking change in a recent update of mapbox-gl-js that caused the mapbox-gl-directions plugin to error.
Here is a working jsfiddle of your code with the new versions (v2.2.0 of mapbox-gl-directions plugin and v0.22.1 of mapbox-gl-js)
mapboxgl.accessToken = 'pk.eyJ1IjoiYWNoYWxwcmFqYXBhdGkiLCJhIjoiY2lyNGkwZGsxMDFpenUybHd5bjRtMjVjeiJ9.2teTa5MmVqOW-MDpryv56w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/achalprajapati/cis1byfch0008hgnitiwbym9c',
center: [-122.222461, 37.172263],
zoom: 8
});
var directions = new mapboxgl.Directions({
unit: 'metric', // Use the metric system to display distances.
profile: 'walking', // Set the initial profile to walking.
container: 'directions', // Specify an element thats not the map container.
});
map.addControl(directions)
map.on('load', function () {
directions.setOrigin([-122.222461, 37.172263]);
directions.addWaypoint(0, [-122.222461, 37.172263]);
directions.addWaypoint(1, [-122.483318, 37.724502]);
directions.setDestination([-122.483318, 37.724502]);
});
directions.on('route', function (e) {
console.log(e.route); // Logs the current route shown in the interface.
});
I am using Mapbox GL directions plugin inside my app where I set the origin on map load and set driving destination upon user click on any location on the map. I am now trying to remove the top left search origin / destination box yet after extensive research can't figure out how to do so, can someone please help by telling me how to do so? Thanks.
Code I am using in my app below:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [userCoordinates.coords.longitude, userCoordinates.coords.latitude],
zoom: 15
});
var directions = new mapboxgl.Directions({
unit: 'metric',
profile: 'driving'
});
map.addControl(directions);
directions.setOrigin([userCoordinates.coords.longitude, userCoordinates.coords.latitude]);
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['gsLayer'] });
if (!features.length) {
return;
}
var feature = features[0];
directions.setDestination([feature.geometry.coordinates[0], feature.geometry.coordinates[1]]);
});
I couldn’t figure this out either since there is no documentation, but finally I read through the mapbox-gl-directions.js file and I think I found out how to do it.
In your example, you should embed the controls like this in order to remove the origin / destination box:
var directions = new mapboxgl.Directions({
unit: 'metric',
profile:'driving',
container:'directions', // Specify an element thats not the map container.
// UI controls
controls: {
inputs: false,
instructions: true
}
});
map.addControl(directions);
I'll assume you are using Mapbox GL Javascript, and looking at this example it appears map.addControl(new mapboxgl.Directions()); is what is adding the controller. Within your code you gave you also have this map.addControl(directions);. Try removing it and see what happens.
Hope this helps!
I use Bing Maps AJAX Control 7.0 ISDK.
I would like to turn off the street labels in Bird's Eye view.
The question has been asked but for the api 6
I can do it with the navigation bar.
But the navigation bar is off on my map :
showDashboard: false
I don't find any solution on the sdk :
http://www.bingmapsportal.com/isdk/ajaxv7#CreateMapWithViewOptions7
Here is my code :
function handlerEvent()
{
displayAlert('Handler clicked');
}
Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', { callback: function()
{
map = new Microsoft.Maps.Map(document.getElementById('bingMap'),
{
credentials: 'xxxxxxxxxxxxxxxxxxxxxxx',
theme: new Microsoft.Maps.Themes.BingTheme(),
center: new Microsoft.Maps.Location(47.219058,-1.553625),
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
zoom: 16,
showDashboard: false
});
var infoboxOptions = {title:'Text', description:'TextTextText', actions:[{label: 'Click Handler', eventHandler: handlerEvent}]};
map.entities.push(new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions));
}});
Can you help me do that?
Add this option
labelOverlay : Microsoft.Maps.LabelOverlay.hidden
I am showing custom marker with click event on it. It shows information when I clicked but the info window is not showing well. I used some css in it. I also need to customize it further. This map is shown in phonegap app in iPhone (iOS 5). Every other thing working find (including direction, GPS).
I have used google map js v3 API.
I got this output.
How to show correct infoWindow? And customize as my need.
here is the code
function setMap(myLat, myLng){
// Define Marker properties
var image = new google.maps.MarkerImage('images/pick.png',
new google.maps.Size(30, 40),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 9,36.
new google.maps.Point(9, 36)
);
var my_place = new google.maps.LatLng(myLat, myLng);
var myOptions = {
zoom:14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
center: my_place
}
mer_map = new google.maps.Map(document.getElementById("mer_map_canvas"), myOptions);
mer_marker = new google.maps.Marker({
position: my_place,
map: mer_map,
clickable : true,
animation: google.maps.Animation.DROP,
icon: image
});
var contentString = '<div id="mer_map_info" style="border:3px solid red; color:#FFF; background-color:#000;"><p>this is just a test...</p></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(mer_marker, 'click', function(event) {
infowindow.open(mer_map,mer_marker);
});}
Give this a try. I had a similar problem with phonegap and google maps.
#map_canvas img {
max-width: none;
}