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.
Related
I'm building an angular app in which I require user profile images to be shown on google map as markers.
The location comes from an API as JSON with Lat, long and images of user.
Plus, I'm using clustering in maps. Whenever I click the cluster, the markers with images should appear.
I'm trying it both AGM maps library as well as Google Maps Javascript API
Is there a way to do it?
To use custom markers and use your own images. You simply have to pass the url of your image to the an icon property of the Marker object as below...
var marker = new google.maps.Marker({
position: point,
icon: 'http://contoso.com/image.png',
map: map
});
if you need more control over that image and how it is rendered. Google Maps API provides and icon object specification you can use
var icon = {
url: 'http:contoso.com/image.png',
anchor: new google.maps.Point(0, 0)
}
There are a lot of documentation and examples in Google Maps APIs website
If you don't want to use google maps default marker and want to add custom HTML to markers,
Check this plugin out - https://github.com/googlemaps/js-rich-marker
Really easy plugin to use HTML as google maps markers.
Note - Basically this plugin uses custom overlay as markers. So, compared with default google maps markers, I think using this makes the map becomes a bit heavy to pan around when there are many markers (especially on smartphone)
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 have a webpage with a Leaflet Map, I can add markers,filter markers and so on. My question is that how can I save it?
1.Load the Map
2.Add some Markers on the Map
3.(Optional) Filter the Markers on the Map
4.Save the map together with the Markers that put on the map in a database(any possible storage)
5.Opening the map in the browser and view same as what i just saved.
Ive search everything but its too hard to do it any possible suggestions?, TYIA
Depends on backend you are using.
For Database you can use Postgresql with PostGIS. You create table with geometry or geography column and save marker latlng there. In other columns you saves additional data that define marker (id, description, whatever).
You can also save current marker layer as geojson file. And load it on opening map.
But you need to write some backend that takes in markers data or geojson and do something with it server side.
You can also take a look at Leaflet.Storage (and django-leaflet-storage as an backend)
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