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

Commit 029c3b5f authored by jedjas12's avatar jedjas12
Browse files

Got leaflet.draw circles showing up, need to fix data population

parent 2911b6de
/* eslint-disable vars-on-top */
/* eslint-disable no-console */ /* eslint-disable no-console */
import { LightningElement } from 'lwc'; import { LightningElement } from 'lwc';
import leafletDraw from '@salesforce/resourceUrl/leafletDraw';
import utils from 'c/utils'; import utils from 'c/utils';
const DISTANCE_URL = utils.URL + 'assets/geometrySearch/distance'; const DISTANCE_URL = utils.URL + 'assets/geometrySearch/distance';
...@@ -55,95 +59,169 @@ export default class GeoQuery extends LightningElement { ...@@ -55,95 +59,169 @@ export default class GeoQuery extends LightningElement {
// Implement map "on click" handler // Implement map "on click" handler
// If we could keep a reference to the map via a class variable (this.map = event.detail) this would be a lot cleaner // If we could keep a reference to the map via a class variable (this.map = event.detail) this would be a lot cleaner
// to bad this map doesn't wish to cooperate at the time being. // to bad this map doesn't wish to cooperate at the time being.
map.on('click', function(e) {
// Remove the old radius search indicator so we can start a new query var editableLayers = new L.FeatureGroup();
if (this.mapCircle !== undefined) map.addLayer(editableLayers);
{
map.removeLayer(this.mapCircle);
}
// Remove the old markers from the previous query map.on(L.Draw.Event.CREATED, function(e) {
if (this.myAssets !== undefined && this.myAssets.length > 0) var type = e.layerType,
{ layer = e.layer;
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 if (type === 'circle') {
let coord = e.latlng; var centerPnt = layer.getLatLng();
var center = [centerPnt.lng,centerPnt.lat];
console.log(center);
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 let rad = layer.getRadius();
// 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 editableLayers.addLayer(layer);
let latOff = Math.trunc(coord.lat / 90);
let lonOff = Math.trunc(coord.lng / 180); //let coord = f.latlng;
console.log(`Translates to lat: ${mlat} lat offset: ${latOff} lon: ${mlon} lon offset: ${lonOff}`); console.log(`Map clicked at lat: ${centerPnt.lat} lon: ${centerPnt.lng}`);
// radius in meters // If you zoom out far enough the world map will start to repeat accross the screan and leaflet
let rad = 100000; // 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);
// Place the radius query indicator on the map // Remember where the user actually clicked so we can put the markers in the correct spot
this.mapCircle = L.circle(coord, { let latOff = Math.trunc(centerPnt.lat / 90);
color: 'red', let lonOff = Math.trunc(centerPnt.lng / 180);
fillColor: '#f03',
fillOpacity: 0.5,
radius: rad
}).addTo(map);
console.log(`Translates to lat: ${centerPnt.lat} lat offset: ${latOff} lon: ${centerPnt.lng} lon offset: ${lonOff}`);
const distanceURL = new URL(DISTANCE_URL);
distanceURL.searchParams.append('latitude', `${centerPnt.lat}`);
distanceURL.searchParams.append('longitude', `${centerPnt.lng}`);
distanceURL.searchParams.append('radiusMeters', `${rad}`);
// Query the open source database for assets that are within a radius of console.log('Getting: ' + distanceURL.href);
// 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}`);
console.log('Getting: ' + distanceURL.href); // Send out the GET request
this.assetsPromise = utils.get(distanceURL.href);
// Send out the GET request // When the promise is fulfilled handle it
this.assetsPromise = utils.get(distanceURL.href); this.assetsPromise.then(response => {
// Response should be an array of assets
console.log(response);
// When the promise is fulfilled handle it // Initialize the array if need be
this.assetsPromise.then(response => { if( this.myAssets === undefined){
// Response should be an array of assets this.myAssets = [];
console.log(response); }
// Initialize the array if need be // Iterate over the assets and add them to the map
if( this.myAssets === undefined){ let i;
this.myAssets = []; for(i = 0; i < response.length; i++)
} {
const a = response[i];
// Iterate over the assets and add them to the map // Create the map marker. Add back the offset so markers appear where the user clicked.
let i; let m = L.marker(L.latLng(a.lat + (latOff * 90), a.lon + (lonOff * 180))).addTo(map);
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. // Add expanded details for if a user clicks on the marker
let m = L.marker(L.latLng(a.lat + (latOff * 90), a.lon + (lonOff * 180))).addTo(map); m.bindPopup(`${a.asset_type}\n\r${a.project_name}`);
// Add expanded details for if a user clicks on the marker // Keep a reference to the marker so we can remove it later
m.bindPopup(`${a.asset_type}\n\r${a.project_name}`); this.myAssets.push(m);
}
});
// Keep a reference to the marker so we can remove it later } else if (type === 'polygon') {
this.myAssets.push(m); //todo
} }
}); //});
}); });
// this.map.on('click', this.onMapClicked); // this.map.on('click', this.onMapClicked);
} }
} }
\ No newline at end of file // 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}`);
// // console.log('Getting: ' + distanceURL.href);
// // // Send out the GET request
// // this.assetsPromise = utils.get(distanceURL.href);
// // // 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 = [];
// // }
// // // 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 + (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}`);
// // // Keep a reference to the marker so we can remove it later
// // this.myAssets.push(m);
// // }
// // });
\ No newline at end of file
...@@ -16,8 +16,6 @@ export default class Map extends LightningElement { ...@@ -16,8 +16,6 @@ export default class Map extends LightningElement {
* *
* When this is complete, call initializeleaflet() * When this is complete, call initializeleaflet()
*/ */
connectedCallback() { connectedCallback() {
Promise.all([ Promise.all([
loadScript(this, leaflet + '/leaflet.js'), loadScript(this, leaflet + '/leaflet.js'),
...@@ -32,7 +30,6 @@ export default class Map extends LightningElement { ...@@ -32,7 +30,6 @@ export default class Map extends LightningElement {
}); });
} }
/** /**
* Constructs the Leaflet map on the page and initializes this.map * Constructs the Leaflet map on the page and initializes this.map
*/ */
......
...@@ -5503,6 +5503,11 @@ ...@@ -5503,6 +5503,11 @@
"invert-kv": "^1.0.0" "invert-kv": "^1.0.0"
} }
}, },
"leaflet-draw": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/leaflet-draw/-/leaflet-draw-1.0.4.tgz",
"integrity": "sha512-rsQ6saQO5ST5Aj6XRFylr5zvarWgzWnrg46zQ1MEOEIHsppdC/8hnN8qMoFvACsPvTioAuysya/TVtog15tyAQ=="
},
"left-pad": { "left-pad": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz", "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"@salesforce/lwc-jest": "^0.4.14" "@salesforce/lwc-jest": "^0.4.14"
}, },
"dependencies": { "dependencies": {
"leaflet-draw": "^1.0.4",
"url-join": "^4.0.1" "url-join": "^4.0.1"
} }
} }
Supports Markdown
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