cancel
Showing results for 
Search instead for 
Did you mean: 

Can you plot a single point on a scatter map to indicate my office location vs my data plots

JamesDavis
8 - Cloud Apps
8 - Cloud Apps

Hi everyone,

I am wondering if anyone has any widget script that allows you to plot a single point on a scatter map widget that allows you to easily see how your usual plot points are located compared to that specific location?

For example, if my office is based at a specific set of co-ordinates, I would like to add a marker to that location to easily see where it is on the map, compared to the points that are plotted from my data.

I know that you can use set and center a map using the article here: https://community-old.sisense.com/hc/en-us/community/posts/221227568-Center-Zoom-Scatter-Map but just wondered if anyone had managed to ever add a plot instead

Thanks,
James

1 ACCEPTED SOLUTION

Hello, 

Based on the following: 

https://leafletjs.com/examples/custom-icons/

You can use any of the publicly available image URLs, here is an example. 

const officeCoordinates = {
latitude: 65.5859012851966,
longitude: -105.75059585651
};

var greenIcon = L.icon({
    iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

widget.on('beforeviewloaded', (scope, args) => {
const { latitude, longitude } = officeCoordinates;
if (!L.Icon.Default.imagePath) L.Icon.Default.imagePath = '/plugins/images/';
L.marker([latitude, longitude]).addTo(args.options.map);
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(args.options.map);
})

View solution in original post

10 REPLIES 10

Vadim_Pidgornyi
Sisense Team Member
Sisense Team Member

 

Hello, 
 
This can be done by the 2 different approaches
  1. Create a custom column with the Latitude and longitude parameter in the data source for all required points along with the existing points and create a scatter map based on the long/lat

https://docs.sisense.com/win/SisenseWin/scatter-map.htm

  1. Scatter maps use the "Geo" collection in the application database we can add the point there manually with predefined coordinates and the required name which should be used in the data model. Regrettably, we do not have the public API for this and we need to modify the application database directly.
 
Example:

 

{
"_id" : ObjectId("664f3f8761bff53213a68c95"),
"lookupKey" : "Office",
"placetype" : null,
"context" : null, "err" : null,
"latLng" : { "lat" : 33.8388058603423,
"lng" : 66.0264709817607 },
"name" : "Office",
"place_name" : "Office",
"text" : "Office",
"version" : "6.0"
}

 Kind regards

Hi Vadim,

Thanks for the reply.  I am unable to amend the data source to do this, but tried adding the entry to the geoLocation collection in mongo and wasn't able to get this manual point to add to the map, when I plotted data points as usual, it wasn't there, just the points from the data itself.

I'm also not sure that adding to the MongoDB directly will work as we host 10 different organisations in a single MongoDB, each with access to their data using data security.  They would all need their own "office" with different locations and I'm not sure that we could restrict their own single custom point to just themselves.

I was hoping there may be some way to plot a different icon of some kind using widget script with set co-ordinates within the Sisense application, but it sounds like that might not be possible.

Thanks,
James

Hello, 

Let me have some time to review the possibility of implementation with a script

Hello, here is the widget-level script which will add the point from the picture on the scatter map. 

Please put 2 images under the "/branding/customImage/" folder with the following naming:   

marker-shadow.png

marker-icon.png

const officeCoordinates = {
	latitude: 65.5859012851966,
	longitude: -105.75059585651
};

widget.on('beforeviewloaded', (scope, args) => {
	const { latitude, longitude } = officeCoordinates;
	if (!L.Icon.Default.imagePath) L.Icon.Default.imagePath = '/branding/customImage';
	L.marker([latitude, longitude]).addTo(args.options.map);
})

 You can apply further customization using the guide from : 

https://leafletjs.com/examples.html

Vadim_Pidgornyi_0-1723237918783.png

 

Kind regards,

Vadim

Hi Vadim,

Thanks for taking a look at a widget script option.  I can see that an image is trying to load at the co-ordinates I have used, but the images themselves are getting a 404 not found error.

I think I have them in the correct place: 

C:\Program Files\Sisense\app\resources\Branding\customImage

JamesDavis_0-1723464984698.png

But on the map it showing box where it tries to load the image:

JamesDavis_1-1723465037390.png

And developer tools say it cannot find the marker-icon.png and marker-shadow.png with error 404:

JamesDavis_2-1723465141360.png

 

Do you have any thoughts on what I might be doing wrong?

Thanks,
James

 



 

 

 

Hello,

The following path is useful for Linux instances. 

For Windows, you can create a folder inside of the plugins folder under the following path. 

C:\Program Files\Sisense\app\plugins\images

Put the images there and define them in the widget script code

if (!L.Icon.Default.imagePath) L.Icon.Default.imagePath = '/plugins/images/';

Kind regards,

Vadim

Hi Vadim,

That is great, that worked! 

I have one more question about this one, do you know if it is possible to use a URL to define the location of the icon-marker.png and icon-shadow.png to plot on the map?  I tried a URL in the imagePath option above and it didn't load an image, so I wonder if I need to define that differently.

Basically, I am looking now at whether different users could define a different marker image based on their code and the images being available in a location online, rather than necessarily having to use the same icon from the plugins/images folder.

Thanks!
James

Hello, 

Based on the following: 

https://leafletjs.com/examples/custom-icons/

You can use any of the publicly available image URLs, here is an example. 

const officeCoordinates = {
latitude: 65.5859012851966,
longitude: -105.75059585651
};

var greenIcon = L.icon({
    iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

widget.on('beforeviewloaded', (scope, args) => {
const { latitude, longitude } = officeCoordinates;
if (!L.Icon.Default.imagePath) L.Icon.Default.imagePath = '/plugins/images/';
L.marker([latitude, longitude]).addTo(args.options.map);
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(args.options.map);
})

Thanks Vadim - that worked perfectly!

DRay
Community Team Member
Community Team Member

Hello @JamesDavis ,

I wanted to follow up to see if the solution offered by @Vadim_Pidgornyi worked for you.

If so, please click the 'Accept as Solution' button on the appropriate post, that way other users with the same questions can find the answer. If not, please let us know so that we can continue to help.

Thank you.

David Raynor (DRay)