From 1721573c8e8131e229b4fb3d0575b12bbcb01975 Mon Sep 17 00:00:00 2001 From: humano Date: Wed, 13 May 2020 14:31:36 -0500 Subject: [PATCH] prueba de concepto mapero iconos --- css/mapero.css | 83 +++++++++++++++++++ js/mapero.js | 214 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 297 insertions(+) create mode 100644 css/mapero.css create mode 100644 js/mapero.js 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); + }; +}