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.
});
Related
How to check cursor is moved outside the map in mapbox?
I want an event that will check cursor is moved outside the map.
Please take a look at the mouseleave event.
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 9
});
var mouseTarget = document.getElementById('map');
mouseTarget.addEventListener('mouseleave', e => {
console.log('mouseleave');
});
i'm trying to figure out how to animate the update of this map layer so that points translate smoothly to new positions rather than simply appearing there. i have not found any useful starting points in the mpabox gl tutorials / examples and was wondering if there is a straightforward way to approach this. thanks
the code below fetches a geojson doc from an api once every 60 seconds and updates the map layer.
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10', // style URL
center: [-73.93, 40.73], // centroid of NYC
zoom: 11 // starting zoom
});
var url = '/api/v1/nyc/livemap';
map.on('load', function () {
var request = new XMLHttpRequest();
window.setInterval(function () {
// make a GET request to parse the GeoJSON at the url
request.open('GET', url, true);
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
// retrieve the JSON from the response
var json = JSON.parse(this.response);
map.getSource('observations').setData(json);
map.flyTo({
center: json.geometry.coordinates,
speed: 0.5
});
}
};
request.send();
}, 60000); // refresh every n milliseconds
map.addSource('observations', { type: 'geojson', data: url });
map.addLayer({
'id': 'buses',
'type': 'circle',
'source': 'observations',
'paint': {
'circle-radius': 3,
//'circle-color': '#0039A6'
'circle-color': [
'match',
['get', 'occupancy'],
'full',
'#e55e5e',
'standingAvailable',
'#FFFF00',
'seatsAvailable',
'#00FF00',
/* null */ '#87CEFA'
]
},
});
});
Mapbox GL JS doesn't contain any mechanism for animating data points from one location to another.
You could use Turf's along function to interpolate each point some proportion along the way from its previous location to its new location.
I have mapbox setup with geocoding so that a user can type in the 'Search' box, and once a location is selected, a marker is dropped at that location. I would like a marker to already be dropped on the map and a search term to already be entered into the Search box at the time of page load (I have a setup where a user selects a location, and if they go back to edit the page I want them to be able to see the location they had previously selected). Is this possible?
My code for initializing is:
initMap(lat, lng) {
const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')
mapboxgl.accessToken =
'access_token'
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11?optimize=true',
center: [lat, lng],
zoom: 8,
attributionControl: false,
})
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl,
})
map.addControl(geocoder)
map.on('load', () => {
geocoder.on('result', (result) => {
const inputResult = result.result
const coordinates = inputResult.geometry.coordinates
const placeName = inputResult.place_name
const lng = coordinates[0]
const lat = coordinates[1]
this.location = placeName
this.latLng = [lat, lng]
})
})
},
You can specify a query which is already displayed in the search input box and for which a marker is automatically added to the map by using MapboxGeocoder#query in conjunction with Map#on and the 'load' event. For example, the following code displays text in the input field and a marker for "High Park" on map load:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-79.4512, 43.6568],
zoom: 13
});
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
});
map.addControl(geocoder);
map.on('load', () => {
geocoder.query('High Park');
});
I am a beginner in mapbox JS GL. I am looking for a way to give the user the opportunity to change visibility of layer in mapbox on button click.
In MapBox studio I add to Basic style visible layer "regions". I tried to do so :
<script> ...
var mapp = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/terentev/ck2so0c4h1q5x1cqow0aj9nh8',
center: [34.047, 63.779],
zoom: 5.41
});
mapp.setLayoutProperty('regions','visibility','none');
But the layer does not disappear.
And when I try get layers from style:
var v = mapp.getStyle().layers;
I can't. How to do it right?
Thanks in advance!
This is layer 'regions', added to Basic style :
layer 'regions' in mapbox studion
I tried like this:
var v = mapp.getLayoutProperty('regions', 'visibility');
alert('visibility '+ v );
mapp.setLayoutProperty('country-label','visibility','visible');
v = mapp.getLayoutProperty('regions', 'visibility');
alert('visibility '+ v );
On first alert I get "visibility undefined"
but there is no result on second alert at all
Try this:
var mapp = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/terentev/ck2so0c4h1q5x1cqow0aj9nh8',
center: [34.047, 63.779],
zoom: 5.41
});
mapp.on('load', () => {
mapp.setLayoutProperty('regions','visibility','none');
})
It just looks like you're invoking setLayoutProperty before the map has properly loaded
I need to create a circle around a point where a user clicks. How would I do this? Every tutorial shows extracting a circle from a geojson source and not creating one. Need to be able to edit the radius as well.
Did you try something yourself? Following the mapbox examples you should be able to get an idea of how to build something like that.
You would need to do 3 things:
Create a source that holds the data
Create a layer of type "circle" for displaying the data as circles
On every click of the user, extract the "latitude, longitude" and add a point to your data list. Then display all of those points as a circle on the map.
This is an example of how I would have coded that: https://jsfiddle.net/andi_lo/495t0dx2/
Hope that helps you out
mapboxgl.accessToken = '####';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
map.on('load', () => {
const points = turf.featureCollection([]);
// add data source to hold our data we want to display
map.addSource('circleData', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [],
},
});
// add a layer that displays the data
map.addLayer({
id: 'data',
type: 'circle',
source: 'circleData',
paint: {
'circle-color': '#00b7bf',
'circle-radius': 8,
'circle-stroke-width': 1,
'circle-stroke-color': '#333',
},
});
// on user click, extract the latitude / longitude, update our data source and display it on our map
map.on('click', (clickEvent) => {
const lngLat = new Array(clickEvent.lngLat.lng, clickEvent.lngLat.lat);
points.features.push(turf.point(lngLat));
map.getSource('circleData').setData(points);
});
});
#map {
height: 500px;
}
<div id="map"></div>