How to keep data when changing styles in Mapbox - javascript

I have a map of geojson facility points located in Alaska. I want to allow the user to switch between a regular and satellite view. Upon clicking satellite, the loaded geojson data disappears.
I have tried reinstatiating the code, but I realize I do not know how to do that properly. Otherwise, im not sure what the solution is.
I have a working plunker here
https://plnkr.co/edit/FyrsbMRJp6vuI3jRt8XL?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<meta charset='utf-8' />
<title>BR Live Cluster Map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>
<div id='menu'>
<input id='streets-v11' type='radio' name='rtoggle' value='streets' checked='checked'>
<label for='streets'>streets</label>
<input id='satellite-v9' type='radio' name='rtoggle' value='satellite'>
<label for='satellite'>satellite</label>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZHlhdnJvbSIsImEiOiJjamZsZGl0dnIwMHUwMnhvNDB4N2o0cnB6In0.AqxOgFJXuLgFMiwkPutaLA';
if (!mapboxgl.supported()) {
alert('Your browser does not support Mapbox GL');
} else {
var map = new mapboxgl.Map({
container: 'map',
//style: 'mapbox://styles/dyavrom/cji1rn1tz00x02sqtervd1sq0',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-153.59179687498357, 65.66995747013945],
zoom: 3.5
});
}
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle('mapbox://styles/mapbox/' + layerId);
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
map.on('load', function() {
// Add a new source from our GeoJSON data and set the
// 'cluster' option to true. GL-JS will add the point_count property to your source data.
map.addSource("BRdata", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ BRdata
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: "data.geojson",
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
id: "clusters",
type: "circle",
source: "BRdata",
filter: ["has", "point_count"],
paint: {
// Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
// with three steps to implement three types of circles:
// * Blue, 20px circles when point count is less than 100
// * Yellow, 30px circles when point count is between 100 and 750
// * Pink, 40px circles when point count is greater than or equal to 750
"circle-color": [
"step",
["get", "point_count"],
"#51bbd6",
100,
"#f1f075",
2000,
"#f28cb1"
],
"circle-radius": [
"step",
["get", "point_count"],
20,
100,
30,
750,
40
]
}
});
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "BRdata",
filter: ["has", "point_count"],
layout: {
"text-field": "{point_count_abbreviated}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 12
}
});
map.addLayer({
id: "unclustered-point",
type: "circle",
source: "BRdata",
filter: ["!", ["has", "point_count"]],
paint: {
"circle-color": "#11b4da",
"circle-radius": 4,
"circle-stroke-width": 1,
"circle-stroke-color": "#fff"
}
});
</script>
</body>
</html>
Hoping that when you click satellite, the new view enters as well as the geojson.

Related

OpenLayers Large static image does not appear in the mobile browser

I am using the code below OpenLayers to view a static image with the following dimensions 43000 px x 4000px, 10mb. In the browser on the computer the image appears normally, but the mobile browser does not appear the image. Could you tell me what I should do to fix this problem.
<html>
<head>
<meta charset="utf-8">
<title>Sistema de Solicitação de Acesso (SSA) - Alternativo</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>
<style>
.map {
width: auto;
height: 500px;
border: 5px outset black;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var extent = [0, 0, 50000, 1900];
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: 'Criado por: Givanildo Silva de Amorim',
url: 'https://i.ibb.co/GHCdx84/Linhas-7-8-9-10-11-12-13.png',
projection: projection,
imageExtent: extent
})
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: [1600, 900],
zoom: 7,
maxZoom: 14
})
});
</script>
</body>
</html

i want to remove the coordinates and show the information about the place data

i want to remove the coordinates and show the information about the place data
AsslamOAlikum. Hi i create openlayer map with the help of geoserver. My map application in base on javascript and openlayers (OSM, WMS). In my application i use multiple layers, mouse handling & positioning and popup function. But i want to some changing in my popup function. In my popup function when i click the mouse button then show the coordinates of 'E,W,Degree' ETC. I want to change to coordinate replace into the get featured information about the place. HERE is my code......
<!DOCTYPE html>
<html>
<head>
<title>Overlay</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/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.4.2/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#marker {
width: 20px;
height: 20px;
border: 1px solid #088;
border-radius: 10px;
background-color: #0FF;
opacity: 0.5;
}
#vienna {
text-decoration: none;
color: white;
font-size: 11pt;
font-weight: bold;
text-shadow: black 0.1em 0.1em 0.2em;
}
.popover-content {
min-width: 180px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div style="display: none;">
<!-- Popup -->
<div id="popup" title="Welcome to OpenLayers"></div>
</div>
<div id="nodelist">
<em>Click on the map to get feature info</em>
</div>
<div id="mouse-position"></div>
<form>
<label>Projection </label>
<select id="projection">
<option value="EPSG:4326">EPSG:4326</option>
</select>
<label>Precision </label>
<input id="precision" type="number" min="0" max="12" value="4"/>
</form>
<script>
//MOUSE HANDLING
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'),
undefinedHTML: ' '
});
var LonLat = [69.3451, 30.3753];
var pos = ol.proj.fromLonLat(LonLat);
var layer =[
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
//extent: [68.107725, 23.744288, 73.622861, 36.878836],
source: new ol.source.TileWMS({
url: 'http://gulraiz-pc:8080/geoserver/test/wms',
params: {LAYERS: 'test:pak_ad3_gaul_ply_15072010', 'TILED': true},
serverType: 'geoserver'
})
}),
new ol.layer.Tile({
//extent: [68.107725, 23.744288, 73.622861, 36.878836],
source: new ol.source.TileWMS({
url: 'http://gulraiz-pc:8080/geoserver/test/wms',
params: {'LAYERS': ' test:longlist', 'TILED': true},
serverType: 'geoserver'
})
})
];
var map = new ol.Map({
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
// collapsible: false
})
}).extend([mousePositionControl]),
layers: layer,
target: 'map',
view: new ol.View({
center: pos,
zoom: 5
})
});
// Popup showing the position the user clicked
var popup = new ol.Overlay({
element: document.getElementById('popup')
});
map.addOverlay(popup);
map.on('click', function(evt) {
var element = popup.getElement();
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:4326', 'EPSG:4326'));
$(element).popover('destroy');
popup.setPosition(coordinate);
// the keys are quoted to prevent renaming in ADVANCED mode.
$(element).popover({
'placement': 'top',
'animation': false,
'html': true,
'content': '<p>The location you clicked was:</p><code>' + hdms + '</code>'
});
$(element).popover('show');
});
</script>
</body>
</html>
Don't quite understand what you are asking for. Going to assume that you want the coordinates of the feature and not the click.
forEachFeatureAtPixel(pixel, (f) => {
coordinate = f.getGeometry().getCoordinates();
}

kendo diagram add circle on click

I am trying to draw circle diagram on html button click (would prefer it on kendo diagram toolbar which is not working too), the addShape method seems to be working fine without any errors, but the diagram doesn't show up on the page.
However the circle is drawn with no issues on initial kendo diagram load.
$(document).ready(createDiagram);
function createDiagram() {
$("#diagram").kendoDiagram({
shapes: [{
type: 'circle',
fill: {
color: 'blue'
}
},
{
type: 'rectangle'
}
],
shapeDefaults: {
editable: {
tools: ["createShape", "delete", "rotateClockwise", "rotateAnticlockwise"]
}
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 1
},
type: "polyline",
startCap: "FilledCircle",
endCap: "ArrowEnd"
},
editable: {
tools: ["createShape", "delete", "rotateClockwise", "rotateAnticlockwise"]
}
});
$("#diagram").getKendoDiagram().layout();
}
function drawCircle() {
var diagram = $("#diagram").getKendoDiagram();
/*diagram.addShape(new kendo.dataviz.diagram.Point(100, 220), {
background: "red"
});*/
diagram.addShape(new kendo.dataviz.diagram.Circle({
radius: 600,
stroke: {
width: 5,
color: "#586477"
},
fill: "#e8eff7"
}));
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<base href="http://demos.telerik.com/kendo-ui/diagram/events">
<input type="button" class="btn btn-warning" value="Circle" onclick="drawCircle();" />
<div id="diagram"></div>
I think the problem might be occurring as you have might have put your JS code after your HTML. i.e after the </body> tag ends. This might be leading to problems.
In this working DEMO, I have placed all the JS code into the <head> tag and now the function dramCircle() is being called successfully.

add data labels to google chart with no set columns

I have a chart that allows the user to select an option to compare to a statewide average. The chart works fine until I use the stringify method to create annotations - the number of columns varies based on the selection. What is your advice on how to retain this functionality, and still have data labels?
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table', 'corechart']});
</script>
<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize() {drawVisualizations();
function drawVisualizations() {drawChart(); drawTable();} //drawC();}
//main chart
function drawChart() {
var dataCap = document.getElementById("selected2").value;
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:A5,E1:E5,' + dataCap); query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var options = {
'title':'College Readiness',
'subTitle':'Test',
'titleTextStyle': {fontSize: '24', color: 'teal', fontName: '"Arial"', isHTML: true},
hAxis: {'title': 'Percent of Students Ready', 'textStyle': {color: 'gray', fontSize: '9'}, 'minValue': '0', 'maxValue':'1','format': 'percent'},
vAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}, 'minValue': '0', 'maxValue':'1'},
legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: '16', fontName: "'Arial'"}},
tooltip: {
textStyle: {fontName: "'Arial'"}},
series: {
0: {pointsVisible: true, color: '#003366'},
1: {pointsVisible: true, color: '#cc0000'}
},
annotations: {
textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
stem:{color: 'none'}
}};
function handleQueryResponse(response) {var data = response.getDataTable()};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));chart.draw(data, options);}
//current stats sidebar
function drawTable() {
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A:E');
query2.send(handleQueryResponse2);
}
function handleQueryResponse2(response) {
var data2 = response.getDataTable();
var options2 = {'sort': 'disable'};
var chart2 = new google.visualization.Table(document.getElementById('data_div'));
chart2.draw(data2, options2);}
}
</script>
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;}
html, body {height: 100%;}
body {text-align: center;}
#chart_div {width: 900px; margin: 20px auto; height: 600px;}
</style>
</head>
<body>
<label for="selected2">You are viewing:</label>
<select id="selected2" onChange="initialize()">
<option selected value="">Statewide average only</option>
<option value="B1:B5">Fake University 1 compared to statewide average</option>
<option value="C1:C5">Fake University 2 compared to statewide average</option>
<option value="D1:D5">Fake University 3 compared to statewide average</option>
</select>
<input onClick="window.open('datatest21-data.html')" type="button" value="Download the complete data set" />
<div id="chart_div"></div>
<div id="data_div"></div>
</body>
</html>
Here is the stringify method I was using, but it messes up the above code:
//
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, { calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"},
2,{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" }]);
//
It could be that I'm doing this all wrong - advice, appreciated. This type of coding is new to me.
I've got it working now with set columns, but the dropdown to change the value no longer works. My guess is that once the graph shifts into DataView (rather than DataTable), it becomes "read-only" and the interactivity is lost. (This example is using another chart.) I need a way of redrawing the table when another option is selected.
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table', 'corechart']});
</script>
<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize() {drawVisualizations(); function drawVisualizations() {drawChart(); drawTable();} //drawC();}
//main chart
function drawChart() {
var dataCap = document.getElementById("selected2").value;
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Enrollment&range=' + dataCap); query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
//
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,
{calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation"}
]);
//
var options = {
height: 500,
chartArea: {'left': '5%'},
isStacked: true,
hAxis: {'textStyle': {'fontSize':11}},
vAxis: {'textStyle': {'fontSize':11}, 'maxValue':110000},
legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: 11, fontName: '"Arial"'}},
tooltip: {
textStyle: {fontName: "'Arial'"}},
series: {
0: {color: 'navy'},
1: {color: 'teal'}
},
annotations: {
textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
alwaysOutside: true,
isHTML: true,
stemColor: 'none',
text: 'test'
}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));chart.draw(view, options);}
//current stats sidebar
function drawTable() {
var dataCap2 = document.getElementById("selected3").value;
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?' + dataCap2);
query2.send(handleQueryResponse2);
}
function handleQueryResponse2(response) {
var data2 = response.getDataTable();
var options2 = {
height: 300,
chartArea: {'left': '5%'},
hAxis: {'textStyle': {'fontSize':11}},
vAxis: {'minValue': '0', 'maxValue':'1', 'format':'percent', 'textStyle': {'fontSize':11}},
legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: 11, fontName: '"Arial"'}},
tooltip: {
textStyle: {fontName: "'Arial'"}},
series: {
//0: {pointsVisible: true, color: '#003366', pointSize: 6},
0: {pointsVisible: true, color: '#cc0000', pointSize: 6}
},
annotations: {
textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
stem:{color: 'none'}
}
};
var chart2 = new google.visualization.LineChart(document.getElementById('data_div'));
chart2.draw(data2, options2);}
}
</script>
<style type="text/css">
body {text-align: center; font-family: Arial, Helvetica, sans-serif;}
#wrapper {width: 75%; margin: 0 auto; text-align: left;}
#current {float: right; width: 28%; background-color: #ececec; padding: 0 1em; font-size: 80%; margin-left: 5%;}
h2 {margin-top: 2em;}
dt {font-weight: bold; margin-top: .5em;}
dd {padding-top: .25em; margin-top: .25em;}
dd.total {border-top: 1px solid #000;}
#chart_div, #data_div {width: 75%;}
</style>
</head>
<body>
<div id="wrapper">
<h1>Student Enrollment in State Universities and Community Colleges</h1>
<h3>Trend Data</h3>
<form>
<label for="selected2">You are viewing:</label>
<select id="selected2" onchange="initialize()">
<option selected value="A1:E8">All state universities</option>
<option value="F1:I8">Fake University 1</option>
</select>
<div id="chart_div"></div>
<input onClick="window.open('')" type="button" value="Download the complete data set" />
</form>
<h2>Community and Technical Colleges</h2>
<h3>Trend Data</h3>
<form>
<label for="selected3">You are viewing:</label>
<select id="selected3" onChange="initialize()">
<option selected value="sheet=GraduationRates-3Yr&range=A1:B11">3-Year graduation rate</option>
<option value="sheet=GraduationRates-2Yr&range=A1:B11">2-Year graduation rate</option>
</select>
<div id="data_div"></div>
<input onClick="window.open('')" type="button" value="Download the complete data set" />
</form>
</div>
</body>
</html>
[/code]

How to reproject layers (using GeoServer and OpenLayers) in order to overlay on the google maps

I am writing a code using OpenLayers. In this code, I want to display different layers in different zoom levels. Up until here, everything works. my problem began when I tried to add Google Maps as baselayers. My layers' projection system is not consistent with Google layers, so they should be reprojected. I tried to use Proj4js.transform method but it didn't work. My layers are in EPSG:3006(Sweden) and Google layers are in EPSG:900913. The following code results in a projected layer shifted to right. It means that the re-projection did not work properly.
Please let me know what is wrong with my code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OpenLayers map preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Import OL CSS, auto import does not work with our minified OL.js build -->
<link rel="stylesheet" type="text/css" href="http://gisl.nateko.lu.se:8088/geoserver/openlayers/theme/default/style.css">
<!-- add here more css definition libraries-->
<!-- Basic CSS definitions -->
<style type="text/css">
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
/* Toolbar styles */
#toolbar {
position: relative;
padding-bottom: 0.5em;
display: none;
}
/* The map and the location bar */
#map {
clear: both;
position: relative;
width: 337px;
height: 512px;
border: 2px solid black;
}
#wrapper {
width: 337px;
height: 50px;
}
#location {
float: right;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
color: #483D8B;
background-color: white;
}
#scale {
float:left;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
color: #483D8B;
background-color: white;
}
#nodelist{
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
color: #000000;
font-style: normal;
background-color: white;
}
</style>
<!-- Import OpenLayers, reduced, wms read only version -->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- add here more js libraries -->
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src ='proj4js/lib/proj4js-combined.js'></script>
<script src ='proj4js/lib/deprecated.js'></script>
<script defer="defer" type="text/javascript">
var map;
var untiled;
var tiled;
var pureCoverage = false;
// pink tile avoidance
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
// make OL compute scale according to WMS spec
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
function init(){
format = 'image/png';
var options = {
controls: [],
projection: new OpenLayers.Projection('EPSG:900916'),
displayProjection: new OpenLayers.Projection('EPSG:4326'),
maxExtent: new OpenLayers.Bounds(
-20037508, -20037508,20037508, 20037508.34),
//modify parameter
maxResolution: 5000,
//modify parameter
//setting zoom levels
numZoomLevels:15,
units: 'm',
};
map = new OpenLayers.Map('map', options);
// setup tiled layer
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN, numZoomLevels: 15, sphericalMercator:true}
// used to be {type: G_PHYSICAL_MAP}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 15, sphericalMercator:true}
// default type, no change needed here
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 15, sphericalMercator:true}
// used to be {type: G_HYBRID_MAP, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE,
numZoomLevels: 15,
sphericalMercator:true
}
// used to be {type: G_SATELLITE_MAP, numZoomLevels: 22}
);
//add controls here
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.PanZoomBar());
zf= new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to max extent"});
// create a panel to locate the zoom extent button & add the panel to the map
// use the code to create the button from ZoomToMaxExtent.js
var panel= new OpenLayers.Control.Panel({defaultControl:zf});
panel.addControls([zf]);
map.addControl(panel);
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
//end add controls
layer2 = new OpenLayers.Layer.WMS(
"Gr2LundKom:districts","http://gisl.nateko.lu.se:8080/geoserver/wms",
{
projection: map.displayProjection,
height: '600',
width: '800',
layers: 'Gr2LundKom:districts',
styles: '',
srs:'EPSG:3006',
format: format,
tiled: 'true',
transparent: 'true',
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: false,
reproject: true
});
Proj4js.defs["EPSG:3006"] = "+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
var src = new OpenLayers.Projection('EPSG:3006');
var dst = new OpenLayers.Projection('EPSG:4326');
Proj4js.transform(src, dst, layer2);
layer2.projection=dst;
layer3 = new OpenLayers.Layer.WMS(
"Gr2LundKom:public_buildings,other_buildings,roads_all,Public_Libraries",
"http://gisl.nateko.lu.se:8080/geoserver/wms",
{
projection: map.displayProjection,
height: '600',
width: '800',
layers: "Gr2LundKom:public_buildings,other_buildings,roads_all,Public_Libraries",
transparent: "true",
styles: '',
srs:'EPSG:3006',
format: format,
tiled: 'true',
transparent: 'true'
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: false,
reproject: true
});
Proj4js.transform(src, dst, layer3);
layer3.projection=dst;
map.addLayers([gsat,gphy,gmap,ghyb,layer2]);
//map.setCenter(new OpenLayers.LonLat(1335967.698, 6179172.362), 22);
map.zoomToExtent(new OpenLayers.Bounds(
-20037508, -20037508,20037508, 20037508.34));
// change the dislapy layers with the chandge of scale
map.events.register('zoomend', this, function (event) {
var zLevel = map.getZoom();
if( zLevel == 1 || zLevel == 2 || zLevel == 3 )
{
layer3.setVisibility(false);
layer2.setVisibility(true);
}
if( zLevel == 4 || zLevel == 5 || zLevel == 6)
{
layer2.setVisibility(false);
layer3.setVisibility(true);
map.addLayers([gsat,gphy,gmap,ghyb,layer3]);
}
});
}
</script>
</head>
<body onload="init()">
Map viewer using Geoserver and MapLayers
<br><br>
<div id="map">
</div>
<br>
<div id="wrapper">
<div id="location">location</div>
<br>
<div id="scale">
</div>
</div>
<br>
<div id="nodelist" >
--> Click on the map to get feature info
</div>
</body>
Well, I know it is a workaround, but I see you use geoserver, so you could convert your layers in geoserver into google mercator (you should use the code EPSG:3857, as I recall EPSG:900916 didn't work for me). I struggled with this problem too, and that was the only thing which helped me.
This problem comes however only if you use wms, wfs layers you could transform easily.
And also I think that you should not try to visualize everything in EPSG:4326 but in google mercator instead.
I hope this helps.
I think you have a typo here, it should be EPSG:900913 instead of EPSG:900916, because it's the representation of google with numbers (900913)

Categories

Resources