I can't find docs about it, consider:
// base map
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC,
Data by MassGIS',
maxZoom: 17,
minZoom: 9
}).addTo(map);
// bike lanes
L.tileLayer('http://tiles.mapc.org/trailmap-onroad/{z}/{x}/{y}.png',
{
maxZoom: 17,
minZoom: 9
}).addTo(map);
So we added two tile layers to the map right? But which of the above two is set as a base layer now?
Can a map have multiple base layers at once? (because I read somewhere base layers normally should be mutually exclusive).
Extra: Can I change a base layer without using the layer control mechanism? (e.g. only programatically).
So we added two tile layers to the map right? But which of the above
two is set as a base layer now? Can a map have multiple base layers at
once? (because I read somewhere base layers normally should be
mutually exclusive).
Yes they are mutually exclusive in display so that means you can display only one layer at a time. It's not documented but the last layer added will become the base layer which is being displayed.
Extra: Can I change a base layer without using the layer control
mechanism? (e.g. only programatically).
Yes you can using addLayer/removeLayer method.
map.removeLayer(base map layer name here);
map.addLayer(bike lane layer name here);
So we added two tile layers to the map right?
Yes.
But which of the above two is set as a base layer now?
Leaflet has no concept of base layer, so the answer is "none".
Can a map have multiple base layers at once? (because I read somewhere base layers normally should be mutually exclusive).
Depends on what you consider to be a "base layer".
I can, for example, have a map with several sets of opaque tiles, each of them being able to function as a base layer of a map, and make one of them semitransparent.
Usually, map frameworks assume that a tilelayer (or one tilelayer in a set of tilelayers) can be the basic information for your map, and in those circumstances, such set of tilelayers should be exclusive. Hence the wording of L.Control.Layers.
Leaflet does not constrain you to have a fully-opaque exclusive L.TileLayer. You can even have a Leaflet map without a single L.TileLayer. And of course, you can control visibility of your layers with map.removeLayer(lyr), map.addLayer(lyt), layer.addTo(map) and layer.remove(). Ultimately, the logic to control layer exclusivity (and opacity) is up to you.
Related
I'm wondering if it's possible to upload a PDF document to use as a map in Leaflet, or if it needs to be converted to another format first? I've only seen examples that actually reference a map like this:
// initialize the map
var map = L.map('map').setView([42.35, -71.08], 13);
// base map
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 9
}).addTo(map);
// bike lanes
L.tileLayer('http://tiles.mapc.org/trailmap-onroad/{z}/{x}/{y}.png',
{
maxZoom: 17,
minZoom: 9
}).addTo(map);
Docs: http://leafletjs.com/reference-1.3.0.html
TL;DR: No.
PDFs are complex to view - they are not one simple HTML element. This is because there is no "one true view" of a PDF. Do you want to display one page, multiple pages, the table of contents as text, one image of one specific page? Without knowing that, it's not possible to have a one-PDF-file-to-one-HTML-element mapping. Which means there's no way to tell Leaflet what to display.
In theory, one could leverage pdf.js to parse the PDF file, select some specific content, and then spawn some HTML elements as appropriate. However, the cost of doing so far exceeds the cost of exporting the data to some other format better suited for GIS work.
Currently I am working on Openlayers 3.
I used custom overlays in Google maps Javascript api v3 to add customized markers as html div on the map. And these markers are grouped and plotted in different custom overlays.
Now I am trying to implement the same in OpenLayers 3, but I couldn't find any solution as the overlays in OpenLayers 3 takes one marker in one overlay.
Can I group overlays in OpenLayers 3 in order to group the markers? Or Is there any other options available?
You have multiple possible options.
A) If you have only one dataset, then you could use a StyleFunction. See this ol3 vector example, more specifically this section of code:
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://openlayers.org/en/v3.20.1/examples/data/geojson/countries.geojson',
format: new ol.format.GeoJSON()
}),
style: function(feature, resolution) {
style.getText().setText(resolution < 5000 ? feature.get('name') : '');
return style;
}
});
See the style property? It can be a ol.style.Style or a style function, like demonstrated above. The function receives the feature and current resolution of the map view as argument and is called every time the feature gets rendered (or re-rendered). Returning a ol.style.Style or array of style objects will render the feature using the/these styles.
The feature can have unique properties, i.e. feature.getProperties(). Using as many properties within the feature(s), you can return a unique array of unique style objects.
Here's a more complex ol3 example featuring style functions that you can look and have an example of dynamic styling depending on the resolution. That could give you a better idea of what you could do with the feature properties.
B) If you have multiple datasets, then you can create one vector layer per dataset and define a unique style object on the layer, which would render the features all the same.
I have a map with a few base layers. Users can choose the base layer and then save the map. After saving the map, the system loads it with the new base layer. That base layer should be selected in the L.Control.Layers control. However, there's no way in the API to select a base layer.
Anyone knows a way around this, or a different plug in?
UPDATE: Here is the code I use. MapConfigs has the ids in MapBox, and can create the map that L.control.layers requires.
var map = L.mapbox.map( components.mapDivId , MapConfigs.idFor(baseLayerName) );
map.addControl( L.control.layers(
MapConfigs.toBaseLayersControlMap(map)
).setPosition("topright"));
Thanks!
Why not store references to all the base layers available in a hash, then use addLayer or removeLayer (http://leafletjs.com/reference.html#map-addlayer) as needed to programmatically select base layers?. Something like below.
var tileLayers = {light: L.tileLayer('lightUrl'),dark: L.tileLayer('darkUrl')}
I am trying to figure out how to capture the four corners of a Leaflet window, so that I might load points based on where a user is zoomed in geographically. For example, have a look here.
Now, how would I capture the four corners of that view so that I could load only the points that are geometrically bounded to that general location - downtown London?
I have not been able to find any example for Leaflet specifically. Any assistance will be appreciated.
The term you should be searching with is called "bounds". Leaflet's L.Map has a method called getBounds which will return the bounds of the current mapview:
http://leafletjs.com/reference.html#map-getbounds
Returns the LatLngBounds of the current map view.
It returns a LatLngBounds object which consist of a southwest and a northeast LatLng object:
http://leafletjs.com/reference.html#latlngbounds
Represents a rectangular geographical area on a map.
How you use those bounds to query your points of interest from your server depends on the platform you are working with.
If you already have a dataset loaded and you want filter that based on the current bounds you could use contains method of the LatLngBounds object. You can use that to check if a point is contained within the current bounds:
http://leafletjs.com/reference.html#latlngbounds-contains
Returns true if the rectangle contains the given point.
Is there a way of generating the actual integer that represents the max zoom level of Google Maps? In either the Static or Java API?
Yes you can generate the maximum zoom level possible for the place you are looking at as:
getMaxZoomAtLatLng(latlng:LatLng, callback:function(MaxZoomResult))
Returns the maximum zoom level available at a particular LatLng for the Satellite map type. As this request is asynchronous, you must pass a callback function which will be executed upon completion of the request, being passed a MaxZoomResult.
You can also set the maximum allowed zoom level (to prevent users from fully zooming in for instance) by using the maxZoom property of your MapOptions
The maximum zoom level which will be displayed on the map. If omitted, or set to null, the maximum zoom from the current map type is used instead.
Read everything about it here. (CTRL+F and look for "maximum zoom")
http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html
Each map also contains a zoom level, which defines the resolution of the current view. Zoom levels between 0 (the lowest zoom level, in which the entire world can be seen on one map) to 19 (the highest zoom level, down to individual buildings) are possible within the normal maps view. Zoom levels vary depending on where in the world you're looking, as data in some parts of the globe is more defined than in others. Zoom levels up to 20 are possible within satellite view.
Seems like it's relatively safe to just hard code 19, but if you need the exact max for the places where 19 zoom is disallowed (military bases and whatnot) or places where 20 is allowed (not sure), I'm not sure how to determine that. Perhaps you can detect this by setZoom and then immediately calling getZoom and if the number returned from getZoom is not the one you just set, then you're in one of the non-standard locations.
Here's actual code, if it's helpful.
The accepted answer points in the right direction. The documentation you want is [right here][1].
And here's working modern ES6 code for 2019:
/* Determine max zoom at location */
const location = { lat: _LATITUDE_, lng: _LONGITUDE_ }
const getMaxZoom = new google.maps.MaxZoomService()
getMaxZoom.getMaxZoomAtLatLng(location, (response) => {
console.log('Max zoom at this location:', response.zoom)
})
[1]: https://developers.google.com/maps/documentation/javascript/maxzoom