I am using OpenLayers with OSM and Geoportail. I display OSM at the bottom and Geoportail on top.
In France I have no problem but in others country Geoportail has no tiles for big zoom. In this case Geoportail return 404, openLayers keep the previous tile/image and zoom inside :/
I wish to hide the Geoportail tile when the tile doesn't exist, this way I will see the OSM tile.
Any idea how to do it ?
My code to add the both layers :
layers: [
new OlTile({
'title': 'OSM',
source: new OlOSM()
}),
new OlTile({
source : new WMTS({
url: 'https://wxs.ign.fr/pratique/geoportail/wmts',
layer: 'ORTHOIMAGERY.ORTHOPHOTOS',
matrixSet: 'PM',
format: 'image/jpeg',
projection: 'EPSG:3857',
tileGrid: new WMTSTileGrid({
origin: [-20037508, 20037508],
resolutions: resolutions,
matrixIds: matrixIds,
}),
style: 'normal'
})
})
],
Thank you
As Mike say it in his comment : using "useInterimTilesOnError: false" solve the problem.
Related
enter image description here
Trying to use Quill in my project. I'm using Bootstrap class 'row' with two columns. Right hand side column has Quill, everything works fine except this equation box (see in the image). Can anybody help?
I solved this using bounds. Here is the code snippet:
let quill = new Quill('#editor-container', {
modules: {
formula: true,
syntax: true,
toolbar: '#toolbarOptions'
},
placeholder: 'Compose your question here...',
theme: 'snow',
bounds: '#editor-container'
});
I am integrating MapBox Direction API in react. I have more than 25 waypoints (around 500). How do I use all using "mapbox-gl-directions". Because, I can't send not more than 25 wp. So, how can I send multiple request with 25 wp each time 25. How?
Below is my sample code:
componentDidMount() {
let directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
unit: 'metric',
profile: 'mapbox/driving',
interactive: false,
controls: false
});
this.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [3.1026, 36.6686],
//center: [this.state.lng, this.state.lat],
zoom: 10
});
this.map.on('load', function() {
directions.setOrigin([-117.1425, 32.63638889]);
directions.addWaypoint(0, [-117.1425, 32.63638889]);
directions.addWaypoint(1, [-117.195, 32.75416667]);
---
---
directions.addWaypoint(23, [-116.5012667, 32.92583333]);
directions.setDestination([-116.5616667, 32.93583333]);
})
this.map.addControl(directions, 'top-left');
}```
Any suggestion? Thanks in advance.
You could break the waypoints up into 25 waypoints chunks and request directions from the Directions API before loading the map. Then you could join the response route JSON objects to one route object, which you can then use in the same way as the single route object in terms of drawing it on the map.
I'm trying to center the map by given bounding box. On OpenLayers FAQ is even an example of it (with the swissProjection) but it just don't work. Looked around in some forums and just can't figure out how to make it work.
Maybe someone knows.
Here is the code:
var extent = [-9022321.0707,3022167.2243,-8849726.2608,3148441.1951];
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
extent: extent,
units: 'm'
});
ol.proj.addProjection(projection);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: [0,0],
zoom: 0
})
});
Your code is correct but the center is out of range from your extent. There's two way to fix it.
First, set valid view center and level.
e.g.)
view: new ol.View({
projection: projection,
center: [-8936023.66575, 3085304.2097], // guess it's the center of extent
zoom: 8 // whatever you want.
})
Second, use View.fit instead setting extent on Projection.
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
//extent: extent,
units: 'm'
});
...
map.getView().fit(extent);
I'm developing a mobile app in Ionic.My requirement is I had a stationary image on the map, I need the location under that image.. Below is the code I found for dragging a marker and getting a location.
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location",
draggable:true
});
google.maps.event.addListener(loc, 'dragend', function(evt){
console.log('Current Latitude:',evt.latLng.lat(),'Current Longitude:',evt.latLng.lng());
});
But I need a stationary Image and get the location when the map is dragged some thing like in the below image. There is a rounded circle, when i drag the Map , I can see the location under the Image..
Anyone please guide me to achieve that.
Thankyou
There is a working example in leaflet site for adding WMS Layer in leaflet map at :
http://leafletjs.com/reference.html#tilelayer-wms. But I don't see methods to provide the filter for bounding box.
Is there a way to provide bounding box filters for Leaflet WMS ?
Just add bbox: [-180,-90,180,90] to the L.tileLayer.wms options.
Example:
var layer_SOEST_SurfaceTemp = L.tileLayer.wms("http://...............", {
layers: 'tmpsfc',
format: 'image/png',
transparent: true,
opacity: 0.5,
crs: L.CRS.EPSG4326,
bbox: [-180,-90,180,90],
styles: 'boxfill/alg',
attribution: "SOEST Hawaii",
time : forecast_datetime,
version : '1.3.0'
});
Just add the desired parameters to your L.tileLayer.wms options even if not shown in the API... Thoses parameters will be passed anyway to your map server and if this server support bbox or any others parameters provided it will return you the correct tiles...
You can use the option bounds to filter.
If set, tiles will only be loaded inside the set LatLngBounds.
L.TileLayer and L.TileLayer.WMS are both extending L.GridLayer, so the same options can used: https://leafletjs.com/reference-1.7.1.html#gridlayer-bounds
var nexrad = L.tileLayer.wms("URL.COM", {
layers: 'LAYER_NAME',
format: 'image/png',
transparent: true,
attribution: "Weather data © 2012 IEM Nexrad",
bounds: L.latLngBounds([[1,0],[0,1]])
});