Category Archives: JavaScript

upload file in JQuery

function imageManager(){
	var fd = new FormData(); 
	var files = $('#file')[0].files[0]; 
	fd.append('file', files); 

	$.ajax({
	  type:"POST",
	  url:"http://127.0.0.1/ajax/do-item.ajax.php",
	  data: fd, 
		contentType: false, 
		processData: false, 
	  beforeSend:function(){
		$("#ajax-file").html("Loading...");
	  },
	  success:function(data){
		$("#ajax-file").html(decodeURI(data));
	  }
	});
}

<?php
   var_dump($_FILES);
?>

addLayer in OpenLayer

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
	<style>
      .map {
        height: 100%;
        width: 100%;
		
      }
      .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "✖";
      }
    </style>
  <title>OpenLayers 3 example</title>
  </head>
  <body>
    <div id="map" class="map">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content" style="width:300px; height:120px;"></div>
        </div>
    </div> 
	<script type="text/javascript">
		/**
		* Elements that make up the popup.
		*/
		var container = document.getElementById('popup');
		var content = document.getElementById('popup-content');
		var closer = document.getElementById('popup-closer');

		/**
		* Add a click handler to hide the popup.
		* @return {boolean} Don't follow the href.
		*/
		closer.onclick = function() {
			overlay.setPosition(undefined);
			closer.blur();
			return false;
		};

		/**
		* Create an overlay to anchor the popup to the map.
		*/
		var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
			element: container,
			autoPan: true,
			autoPanAnimation: {
				duration: 250 // 當彈出超出地圖邊界時,為了彈出全部可見,地圖移動的速度。單位為毫秒(ms)
			}
		}));
	
		map = new ol.Map({
			target: 'map',
			layers: [
					new ol.layer.Tile({
						source: new ol.source.OSM()
					})
				],
			view: new ol.View({
			  center: ol.proj.transform([114.17232, 22.29958], 'EPSG:4326', 'EPSG:3857'),
			  zoom: 15
			})
		});
		
		var vectorLayer1 = new ol.layer.Vector({
			source:new ol.source.Vector({
				features: [new ol.Feature({
					geometry: new ol.geom.Point(ol.proj.transform([parseFloat(114.17232), parseFloat(22.29958)], 'EPSG:4326', 'EPSG:3857')),
				})]
			}),
			style: new ol.style.Style({
				image: new ol.style.Icon({
					anchor: [0.5, 0.5],
					anchorXUnits: "fraction",
					anchorYUnits: "fraction",
					src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
				})
			})
		});
		map.addLayer(vectorLayer1); 
		
		var vectorLayer2 = new ol.layer.Vector({
			source:new ol.source.Vector({
				features: [new ol.Feature({
					geometry: new ol.geom.Point(ol.proj.transform([parseFloat(114.1704), parseFloat(22.3012)], 'EPSG:4326', 'EPSG:3857')),
				})]
			}),
			style: new ol.style.Style({
				image: new ol.style.Icon({
					anchor: [0.5, 0.5],
					anchorXUnits: "fraction",
					anchorYUnits: "fraction",
					src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
				})
			})
		});
		map.addLayer(vectorLayer2); 

		/**
		* Add a click handler to the map to render the popup.
		*/
		map.on('click', function(e) {
			var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
				return feature;
			});
			map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
			    if (layer === vectorLayer1) {
					var coordinate = e.coordinate;
					var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
					coordinate, 'EPSG:3857', 'EPSG:4326'));
					content.innerHTML = '<p>A:</p><code>' + hdms + '</code>';
					overlay.setPosition(coordinate);
					map.addOverlay(overlay);
				}else if (layer === vectorLayer2) {
					var coordinate = e.coordinate;
					var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
					coordinate, 'EPSG:3857', 'EPSG:4326'));
					content.innerHTML = '<p>B:</p><code>' + hdms + '</code>';
					overlay.setPosition(coordinate);
					map.addOverlay(overlay);
				}
			});
		});
	</script>
  </body>
</html>

openlayer-map

OpenLayer – Map

<!doctype html>
<html lang="en">
  <head>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    <style>
      .map {
        height: 100%;
        width: 100%;
      }
    </style>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
		center: ol.proj.transform([114.17232, 22.29958], 'EPSG:4326', 'EPSG:3857'),
		zoom: 16
        })
      });
    </script>
  </body>
</html>

openlayer-map

OpenLayer

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).

openlayer

Reference : https://openlayers.org/
Reference : https://www.openstreetmap.org/ ( Latitude and longitude )

setInterval or setTimeout

setInterval

<!DOCTYPE html>
<html>
	<head>
		<title>Jquery setinterval stop after sometime</title>
		<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type='text/javascript'>
			$.ajaxSetup({ cache: false })
		</script>
	</head>
	<body>
		<input type="button" value="Start count!" onclick="startTimer()"> 
		<input type="button" value="Stop count!" onclick="stopTimer()"> 
		<br/>
		<div id="countdown_text">Placeholding text</div>
		<script type="text/javascript">
			var timer = null, 
			value = 0;

			function startTimer(){
				if (timer !== null) return;
				timer = setInterval(function () {
					document.getElementById('countdown_text').innerHTML = ++value;
				}, 1000); 
			}

			function stopTimer(){
				clearInterval(timer);
				timer = null
			}		
		</script>
	</body>
</html>

setTimeout

<!DOCTYPE html>
<html>
<body>
	<title>Jquery setinterval stop after sometime</title>
		<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type='text/javascript'>
			$.ajaxSetup({ cache: false })
		</script>
		<button onclick="startCount()">start</button>
		<button onclick="stopCount()">stop</button>
		<div id="countdown_text">Placeholding text</div>

		<script>
			var c = 0;
			var t;
			var timer_is_on = 0;

			function timedCount() {
				document.getElementById('countdown_text').innerHTML = c;
				c = c + 1;
				t = setTimeout(
						function(){ 
							timedCount() 
						}, 1000
					);
			}

			function startCount() {
				if (!timer_is_on) {
					timer_is_on = 1;
					timedCount();
				}
			}

			function stopCount() {
				clearTimeout(t);
				timer_is_on = 0;
			}
		</script>
</body>
</html>

Remark :
setTimeout (無限loop)
setTimeout (僅行一次)