How can I zoom the map in Openlayers3 with "z" and "a" ?
currently I use this function: map.getView().setZoom(map.getView().getZoom()+1).
But I do not know how I can make it work when I press "A" or "Z".
You can do it by keyCode.
Of course, you may need to get the focus of the map element.
document.getElementById('map').focus();
The example:
<!DOCTYPE html>
<html>
<head>
<title>press 'A'or'Z example</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<style>
.map {
max-width: 566px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [raster],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
projection: 'EPSG:4326',
center:[104.07, 30.7],
zoom: 2
})
});
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if((e && e.keyCode==65)||(e && e.keyCode==90)){ // press 'A'or'Z
map.getView().setZoom(map.getView().getZoom()+1)
}
};
</script>
</body>
</html>
Related
I'm trying to build my personal gis library using OpenLayers; it is the first time that I do this.
Usually I build a simple map using this code:
var map = new ol.Map({
target: 'map'
});
var view = new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
});
map.setView(view);
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
map.addLayer(osm);
Now I've created a static file called gislibraries.js and here I initialize my map:
function MapInizialized(mapTarget) {
const map = new ol.Map({
target: mapTarget
});
return map;
};
function MapSetView(longitude, latitude, zoomLevel) {
const view = new ol.View({
center: ol.proj.fromLonLat([longitude, latitude]),
zoom: zoomLevel
});
map.setView(view);
return view;
};
function MapTile() {
const osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
map.addLayer(osm);
return osm;
};
Using the code below inside index.html I can see my map.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Base Map | GeoDjango</title>
<link rel="stylesheet" href="/static/css/map.css">
<script src="/static/js/mapscripts.js" type="text/javascript"></script>
<!-- OpenLayers 6 -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/css/ol.css"
type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new MapInizialized('map');
MapSetView(0.0, 0.0, 2);
MapTile();
</script>
</body>
</html>
When I use:
MapInizialized('map');
MapSetView(0.0, 0.0, 2);
MapTile();
My map doesn't work and I can see this error:
Uncaught TypeError: map.setView is not a function
MapSetView http://127.0.0.1:8000/static/js/mapscripts.js:17
http://127.0.0.1:8000/:51
Why I can't invoke MapInizialized('map');?
For map to be available to all the function it must be declared outside the functions
let map;
function MapInizialized(mapTarget) {
map = new ol.Map({
target: mapTarget
});
return map;
};
I have a WFS layer:
var sourceVector = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return 'http://myserver:8080/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=mygroup:mylayer&' +
'outputFormat=application/json&srsname=EPSG:4326&';
},
});
var layerVector = new ol.layer.Vector({
source: sourceVector
});
I have a interaction select for the features:
var interactionSelect = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#EAEA1A'
})
})
});
And, programmatically I selected one feature:
var listenerKey = sourceVector.on('change', function(e) {
if (sourceVector.getState() == 'ready') {
interactionSelect.getFeatures().clear()
interactionSelect.getFeatures().push(sourceVector.getFeatureById('mylayer.1853'))
map.addInteraction(interactionSelect);
}
});
How can I leave that feature already selected and disable the other features from the same wfs layer? I did this way so far because there's only one feature selected at the beginning, but also I want to let the user modify that feature, but it has to be that particular feature; with this code above, the user gets the feature selected in red but he can select other features
How can I do this?
If you just want to modify a subset of the features of a source, what you can do is set features property instead of source of the modify interaction. In that way you control which are the features that can be modified.
Take a look at the example I made for you. It uses the countries.geojson source of OL. I pick Uruguay as the only feature that can be modified.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/css/ol.css"
type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var modifyFeatures = new ol.Collection();
var source = new ol.source.Vector({
url: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
format: new ol.format.GeoJSON(),
wrapX: false
});
source.on('change', function(e) {
if (source.getState() === 'ready') {
var feature = source.getFeatures().find(f => f.get('name') === 'Uruguay');
modifyFeatures.push(feature);
}
});
var vector = new ol.layer.Vector({
source
});
var select = new ol.interaction.Select({
wrapX: false
});
var modify = new ol.interaction.Modify({
features: modifyFeatures
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]),
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-55.75, -32.85]),
zoom: 6
})
});
</script>
</body>
</html>
I like to use openlayers map with dark and light styles. so how can I change map color or map style?
My friend(Dear morteza) found a simple way that I answered in this post.
my html file is:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 50%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
// function applies greyscale to every pixel in canvas
</script>
</body>
</html>
openlayes shows maps in <canvas>. and <canvas> will be add to <div> container with openlayers library. So add bellow codes to add map and change it's color:
var map = new ol.Map({
target: 'map',//div with map id
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([61.2135, 28.2331]),
zoom: 13
})
});
//change map color
map.on('postcompose',function(e){
document.querySelector('canvas').style.filter="invert(90%)";
});
you can also test other filters
The ol-ext library lets you set filters on openlayers layers. It uses canvas composite operations to achieve the effects.
See code sample online: https://viglino.github.io/ol-ext/examples/filter/map.filter.colorize.html
const tile = new TileLayer({
source: new OSM()
});
tile.on('prerender', (evt) => {
// return
if (evt.context) {
const context = evt.context as CanvasRenderingContext2D;
context.filter = 'grayscale(80%) invert(100%) ';
context.globalCompositeOperation = 'source-over';
}
});
tile.on('postrender', (evt) => {
if (evt.context) {
const context = evt.context as CanvasRenderingContext2D;
context.filter = 'none';
}
});
Before the tile layer rendered set the canvas filter and reset back to none after the rendering, by doing this, the following layers will not be affected in any way, Here is the effect:
the example shows how to bind a button click event to the canvas and then it returns the image Example. How can I change it, that when I use a call openlayers with a permalink, that it automatically returns me that image? I would like to use a simple get request from an c++ programm to get the image. I have the
e.g. "#map=12/1085115.28/6035092.46/0" as parsing parameters. Any ideas?
Thanks and Greetings
Melina
So far I have the parameter parsing
<!DOCTYPE html>
<html>
<head>
<title>OpenStreetMap</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var center = [0,0];
var zoom = 0;
var rotation = 0;
if (window.location.has !== '')
{
var hash = window.location.hash.replace('#map=', '');
var parts = hash.split('/');
console.log (parts);
if (parts.length === 4)
{
zoom = parseInt(parts[0],10);
center = [
parseFloat(parts[1]),
parseFloat(parts[2])
];
rotation = parseFloat(parts[3]);
var rotation = 0;
}
}
var openStreetMapLayer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
'All maps © openStreetMapLayer',
ol.source.OSM.ATTRIBUTION
],
opaque: false,
// url: '<myosmserver>/hot/{z}/{x}/{y}.png'
})
});
var map = new ol.Map({
layers: [
openStreetMapLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
maxZoom: 20,
center: center,
zoom: zoom
})
});
</script>
</body>
</html>
You cannot add a link that will somehow download the map as an image. You will need to render it somewhere.
This is how it works. When Openlayers renders the map, it renders it in a HTML canvas element. The download feature is not a Openlayers feature but a HTML canvas feature. The canvas has API to take a snapshot of the current canvas. You can download it as an image.
You can either render the map in a browser or render it server-side. I have not tried rendering the Openlayers map on the server but it should be possible.
can't seem to make this works
function initialize() {
var myLatlngBDG = new google.maps.LatLng(-6.913947, 107.633825);
var mapOptionsBDG = {
zoom: 5,
center: myLatlngBDG,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapBDG = new google.maps.Map(document.getElementById('map-BDG'), mapOptionsBDG);
var markerBDG = new google.maps.Marker({
position: myLatlngBDG,
map: mapBDG,
title: 'PT. Buana Citra Abadi Bandung'
});
};
google.maps.event.addDomListener(window, 'load', initialize);
the map itself is displayed, but the markes does not appear, and so is the title
according to this tutorial I need to write marker.setMap() to show marker, but as you can see I already write it
if the problem itself is not in the javascript then this might be the problem
the order including the script in HTML :
<html>
<<link rel="stylesheet" type="text/css" href="css/map.css"/>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8k-8ztQ6Vk34XP6OEBMZ7PryuMx8jjX8&callback=initMap"></script>
<script src="js/map.js"></script>
</html>
NEW PROBLEM
why is the map sometimes appears sometimes disappears? I mean when I refresh the page, it disappears, the I refresh several times and it re appears
It seems that everything is fine, take this code as an example and check yours maybe you find any difference
google.maps.event.addDomListener(window, "load", function () {
var myLatlngBDG = new google.maps.LatLng(-6.913947, 107.633825);
var mapOptionsBDG = {
zoom: 5,
center: myLatlngBDG,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapBDG = new google.maps.Map(document.getElementById("map-BDG"), mapOptionsBDG);
var markerBDG = new google.maps.Marker({
position: myLatlngBDG,
map: mapBDG,
title: 'PT. Buana Citra Abadi Bandung'
});
markerBDG.setMap(mapBDG);
});
#map-BDG{
width:500px;
height:300px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Maps Example</h1>
<div id="map-BDG"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8k-8ztQ6Vk34XP6OEBMZ7PryuMx8jjX8"></script>
<script src="script.js"></script>
</body>
</html>