ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding an example that reprojects GeoJSON.

Browse Source
This commit is contained in:
Tim Schaub
2012-10-19 14:16:13 -04:00
parent 4b7a0b43b1
commit 8a8b3076c8
3 changed files with 74 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
examples/geojson-reprojected.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers GeoJSON Reprojected Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.olControlAttribution {
left: 2px;
right: inherit;
bottom: 3px;
line-height: 11px;
}
</style>
</head>
<body>
<h1 id="title">GeoJSON Reprojected</h1>
<div id="tags">
geojson, bing, projection
</div>
<div id="shortdesc">Display GeoJSON data over Bing tiles</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example demonstrates the use of GeoJSON over Bing tiles. The
GeoJSON vector data is in geographic coordinates (EPSG:4326). The Bing
tiles are in a spherical mercator projection (EPSG:900913). By setting
the <code>projection</code> property of the GeoJSON layer to the source
projection (EPSG:4326), the features are properly displayed over the
base layer. In general, the map projection determines how raster or
vector data is displayed. The layer projection corresponds to the
projection of the data source.
<p>See the
<a target="_blank" href="geojson-reprojected.js">geojson-reprojected.js</a>
source for details on how this is done.</p>
</div>
<script src="../lib/OpenLayers.js"></script>
<script src="geojson-reprojected.js"></script>
</body>
</html>

27
examples/geojson-reprojected.js Normal file
View File

@@ -0,0 +1,27 @@
// API key for http://openlayers.org. Please get your own at
// http://bingmapsportal.com/ and use that instead.
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
var hybrid = new OpenLayers.Layer.Bing({
key: apiKey,
type: "AerialWithLabels",
name: "Bing Aerial With Labels"
});
var vector = new OpenLayers.Layer.Vector("GeoJSON", {
projection: "EPSG:4326",
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "geojson-reprojected.json",
format: new OpenLayers.Format.GeoJSON()
})
});
var center = new OpenLayers.LonLat(-109.6, 46.7).transform("EPSG:4326", "EPSG:900913");
var map = new OpenLayers.Map({
div: "map",
layers: [hybrid, vector],
center: center,
zoom: 4
});

1
examples/geojson-reprojected.json Normal file
View File

@@ -0,0 +1 @@
{"type":"FeatureCollection","features":[{"type":"Feature","id":"USA-MT","properties":{"fips":"30","name":"Montana"},"geometry":{"type":"Polygon","coordinates":[[[-104.047534,49.000239],[-104.042057,47.861036],[-104.047534,45.944106],[-104.042057,44.996596],[-104.058488,44.996596],[-105.91517,45.002073],[-109.080842,45.002073],[-111.05254,45.002073],[-111.047063,44.476286],[-111.227803,44.580348],[-111.386634,44.75561],[-111.616665,44.547487],[-111.819312,44.509148],[-111.868605,44.563917],[-112.104113,44.520102],[-112.241036,44.569394],[-112.471068,44.481763],[-112.783254,44.48724],[-112.887315,44.394132],[-113.002331,44.448902],[-113.133778,44.772041],[-113.341901,44.782995],[-113.456917,44.865149],[-113.45144,45.056842],[-113.571933,45.128042],[-113.736241,45.330689],[-113.834826,45.522382],[-113.807441,45.604536],[-113.98818,45.703121],[-114.086765,45.593582],[-114.333228,45.456659],[-114.546828,45.560721],[-114.497536,45.670259],[-114.568736,45.774321],[-114.387997,45.88386],[-114.492059,46.037214],[-114.464674,46.272723],[-114.322274,46.645155],[-114.612552,46.639678],[-114.623506,46.705401],[-114.886399,46.809463],[-114.930214,46.919002],[-115.302646,47.187372],[-115.324554,47.258572],[-115.527201,47.302388],[-115.718894,47.42288],[-115.724371,47.696727],[-116.04751,47.976051],[-116.04751,49.000239],[-111.50165,48.994762],[-109.453274,49.000239],[-104.047534,49.000239]]]}}]}