Last active
December 20, 2015 08:49
-
-
Save bwyss/6103668 to your computer and use it in GitHub Desktop.
This code will create a leaflet map that allows one to dynamically access layers from a TileStream server and a GeoServer. A list of all available layers is added to a drop down list in a dialog box and add and remove the layers from the map.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
Copyright (c) 2013, GEM Foundation. | |
This program is free software: you can redistribute it and/or modify | |
it under the terms of the GNU Affero General Public License as | |
published by the Free Software Foundation, either version 3 of the | |
License, or (at your option) any later version. | |
This program is distributed in the hope that it will be useful, | |
but WITHOUT ANY WARRANTY; without even the implied warranty of | |
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
GNU Affero General Public License for more details. | |
You should have received a copy of the GNU Affero General Public License | |
along with this program. If not, see <https://www.gnu.org/licenses/agpl.html>. --> | |
<!-- ok so here we have the html... with the leaflet-js map and the dialog box divs--> | |
<!-- jquery --> | |
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> | |
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> | |
<!-- leaflet resources --> | |
<link rel="stylesheet" href="src/Leaflet/dist/leaflet.css" /> | |
<script type="text/javascript" src="src/Leaflet/dist/leaflet.js"></script> | |
<!-- application --> | |
<script type="text/javascript" src="src/explore/explore.js"></script> | |
<div id="dialog-layers" title="Layer Options"> | |
<form id="tile-form-list"> | |
TileStream Layers: | |
<br> | |
<select id="tile-list"></select> | |
<br><br> | |
<input type="button" id="addTileLayer" value="Add Layer"> | |
<input type="button" id="removeTileLayer" value="Remove Layer"> | |
</form> | |
<form> | |
<br> | |
Geoerver Layers: | |
<br> | |
<select id="geoserver-list"></select> | |
<br><br> | |
<input type="button" id="addGeoLayer" value="Add Layer"> | |
<input type="button" id="removeGeoLayer" value="Remove Layer"> | |
</form> | |
</div> | |
<div id="layer-selection"> | |
<input id="layer-selection" type="button" value="Layers"/> | |
</div> | |
<div id="worning-duplicate" title="Woops!" class="ui-helper-hidden"> | |
<p>This layer has already been added to the map</p> | |
</div> | |
<div id="worning-no-layer" title="Woops!" class="ui-helper-hidden"> | |
<p>This layer in not loaded in the map</p> | |
</div> | |
<div id="map" style="width: 100%;"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Copyright (c) 2013, GEM Foundation. | |
This program is free software: you can redistribute it and/or modify | |
it under the terms of the GNU Affero General Public License as | |
published by the Free Software Foundation, either version 3 of the | |
License, or (at your option) any later version. | |
This program is distributed in the hope that it will be useful, | |
but WITHOUT ANY WARRANTY; without even the implied warranty of | |
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
GNU Affero General Public License for more details. | |
You should have received a copy of the GNU Affero General Public License | |
along with this program. If not, see <https://www.gnu.org/licenses/agpl.html>. | |
*/ | |
//here we have the mapping app. You'll need to point the app to your tilestreamserver | |
// by changing <yourTileStreamServer> | |
var MAX_ZOOM_LEVEL = 16; | |
var map; | |
var layerControl; | |
// Keep track of the layer names | |
var layers; | |
var startExploreApp = function() { | |
layers = {}; | |
/*************** | |
* Base layers * | |
***************/ | |
var GEM_base = new L.tileLayer("http://{s}.tiles.mapbox.com/v3/unhcr.map-8bkai3wa/{z}/{x}/{y}.png", | |
{subdomains: ['a', 'b', 'c', 'd'], noWrap: true}); | |
var baselayer = { | |
'Base Map' : GEM_base | |
}; | |
layerControl = L.control.layers(baselayer); | |
/*********** | |
* The map * | |
***********/ | |
map = L.map('map', { | |
center: [20, 20], | |
zoom: 3, | |
maxZoom: MAX_ZOOM_LEVEL, | |
maxBounds: new L.LatLngBounds(new L.LatLng(-90, -185), new L.LatLng(90, 185)), | |
layers: [GEM_base], | |
attributionControl: false, | |
}); | |
// Add Wax support | |
L.wax(map); | |
// Resize the main and map div | |
var mapFit = function() { | |
var main_height = $(window).height() | |
- $("#header-wrapper").height() | |
- $("#footer").height(); | |
var map_height = $(window).height() | |
- $("#header-wrapper").height() | |
- $("#footer").height() | |
- $("#tooltip").height(); | |
$('#main').css("height", main_height + "px"); | |
$('#map').css("height", map_height + "px"); | |
map.invalidateSize(false); | |
}; | |
$(document).ready(mapFit); | |
$(window).resize(mapFit); | |
// Layer selection dialog | |
$("#dialog-layers").dialog({ | |
autoOpen: false, | |
height: 300, | |
width: 350, | |
modal: true | |
}); | |
$("#layer-selection").button().click(function() { | |
$("#dialog-layers").dialog("open"); | |
}); | |
// Duplicate layer warnning message | |
function showDuplicateMsg() { | |
$("#worning-duplicate").dialog("open"); | |
}; | |
$(document).ready(function() { | |
$("#worning-duplicate").dialog({ | |
autoOpen: false, | |
hieght: 300, | |
width: 350, | |
modal: true | |
}); | |
}); | |
// No Layer to remove warnning message | |
function showRemoveMsg() { | |
$("#worning-no-layer").dialog("open"); | |
}; | |
$(document).ready(function() { | |
$("#worning-no-layer").dialog({ | |
autoOpen: false, | |
hieght: 300, | |
width: 350, | |
modal: true | |
}); | |
}); | |
// Get layer names from tilestream | |
var tileStreamLayer = ""; | |
var sel = document.getElementById('tile-list'); | |
$.getJSON('http://<yourTilestreamServer>/api/v1/Tileset', | |
function(json) { | |
for (var i=0; i < json.length; i++) { | |
var tileStreamLayer = json[i].id; | |
var opt = document.createElement('option'); | |
opt.innerHTML = tileStreamLayer; | |
opt.value = json[i].id; | |
sel.appendChild(opt); | |
} | |
}); | |
map.addControl(layerControl); | |
// Add layers form tilestream list | |
$(document).ready(function() { | |
$('#addTileLayer').click(function() { | |
var e = document.getElementById("tile-list"); | |
var selectedLayer = e.options[e.selectedIndex].value; | |
// Check for duplicae layes | |
if (selectedLayer in layers) { | |
showDuplicateMsg(); | |
} | |
else { | |
var tileLayer = L.tileLayer('http://<yourTileStreamServer>/v2/' | |
+ selectedLayer | |
+ '/{z}/{x}/{y}.png',{opacity: 0.8}); | |
layerControl.addOverlay(tileLayer, selectedLayer); | |
map.addLayer(tileLayer); | |
// Keep track of layers that have been added | |
layers[selectedLayer] = tileLayer; | |
} | |
}); | |
}); | |
// Remove layers from tilestream | |
$(document).ready(function() { | |
$('#removeTileLayer').click(function() { | |
var e = document.getElementById("tile-list"); | |
var selectedLayer = e.options[e.selectedIndex].value; | |
// Check in the layer is in the map port | |
if (selectedLayer in layers) { | |
layerControl.removeLayer(layers[selectedLayer]); | |
map.removeLayer(layers[selectedLayer]); | |
delete layers[selectedLayer]; | |
} | |
else { | |
showRemoveMsg(); | |
} | |
}); | |
}); | |
// Get layers names from geoserver | |
var geoserverLayer = ""; | |
var geoSel = document.getElementById('geoserver-list'); | |
// Get Geoserver info with GetCapabilities | |
$.ajax({ | |
type: "GET", | |
url: "/geoserver/wms?SERVICE=WMS&REQUEST=GetCapabilities&TILED=true&VERSION=1.1.1", | |
dataType: "xml", | |
success: function(xmlDoc) { | |
var layerNames = $(xmlDoc).find('Layer > Name'); | |
for (var i = 0; i < layerNames.length; i++) { | |
var layerName = layerNames[i].textContent; | |
var opt = document.createElement('option'); | |
opt.innerHTML = layerName; | |
opt.value = layerName; | |
geoSel.appendChild(opt); | |
} | |
} | |
}); | |
// Add layers form geoserver list | |
$(document).ready(function() { | |
$('#addGeoLayer').click(function() { | |
var e = document.getElementById("geoserver-list"); | |
var selectedLayer = e.options[e.selectedIndex].value; | |
// Check for duplicae layes | |
if ( selectedLayer in layers ) { | |
showDuplicateMsg(); | |
} | |
else { | |
var geoLayer = new L.TileLayer.WMS('/geoserver/wms', { | |
layers : selectedLayer, | |
format: 'image/png', | |
transparent: true | |
}); | |
layerControl.addOverlay(geoLayer, selectedLayer); | |
map.addLayer(geoLayer); | |
// Keep track of layers that have been added | |
layers[selectedLayer] = geoLayer; | |
} | |
}); | |
}); | |
// Remove layers from Geoserver | |
$(document).ready(function() { | |
$('#removeGeoLayer').click(function() { | |
var e = document.getElementById("geoserver-list"); | |
var selectedLayer = e.options[e.selectedIndex].value; | |
// Check in the layer is in the map port | |
if (selectedLayer in layers) { | |
layerControl.removeLayer(layers[selectedLayer]); | |
map.removeLayer(layers[selectedLayer]); | |
delete layers[selectedLayer]; | |
} | |
else { | |
showRemoveMsg(); | |
} | |
}); | |
}); | |
}; | |
$(document).ready(startExploreApp); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment