The OSM map won't show anymore with Openlayers 5
I tried to added from ol.source.OSM() but a grey map shown.
var map3 = new ol.Map({
layers: new ol.layer.Tile({
source: new ol.source.OSM()
}) ,
target: 'map-id3',
view: new ol.View({
center:ol.proj.fromLonLat([10.74,34.77]),
zoom:12
})
});
layers must be an array
layers: [ new ol.layer.Tile({
source: new ol.source.OSM()
}) ],
Related
I use vector tiles in crs ETRS89/UTM zone 32N (EPSG:25832) in OpenLayers and it works properly with default style.
But my problem is that if I apply a style.json from Maputnik in form of Mapbox Style by using th library olm-mapbox-style, it will be ignored. The same style.json works fine with "EPSG:3857".
I guess it is related to view because the olms uses map.getView().getZoom() function by updating the style.
How can I resolve this problem? Any idea?
Many thanks.
...
import {apply, applyStyle} from 'ol-mapbox-style';
...
proj4.defs("EPSG:25832","+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
register(proj4);
var projection = getProjection("EPSG:25832");
const map = new Map({
target: 'map',
layers:[
new TileLayer({
source: new OSM()
}),
vectorTile
],
view: new View({
center: transform([7.012, 51.4], "EPSG:4326", projection),
projection:projection,
zoom: 6
})
});
const jsonPath = require('./data/style.json');
apply(map, jsonPath);
I am trying to display my custom map from Mapbox in Openlayers 5.3.0. I am trying to follow the example HERE.
I am able to show the standard Mapbox background, but as soon as I change to my personal map style it breaks and shows a blank screen...
Here is example code:
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ' //this works
/*
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp.html?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ' //this doesn't work
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp.html/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ' //this doesn't work either
*/
})
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
Credits to Mike for the answer!
The correct url is:
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ'
I had to delte the .html from:
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp.html/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ'
I am very new to OpenLayers and JavaScript, and I have the following problem.
I have an .csv table representing the coordinates of points I want to visualize them on a map using OpenLayers.
I have found the following example on the OpenLayers page,
https://openlayers.org/en/latest/examples/polygon-styles.html
However, I couldn't understand the representation of the coordinates there. More specifically, I didn't know what does the e mean in the coordinate [-5e6, 6e6] for example.
However, I tried to plot a simple square on my map using my coordinates, but it just giving me a point, in the center of the map, as following:
https://jsfiddle.net/api/post/library/pure/#&togetherjs=bD5bfPm7vz
So I don't know what's exactly is wrong, and what should I change? I think it's all in the way the coordinates are written, but not sure though.
And this is my code:
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'orange'
})
}),
geometry: function(feature) {
// return the coordinates of the first ring of the polygon
var coordinates = feature.getGeometry().getCoordinates()[0];
return new ol.geom.MultiPoint(coordinates);
}
})
];
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
[-3e6, 6e6], [-5e6, 6e6]]]
}
}]
};
var source = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var layer = new ol.layer.Vector({
source: source,
style: styles
});
var basic = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [basic, layer],
target: 'map',
view: new ol.View({
center: [0, 3000000],
zoom: 2
})
});
OK, I found the answer.
The following coordinates [-5e6, 6e6] is in X,Y format, and is based on the EPSG:3857 projection. XeY is equal to X * 10 ^ Y. Normally the openlayers use the EPSG:3857 projection, but in order to use the longitude/latitude coordinates format, we have to use the projection: EPSG:4326 projection, and we specify it clearly like: projection: 'EPSG:4326
As of openlayers 3.11, raster reprojection is introduced. I used OSM as a background layer and it works perfectly on some projection, such as EPSG:25832. Now I need to work on another projection EPSG:2326 but it shows some white gaps between map tiles when zoomed into the map.
I created a jsfiddle for reference, can someone help? Thanks!
var myMap = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [837814, 818872],
projection: 'EPSG:2326',
zoom: 19
})
});
https://jsfiddle.net/86Lu9nd7/
This is a bug in OpenLayers. See https://github.com/openlayers/ol3/issues/4681 for its status.
I have a problem when use Ol3 with Mapproxy and Mapnik to get the layers from OSM database.
when I convert my work from Ol2 to Ol3 I see something wrong when I zoom in/out in map I get some black area and Thank you for help :)
This is my code to show the map
map = new ol.Map({
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
target : "map",
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}).extend([mousePositionControl]),
view: new ol.View({
projection: "EPSG:4326",
center: myLatLng,
zoom : 6
}),
overlays: [overlay],
layers: [new ol.layer.Tile({
title: "base Layer",
type: 'base',
visible: true,
source: new ol.source.TileWMS({
projection: "EPSG:4326",
url: 'http://localhost:8080/service?',
params: {
'LAYERS': "baseLayer"
}
})
})
]
});
Some image from my problem this map for Iraq
In stead of
'LAYERS'
use
LAYERS
(no quotes) in the params.
In my case I also modified the projection value.