-1
Ich versuche, die einzelnen Werte für Lat und Long auf einem Carto featureClick zu bekommen. Ich würde gerne auf ein Feature klicken und die einzelnen Breiten- und Längengrade jedes Features abrufen, aber die Werte sind "nicht identifiziert". Kann mir jemand dabei helfen? Ich habe mit data.lat und data.latlng.lat versucht usw.LatLng kommt nicht identifiziert
JS:
var lat;
var lon;
var geom;
var polygon;
var radius = 300000; // in meters
var geom1 = [];
var points;
// Create the map and center it on the US
var map = new L.Map('map', {
center: [46.5444394,-86.3288595],
zoom: 11,
});
// Add the dark matter base map
L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: 'Dark matter'
}).addTo(map);
var bases = cartodb.createLayer(map, {
user_name: 'bobcowling',
type: 'cartodb',
sublayers: [{
sql: "SELECT * FROM mirta_points",
cartocss: '#mirta_points{marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 1.5; marker-width: 10; marker-fill: #3B007F; }'
}]
}).on("done",function(lyr){
lyr.on('featureClick', function(e, latlng, pos, data, lyr){
lat = data.lat;
lon = data.lon;
console.log(lat, lon);
// cartodb sql api
var sql = new cartodb.SQL({ user: 'bobcowling'});
// select the attribute tables to extract from CartoDB table
sql.execute("WITH point as(SELECT ST_SetSRID(ST_Point('" + lon + "','" + lat + "'),4326) as the_geom)SELECT ST_asGeoJson(ST_Transform(ST_Buffer(ST_Transform(the_geom,3857),'" + radius + "'),4326)) as geom FROM point")
.done(function(data){
if(polygon){
map.removeLayer(polygon);
}
geom = data.rows[0].geom;
polygon = L.geoJson(JSON.parse(geom),{
style:{
color: "#000",
weight: 1,
fillColor: "#9999ff",
fillOpacity: 0.2
}
});
map.addLayer(polygon)
}); // end sql api call
var sql2 = new cartodb.SQL({ user: 'bobcowling'});
// select the attribute tables to extract from CartoDB table
sql2.execute("SELECT ST_asGeoJSON(the_geom) as geometry, country from ufosightings2015 WHERE country = 'USA' AND ST_Intersects((SELECT ST_Buffer(ST_Transform(ST_SetSRID(ST_Point('" + lon + "','" + lat + "'),4326),3857),'" + radius + "')),ST_Transform(the_geom,3857))")
.done(function(data){
if(points){
points = [];
map.removeLayer(points);
geom1 = [];
}
for(i = 0; i < data.total_rows; i++){
geom1 = data.rows[i].geometry;
points = L.geoJson(JSON.parse(geom1),{
style:{
color: "#000",
weight: 2,
fillColor: "#fff"
}
});
map.addLayer(points)
}
}); // end sql api call
}); // end click map_object
bases = lyr;
cartodb.vis.Vis.addInfowindow(map, lyr.getSubLayer(0), ['site_name']);
bases.addTo(map);
})
var sightings = cartodb.createLayer(map, {
user_name: 'bobcowling',
type: 'cartodb',
sublayers: [{
sql: "SELECT * FROM ufosightings2015",
cartocss: '#mirta_points{marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 1.5; marker-width: 10; marker-fill: green; }'
}]
}).on("done",function(lyr){
sightings = lyr;
cartodb.vis.Vis.addInfowindow(map, lyr.getSubLayer(0), ['city', 'state', 'duration', 'shape']);
sightings.addTo(map);
})
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>UFO Sightings Analysis</title>
<!--put your external stylesheet links here-->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/BootSideMenu.css">
<link rel="stylesheet" href="css/style.css">
<!--[if IE<9]>
<link rel="stylesheet" href="css/style.ie.css">
<![endif]-->
</head>
<body>
<!--put your initial page content here-->
<div id="map"></div>
<!--put your external script links here-->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/BootSideMenu.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
CSS
html, body, #map {
width: 100%;
height:100%;
position: absolute;
}
Haben Sie ['e.latlng'] (http://leafletjs.com/reference-1.2.0.html#mouseevent) in der Ereignisfunktion" featureClick "versucht? – geocodezip
Ja, ich habe e.atlnng ausprobiert, auch nicht weiter! :(Ich bekomme immer noch nicht identifizierte Werte! Es ist nicht nur latlng entweder, wenn ich etwas wie data.cartodb_id es auch nicht identifiziert. – blg2
Bitte stellen Sie eine [mcve], die das Problem zeigt. – geocodezip