I'd like to change the style of my leaflet map. I'd like to make it look more like google maps default theme. Are there different css files that be referenced to style the map differently? Is there a theme repository anywhere?
There is a plugin for Leaflet that has a whole bunch of different basemap tile sets available. It's called leaflet-providers. Some of them are really good.
There's another plugin through which you can get Google, Bing, and Yandex's tile sets (though not Google's customizable ones).
Finally, you can make your own custom tile set through Cloudmade and load it in Leaflet. The first 500,000 tiles (each month) are free, but if you need more than that, you'll have to pay. In the basic Leaflet tutorial, they have the line:
L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 18
}).addTo(map);
You would modify the url with the details given in Cloudmade after you create your custom tile set.
Leaflet is only library for displaying various maps. You probably use map from OpenStreetMap project, but if you want to create own map style you need to use specialized software like Mapbox's TileMill, set up database, download raw data, etc.
Anyway, current rendering of OSM map is written in CartoCSS, you can find Github repo here.
You can find various map renderings ready to use on OpenStreetMap wiki.
You can also use Mapbox Studio to style your maps-they can be used/worked in conjunction with Leaflet
Related
If I search a query in google maps for example "carlton victoria australia" then it will give me a map of the region with the border around that area.
My questions are:
Is there a way to get list of all regions from the google map api for
certain province or country?
Can I combine the region information for example, change the color and also add some infowindow on top of the region?
What kind of level of the region that I can get from the api (district, subdistrict, village)?
Currently Google Maps JavaScript API doesn't expose any boundaries of geographic features. There is very old feature request in the public issue tracker to add this functionality, however it looks like Google didn't set high priority on this:
https://issuetracker.google.com/issues/35816953
Feel free to star the public feature request to express your interest and subscribe to further updates from Google.
You can get polygons from other sources and add them to Google maps as additional layers.
The nice workaround to get polygons in GeoJSON format from OpenStreetMap is described in the following answer:
https://stackoverflow.com/a/40172098/5140781
So, if you download the GeoJSON you will be able to add it to map using the data layer and its loadGeoJson() method:
https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson
You can style colors of GeoJSON objects and create info windows. Just read the aforementioned documentation.
I hope this helps!
Google Maps are blocked in china. So, we are looking for alternate solutions that have similar features like Google map.
I found leafletjs for Map. but want to make sure that it works in china.
It should work. Leaflet as library should work without any restrictions I believe that tile maps should be the problem. Lucky, you have an extension to Leaflet that contains configurations for various Chinese tile providers.
But more about that on this site.
Hope it helps
Yes, you can use many different maps with Leafletjs. I use Open Street maps in my app.
https://www.openstreetmap.org
You can specify open street as your base map:
var openStreet = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 18,
subdomains: ['a', 'b', 'c'],
attribution: 'Map data © OpenStreetMap'
});
You can add to leaflet with:
openStreet.addTo(map);
I have a piece of code for a web app. I need to add a legend for my base layer in OpenStreetMap.
Is it possible to have a legend for the OSM source? Because, according to this and this, I need to get URL and Params which do not exist for OSM in OpenLayers 3 (at least for now).
How about using a WMS layer for OSM? does that do the trick?
I am writting web application using only angularjs. I am currently using Leaflet to display a map on a webpage. I am able to display a map succesfully with out any problems, I am also using leaflet.draw to draw a rectangle and to get all 4 coordinates.
Now, what I want to do is to do this same thing but offline. I want to user to be able to use this application without internet conectivity. I want to user to see America and Atlantic Ocean and be able to zoom in several levels. I dont need street view zoom, but something like state view zoom.
JAVASCRIPT:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/MAPID/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
Where can I get these map tile to download? In other words, is there a way I can just substite "'http://{s}.tiles.mapbox.com/v3/MAPID/{z}/{x}/{y}.png'"
with a path in my local computer.
I have been experimenting with cloudmade and leaflet and would like to use a snippet of code from cloudmade into my leaflet code. I have both script tags in my header and define the leaflet map by:
var map = L.map('map').setView([lat, -long], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/APIKEY/STYLE/256/{z}/{x}/{y}.png', {
minZoom:6,
maxZoom: 18,
keyboardZoomOffset:2
}).addTo(map);
The snippet i would like to use from Cloudmade is this: http://developers.cloudmade.com/projects/web-maps-api/examples/custom-map-controls
I have tried to re-build this and implement however with the code it contains CM objects/methods. All i need is 3 links on the map so when the user clicks them it takes them to the lat/long stored. If anyone could guide me this would be great.
I am not a Javascript map pro- but assuming this is not a big issue and is my misunderstanding between the two plugins.
Note: I have took out my API and style ID in this example.
Note: I have also asked on leaflet/cloudmade forums and no replys but many views!
Thank You
Leaflet creator here. Check out the code example on Leaflet API reference page: http://leafletjs.com/reference.html#icontrol
Hope this helps.