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')
});
Why does my html page with two 'Mobile' pages inside have to be refreshed or have the little edges moved to show my map in this? See my fiddle or the code below:
I have a mobile page document (html) that has two jQuery Mobile pages.
1. The landing page where you are asked to have your position known.
2. The OpenLayers3 map page which takes your position and centers the map on it when opened.
My trouble is: the map will build and it will center on the position but does not render until after I resize refresh the 'map' edges or the browser window. I suspect it has something to do with page events but am not sure.
Is there a property that I am missing?
Andy
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MobilePg</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css"/>
<script type="text/javascript" src=" http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<style>
#myFooterPosit {
color: gray;
}
</style>
<script>
var x, y;
$(document).ready(function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
});
function showPosition(position) {
var positThing = $('#myFooterPosit');
positThing.text('lat: ' + position.coords.latitude + " : " + " long: " + position.coords.longitude);
x = position.coords.latitude;
y = position.coords.longitude;
}
</script>
</head>
<body>
<script>
$(document).on("pagebeforeshow", "#mapPage", function () {
makeMap();
})
</script>
<!-- Landing page Point of Entry-->
<div data-role="page" id="homePage">
<div data-role="header">
Map
<h1>Mbl Map Input</h1>
Search
</div>
<div data-role="main" class="ui-content">
<p>My Content..</p>
</div>
<div data-role="footer">
<h1><span id="myFooterPosit"></span></h1>
</div>
</div>
<!-- Map Page -->
<script>
function makeMap() {
try {
alert(x + " : " + y);
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([y, x], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
} catch (e) {
alert(e.message);
}
}
</script>
<div data-role="page" id="mapPage">
<div data-role="header">
Home
<h1>Map</h1>
</div>
<div data-role="main" class="ui-content">
<div id="map" class="map" style="height:200px;"></div>
</div>
<div data-role="footer">
<h1><span id="myFooterPosit"></h1>
</div>
</div>
</body>
</html
>
You can use the pagecontainer widget's show event:
http://api.jquerymobile.com/pagecontainer/#event-show
Updated FIDDLE
var x, y;
$(document).on("pagecreate","#homePage", function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
});
$(document).on( "pagecontainershow", function( event, ui ) {
if (ui.toPage.prop("id") == "mapPage"){
makeMap();
}
});
function showPosition(position) {
var positThing = $('#myFooterPosit');
positThing.text('lat: ' + position.coords.latitude + " : " + " long: " + position.coords.longitude);
x = position.coords.latitude;
y = position.coords.longitude;
}
function makeMap() {
try {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([y, x], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
} catch (e) {
alert(e.message);
}
}
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.