Forum Discussion

JamesDavis's avatar
JamesDavis
Cloud Apps
07-30-2024
Solved

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

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 comp...
dashboards & reporting
  • Vadim_Pidgornyi's avatar
    Vadim_Pidgornyi
    08-15-2024

    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);
})
Vadim_Pidgornyi's avatar
Vadim_Pidgornyi
Sisense Employee
07-31-2024

 

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's avatar
JamesDavis
Cloud Apps
08-02-2024

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's avatar
    Vadim_Pidgornyi
    Sisense Employee
    08-03-2024

    Hello, 

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

  • Vadim_Pidgornyi's avatar
    Vadim_Pidgornyi
    Sisense Employee
    08-09-2024

    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's avatar
      JamesDavis
      Cloud Apps
      08-12-2024

      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's avatar
        Vadim_Pidgornyi
        Sisense Employee
        08-13-2024

        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