in the below code which i copy it from:
https://openlayers.org/workshop/en/vector/geojson.html
as shown below, it needs the url:
url: './data/countries.json'
when i run the code no map appears inly plus and minus sign for zooming in and out with a dark blue background
please let me know how to find countries .json
code:
const map = new Map({
target: 'map-container',
layers: [
new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: './data/countries.json'
})
})
],
view: new View({
projection: 'EPSG:4326',
center: [13.063561,52.391842],
zoom: 2
})
});
attempts:
i also adapted the code to be as follows:
const vectorLayer = new VectorLayer({
source: new VectorSource({
url: './data/countries.geojson',
format: new GeoJSON(),
defaultProjection :'EPSG:4326', projection: 'EPSG:3857'
})
})
const map = new Map({
target: 'map-container',
layers: [vectorLayer],
view: new View({
projection: 'EPSG:4326',
center: [0,0],
zoom: 2
})
});
sync(map)
also tried
countries.json
.geojson
.geo.json
but nothing gets displayed
For this code to work I have done the following:
I am working on ubuntu and I had followed the instruction on https://openlayers.org/workshop/en/ .
I downloaded the folder https://github.com/openlayers/workshop/releases/download/v6.0.0-beta.en.4/openlayers-workshop-en.zip from the workshop and extract it.
I went in the extracted folder and run 'npm install'.
I wrote in the index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<style>
html, body, #map-container {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
background-color: #04041b;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>
main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
new Map({
target: 'map-container',
layers: [
new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: './data/countries.json'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
You can run 'npm start' at the root and it will work.
For the full tutorial I have done the following
At the root of the directory I run the command 'npm install ol-hashed'.
I replaced the code in main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import sync from 'ol-hashed';
const map = new Map({
target: 'map-container',
layers: [
new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: './data/countries.json'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
sync(map);
Run 'npm start' and it will work.
Now if you want to work with the url of geojson you need the link to the raw data.
In this case I used https://raw.githubusercontent.com/openlayers/workshop/master/src/en/data/countries.json
and change my code in main.js by
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import sync from 'ol-hashed';
const map = new Map({
target: 'map-container',
layers: [
new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: 'https://raw.githubusercontent.com/openlayers/workshop/master/src/en/data/countries.json' // here is the link
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
sync(map);
If the map doesn't show it mean that the argument in 'url' is wrong.
You can check in your browser console if there is an error.
Related
in the below posted code i am trying to display a simple map. i referred to openlayer official website and used the code there as mentioned below.
the code contains no errors and compiles successfully but there is no map shows up.
please let me know how to fix this issue
html:
<a routerLink = "new-cmp">New component</a>
<br />
<br/>
<router-outlet></router-outlet>
<div id="map"></div>
component:
ngOnInit(){
this.map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
}
I'm basically trying to reproduce the center example in my own JsFiddle
const geoJSON = {};
const features = new ol.format.GeoJSON().readFeatures(geoJSON);
const vectorSource = new ol.source.Vector({
features: features,
});
const style = new ol.style.Style({});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: style,
});
let olView = new ol.View({
center: ol.proj.fromLonLat([6.6339863, 46.5193823]),
zoom: 4,
});
let olLayers = [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
vectorLayer
];
new ol.Map({
layers: olLayers,
view: olView,
target: 'app',
});
I must be missing somethig obvious, as the vector layer isn't showing in my fiddle.
If you pan down you will see the vector for Switzerland is in the wrong place
If using readFeatures you need to specify the feature projection so the geojson Lon/Lat coordinates are transformed to view projection
const features = new ol.format.GeoJSON().readFeatures(geoJSON, {featureProjection: olView.getProjection()});
https://jsfiddle.net/apowe4gj/
I want to display tms layer in ol3.
var layer = 'india:Indian_gdp_119';
var projection_epsg_no = '4326';
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.transform([77.39907,28.58920], 'EPSG:4326', 'EPSG:3857'),
zoom:2 }),
layers: [new ol.layer.VectorTile({
style:simpleStyle,
source: new ol.source.VectorTile({
tilePixelRatio:1 ,
tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
format: new ol.format.MVT(),
url: 'http://localhost/geoserver/gwc/service/tms/1.0.0/' + layer +
'#EPSG%3A'+projection_epsg_no+'#pbf/{z}/{x}/{-y}.pbf' }) })]});
In geoserver and ol3 pbf format is not working,getting same error in geoserver and ol3.
Error::
http://localhost/geoserver/gwc/service/tms/1.0.0/india:Indian_gdp_119#EPSG%3A4326#pbf/2/1/1.pbf 404 (Not Found)
Is there any mistake in this code.Thanks
I go tthis type of error:
"Cannot read property 'closure_uid_521373967' of null".
This occures after i make source that contain no features yet.
var vectorSource = new ol.source.Vector({
});
after that i make a Layer
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
and then i init the map:
var map = new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM({url:"http://tile.openstreetmap.org/{z}/{x}/{y}.png"}) }), vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
its seems to work fine in my home when it is simple as here , but when i try to make it work in my job , that the scanario is kind a bit more complicated , i lack that type of error that i mention before.
Please view this Snippet.
It is a good idea to separate layer definition from map instantiation. The latter makes things very convenient, but it makes things difficult for debugging.
With that in mind, I defined an OSM Layer and your Vector layer and added both to a map.
You don't need to use getElementById. You can simply supply the id of the div as the target of the map.
I'm not able to replicate your TypeError. My suspicion is that it came from the addition of the unnecessary getElementById, though.
Can you post a link to the code that's not working?
// layers
var vectorSource = new ol.source.Vector({
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: vectorSource,
})
});
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [osmLayer, vectorLayer],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script>
<body>
<div id='map'>
</div>
</body>
Im just getting started with OpenLayers 3 and i am trying to dynamically update a Features geometry property with coordinates, obviously there is something that i am missing out because the Feature is not moving. Here is what i god so far:
Socket.IO
socket.on('mapData', function(mapData) {
if (mapisloaded) {
latLon = ol.proj.transform([mapData.lon, mapData.lat], 'EPSG:4326', 'EPSG:3857');
// Initiate latlong object with mapData
if (centerIsRequested) {
//Center map with mapData
};
// Update marker with latlong from mapData
};
});
OpenLayers 3 based on the Vector Icon Example
var latLon = ol.proj.transform([10.904108, 59.788187], 'EPSG:4326', 'EPSG:3857');
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(latLon),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'imgs/lc.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var baseLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var view = new ol.View({
center: latLon,
zoom: 18,
});
var map = new ol.Map({
target: 'map-canvas',
layers: [ baseLayer, vectorLayer ],
view: view
});
The changes are obviously not changing, but i know that magic does not exist it was just to put something down to start with.
How wouldi go forward accomplish this simple task? The only thing i want is the icon to update its position on the map when socket.io detects the new mapdata (mapData.lat, mapData.lon).
I have tried to dig into the different objects and read their properties both in the console and in the documentation, and i have searched here on Stackoverflow but sadly without luck. Do i hook into the iconFeature, or do i have to do this another way? Maybe something really easy is built in? Any help is much appreciated.
If you want to move an icon over the map, it's better you use an ol.Overlay for this. You can use marker.setPosition(coord) on each change.
A working fiddle. Click on map to change marker's position.