I'm using Leaflet and MapBox. I need to develop an api which will show certain city points with labels, and accordingly draw routes between them. I have BlueMarble tiles till certain zoom, and then MapBox Streets. What is the best way to realize that idea? Are circles and paths the best option? Thank you.
I am not sure that you need to create an API for what you want to do.
http://leaflet.cloudmade.com/examples/geojson.html
In the Leaflet tutorials it shows you how to create LineStrings and Points from GeoJson data. So with latitude and longitude coordinates for the Cities you can create Points and use LineStrings to create the routes and add a them as a GeoJson Layer to the map.
Related
I'm using Leaflet (with omnivore and the MapQuest tile plugins) to display a map with colored polygons. The map and polygons look/work fine, but there are these mysterious blue markers everywhere.
There's nothing in the JS about markers at all, and if I comment out the polygon.addTo(map); line, the markers disappear. So they're definitely related to the polygons, even though they're not directly positioned on the polygons.
Any idea why the markers are appearing, or how I can make them disappear?
SOLVED: It turns out that the problem was that I'm using MSSQL's ".Reduce(n)" function to simplify the polygons (for performance), and if you simplify the polygons too far, the results have "Point(...)" items in them - which leaflet renders as markers!
Now, off to figure out why MSSQL is turning things into points...
Welcome to SO!
Most probably your polygon variable is a Leaflet GeoJSON Layer Group built by the omnivore plugin, and the data you feed it with contains "Point" type geometries.
If you do not specify anything special to handle these points, Leaflet will render them with this default blue marker icon.
In that case, you could simply filter out those point features, whether after omnivore processing (use the ready event) or using a custom GeoJSON Layer Group with its filter option. There should be other posts describing such solutions.
See e.g. Mapbox: Filtering out markers in a Leaflet Omnivore KML layer
If you are not in this case, you would have to provide more information for people to be able to help you. Typically code that you use to build your polygon layer and sample data.
I'm interested in custom map tiles, and using advice from here and here, I've experimented with exactly that. For a prototype I did a very geeky map of the Star Trek Federation, with episode links moving you around the planets/systems etc.
While that's all fine and dandy for fantastical locations, I'd also be interested in using heavily stylised renditions of real world locations, yet still using real lat,lng points. So, for example, a bespoke, yet mostly geo accurate, map of London, chopped into tiles, but if you passed in lat,lng coords for Camden Tube (51.53911 -0.14235), you would move to that location.
Any ideas how you configure LeafletJS to do this, without going the route of using Google Maps with custom tiles?
If I understand correctly, you have 2 different applications:
Your Star Trek map, for which you are satisfied.
Stylised map of real world, for which you would like real lat,lng coordinates to be accurate?
Then your question is how to create your custom tiles, so that Leaflet shows the stylised view of London when passed the real London coordinates?
In that case, it would be probably just a matter of correctly numbering your tiles. Or the reverse, modifying the tile numbers used by Leaflet to build the tiles URL. For the latter solution, see Specifying Lat & Long for Leaflet TileLayer
I'm not quite sure what you mean by "mostly geo accurate". It sounds like you probably just want to generate your own map tiles from some kind of source like OpenStreetMap. In that case, TileMill (although kind of obsolete) is probably the easiest way to go.
There are basically three parts:
Generate some map tiles (eg TileMill)
Host them (eg TileStream)
Point Leaflet at them
I have a complete set of waypoints (beginning, end, every intersection) and I'd like to display this on a map. I don't want to use a routing service and it should be offline.
How can I draw polylines on a map so that they follow the curves of the road?
I'm using leaflet.
Could the data be extracted from a relational database(PostgreSQL) and then convert it into GeoJSON and display on the map by leaflet?
I can't use any paid services either.
Leaflet has a polyline object. MapBox has a nice example how to use it.
I think scai has given you a good example to practice.By the way you can also store the data in JSON format in PostgreSQL.Refer this documentation for more details.JSON Types
I am using Mapbox and Leaflet to visualize a world map.
The map tile is based on the MapBox tiles that you can find and style upon creating MapBox project.
I tried to load the geometries of world countries from Natural Earth with the most accurate scale 1:10m million but I found out that a geojson border of Morocco for example is not matching the the border of Morocco in the MapBox baseline.
So where exactly I can find the geojson border of world countries that matches MapBox tile?
Natural Earth is used at lower zoom levels, at some point it switches to more detailed OSM data from http://openstreetmapdata.com/data.
Hope that helps.
I want to display map like geo chart api in google Geo chart
and highlight particular country. How to Achieve This in offline..
Any Suggestions please..
Thanks in advance.
I would look at something like the data from Natural Earth and put it in a either a sqlite3 or spatialite database. Then create a georeferenced view that will translate points on the screen to lat/lon coordinates and vice versa. Finally you can look up the lat/lon coordinates in the database to draw the country outlines and highlight the countries while you draw the screen.
If you are thinking of zooming the map, you probably want to look at getting multiple resolutions for the data as drawing a high resolution map can be slow.