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

Skip to content

GitLab

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

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

parent 2911b6de
Hide whitespace changes
Inline Side-by-side
salesforce/my-conservation-life/force-app/main/default/lwc/geoQuery/geoQuery.js
View file @ 029c3b5f
/* 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,95 +59,169 @@ 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]);
}
// Clear the markers
this.myAssets = [];
}
map.on(L.Draw.Event.CREATED, function(e) {
var type = e.layerType,
layer = e.layer;
// Get the coordinates of where the user clicked
let coord = e.latlng;
if (type === 'circle') {
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
// 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);
let rad = layer.getRadius();
// 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);
editableLayers.addLayer(layer);
//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}`);
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
// 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);
console.log('Getting: ' + distanceURL.href);
// Send out the GET request
this.assetsPromise = utils.get(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);
// 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 + (latOff * 90), a.lon + (lonOff * 180))).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);
}
});
} else if (type === 'polygon') {
//todo
}
//});
});
// 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
salesforce/my-conservation-life/force-app/main/default/lwc/map/map.js
View file @ 029c3b5f
......@@ -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
*/
......
salesforce/my-conservation-life/package-lock.json
View file @ 029c3b5f
......@@ -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",
......
salesforce/my-conservation-life/package.json
View file @ 029c3b5f
......@@ -14,6 +14,7 @@
"@salesforce/lwc-jest": "^0.4.14"
},
"dependencies": {
"leaflet-draw": "^1.0.4",
"url-join": "^4.0.1"
}
}
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

  Home      |      Contact & Support      |     Accessibility     |     Nondiscrimination Policy     |     IEEE Privacy Policy     |     IEEE SA Copyright Policy