* Sunda Cyber Army 2k17 *
Indonesia Defacer ~
<!doctype html>
<html>
<head>
<title>Geocoding API</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
<style>
#map {
width: 50vw;
height: 50vh;
}
.ol-popup {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.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;
}
</style>
</head>
<body>
<!-- HTML elements that will be used to display popup text on the map -->
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
<h2>Lookup Coordinates Using Address</h2>
<?php
// a default value for the variable
$address = '3780 Watt Way, Los Angeles, CA 90089';
?>
<!-- to get user input -->
<form action="" method="post">
Address: <input name="address" type="text" value="<?php echo $address ?>"/>
<input name="submit" type="submit" /><br><br>
</form>
<?php
// if user passes their address
if(isset($_POST["address"])){
$address = urlencode($_POST["address"]);
}
// Define the endpoint to look up a place using an address
$url = 'https://geocode.maps.co/search?q='.$address;
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);
$result = curl_exec($ch);
curl_close($ch);
$data = json_decode($result, true);
$dataPhp = array();
if($data != null){
for($i = 0; $i < sizeof($data); $i++){
echo 'Name: ' . $data[$i]["display_name"] .
'<br>Lattitude: ' . $data[$i]["lat"] .
'<br>Longitude: ' . $data[$i]["lon"].
'<hr>';
array_push($dataPhp, array("lat" => $data[$i]["lat"], "long" => $data[$i]["lon"], "name" => $data[$i]["display_name"]));
}
}
else{
echo '<h4>No geocodes found</h4>';
}
?>
<div id="map">
<script>
var _coords = <?php echo json_encode($dataPhp); ?>;
var map;
function initMap() {
map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([long, latd]),
zoom: 14,
maxZoom: 18,
}),
overlay: [
new ol.Overlay({
element: container
}),
],
});
}
function addMarker(latd, long, name) {
var _feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([long, latd])),
});
_feature.set("Name", name);
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
_feature,
],
}),
});
map.addLayer(layer);
}
if(_coords.length > 0){
var latd = _coords[0]["lat"], long = _coords[0]["long"];
// load and setup map layers
initMap();
// to set all the pins
for (let i = 0; i < _coords.length; i++) {
addMarker(_coords[i]["lat"], _coords[i]["long"], _coords[i]["name"]);
}
// for the popup box
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(overlay);
map.on('pointermove', function (event) {
const features = map.getFeaturesAtPixel(event.pixel);
if (features.length > 0) {
var coordinate = event.coordinate;
const name = features[0].get('Name');
//simple text written in the popup, values are just of the second index
content.innerHTML = '<br><b>Address: </b>'+name;//just the second one is getting displayed
overlay.setPosition(coordinate);
}
else {
// if there are no features on the hovered position then hide the popup box
overlay.setPosition(undefined);
}
});
}
</script>
</div>
<h2>Lookup Address Using Coordinates</h2>
<?php
// a default value for the variable
$lat = '34.018861425895146';
$long = '-118.28845770315105';
?>
<!-- to get user input -->
<form action="" method="post">
Lattitude: <input name="lat" type="text" value="<?php echo $lat ?>"/><br>
Longitude: <input name="long" type="text" value="<?php echo $long ?>"/>
<input name="submit" type="submit" /><br><br>
</form>
<?php
// if user passes their set of cooddinates
if(isset($_POST["lat"]) && $_POST["long"]){
$lat = $_POST["lat"];
$long = $_POST["long"];
}
$url = 'https://geocode.maps.co/reverse?lat='.$lat.'&lon='.$long;
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);
$result = curl_exec($ch);
curl_close($ch);
$data = json_decode($result, true);
echo 'Address for the searched coordinates: ' . $data["display_name"];
?>
</body>
</html>