IEEE.org
|
IEEE Xplore Digital Library
|
IEEE Standards
|
IEEE Spectrum
|
More Sites
Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Open at RIT
My Conservation Life
Conservation360
Commits
029c3b5f
Commit
029c3b5f
authored
Mar 30, 2020
by
jedjas12
Browse files
Got leaflet.draw circles showing up, need to fix data population
parent
2911b6de
Changes
4
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
.
a
ssets
Promise
.
then
(
response
=>
{
// Response should be an array of assets
console
.
log
(
response
);
// Initialize the array if need be
if
(
this
.
myA
ssets
===
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"
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment