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

[JamesDavis]

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

[Vadim_Pidgornyi]

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

[JamesDavis]

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

[Vadim_Pidgornyi]

Hello, 

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

[Vadim_Pidgornyi]

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

Kind regards,

Vadim

[JamesDavis]

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

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

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

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

Thanks,
James

[Vadim_Pidgornyi]

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

[JamesDavis]

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

[Vadim_Pidgornyi · 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);
})

[JamesDavis]

Thanks Vadim - that worked perfectly!

[DRay]

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.