| Server IP : 79.136.114.73 / Your IP : 18.222.48.95 Web Server : Apache/2.4.7 (Ubuntu) PHP/5.5.9-1ubuntu4.29 OpenSSL/1.0.1f System : Linux b8009 3.13.0-170-generic #220-Ubuntu SMP Thu May 9 12:40:49 UTC 2019 x86_64 User : www-data ( 33) PHP Version : 5.5.9-1ubuntu4.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/appsrv.astacus.se/digitaltwin/ |
Upload File : |
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Astaucs Digital Twin Portal</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
<style>
#map {
position: absolute;
top: 80px;
bottom: 0;
width: 90%;
height:90%;
left: 255px;
}
.marker {
background-image: url('images/ostenssons_citron.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.marker_inactive {
background-image: url('images/ostenssons_citron.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
opacity: 0.2;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
color: #FFFFFF;
background: #0063b5;
}
</style>
</head>
<body leftmargin="0" marginheight="0" topmargin="0">
<table width="100%" border="0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #FFFFFF;">
<tbody>
<tr>
<td width="250" rowspan="2" align="left" valign="top" bgcolor="#2F2F2F" ><a href="start.php"><img src="images/astacus_wide_original.png" width="200" style="margin-top: 10px;" alt=""/></a>
<hr color="#6B6B6B">
<table width="100%" border="0">
<tbody>
<tr>
<td align="center" valign="middle"> </td>
<td align="left" valign="middle"><strong><span style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #FFFFFF">PROFIL</span></strong></td>
</tr>
<tr>
<td height="34" align="center" valign="middle"><img src="images/icon_profil.png" width="20" height="20" alt=""/></td>
<td align="left" valign="middle"><span style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE"><a href="profil.php" style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE;">Visa profil</a></span></td>
</tr>
<tr>
<td height="31" align="center" valign="middle"><img src="images/icon_exit.png" width="20" height="20" alt=""/></td>
<td align="left" valign="middle"><span style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE;"><a href="exit.php" style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE;">Logga ut </a></span></td>
</tr>
<tr>
<td width="21%" align="center" valign="top"><br>
<br>
<br>
<br></td>
<td width="79%"><p style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE;"> </p>
<p style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE;"><br>
<br>
</p></td>
</tr>
</tbody>
</table>
<hr color="#6B6B6B">
<table width="100%" border="0" height="200">
<tbody>
<tr>
<td align="center" valign="top"> </td>
<td><strong>FASTIGHETER</strong></td>
</tr>
<tr>
<td height="37" align="center" valign="middle"><img src="images/icon_list.png" width="20" height="20" alt=""/></td>
<td valign="middle"><span style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE;"><span style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE"><a href="list.php" style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE;">Visa lista</a></span><br>
</span></td>
</tr>
<tr>
<td height="32" align="center" valign="middle"><img src="images/icon_clobe.png" width="20" height="20" alt=""/></td>
<td valign="middle"><span style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE;"><a href="map.php" style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: #CECECE;">Visa karta</a></span></td>
</tr>
<tr>
<td height="39" align="center" valign="middle"> </td>
<td valign="middle"> </td>
</tr>
<tr>
<td width="21%" height="135" align="center" valign="top"> </td>
<td width="79%"></td>
</tr>
</tbody>
</table>
<hr color="#6B6B6B">
<p><center></center></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td width="*" height="45" align="center">
<p><span style="font-size: 36px; color: #000000">Digital Twin - Karta</span></p></td>
</tr>
<tr style="height: 25%; font-size: 12px;">
<td align="center" valign="middle" bgcolor="#ECECEC">
<div id="map" ></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [15.088145,58.387616]
},
properties: {
title: 'Skänninge',
description: 'Fastighet: Managen 1<br>Adress: Mjölbygatan 32 <br>Typ: Butik <br> <br> <a href="object.php?id=1"><img src="images/continue.png" alt="" width="50" height="50" border="0"/></a>'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [15.277176,58.562478]
},
properties: {
title: 'Borensberg',
description: 'Fastighet: Brunneby-hälla 1:287<br>Adress: Hamnvägen 1 32 <br>Typ: Butik <br> <br> <a href="object.php?id=2"><img src="images/continue.png" alt="" width="50" height="50" border="0"/></a>'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [15.036871,58.536101]
},
properties: {
title: 'Motala City',
description: 'Ännu inte uppmätt. Inga tjänster finns påkopplade.'
}
},{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [15.003408,58.535311]
},
properties: {
title: 'Motala Väster',
description: 'Ännu inte uppmätt. Inga tjänster finns påkopplade.'
}
},{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [15.058726,58.548491]
},
properties: {
title: 'Motala Verkstan',
description: 'Ännu inte uppmätt. Inga tjänster finns påkopplade.'
}
},{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [15.033256,58.54494]
},
properties: {
title: 'Motala Ekön',
description: 'Ännu inte uppmätt. Inga tjänster finns påkopplade.'
}
},{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [14.881003,58.440831 ]
},
properties: {
title: 'Vadstena Starby',
description: 'Ännu inte uppmätt. Inga tjänster finns påkopplade.'
}
},{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [14.90141,58.449984]
},
properties: {
title: 'Vadstena Mima',
description: 'Ännu inte uppmätt. Inga tjänster finns påkopplade.'
}
},{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [15.693302,58.366983]
},
properties: {
title: 'Linköping Ullstämma',
description: 'Ännu inte uppmätt. Inga tjänster finns påkopplade.'
}
},{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [16.16974,58.560212]
},
properties: {
title: 'Norrköping',
description: 'Ännu inte uppmätt. Inga tjänster finns påkopplade.'
}
}]
};
mapboxgl.accessToken = 'pk.eyJ1IjoiY2FybGhvZmZzdGVkdCIsImEiOiJja3NqYmw2aTcwMzk2MnludTNjbXkzcm05In0.u--lhyuyU9aOy2zfKzxMgQ';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/carlhoffstedt/cksjbnm7u1p1t18s0mogbysow', // style URL
center: [15.57312,58.483645], // starting position [lng, lat]
zoom: 9 // starting zoom
});
// add markers to map
geojson.features.forEach(function (marker) {
// create a HTML element for each feature
var el = document.createElement('div');
if(marker.properties.title == "Borensberg" || marker.properties.title == "Skänninge"){
el.className = 'marker';
}else{
el.className = 'marker_inactive';
}
// make a marker for each feature and add it to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(
'<h3>' +
marker.properties.title +
'</h3><p>' +
marker.properties.description +
'</p>'
)
)
.addTo(map);
});
</script>