IEEE.org     |     IEEE Xplore Digital Library     |     IEEE Standards     |     IEEE Spectrum     |     More Sites

Commit 383aa7ae authored by jedjas12's avatar jedjas12
Browse files

Got polygon working

parent 785bad65
......@@ -4,10 +4,11 @@ import { LightningElement } from 'lwc';
import leafletDraw from '@salesforce/resourceUrl/leafletDraw';
import utils from 'c/utils';
const DISTANCE_URL = utils.URL + 'assets/geometrySearch/distance';
const POLY_URL = utils.URL + '/assets/geometrySearch/polygon';
const RECT_URL = utils.URL + '/assets/geometrySearch/envelope'
// TODO import { assets, bboxAssets } from 'c/controllers';
......@@ -63,29 +64,24 @@ export default class GeoQuery extends LightningElement {
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
map.on(L.Draw.Event.CREATED, function(e) {
map.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
if (type === 'circle') {
//Gets the center point from the circle object
map.addLayer(layer);
var centerPnt = layer.getLatLng();
var center = [centerPnt.lng,centerPnt.lat];
console.log(center);
console.log("The center point is " + center);
//Gets the radius from the created circle object
let rad = layer.getRadius();
console.log("The radius is " + rad);
editableLayers.addLayer(layer);
//let coord = f.latlng;
console.log(`Map clicked at lat: ${centerPnt.lat} lon: ${centerPnt.lng}`);
// If you zoom out far enough the world map will start to repeat accross the screan and leaflet
// will return longitudes like 190 degrees for what would technically be -170
//let mlat = (((coord.lat + 90) % 180) - 90);
//let mlon = (((coord.lng + 180) % 360) - 180);
// Remember where the user actually clicked so we can put the markers in the correct spot
let latOff = Math.trunc(centerPnt.lat / 90);
let lonOff = Math.trunc(centerPnt.lng / 180);
......@@ -97,9 +93,9 @@ export default class GeoQuery extends LightningElement {
distanceURL.searchParams.append('longitude', `${centerPnt.lng}`);
distanceURL.searchParams.append('radiusMeters', `${rad}`);
console.log('Getting: ' + distanceURL.href);
console.log('Posting: ' + distanceURL.href);
// Send out the GET request
// Send out the POST request
this.assetsPromise = utils.post(distanceURL.href);
// When the promise is fulfilled handle it
......@@ -129,100 +125,60 @@ export default class GeoQuery extends LightningElement {
}
});
} else if (type === 'polygon') {
//todo
}
//});
});
// this.map.on('click', this.onMapClicked);
}
}
// Remove the old radius search indicator so we can start a new query
// if (this.mapCircle !== undefined)
// {
// map.removeLayer(this.mapCircle);
// }
// // Remove the old markers from the previous query
// if (this.myAssets !== undefined && this.myAssets.length > 0)
// {
// let i;
// for(i = 0; i < this.myAssets.length; i++)
// {
// map.removeLayer(this.myAssets[i]);
// }
// // Clear the markers
// this.myAssets = [];
// }}
// // Get the coordinates of where the user clicked
// // let coord = e.latlng;
// // console.log(`Map clicked at lat: ${coord.lat} lon: ${coord.lng}`);
// // // If you zoom out far enough the world map will start to repeat accross the screan and leaflet
// // // will return longitudes like 190 degrees for what would technically be -170
// // let mlat = (((coord.lat + 90) % 180) - 90);
// // let mlon = (((coord.lng + 180) % 360) - 180);
// // // Remember where the user actually clicked so we can put the markers in the correct spot
// // let latOff = Math.trunc(coord.lat / 90);
// // let lonOff = Math.trunc(coord.lng / 180);
// // console.log(`Translates to lat: ${mlat} lat offset: ${latOff} lon: ${mlon} lon offset: ${lonOff}`);
// // radius in meters
// //let rad = 100000;
// // Place the radius query indicator on the map
// // this.mapCircle = L.circle(coord, {
// // color: 'red',
// // fillColor: '#f03',
// // fillOpacity: 0.5,
// // radius: rad
// // }).addTo(map);
// // Query the open source database for assets that are within a radius of
// // where the user clicked... this should go in a controller module and is only
// // here because I was hacking this together for a demo
// // const distanceURL = new URL(DISTANCE_URL);
// // distanceURL.searchParams.append('latitude', `${mlat}`);
// // distanceURL.searchParams.append('longitude', `${mlon}`);
// // distanceURL.searchParams.append('radiusMeters', `${rad}`);
} if (type === 'polygon') {
map.addLayer(layer);
let polyLatLng = e.layer.getLatLngs();
console.log("The polygon is at " + polyLatLng);
var body = {
coordinates: []
}
var vertices;
let polyPoints = polyLatLng[0].length;
let j;
for (j = 0; j < polyPoints; j++) {
vertices = {latitude: (polyLatLng[0][j]).lat, longitude: (polyLatLng[0][j]).lng};
body.coordinates.push(vertices);
}
// // console.log('Getting: ' + distanceURL.href);
const polyURL = new URL(POLY_URL);
console.log('Posting: ' + polyURL.href);
// // // Send out the GET request
// // this.assetsPromise = utils.get(distanceURL.href);
// Send out the POST request
this.assetsPromise = utils.post(polyURL.href, body);
// // // When the promise is fulfilled handle it
// // this.assetsPromise.then(response => {
// // // Response should be an array of assets
// // console.log(response);
// When the promise is fulfilled handle it
this.assetsPromise.then(response => {
// Response should be an array of assets
console.log(response);
// // // Initialize the array if need be
// // if( this.myAssets === undefined){
// // this.myAssets = [];
// // }
// Initialize the array if need be
if( this.myAssets === undefined){
this.myAssets = [];
}
// Iterate over the assets and add them to the map
let i;
for(i = 0; i < response.length; i++)
{
const a = response[i];
// // // Iterate over the assets and add them to the map
// // let i;
// // for(i = 0; i < response.length; i++)
// // {
// // const a = response[i];
// Create the map marker. Add back the offset so markers appear where the user clicked.
let m = L.marker(L.latLng(a.lat, a.lon)).addTo(map);
// // // Create the map marker. Add back the offset so markers appear where the user clicked.
// // let m = L.marker(L.latLng(a.lat + (latOff * 90), a.lon + (lonOff * 180))).addTo(map);
// // // Add expanded details for if a user clicks on the marker
// // m.bindPopup(`${a.asset_type}\n\r${a.project_name}`);
// Add expanded details for if a user clicks on the marker
m.bindPopup(`${a.asset_type}\n\r${a.project_name}`);
// // // Keep a reference to the marker so we can remove it later
// // this.myAssets.push(m);
// // }
// // });
// Keep a reference to the marker so we can remove it later
this.myAssets.push(m);
}
});
} if (type === 'rectangle') {
let rectLatLng = e.layer.getLatLngs();
console.log("The rectangle is at " + rectLatLng);
}
});
}
}
......@@ -50,16 +50,20 @@ export default class Map extends LightningElement {
var drawnItems = new L.FeatureGroup();
this.map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
},
draw: {
polygon: {
allowIntersection: false
allowIntersection: false, //Disallows crossing over of lines in polygons
drawError: {
color: '#8B0000', //Turns darkred
message: '<strong>Intersecting lines not allowed<strong>'
}
},
polyline: false,
marker: false,
circlemarker: false
},
edit: {
featureGroup: drawnItems
}
});
this.map.addControl(drawControl);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment