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

Rename countries example to vector-layer and add mouseover

Browse Source
This commit is contained in:
Tom Payne
2013-11-11 19:16:00 +01:00
parent 8d3811a79c
commit b9614d027d
2 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
examples/countries.html → examples/vector-layer.html
View File

@@ -8,7 +8,7 @@
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Countries example</title> <title>Vector layer example</title>
</head> </head>
<body> <body>
@@ -30,20 +30,26 @@
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span4">
<h4 id="title">Countries example</h4> <h4 id="title">Vector layer example</h4>
<p id="shortdesc">Example of a loading GeoJSON map.</p> <p id="shortdesc">Example of a countries vector layer with country information on hover and country labels at higher zoom levels.</p>
<div id="docs"> <div id="docs">
<p>See the <a href="countries.js" target="_blank">countries.js source</a> to see how this is done.</p> <p>See the <a href="vector-layer.js" target="_blank">vector-layer.js source</a> to see how this is done.</p>
</div>
<div id="tags">vector, geojson, style</div>
</div>
<div class="span4 offset4">
<div id="info" class="alert alert-success">
&nbsp;
</div> </div>
<div id="tags">geojson</div>
</div> </div>
</div> </div>
</div> </div>
<script src="loader.js?id=countries" type="text/javascript"></script> <script src="jquery.min.js" type="text/javascript"></script>
<script src="loader.js?id=vector-layer" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script> <script src="../resources/example-behaviour.js" type="text/javascript"></script>
</body> </body>

22
examples/countries.js → examples/vector-layer.js
View File

@@ -27,12 +27,13 @@ var map = new ol.Map({
}) })
}); });
var vectorSource = new ol.source.Vector();
goog.net.XhrIo.send('data/countries.geojson', function(event) { goog.net.XhrIo.send('data/countries.geojson', function(event) {
var xhrIo = /** @type {goog.net.XhrIo} */ (event.target); var xhrIo = /** @type {goog.net.XhrIo} */ (event.target);
if (xhrIo.isSuccess()) { if (xhrIo.isSuccess()) {
var format = new ol.format.GeoJSON(); var format = new ol.format.GeoJSON();
var object = xhrIo.getResponseJson(); var object = xhrIo.getResponseJson();
var vectorSource = new ol.source.Vector();
goog.asserts.assert(goog.isDefAndNotNull(object)); goog.asserts.assert(goog.isDefAndNotNull(object));
var transformFn = ol.proj.getTransform('EPSG:4326', 'EPSG:3857'); var transformFn = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
format.readObject(object, function(feature) { format.readObject(object, function(feature) {
@@ -54,3 +55,22 @@ goog.net.XhrIo.send('data/countries.geojson', function(event) {
})); }));
} }
}); });
var displayFeatureInfo = function(pixel) {
var coordinate = map.getCoordinateFromPixel(pixel);
var features = vectorSource.getAllFeaturesAtCoordinate(coordinate);
var innerHTML = features.length ?
features[0].getId() + ': ' + features[0].get('name') :
'&nbsp;';
document.getElementById('info').innerHTML = innerHTML;
};
$(map.getViewport()).on('mousemove', function(evt) {
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('singleclick', function(evt) {
var pixel = evt.getPixel();
displayFeatureInfo(pixel);
});