Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Created April 24, 2017 21:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/b0a59b6796bcd23d8ae3abf8c9347023 to your computer and use it in GitHub Desktop.
Save ThomasG77/b0a59b6796bcd23d8ae3abf8c9347023 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Map with GeoJSON markers
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Simple Map with GeoJSON markers</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
/* configure the size of the map */
width: 100%;
height: 100%;
}
.marker-properties {
border-collapse: collapse;
margin: 0;
font-size: 11px;
border: 1px solid #eee;
}
.marker-properties tr:nth-child(2n) th, .marker-properties tr:nth-child(2n) td {
background-color: #f7f7f7;
}
.marker-properties th {
padding: 5px 10px;
white-space: nowrap;
border: 1px solid #eee;
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
</style>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
// This illustrates a custom tiles source but for using
// official OpenStreetMap server new ol.source.OSM()
// instead of new ol.source.XYZ(...) is enough
source: new ol.source.XYZ({
attributions: [
ol.source.OSM.ATTRIBUTION,
'Tiles courtesy of ' +
'<a href="http://openstreetmap.org">' +
'OpenStreetMap' +
'</a>'
],
url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
controls: ol.control.defaults({
// Set to display OSM attributions on the bottom right control
attributionOptions: {
collapsed: false
}
}).extend([
new ol.control.ScaleLine() // Add scale line to the defaults controls
]),
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 2
})
});
// Add vector layer with a feature and a style using an icon
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'http://rawgit.com/openlayers/workshop/master/src/fr/data/layers/7day-M2.5.json',
format: new ol.format.GeoJSON()
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'http://openlayers.org/en/latest/examples/data/icon.png'
})
})
});
map.addLayer(vectorLayer);
// Overlay to manage popup on the top of the map
var popup = document.getElementById('popup');
var overLay = new ol.Overlay({
element: popup
});
map.addOverlay(overLay);
// Manage click on the map to display/hide popup
map.on('click', function(e) {
var info = [];
var coordinate = e.coordinate;
map.forEachFeatureAtPixel(e.pixel, function (feature) {
info.push('<table class="marker-properties"><tbody>' + feature.getKeys().slice(1).map((k, i) => {
return '<tr><th>' + k + '</th>'
+ '<td>' + feature.get(k) + '</td>' + '</tr>';
}).join('') + '</tbody></table>');
});
if (info.length > 0) {
// console.log(info);
popup.innerHTML = info.join(',').replace(/<img[^>]*>/g,"");
popup.style.display = 'inline';
overLay.setPosition(coordinate);
} else {
popup.innerHTML = '&nbsp;';
popup.style.display = 'none';
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment