openlayer geometric points won't show - openlayers-3

I am new to openlayers and a beginner to javascript, but I have tried for 3 days and nights now. My code seems okay but there is something I am missing out and just can’t figure it out
I have this problem, I can’t find my geometric points on my map.
My code goes thus:
//html
<!doctype html>
<head>
<title> Me OpenStreetMap </title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/ol3/css/samples.css" type="text/css" />
</head>
<body>
<div id="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
// style for geometric layer
var meStyle = new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({
color: '#ff9900',
opacity: 1
}),
stroke: new ol.style.Stroke({
color: '#ffcc00',
opacity: 1
})
});
// geometric layer
var geoLayer = new ol.layer.Vector({
source : new ol.source.Vector({
projection : 'EPSG:3857',
url : '../data/json.json',
format: new ol.format.GeoJSON(),
style: meStyle
})
});
// create layer
var osmLayer = new ol.layer.Tile({
source : new ol.source.OSM()
});
// create view
var yaounde = new ol.proj.transform([11.5653, 3.86617],
'EPSG:4326', 'EPSG:3857'
);
var view = new ol.View({
center: yaounde,
zoom: 15
});
// create map
var map = new ol.Map({
target: 'map'
});
map.addLayer(osmLayer, geoLayer);
map.setView(view);
</script>
</body>
</html>
//geojson
{"type":"FeatureCollection",
"features":
[
{"type":"Feature","properties":{"Name":"","Description":""},"geometry":{"type":"Point","coordinates":[0.0,0.0]}},
{"type":"Feature","properties":{"Name":"1","Description":""},"geometry":{"type":"Point","coordinates":[11.50728,3.87471,0.0]}},
{"type":"Feature","properties":{"Name":"2","Description":""},"geometry":{"type":"Point","coordinates":[11.5072,3.8759,0.0]}},
{"type":"Feature","properties":{"Name":"3","Description":""},"geometry":{"type":"Point","coordinates":[11.5032,3.87556,0.0]}},
{"type":"Feature","properties":{"Name":"4","Description":""},"geometry":{"type":"Point","coordinates":[11.50291,3.87552,0.0]}},
{"type":"Feature","properties":{"Name":"5","Description":""},"geometry":{"type":"Point","coordinates":[11.50278,3.87573,0.0]}},
{"type":"Feature","properties":{"Name":"6","Description":""},"geometry":{"type":"Point","coordinates":[11.50316,3.87621,0.0]}},
{"type":"Feature","properties":{"Name":"7","Description":""},"geometry":{"type":"Point","coordinates":[11.50347,3.87611,0.0]}},
{"type":"Feature","properties":{"Name":"8","Description":""},"geometry":{"type":"Point","coordinates":[11.50314,3.8763,0.0]}},
{"type":"Feature","properties":{"Name":"9","Description":""},"geometry":{"type":"Point","coordinates":[11.50325,3.87652,0.0]}},
{"type":"Feature","properties":{"Name":"10","Description":""},"geometry":{"type":"Point","coordinates":[11.50356,3.87558,0.0]}},
{"type":"Feature","properties":{"Name":"11","Description":""},"geometry":{"type":"Point","coordinates":[11.5033,3.87564,0.0]}},
{"type":"Feature","properties":{"Name":"12","Description":""},"geometry":{"type":"Point","coordinates":[11.50397,3.87586,0.0]}},
{"type":"Feature","properties":{"Name":"13","Description":""},"geometry":{"type":"Point","coordinates":[11.50299,3.87641,0.0]}},
{"type":"Feature","properties":{"Name":"14","Description":""},"geometry":{"type":"Point","coordinates":[11.50279,3.8771,0.0]}},
{"type":"Feature","properties":{"Name":"15","Description":""},"geometry":{"type":"Point","coordinates":[11.50269,3.87723,0.0]}},
{"type":"Feature","properties":{"Name":"16","Description":""},"geometry":{"type":"Point","coordinates":[11.50258,3.87722,0.0]}},
{"type":"Feature","properties":{"Name":"17","Description":""},"geometry":{"type":"Point","coordinates":[11.49122,3.8738,0.0]}},
{"type":"Feature","properties":{"Name":"18","Description":""},"geometry":{"type":"Point","coordinates":[11.48567,3.87447,0.0]}},
{"type":"Feature","properties":{"Name":"19","Description":""},"geometry":{"type":"Point","coordinates":[11.48548,3.88107,0.0]}},
{"type":"Feature","properties":{"Name":"20","Description":""},"geometry":{"type":"Point","coordinates":[11.48526,3.8812,0.0]}},
{"type":"Feature","properties":{"Name":"21","Description":""},"geometry":{"type":"Point","coordinates":[11.48614,3.88044,0.0]}},
{"type":"Feature","properties":{"Name":"22","Description":""},"geometry":{"type":"Point","coordinates":[11.48638,3.88033,0.0]}},
{"type":"Feature","properties":{"Name":"23","Description":""},"geometry":{"type":"Point","coordinates":[11.48641,3.88053,0.0]}},
{"type":"Feature","properties":{"Name":"24","Description":""},"geometry":{"type":"Point","coordinates":[11.4868,3.88029,0.0]}},
{"type":"Feature","properties":{"Name":"25","Description":""},"geometry":{"type":"Point","coordinates":[11.48772,3.87994,0.0]}},
{"type":"Feature","properties":{"Name":"26","Description":""},"geometry":{"type":"Point","coordinates":[11.4887,3.88057,0.0]}},
{"type":"Feature","properties":{"Name":"27","Description":""},"geometry":{"type":"Point","coordinates":[11.48869,3.88057,0.0]}},
{"type":"Feature","properties":{"Name":"28","Description":""},"geometry":{"type":"Point","coordinates":[11.48868,3.8807,0.0]}},
{"type":"Feature","properties":{"Name":"29","Description":""},"geometry":{"type":"Point","coordinates":[11.4888,3.88071,0.0]}},
{"type":"Feature","properties":{"Name":"30","Description":""},"geometry":{"type":"Point","coordinates":[11.49206,3.8775,0.0]}},
{"type":"Feature","properties":{"Name":"31","Description":""},"geometry":{"type":"Point","coordinates":[11.49251,3.87748,0.0]}},
{"type":"Feature","properties":{"Name":"32","Description":""},"geometry":{"type":"Point","coordinates":[11.4923,3.87783,0.0]}},
{"type":"Feature","properties":{"Name":"33","Description":""},"geometry":{"type":"Point","coordinates":[11.49273,3.87822,0.0]}}
]
}
The OpenStreet map appears by I can’t find the points


It is very simple to solve:
map.addLayer(osmLayer);
map.addLayer(geoLayer);
The addLayer method accepts a layer, only one. A working demo with your code.

Related

Vector tiles:GetTile WMTS ol.format.MVT() with Openalyer v5.3.0 From Geoserver

I have layers on Geoserver(2.13.0) that configure with MSSQL DataStore.I install vector tile extension for the same version. After installed, while previewing with TileLayers pbf by selection from drop down result is displaying.
http://localhost:8080/geoserver/gwc/demo/mystate:State?gridSet=EPSG:900913&format=application/x-protobuf;type=mapbox-vector
And also while a request from OpenLayers client same result is coming.
<html>
<head>
<title>Vector tiles</title>
<script src="./js/build-ol.js"></script>
<link rel="stylesheet" href="./css/ol.css">
<style>
html,
body {
font-family: sans-serif;
width: 100%;
}
.map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Mapbox Protobuf - vector tiles</h3>
<div id="map" class="map"></div>
<script>
var gridsetName = 'EPSG:900913';
var gridNames = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18', 'EPSG:900913:19', 'EPSG:900913:20'];
var baseUrl = 'http://localhost:8080/geoserver/gwc/service/wmts';
var style = 'StateStyle';
var format = 'application/x-protobuf;type=mapbox-vector';
var infoFormat = 'text/html';
var layerName = 'myState:State';
var projection = new ol.proj.Projection({
code: 'EPSG:900913',
units: 'm',
axisOrientation: 'neu'
});
var resolutions = [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.29858214169740677, 0.14929107084870338];
params = {
'REQUEST': 'GetTile',
'SERVICE': 'WMTS',
'VERSION': '1.0.0',
'LAYER': layerName,
'STYLE': style,
'TILEMATRIX': gridsetName + ':{z}',
'TILEMATRIXSET': gridsetName,
'FORMAT': format,
'TILECOL': '{x}',
'TILEROW': '{y}'
};
function constructSource() {
var url = baseUrl + '?'
for (var param in params) {
url = url + param + '=' + params[param] + '&';
}
url = url.slice(0, -1);
var source = new ol.source.VectorTile({
url: url,
format: new ol.format.MVT({}),
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
tileSize: [256, 256],
origin: [-2.003750834E7, 2.003750834E7],
resolutions: resolutions,
matrixIds: gridNames
}),
wrapX: true,
});
return source;
}
var layer = new ol.layer.VectorTile({
source: constructSource()
});
var view = new ol.View({
center: [0, 0],
zoom: 2,
projection: projection,
extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34]
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: view
});
map.getView().fit([-13603589.920418553, 6450443.998733485, -12407892.278044553, 7757990.05940472], map.getSize());
</script>
</body>
</html>
But in the same example, I want to apply style for the wmts using GetTile.
I tried according to documentation
Below is the code not working:
<html>
<head>
<title>Vector tiles</title>
<script src="ol.js"></script>
<link rel="stylesheet" href="ol.css">
<style>
html, body {
font-family: sans-serif;
width: 100%;
}
.map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Mapbox Protobuf - vector tiles</h3>
<div id="map" class="map"></div>
<script>
var style_simple = new ol.style.Style({
fill: new ol.style.Fill({
color: '#ADD8E6'
}),
stroke: new ol.style.Stroke({
color: '#880000',
width: 1
})
});
function simpleStyle(feature) {
return style_simple;
}
var layer = 'myState:State';
var projection_epsg_no = '900913';
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
}),
layers: [new ol.layer.VectorTile({
style:simpleStyle,
source: new ol.source.VectorTile({
tilePixelRatio: 1, // oversampling when > 1
tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
format: new ol.format.MVT(),
url: 'http://localhost:8080/geoserver/gwc/service/wtms/1.0.0/' + layer +
'#EPSG%3A'+projection_epsg_no+'#pbf/{z}/{x}/{-y}.pbf'
})
})]
});
</script>
</body>
</html>
Could you suggest me how I can apply my custom styles and getTile from GeoServer with ol.format.MVT()?

I think you are facing a projection problem. I also have faced the same problems. I solved it by changing views.
You can try this:
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([89.5403, 22.8456]), ## change the long/lat values based on your data
zoom: 2
}),

Get Features in heatmap openlayers3

I want to get all features when I click on heat map in openlayers 3...It is possible or not? How to count the features in heat map and give heat map total count features label? thanks

Openlayers3 can do this easily,You can use getFeatures() to get all the features.
var features = heatlayer.getSource().getFeatures()
alert('count: '+features.length);
This method returns an array containing all the features,so you can use length to count.
<!DOCTYPE html>
<html>
<head>
<title>heatlayer count 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 heatlayer = new ol.layer.Heatmap({
source: new ol.source.Vector(),
blur: parseInt(14),
radius: parseInt(8)
});
var adddata = [[104.807799,30.232233],[106.803599,31.233225]];
//addfeature
for(var i = 0;i < adddata.length ; i++){
var feature = new ol.Feature({
geometry:new ol.geom.Point([adddata[i][0],adddata[i][1]])
});
heatlayer.getSource().addFeature(feature);
}
var map = new ol.Map({
layers: [raster,heatlayer],
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
})
});
map.on('click', function(event){
var features = heatlayer.getSource().getFeatures()
alert('count: '+features.length);
});
</script>
</body>
</html>

Image layer with *locally* stored image

I would like to add an image layer to a map using OpenLayers 3. The image file is stored locally, not on the web. The OL 2 documentation says that the image must be accessible on the web: http://dev.openlayers.org/docs/files/OpenLayers/Layer/Image-js.html, however, it seems to be possible to use a local basemap: Using openlayers with a local basemap?. There is no HTTP server running on the local system.
The starting point is the static image example on the OL website: http://openlayers.org/en/v3.12.1/examples/static-image.html
<!DOCTYPE html>
<html>
<head>
<title>Static Image</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
// Map views always need a projection. Here we just want to map image
// coordinates directly to map coordinates, so we create a projection that uses
// the image extent in pixels.
var extent = [0, 0, 1024, 968];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
attributions: [
new ol.Attribution({
html: '© xkcd'
})
],
url: 'http://imgs.xkcd.com/comics/online_communities.png',
projection: projection,
imageExtent: extent
})
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2,
maxZoom: 8
})
});
</script>
</body>
</html>
Here, http://imgs.xkcd.com/comics/online_communities.png should be replaced by the path to a local file. file://... does not work for me. The OS is Windows 7.

Openlayers 3 WMTS

I am having an issue where I am trying to load a WMTS feed using Openlayers and seem not to be getting good results. For ArcGis services this seems to go through but not GeoServer's WMTS services. The code is as shown below. I keep getting a javascript error
TypeError: Argument 2 of CanvasRenderingContext2D.putImageData is not a finite floating-point value.
The code I am using is shown below. Regardless of changing the projection the error remains the same. Please advise. Raw Gist here
<!DOCTYPE html>
<html>
<head>
<title>WMTS example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.8.2/build/ol.js"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script>
var projection = ol.proj.get('EPSG:4326');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(21);
var matrixIds = new Array(21);
for (var i=0; i<21; ++i) {
matrixIds[i] = "EPSG:4326:" + i;
}
var attribution = new ol.Attribution({
html: 'Tiles © <a href="http://services.arcgisonline.com/arcgis/rest/' +
'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
opacity: 0.7
}),
new ol.layer.Tile({
opacity: 0.7,
source: new ol.source.WMTS({
attributions: [attribution],
url: 'http://suite.opengeo.org/geoserver/gwc/service/wmts',
layer: 'opengeo:countries',
matrixSet: 'ESPG:4326',
format: 'image/png',
style : 'default',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [-13677832, 5213272],
//center: [-11158582, 4813697],
zoom: 1
})
});
</script>
</body>
</html>

Your resolutions array is just filled with undefineds, right? You should fill it with you desired resolutions.

You should to init your resolution array like this:
for (var z = 0; z < 21; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = "EPSG:4326:" + z;;
}
Did you set map's projection to ol.proj.get('EPSG:4326')?
var view = new ol.View({
center: [0, 0],
zoom: 1,
projection: ol.proj.get('EPSG:4326')
});

OpenLayers 3 WMS Layer - Misplaced tiles in EPSG:2180 projection

I'm trying to display map of Poland using OpenLayers 3. I need it to be in projection EPSG:2180. Ewerything is ok until I switch the projection.
This works fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>
<script src="proj4js/proj4-src.js" type="text/javascript"></script>
<script>
proj4.defs('EPSG:2180', "+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +no_defs");
function init()
{
var p = ol.proj.get('EPSG:3857');
var mapTiles = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://mapy.geoportal.gov.pl/wss/service/img/guest/ORTO/MapServer/WMSServer',
params: {
'LAYERS': 'Raster'
}
}),
isBaseLayer: true,
projection: p
})
],
view: new ol.View({
center: ol.proj.transform([19, 52], 'EPSG:4326', 'EPSG:3857'),
zoom: 6,
projection: p
})
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
When i switch projection to EPSG:2180 tiles are misplaced.
Code with EPSG:2180
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>
<script src="proj4js/proj4-src.js" type="text/javascript"></script>
<script>
proj4.defs('EPSG:2180', "+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +no_defs");
function init()
{
var p = ol.proj.get('EPSG:2180');
var mapTiles = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://mapy.geoportal.gov.pl/wss/service/img/guest/ORTO/MapServer/WMSServer',
params: {
'LAYERS': 'Raster',
'CRS': 'EPSG:2180'
}
}),
isBaseLayer: true,
projection: p
})
],
view: new ol.View({
center: ol.proj.transform([19, 52], 'EPSG:4326', 'EPSG:2180'),
zoom: 6,
projection: p
})
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
Any idea what is the problem?
https://jsfiddle.net/b2L6qppd/

I have add one element - it prevent of axes problem.
params: {
'LAYERS': 'Raster',
'CRS': 'EPSG:2180',
'VERSION': '1.1.1'
}
try with this: jsfiddle.net/b2L6qppd/2/

Resources