<?php include 'getboat.php';?>
<!DOCTYPE html>
<html>
<head>
<title>map</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Leaflet (JS/CSS) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
<!-- Leaflet-Pegman -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-pegman@0.0.8/leaflet-pegman.css" />
<script src="https://unpkg.com/leaflet-pegman@0.0.8/leaflet-pegman.js"></script>
<!-- JSZIP -->
<script src="https://unpkg.com/jszip@3.1.5/dist/jszip.min.js"></script>
<!-- togeojson -->
<script src="https://unpkg.com/togeojson@0.16.0/togeojson.js"></script>
<!-- geojson-vt -->
<script src="https://unpkg.com/geojson-vt@3.0.0/geojson-vt.js"></script>
<!-- Leaflet-KMZ -->
<script src="https://unpkg.com/leaflet-kmz@0.0.6/libs/KMZParser.js"></script>
<script src="https://unpkg.com/leaflet-kmz@0.0.6/libs/GridLayer.GeoJSON.js"></script>
<!-- Leaflet-Transparency -->
<script src="https://unpkg.com/leaflet-transparency@0.0.3/leaflet-transparency.js"></script>
<style>
html,
body,
.map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<style>
/* Fixes Google Mutant Empty attribution */
.leaflet-bottom.leaflet-left,
.leaflet-bottom.leaflet-right {
margin-bottom: initial !important;
}
/* Make Google Logo/ToS/Feedback links clickable */
.leaflet-google-mutant a,
.leaflet-google-mutant button {
pointer-events: auto;
}
/* Move Google ToS/Feedback to the top */
.leaflet-google-mutant .gmnoprint,
.leaflet-google-mutant .gm-style-cc {
top: 0;
bottom: auto !important;
}
</style>
<style>
.leaflet-control.opacity-control {
margin-right: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 2.5px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-animation: BLINK-ANIMATION 1s linear 5;
-moz-animation: BLINK-ANIMATION 1s linear 5;
-o-animation: BLINK-ANIMATION 1s linear 5;
animation: BLINK-ANIMATION 1s linear 5;
}
.leaflet-control.opacity-control:hover {
background-color: rgba(255, 255, 255, 0.85);
}
.leaflet-left .leaflet-control.opacity-control {
margin-left: 40px;
}
.leaflet-right .leaflet-control.opacity-control {
margin-right: 13px;
}
@-webkit-keyframes BLINK-ANIMATION {
0%,
49% {
background-color: #ff0;
}
50%,
100% {}
}
</style>
</head>
<body>
<input id="slide" type="range" min="0" max="1" step="0.1" value="1" onchange="updateOpacity(this.value)">
<input type="checkbox" id="places" style="font-size: larger" > Places
<div id="map" class="map"></div>
<script>
var opts = {
map: {
center: [7.8731, 80.7718],
zoom: 5,
markerZoomAnimation: false,
zoomControl: false,
},
zoomControl: {
position: 'bottomright',
},
otmLayer: {
url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
options: {
//attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom:17,
},
},
osmLayer: {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
options: {
// attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom:19,
},
},
satelliteLayer: {
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
options: {
// attribution: '© <a href="http://www.esri.com/">Esri</a>',
maxZoom:18,
},
},
layersControl: {
options: {
collapsed: false,
position: 'topleft',
},
},
overlayControl: {
options: {
collapsed: false,
position: 'topright'
},
},
pegmanControl: {
options: {
position: 'bottomright',
clickableStreetViewLayer: false,
theme: "leaflet-pegman-v3-small",
}
},
opacityBaseControl: {
options: {
sliderImageUrl: "https://unpkg.com/leaflet-transparency@0.0.2/images/opacity-slider3d7.png",
backgroundColor: "rgba(0, 0, 0, 0.9)",
position: 'topleft',
},
},
opacityOverlayControl: {
options: {
sliderImageUrl: "https://unpkg.com/leaflet-transparency@0.0.2/images/opacity-slider2.png",
backgroundColor: "rgba(229, 227, 223, 0.9)",
position: 'topright',
},
},
};
var map = new L.Map('map', opts.map);
var baseLayers = {};
baseLayers["OpenTopoMap"] = new L.TileLayer(opts.otmLayer.url, opts.otmLayer.options);
baseLayers["OpenStreetMap"] = new L.TileLayer(opts.osmLayer.url, opts.osmLayer.options);
baseLayers["Esri World Imagery"] = new L.TileLayer(opts.satelliteLayer.url, opts.satelliteLayer.options);
var controlZoom = new L.Control.Zoom(opts.zoomControl);
var controlLayers = L.control.layers(baseLayers, null, opts.layersControl.options);
var controlOverlay = L.control.layers(null, null, opts.overlayControl.options);
var controlPegman = new L.Control.Pegman(opts.pegmanControl.options);
var controlBaseOpacity = new L.Control.OpacitySlider(null, opts.opacityBaseControl.options);
var kmzParser = new L.KMZParser({
onKMZLoaded: function(layer, name) {
var controlOverlayOpacity = new L.Control.OpacitySlider(this.gridlayer, opts.opacityOverlayControl.options);
controlOverlayOpacity.addFeatureLayer(this.layer);
controlOverlay.addOverlay(layer, "ON / OFF");
layer.addTo(map);
controlOverlayOpacity.addTo(map);
map.on("baselayerchange", function(event) {
layer.bringToFront();
});
}
});
var kmzParser = new L.KMZParser({
onKMZLoaded: function(layer, name) {
var controlOverlayOpacity = new L.Control.OpacitySlider(this.gridlayer, opts.opacityOverlayControl.options);
controlOverlayOpacity.addFeatureLayer(this.layer);
controlOverlay.addOverlay(layer, "ON / OFF");
layer.addTo(map);
controlOverlayOpacity.addTo(map);
map.on("baselayerchange", function(event) {
layer.bringToFront();
});
}
});
kmzParser.load('Kandy_Cad.kmz');
kmzParser.load('Kurunegala_Sporadic.kmz');
controlLayers.addTo(map);
controlOverlay.addTo(map);
controlZoom.addTo(map);
controlPegman.addTo(map);
controlBaseOpacity.addTo(map);
baseLayers["OpenTopoMap"].addTo(map);
var imageUrl = '753.png',
imageBounds = [[10.364750, 77.300721], [5.178045, 82.46888]];
var imageOverlay =L.imageOverlay(imageUrl, imageBounds).addTo(map);
$("#places").click(function() {
if (this.checked) {
console.log("checked!");
var places = topojson.feature(uk,uk.objects.places);
//geoP=L.geoJSON(places).addTo(newMap);
} else {
console.log("unchecked!");
newMap.removeLayer(geoP);
};
});
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'shadows.ico',
iconSize: [36, 36],
shadowSize: [36, 36],
iconAnchor: [18, 18],
shadowAnchor: [4, 62],
popupAnchor: [0, -16]
}
});
function updateOpacity(value) {
imageOverlay.setStyle({
opacity: (value)
})
};
var disabledIcon = new LeafIcon({ iconUrl: 'disabled.ico' }),
excIcon = new LeafIcon({ iconUrl: 'exc.ico' }),
inactiveIcon = new LeafIcon({ iconUrl: 'inactive.ico' }),
preIcon = new LeafIcon({ iconUrl: '009.png' }),
stIcon = new LeafIcon({ iconUrl: '007.png' }),
depIcon = new LeafIcon({ iconUrl: '008.png' }),
warning1norainIcon = new LeafIcon({ iconUrl: 'warning1_no_rain.ico' }),
warning1rainingIcon = new LeafIcon({ iconUrl: 'warning1_raining.ico' }),
warning2norainIcon = new LeafIcon({ iconUrl: 'warning2_no_rain.ico' }),
warning2rainingIcon = new LeafIcon({ iconUrl: 'warning2_raining.ico' }),
warning3norainIcon = new LeafIcon({ iconUrl: 'warning3_no_rain.ico' }),
warning3rainingIcon = new LeafIcon({ iconUrl: 'warning3_raining.ico' }),
windyIcon = new LeafIcon({ iconUrl: 'windy.ico' });
show_map();
</script>
</body>
</html>
Comments
Post a Comment