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;
};
Related
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:
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>
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>
I've read in many threads trying to put a simple point (vector layer) at my OpenStreetMap. I'm guessing it is som kind of problem with different projections but i can´t figure it out by myself.
What am i doing wrong in the code below?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://openlayers.org/en/v3.13.1/build/ol.js" type="text/javascript"></script>
<title>Openstret</title>
</head>
<body>
<div id="map">
<script type="text/javascript">
var vectorSource = new ol.source.Vector();
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([0, 0])
});
vectorSource.addFeature(iconFeature);
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var olmap = new ol.Map({
view: new ol.View({
center: [0, 0],
zoom: 2
}),
target: 'map'
});
var bakgrund = new ol.layer.Tile({source: new ol.source.OSM()});
olmap.addLayer(bakgrund,vectorLayer);
</script>
</div>
</body>
</html>
ol.Map.addLayer only takes one parameter. You'll have to add the two layers separately.
Change
olmap.addLayer(bakgrund,vectorLayer);
to
olmap.addLayer(bakgrund);
olmap.addLayer(vectorLayer);
You're also not including the ol.css file anywhere. Make sure you add that in. Here's a working JSFiddle.
Good afternoon,
I am developping a javaFX application and now I want to include on it a map using google maps
I have successfully dispaly the map on javaFX using this code on a html file
<!DOCTYPE html>
<html>
<head>
<title>Java-Buddy: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#mapcanvas { height: 360px; width: 100%}</style>
</head>
<body>
<h1>Java-Buddy: Google Maps</h1>
<div id="mapcanvas">
<script type="text/javascript">
var latlng = new google.maps.LatLng(35.857908, 10.598997);
var Options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), Options);
//var carMarkerImage = new google.maps.MarkerImage('resources/images/car.png');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.857908, 10.598997),
map: map,
draggable: false,
//icon: carMarkerImage,
title: "",
autoPan: true
});
</script>
</div>
</body>
</html>
I want to set the postition of the map using the controller class
I can do it with this event code
public void handle(ActionEvent actionEvent) {
webEngine.executeScript("document.myFunction(longitude, latitude)");}
I am new on javascript, and I want to know how to write the javascript function that allow me to set or to change the current position on the map
Thank you
function myFunction(longitude, latitude){
map.setCenter(new google.maps.LatLng(latitude, longitude));
}