ToposText

<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-73073339-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-73073339-1'); </script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="SemiColonWeb" /> <link rel="shortcut icon" type="image/png" href="images/icons/favicon.png" /> <link rel="shortcut icon" type="image/png" href="images/icons/favicon.png" />  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900|Caveat+Brush" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/bootstrap.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="css/swiper.css" type="text/css" /> <link rel="stylesheet" href="css/dark.css" type="text/css" /> <link rel="stylesheet" href="css/font-icons.css" type="text/css" /> <link rel="stylesheet" href="css/animate.css" type="text/css" /> <link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />  <link rel="stylesheet" href="css/colors.php?color=C6C09C" type="text/css" />   <link rel="stylesheet" href="demos/nonprofit/nonprofit.css" type="text/css" /> <link rel="stylesheet" href="css/responsive.css" type="text/css" />   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> <link rel="stylesheet" href="leaflet/leaflet-search.css" /> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script> <script src="leaflet/leaflet-search.js"></script> <link rel="stylesheet" href="leaflet/MarkerCluster.css" /> <link rel="stylesheet" href="leaflet/MarkerCluster.Default.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster-src.js"></script> <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>  <title>ToposText</title> </head> <body class="stretched">  <div id="wrapper" class="clearfix places">  <header id="header" class="clearfix static-sticky"> <link rel="shortcut icon" type="image/png" href="https://topostext.org/images/icons/favicon.png" /> <link rel="shortcut icon" type="image/png" href="https://topostext.org/images/icons/favicon.png" /> <div id="header-wrap"> <div class="container clearfix"> <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>  <div id="logo"> <a href="https://topostext.org" class="logo-big standard-logo" data-dark-logo="https://topostext.org/images/logo1_2.png"> <img src="https://topostext.org/images/logo1_2.png" alt="Topostext"> </a> <a href="https://topostext.org" class="logo-small" data-dark-logo="images/lg1.png"> <img class="logo-small" src="https://topostext.org/images/lg1.png" alt="Topostext"> </a>  </div>  <nav id="primary-menu" class="d-lg-flex d-xl-flex justify-content-xl-between justify-content-lg-between fnone with-arrows"> <ul class="align-self-start"> <li><span class="menu-bg col-auto align-self-start d-flex"></span></li> <li ><a href="https://topostext.org"> <div>Home</div> </a></li> <li ><a href="#"> <div>About TT</div> </a> <ul> <li><a href="https://topostext.org/who-we-are"> <div>Who we are</div> </a></li> <li><a href="https://topostext.org/the-project"> <div>The Project</div> </a></li> </ul> </li> <li class="active" ><a href="https://topostext.org/the-places"> <div>Places</div> </a></li> <li ><a href="https://topostext.org/texts"> <div>Ancient Texts</div> </a></li> <li ><a href="https://topostext.org/the-people"> <div>People</div> </a></li> <li><a href="#"> <div>Tools</div> </a> <ul> <li><a href="https://topostext.org/search-tool"> <div>Search Tool</div> </a></li> <li><a href="https://topostext.org/TT-downloads"> <div>Downloads</div> </a></li> </ul> </li> <li><a href="https://topostext.org/contact-us"> <div>Contact us</div> </a></li> </ul> </nav> </div> </div> </header>  <section id="content"> <div> <div class="clearfix"> <div class="justify-content-center"> <div id="mapid"></div> </div> </div> </div> </section>  <footer id="footer" style="background-color: #002D40;"> <div class="container">  </div>  <div id="copyrights" class="bgcolor"> <div class="container clearfix"> <div class="row justify-content-between align-items-center"> <div class="col-md-6"> ToposText Web Version 3.0<br> <div class="copyright-links"> Copyrights © 2019 All Rights Reserved. Developed by <a href="https://pavla.gr" target="_blank">Pavla SA</a> </div> </div> <div class="col-md-6 d-md-flex flex-md-column align-items-md-end mt-4 mt-md-0"> <div class="copyrights-menu copyright-links clearfix"> <a href="texts">Ancient Texts</a>/<a href="https://topostext.org/the-places">Places</a>/<a href="https://topostext.org/the-people">People</a>/<a href="https://topostext.org/contact-us">Contact</a> </div> </div> </div> </div> </div> </footer>  <div class="floating-contact-wrap" style="display:none;"> <div class="floating-contact-btn shadow"> <i class="floating-contact-icon btn-unactive icon-envelope21"></i> <i class="floating-contact-icon btn-active icon-line-plus"></i> </div> <div class="floating-contact-box"> <div id="q-contact" class="widget quick-contact-widget clearfix"> <div class="floating-contact-heading bgcolor p-4 rounded-top"> <h3 class="mb-0 font-secondary h2 ls0">Quick Contact 馃憢</h3> <p class="mb-0">Get in Touch with Us</p> </div> <div class="form-widget" data-alert-type="false"> <div class="form-result"></div> <div class="floating-contact-loader css3-spinner" style="position: absolute;"> <div class="css3-spinner-bounce1"></div> <div class="css3-spinner-bounce2"></div> <div class="css3-spinner-bounce3"></div> </div> <div id="floating-contact-submitted" class="p-5 center"> <i class="icon-line-mail h1 color"></i> <h4 class="t400 mb-0 font-body">Thank You for Contact Us! Our Team will contact you asap on your email Address.</h4> </div> <form class="mb-0" id="floating-contact" action="include/form.php" method="post" enctype="multipart/form-data"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text nobg"><i class="icon-user-alt"></i></span> </div> <input type="text" name="floating-contact-name" id="floating-contact-name" class="form-control required" value="" placeholder="Enter your Full Name"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text nobg"><i class="icon-at"></i></span> </div> <input type="email" name="floating-contact-email" id="floating-contact-email" class="form-control required" value="" placeholder="Enter your Email Address"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text nobg"><i class="icon-comment21"></i></span> </div> <textarea name="floating-contact-message" id="floating-contact-message" class="form-control required" cols="30" rows="4"></textarea> </div> <input type="hidden" id="floating-contact-botcheck" name="floating-contact-botcheck" value="" /> <button type="submit" name="floating-contact-submit" class="btn btn-dark btn-block py-2">Send Message</button> <input type="hidden" name="prefix" value="floating-contact-"> <input type="hidden" name="subject" value="Message From Floating Contact"> <input type="hidden" name="html_title" value="Floating Contact Message"> </form> </div> </div> </div> </div> </div>#wrapper end  <div id="gotoTop" class="icon-angle-up"></div>  <script src="js/jquery.js"></script> <script src="js/plugins.js"></script>  <script src="js/functions.js"></script> <script> jQuery(document).ready( function($){ var elementParent = $('.floating-contact-wrap'); $('.floating-contact-btn').off( 'click' ).on( 'click', function() { elementParent.toggleClass('active', ); }); }); </script> <script> var mymap = L.map('mapid').setView([39.233645, 22.249766], 5); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery 漏 <a href="https://www.mapbox.com/">Mapbox</a>', id: 'mapbox.streets' }).addTo(mymap); // Overlay layers (TMS) var athens = L.tileLayer('https://topostext.org/v3/custom_maps/Athens/{z}/{x}/{y}.png', { tms: true, opacity: 1.0, attribution: ""}); var overlaymaps = {"athens": athens} function toggleFunction(bool) { if (bool==true){ athens.addTo(mymap); mymap.fitBounds([ [37.9629151079, 23.7085861954], [37.9830258166, 23.7443124279] ]) }else{ mymap.removeLayer(athens); } } var command = L.control({position: 'topright'}); command.onAdd = function (map) { var div = L.DomUtil.create('div'); div.innerHTML = ` <div id="athMap" class="leaflet-control-layers leaflet-control-layers-expanded"> <form> <input class="leaflet-control-layers-overlays" id="command" onclick=toggleFunction(this.checked) type="checkbox"> AthensMap </input> </form> </div>`; return div; }; command.addTo(mymap); //your map variable function PoIstile(feature, latlng) { switch(feature.properties["icon"]) { case "polis.png": var polisIcon = new L.icon({ iconUrl: 'images/icons/polis.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: polisIcon}); case "sanctuary.png": var sanctuaryIcon = new L.icon({ iconUrl: 'images/icons/sanctuary.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: sanctuaryIcon}); case "settlement.png": var settlementIcon = new L.icon({ iconUrl: 'images/icons/settlement.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: settlementIcon}); case "region3.png": var region3Icon = new L.icon({ iconUrl: 'images/icons/region3.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: region3Icon}); case "settlementlow3.png": var settlementlow3Icon = new L.icon({ iconUrl: 'images/icons/settlementlow3.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: settlementlow3Icon}); case "region2.png": var region2Icon = new L.icon({ iconUrl: 'images/icons/region2.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: region2Icon}); case "harbor.png": var harborIcon = new L.icon({ iconUrl: 'images/icons/harbor.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: harborIcon}); case "region1.png": var region1Icon = new L.icon({ iconUrl: 'images/icons/region1.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: region1Icon}); case "stadium.png": var stadiumIcon = new L.icon({ iconUrl: 'images/icons/stadium.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: stadiumIcon}); case "cape.png": var capeIcon = new L.icon({ iconUrl: 'images/icons/cape.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: capeIcon}); case "bluedot.png": var bluedotIcon = new L.icon({ iconUrl: 'images/icons/bluedot.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: bluedotIcon}); case "mountain.png": var mountainIcon = new L.icon({ iconUrl: 'images/icons/mountain.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: mountainIcon}); case "squarelow.png": var squarelowIcon = new L.icon({ iconUrl: 'images/icons/squarelow.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: squarelowIcon}); case "cave.png": var caveIcon = new L.icon({ iconUrl: 'images/icons/cave.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: caveIcon}); case "questionmark.png": var questionmarkIcon = new L.icon({ iconUrl: 'images/icons/questionmark.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: questionmarkIcon}); case "fort.png": var fortIcon = new L.icon({ iconUrl: 'images/icons/fort.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: fortIcon}); case "bath.png": var bathIcon = new L.icon({ iconUrl: 'images/icons/bath.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: bathIcon}); case "bridge.png": var bridgeIcon = new L.icon({ iconUrl: 'images/icons/bridge.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: bridgeIcon}); case "castle.png": var castleIcon = new L.icon({ iconUrl: 'images/icons/castle.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: castleIcon}); case "cemetery.png": var cemeteryIcon = new L.icon({ iconUrl: 'images/icons/cemetery.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: cemeteryIcon}); case "church.png": var churchIcon = new L.icon({ iconUrl: 'images/icons/church.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: churchIcon}); case "deme.png": var demeIcon = new L.icon({ iconUrl: 'images/icons/deme.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: demeIcon}); case "demefort.png": var demefortIcon = new L.icon({ iconUrl: 'images/icons/demefort.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: demefortIcon}); case "demelow3.png": var demelow3Icon = new L.icon({ iconUrl: 'images/icons/demelow3.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: demelow3Icon}); case "excavation.png": var excavationIcon = new L.icon({ iconUrl: 'images/icons/excavation.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: excavationIcon}); case "excavationlow3.png": var excavationlow3Icon = new L.icon({ iconUrl: 'images/icons/excavationlow3.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: excavationlow3Icon}); case "hill.png": var hillIcon = new L.icon({ iconUrl: 'images/icons/hill.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: hillIcon}); case "mine.png": var mineIcon = new L.icon({ iconUrl: 'images/icons/mine.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: mineIcon}); case "monastery.png": var monasteryIcon = new L.icon({ iconUrl: 'images/icons/monastery.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: monasteryIcon}); case "monument.png": var monumentIcon = new L.icon({ iconUrl: 'images/icons/monument.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: monumentIcon}); case "museum.png": var museumIcon = new L.icon({ iconUrl: 'images/icons/museum.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: museumIcon}); case "pass.png": var passIcon = new L.icon({ iconUrl: 'images/icons/pass.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: passIcon}); case "settlement45.png": var settlement45Icon = new L.icon({ iconUrl: 'images/icons/settlement45.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: settlement45Icon}); case "smiley.png": var smileyIcon = new L.icon({ iconUrl: 'images/icons/smiley.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: smileyIcon}); case "square.png": var squareIcon = new L.icon({ iconUrl: 'images/icons/square.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: squareIcon}); case "starcastle.png": var starcastleIcon = new L.icon({ iconUrl: 'images/icons/starcastle.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: starcastleIcon}); case "starmonastery.png": var starmonasteryIcon = new L.icon({ iconUrl: 'images/icons/starmonastery.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: starmonasteryIcon}); case "startower.png": var startowerIcon = new L.icon({ iconUrl: 'images/icons/startower.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: startowerIcon}); case "theatre.png": var theatreIcon = new L.icon({ iconUrl: 'images/icons/theatre.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: theatreIcon}); case "tower.png": var towerIcon = new L.icon({ iconUrl: 'images/icons/tower.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: towerIcon}); case "tumb.png": var tumbIcon = new L.icon({ iconUrl: 'images/icons/tumb.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: tumbIcon}); case "villa.png": var villaIcon = new L.icon({ iconUrl: 'images/icons/villa.png', iconSize: [30, 30], // size of the icon }); return L.marker(latlng, {icon: villaIcon}); } }; var markers = L.markerClusterGroup(); $.getJSON('https://topostext.org/api/place/geojson.php', function (geojson) { var geoJsonLayer = L.geoJson(geojson, { pointToLayer: PoIstile, onEachFeature: function (feature, layer) { //layer.bindPopup('<p><b>Name:</b> '+feature.properties.name+'<br /> <b>Hits:</b> '+feature.properties.hits+'<br /> <a href="place/'+feature.properties.placeID+'"><b>View Place</b></a></p>'); layer.bindPopup('<p><b>Name:</b> '+feature.properties.concat1+'<br /> <b>Hits:</b> '+feature.properties.hits+'<br /><b>Category:</b> '+feature.properties.featureTypes+'<br /><b>Description:</b> '+feature.properties.description+'<br /> <a href="place/'+feature.properties.placeID+'"><b>View Place</b></a></p>'); } }); markers.addLayer(geoJsonLayer); mymap.addLayer(markers); }); var controlSearch = new L.Control.Search({ position:'topleft', layer: markers, propertyName: 'concat1', initial: false, zoom: 18, marker: false }); mymap.addControl( controlSearch ); </script> </body> </html>

CINXE.COM

ToposText