I'm developing an application that calculates the distance a person has driven using Leaflet with Mapbox. I need to save route information to display a map in leaflet. I'm using javascript to develop this functionality.
In my function I'm using navigator.geolocation.watchPosition to retrieve the geolocation and then I'm calculating the distance between the points. The problem is that the GPS is not always accurate, and my calculation is not correct.
What should I do to be able to accurately calculate and save the route taken?
Saved location example:
I also tried to create a route between the points using mapbox, but I also had problems, example in the image below.
Mapbox example:
Is there any other way to accomplish this functionality using leaflet with mapbox?
Related
I want to make an interactive map web application for a game that I play. Basically I want it to be a kind of Google maps clone, where I have a vector-based graphic of the region area and I can zoom in and out to reveal certain level of detail.
My research into map APIs has returned little results. OpenStreetMaps and Google Maps only allow custom maps with real geolocation data. My project requires the creation of a map with nonexistent locations. Does anyone have a suggestion on how to approach this? Thanks.
I think you can use "real" GPS coordinates and then customise the base layer beneath. The GPS Lat Long coordinates (between -90 and +90 each) offer as good a scale as any to then locate your fictional positions.
Google Maps has an API that allows putting custom layers and base maps here:
https://developers.google.com/maps/documentation/javascript/maptypes#CustomMapTypes
OpenStreetMaps will also allow this. Some recommended guides available here:
https://switch2osm.org/serving-tiles/
Good luck!
I need to get features in a certain radius around specific point. Let's say i have an address and need to count all metro stations near this address.
Metro stations are uploaded to mapbox side as a dataset.
How can i list fetch and process these features using mapbox API?
Additional question:
Is there any possibility to get them from mapbox style (layer) attached to map after style is loaded. I can't find right event for fetching renderedFeatures (there is multiple edge cases, when user can zoomin and renderedFeatures will contain less points then fit in 1km radius)
You can access your dataset using the Mapbox Dataset API. This doesn't require Mapbox-GL-JS - it's a totally separate API, and the dataset doesn't need to be displayed anywhere.
You can then use the Turf library to filter points within a certain distance of the address, using the distance() function.
Update
The correct answer these days is to use the tileQuery API, which takes a radius parameter.
I want to control which types of roads show from this OSM highways list at various zoom levels.
I could not find the answer in the Leaflet docs. If you do, please link me.
edit:
Maybe i need to go one step back in the making stack and use one of these frameworks? http://wiki.openstreetmap.org/wiki/Frameworks#Generating_map_images
It is not possible to alter displayed map style in Leaflet.
Probably the fastest way to achieve your goal is:
Create your map style in Mabox Studio, where you will specify the road types to be displayed at various zoom levels. Mapbox will render the map tiles for you and expose them via URL.
then display the tiles created in Mapbox Studio in Leaflet (or Mapbox.js which is build above leaflet) simply by altering the map tiles URL you use when you initialize leaflet.
I have an ArcGis map ploted in a browser and a lot of graphic pins printed above it. Those pins should be loaded lazily for performance purposes.
So I imagine if I could calculate the Lat and Lon of my corners I could simply make a query to bring me the pins inside the range.
Are you using ArcGis Javascript API? If so, you can use the FeatureLayer with ONDEMAND mode to get the functionality you have described.
If you dont have the "pins" as a service, I would suggest you to setup a FeatureService. otherwise, take a look at the FeatureCollection object.
I'm somehow new in making web services using Openlayers and Javascript. I would like to create a clickable grid layer on top of a map (e.g. OSM) which first has a defined spatial resolution (e.g. 200 m) and of course when user zooms the grid size adapts to the new zoom level of the map. Also I want to show every cell of a grid with a specific colour, and when the user clicks on each cell some information can be shown. So, I guess each cell is like a feature in this layer (e.g. polygon). I was wondering if Openlayers has existing function to do such a thing that I can use, or do I have to code all of it? any help and suggestions on how I can manage to do this would be highly appreciated. Below is a link to a service that has created such a service, I would like to do the same... Thanx.
Link to sample:
http://koenigstuhl.geog.uni-heidelberg.de/osmatrix/#timestamp/allotments_area/8/12/-0.2142333984375/51.578776399817066
Having developed the application you mention in your example, I can give you some hints on your question. The solution is pretty straightforward.
The grid you see, i.e. the coloured hexagons, is simply map tiles, that are served by a custom back-end following the Tile Map Service schema (I used NodeJS) that, in turn, uses Mapnik (any other engine should work as well, e.g. GeoServer or MapServer) for rendering the images. The data is stored in a Postgres data base with PostGIS added on.
Use a client-side library to create the map and add the tiled layer. OpenLayers and Leaflet both do the job well. (Leaflet, though, is a bit easier to grasp if your new to the topic).
On client side you register a click-event handler on the Map, that you can use to get the coordinates of the mouse click. Use these coordinates, send them to your back-end and perform a spatial query on the data base to get the polygons adjacent to the coordinates. The server's response should then provide the geometries of the polygons (encoded in GeoJSON in this case, GML, KML should work fine as well) and whatever information you want to display.
Use these polygons and add them to a vector layer using whatever colour scheme you want.
Have a look at the code to see how it works. The important files are osmatrix.js (connects to the back-end), control.js (main module, keeps track of everything) and map.js (surprisingly enough, everything map-related).
Openlayers has facilities for creating an interactive vector later. In order to create something like in the example, you would have to 1) add a vector layer, 2) write a loop that adds vector features to the appropriate locations on the map, 3) style the features as hexagons, and 4) create a stylemap that dynamically sets the feature color based on the appropriate parameters. Each step is facilitated by Openlayers.
A good start is to use the leaflet library because it use the map projection and to read this tutorial: http://build-failed.blogspot.de/2013/07/dynamically-creating-hexagons-from-real.html?m=1.