File: /home/asjudine/public_html/principal/sucursalesmapa.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sucursales</title>
<link rel="stylesheet" href="../css/all.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- MAPA -->
<link rel="stylesheet" href="../css/leaflet.css">
<link rel="stylesheet" href="../css/estilos.css">
<style>
#map {
width: 100%;
height: 800px;
z-index: 8;
margin: 0 auto;
}
main{
padding: 0;
}
</style>
<script src="../js/jquery_3.3.1.js"></script>
</head>
<body>
<?php
include_once("../headerint.php");
include_once("../navint.php");
?>
<main>
<!-- MAPA -->
<div id="map"></div>
</main>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="../js/leaflet.js"></script>
<!--<script src="js/script.js"></script>-->
<script>
/*SUCURSALES*/
var markers = [
["Bogota", 4.605312, -74.071363],
/*["Medellin", 6.2518400, -75.5635900],*/
["Medellin", 6.249461, -75.564962],
/*["Cali", 3.42158, -76.5205],*/
["Cali", 3.452742, -76.531706],
["Pereira", 4.813583, -75.694324],
["Ibague", 4.444922, -75.244484],
["Baranquilla", 10.987707, -74.784817],
["Neiva", 2.916651, -75.285676],
["Bucaramanga", 7.119430, -73.124521],
["Pasto", 1.214838, -77.276184],
["Florencia", 1.613712, -75.613421],
["Villavicencio", 4.151541, -73.637569],
["Monteria", 8.756243, -75.887326],
["Valledupar", 10.476313, -73.245583],
["Cartagena", 10.423616, -75.548047],
["Tunja", 5.534765, -73.364662],
["Mocoa", 1.146197, -76.647892],
["Melgar", 4.205491, -74.641757],
["Cucuta", 7.886659, -72.498262],
["Popayan", 2.442725, -76.607172],
["Santa Marta", 11.244691, -74.212553],
["Yopal", 5.350169, -72.401483]
];
var zoom = 5.5;
var map = L.map('map').setView([4.0000000, -73.0000000], zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
for (var i = 0; i < markers.length; i++)
{
marker = new L.marker([markers[i][1],markers[i][2]])
.bindPopup(markers[i][0])
.addTo(map);
}
</script>
<!--<script>
map.scrollWheelZoom.disable();
this.map.on('click', () => { this.map.scrollWheelZoom.enable();});
this.map.on('mouseout', () => { this.map.scrollWheelZoom.disable();});
</script>-->
<script>
// initialize the map
var map = L.map('map', {
center: [0.5, 102],
zoom: 8
});
// add map layer (OpenStreetMap)
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
}).addTo(map);
// load example GEOJSON (from Wikipedia)
var geojsonFeature = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]
},
"properties": {
"prop0": "A"
}
},{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
]
},
"properties": {
"prop0": "B",
"prop1": 0.0
}
},{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]
]
},
"properties": {
"prop0": "C",
"prop1": {"this": "that"}
}
}
]
};
// load GEOJSON object/array to map
L.geoJSON(geojsonFeature, {
// style features based on properties
style: function(feature) {
switch(feature.properties.prop0){
case 'B': return { color: "red" }
case 'C': return { color: "green" }
}
},
// replace default maker with circle for point feature
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius: 14,
fillColor: "orange",
color: "orange",
weight: 2,
opacity: 1,
fillOpacity: 0.5
});
},
// bind tooltip to each feature
onEachFeature: function(feature, layer) {
// check if specific property is existing
if(feature.properties.prop0) {
layer.bindTooltip("Object: " + feature.properties.prop0); }
}
}).addTo(map);
</script>
<?php
include("../footerint.php");
?>
</body>
</html>