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
})
});
}
Related
I am trying to duplicate this OpenLayers 6 example
https://openlayers.org/en/latest/examples/export-map.html
It is to a javascript to download your OpenLayers 6 map
I am using different configuration and haven't been able to get it to work
http://australiamap.ca/export-map/
I get a "map.once is not a function error"
Here is your code (i truncated some part for readability)
window.onload = init;
function init(){
const torontoCenterCoordinate = [-8850000, 5410000]
const map = new ol.Map({
view: new ol.View({
center: torontoCenterCoordinate,
zoom: 10
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map'
})
}
function init2(){
...
}
document.getElementById('export-png').addEventListener('click', function () {
map.once('rendercomplete', function () {
...
});
map.renderSync();
});
You are trying to access variable map which is declare inside function init inside event listener of click. That's possible due to how scope work in JavaScript.
There is a coincidence that map actually resolve to a DOM element (in modern browser if you have an HTML element with id map then browser will save that element into variable map for you)
To fix your problem, you can either:
Move move to global scope so event listener can access it
// outside of init
const map = new ol.Map({
view: new ol.View({
center: torontoCenterCoordinate,
zoom: 10
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map'
})
Move even listener inside init
function init(){
const torontoCenterCoordinate = [-8850000, 5410000]
const map = new ol.Map({
view: new ol.View({
center: torontoCenterCoordinate,
zoom: 10
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map'
})
document.getElementById('export-png').addEventListener('click', function () {
map.once('rendercomplete', function () {
...
});
map.renderSync();
});
}
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.
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>
How can I use google map with OpenLayers 3?
I want to migrate from OpenLayers 2 to 3.
here is an example:
google map integration with OpenLayers example
but using this method needs to change the old HTML code (two element needs, 'gmap' and 'olmap' that mentioned in the example).
Google Maps is officially not supported by ol3, but my question is:
"How can I use Google Maps Tile Service in my project like a MapServer, without needing to add google API reference (for optimizing purposes) to the scripts tag?"
Here is my old code that works correctly with OpenLayers 2:
var map = new OpenLayers.Map("map_canvas", {
controls: [
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.OverviewMap()
],
units: "m",
numZoomLevels: 21
});
var gmap = new OpenLayers.Layer.Google(
{ type: google.maps.MapTypeId.ROADMAP, numZoomLevels: 21}
);
map.addLayers([gmap]);
and html code:
<div id="map_canvas">
</div>
appreciate any help.
I found the solution:
JsFiddle
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: 'http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
attributions: [
new ol.Attribution({ html: '© Google' }),
new ol.Attribution({ html: 'Terms of Use.' })
]
})
})
],
view: new ol.View({
center: ol.proj.transform(
[-110, 45], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
html, body, #map {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
<link href="http://openlayers.org/en/master/css/ol.css" rel="stylesheet"/>
<script src="http://openlayers.org/en/master/build/ol.js"></script>
<div id="map"></div>
but I'm not sure that this code is in contrast with the Google Terms of Use or not.
I just picked up a piece of code from the openlayers3 examples see HERE, now everytime you click the "geolocate me" button the tiles of the map are reloaded , now is there anyway for the tiles of the map to be stored locally ? I.E. when i click on the "geolocate me!" button the 2nd time around the tiles should be loaded from the users browser locally, rather than being fetched from the internet.
The code for generating the map is as following:
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});
I tried the following using localstorage:
if(localStorage.layer) {
localStorage.setItem('layer' , JSON.stringify(new ol.layer.Tile({ source: new ol.source.OSM()}) )); console.log(localStorage.layer);
}
var map = new ol.Map({
layers: localStorage.layer ? [JSON.parse(localStorage.getItem('layer'))] : [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: * #type {olx.control.AttributionOptions} ({
collapsible: false
})
}),
view: view
});
But this does't seem to work, what can i do so that the tiles of the map are stored locally instead of being loaded from over the internet ?
a example i have seen using the DOJO library is HERE.