ayuda con estos codigos de mapas

MarbaWeb · 7 Oct 2015

buenas a todos a ver si me podeis echar una mano
pongo aqui unos codigos que he conseguido y es muy parecido de lo que quiero hacer pero tendria que juntar los codigos

codigo 1: radius search
lo que hace es que te hace como una lupa en el mapa y te va poniendo y marcando los sitios en un radio de x metros que tu pones pero que vas pasando por ahi la lupa, cosa que no quiero si no que sea desde donde te geolocaliza y sin llevar el raton a ningun sitio
este es el codigo y la fuente

https://www.mapbox.com/mapbox.js/example/v1.0.0/marker-radius-search/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker radius search</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiY29ucXVpc3QiLCJhIjoiY2lmMmN4azV1MDBpNnN2bHY5cWJzcnVjYSJ9.bDVUMafmHce73ZF4Oc4fAw';
var map = L.mapbox.map('map', 'mapbox.emerald')
.setView([40, -95], 4);

var RADIUS = 500000;
var filterCircle = L.circle(L.latLng(40, -75), RADIUS, {
opacity: 1,
weight: 1,
fillOpacity: 0.4
}).addTo(map);

var csvLayer = omnivore.csv('/mapbox.js/assets/data/airports.csv', null, L.mapbox.featureLayer())
.addTo(map);

map.on('mousemove', function(e) {
filterCircle.setLatLng(e.latlng);
csvLayer.setFilter(function showAirport(feature) {
return e.latlng.distanceTo(L.latLng(
feature.geometry.coordinates[1],
feature.geometry.coordinates[0])) < RADIUS;
});
});
</script>

</body>
</html>

y luego este es el que te geolocaliza mediante un boton de find me, si se pudiera quitar el boton mejor pero bueno es lo de menos, entonces seria poner este codigo de geolocalizacion con el otro, es decir que desde donde te geolocaliza te aparezcan todos los lugares a x metros de radio del ejemplo 1, pero sin ese circulo que aparece y que no tengas que ir de lado a lado con el raton arrastrando

https://www.mapbox.com/mapbox.js/example/v1.0.0/geolocation/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolocation</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<style>
.ui-button {
background:#3887BE;
color:#FFF;
display:block;
position:absolute;
top:50%;left:50%;
width:160px;
margin:-20px 0 0 -80px;
z-index:100;
text-align:center;
padding:10px;
border:1px solid rgba(0,0,0,0.4);
border-radius:3px;
}
.ui-button:hover {
background:#3074a4;
color:#fff;
}
</style>

<div id='map'></div>
<a href='#' id='geolocate' class='ui-button'>Find me</a>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiY29ucXVpc3QiLCJhIjoiY2lmMmN4azV1MDBpNnN2bHY5cWJzcnVjYSJ9.bDVUMafmHce73ZF4Oc4fAw';
var geolocate = document.getElementById('geolocate');
var map = L.mapbox.map('map', 'mapbox.streets');

var myLayer = L.mapbox.featureLayer().addTo(map);

// This uses the HTML5 geolocation API, which is available on
// most mobile browsers and modern browsers, but not in Internet Explorer
//
// See this chart of compatibility for details:
// Can I use... Support tables for HTML5, CSS3, etc
if (!navigator.geolocation) {
geolocate.innerHTML = 'Geolocation is not available';
} else {
geolocate.onclick = function (e) {
e.preventDefault();
e.stopPropagation();
map.locate();
};
}

// Once we've got a position, zoom and center the map
// on it, and add a single marker.
map.on('locationfound', function(e) {
map.fitBounds(e.bounds);

myLayer.setGeoJSON({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [e.latlng.lng, e.latlng.lat]
},
properties: {
'title': 'Here I am!',
'marker-color': '#ff8888',
'marker-symbol': 'star'
}
});

// And hide the geolocation button
geolocate.parentNode.removeChild(geolocate);
});

// If the user chooses not to allow their location
// to be shared, display an error message.
map.on('locationerror', function() {
geolocate.innerHTML = 'Position could not be found';
});
</script>

</body>
</html>

ayuda con estos codigos de mapas

MarbaWeb

Comparte esta página