I started working on a Vector Layer to render SQL Spatial Data in OpenLayers. When rendering this example (see Json) everything works perfectly fine. See code below:
//creates source to get json data from
let vSource = new VectorSource({
url: '/assets/germany.json',
format: new GeoJSON()
});
//set focus of the camera on this source
vSource.on('addfeature', () => {
this.map.getView().fit(vSource.getExtent());
console.log(this.map.getView().getCenter());
});
//add source to layer and afterwards load it into map
let vLayer = new VectorLayer({
source: vSource,
visible: true
});
//layer styling
vLayer.setStyle(new Style({
stroke: new Stroke({
color: '#FF5733',
width: 8
})
}));
this.map.addLayer(vLayer);
Map instantiation looks as following:
this.map = new Map({
view: new View({
center: [10, 10],
zoom: 3,
}),
layers: [],
target: 'ol-map'
});
But when i want to render this json file I am facing a blank map. Focus wont get set and not even errors appear. I am assuming its all about the boundaries?
How can Polygon coordinates get rendered which are our outside default boundaries, if there is such thing as "default"?
For example:
[12058.4521484375, 5345.98388671875],
[11408.95703125, 5345.98388671875]
Reading through the API I can deduce that the option extent may be key to solving this issue?
Best regards
A newbie at OpenLayers
Openlayers default projection is EPSG:3857. I think your geojson and center of map is EPSG:4326.
this.map = new Map({
view: new View({
projection: 'EPSG:4326',
center: [10, 10],
zoom: 3,
}),
layers: [],
target: 'ol-map'
});
let vSource = new VectorSource({
url: '/assets/germany.json',
format: new GeoJSON({ featureProjection: 'EPSG:3857' })
});
Related
I'm new to Openlayers. While I was using Node.js, my codes were working fine. But I ran into some problems when I switched to Asp.Net Core.
I learned that when calling modules to use them in Asp.Net Core I need to add some prefixes to their heads.
For example to be able to use the "Map" module:
const map = new ol.Map({ });
But I don't know what prefix I should add before "defaultInteractions()" in this line
interactions: defaultInteractions().extend([select, translate]),
Here is my Map code snippet
const map = new ol.Map({
interactions: defaultInteractions().extend([select, translate]),
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'https://imgs.xkcd.com/comics/online_communities.png',
projection: projection,
imageExtent: extent,
}),
}),
rasterLayer, vectorLayer
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2,
maxZoom: 8,
}),
});
When I ctrl + left click on defaultInteraction(), the ol.interaction.js page opens,
When I ctrl + left click on extend([select, translate]) the ol.Collection.js page opens.
But both are not working.
Here is the error i got
Thanks in advance and have a good day <(^.^)>
[solved]
I changed the line to:
interactions: ol.interaction.defaults().extend([select, translate]),
Using Open Layers and leaflet-sidebar-v2, I've added the sidebar to my map, this works. However, I also need to add another layer to my map, this layer will outline each country. I have the coordinates stored in a 'borders.json' file. I'm attempting to use D3.json to to import the border coordinates and then L.geoJson to add the new layer to my map.
I'm currently getting the following error message:
Uncaught TypeError: t.getLayerStatesArray is not a function
Here is the relevant part of my code..
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
view: new ol.View({
center: ol.proj.transform([7, 51.2], "EPSG:4326", "EPSG:3857"),
zoom: 3,
}),
});
var sidebar = new ol.control.Sidebar({
element: "sidebar",
position: "left",
});
map.addControl(sidebar);
d3.json(("borders.json"), function (json){
function style(feature) {
return {
fillColor: "transparent",
weight: 1,
opacity: 0.4,
color: 'grey',
fillOpacity: 0.3
}
}
geojson = L.geoJson(json, {
style: style,
}).addTo(map);
})
I think I might be adding the geojson layer to my map incorrectly, but I can't figure out what is wrong. I've spent quite a bit of time playing with it, but no luck.
Any helps is appreciated.
Cheers,
Beat
It might be hard to tell what the problem is without knowing other possible relevant parts of your code. I'd start by checking that the contents of borders.json follows valid GeoJSON format.
This is likely unrelated to your question, but is there a reason that you've declared style as a function like function style(feature) { ... }?
It looks like the style attribute of L.geoJson accepts an object rather than a function.
I have a set of places saved from GoogleEarth as a KML file. I am trying to get the same locations to display on a simple OpenLayer2 map using the following Js code :
var map;
function init() {
var bounds = new OpenLayers.Bounds();
bounds.extend( new OpenLayers.LonLat(0.2, 52.3).transform('EPSG:4326', 'EPSG:3857'));
bounds.extend( new OpenLayers.LonLat(1.9, 51.5).transform('EPSG:4326', 'EPSG:3857'));
map = new OpenLayers.Map('map', {
projection: 'EPSG:3857',
layers: [
new OpenLayers.Layer.Google(
"Google Streets", // the default
{ numZoomLevels: null, minZoomLevel: 1, maxZoomLevel: 16 }
),
],
controls: [ new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
],
center: new OpenLayers.LonLat( 1.0, 52.1)
// Google.v3 uses web mercator as projection, so we have to
// transform our coordinates
.transform('EPSG:4326', 'EPSG:3857'),
restrictedExtent: bounds,
zoom: 9,
});
var layer = new OpenLayers.Layer.Vector("KML", {
animationEnabled: true,
projection: map.displayProjection,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "/static/OL3Example/kml/locations.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true
})
})
}) ;
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
}
The Restricted Extends make the map display just SUffolk, Uk, and all but 4 of the locations are in Suffolk (so should be on the map). Looking at the KML data I can confirm that the locations in the KML are correct Decimal Lon/Lat.
When I remove the Restricted Extent from the map - I can pan around the world, and I can then see a cluster of Icons at 0 Lon, 0 Lat.
I have looked at the documentation - and a number of stackoverflow related questions : for instance OpenLayers not displaying kml layer, but none have answered the question.
I have used Firebug to investigate the map object and it's layers - and I can confirm that the layer is visible - and is drawn, and there are no unrenderedFeatures on the layer - suggesting that the layer is loading fine - and it is a projection thing - though what is confusing.
My intention is to load GeoJSON data and display it on the map. Coordinates of the features specified in GeoJSON are normal lon/lat. For some reason openlayers is rendering them using the projection used by the map and without converting them.
// Underlying sat layer.
var world = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
// GeoJSON data.
var geojsonObject = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'coordinates': [ 50.07539747, 19.76809501 ],
'type': 'Point'
},
}
]
};
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
// Map.
map = new ol.Map({
target: 'map',
layers: [world, vectorLayer],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 2
})
});
The point is being rendered in the middle of the map. By placing multiple points I determined that they are in fact moved relative to each other but by a small amount which leads me to believe the for some reason the map uses a different coordinate system for them.
What I tried:
Setting crs in GeoJSON, providing defaultDataProjection option to format. I use openlayers v3.8.2 and all solutions I found online are very outdated (and as far as I can see the API used to be way better, maybe I should just switch to an old version).
Just use a featureProjection to read features like:
var vectorSource = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(geojsonObject,{
featureProjection: 'EPSG:3857'
})
});
UPDATE:
When reading features from url is even easier, OL makes the conversion internally for you:
var geojson_layer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'file.geojson',
format: new ol.format.GeoJSON()
})
});
Demo - http://plnkr.co/edit/GvdVNE?p=preview
I tried to use the example from openlayers 3 xyz example to create a webmap from this service http://maps.gov.bc.ca/arcgis/rest/services/Province/web_mercator_cache/MapServer but the map rendered is not complete. It is better with the wrapX: false but the issue is not resolved. It also fails to display correctly using Leaflet.
Here is JS fiddle with the OL3 code.
http://jsfiddle.net/7ettuy1c/
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://maps.gov.bc.ca/arcgis/rest/services/Province/web_mercator_cache/MapServer" +
'/tile/{z}/{y}/{x}'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-118, 51.5]),
zoom: 1
})
});