diff --git a/css/mapero.css b/css/mapero.css
new file mode 100644
index 0000000..3ada153
--- /dev/null
+++ b/css/mapero.css
@@ -0,0 +1,83 @@
+body { margin:0; padding:0; overflow:hidden; touch-action:none; }
+#map { position:absolute; top:0; bottom:0; width:100%; overflow:hidden; }
+p {font-size: 14px;}
+
+#sidebar { 
+    z-index: 10;  position: absolute;  right: 10px;  top: 10px; width: 320px;
+    background-color:rgba(255,255,255,.9); padding: 20px; border-radius: 3px; }
+#title h1 { color: #390; }
+#introduction p { margin-bottom: 10px; line-height: 1.5em }
+
+#taxas>div { display: inline-block; }
+#taxas p { text-align: center; }
+.button { 
+    background-color: #fff; background-size:cover; 
+    border-radius: 5px; border: #390 1px solid; height:48px; width: 48px; 
+    margin: 4px; margin-left: 8px;
+}
+.button.active { border:color:#390; }
+.button:hover { border-color: #390; }
+
+.button#Plantae { background-image: url('img/icon0_plantae.png') }
+.button#Aves { background-image: url('img/icon0_aves.png') }
+.button#Insecta { background-image: url('img/icon0_insecta.png') }
+.button#Fungi { background-image: url('img/icon0_fungi.png') }
+
+.button#Plantae.active { background-image: url('img/icon1_plantae.png') }
+.button#Aves.active { background-image: url('img/icon1_aves.png') }
+.button#Insecta.active { background-image: url('img/icon1_insecta.png') }
+.button#Fungi.active { background-image: url('img/icon1_fungi.png') }
+
+.button#Plantae:hover { background-image: url('img/icon1_plantae.png') }
+.button#Aves:hover { background-image: url('img/icon1_aves.png') }
+.button#Insecta:hover { background-image: url('img/icon1_insecta.png') }
+.button#Fungi:hover { background-image: url('img/icon1_fungi.png') }
+
+.marker { 
+    border: #fff 1.4px solid; border-radius: 50%; cursor: pointer; box-shadow: 1px 1px 1px;
+    height: 48px; width: 48px;  margin: -24px 0 0 -24px;
+    background-size: cover; }
+.marker:hover {  z-index: 1; border-color: #390; }
+.marker.sm { 
+    background-color: none; border-width: 0; box-shadow: 0 0 0;
+    height: 32px; width: 32px; margin-left: -16px; margin-top:-16px;}
+.marker.sm:hover { border: #fff 1px solid; }
+
+#me { height: 16px; width: 16px; background-size: 100% 100%; }
+
+.mapboxgl-ctrl-geocoder { z-index: 0; }
+
+.mapboxgl-popup { width: 280px; }
+.mapboxgl-popup-close-button { background-color: rgba(255,255,255,.9); height: 30px; width: 30px; font-size: 18px; padding:2px; border-radius: 1px;}
+.mapboxgl-popup p { font-size: 12px; line-height: 16px; margin-top:6px;}
+.img-md { height: 260px; width:260px; background-position: center center; background-repeat: no-repeat; background-size: cover; }
+
+.loading { display:none; }
+
+@media only screen and (max-width: 479px) {
+
+   .mobile-hide{ display: none; }
+   .mobile-show{ display: inline-block !important; }
+
+    #sidebar { 
+        z-index: 2; border-radius: 0; padding:2vh 4vw 2vh 4vw;
+        position: absolute; width:100%; height:150px;
+        bottom: 30px; left:0; right:0; top:inherit;
+    }
+    #sidebar p { margin-bottom: 2vh; font-size: 1em; }
+
+    #title { margin-bottom: 2vh; }
+    #title h1 { font-size: 20px; line-height: 26px; display: inline-block; }
+    #info { 
+        height:18px; width:18px; display: inline-block; margin-left:3px;
+        background-image: url('img/arrow_down.svg'); background-size:cover; }
+
+    .button { width:15vw; margin: .5vh 1vw .5vh 10vw; height:15vw;} 
+    .button:first-of-type { margin-left:5vw; }
+    .button img { height:100%; width: 100%; }
+    #taxas p { text-align: center; margin-left: 5vw;  }
+
+    .mapboxgl-popup-content { padding: 1vw; padding-bottom: 2vw; }
+    .mapboxgl-popup { width: 52vw; }
+    .img-md { height: 50vw; width: 50vw;}
+}
\ No newline at end of file
diff --git a/js/mapero.js b/js/mapero.js
new file mode 100644
index 0000000..b31fa27
--- /dev/null
+++ b/js/mapero.js
@@ -0,0 +1,214 @@
+mapboxgl.accessToken = 'pk.eyJ1IjoieXVuamllIiwiYSI6ImNpZnd0ZjZkczNjNHd0Mm0xcGRoc21nY28ifQ.8lFXo9aC9PfoKQF9ywWW-g';
+//var sfmapbox = [-122.413692, 37.775712];
+var sfmapbox = [-72, 4];
+// sfmapbox = [-122,37];
+var mylocation = sfmapbox;
+var taxon_active = 'Plantae';
+var markers = {};
+var marker_me;
+
+// Create a new dark theme map
+var map = new mapboxgl.Map({
+    container: 'map', // container id
+    style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
+    center: sfmapbox, // Center of USA
+    zoom: 12, // starting zoom
+    // minZoom: 11,
+
+});
+
+map.on('load', function() {
+
+    // Disable scroll in posts
+    if (window.location.search.indexOf('embed') !== -1) map.scrollZoom.disable();
+
+    //Add controls for navigation, geocoding and geolocation
+    var geocoder = new mapboxgl.Geocoder();
+    map.addControl(geocoder);
+    map.addControl ( new mapboxgl.Navigation({ position: 'top-left' }) );
+    var geolocator = new mapboxgl.Geolocate({ position: 'top-left' });
+    map.addControl(geolocator);
+
+    //go to SF and retrieve data
+    mapMe(mylocation);
+    getObservation(mylocation, taxon_active);
+
+    //Toggle icons in the event of zoom change
+    map.on('zoom', function() {
+        var zoom = map.getZoom();
+        $('.marker').each(function() {
+            checkZoom(this, zoom);
+        });
+    });
+
+    //Interact with taxas buttons
+    $('.button').on('click', function() {
+        $('.button').removeClass('active');
+        $(this).addClass('active');
+        taxon_active = $(this).attr('id');
+        getObservation(mylocation, taxon_active);
+        $('.mapboxgl-popup') ? $('.mapboxgl-popup').remove() : null;
+    });
+
+    //Redo quest on location change
+    geocoder.on('result', function(e) {
+        // window.alert('new location: ' + e.result.center);
+        mylocation = e.result.center;
+        getObservation(mylocation, taxon_active);
+        mapMe(mylocation);
+        $('.mapboxgl-popup') ? $('.mapboxgl-popup').remove() : null;
+    });
+
+    //Redo quest on geolocation
+    geolocator.on('geolocate', function(position) {
+        mylocation = [position.coords.longitude, position.coords.latitude];
+        map.zoomTo(12);
+        mapMe(mylocation);
+        getObservation(mylocation, taxon_active);
+    });
+
+    //Mobile friendly
+    $('#info').on('click', function() {
+        if ( $('#introduction').is(':visible') ) {
+            $('#introduction').hide();
+            $('#info').css('background-image', 'url(img/arrow_down.svg)');
+            $('#sidebar').css('height', '150px');
+        } else {
+            $('#introduction').show();
+            $('#info').css("background-image", 'url(img/arrow_up.svg)');
+            $('#sidebar').css('height', '240px');
+        }
+    })
+});
+
+// Map the user location using a marker called me
+function mapMe(location) {
+    if (!document.getElementById('me')) {
+        var me = document.createElement('div');
+        me.id = "me";
+        me.style.backgroundImage = 'url(img/icon_me.png)';
+        marker_me = new mapboxgl.Marker(me)
+            .setLngLat(location)
+            .addTo(map);
+    } else {
+        marker_me.setLngLat(location);
+    }
+
+    map.flyTo({ 'center': location, 'zoom': 12 });
+}
+
+// Retrieve from API, map the markers to the map, and save relevant data in html. Pop-ups for marker on click.
+function getObservation(location, taxon) {
+
+    $('.loading').show();
+
+    // clean up previous markers
+    for (marker in markers) {
+        markers[marker].remove();
+    }
+    markers = {};
+
+    //create url
+    var iNat_url = createURL(location, taxon);
+
+    // get results from url
+    try {
+        iNat_results = $.getJSON(iNat_url, function() {
+            // console.log("API results: ", iNat_results.responseJSON.results);
+
+            // Update count in html description
+            $('#count').html(iNat_results.responseJSON.features.length);
+
+            // Used for marker change on zoom level
+            var zoom = map.getZoom();
+
+            // Iterate through all API results
+            iNat_results.responseJSON.features.forEach(function(marker) {
+                // create an img element for the marker
+                var el = document.createElement('div');
+                el.className = 'marker';
+                //img_url = marker.photos[0].url;
+                img_url = marker.properties.imagen;
+
+                // text description for popup
+                var species = marker.species_guess ? marker.species_guess : 'Unknown';
+                //var user = marker.user.name ? marker.user.name : 'Anonymous';
+                var user = marker.properties.title ? marker.properties.title : 'Anonymous';
+                text = species + ' observed on ' + marker.properties.time + ' by ' + user + ' - ';
+                text = text.charAt(0).toUpperCase() + text.substr(1);
+
+                // img_url = img_url.replace("http", "https");
+                //$(el).attr('data-img', img_url);
+                $(el).attr('data-img', img_url);
+              //  $(el).attr('data-taxon', taxon);
+                //$(el).attr('data-text', text);
+                $(el).attr('data-text', marker.properties.title);
+                $(el).attr('html', marker.properties.description);
+                //$(el).html(marker.properties.description);
+                $(el).attr('data-link', marker.properties.uri);
+                $(el).attr('data-link', marker.properties.imagen);
+                //$(el).attr('data-latlon', marker.geojson.coordinates);
+                $(el).attr('data-latlon', marker.geometry.coordinates);
+
+                // Map to the map with markers for the current zoomlevel
+                checkZoom(el, zoom);
+
+                // add marker to map
+              //  markers[marker.id] = new mapboxgl.Marker(el)
+                markers[marker.control] = new mapboxgl.Marker(el)
+                  //  .setLngLat(marker.geojson.coordinates)
+                    .setLngLat(marker.geometry.coordinates)
+                    .addTo(map);
+            });
+
+            $('.loading').hide();
+
+            // markers on click
+            $('.marker').click(function(e) {
+
+                e.stopPropagation();
+
+                var latlon = $(this).attr('data-latlon').split(",");
+                latlon = [Number(latlon[0]), Number(latlon[1])];
+
+
+                var descripcion = $(this).attr('html');//.replace('square', 'medium');
+
+                $('.mapboxgl-popup') ? $('.mapboxgl-popup').remove() : null;
+
+                var popup = new mapboxgl.Popup()
+                    .setLngLat(latlon)
+                    .setHTML(descripcion)
+                    .addTo(map);
+
+                            });
+                        });
+                    } catch (e) {
+                        window.alert("API not working properly :(")
+                    }
+}
+
+// Create the url for API request
+function createURL(location, taxon) {
+    //url = ['https://api.inaturalist.org/v1/observations?geo=true&native=true&photos=true&lat=',location[1], '&lng=', location[0], '&radius=5&iconic_taxa=', taxon, '&order=desc&order_by=created_at'].join('');
+    url = ['http://localhost/tupali/archivos/74.geojson'].join('');
+    console.log("API url: ", url);
+    return url;
+}
+
+// Check what zoom level for what markers, then map to map
+function checkZoom(marker, zoom) {
+    var img;
+    if (zoom < 12) {
+        $(marker).addClass('sm');
+      //  img = 'url(img/marker_' + $(marker).attr('data-taxon').toLowerCase() + '.png)';
+      //  img = 'url(img/marker_' + $(marker).attr('data-taxon').toLowerCase() + '.png)';
+        img = 'url(https://tupale.co/milfs/images/secure/?file=150/da6d16547658ebc06c5378b30d1ee4bf.png)';
+        $(marker).css("background-image", img);
+    } else {
+        $(marker).removeClass('sm');
+        img = 'url(' + $(marker).attr('data-img') + ')';
+      //  img = 'url(https://tupale.co/milfs/images/secure/?file=150/da6d16547658ebc06c5378b30d1ee4bf.png)';
+        $(marker).css("background-image", img);
+    };
+}