Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Last active October 13, 2017 00:49
Show Gist options
  • Save ThomasG77/910965e896320945d2aa1d313bcb43c9 to your computer and use it in GitHub Desktop.
Save ThomasG77/910965e896320945d2aa1d313bcb43c9 to your computer and use it in GitHub Desktop.
Download ZIP
Proto OpenStreetMap BZH - v0 - Peillac - Opération Libre - Demo at http://bl.ocks.org/ThomasG77/910965e896320945d2aa1d313bcb43c9
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Simple Map</title>
<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.1/build/ol.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.js"></script>
<script src="https://unpkg.com/ol-popup@2.0.0"></script>
<script src="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v4.4.1/css/ol.css">
<link rel="stylesheet" href="https://unpkg.com/ol-popup@2.0.0/src/ol-popup.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css">
<link rel="stylesheet" type="text/css" href="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css">
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.ol-zoom {
top: .5em;
right: .5em;
left: initial;
}
.ol-control button{
background-color: rgba(40, 40, 40, 0.8) !important;
}
.ol-geocoder .ol-control, .ol-geocoder .ol-control button:hover {
background-color: rgba(40, 40, 40, 0) !important;
}
.layer-switcher {
top: 4.5em;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
// default zoom, center and rotation
var zoom = 6;
var center = [-2.3, 48.1];
if (window.location.hash !== '') {
// try to restore center, zoom-level and rotation from the URL
var hash = window.location.hash.replace('#map=', '');
var parts = hash.split('/');
if (parts.length === 3) {
zoom = parseInt(parts[0], 10);
center = [
parseFloat(parts[1]),
parseFloat(parts[2])
];
}
}
var osm_source = new ol.source.XYZ({
url: 'http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png'
});
var layerOsm = new ol.layer.Tile({
title: 'OpenStreetMap BZH',
type: 'base',
visible: true,
source: osm_source
});
var vectorLayer = new ol.layer.Vector({
title: 'Kenteliou',
visible: true,
source: new ol.source.Vector({
url: 'kenteliou_sizhuniek.json',
format: new ol.format.GeoJSON()
}),
style: new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 40],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/images/marker-icon.png'
}))
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Group({
'title': 'Base maps',
layers: [layerOsm]
}),
new ol.layer.Group({
title: 'Overlays',
layers: [vectorLayer]
})
],
view: new ol.View({
center: ol.proj.fromLonLat(center),
zoom: zoom
}),
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
])
});
var popup = new ol.Overlay.Popup({
panMapIfOutOfView: false
});
map.addOverlay(popup);
// Popup for onclick event on GeoJSON source
var popup1 = new ol.Overlay.Popup({
panMapIfOutOfView: false
});
map.addOverlay(popup1);
// Overlay to manage popup on the top of the map
// var popup = document.getElementById('popup');
// var overLay = new ol.Overlay({
// element: popup,
// position: ol.proj.fromLonLat([0, 0])
// });
// map.addOverlay(overLay);
// Manage click on the map to display/hide popup
map.on('click', function(e) {
var info = [];
map.forEachFeatureAtPixel(e.pixel, function (feature) {
info.push(/*feature.get('title') + '<br>' + */feature.get('text'));
});
if (info.length > 0) {
// debugger;
popup.show(e.coordinate, info.join(','));
} else {
popup.hide();
}
});
//Instantiate with some options and add the Control
var geocoder = new Geocoder('nominatim', {
provider: 'photon',
targetType: 'text-input',
lang: 'fr',
placeholder: 'Klaskañ...',
limit: 10,
keepOpen: false,
preventDefault: true
});
map.addControl(geocoder);
var layerSwitcher = new ol.control.LayerSwitcher({
tipLabel: 'Légende' // Optional label for button
});
map.addControl(layerSwitcher);
//Listen when an address is chosen
geocoder.on('addresschosen', function (evt) {
window.setTimeout(function () {
popup.show(evt.coordinate, evt.address.formatted);
}, 1000);
});
var shouldUpdate = true;
var view = map.getView();
var updatePermalink = function() {
if (!shouldUpdate) {
// do not update the URL when the view was changed in the 'popstate' handler
shouldUpdate = true;
return;
}
var center = ol.proj.toLonLat(view.getCenter());
var hash = '#map=' +
view.getZoom() + '/' +
Math.round(center[0] * 100) / 100 + '/' +
Math.round(center[1] * 100) / 100;
var state = {
zoom: view.getZoom(),
center: view.getCenter()
};
window.history.pushState(state, 'map', hash);
};
map.on('moveend', updatePermalink);
// restore the view state when navigating through the history, see
// https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
window.addEventListener('popstate', function(event) {
if (event.state === null) {
return;
}
map.getView().setCenter(event.state.center);
map.getView().setZoom(event.state.zoom);
shouldUpdate = false;
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
kenteliou_sizhuniek.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment