v2.2

Author: mbellydo

app.js

@@ -3,8 +3,8 @@
     https://www.ipify.org
     https://geo.ipify.org/docs
     https://geo.ipify.org/api/v1?apiKey=KEY&ipAddress=8.8.8.8
+    
     http://www.cualesmiip.com
-    ej.: 192.212.174.101
 
     ----MAP API----
     ---Leaflet---
@@ -15,19 +15,18 @@
     https://developers.google.com/maps/api-key-best-practices
     https://docs.mapbox.com/help/troubleshooting/how-to-use-mapbox-securely/
 */
-
 let button = document.querySelector(".btnSearch");
 
 const ipValue = document.querySelector(".valueIp");
 const countryValue = document.querySelector(".valueCountry");
 const utcValue = document.querySelector(".valueUtc");
 const ispValue = document.querySelector(".valueIsp");
 
-const mapDiv = document.querySelector("#map");
+//const mapDiv = document.querySelector("#map");
 
 function getInputValue(){
     let ipInput = document.querySelector("#ipaddress").value;
-    const key = process.env.api_key;
+    const key = 'at_0iDoj4504blzc9hchqt0E6ogRuCgC';
     const url = 'https://geo.ipify.org/api/v1?apiKey='+key+'&ipAddress=';
 
     urlUpdated = url + ipInput
@@ -38,7 +37,7 @@ function getInputValue(){
     fetch(urlUpdated)
         .then(response => response.json())
         .then(response => updateValues(response))
-        .then(response => createMap(response))
+        //.then(response => createMap(response))
         .catch(error => console.log(error));
 }
 
@@ -59,31 +58,65 @@ function updateValues(response){
 }
 
 function createMap(response) {
-    //console.log("lat: " + response.location.lat + ", lng: " + response.location.lng)
-    let map = L.map('map').setView([response.location.lat, response.location.lng], 16);
+    let latitude = response.location.lat
+    let longitude = response.location.lng
+    console.log("lat: " + latitude + ", lng: " + longitude)
+    /*
+    let map = L.map('map').setView([latitude, longitude], 16);
     let myIcon = L.icon({
         iconUrl: '/images/icon-location.svg',
         iconSize: [28,30],
         iconAnchor: [17, 85],
         popupAnchor: [-3, -76]
     });
+    */
 
+    /*
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(map);
 
-    L.marker([response.location.lat, response.location.lng], {icon: myIcon}).addTo(map)
+    L.marker([latitude, longitude], {icon: myIcon}).addTo(map)
         .bindPopup('Here I Am!')
         .openPopup();
+    */
 
     /*
-        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-            maxZoom: 18,
-            id: 'mapbox/streets-v11',
-            tileSize: 512,
-            zoomOffset: -1,
-            accessToken: 'your.mapbox.access.token'
-        }).addTo(mymap);
+    L.tileLayer('https://api.mapbox.com/styles/v1/mbellydo/ckjoa9yng3mlm19oa7kf5o3cs.html?fresh=true&title=copy&access_token=pk.eyJ1IjoibWJlbGx5ZG8iLCJhIjoiY2tqb2E1anFmMGx2djJ2bzhpeDRkdHFyayJ9.DEAvUgh9QjI7vbAWdxHeaw', {
+        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+        maxZoom: 18,
+        id: 'mapbox://styles/mbellydo/ckjoa9yng3mlm19oa7kf5o3cs',
+        //'mapbox/streets-v11'
+        tileSize: 512,
+        zoomOffset: -1,
+        accessToken: 'your.mapbox.access.token'
+    }).addTo(map);
     */
+    
+    mapboxgl.accessToken = 'pk.eyJ1IjoibWJlbGx5ZG8iLCJhIjoiY2tqb2E1anFmMGx2djJ2bzhpeDRkdHFyayJ9.DEAvUgh9QjI7vbAWdxHeaw';
+    var map = new mapboxgl.Map({
+        container: 'map',
+        style: 'mapbox://styles/mbellydo/ckjoa9yng3mlm19oa7kf5o3cs', // stylesheet location
+        center: [longitude, latitude], // starting position [lng, lat]
+        zoom: 15 // starting zoom
+    });
+    var marker = new mapboxgl.Marker({
+        color: "#FFFFFF",
+        draggable: true
+        }).setLngLat([longitude, latitude])
+        .addTo(map);
+    map.addControl(new mapboxgl.NavigationControl());
+    
+    //Add map view styles
+    var layerList = document.getElementById('menu');
+    var inputs = layerList.getElementsByTagName('input');
+    
+    function switchLayer(layer) {
+        var layerId = layer.target.id;
+        map.setStyle('mapbox://styles/mapbox/' + layerId);
+    }
+    
+    for (var i = 0; i < inputs.length; i++) {
+        inputs[i].onclick = switchLayer;
+    }
 }

index.html

@@ -14,6 +14,10 @@
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
 
+  <!--MAPBOXGL (MAP API)-->
+  <script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script>
+  <link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' />
+
   <title>IP Address Tracker | by Marc Bellido</title>
 </head>
 
@@ -55,6 +59,22 @@ <h1 class="text-center text-white position-relative pb-2">IP Address Tracker</h1
 
   <main class="position-relative w-100 h-75">
     <div id="map"></div>
+    <div id="menu">
+      <input id="streets-v11" type="radio" name="rtoggle" value="streets" checked="checked"/>
+        <label for="streets-v11">streets</label>
+        <input id="light-v10" type="radio" name="rtoggle" value="light" />
+        
+        <label for="light-v10">light</label>
+        <input id="dark-v10" type="radio" name="rtoggle" value="dark" />
+        
+        <label for="dark-v10">dark</label>
+        <input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" />
+        
+        <label for="outdoors-v11">outdoors</label>
+        <input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
+        
+        <label for="satellite-v9">satellite</label>
+    </div>
   </main>
 
   <footer class="d-flex col-6 mx-auto justify-content-end flex-column mt-5">