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);
Related
I generate a Google Map like the following:
lat_lng = new google.maps.LatLng(51.165691, 10.451526);
mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: lat_lng,
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
also i got multiple markers that are dynamically added to the map. So as far as i know there is no way in my case to do it without the javascript API.
My Question is:
Is there any way to open that generated map (with all options and markers) in google maps? (https://www.google.com/maps/ ...)
... unfortunately it is not enough to just use the fullscreen functionality of maps!
Thanks in advance :)
The correct answer is yes and no.
There is no way to do such thing on the official Google Maps site, however you can create a map in Google's My Maps. The url does start with 'https://www.google.com/maps'. You can easily add your markers via the UI and I believe it also supports some file formats to import a batch of markers easily. I think you can also set some of the options you want.
Here's an example of an existing map created with this technique.
The only other option I know is to use the Google Maps API to create your custom map with all your markers and options, as suggested by other users.
#JonathanChaplin was correct in his suggestion #FalcoB... if I understand you correctly...
Your aim is for a google map to display, and when it does it shows all map markers like this:
To achieve this you need to store information (such as lat and lng values) externally, like for example in a json file. I have done this previously and my bit of code was simply:
//loads the data from json file resulting in markers being displayed
map.data.loadGeoJson('../upload/file.json');
Google has published documentation on this which can be viewed here:
https://developers.google.com/maps/documentation/javascript/importing_data
I think you can't put the map in google maps, but you can display full screen in your webpage.
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 am developing a site with some parcels ( layers on google map ) and the client wants the map to be in tilt view. I understand the google api but i don't know why my tilt setting and heading are not taken into consideration.
This is my code creating the map:
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 18,
center: new google.maps.LatLng(35.8313284, -82.7251666),
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading: 90,
tilt: 45
});
I see the working examples but i can't get mine to work. here you can see it live
http://sigmalogic.eu/mapdwr/index.html.
I just want to know why the tilt is not working, or heading is good at first but it rotates.
If you want to avoid getting errors when asking for 45° imagery, you can first test if imagery is available:
if (map.getTilt()) {
map.setTilt(45);
}
JSFiddle demo
Hope this helps.
Google doesn't have 45°-Images everywhere. The Documentation states:
45° Imagery
The Google Maps API supports special 45° imagery for certain
locations. This high-resolution imagery provides perspective views
towards each of the cardinal direction (North, South, East, West).
These images are available at higher zoom levels for supported map
types.
[...]
The existing google.maps.MapTypeId.SATELLITE and
google.maps.MapTypeId.HYBRID map types support 45° perspective imagery
at high zoom levels (where available).
You can see the currently available locations on this map.
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
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.