I'm attempting to use leaflet layers on a project using a mapbox GL JS map. Mapbox offers two different ways to instantiate a map, and all the leaflet examples are using the 'classic' Mapbox API. I've build a whole experience using the GL JS way (seemed to have more robust features and documentation):
map = new mapboxgl.Map({
container: 'map', // container id
style: videoStyle,
center: [-73.945360, 40.717533], // starting position
bearing: 90,
zoom: mapInitZoom // starting zoom
});
However, now that I need to use leaflet in order to get the distance from the center point, all of the leaflet documentation instantiates maps like this:
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
Is there a way I can continue my project using the Mapbox GL JS API and leaflet combined? Can anyone direct me to an examples or parts of the API documentation where I can read about this?
Oh, and the reason I think I need leaflet is because I need to add image layers to my map like this reference diagram image:
You can add image to a mapbox-gl-js map. Here is an example on how to do this: https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/
As you can see in the example, you need to add an ImageSource:
map.addSource('overlay', {
type: 'image',
url: 'https://www.mapbox.com/images/foo.png',
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
and then a Raster Layer based on this source:
map.addLayer({
'id': 'overlay',
'source': 'overlay',
'type': 'raster',
'paint': {'raster-opacity': 0.85}
});
Generally speaking Leaflet.js / mapbox.js is best suited for raster tile sets, while mapbox-gl-js is for vector tile sets.
If you want to use Leaflet with a vector tile set, you can have a look at some of the Leaflet plugins that support vector tile sets: https://github.com/mapbox/awesome-vector-tiles#clients
Related
In am using Leafletjs in Angular2, http.get to invoke JSON from a URL, but I can't define style for the features that are added to the map because of predefining the geoJSON layer:
// Add an empty layer to the map
var geoJsonLayer1 = L.geoJSON().addTo(myMap);
// Retrieve the geojson file
http.get(myJsonURL)
.map((response: Response) => {
geoJsonLayer1.addData(response.json());
}).subscribe();
The geoJSON layer doesn't have any style and it looks as below:
The reason that I am predefining the layer is, I am lazy-loading the JSON file. In the regular way, we can define the style as below:
L.geoJSON(myLines, {
style: myStyle
}).addTo(map);
Now my question is, how to define the style for a predefined layer?
Just predefine the layer without data…
var geoJsonLayer1 = L.geoJSON(null, {
style: myStyle
}).addTo(map);
// Later on…
geoJsonLayer1.addData(response.json());
BTW your screenshot looks to show markers (for "Point" type features) with missing icon image. In that case, instead of style option for vector shapes (like polygons, line strings, etc.), you should use the pointToLayer option.
I'm trying to put multiple leaflet maps on one page, but I have problem with two of them - the second one rewrites the first one, so first one is rendering map, and the second has just grey area.
Here is the code:
var map_a = new L.Map( "smallMap", {
fullscreenControl: false,
layers: [osmMap]
}).setView([51.005, -0.09], 14);
var map_b = new L.Map( "smallMapSecond", {
fullscreenControl: false,
layers: [osmMap]
}).setView([51.505, -0.09], 14);
I have appropriate divs called smallMap and smallMapSecond. When I Initialize only one map, it works. Where could be the problem?
Well,one of the potential problems I see here without having a jsFiddle available is that you are using the same tileLayer osmMap for both maps. Sharing TileLayers between map instances is going to cause problems. Initialize tileLayers one per map.
I've got one instance of google maps with fully customized options in my app.The users are able to switch to street view if they want to and come back all with the same instance of the map.
Is there a way to customize streetview controls when creating the map instance, along with the other map options?
I can not see any documentation on how to do that on the main map, while if you directly instantiate a the street view on a separate dom element you can do that like this:
var panoramaOptions = {
zoomControl: false,
linksControl: false,
panControl: false
}
var panorama = new google.maps.StreetViewPanorama(document.getElementById("map_streetview"), panoramaOptions)
mymap.setStreetView(panorama)
Any hint?
You may access the streetView-property of a map(no matter if custom or default) by using the getStreetView()-method of the map.
Use the setOptions()-method of the streetView to set the options:
mymap.getStreetView().setOptions(panoramaOptions);
I want to draw many geo points with Leaflet. Therefore I want to use HTML5 canvas to improve the performance.
My datasoure is geoJSON. As I saw in the documention of Leaflet, it is not possible to draw the geo positions as canvas yet.
var anotherGeojsonLayer = new L.GeoJSON(coorsField, {
pointToLayer: function (latlng){
return new L.Marker(latlng, {
icon: new BaseballIcon()
});
}
});
I think I should hook up here:
pointToLayer: function (latlng) { }
Does somebody know how to draw my latlng objects as canvas?
I'm Leaflet author. You can do this by using L.CircleMarker instead of regular Marker, and also using an experimental L_PREFER_CANVAS switch to render vectors as Canvas (instead of SVG), like this: https://github.com/CloudMade/Leaflet/blob/master/debug/vector/vector-canvas.html
Expanding on the original answer in case anyone needs this for Leaflet 1.0. You should still use L.circleMarker() (Leaflet circleMarker documentation) instead of L.marker(), but the way to use the canvas has changed.
In Leaflet 1.0, the experimental L_PREFER_CANVAS switch has been upgraded to an official map option preferCanvas (Leaflet preferCanvas documentation).
var map = L.map('mapid', {
preferCanvas: true
});
Alternatively, you can explicitly set the canvas renderer; I think this does the same thing as the preferCavas option. Here's the Leaflet documentation for canvas.
var map = L.map('mapid', {
renderer: L.canvas()
});
Either of these options (preferCanvas: true or renderer: L.canvas()) with L.circleMarker() was significantly faster than a regular layer using L.marker().
I have OpenLayers map with two base layers: MetaCarta (EPSG:4326) and Google map (Mercator). sphericalMercator = false, units are degrees. There are also some markers, boxes, and vector data on the map.
When I switch between the base layers (which are of different projections), the simple geometries (such as markers or boxes) are reprojecting automatically and displayed correctly. However vector layers (polylines) are just shifted, not reprojected. I think that I need to call some kind of "rebuild" function or add some parameter so that OpenLayers do this automatically when the base layer projection changes. But I have no idea how to do this.
I read about Spherical Mercator (http://docs.openlayers.org/library/spherical_mercator.html) and look through OpenLayers examples, but didn't find a solution.
The part of my code is below (all coordinates in vector.json is in degrees):
var metaCarta = new OpenLayers.Layer.WMS("MetaCarta",
"http://labs.metacarta.com/wms/vmap0?",
{layers: "basic"}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets",
{numZoomLevels: 40}
);
map.addLayers([metaCarta, gmap]);
map.setCenter(new OpenLayers.LonLat(139.8, 35.7), 11);
// Load vector data
var jsonFormat = new OpenLayers.Format.GeoJSON();
var vectorLayer = new OpenLayers.Layer.Vector("vector", {
style: {strokeColor: "gray",strokeWidth: 2}
});
OpenLayers.loadURL("vector.json", {}, null, function(response) {
var features = jsonFormat.read(response.responseText);
vectorLayer.addFeatures(features);
});
map.addLayer(vectorLayer);
You will need to define the projections and a suitable transform in OpenLayers. In turn, you will need to include the Proj4JS library (which is used by OpenLayers to perform these projection transformations)