Untitled


<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Glenorchy Mountain Bike Park - Glenorchy City Council</title>

    <link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
	<script src="https://maps.gcc.tas.gov.au/src/listBaseLayers.js" type="text/javascript"></script>
    <script src="https://maps.gcc.tas.gov.au/src/leaflet/gcc_config.js" type="text/javascript"></script>

    <link rel="stylesheet" href="https://maps.gcc.tas.gov.au/css/jquery.mobile-1.1.1.min.css" />

    <link rel="stylesheet" href="https://maps.gcc.tas.gov.au/css/main.css" />
    <link rel="stylesheet" href="https://maps.gcc.tas.gov.au/src/leaflet/gcc_geosearch/l.gcc_geosearch.css" />
    	<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
	<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
	<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
    <!--[if lt IE 9]>
     <link rel="stylesheet" href="src/leaflet/locate/L.Control.Locate.ie.css" />
     <link rel="stylesheet" href="src/leaflet/gcc_geosearch/l.gcc_geosearch.ie.css" />
     <link rel="stylesheet" href="css/ie6.css" type="text/css" />
    <![endif]-->

    <script src="https://maps.gcc.tas.gov.au/src/leaflet/gcc_geosearch/gcc_geosearch.js"></script>

    <script src="https://maps.gcc.tas.gov.au/src/jquery/jquery-1.7.1.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

    <style>
	    body {
		    padding: 0;
		    margin: 0;
	    }
	    html, body, #map {
		    height: 100%;
	    }
        h3 {
            margin:0;
        }
    </style>
</head>
<body>
	<div id="map"></div>
</body>
    <script>
//var map = L.map('map').setView([43.071415, -103.008554], 5);
// initialize the map
  var ArcGIS_World_Street_MapLink = '<a href="http://arcgisonline.com">ArcGIS_World_Street_Map</a>',
  ArcGIS_World_Imagery_MapLink = '<a href="http://arcgisonline.com">ArcGIS_World_Imagery_Map</a>',
    osmLink = '<a href="http://openstreetmap.org">OpenstreetMap</a>';


var ArcGIS_World_Street_MapUrl = 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.jpg',
    ArcGIS_World_Street_MapAttrib = '&copy; ' + ArcGIS_World_Street_MapLink + ' Contributors',
	ArcGIS_World_Imagery_MapUrl = 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg',
    ArcGIS_World_Imagery_MapAttrib = '&copy; ' + ArcGIS_World_Imagery_MapLink + ' Contributors',
    osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; '+osmLink+' Contributors';

var ArcGIS_World_Street_Map = L.tileLayer(ArcGIS_World_Street_MapUrl, {attribution: ArcGIS_World_Street_MapAttrib}),
ArcGIS_World_Imagery_Map = L.tileLayer(ArcGIS_World_Imagery_MapUrl, {attribution: ArcGIS_World_Imagery_MapAttrib}),
    osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib});
// define the maps
var airports = new L.markerClusterGroup();
var ports = new L.markerClusterGroup();

var map = L.map('map', {
	    layers: [ArcGIS_World_Imagery_Map, airports] // only add one!
    })
    .setView([-37.8192735167, 175.2219502167], 5);

var baseLayers = {
	"ArcGIS World Street Map": ArcGIS_World_Street_Map,
	"ArcGIS World Imagery Map": ArcGIS_World_Imagery_Map,
	"OpenstreetMap": osmMap
};
var overlays = {
	"Airports": airports,
	"Ports":ports
};

////////////

    //var owsrootUrl = 'http://localhost:8080/geoserver/data2019/ows';
	var owsrootUrl ='http://mapzone.io/projects/kiftounsi/wfs/ows/svkuhu7325l923cmsskak8v02l/ows';

    var defaultParameters_airports = {
        service : 'WFS',
        version : '1.3.0',
        request : 'GetFeature',
		typeName : 'ne_10m_airports',
		//maxFeatures: 20000,
		outputFormat: 'json',
		format_options: 'callback: getJson',
        SrsName : 'EPSG:4326'
    };
var defaultParameters_ports = {
        service : 'WFS',
        version : '1.3.0',
        request : 'GetFeature',
		typeName : 'ne_10m_ports',
		//maxFeatures: 20000,
		outputFormat: 'json',
		format_options: 'callback: getJson',
        SrsName : 'EPSG:4326'
    };

    var parameters_airports = L.Util.extend(defaultParameters_airports);
    var URL_airports = owsrootUrl + L.Util.getParamString(parameters_airports);
	var parameters_ports = L.Util.extend(defaultParameters_ports);
    var URL_ports = owsrootUrl + L.Util.getParamString(parameters_ports);
    //console.log(URL);

    function getColour(c) {
        switch(c)
            {
            case 'Operational':
              return '#000000';
              break;
            case 'Under Construction':
              return '#1f45ce';
              break;
            case 'Not Usable':
              return '#d10000';
            case 'Unexamined/Unsurveyed':
              return '#0ac300';
              break;
            default:
              return '#FF6600';
            }
    };

    var highlightedFeature = null
    function highlightOneFeature(e) {
        if (highlightedFeature) {
            resetHighlight(highlightedFeature);
        };
        var layer = e.target;
        highlightedFeature = layer;
        layer.setStyle({
            fillColor: "yellow",
            color: "yellow",
            weight: 5,
            opacity: 1
        });

        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }
    }

    function resetHighlight(layer) {
        layer.setStyle({
            fillColor: getColour(layer.feature.properties.type),
            color: getColour(layer.feature.properties.type),
            opacity: 0.8,
            weight: 4
        });
    }

    var mtbp = null;
    var ajax = $.ajax({
        url : URL_airports,
        dataType : 'json',
        //jsonpCallback : 'getJson',
        success : function (response) {
            mtbp = L.geoJson(response, {
			pointToLayer: function(feature, latlng) {
			var smallIcon = L.icon({
                      iconSize: [30, 30],
                      iconAnchor: [13, 27],
                      popupAnchor:  [1, -24],
                      iconUrl: 'https://cdn4.iconfinder.com/data/icons/map-pins-2/256/1-512.png'
   });

   return L.marker(latlng, {icon: smallIcon});
},
                /////////////

				/////////////////////
                onEachFeature: function (feature, layer) {
                    popupOptions = {maxWidth: 200};
                    layer.bindPopup("<b>Name (en): </b>" + feature.properties.name_en+ "<br><b>IATA code</b> :"+feature.properties.abbrev,popupOptions);
                    layer.on({
                        //mouseover: highlightFeature,
                        //mouseout: resetHighlight,
                        click: highlightOneFeature
                });
                }
            }).addTo(airports);
        }
    });
    //////////////////
	    var ajax = $.ajax({
        url : URL_ports,
        dataType : 'json',
        jsonpCallback : 'getJson',
        success : function (response) {
            mtbp = L.geoJson(response, {
			pointToLayer: function(feature, latlng) {
			var smallIcon = L.icon({
                      iconSize: [30, 30],
                      iconAnchor: [13, 27],
                      popupAnchor:  [1, -24],
                      iconUrl: 'https://cdn3.iconfinder.com/data/icons/freeapplication/png/24x24/Anchor.png'
   });

   return L.marker(latlng, {icon: smallIcon});
},
                /////////////

				/////////////////////
                onEachFeature: function (feature, layer) {
                    popupOptions = {maxWidth: 200};
                    layer.bindPopup("<b>Name (en): </b>" + feature.properties.name_en+ "<br><b>IATA code</b> :"+feature.properties.abbrev,popupOptions);
                    layer.on({
                        //mouseover: highlightFeature,
                        //mouseout: resetHighlight,
                        click: highlightOneFeature
                });
                }
            }).addTo(ports);
        }
    });
	//////////////////
 L.control.layers(baseLayers,overlays).addTo(map);


    </script>


</html>