I want to create Open street map that contains cluster of no. of points. If I zoom on map then splits points.
Like if I zoom on map
Now click on cluster..shows like this...
So I need Js for open Street Map not for Leaflet.
I'm not totally sure what you're asking here - leaflet is a map viewing library and OpenStreetMap is a tile / data source. They are totally different, independent things. You can display OpenStreetMap tiles very easily in Leaflet. Tiles are the background mapping that is basically pngs tiled together and you can't interact with it.
And you can also display points of interest (things you can interact with on the map, like your markers above) from OpenStreetMap (or anywhere else) very easily in leaflet. This seems to be what you are trying to do.
To do this you will need to:
Download the points of interest in a suitable format (e.g. Geofabrik) has shapefiles for common points of interest for many different countries and smaller regions. This could be a huge answer, as there are many different ways of doing that, but since I'm not sure what you are trying to achieve I will leave it at that.
Convert them to geoJSON format
Display on the map using leaflet - and it looks like you need leaflet marker cluster to aggregate your markers.
Related
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´m trying to create a map based on LeafletJS. I need some shapes rendered in the map.
I need - for example "Kreis Wesel" (part of germany) in my map. I downloaded shapefiles from http://www.gadm.org/country and imported them into OpenJump. Fine - they are displayed correctly in the GUI.
When i copy the area to clipboard an format id as JSON (with my texteditor) and parse it width 'L.polygon(var).addTo(map', the polygon is created correctly - but in the Indian Ocean, not in Germany.
Any ideas wheres my fault?
Well it seems you can find info in that previous thread
first two lines: " Is there a service that can provide custom tiles in the EPSG:4326 projection? I've looked at Cloudmade and it would be the ideal solution but their tiles are using Spherical Mercator"
The shapes you downloaded are in lat/lon coordinates epsg:4326 whereas your base layer OpenStreetMap uses Spherical mercator epsg:3857
Change your shape's epsg with your favorite GIS software.
I want to show different places over an OpenStreetMap with different types of marker as two or more markers can have same text on their markers and there are a lot of markers like those with different text and the whole work will be done when the body loads.
Can anyone give me appropriate suggestion?
Thanks
Khandaker Mustakimur Rahman
I think what you're asking is how to draw a series of markers with popup balloon text over a map that uses OpenStreetMap data, and display that annotated map in a web page. If that's the case, you'll need to
Find a map server that can serve the OpenStreetMap tiles, or make your own.
Use a JavaScript map-drawing library in your page to load tiles from the server, draw them on the page, and the place markers and popups on the map.
Two easy options I know of for map servers are the ones hosted by CloudMade, which you'll need to sign up for a free developer key to access, and the ones hosted by MapQuest, which you can access freely without an API key.
There are several JavaScript libraries that you can use to draw maps in a "widget" on your webpage, but the most common are OpenLayers and Leaflet. Each of these libraries has a basic tutorial showing how to use it to draw a map on a page, though Leaflet's is nicer and friendlier. Once you decide on which library to use, you can look through its documentation to find out how to draw markers with text in popup balloons, or come back to StackOverflow to ask a more specific question.
For a good overview of the technologies involved in drawing an OpenStreetMap map on your web page, check out switch2osm.org.
We need to create a map of the small town from raster file. Our client deny usage of known API such as Google Maps, OSM, etc. There is little time before the deadline. What is the quickest way to create a small web map from the picture? Some kind of JavaScript framework?
Requires: drag, zoom and markers.
It is very desirable to do this without a big fat server such as MapServer or GeoServer, because we dont have a much time to redraw map in this format.
Absolutely easiest way is to create an OpenLayers map with Image layer. Here is an example of how it works.
Consider though that whole image is being loaded to the client before OpenLayers can manipulate it. So it's probably not the best option if it's a huge image.
Other option would be to create a tile pyramide with MapTiler which you can then simply host on your webserver(no need for MapServer or GeoServer) and then use TileCache layer in OpenLayers to display tiles on map. MapTiler creates OpenLayers example with all necessary settings when you tile image with it.
Is there any way to highlight/display on Google/Bing/(any other map provider) Maps whole street (from the beginning of the street to the end of)?
I know the existence of Polyline in Google Maps API, but it's just connecting two latitude points, and there is no way of making it automatic so I could display any street in some city.
Also I was thinking about Directions, but many street are 2 way, there is no guarante that you will mark whole street and it's just now user friendly. Example
You may want to check Mike Williams' article on how to snap points and polylines to streets with the Google Maps API:
Snap points (and polylines) to street
Especially this example:
Click on the map and a path will be drawn that follows the streets.
Take a look at OpenStreetMap. (Google and Bing won't let you access their underlying street data.)
You can show a map with OSM tiles, and use the API to query for the features you're interested in displaying on the map. OpenLayers is a javascript mapping library that could support this.
Here's a view of Chicago showing street vectors and other features overlaid on top of the map tiles:
http://www.openstreetmap.org/?lat=41.902104&lon=-87.626441&zoom=18&layers=B000FTTT
In Azure Maps you could access the vector tile road layers and use a data driven style based on the name of the road. Here is a tool that inspects the underlying data in the map tiles and highlights things that you click on. This has a lot of the basic functionality that you would need to achieve what you are asking for: https://azuremapscodesamples.azurewebsites.net/?search=inspect&sample=Inspect%20features%20under%20the%20mouse