Guest User

Untitled

a guest
Jan 16th, 2019
93
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.22 KB | None | 0 0
  1. fetch('https://www.datos.gov.co/resource/g373-n3yy.json')
  2.  
  3. <html>
  4. <head>
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  6. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  7. <script src="//cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.full.min.js"></script>
  8. <script src="xlsx-model.js"></script>
  9. <script src="script.js"></script>
  10. </head>
  11.  
  12. <body ng-app="xlsxApp" ng-controller="xlsxCtrl" onload = "loadMap()">
  13.  
  14. <div class="container">
  15. <h2>Seleccionar archivo Excel:</h2>
  16. <input type="file" class="form-control" xlsx-model="excel" multiple>
  17. <pre ng-show="excel" id="datos">{{excel | json}}</pre>
  18. </div>
  19.  
  20. <div id = "map" style = "width:640px; height:480px;"></div>
  21. <script>
  22.  
  23. const getLocations = () => {
  24. fetch('https://www.datos.gov.co/resource/g373-n3yy.json')
  25. .then(response => response.json())
  26. .then(locations => {
  27. let locationsInfo = []
  28.  
  29. locations.forEach(location => {
  30. let locationData = {
  31. position:
  32. {lat:location.punto.coordinates[1],lng:location.punto.coordinates[0]},
  33. name:location.nombre_sede
  34. }
  35. locationsInfo.push(locationData)
  36. })
  37. if(navigator.geolocation){
  38. navigator.geolocation.getCurrentPosition((data)=>{
  39. let currentPosition = {
  40. lat: data.coords.latitude,
  41. lng: data.coords.longitude
  42. }
  43. dibujarMapa(currentPosition, locationsInfo)
  44. })
  45. }
  46. })
  47. }
  48. const dibujarMapa = (obj, locationsInfo) => {
  49. let map = new google.maps.Map(document.getElementById('map'),{
  50. zoom: 4,
  51. center: obj
  52. })
  53. let marker = new google.maps.Marker({
  54. position: obj,
  55. title: 'Tu ubicacion'
  56. })
  57. marker.setMap(map)
  58.  
  59. let markers = locationsInfo.map(place => {
  60. return new google.maps.Marker({
  61. position: place.position,
  62. map: map,
  63. title: place.name
  64. })
  65. })
  66. }
  67. window.addEventListener('load',getLocations)
  68. </script>
  69.  
  70. <script async defer
  71. src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvbD8IJCFFc_yUPDT2IxyhPyqQQqEg1fc&callback=initMap">
  72. </script>
  73. </body>
  74. </html>
Add Comment
Please, Sign In to add comment