Je travaille avec nodejs Postgres et un dépliant pour créer une carte choroplèthique. J'ai une requête en cours d'exécution et fonctionne parfaitement sur la carte. Cependant, je ne peux pas sembler obtenir un autre travail comme je veux que ce soit des options qu'un utilisateur peut choisir. C'est le code que j'ai. Je suis vraiment nouveau à ce sujet.Plusieurs requêtes à la base de données Postgres pour choropleth Leaflet map
// Set up database query to display GeoJSON
var OSM = "SELECT row_to_json(fc) FROM (SELECT 'FeatureCollection' As type, array_to_json(array_agg(f)) As features FROM (SELECT 'Feature' As type, ST_AsGeoJSON(lg.geom)::json As geometry, row_to_json((thirty_cens, name_tag)) As properties FROM civil_parishes As lg) As f) As fc";
//var OSM2 ="SELECT row_to_json(fc) FROM (SELECT 'FeatureCollection' As type, array_to_json(array_agg(f)) As features FROM (SELECT 'Feature' As type, ST_AsGeoJSON(lg.geom)::json As geometry, row_to_json((twenty_cens, name_tag)) As properties FROM civil_parishes As lg) As f) As fc";
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', {
title: 'Web Mapping'
});
});
module.exports = router;
/* GET Postgres JSON data */
router.get('/data', function (req, res) {
var client = new pg.Client(conString);
client.connect();
var query = client.query(OSM);
query.on("row", function (row, result) {
result.addRow(row);
});
query.on("end", function (result) {
res.send(result.rows[0].row_to_json);
res.end();
});
});
/* GET the map page */
router.get('/map', function(req, res) {
var client = new pg.Client(conString); // Setup Postgres Client
client.connect(); // connect to the client
var query = client.query(OSM); // Run Query
query.on("row", function (row, result) {
result.addRow(row);
});
// Pass the result to the map page
query.on("end", function (result) {
var data = result.rows[0].row_to_json // Save the JSON as variable data
res.render('map', {
title: "Web Mapping", // Give a title to page
jsonData: data // Pass data to the View
});
})
});
Ceci est ma page map.jade:
#map(style='height: 100%; width: 100%')
script(src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js')
script(src='http://code.jquery.com/jquery-2.1.0.min.js')
script.
var myData = !{JSON.stringify(jsonData)};// Create variable to hold map element, give initial settings to map
//var myData2 = !{JSON.stringify(jsonData2)};// Create variable to hold map element, give initial settings to map
var map = L.map('map').setView([53.2734, -7.778320310000026], 7);
var osmmap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
// Add JSON to map
var censLayer=new L.geoJson(myData,{
style:getStyle,
onEachFeature: onEachFeature
});
//var censLayer2=new L.geoJson(myData2,{
//style:getStyle,
//onEachFeature: onEachFeature
/});
function getStyle(feature) {
return {
weight: 1,
opacity: 1,
color: '#fff',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.f1)
};
}
function getColor(d) {
return d > 100 ? 'blue' :
d > 70 ? 'red' :
d > 50 ? 'green' :
'grey';
}
function onEachFeature(feature, layer){
layer.bindPopup(feature.properties.f2);
}
var baseMaps ={
"osmmap": osmmap};
var overlayMaps = {
"censLayer": censLayer};
L.control.layers(baseMaps,overlayMaps).addTo(map);
Je sais que l'exécution de la requête OSM2 et la relier à cwnsLayer2 ne fonctionne pas. Quelqu'un peut-il donner des conseils pour expliquer pourquoi cela ne fonctionne pas?