I have a leaflet map, using graphopper as the router. I'm having problems with setting the options; for instance change the vehicle from default (car) to motorcycle.
routeControl = new L.Routing.Control({
waypoints: setWaypoints,
show: false,
routeWhileDragging: true,
router: L.Routing.graphHopper("api key"),
vehicle: "motorcycle"
}).addTo(map);
Any help in the right direction is much appreciated.
I was able to solve the problem by using;
routeControl.getRouter().options.urlParameters.vehicle = 'motorcycle';
routeControl.route();
after it was added to the map. Apparently motorcycle is not included in the free account but this approach works for the car, foot and bike.
I was wondering if there is a better solution for implementing this, because this way takes an extra step.
Related
I have this:
var map = new mapboxgl.Map
({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-streets-v11',
});
It works. But I also want elevation/fog added to it. Reading the manual for many hours, it seems to me that you either have to specify a URL, like I have done, to a "pre-made style", OR specify an absolutely massive style object full of cryptic and incomprehensible sub-objects such as specific layers and stuff.
There doesn't seem to be a way to simply use that style "template" URL, and add elevation/fog on top of it. I really hope that I'm wrong about this.
Downloading the JSON object representing their "pre-made style", I was presented with a massive ocean of data, impossible to manage in any sensible manner. They cannot possibly mean that you should try to edit/adapt/extend that.
I must be missing something. Is there really no way to do what I do now, but enable the "terrain" and "fog" features?
https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/
https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/
Naturally, I tried adding them to the Map object at first, assuming this was how it was done, but it was just ignored.
Again, if I were to make my own style object, it would be required to contain all sorts of scary and incomprehensible stuff: https://docs.mapbox.com/mapbox-gl-js/style-spec/root/
To be frank, I have no idea who would ever want a 3D map which can support elevation/height differences and realistic fog/lights, yet not use those features. To me, this seems like it would be a simple boolean setting that you turn on/off, and which is enabled by default.
I have not tried this, but you should be able to set fog dynamically like this:
var map = new mapboxgl.Map
({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-streets-v11',
});
map.on('load', () => {
map.setStyle({
...map.getStyle(),
"fog": {
"range": [-0.5, 3],
"color": "white",
"horizon-blend": 0.1
}
})
});
See the documentation here.
I have a leaflet map with tile layers and a layer control [L.control.layers(baseLayers, overlays)]. How can I get the name of the base layer that is currently shown in javascript?
You can listen to the baselayerchange event on your map instance, as mentioned in the Leaflet Docs:
Fired when the base layer is changed through the layer control.
Here's an example to illustrate the possibilities:
map.on( 'baselayerchange', function (event) {
console.log('Layer name -> ', event.name);
console.log('Layer URL -> ', event.layer.options.url);
console.log('Layer attribution -> ', event.layer.options.attribution);
});
It's been a while since this questions was asked, but I hope that it can still be useful to somebody out there :)
We developed a web page where we are showing health facility locations of a country on a map. We used Leaflet for the map display. We actually do not need to display the online map tiles in the background. If we can only show a vector country map that would also be OK. I came to know that tiles can be downloaded and saved offline in Leaflet etc, but not interested in that direction.
What I want is available in this page
Where Leaflet is used but the world map online tiles are not displayed. But the code is quite complex to understand. Is there any easy example or guidance to do what I need?
This is actually quite easy when using a L.GeoJSON layer. First off you would need to find the correct GeoJSON for the region you want to display. For instance, here are some for the US: http://eric.clst.org/Stuff/USGeoJSON. Next create a map like you would normally do:
var map = new L.Map('map', {
'center': [0, 0],
'zoom': 0
});
Then you would need to fetch/load your GeoJSON data into your script using ajax via jQuery or something else and use that to initialize a GeoJSON layer and add that to your map:
// jQuery ajax request
$.ajax({
// url with your geojson data file
'url': 'my.geo.json',
// return json object, not as string
'dataType': 'json',
// on success handle result
'success': function (result) {
// Initialize GeoJSON layer and add to map
var layer = new L.GeoJSON(result).addTo(map);
// Fit map to bounds of your GeoJSON
map.fitBounds(layer.getBounds());
}
});
That's it. You can find lots of GeoJSON datasets online and if you want to know more about the L.GeoJSON i would recommend reading the reference i linked earlier and this tutorial: http://leafletjs.com/examples/geojson.html
I'm learning how to use Leaflet to make online interactive maps for public health purposes (experienced ArcGIS user, Mapbox TileMill). I'm taking it slow so I understand each piece of code, and I'm working from the Leaflet choropleth example as I want to make choropleth maps. The current task I'm stuck on is how to correctly add topoJSON data to a Leaflet map. I've tried the following code to convert the us states geoJSON to topoJSON, but it hasn't worked. Any suggestions?
var geojson;
var test = topojson.feature(us-states-topo, us-states-topo.objects.layer1 );
geojson = L.geoJson(test, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
I've reviewed the topoJSON API reference, but I'm sure I must be making a simple error as I am a beginner to JavaScript in general. Thank you all for your help!
Best
Eli
I'd recommend using your browser debug tools to start through debugging this.
var test = topojson.feature(us-states-topo, us-states-topo.objects.layer1 );
This is not valid JavaScript: us-states-topo is not a valid variable name, since -s are not permitted.
I am using OSM with leaflet API. Now I want to get the lat and long of a clicked location. I meant something similar to this:
http://openlayers.org/dev/examples/click.html
map.events.register("click", map, function(e) {
var position = map.getLonLatFromPixel(e.xy);
alert("Lat, Lon : "+position.lon.toFixed(3),position.lat.toFixed(3));
});
This code in open layers helps to get the lat,long values - looking for something similar using leaflet.
Any help would be really great. Thanks in advance
map.on('click', function(e) {
alert(e.latlng);
});
Docs