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 */
import { LightningElement } from 'lwc';
import leafletDraw from '@salesforce/resourceUrl/leafletDraw';
import utils from 'c/utils';
const DISTANCE_URL = utils.URL + 'assets/geometrySearch/distance';
......@@ -55,61 +59,42 @@ export default class GeoQuery extends LightningElement {
// 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
// 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
if (this.mapCircle !== undefined)
{
map.removeLayer(this.mapCircle);
}
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
// 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]);
}
map.on(L.Draw.Event.CREATED, function(e) {
var type = e.layerType,
layer = e.layer;
// Clear the markers
this.myAssets = [];
}
if (type === 'circle') {
var centerPnt = layer.getLatLng();
var center = [centerPnt.lng,centerPnt.lat];
console.log(center);
// Get the coordinates of where the user clicked
let coord = e.latlng;
console.log(`Map clicked at lat: ${coord.lat} lon: ${coord.lng}`);
let rad = layer.getRadius();
// 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);
editableLayers.addLayer(layer);
// 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);
//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
let rad = 100000;
// 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);
// Place the radius query indicator on the map
this.mapCircle = L.circle(coord, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: rad
}).addTo(map);
// 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);
console.log(`Translates to lat: ${centerPnt.lat} lat offset: ${latOff} lon: ${centerPnt.lng} lon offset: ${lonOff}`);
// 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('latitude', `${centerPnt.lat}`);
distanceURL.searchParams.append('longitude', `${centerPnt.lng}`);
distanceURL.searchParams.append('radiusMeters', `${rad}`);
console.log('Getting: ' + distanceURL.href);
......@@ -143,7 +128,100 @@ export default class GeoQuery extends LightningElement {
this.myAssets.push(m);
}
});
} 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}`);
// // 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 {
*
* When this is complete, call initializeleaflet()
*/
connectedCallback() {
Promise.all([
loadScript(this, leaflet + '/leaflet.js'),
......@@ -32,7 +30,6 @@ export default class Map extends LightningElement {
});
}
/**
* Constructs the Leaflet map on the page and initializes this.map
*/
......
......@@ -5503,6 +5503,11 @@
"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": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
......
......@@ -14,6 +14,7 @@
"@salesforce/lwc-jest": "^0.4.14"
},
"dependencies": {
"leaflet-draw": "^1.0.4",
"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