Skip to content

Instantly share code, notes, and snippets.

@polinabee

polinabee/index.html

Created September 25, 2016 02:30
Show Gist options
  • Save polinabee/0487e33ca8a9838718581b5d438870c6 to your computer and use it in GitHub Desktop.
Save polinabee/0487e33ca8a9838718581b5d438870c6 to your computer and use it in GitHub Desktop.
Download ZIP
Test for QGIS to Leaflet plugin
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" type="text/css" href="css/qgis2web.css">
<link rel="stylesheet" href="css/label.css" />
<link rel="stylesheet" href="css/MarkerCluster.css" />
<link rel="stylesheet" href="css/MarkerCluster.Default.css" />
<link rel="stylesheet" href="css/leaflet-search.css" />
<script src="js/leaflet.js"></script>
<script src="js/leaflet-heat.js"></script>
<script src="js/leaflet.rotatedMarker.js"></script>
<script src="js/OSMBuildings-Leaflet.js"></script>
<script src="js/leaflet-hash.js"></script>
<script src="js/label.js"></script>
<script src="js/Autolinker.min.js"></script>
<script src="js/leaflet.markercluster.js"></script>
<script src="js/leaflet-search.js"></script>
<style>
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<title></title>
</head>
<body>
<div id="map">
</div>
<script src="data/json_ne10mairports0.js"></script>
<script>
L.ImageOverlay.include({
getBounds: function () {
return this._bounds;
}
});
var map = L.map('map', {
zoomControl:true, maxZoom:28, minZoom:1
})
var hash = new L.Hash(map);
map.attributionControl.addAttribution('<a href="https://github.com/tomchadwin/qgis2web" target="_blank">qgis2web</a>');
var feature_group = new L.featureGroup([]);
var bounds_group = new L.featureGroup([]);
var raster_group = new L.LayerGroup([]);
var initialOrder = new Array();
var layerOrder = new Array();
function stackLayers() {
for (index = 0; index < initialOrder.length; index++) {
map.removeLayer(initialOrder[index]);
map.addLayer(initialOrder[index]);
}
if (bounds_group.getLayers().length) {
map.fitBounds(bounds_group.getBounds());
}
}
function restackLayers() {
for (index = 0; index < layerOrder.length; index++) {
layerOrder[index].bringToFront();
}
}
layerControl = L.control.layers({},{},{collapsed:false});
function geoJson2heat(geojson, weight) {
return geojson.features.map(function(feature) {
return [
feature.geometry.coordinates[1],
feature.geometry.coordinates[0],
feature.properties[weight]
];
});
}
function pop_ne10mairports0(feature, layer) {
var popupContent = '<table><tr><td colspan="2">' + (feature.properties['scalerank'] !== null ? Autolinker.link(String(feature.properties['scalerank'])) : '') + '</td></tr><tr><td colspan="2">' + (feature.properties['featurecla'] !== null ? Autolinker.link(String(feature.properties['featurecla'])) : '') + '</td></tr><tr><th scope="row">type</th><td>' + (feature.properties['type'] !== null ? Autolinker.link(String(feature.properties['type'])) : '') + '</td></tr><tr><td colspan="2">' + (feature.properties['name'] !== null ? Autolinker.link(String(feature.properties['name'])) : '') + '</td></tr><tr><td colspan="2">' + (feature.properties['abbrev'] !== null ? Autolinker.link(String(feature.properties['abbrev'])) : '') + '</td></tr><tr><td colspan="2">' + (feature.properties['location'] !== null ? Autolinker.link(String(feature.properties['location'])) : '') + '</td></tr><tr><td colspan="2">' + (feature.properties['gps_code'] !== null ? Autolinker.link(String(feature.properties['gps_code'])) : '') + '</td></tr><tr><td colspan="2">' + (feature.properties['iata_code'] !== null ? Autolinker.link(String(feature.properties['iata_code'])) : '') + '</td></tr><tr><td colspan="2">' + (feature.properties['wikipedia'] !== null ? Autolinker.link(String(feature.properties['wikipedia'])) : '') + '</td></tr><tr><td colspan="2">' + (feature.properties['natlscale'] !== null ? Autolinker.link(String(feature.properties['natlscale'])) : '') + '</td></tr><tr><td colspan="2">' + (feature.properties['type_code'] !== null ? Autolinker.link(String(feature.properties['type_code'])) : '') + '</td></tr></table>';
layer.bindPopup(popupContent);
}
function doStylene10mairports0(feature) {
switch (feature.properties['type_code']) {
case 1:
return {
radius: 4.0,
fillColor: '#feebe2',
color: '#000000',
weight: 0.0,
opacity: 1.0,
dashArray: '',
fillOpacity: '1.0',
};
break;
case 2:
return {
radius: 4.0,
fillColor: '#f99ab1',
color: '#000000',
weight: 0.0,
opacity: 1.0,
dashArray: '',
fillOpacity: '1.0',
};
break;
case 3:
return {
radius: 4.0,
fillColor: '#d53491',
color: '#000000',
weight: 0.0,
opacity: 1.0,
dashArray: '',
fillOpacity: '1.0',
};
break;
default:
return {
radius: 4.0,
fillColor: '#7a0177',
color: '#000000',
weight: 0.0,
opacity: 1.0,
dashArray: '',
fillOpacity: '1.0',
};
break;
}
}
var json_ne10mairports0JSON = new L.geoJson(json_ne10mairports0, {
onEachFeature: pop_ne10mairports0,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, doStylene10mairports0(feature))
}
});
layerOrder[layerOrder.length] = json_ne10mairports0JSON;
bounds_group.addLayer(json_ne10mairports0JSON);
initialOrder[initialOrder.length] = json_ne10mairports0JSON;
feature_group.addLayer(json_ne10mairports0JSON);
raster_group.addTo(map);
feature_group.addTo(map);
stackLayers();
map.addControl(new L.Control.Search({
layer: feature_group,
initial: false,
hideMarkerOnCollapse: true,
propertyName: 'name'}));
map.on('overlayadd', restackLayers);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment